587a940959
Release-cycle review found two hardening gaps: - The sync plugin deleted+rebuilt the WHOLE footnotesList on any reorder/orphan, replacing every definition's Yjs subtree -> a collaborator typing in a definition could lose in-flight characters on merge. Rework to targeted, minimal mutations: attr-only setNodeMarkup for collision re-ids, delete only genuine orphans, insert only genuinely-missing definitions (at the list end, not shifting existing subtrees), and consolidate multiple lists only in the abnormal paste/merge case. An unchanged (correct id, referenced) definition is left completely untouched. Numbering is decoration-only, so physical list order may drift after a reorder (accepted) while displayed numbers stay correct. Invariants preserved (reviewed + tested): one SYNC_META transaction, null when canonical (terminates), deterministic deriveFootnoteId, remote-skip -> no re-introduced freeze or divergence. - computeFootnoteNumbers ran per-NodeView-render (O(n^2)/keystroke in big docs). The numbering plugin now caches the number map in its state (computed once per docChanged); NodeViews read it O(1) via getFootnoteNumber. Tests: no-rebuild-on-reorder asserts unchanged definition node subtrees are identity-preserved; isRemoteTransaction skip; enableSync:false read-only; cache correctness. Browser re-smoke: insert (no freeze), number, persist across reload, cascade delete all pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { getFootnoteNumber } from "@docmost/editor-ext";
|
|
import classes from "./footnote.module.css";
|
|
|
|
/**
|
|
* NodeView for a single footnote definition: a decorative number marker, the
|
|
* editable content (NodeViewContent), and a "↩" back-link to its reference.
|
|
* The number is derived from the document (not stored).
|
|
*/
|
|
export default function FootnoteDefinitionView(props: NodeViewProps) {
|
|
const { node, editor } = props;
|
|
const { t } = useTranslation();
|
|
const id = node.attrs.id as string;
|
|
|
|
// Read the cached number from the numbering plugin (computed once per doc
|
|
// change) rather than recomputing the whole map on every render.
|
|
const number = getFootnoteNumber(editor.state, id) ?? "?";
|
|
|
|
const handleBack = (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
editor.commands.scrollToReference(id);
|
|
};
|
|
|
|
return (
|
|
<NodeViewWrapper
|
|
data-footnote-def=""
|
|
data-id={id}
|
|
className={classes.definition}
|
|
style={{ ["--footnote-number" as any]: `"${number}"` }}
|
|
>
|
|
<span className={classes.definitionMarker} contentEditable={false}>
|
|
{number}.
|
|
</span>
|
|
<NodeViewContent className={classes.definitionContent} />
|
|
<span
|
|
className={classes.backLink}
|
|
contentEditable={false}
|
|
onClick={handleBack}
|
|
role="button"
|
|
aria-label={t("Back to reference")}
|
|
title={t("Back to reference")}
|
|
>
|
|
↩
|
|
</span>
|
|
</NodeViewWrapper>
|
|
);
|
|
}
|