Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
19 kB · 655 lines
TypeScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656import { MutableRefObject, useCallback } from "react";import { Fact, ReplicacheMutators, useReplicache } from "src/replicache";import { EditorView } from "prosemirror-view";import { setEditorState, useEditorStates } from "src/state/useEditorState";import { MarkType, DOMParser as ProsemirrorDOMParser } from "prosemirror-model";import { multiBlockSchema, schema } from "./schema";import { generateKeyBetween } from "fractional-indexing";import { addImage } from "src/utils/addImage";import { BlockProps } from "../Block";import { focusBlock } from "src/utils/focusBlock";import { useEntitySetContext } from "components/EntitySetProvider";import { v7 } from "uuid";import { Replicache } from "replicache";import { markdownToHtml } from "src/htmlMarkdownParsers";import { betterIsUrl, isUrl } from "src/utils/isURL";import { TextSelection } from "prosemirror-state";import type { FilterAttributes } from "src/replicache/attributes";import { addLinkBlock } from "src/utils/addLinkBlock";import { UndoManager } from "src/undoManager";
const parser = ProsemirrorDOMParser.fromSchema(schema);const multilineParser = ProsemirrorDOMParser.fromSchema(multiBlockSchema);export const useHandlePaste = ( entityID: string, propsRef: MutableRefObject<BlockProps>,) => { let { rep, undoManager } = useReplicache(); let entity_set = useEntitySetContext(); return useCallback( (view: EditorView, e: ClipboardEvent) => { if (!rep) return; if (!e.clipboardData) return; let textHTML = e.clipboardData.getData("text/html"); let text = e.clipboardData.getData("text"); let editorState = useEditorStates.getState().editorStates[entityID]; if (!editorState) return; if (text && betterIsUrl(text)) { let selection = view.state.selection as TextSelection; let tr = view.state.tr; let { from, to } = selection; if (selection.empty) { tr.insertText(text, selection.from); tr.addMark( from, from + text.length, schema.marks.link.create({ href: text }), ); } else { tr.addMark(from, to, schema.marks.link.create({ href: text })); } let oldState = view.state; let newState = view.state.apply(tr); undoManager.add({ undo: () => { if (!view?.hasFocus()) view?.focus(); setEditorState(entityID, { editor: oldState, }); }, redo: () => { if (!view?.hasFocus()) view?.focus(); setEditorState(entityID, { editor: newState, }); }, }); setEditorState(entityID, { editor: newState, }); return true; } // if there is no html, but there is text, convert the text to markdown // let xml = new DOMParser().parseFromString(textHTML, "text/html"); if ((!textHTML || !xml.children.length) && text) { textHTML = markdownToHtml(text); } // if thre is html if (textHTML) { let xml = new DOMParser().parseFromString(textHTML, "text/html"); let currentPosition = propsRef.current.position; let children = flattenHTMLToTextBlocks(xml.body); let hasImage = false; for (let item of e.clipboardData.items) { if (item.type.includes("image")) hasImage = true; } if ( !(children.length === 1 && children[0].tagName === "IMG" && hasImage) ) { const pasteParent = propsRef.current.listData ? propsRef.current.listData.parent : propsRef.current.parent;
children.forEach((child, index) => { createBlockFromHTML(child, { undoManager, parentType: propsRef.current.pageType, first: index === 0, activeBlockProps: propsRef, entity_set, rep, parent: pasteParent, getPosition: () => { currentPosition = generateKeyBetween( currentPosition || null, propsRef.current.nextPosition, ); return currentPosition; }, last: index === children.length - 1, }); }); } }
for (let item of e.clipboardData.items) { if (item?.type.includes("image")) { let file = item.getAsFile(); if (file) { let entity: string; if (editorState.editor.doc.textContent.length === 0) { entity = propsRef.current.entityID; rep.mutate.assertFact({ entity: propsRef.current.entityID, attribute: "block/type", data: { type: "block-type-union", value: "image" }, }); rep.mutate.retractAttribute({ entity: propsRef.current.entityID, attribute: "block/text", }); } else { entity = v7(); rep.mutate.addBlock({ permission_set: entity_set.set, factID: v7(), type: "image", newEntityID: entity, parent: propsRef.current.parent, position: generateKeyBetween( propsRef.current.position, propsRef.current.nextPosition, ), }); } addImage(file, rep, { attribute: "block/image", entityID: entity, }); } return; } } e.preventDefault(); e.stopPropagation(); return true; }, [rep, entity_set, entityID, propsRef], );};
const createBlockFromHTML = ( child: Element, { first, last, activeBlockProps, rep, undoManager, entity_set, getPosition, parent, parentType, listStyle, depth = 1, }: { parentType: "canvas" | "doc"; parent: string; first: boolean; last: boolean; activeBlockProps?: MutableRefObject<BlockProps>; rep: Replicache<ReplicacheMutators>; undoManager: UndoManager; entity_set: { set: string }; getPosition: () => string; listStyle?: "ordered" | "unordered"; depth?: number; },) => { let type: Fact<"block/type">["data"]["value"] | null; let headingLevel: number | null = null; let hasChildren = false;
if (child.tagName === "UL" || child.tagName === "OL") { let children = Array.from(child.children); if (children.length > 0) hasChildren = true; const childListStyle = child.tagName === "OL" ? "ordered" : "unordered"; for (let c of children) { createBlockFromHTML(c, { first: first && c === children[0], last: last && c === children[children.length - 1], activeBlockProps, rep, undoManager, entity_set, getPosition, parent, parentType, listStyle: childListStyle, depth, }); } } switch (child.tagName) { case "BLOCKQUOTE": { type = "blockquote"; break; } case "LI": case "SPAN": { type = "text"; break; } case "PRE": { type = "code"; break; } case "P": { type = "text"; break; } case "H1": { headingLevel = 1; type = "heading"; break; } case "H2": { headingLevel = 2; type = "heading"; break; } case "H3": { headingLevel = 3; type = "heading"; break; } case "H4": { headingLevel = 4; type = "heading"; break; } case "DIV": { type = "card"; break; } case "IMG": { type = "image"; break; } case "A": { type = "link"; break; } case "HR": { type = "horizontal-rule"; break; } default: type = null; } let content = parser.parse(child); if (!type) return;
let entityID: string; let position: string; if ( (parentType === "canvas" && activeBlockProps?.current) || (first && (activeBlockProps?.current.type === "heading" || activeBlockProps?.current.type === "blockquote" || type === activeBlockProps?.current.type)) ) entityID = activeBlockProps.current.entityID; else { entityID = v7(); if (parentType === "doc") { position = getPosition(); rep.mutate.addBlock({ permission_set: entity_set.set, factID: v7(), newEntityID: entityID, parent: parent, type: type, position, }); } if (type === "heading" && headingLevel) { rep.mutate.assertFact({ entity: entityID, attribute: "block/heading-level", data: { type: "number", value: headingLevel }, }); } } let alignment = child.getAttribute("data-alignment"); if (alignment && ["right", "left", "center"].includes(alignment)) { rep.mutate.assertFact({ entity: entityID, attribute: "block/text-alignment", data: { type: "text-alignment-type-union", value: alignment as "right" | "left" | "center", }, }); } let textSize = child.getAttribute("data-text-size"); if (textSize && ["default", "small", "large"].includes(textSize)) { rep.mutate.assertFact({ entity: entityID, attribute: "block/text-size", data: { type: "text-size-union", value: textSize as "default" | "small" | "large", }, }); } if (child.tagName === "A") { let href = child.getAttribute("href"); let dataType = child.getAttribute("data-type"); if (href) { if (dataType === "button") { rep.mutate.assertFact([ { entity: entityID, attribute: "block/type", data: { type: "block-type-union", value: "button" }, }, { entity: entityID, attribute: "button/text", data: { type: "string", value: child.textContent || "" }, }, { entity: entityID, attribute: "button/url", data: { type: "string", value: href }, }, ]); } else { addLinkBlock(href, entityID, rep); } } } if (child.tagName === "PRE") { let lang = child.getAttribute("data-language") || "plaintext"; if (child.firstElementChild && child.firstElementChild.className) { let className = child.firstElementChild.className; let match = className.match(/language-(\w+)/); if (match) { lang = match[1]; } } if (child.textContent) { rep.mutate.assertFact([ { entity: entityID, attribute: "block/type", data: { type: "block-type-union", value: "code" }, }, { entity: entityID, attribute: "block/code-language", data: { type: "string", value: lang }, }, { entity: entityID, attribute: "block/code", data: { type: "string", value: child.textContent }, }, ]); } } if (child.tagName === "IMG") { let src = child.getAttribute("src"); if (src) { fetch(src) .then((res) => res.blob()) .then((Blob) => { const file = new File([Blob], "image.png", { type: Blob.type }); addImage(file, rep, { attribute: "block/image", entityID: entityID, }); }); } } if (child.tagName === "DIV" && child.getAttribute("data-tex")) { let tex = child.getAttribute("data-tex"); rep.mutate.assertFact([ { entity: entityID, attribute: "block/type", data: { type: "block-type-union", value: "math" }, }, { entity: entityID, attribute: "block/math", data: { type: "string", value: tex || "" }, }, ]); }
if (child.tagName === "DIV" && child.getAttribute("data-bluesky-post")) { let postData = child.getAttribute("data-bluesky-post"); if (postData) { rep.mutate.assertFact([ { entity: entityID, attribute: "block/type", data: { type: "block-type-union", value: "bluesky-post" }, }, { entity: entityID, attribute: "block/bluesky-post", data: { type: "bluesky-post", value: JSON.parse(postData) }, }, ]); } }
if (child.tagName === "DIV" && child.getAttribute("data-entityid")) { let oldEntityID = child.getAttribute("data-entityid") as string; let factsData = child.getAttribute("data-facts"); if (factsData) { let facts = JSON.parse(factsData) as Fact<any>[];
let oldEntityIDToNewID = {} as { [k: string]: string }; let oldEntities = facts.reduce((acc, f) => { if (!acc.includes(f.entity)) acc.push(f.entity); return acc; }, [] as string[]); let newEntities = [] as string[]; for (let oldEntity of oldEntities) { let newEntity = v7(); oldEntityIDToNewID[oldEntity] = newEntity; newEntities.push(newEntity); }
let newFacts = [] as Array< Pick<Fact<any>, "entity" | "attribute" | "data"> >; for (let fact of facts) { let entity = oldEntityIDToNewID[fact.entity]; let data = fact.data; if ( data.type === "ordered-reference" || data.type == "spatial-reference" || data.type === "reference" ) { data.value = oldEntityIDToNewID[data.value]; } if (data.type === "image") { //idk get it from the clipboard maybe? } newFacts.push({ entity, attribute: fact.attribute, data }); } rep.mutate.createEntity( newEntities.map((e) => ({ entityID: e, permission_set: entity_set.set, })), ); rep.mutate.assertFact(newFacts.filter((f) => f.data.type !== "image")); let newCardEntity = oldEntityIDToNewID[oldEntityID]; rep.mutate.assertFact({ entity: entityID, attribute: "block/card", data: { type: "reference", value: newCardEntity }, }); let images: Pick< Fact<keyof FilterAttributes<{ type: "image" }>>, "entity" | "data" | "attribute" >[] = newFacts.filter((f) => f.data.type === "image"); for (let image of images) { fetch(image.data.src) .then((res) => res.blob()) .then((Blob) => { const file = new File([Blob], "image.png", { type: Blob.type }); addImage(file, rep, { attribute: image.attribute, entityID: image.entity, }); }); } } }
if (child.tagName === "LI") { // Look for nested UL or OL let nestedList = Array.from(child.children) .flatMap((f) => flattenHTMLToTextBlocks(f as HTMLElement)) .find((f) => f.tagName === "UL" || f.tagName === "OL"); let checked = child.getAttribute("data-checked"); if (checked !== null) { rep.mutate.assertFact({ entity: entityID, attribute: "block/check-list", data: { type: "boolean", value: checked === "true" ? true : false }, }); } rep.mutate.assertFact({ entity: entityID, attribute: "block/is-list", data: { type: "boolean", value: true }, }); // Set list style if provided (from parent OL/UL) if (listStyle) { rep.mutate.assertFact({ entity: entityID, attribute: "block/list-style", data: { type: "list-style-union", value: listStyle }, }); } if (nestedList) { hasChildren = true; let currentPosition: string | null = null; createBlockFromHTML(nestedList, { parentType, first: false, last: last, activeBlockProps, rep, undoManager, entity_set, getPosition: () => { currentPosition = generateKeyBetween(currentPosition, null); return currentPosition; }, parent: entityID, depth: depth + 1, }); } }
setTimeout(() => { let block = useEditorStates.getState().editorStates[entityID]; if (block) { let tr = block.editor.tr; if ( block.editor.selection.from !== undefined && block.editor.selection.to !== undefined ) tr.delete(block.editor.selection.from, block.editor.selection.to); tr.replaceSelectionWith(content); let newState = block.editor.apply(tr); setEditorState(entityID, { editor: newState, });
undoManager.add({ redo: () => { useEditorStates.setState((oldState) => { let view = oldState.editorStates[entityID]?.view; if (!view?.hasFocus()) view?.focus(); return { editorStates: { ...oldState.editorStates, [entityID]: { ...oldState.editorStates[entityID]!, editor: newState, }, }, }; }); }, undo: () => { useEditorStates.setState((oldState) => { let view = oldState.editorStates[entityID]?.view; if (!view?.hasFocus()) view?.focus(); return { editorStates: { ...oldState.editorStates, [entityID]: { ...oldState.editorStates[entityID]!, editor: block.editor, }, }, }; }); }, }); } if (last && !hasChildren && !first) { focusBlock( { value: entityID, type: type, parent: parent, }, { type: "end" }, ); } }, 10);};
function flattenHTMLToTextBlocks(element: HTMLElement): HTMLElement[] { // Function to recursively collect HTML from nodes function collectHTML(node: Node, htmlBlocks: HTMLElement[]): void { if (node.nodeType === Node.TEXT_NODE) { if (node.textContent && node.textContent.trim() !== "") { let newElement = document.createElement("p"); newElement.textContent = node.textContent; htmlBlocks.push(newElement); } } if (node.nodeType === Node.ELEMENT_NODE) { const elementNode = node as HTMLElement; // Collect outer HTML for paragraph-like elements if ( [ "BLOCKQUOTE", "P", "PRE", "H1", "H2", "H3", "H4", "H5", "H6", "LI", "UL", "OL", "IMG", "A", "SPAN", "HR", ].includes(elementNode.tagName) || elementNode.getAttribute("data-entityid") || elementNode.getAttribute("data-tex") || elementNode.getAttribute("data-bluesky-post") ) { htmlBlocks.push(elementNode); } else { // Recursively collect HTML from child nodes for (let child of node.childNodes) { collectHTML(child, htmlBlocks); } } } }
const htmlBlocks: HTMLElement[] = []; collectHTML(element, htmlBlocks); return htmlBlocks;}