Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
16 kB · 545 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546import type { Fact, ReplicacheMutators } from "src/replicache";import { useUIState } from "src/useUIState";
import { generateKeyBetween } from "fractional-indexing";import { focusPage } from "src/utils/focusPage";import { v7 } from "uuid";import { Replicache } from "replicache";import { setEditorState, useEditorStates } from "src/state/useEditorState";import { elementId } from "src/utils/elementId";import { UndoManager } from "src/undoManager";import { focusBlock } from "src/utils/focusBlock";import { usePollBlockUIState } from "./PollBlock/pollBlockState";import { focusElement } from "src/utils/focusElement";import { BlockButtonSmall } from "components/Icons/BlockButtonSmall";import { BlockCalendarSmall } from "components/Icons/BlockCalendarSmall";import { BlockCanvasPageSmall } from "components/Icons/BlockCanvasPageSmall";import { BlockDocPageSmall } from "components/Icons/BlockDocPageSmall";import { BlockEmbedSmall } from "components/Icons/BlockEmbedSmall";import { BlockImageSmall } from "components/Icons/BlockImageSmall";import { ImageGallerySmall } from "components/Icons/ImageGallerySmall";import { BlockMailboxSmall } from "components/Icons/BlockMailboxSmall";import { BlockPollSmall } from "components/Icons/BlockPollSmall";import { PostListSmall } from "components/Icons/PostListSmall";import { ParagraphSmall, Header1Small, Header2Small, Header3Small,} from "components/Icons/BlockTextSmall";import { LinkSmall } from "components/Icons/LinkSmall";import { BlockRSVPSmall } from "components/Icons/BlockRSVPSmall";import { ListUnorderedSmall, ListOrderedSmall,} from "components/Toolbar/ListToolbar";import { BlockMathSmall } from "components/Icons/BlockMathSmall";import { BlockCodeSmall } from "components/Icons/BlockCodeSmall";import { QuoteSmall } from "components/Icons/QuoteSmall";import { LockTiny } from "components/Icons/LockTiny";import { LAST_USED_CODE_LANGUAGE_KEY } from "src/utils/codeLanguageStorage";import { getPageBlocks } from "src/replicache/getBlocks";
type Props = { parent: string; entityID: string | null; position: string | null; nextPosition: string | null; factID?: string | undefined; first?: boolean; className?: string;};
async function createBlockWithType( rep: Replicache<ReplicacheMutators>, args: { entity_set: string; parent: string; position: string | null; nextPosition: string | null; entityID: string | null; }, type: Fact<"block/type">["data"]["value"],) { let entity;
if (!args.entityID) { entity = v7(); await rep?.mutate.addBlock({ parent: args.parent, factID: v7(), permission_set: args.entity_set, type: type, position: generateKeyBetween(args.position, args.nextPosition), newEntityID: entity, }); } else { entity = args.entityID; await rep?.mutate.assertFact({ entity, attribute: "block/type", data: { type: "block-type-union", value: type }, }); } return entity;}
function clearCommandSearchText(entityID: string) { let existingState = useEditorStates.getState().editorStates[entityID]; if (!existingState) return; let tr = existingState.editor.tr; tr.deleteRange(1, tr.doc.content.size - 1); // Dispatch through the view so trackUndoRedo records an inverse entry; // a direct apply left the cleared "/query" scaffolding with no inverse and // it reappeared on redo. Fall back to a direct state write if unmounted. if (existingState.view) { existingState.view.dispatch(tr); } else { setEditorState(entityID, { editor: existingState.editor.apply(tr) }); }}
type Command = { name: string; icon: React.ReactNode; type: string; alternateNames?: string[]; hiddenInPublication?: boolean; hiddenOnPublicationPage?: boolean; publicationOnly?: boolean; // Only shown when the publication has paid memberships enabled, the current // page is the post's first page, and no delimiter exists yet (gating is // computed against the served first page, and one delimiter is enough). membersOnlyDelimiter?: boolean; onSelect: ( rep: Replicache<ReplicacheMutators>, props: Props & { entity_set: string }, undoManager: UndoManager, ) => Promise<any>;};export const blockCommands: Command[] = [ // please keep these in the order that they appear in the menu, grouped by type { name: "Text", icon: <ParagraphSmall />, type: "text", onSelect: async (rep, props, um) => { props.entityID && clearCommandSearchText(props.entityID); let entity = await createBlockWithType(rep, props, "text"); clearCommandSearchText(entity); }, }, { name: "Title", icon: <Header1Small />, type: "text", alternateNames: ["h1"], onSelect: async (rep, props, um) => { await setHeaderCommand(1, rep, props); }, }, { name: "Header", icon: <Header2Small />, type: "text", alternateNames: ["h2"], onSelect: async (rep, props, um) => { await setHeaderCommand(2, rep, props); }, }, { name: "Subheader", icon: <Header3Small />, type: "text", alternateNames: ["h3"], onSelect: async (rep, props, um) => { await setHeaderCommand(3, rep, props); }, }, { name: "Unordered List", icon: <ListUnorderedSmall />, alternateNames: ["Bulleted List"], type: "text", onSelect: async (rep, props, um) => { let entity = await createBlockWithType(rep, props, "text"); await rep?.mutate.assertFact({ entity, attribute: "block/is-list", data: { value: true, type: "boolean" }, }); clearCommandSearchText(entity); }, }, { name: "Ordered List", icon: <ListOrderedSmall />, type: "text", alternateNames: ["Numbered List"], onSelect: async (rep, props, um) => { let entity = await createBlockWithType(rep, props, "text"); await rep?.mutate.assertFact([ { entity, attribute: "block/is-list", data: { value: true, type: "boolean" }, }, { entity, attribute: "block/list-style", data: { value: "ordered", type: "list-style-union" }, }, ]); clearCommandSearchText(entity); }, }, { name: "Block Quote", icon: <QuoteSmall />, type: "text", onSelect: async (rep, props, um) => { if (props.entityID) clearCommandSearchText(props.entityID); let entity = await createBlockWithType(rep, props, "blockquote"); clearCommandSearchText(entity); }, },
{ name: "Image", icon: <BlockImageSmall />, type: "block", onSelect: async (rep, props, um) => { props.entityID && clearCommandSearchText(props.entityID); let entity = await createBlockWithType(rep, props, "image"); setTimeout(() => { let el = document.getElementById(elementId.block(entity).input); el?.focus(); }, 100); um.add({ undo: () => { focusTextBlock(entity); }, redo: () => { let el = document.getElementById(elementId.block(entity).input); el?.focus(); }, }); }, }, { name: "Image Gallery", icon: <ImageGallerySmall />, type: "block", alternateNames: ["gallery", "images", "carousel"], onSelect: async (rep, props, um) => { props.entityID && clearCommandSearchText(props.entityID); let entity = await createBlockWithType(rep, props, "image-gallery"); setTimeout(() => { let el = document.getElementById(elementId.block(entity).input); el?.focus(); }, 100); um.add({ undo: () => { focusTextBlock(entity); }, redo: () => { let el = document.getElementById(elementId.block(entity).input); el?.focus(); }, }); }, }, { name: "External Link", icon: <LinkSmall />, type: "block", onSelect: async (rep, props) => { await createBlockWithType(rep, props, "link"); }, }, { name: "Button", icon: <BlockButtonSmall />, type: "block", onSelect: async (rep, props, um) => { props.entityID && clearCommandSearchText(props.entityID); await createBlockWithType(rep, props, "button"); um.add({ undo: () => { props.entityID && focusTextBlock(props.entityID); }, redo: () => {}, }); }, }, { name: "Divider", icon: "—", type: "block", alternateNames: ["Horizontal Rule", "hr"], onSelect: async (rep, props, um) => { props.entityID && clearCommandSearchText(props.entityID); await createBlockWithType(rep, props, "horizontal-rule"); um.add({ undo: () => { props.entityID && focusTextBlock(props.entityID); }, redo: () => {}, }); }, }, { name: "Poll", icon: <BlockPollSmall />, type: "block", onSelect: async (rep, props, um) => { let entity = await createBlockWithType(rep, props, "poll"); let pollOptionEntity = v7(); await rep.mutate.addPollOption({ pollEntity: entity, pollOptionEntity, pollOptionName: "", factID: v7(), permission_set: props.entity_set, }); await rep.mutate.addPollOption({ pollEntity: entity, pollOptionEntity: v7(), pollOptionName: "", factID: v7(), permission_set: props.entity_set, }); usePollBlockUIState.setState((s) => ({ [entity]: { state: "editing" } })); setTimeout(() => { focusElement( document.getElementById( elementId.block(entity).pollInput(pollOptionEntity), ) as HTMLInputElement | null, ); }, 20); um.add({ undo: () => { props.entityID && focusTextBlock(props.entityID); }, redo: () => { setTimeout(() => { focusElement( document.getElementById( elementId.block(entity).pollInput(pollOptionEntity), ) as HTMLInputElement | null, ); }, 20); }, }); }, }, { name: "Embed Website", icon: <BlockEmbedSmall />, type: "block", onSelect: async (rep, props) => { await createBlockWithType(rep, props, "embed"); }, }, { name: "Embed HTML", icon: <BlockEmbedSmall />, type: "block", onSelect: async (rep, props) => { await createBlockWithType(rep, props, "html"); }, }, { name: "Math", icon: <BlockMathSmall />, type: "block", hiddenInPublication: false, onSelect: async (rep, props) => { await createBlockWithType(rep, props, "math"); }, }, { name: "Code", icon: <BlockCodeSmall />, type: "block", hiddenInPublication: false, onSelect: async (rep, props) => { let entity = await createBlockWithType(rep, props, "code"); let lastLang = localStorage.getItem(LAST_USED_CODE_LANGUAGE_KEY); if (lastLang) { await rep.mutate.assertFact({ entity, attribute: "block/code-language", data: { type: "string", value: lastLang }, }); } }, },
// EVENT STUFF { name: "Date and Time", icon: <BlockCalendarSmall />, type: "event", hiddenInPublication: true, onSelect: (rep, props) => { props.entityID && clearCommandSearchText(props.entityID); return createBlockWithType(rep, props, "datetime"); }, },
// PAGE TYPES
{ name: "New Page", icon: <BlockDocPageSmall />, type: "page", hiddenOnPublicationPage: true, onSelect: async (rep, props, um) => { props.entityID && clearCommandSearchText(props.entityID); let entity = await createBlockWithType(rep, props, "card");
let newPage = v7(); await rep?.mutate.addPageLinkBlock({ blockEntity: entity, firstBlockFactID: v7(), firstBlockEntity: v7(), pageEntity: newPage, type: "doc", permission_set: props.entity_set, });
useUIState.getState().openPage(props.parent, newPage); um.add({ undo: () => { useUIState.getState().closePage(newPage); setTimeout( () => focusBlock( { parent: props.parent, entityID: entity, type: "text" }, { type: "end" }, ), 100, ); }, redo: () => { useUIState.getState().openPage(props.parent, newPage); focusPage(newPage, rep, "focusFirstBlock"); }, }); focusPage(newPage, rep, "focusFirstBlock"); }, }, { name: "New Canvas", icon: <BlockCanvasPageSmall />, type: "page", hiddenOnPublicationPage: true, onSelect: async (rep, props, um) => { props.entityID && clearCommandSearchText(props.entityID); let entity = await createBlockWithType(rep, props, "card");
let newPage = v7(); await rep?.mutate.addPageLinkBlock({ type: "canvas", blockEntity: entity, firstBlockFactID: v7(), firstBlockEntity: v7(), pageEntity: newPage, permission_set: props.entity_set, }); useUIState.getState().openPage(props.parent, newPage); focusPage(newPage, rep, "focusFirstBlock"); um.add({ undo: () => { useUIState.getState().closePage(newPage); setTimeout( () => focusBlock( { parent: props.parent, entityID: entity, type: "text" }, { type: "end" }, ), 100, ); }, redo: () => { useUIState.getState().openPage(props.parent, newPage); focusPage(newPage, rep, "focusFirstBlock"); }, }); }, },
// PUBLICATION BLOCKS — shown anywhere within a publication (posts and publication pages) { name: "Post List", icon: <PostListSmall />, type: "publication", alternateNames: ["posts", "archive", "feed", "listing"], publicationOnly: true, onSelect: async (rep, props) => { props.entityID && clearCommandSearchText(props.entityID); await createBlockWithType(rep, props, "posts-list"); }, }, { name: "Subscribe Form", icon: <BlockMailboxSmall />, type: "publication", alternateNames: ["subscribe", "newsletter", "email", "signup"], publicationOnly: true, onSelect: async (rep, props) => { props.entityID && clearCommandSearchText(props.entityID); await createBlockWithType(rep, props, "signup"); }, }, { name: "Members Only Divider", icon: <LockTiny />, type: "publication", alternateNames: ["members", "membership", "paywall", "premium"], publicationOnly: true, hiddenOnPublicationPage: true, membersOnlyDelimiter: true, onSelect: async (rep, props, um) => { // The command is hidden once a delimiter exists, but re-check before // inserting in case the filter is working off stale data. let existing = getPageBlocks(rep, props.parent); if (existing.some((b) => b.type === "members-only-delimiter")) return; props.entityID && clearCommandSearchText(props.entityID); const entity = await createBlockWithType( rep, props, "members-only-delimiter", ); await rep.mutate.assertFact({ entity, attribute: "block/members-only-audience", data: { type: "string", value: "paid" }, }); um.add({ undo: () => { props.entityID && focusTextBlock(props.entityID); }, redo: () => {}, }); }, },];
async function setHeaderCommand( level: number, rep: Replicache<ReplicacheMutators>, props: Props & { entity_set: string },) { let entity = await createBlockWithType(rep, props, "heading"); await rep.mutate.assertFact({ entity, attribute: "block/heading-level", data: { type: "number", value: level }, }); clearCommandSearchText(entity);}function focusTextBlock(entityID: string) { document.getElementById(elementId.block(entityID).text)?.focus();}