Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
10 kB · 322 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323import { useLayoutEffect, useRef } from "react";import { EditorState, TextSelection } from "prosemirror-state";import { EditorView } from "prosemirror-view";import { baseKeymap, toggleMark } from "prosemirror-commands";import { keymap } from "prosemirror-keymap";import { ySyncPlugin } from "y-prosemirror";import { schema } from "components/Blocks/TextBlock/schema";import { formattingKeymap } from "src/utils/prosemirror/formattingKeymap";import { footnoteInputRules } from "components/Blocks/TextBlock/inputRules";import { highlightSelectionPlugin } from "components/Blocks/TextBlock/plugins";import { stripCommentMarks } from "components/Blocks/TextBlock/stripCommentMarks";import { useReplicache, useEntity } from "src/replicache";import { scanIndex } from "src/replicache/utils";import { focusBlock } from "src/utils/focusBlock";import { autolink } from "components/Blocks/TextBlock/autolink-plugin";import { betterIsUrl } from "src/utils/isURL";import { trackUndoRedo } from "components/Blocks/TextBlock/mountProsemirror";import { useCollabText } from "components/Blocks/TextBlock/useCollabText";import { useStaleClient } from "components/Blocks/TextBlock/schemaVersion";import { RenderYJSFragment } from "components/Blocks/TextBlock/RenderYJSFragment";import { DeleteTiny } from "components/Icons/DeleteTiny";import { FootnoteItemLayout } from "./FootnoteItemLayout";import { useEditorStates } from "src/state/useEditorState";import { useUIState } from "src/useUIState";import { useFootnoteContext } from "./FootnoteContext";
export function FootnoteEditor(props: { footnoteEntityID: string; index: number; editable: boolean; onDelete?: () => void; autoFocus?: boolean;}) { // Read-only viewers don't need a live ProseMirror instance (with its yjs // doc, realtime registration, and remote-cursor overlay) per footnote — // render the stored content statically, the same way RenderedTextBlock does // for non-editable text blocks. Stale clients (see TextBlock/schemaVersion) // also render statically. let stale = useStaleClient((s) => s.stale); if (!props.editable || stale) return ( <RenderedFootnote footnoteEntityID={props.footnoteEntityID} index={props.index} /> ); return <EditableFootnote {...props} />;}
function RenderedFootnote(props: { footnoteEntityID: string; index: number }) { let content = useEntity(props.footnoteEntityID, "block/text"); return ( <div data-footnote-editor={props.footnoteEntityID}> <FootnoteItemLayout index={props.index}> {content ? ( <RenderYJSFragment value={content.data.value} wrapper="p" /> ) : ( <span className="italic text-tertiary">Empty footnote</span> )} </FootnoteItemLayout> </div> );}
function EditableFootnote(props: { footnoteEntityID: string; index: number; editable: boolean; onDelete?: () => void; autoFocus?: boolean;}) { let mountRef = useRef<HTMLDivElement | null>(null); let rep = useReplicache(); let { yText: value, cursorPlugin, overlay, } = useCollabText(props.footnoteEntityID); let { pageID, footnotes } = useFootnoteContext(); // Read through a ref so the keymap (created once per mount) sees the current // footnote list without remounting the editor whenever it changes. let footnotesRef = useRef(footnotes); footnotesRef.current = footnotes;
useLayoutEffect(() => { if (!mountRef.current || !value) return;
let plugins = [ ySyncPlugin(value), cursorPlugin, keymap({ ...formattingKeymap(schema.marks), "Ctrl-Meta-h": (...args) => toggleMark(schema.marks.highlight, { color: useUIState.getState().lastUsedHighlight, })(...args), "Shift-Enter": (state, dispatch) => { let hardBreak = schema.nodes.hard_break.create(); if (dispatch) { dispatch(state.tr.replaceSelectionWith(hardBreak).scrollIntoView()); } return true; }, Enter: (_state, _dispatch, view) => { view?.dom.blur(); return true; }, ArrowLeft: (state, _dispatch, view) => { if (!state.selection.empty || state.selection.anchor > 1) return false; let fn = footnotesRef.current.find( (f) => f.footnoteEntityID === props.footnoteEntityID, ); if (!fn || !rep.rep) return false; let blockID = fn.blockID; view?.dom.blur(); rep.rep .query(async (tx) => { let scan = scanIndex(tx); return (await scan.eav(blockID, "block/type"))[0]?.data.value; }) .then((type) => { if (!type) return; focusBlock( { entityID: blockID, type, parent: pageID }, { type: "afterFootnote", footnoteEntityID: props.footnoteEntityID, }, ); }); return true; }, }), footnoteInputRules(), keymap(baseKeymap), highlightSelectionPlugin, autolink({ type: schema.marks.link, shouldAutoLink: () => true, defaultProtocol: "https", }), ];
let state = EditorState.create({ schema, plugins }); let view = new EditorView( { mount: mountRef.current }, { state, editable: () => props.editable, transformPasted: stripCommentMarks, handlePaste: (view, e) => { let text = e.clipboardData?.getData("text"); 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 })); } view.dispatch(tr); return true; } }, handleClickOn: (_view, _pos, node, _nodePos, _event, direct) => { if (!direct) return; if (node.nodeSize - 2 <= _pos) return; const nodeAt1 = node.nodeAt(_pos - 1); const nodeAt2 = node.nodeAt(Math.max(_pos - 2, 0)); let linkMark = nodeAt1?.marks.find((f) => f.type === schema.marks.link) || nodeAt2?.marks.find((f) => f.type === schema.marks.link); if (linkMark) { window.open(linkMark.attrs.href, "_blank"); return; } }, dispatchTransaction(this: EditorView, tr) { let oldState = this.state; let newState = this.state.apply(tr); this.updateState(newState);
useEditorStates.setState((s) => ({ editorStates: { ...s.editorStates, [props.footnoteEntityID]: { editor: newState, view: this, }, }, }));
trackUndoRedo( tr, rep.undoManager, props.footnoteEntityID, () => { this.focus(); this.updateState(oldState); }, () => { this.focus(); this.updateState(newState); }, ); }, }, );
// Register editor state useEditorStates.setState((s) => ({ editorStates: { ...s.editorStates, [props.footnoteEntityID]: { editor: view.state, view, }, }, }));
// Subscribe to external state changes (e.g. link toolbar). Selector form: // a plain listener would fire on every editorStates write anywhere (every // keystroke in every block) and force a redundant ProseMirror reconcile // per mounted footnote editor. let unsubscribe = useEditorStates.subscribe( (s) => s.editorStates[props.footnoteEntityID], (editorState) => { if (editorState?.editor) editorState.view?.updateState(editorState.editor); }, );
// Set focusedEntity on focus let handleFocus = () => { useUIState.setState({ focusedEntity: { entityType: "footnote", entityID: props.footnoteEntityID, parent: pageID, }, }); }; view.dom.addEventListener("focus", handleFocus);
if (props.autoFocus) { setTimeout(() => view.focus(), 50); }
return () => { unsubscribe(); view.dom.removeEventListener("focus", handleFocus); view.destroy(); useEditorStates.setState((s) => { let { [props.footnoteEntityID]: _, ...rest } = s.editorStates; return { editorStates: rest }; }); }; }, [ props.footnoteEntityID, value, cursorPlugin, props.editable, props.autoFocus, rep.undoManager, pageID, ]);
return ( <div data-footnote-editor={props.footnoteEntityID}> <FootnoteItemLayout index={props.index} indexAction={() => { let pm = mountRef.current?.querySelector( ".ProseMirror", ) as HTMLElement | null; if (pm) { pm.focus(); } }} trailing={ props.editable && props.onDelete ? ( <FootnoteDeleteButton footnoteEntityID={props.footnoteEntityID} onDelete={props.onDelete} /> ) : undefined } > {overlay} <div ref={mountRef} className="outline-hidden" /> </FootnoteItemLayout> </div> );}
function FootnoteDeleteButton(props: { footnoteEntityID: string; onDelete: () => void;}) { let isActive = useUIState( (s) => s.focusedEntity?.entityType === "footnote" && s.focusedEntity.entityID === props.footnoteEntityID, );
return ( <button className={`shrink-0 mt-0.5 text-tertiary hover:text-accent-contrast transition-opacity ${isActive ? "opacity-100" : "opacity-0"}`} onClick={props.onDelete} title="Delete footnote" > <DeleteTiny /> </button> );}