Something went wrong. Try again.
Schedule posts and reposts to Bluesky (and other PDSes) with Cloudflare workers. skyscheduler.work
scheduling social-media cloudflare bsky service cloudflare-workers bsky-tool bluesky
Something went wrong. Try again.
3.0 kB · 84 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384import type { Post } from "../classes/post";import { EmbedDataType } from "../enums";import { MAX_LENGTH } from "../limits";import type { BaseElementProps } from "../types";import { isAltEditableType } from "../utils/helpers";import { PostContent } from "./post";
interface EditedPostProps extends BaseElementProps { post: Post;};
export function PostAltTextEdit(props: EditedPostProps) { const post: Post = props.post; let num = -1; const embedAltTextEdit = post.embedContent?.map((embedData) => { ++num; if (!isAltEditableType(embedData.type)) return;
const thumbURL = (embedData.type == EmbedDataType.Video) ? "thumbs/video.png" : `preview/file/${embedData.content}`; return (<div class="editAltBlock" alteditfor={embedData.content}> <img width="120px" height="120px" class="editThumbPreview" src={thumbURL} /><br /> <center> <input type="hidden" name={`altEdits.${num}.content`} value={embedData.content} /> <input type="hidden" data-alt={true} name={`altEdits.${num}.alt`} value={embedData.alt} /> {/* Accessible handlers will be added in via the htmx header */} <a tabindex={0} role="button" data-file={embedData.content} class="editPostAlt secondary outline">Edit Alt</a> </center> </div>); });
const altEditBlock = embedAltTextEdit; if (altEditBlock?.at(0) === undefined || altEditBlock.length <= 0) { return null; }
return (<section> <header><small>Embed Edits</small></header> <hr /> <div class="alt-editors"> {altEditBlock} </div> <hr /> </section>);}
export function PostEdit(props: EditedPostProps) { const post: Post = props.post; // If this post is posted, just show the same object again. if (post.posted) { return (<PostContent post={post} />); }
// yeah these are kind egregious... const editSpinner: string = `editSpinner-${post.uuid}`; const editResponse: string = `editResponse-${post.uuid}`; const editPostField: string = `edit-${post.uuid}`; const editCountId: string = `editCount-${post.uuid}`; const postFormId: string = `editPost-${post.uuid}`;
return (<form id={postFormId} hx-ext="form-json" hx-post={`/post/edit/${post.uuid}`} hx-target={`#${editResponse}`} hx-swap="innerHTML swap:0.2s" hx-indicator={`#${editSpinner}`}>
<section> <textarea autofocus name="content" id={editPostField} rows={6} tabindex={0} required> {post.content} </textarea> <small>Character Count: <span id={editCountId}>0/{MAX_LENGTH}</span></small> </section>
<PostAltTextEdit post={post} /> <progress id={editSpinner} class="htmx-indicator" /> <center class="postControls"> <div id={editResponse}> </div> <button tabindex={0}>Update Post</button> <a tabindex={0} role="button" class="secondary cancelEditButton" hx-swap="innerHTML swap:0.2s" hx-get={`/post/edit/${post.uuid}/cancel`} hx-confirm="Are you sure you want to cancel editing?">Cancel</a> </center> </form>);};