@drghaliasri/butex 5.6.0 → 5.6.1

package/dist/react-document2.mjs

@@ -10380,7 +10380,7 @@ function focusArticleMetaPanel(panel) {
 }
 
 // src/react-document2/ButexDocumentEditor2.tsx
-import { useCallback as useCallback2, useEffect as useEffect9, useMemo as useMemo2, useRef as useRef8, useState as useState12 } from "react";
+import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect9, useImperativeHandle as useImperativeHandle2, useMemo as useMemo2, useRef as useRef8, useState as useState12 } from "react";
 
 // src/debugJson.ts
 function lineColumnForPosition(text, position) {
@@ -17600,951 +17600,977 @@ function resolveInitialDocument2(initialDocument, uiLocale = "ar", documentMeta)
     };
   }
 }
-function ButexDocumentEditor2({
-  initialDocument,
-  documentMeta,
-  className,
-  debug = false,
-  documentDirection = "rtl",
-  equationSide = "arabic",
-  editableEquations = true,
-  previewOnly = false,
-  uiLocale = "ar",
-  mathOutput = "svg",
-  digitForm: digitFormProp,
-  onDigitFormChange,
-  resolveImageUrl,
-  onDocumentChange,
-  onDocumentJsonChange,
-  onLatexChange
-}) {
-  const messages = document2Messages(uiLocale);
-  const initialState = useMemo2(
-    () => resolveInitialDocument2(initialDocument, uiLocale, documentMeta),
-    [initialDocument, documentMeta, uiLocale]
-  );
-  const [documentNode, setDocumentNode] = useState12(initialState.document);
-  const [error, setError] = useState12(initialState.error);
-  const [editorOpen, setEditorOpen] = useState12(true);
-  const [previewOpen, setPreviewOpen] = useState12(true);
-  const [selectedMath, setSelectedMath] = useState12(null);
-  const [citePicker, setCitePicker] = useState12(null);
-  const [referencesOpen, setReferencesOpen] = useState12(false);
-  const [labelsOpen, setLabelsOpen] = useState12(false);
-  const [refPicker, setRefPicker] = useState12(null);
-  const [digitFormState, setDigitFormState] = useState12(null);
-  const [debugImportOpen, setDebugImportOpen] = useState12(false);
-  const [debugImportText, setDebugImportText] = useState12("");
-  const [debugImportError, setDebugImportError] = useState12("");
-  const [editorFocus, setEditorFocus] = useState12(createEmptyDocument2EditorFocus());
-  const [collapsedBlockIds, setCollapsedBlockIds] = useState12(() => /* @__PURE__ */ new Set());
-  const [blockSelectionState, setBlockSelectionState] = useState12(emptyBlockSelection);
-  const [historyTick, setHistoryTick] = useState12(0);
-  const digitForm = digitFormProp ?? digitFormState ?? (documentDirection === "rtl" ? "arabicIndic" : "western");
-  function equationSessionWithDocumentDigits(session) {
-    return setCurrentDigitForm(session, digitForm);
-  }
-  const historyRef = useRef8(createDocument2History());
-  const documentRef = useRef8(documentNode);
-  const textSnapshotArmedRef = useRef8(false);
-  const textDebounceRef = useRef8(null);
-  const widgetRef = useRef8(null);
-  const articleMetaPanelRef = useRef8(null);
-  const pendingFocusRef = useRef8(null);
-  documentRef.current = documentNode;
-  const latex = document2Latex(documentNode, { digitForm });
-  const documentJson = useMemo2(() => toDocumentJson2(documentNode), [documentNode]);
-  const documentLabels = useMemo2(() => collectDocument2Labels(documentNode), [documentNode]);
-  const preview = useMemo2(
-    () => document2Preview(documentNode, mathOutput, equationSide, {
-      documentDirection,
-      digitForm,
-      uiLocale
-    }),
-    [documentNode, documentDirection, digitForm, equationSide, mathOutput, uiLocale]
-  );
-  const debugEnabled = useMemo2(() => {
-    if (debug) {
-      return true;
-    }
-    if (typeof window === "undefined") {
-      return false;
-    }
-    return new URLSearchParams(window.location.search).get("debug") === "1";
-  }, [debug]);
-  const canUndo = useMemo2(() => document2HistoryCanUndo(historyRef.current), [historyTick, documentNode]);
-  const canRedo = useMemo2(() => document2HistoryCanRedo(historyRef.current), [historyTick, documentNode]);
-  const blockSelection = normalizeBlockSelection(blockSelectionState.selection, documentNode.blocks.length);
-  const selectionCount = blockSelection ? blockSelection.to - blockSelection.from + 1 : 0;
-  const canMoveSelectionUp = Boolean(blockSelection && blockSelection.from > 0);
-  const canMoveSelectionDown = Boolean(blockSelection && blockSelection.to < documentNode.blocks.length - 1);
-  const formatTextToken = useMemo2(() => findFormatTextToken(documentNode, editorFocus), [documentNode, editorFocus]);
-  const canFormatText = formatTextToken !== null;
-  const activeTextStyles = formatTextToken?.style ?? {};
-  function clearBlockSelection() {
-    setBlockSelectionState(emptyBlockSelection());
-  }
-  function toggleSelectBlock(blockId, shiftKey) {
-    const index = documentRef.current.blocks.findIndex((block) => block.id === blockId);
-    if (index < 0) {
-      return;
-    }
-    const blockCount = documentRef.current.blocks.length;
-    setBlockSelectionState(
-      (current) => shiftKey ? extendBlockSelectionFromAnchor(current, index, blockCount) : toggleBlockInSelection(current, index, blockCount)
+var ButexDocumentEditor2 = forwardRef2(
+  function ButexDocumentEditor22({
+    initialDocument,
+    documentMeta,
+    className,
+    debug = false,
+    documentDirection = "rtl",
+    equationSide = "arabic",
+    editableEquations = true,
+    previewOnly = false,
+    uiLocale = "ar",
+    mathOutput = "svg",
+    digitForm: digitFormProp,
+    onDigitFormChange,
+    resolveImageUrl,
+    onDocumentChange,
+    onDocumentJsonChange,
+    onLatexChange
+  }, ref) {
+    const messages = document2Messages(uiLocale);
+    const initialState = useMemo2(
+      () => resolveInitialDocument2(initialDocument, uiLocale, documentMeta),
+      [initialDocument, documentMeta, uiLocale]
     );
-  }
-  function moveSelectedBlocks(direction) {
-    const selection = normalizeBlockSelection(blockSelectionState.selection, documentRef.current.blocks.length);
-    if (!selection) {
-      return;
-    }
-    const next = moveDocument2BlockRange(documentRef.current, selection.from, selection.to, direction);
-    if (next === documentRef.current) {
-      return;
-    }
-    applyDocument(next, "immediate");
-    const remapped = remapSelectionAfterRangeMove(selection, direction);
-    setBlockSelectionState({
-      selection: normalizeBlockSelection(remapped, next.blocks.length),
-      anchor: blockSelectionState.anchor === null ? null : blockSelectionState.anchor + direction
-    });
-  }
-  function deleteSelectedBlocks() {
-    const selection = normalizeBlockSelection(blockSelectionState.selection, documentRef.current.blocks.length);
-    if (!selection) {
-      return;
-    }
-    applyDocument(removeDocument2BlockRange(documentRef.current, selection.from, selection.to), "immediate");
-    clearBlockSelection();
-  }
-  useEffect9(() => {
-    injectBuTeXDocument2Styles();
-  }, []);
-  useEffect9(() => {
-    if (!editableEquations || previewOnly) {
-      setSelectedMath(null);
-    }
-  }, [editableEquations, previewOnly]);
-  useEffect9(() => {
-    const next = resolveInitialDocument2(initialDocument, uiLocale, documentMeta);
-    setDocumentNode(next.document);
-    setError(next.error);
-    setSelectedMath(null);
-    setCollapsedBlockIds(/* @__PURE__ */ new Set());
-    historyRef.current = createDocument2History();
-    setHistoryTick((tick) => tick + 1);
-  }, [initialDocument, documentMeta, uiLocale]);
-  useEffect9(() => {
-    onDocumentChange?.(documentNode);
-  }, [documentNode, onDocumentChange]);
-  useEffect9(() => {
-    onDocumentJsonChange?.(documentJson);
-  }, [documentJson, onDocumentJsonChange]);
-  useEffect9(() => {
-    onLatexChange?.(latex);
-  }, [latex, onLatexChange]);
-  useEffect9(() => {
-    const pending = pendingFocusRef.current;
-    const root = widgetRef.current;
-    if (!pending || !root) {
-      return;
+    const [documentNode, setDocumentNode] = useState12(initialState.document);
+    const [error, setError] = useState12(initialState.error);
+    const [editorOpen, setEditorOpen] = useState12(true);
+    const [previewOpen, setPreviewOpen] = useState12(true);
+    const [selectedMath, setSelectedMath] = useState12(null);
+    const [citePicker, setCitePicker] = useState12(null);
+    const [referencesOpen, setReferencesOpen] = useState12(false);
+    const [labelsOpen, setLabelsOpen] = useState12(false);
+    const [refPicker, setRefPicker] = useState12(null);
+    const [digitFormState, setDigitFormState] = useState12(null);
+    const [debugImportOpen, setDebugImportOpen] = useState12(false);
+    const [debugImportText, setDebugImportText] = useState12("");
+    const [debugImportError, setDebugImportError] = useState12("");
+    const [editorFocus, setEditorFocus] = useState12(createEmptyDocument2EditorFocus());
+    const [collapsedBlockIds, setCollapsedBlockIds] = useState12(() => /* @__PURE__ */ new Set());
+    const [blockSelectionState, setBlockSelectionState] = useState12(emptyBlockSelection);
+    const [historyTick, setHistoryTick] = useState12(0);
+    const digitForm = digitFormProp ?? digitFormState ?? (documentDirection === "rtl" ? "arabicIndic" : "western");
+    function equationSessionWithDocumentDigits(session) {
+      return setCurrentDigitForm(session, digitForm);
+    }
+    const historyRef = useRef8(createDocument2History());
+    const documentRef = useRef8(documentNode);
+    const editorFocusRef = useRef8(editorFocus);
+    const textSnapshotArmedRef = useRef8(false);
+    const textDebounceRef = useRef8(null);
+    const widgetRef = useRef8(null);
+    const articleMetaPanelRef = useRef8(null);
+    const pendingFocusRef = useRef8(null);
+    documentRef.current = documentNode;
+    editorFocusRef.current = editorFocus;
+    const latex = document2Latex(documentNode, { digitForm });
+    const documentJson = useMemo2(() => toDocumentJson2(documentNode), [documentNode]);
+    const documentLabels = useMemo2(() => collectDocument2Labels(documentNode), [documentNode]);
+    const preview = useMemo2(
+      () => document2Preview(documentNode, mathOutput, equationSide, {
+        documentDirection,
+        digitForm,
+        uiLocale
+      }),
+      [documentNode, documentDirection, digitForm, equationSide, mathOutput, uiLocale]
+    );
+    const debugEnabled = useMemo2(() => {
+      if (debug) {
+        return true;
+      }
+      if (typeof window === "undefined") {
+        return false;
+      }
+      return new URLSearchParams(window.location.search).get("debug") === "1";
+    }, [debug]);
+    const canUndo = useMemo2(() => document2HistoryCanUndo(historyRef.current), [historyTick, documentNode]);
+    const canRedo = useMemo2(() => document2HistoryCanRedo(historyRef.current), [historyTick, documentNode]);
+    const blockSelection = normalizeBlockSelection(blockSelectionState.selection, documentNode.blocks.length);
+    const selectionCount = blockSelection ? blockSelection.to - blockSelection.from + 1 : 0;
+    const canMoveSelectionUp = Boolean(blockSelection && blockSelection.from > 0);
+    const canMoveSelectionDown = Boolean(blockSelection && blockSelection.to < documentNode.blocks.length - 1);
+    const formatTextToken = useMemo2(() => findFormatTextToken(documentNode, editorFocus), [documentNode, editorFocus]);
+    const canFormatText = formatTextToken !== null;
+    const activeTextStyles = formatTextToken?.style ?? {};
+    function clearBlockSelection() {
+      setBlockSelectionState(emptyBlockSelection());
+    }
+    function toggleSelectBlock(blockId, shiftKey) {
+      const index = documentRef.current.blocks.findIndex((block) => block.id === blockId);
+      if (index < 0) {
+        return;
+      }
+      const blockCount = documentRef.current.blocks.length;
+      setBlockSelectionState(
+        (current) => shiftKey ? extendBlockSelectionFromAnchor(current, index, blockCount) : toggleBlockInSelection(current, index, blockCount)
+      );
     }
-    pendingFocusRef.current = null;
-    requestAnimationFrame(() => {
-      if (pending.kind === "math") {
-        const mathButton = Array.from(root.querySelectorAll("[data-math-token-id]")).find(
-          (button) => button.dataset.mathTokenId === pending.tokenId
-        );
-        mathButton?.focus();
+    function moveSelectedBlocks(direction) {
+      const selection = normalizeBlockSelection(blockSelectionState.selection, documentRef.current.blocks.length);
+      if (!selection) {
         return;
       }
-      if (pending.kind === "cite") {
-        const citeButton = Array.from(root.querySelectorAll("[data-cite-token-id]")).find(
-          (button) => button.dataset.citeTokenId === pending.tokenId
-        );
-        citeButton?.focus();
+      const next = moveDocument2BlockRange(documentRef.current, selection.from, selection.to, direction);
+      if (next === documentRef.current) {
         return;
       }
-      if (pending.kind === "ref") {
-        const refButton = Array.from(root.querySelectorAll("[data-ref-token-id]")).find(
-          (button) => button.dataset.refTokenId === pending.tokenId
-        );
-        refButton?.focus();
+      applyDocument(next, "immediate");
+      const remapped = remapSelectionAfterRangeMove(selection, direction);
+      setBlockSelectionState({
+        selection: normalizeBlockSelection(remapped, next.blocks.length),
+        anchor: blockSelectionState.anchor === null ? null : blockSelectionState.anchor + direction
+      });
+    }
+    function deleteSelectedBlocks() {
+      const selection = normalizeBlockSelection(blockSelectionState.selection, documentRef.current.blocks.length);
+      if (!selection) {
         return;
       }
-      const textarea = Array.from(root.querySelectorAll("textarea[data-field-id][data-text-token-id]")).find(
-        (element) => element.dataset.fieldId === pending.fieldId && element.dataset.textTokenId === pending.textTokenId
-      );
-      if (!textarea) {
+      applyDocument(removeDocument2BlockRange(documentRef.current, selection.from, selection.to), "immediate");
+      clearBlockSelection();
+    }
+    useEffect9(() => {
+      injectBuTeXDocument2Styles();
+    }, []);
+    useEffect9(() => {
+      if (!editableEquations || previewOnly) {
+        setSelectedMath(null);
+      }
+    }, [editableEquations, previewOnly]);
+    useEffect9(() => {
+      const next = resolveInitialDocument2(initialDocument, uiLocale, documentMeta);
+      setDocumentNode(next.document);
+      setError(next.error);
+      setSelectedMath(null);
+      setCollapsedBlockIds(/* @__PURE__ */ new Set());
+      historyRef.current = createDocument2History();
+      setHistoryTick((tick) => tick + 1);
+    }, [initialDocument, documentMeta, uiLocale]);
+    useEffect9(() => {
+      onDocumentChange?.(documentNode);
+    }, [documentNode, onDocumentChange]);
+    useEffect9(() => {
+      onDocumentJsonChange?.(documentJson);
+    }, [documentJson, onDocumentJsonChange]);
+    useEffect9(() => {
+      onLatexChange?.(latex);
+    }, [latex, onLatexChange]);
+    useEffect9(() => {
+      const pending = pendingFocusRef.current;
+      const root = widgetRef.current;
+      if (!pending || !root) {
         return;
       }
-      const safeOffset = Math.max(0, Math.min(pending.caretOffset, textarea.value.length));
-      textarea.focus();
-      textarea.setSelectionRange(safeOffset, safeOffset);
-    });
-  }, [documentNode]);
-  const bumpHistoryUi = useCallback2(() => {
-    setHistoryTick((tick) => tick + 1);
-  }, []);
-  const applyDocument = useCallback2(
-    (next, mode = "immediate") => {
-      if (mode === "immediate") {
-        pushDocument2Snapshot(historyRef.current, documentRef.current);
-        bumpHistoryUi();
-      } else if (mode === "text") {
-        if (!textSnapshotArmedRef.current) {
+      pendingFocusRef.current = null;
+      requestAnimationFrame(() => {
+        if (pending.kind === "math") {
+          const mathButton = Array.from(root.querySelectorAll("[data-math-token-id]")).find(
+            (button) => button.dataset.mathTokenId === pending.tokenId
+          );
+          mathButton?.focus();
+          return;
+        }
+        if (pending.kind === "cite") {
+          const citeButton = Array.from(root.querySelectorAll("[data-cite-token-id]")).find(
+            (button) => button.dataset.citeTokenId === pending.tokenId
+          );
+          citeButton?.focus();
+          return;
+        }
+        if (pending.kind === "ref") {
+          const refButton = Array.from(root.querySelectorAll("[data-ref-token-id]")).find(
+            (button) => button.dataset.refTokenId === pending.tokenId
+          );
+          refButton?.focus();
+          return;
+        }
+        const textarea = Array.from(root.querySelectorAll("textarea[data-field-id][data-text-token-id]")).find(
+          (element) => element.dataset.fieldId === pending.fieldId && element.dataset.textTokenId === pending.textTokenId
+        );
+        if (!textarea) {
+          return;
+        }
+        const safeOffset = Math.max(0, Math.min(pending.caretOffset, textarea.value.length));
+        textarea.focus();
+        textarea.setSelectionRange(safeOffset, safeOffset);
+      });
+    }, [documentNode]);
+    const bumpHistoryUi = useCallback2(() => {
+      setHistoryTick((tick) => tick + 1);
+    }, []);
+    const applyDocument = useCallback2(
+      (next, mode = "immediate") => {
+        if (mode === "immediate") {
           pushDocument2Snapshot(historyRef.current, documentRef.current);
-          textSnapshotArmedRef.current = true;
           bumpHistoryUi();
+        } else if (mode === "text") {
+          if (!textSnapshotArmedRef.current) {
+            pushDocument2Snapshot(historyRef.current, documentRef.current);
+            textSnapshotArmedRef.current = true;
+            bumpHistoryUi();
+          }
+          if (textDebounceRef.current !== null) {
+            window.clearTimeout(textDebounceRef.current);
+          }
+          textDebounceRef.current = window.setTimeout(() => {
+            textSnapshotArmedRef.current = false;
+          }, 400);
         }
-        if (textDebounceRef.current !== null) {
-          window.clearTimeout(textDebounceRef.current);
+        documentRef.current = next;
+        setDocumentNode(next);
+      },
+      [bumpHistoryUi]
+    );
+    const afterBlockId = useCallback2(() => resolveInsertAfterBlockId(documentRef.current, editorFocusRef.current), []);
+    const insertImageBlock = useCallback2(
+      (srcOrAssetId = "") => {
+        clearBlockSelection();
+        const after = resolveInsertAfterBlockId(documentRef.current, editorFocusRef.current);
+        applyDocument(addDocument2ImageBlock(documentRef.current, srcOrAssetId, after), "immediate");
+      },
+      [applyDocument]
+    );
+    useImperativeHandle2(
+      ref,
+      () => ({
+        insertImageBlock,
+        updateImageBlockValue(blockId, value) {
+          applyDocument(updateDocument2ImageValue(documentRef.current, blockId, value), "immediate");
+        },
+        getDocumentJson() {
+          return toDocumentJson2(documentRef.current);
         }
-        textDebounceRef.current = window.setTimeout(() => {
-          textSnapshotArmedRef.current = false;
-        }, 400);
+      }),
+      [applyDocument, insertImageBlock]
+    );
+    function undoDocument() {
+      const restored = restoreDocument2Undo(historyRef.current, documentRef.current);
+      if (!restored) {
+        return;
       }
-      setDocumentNode(next);
-    },
-    [bumpHistoryUi]
-  );
-  const afterBlockId = useCallback2(() => resolveInsertAfterBlockId(documentRef.current, editorFocus), [editorFocus]);
-  function undoDocument() {
-    const restored = restoreDocument2Undo(historyRef.current, documentRef.current);
-    if (!restored) {
-      return;
-    }
-    textSnapshotArmedRef.current = false;
-    clearBlockSelection();
-    setDocumentNode(restored);
-    bumpHistoryUi();
-  }
-  function redoDocument() {
-    const restored = restoreDocument2Redo(historyRef.current, documentRef.current);
-    if (!restored) {
-      return;
+      textSnapshotArmedRef.current = false;
+      clearBlockSelection();
+      documentRef.current = restored;
+      setDocumentNode(restored);
+      bumpHistoryUi();
     }
-    textSnapshotArmedRef.current = false;
-    clearBlockSelection();
-    setDocumentNode(restored);
-    bumpHistoryUi();
-  }
-  function openBlock(blockId) {
-    if (!blockId) {
-      return;
+    function redoDocument() {
+      const restored = restoreDocument2Redo(historyRef.current, documentRef.current);
+      if (!restored) {
+        return;
+      }
+      textSnapshotArmedRef.current = false;
+      clearBlockSelection();
+      documentRef.current = restored;
+      setDocumentNode(restored);
+      bumpHistoryUi();
     }
-    setCollapsedBlockIds((current) => {
-      if (!current.has(blockId)) {
-        return current;
+    function openBlock(blockId) {
+      if (!blockId) {
+        return;
       }
-      const next = new Set(current);
-      next.delete(blockId);
-      return next;
-    });
-  }
-  function toggleBlockCollapse(blockId) {
-    setCollapsedBlockIds((current) => {
-      const next = new Set(current);
-      if (next.has(blockId)) {
+      setCollapsedBlockIds((current) => {
+        if (!current.has(blockId)) {
+          return current;
+        }
+        const next = new Set(current);
         next.delete(blockId);
-      } else {
-        next.add(blockId);
-      }
-      return next;
-    });
-  }
-  function collapseAllBlocks() {
-    setCollapsedBlockIds(new Set(documentRef.current.blocks.map((block) => block.id)));
-  }
-  function openAllBlocks() {
-    setCollapsedBlockIds(/* @__PURE__ */ new Set());
-  }
-  async function copyDebugText(text) {
-    try {
-      await navigator.clipboard.writeText(text);
-    } catch {
+        return next;
+      });
     }
-  }
-  function openDebugJsonImport() {
-    setDebugImportText(JSON.stringify(documentJson, null, 2));
-    setDebugImportError("");
-    setDebugImportOpen(true);
-  }
-  function applyDebugJsonImport() {
-    const parsed = parseJsonDebugInput(debugImportText);
-    if (!parsed.ok) {
-      setDebugImportError(parsed.error);
-      return;
+    function toggleBlockCollapse(blockId) {
+      setCollapsedBlockIds((current) => {
+        const next = new Set(current);
+        if (next.has(blockId)) {
+          next.delete(blockId);
+        } else {
+          next.add(blockId);
+        }
+        return next;
+      });
     }
-    try {
-      const imported = fromDocumentJson2(parsed.value);
-      textSnapshotArmedRef.current = false;
-      if (textDebounceRef.current !== null) {
-        window.clearTimeout(textDebounceRef.current);
-        textDebounceRef.current = null;
-      }
-      setDocumentNode(imported);
-      setError(null);
-      setSelectedMath(null);
-      setCitePicker(null);
-      setRefPicker(null);
-      clearBlockSelection();
+    function collapseAllBlocks() {
+      setCollapsedBlockIds(new Set(documentRef.current.blocks.map((block) => block.id)));
+    }
+    function openAllBlocks() {
       setCollapsedBlockIds(/* @__PURE__ */ new Set());
-      setEditorFocus(createEmptyDocument2EditorFocus());
-      historyRef.current = createDocument2History();
-      bumpHistoryUi();
+    }
+    async function copyDebugText(text) {
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch {
+      }
+    }
+    function openDebugJsonImport() {
+      setDebugImportText(JSON.stringify(documentJson, null, 2));
       setDebugImportError("");
-      setDebugImportOpen(false);
-    } catch (importError) {
-      setDebugImportError(importError instanceof Error ? importError.message : String(importError));
+      setDebugImportOpen(true);
     }
-  }
-  useEffect9(() => {
-    const root = widgetRef.current;
-    if (!root) {
-      return;
+    function applyDebugJsonImport() {
+      const parsed = parseJsonDebugInput(debugImportText);
+      if (!parsed.ok) {
+        setDebugImportError(parsed.error);
+        return;
+      }
+      try {
+        const imported = fromDocumentJson2(parsed.value);
+        textSnapshotArmedRef.current = false;
+        if (textDebounceRef.current !== null) {
+          window.clearTimeout(textDebounceRef.current);
+          textDebounceRef.current = null;
+        }
+        setDocumentNode(imported);
+        setError(null);
+        setSelectedMath(null);
+        setCitePicker(null);
+        setRefPicker(null);
+        clearBlockSelection();
+        setCollapsedBlockIds(/* @__PURE__ */ new Set());
+        setEditorFocus(createEmptyDocument2EditorFocus());
+        historyRef.current = createDocument2History();
+        bumpHistoryUi();
+        setDebugImportError("");
+        setDebugImportOpen(false);
+      } catch (importError) {
+        setDebugImportError(importError instanceof Error ? importError.message : String(importError));
+      }
     }
-    const onKeyDown = (event) => {
-      if (!editorOpen) {
+    useEffect9(() => {
+      const root = widgetRef.current;
+      if (!root) {
         return;
       }
-      const mod = event.ctrlKey || event.metaKey;
-      if (!mod) {
+      const onKeyDown = (event) => {
+        if (!editorOpen) {
+          return;
+        }
+        const mod = event.ctrlKey || event.metaKey;
+        if (!mod) {
+          return;
+        }
+        if (event.key.toLowerCase() === "z" && !event.shiftKey) {
+          event.preventDefault();
+          undoDocument();
+        } else if (event.key.toLowerCase() === "z" && event.shiftKey || event.key.toLowerCase() === "y") {
+          event.preventDefault();
+          redoDocument();
+        }
+      };
+      root.addEventListener("keydown", onKeyDown);
+      return () => root.removeEventListener("keydown", onKeyDown);
+    }, [editorOpen]);
+    function rememberFieldFocus(blockId, fieldId, textTokenId, caretOffset, selectionStart, selectionEnd) {
+      openBlock(blockId);
+      clearBlockSelection();
+      setEditorFocus({ blockId, fieldId, textTokenId, caretOffset, selectionStart, selectionEnd });
+    }
+    function rememberMathFocus(blockId, fieldId) {
+      openBlock(blockId);
+      clearBlockSelection();
+      setEditorFocus({ blockId, fieldId, textTokenId: null, caretOffset: 0, selectionStart: 0, selectionEnd: 0 });
+    }
+    function rememberBlockFocus(blockId) {
+      openBlock(blockId);
+      setEditorFocus((current) => ({ ...current, blockId }));
+    }
+    function onFieldBlur() {
+      textSnapshotArmedRef.current = false;
+    }
+    function openNewEquation(mode) {
+      if (!editableEquations) {
         return;
       }
-      if (event.key.toLowerCase() === "z" && !event.shiftKey) {
-        event.preventDefault();
-        undoDocument();
-      } else if (event.key.toLowerCase() === "z" && event.shiftKey || event.key.toLowerCase() === "y") {
-        event.preventDefault();
-        redoDocument();
+      const target = resolveInsertField(documentRef.current, editorFocus);
+      if (target?.fieldId) {
+        openBlock(topLevelBlockIdForField(documentRef.current, target.fieldId));
       }
-    };
-    root.addEventListener("keydown", onKeyDown);
-    return () => root.removeEventListener("keydown", onKeyDown);
-  }, [editorOpen]);
-  function rememberFieldFocus(blockId, fieldId, textTokenId, caretOffset, selectionStart, selectionEnd) {
-    openBlock(blockId);
-    clearBlockSelection();
-    setEditorFocus({ blockId, fieldId, textTokenId, caretOffset, selectionStart, selectionEnd });
-  }
-  function rememberMathFocus(blockId, fieldId) {
-    openBlock(blockId);
-    clearBlockSelection();
-    setEditorFocus({ blockId, fieldId, textTokenId: null, caretOffset: 0, selectionStart: 0, selectionEnd: 0 });
-  }
-  function rememberBlockFocus(blockId) {
-    openBlock(blockId);
-    setEditorFocus((current) => ({ ...current, blockId }));
-  }
-  function onFieldBlur() {
-    textSnapshotArmedRef.current = false;
-  }
-  function openNewEquation(mode) {
-    if (!editableEquations) {
-      return;
-    }
-    const target = resolveInsertField(documentRef.current, editorFocus);
-    if (target?.fieldId) {
-      openBlock(topLevelBlockIdForField(documentRef.current, target.fieldId));
-    }
-    setSelectedMath({
-      tokenId: null,
-      fieldId: target?.fieldId ?? null,
-      textTokenId: target?.textTokenId ?? null,
-      insertAt: target?.caretOffset ?? 0,
-      mathMode: mode,
-      session: equationSessionWithDocumentDigits(createEmptyEquationSession(equationSide)),
-      reason: null,
-      labelEnabled: false,
-      label: ""
-    });
-  }
-  function openMath(token) {
-    if (!editableEquations) {
-      return;
+      setSelectedMath({
+        tokenId: null,
+        fieldId: target?.fieldId ?? null,
+        textTokenId: target?.textTokenId ?? null,
+        insertAt: target?.caretOffset ?? 0,
+        mathMode: mode,
+        session: equationSessionWithDocumentDigits(createEmptyEquationSession(equationSide)),
+        reason: null,
+        labelEnabled: false,
+        label: ""
+      });
     }
-    openBlock(topLevelBlockIdForToken(documentRef.current, token.id));
-    const result = mathTokenToEditorSession(token.math, equationSide);
-    const mode = token.display ? "display" : "inline";
-    if (!result.editable) {
+    function openMath(token) {
+      if (!editableEquations) {
+        return;
+      }
+      openBlock(topLevelBlockIdForToken(documentRef.current, token.id));
+      const result = mathTokenToEditorSession(token.math, equationSide);
+      const mode = token.display ? "display" : "inline";
+      if (!result.editable) {
+        setSelectedMath({
+          tokenId: token.id,
+          fieldId: null,
+          insertAt: 0,
+          textTokenId: null,
+          mathMode: mode,
+          session: equationSessionWithDocumentDigits(createEmptyEquationSession(equationSide)),
+          reason: result.reason,
+          labelEnabled: Boolean(token.labelEnabled),
+          label: token.label ?? ""
+        });
+        return;
+      }
       setSelectedMath({
         tokenId: token.id,
         fieldId: null,
         insertAt: 0,
         textTokenId: null,
         mathMode: mode,
-        session: equationSessionWithDocumentDigits(createEmptyEquationSession(equationSide)),
-        reason: result.reason,
+        session: equationSessionWithDocumentDigits(result.session),
+        reason: null,
         labelEnabled: Boolean(token.labelEnabled),
         label: token.label ?? ""
       });
-      return;
     }
-    setSelectedMath({
-      tokenId: token.id,
-      fieldId: null,
-      insertAt: 0,
-      textTokenId: null,
-      mathMode: mode,
-      session: equationSessionWithDocumentDigits(result.session),
-      reason: null,
-      labelEnabled: Boolean(token.labelEnabled),
-      label: token.label ?? ""
-    });
-  }
-  function toggleEditorPanel() {
-    setEditorOpen((open) => {
-      if (open && !previewOpen) {
-        setPreviewOpen(true);
+    function toggleEditorPanel() {
+      setEditorOpen((open) => {
+        if (open && !previewOpen) {
+          setPreviewOpen(true);
+        }
+        return !open;
+      });
+    }
+    function togglePreviewPanel() {
+      setPreviewOpen((open) => {
+        if (open && !editorOpen) {
+          setEditorOpen(true);
+        }
+        return !open;
+      });
+    }
+    function saveEquation(session) {
+      if (!selectedMath) {
+        return;
       }
-      return !open;
-    });
-  }
-  function togglePreviewPanel() {
-    setPreviewOpen((open) => {
-      if (open && !editorOpen) {
-        setEditorOpen(true);
+      const delimiters = mathDelimiters(selectedMath.mathMode);
+      if (selectedMath.tokenId) {
+        let next2 = replaceMathTokenFromSession(
+          documentRef.current,
+          selectedMath.tokenId,
+          session,
+          delimiters.opening,
+          delimiters.closing,
+          equationSide
+        );
+        if (selectedMath.mathMode === "display") {
+          next2 = updateMathTokenLabel(next2, selectedMath.tokenId, {
+            labelEnabled: selectedMath.labelEnabled,
+            label: selectedMath.label
+          });
+        } else {
+          next2 = updateMathTokenLabel(next2, selectedMath.tokenId, { labelEnabled: false, label: "" });
+        }
+        pendingFocusRef.current = { kind: "math", tokenId: selectedMath.tokenId };
+        applyDocument(next2, "immediate");
+        setSelectedMath(null);
+        return;
       }
-      return !open;
-    });
-  }
-  function saveEquation(session) {
-    if (!selectedMath) {
-      return;
-    }
-    const delimiters = mathDelimiters(selectedMath.mathMode);
-    if (selectedMath.tokenId) {
-      let next2 = replaceMathTokenFromSession(
-        documentRef.current,
-        selectedMath.tokenId,
+      let current = documentRef.current;
+      let fieldId = selectedMath.fieldId;
+      let textTokenId = selectedMath.textTokenId;
+      let insertAt = selectedMath.insertAt;
+      if (!fieldId) {
+        const anchor = afterBlockId();
+        current = addDocument2TextBlock(current, "\\paragraph", anchor);
+        const anchorIndex = anchor ? current.blocks.findIndex((block) => block.id === anchor) : -1;
+        const newIndex = anchorIndex >= 0 ? anchorIndex + 1 : current.blocks.length - 1;
+        const newBlock = current.blocks[newIndex];
+        const field = newBlock?.kind === "textBlock" ? newBlock.field : null;
+        if (!field) {
+          setSelectedMath(null);
+          return;
+        }
+        fieldId = field.id;
+        textTokenId = field.tokens.find((token) => token.kind === "text")?.id ?? null;
+        insertAt = 0;
+      }
+      let next = insertMathTokenAtCaret(
+        current,
+        fieldId,
+        textTokenId,
+        insertAt,
         session,
         delimiters.opening,
         delimiters.closing,
         equationSide
       );
-      if (selectedMath.mathMode === "display") {
-        next2 = updateMathTokenLabel(next2, selectedMath.tokenId, {
-          labelEnabled: selectedMath.labelEnabled,
+      const trailingTextTokenId = trailingTextTokenAfterInsertedMath(current, next, fieldId, textTokenId, insertAt);
+      const fieldAfter = findInlineFieldById(next, fieldId);
+      const insertedMathId = trailingTextTokenId && fieldAfter ? fieldAfter.tokens[Math.max(
+        0,
+        fieldAfter.tokens.findIndex((token) => token.id === trailingTextTokenId) - 1
+      )]?.kind === "math" ? fieldAfter.tokens[Math.max(
+        0,
+        fieldAfter.tokens.findIndex((token) => token.id === trailingTextTokenId) - 1
+      )]?.id : null : fieldAfter?.tokens.filter((token) => token.kind === "math").at(-1)?.id ?? null;
+      if (insertedMathId && selectedMath.mathMode === "display" && selectedMath.labelEnabled) {
+        next = updateMathTokenLabel(next, insertedMathId, {
+          labelEnabled: true,
           label: selectedMath.label
         });
-      } else {
-        next2 = updateMathTokenLabel(next2, selectedMath.tokenId, { labelEnabled: false, label: "" });
       }
-      pendingFocusRef.current = { kind: "math", tokenId: selectedMath.tokenId };
-      applyDocument(next2, "immediate");
+      if (trailingTextTokenId) {
+        pendingFocusRef.current = { kind: "text", fieldId, textTokenId: trailingTextTokenId, caretOffset: 0 };
+      }
+      applyDocument(next, "immediate");
       setSelectedMath(null);
-      return;
     }
-    let current = documentRef.current;
-    let fieldId = selectedMath.fieldId;
-    let textTokenId = selectedMath.textTokenId;
-    let insertAt = selectedMath.insertAt;
-    if (!fieldId) {
-      const anchor = afterBlockId();
-      current = addDocument2TextBlock(current, "\\paragraph", anchor);
-      const anchorIndex = anchor ? current.blocks.findIndex((block) => block.id === anchor) : -1;
-      const newIndex = anchorIndex >= 0 ? anchorIndex + 1 : current.blocks.length - 1;
-      const newBlock = current.blocks[newIndex];
-      const field = newBlock?.kind === "textBlock" ? newBlock.field : null;
-      if (!field) {
-        setSelectedMath(null);
+    function deleteSelectedEquation() {
+      if (!selectedMath?.tokenId) {
         return;
       }
-      fieldId = field.id;
-      textTokenId = field.tokens.find((token) => token.kind === "text")?.id ?? null;
-      insertAt = 0;
-    }
-    let next = insertMathTokenAtCaret(
-      current,
-      fieldId,
-      textTokenId,
-      insertAt,
-      session,
-      delimiters.opening,
-      delimiters.closing,
-      equationSide
-    );
-    const trailingTextTokenId = trailingTextTokenAfterInsertedMath(current, next, fieldId, textTokenId, insertAt);
-    const fieldAfter = findInlineFieldById(next, fieldId);
-    const insertedMathId = trailingTextTokenId && fieldAfter ? fieldAfter.tokens[Math.max(
-      0,
-      fieldAfter.tokens.findIndex((token) => token.id === trailingTextTokenId) - 1
-    )]?.kind === "math" ? fieldAfter.tokens[Math.max(
-      0,
-      fieldAfter.tokens.findIndex((token) => token.id === trailingTextTokenId) - 1
-    )]?.id : null : fieldAfter?.tokens.filter((token) => token.kind === "math").at(-1)?.id ?? null;
-    if (insertedMathId && selectedMath.mathMode === "display" && selectedMath.labelEnabled) {
-      next = updateMathTokenLabel(next, insertedMathId, {
-        labelEnabled: true,
-        label: selectedMath.label
-      });
-    }
-    if (trailingTextTokenId) {
-      pendingFocusRef.current = { kind: "text", fieldId, textTokenId: trailingTextTokenId, caretOffset: 0 };
-    }
-    applyDocument(next, "immediate");
-    setSelectedMath(null);
-  }
-  function deleteSelectedEquation() {
-    if (!selectedMath?.tokenId) {
-      return;
+      const current = documentRef.current;
+      const next = removeMathTokenById(current, selectedMath.tokenId);
+      pendingFocusRef.current = focusAfterDeletedMath(current, next, selectedMath.tokenId);
+      applyDocument(next, "immediate");
+      setSelectedMath(null);
     }
-    const current = documentRef.current;
-    const next = removeMathTokenById(current, selectedMath.tokenId);
-    pendingFocusRef.current = focusAfterDeletedMath(current, next, selectedMath.tokenId);
-    applyDocument(next, "immediate");
-    setSelectedMath(null);
-  }
-  function deleteMathToken(tokenId) {
-    const current = documentRef.current;
-    const next = removeMathTokenById(current, tokenId);
-    pendingFocusRef.current = focusAfterDeletedMath(current, next, tokenId);
-    applyDocument(next, "immediate");
-  }
-  function openCitePickerForInsert() {
-    const target = resolveInsertField(documentRef.current, editorFocus);
-    setCitePicker({
-      tokenId: null,
-      fieldId: target?.fieldId ?? null,
-      textTokenId: target?.textTokenId ?? editorFocus.textTokenId,
-      caretOffset: target?.caretOffset ?? editorFocus.caretOffset,
-      keys: []
-    });
-  }
-  function openCite(token) {
-    setCitePicker({
-      tokenId: token.id,
-      fieldId: null,
-      textTokenId: null,
-      caretOffset: 0,
-      keys: [...token.keys]
-    });
-  }
-  function confirmCiteKeys(keys) {
-    if (!citePicker || keys.length === 0) {
-      setCitePicker(null);
-      return;
+    function deleteMathToken(tokenId) {
+      const current = documentRef.current;
+      const next = removeMathTokenById(current, tokenId);
+      pendingFocusRef.current = focusAfterDeletedMath(current, next, tokenId);
+      applyDocument(next, "immediate");
+    }
+    function openCitePickerForInsert() {
+      const target = resolveInsertField(documentRef.current, editorFocus);
+      setCitePicker({
+        tokenId: null,
+        fieldId: target?.fieldId ?? null,
+        textTokenId: target?.textTokenId ?? editorFocus.textTokenId,
+        caretOffset: target?.caretOffset ?? editorFocus.caretOffset,
+        keys: []
+      });
     }
-    if (citePicker.tokenId) {
-      applyDocument(updateCiteTokenKeys(documentRef.current, citePicker.tokenId, keys), "immediate");
-      pendingFocusRef.current = { kind: "cite", tokenId: citePicker.tokenId };
-      setCitePicker(null);
-      return;
+    function openCite(token) {
+      setCitePicker({
+        tokenId: token.id,
+        fieldId: null,
+        textTokenId: null,
+        caretOffset: 0,
+        keys: [...token.keys]
+      });
     }
-    const target = resolveInsertField(documentRef.current, editorFocus);
-    const fieldId = citePicker.fieldId ?? target?.fieldId;
-    if (!fieldId) {
+    function confirmCiteKeys(keys) {
+      if (!citePicker || keys.length === 0) {
+        setCitePicker(null);
+        return;
+      }
+      if (citePicker.tokenId) {
+        applyDocument(updateCiteTokenKeys(documentRef.current, citePicker.tokenId, keys), "immediate");
+        pendingFocusRef.current = { kind: "cite", tokenId: citePicker.tokenId };
+        setCitePicker(null);
+        return;
+      }
+      const target = resolveInsertField(documentRef.current, editorFocus);
+      const fieldId = citePicker.fieldId ?? target?.fieldId;
+      if (!fieldId) {
+        setCitePicker(null);
+        return;
+      }
+      const textTokenId = citePicker.textTokenId ?? target?.textTokenId ?? null;
+      const caretOffset = citePicker.caretOffset ?? target?.caretOffset ?? 0;
+      const next = insertCiteTokenAtCaret(documentRef.current, fieldId, textTokenId, caretOffset, keys);
+      applyDocument(next, "immediate");
       setCitePicker(null);
-      return;
     }
-    const textTokenId = citePicker.textTokenId ?? target?.textTokenId ?? null;
-    const caretOffset = citePicker.caretOffset ?? target?.caretOffset ?? 0;
-    const next = insertCiteTokenAtCaret(documentRef.current, fieldId, textTokenId, caretOffset, keys);
-    applyDocument(next, "immediate");
-    setCitePicker(null);
-  }
-  function deleteCiteToken(tokenId) {
-    applyDocument(removeCiteTokenById(documentRef.current, tokenId), "immediate");
-  }
-  function openRefPickerForInsert() {
-    const target = resolveInsertField(documentRef.current, editorFocus);
-    setRefPicker({
-      tokenId: null,
-      fieldId: target?.fieldId ?? null,
-      textTokenId: target?.textTokenId ?? editorFocus.textTokenId,
-      caretOffset: target?.caretOffset ?? editorFocus.caretOffset,
-      keys: [],
-      refCommand: "ref"
-    });
-  }
-  function openRef(token) {
-    setRefPicker({
-      tokenId: token.id,
-      fieldId: null,
-      textTokenId: null,
-      caretOffset: 0,
-      keys: [...token.keys],
-      refCommand: token.refCommand
-    });
-  }
-  function confirmRefKeys(keys, refCommand) {
-    if (!refPicker || keys.length === 0) {
-      setRefPicker(null);
-      return;
+    function deleteCiteToken(tokenId) {
+      applyDocument(removeCiteTokenById(documentRef.current, tokenId), "immediate");
+    }
+    function openRefPickerForInsert() {
+      const target = resolveInsertField(documentRef.current, editorFocus);
+      setRefPicker({
+        tokenId: null,
+        fieldId: target?.fieldId ?? null,
+        textTokenId: target?.textTokenId ?? editorFocus.textTokenId,
+        caretOffset: target?.caretOffset ?? editorFocus.caretOffset,
+        keys: [],
+        refCommand: "ref"
+      });
     }
-    if (refPicker.tokenId) {
-      applyDocument(updateRefTokenKeys(documentRef.current, refPicker.tokenId, keys, refCommand), "immediate");
-      pendingFocusRef.current = { kind: "ref", tokenId: refPicker.tokenId };
-      setRefPicker(null);
-      return;
+    function openRef(token) {
+      setRefPicker({
+        tokenId: token.id,
+        fieldId: null,
+        textTokenId: null,
+        caretOffset: 0,
+        keys: [...token.keys],
+        refCommand: token.refCommand
+      });
     }
-    const target = resolveInsertField(documentRef.current, editorFocus);
-    const fieldId = refPicker.fieldId ?? target?.fieldId;
-    if (!fieldId) {
+    function confirmRefKeys(keys, refCommand) {
+      if (!refPicker || keys.length === 0) {
+        setRefPicker(null);
+        return;
+      }
+      if (refPicker.tokenId) {
+        applyDocument(updateRefTokenKeys(documentRef.current, refPicker.tokenId, keys, refCommand), "immediate");
+        pendingFocusRef.current = { kind: "ref", tokenId: refPicker.tokenId };
+        setRefPicker(null);
+        return;
+      }
+      const target = resolveInsertField(documentRef.current, editorFocus);
+      const fieldId = refPicker.fieldId ?? target?.fieldId;
+      if (!fieldId) {
+        setRefPicker(null);
+        return;
+      }
+      const textTokenId = refPicker.textTokenId ?? target?.textTokenId ?? null;
+      const caretOffset = refPicker.caretOffset ?? target?.caretOffset ?? 0;
+      const next = insertRefTokenAtCaret(documentRef.current, fieldId, textTokenId, caretOffset, keys, refCommand);
+      applyDocument(next, "immediate");
       setRefPicker(null);
-      return;
     }
-    const textTokenId = refPicker.textTokenId ?? target?.textTokenId ?? null;
-    const caretOffset = refPicker.caretOffset ?? target?.caretOffset ?? 0;
-    const next = insertRefTokenAtCaret(documentRef.current, fieldId, textTokenId, caretOffset, keys, refCommand);
-    applyDocument(next, "immediate");
-    setRefPicker(null);
-  }
-  function deleteRefToken(tokenId) {
-    applyDocument(removeRefTokenById(documentRef.current, tokenId), "immediate");
-  }
-  function toggleInlineTextStyle(styleName) {
-    if (!canFormatText || !editorFocus.fieldId || !editorFocus.textTokenId) {
-      return;
+    function deleteRefToken(tokenId) {
+      applyDocument(removeRefTokenById(documentRef.current, tokenId), "immediate");
     }
-    applyDocument(
-      toggleTextTokenStyle(
-        documentRef.current,
-        editorFocus.fieldId,
-        editorFocus.textTokenId,
-        editorFocus.selectionStart,
-        editorFocus.selectionEnd,
-        styleName
-      ),
-      "immediate"
-    );
-  }
-  const showEditorPanel = !previewOnly && editorOpen;
-  const showPreviewPanel = previewOnly || previewOpen;
-  return /* @__PURE__ */ jsx17(
-    "div",
-    {
-      ref: widgetRef,
-      className: ["butex-document2-widget", className].filter(Boolean).join(" "),
-      dir: uiLocaleDirection(uiLocale),
-      lang: uiLocale,
-      children: /* @__PURE__ */ jsxs15("div", { className: "butex-document2-widget__shell", children: [
-        !previewOnly ? /* @__PURE__ */ jsxs15("div", { className: "butex-document2-widget__toolbar", children: [
-          /* @__PURE__ */ jsx17(
-            DocumentInsertToolbar,
-            {
-              canUndo,
-              canRedo,
-              editableEquations,
-              uiLocale,
-              digitForm,
-              selectionCount,
-              canMoveSelectionUp,
-              canMoveSelectionDown,
-              canFormatText,
-              activeTextStyles,
-              onUndo: undoDocument,
-              onRedo: redoDocument,
-              onToggleTextStyle: toggleInlineTextStyle,
-              onMoveSelectionUp: () => moveSelectedBlocks(-1),
-              onMoveSelectionDown: () => moveSelectedBlocks(1),
-              onDeleteSelection: deleteSelectedBlocks,
-              onAddSection: () => {
-                clearBlockSelection();
-                applyDocument(addDocument2TextBlock(documentRef.current, "\\section", afterBlockId()), "immediate");
-              },
-              onAddSubsection: () => {
-                clearBlockSelection();
-                applyDocument(addDocument2TextBlock(documentRef.current, "\\subsection", afterBlockId()), "immediate");
-              },
-              onAddSubsubsection: () => {
-                clearBlockSelection();
-                applyDocument(addDocument2TextBlock(documentRef.current, "\\subsubsection", afterBlockId()), "immediate");
-              },
-              onAddParagraph: () => {
-                clearBlockSelection();
-                applyDocument(addDocument2TextBlock(documentRef.current, "\\paragraph", afterBlockId()), "immediate");
-              },
-              onAddInlineEquation: () => openNewEquation("inline"),
-              onAddDisplayEquation: () => openNewEquation("display"),
-              onAddTable: (rowCount, colCount) => {
-                clearBlockSelection();
-                applyDocument(addDocument2TableBlock(documentRef.current, "l".repeat(colCount), rowCount, colCount, afterBlockId()), "immediate");
-              },
-              onAddList: () => {
-                clearBlockSelection();
-                applyDocument(addDocument2ListBlock(documentRef.current, false, afterBlockId()), "immediate");
-              },
-              onAddEnumerate: () => {
-                clearBlockSelection();
-                applyDocument(addDocument2ListBlock(documentRef.current, true, afterBlockId()), "immediate");
-              },
-              onAddFigure: () => {
-                clearBlockSelection();
-                applyDocument(addDocument2ImageBlock(documentRef.current, "", afterBlockId()), "immediate");
-              },
-              onInsertCitation: openCitePickerForInsert,
-              onInsertInternalRef: openRefPickerForInsert,
-              onInsertBibliography: () => {
-                clearBlockSelection();
-                applyDocument(ensureDocument2BibliographyBlock(documentRef.current, afterBlockId()), "immediate");
-              },
-              onManageReferences: () => setReferencesOpen(true),
-              onManageLabels: () => setLabelsOpen(true),
-              onOpenArticleMeta: () => focusArticleMetaPanel(articleMetaPanelRef.current),
-              onDigitFormChange: (next) => {
-                setDigitFormState(next);
-                onDigitFormChange?.(next);
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxs15("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.panels, children: [
-            /* @__PURE__ */ jsx17("button", { type: "button", "aria-pressed": editorOpen, onClick: toggleEditorPanel, children: editorOpen ? messages.hideEditor : messages.editor }),
-            /* @__PURE__ */ jsx17("button", { type: "button", "aria-pressed": previewOpen, onClick: togglePreviewPanel, children: previewOpen ? messages.hidePreview : messages.preview })
-          ] }),
-          /* @__PURE__ */ jsxs15("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.collapseBlocks, children: [
-            /* @__PURE__ */ jsx17("button", { type: "button", onClick: collapseAllBlocks, children: messages.collapseAll }),
-            /* @__PURE__ */ jsx17("button", { type: "button", onClick: openAllBlocks, children: messages.openAll })
-          ] })
-        ] }) : null,
-        error ? /* @__PURE__ */ jsx17("p", { className: "butex-document2-widget__error", children: error }) : null,
-        /* @__PURE__ */ jsxs15(
-          "div",
-          {
-            className: `butex-document2-widget__layout butex-document2-widget__layout--editor-${showEditorPanel ? "open" : "closed"} butex-document2-widget__layout--preview-${showPreviewPanel ? "open" : "closed"}`,
-            children: [
-              !previewOnly ? /* @__PURE__ */ jsx17(
-                "section",
-                {
-                  className: "butex-document2-widget__panel butex-document2-widget__editor-panel",
-                  "aria-label": messages.documentEditor,
-                  "aria-hidden": !showEditorPanel,
-                  children: /* @__PURE__ */ jsxs15("div", { className: "butex-document2-widget__blocks", children: [
-                    /* @__PURE__ */ jsx17(
-                      ArticleMetaPanel,
-                      {
-                        meta: documentNode.meta ?? emptyDocument2Meta(),
-                        uiLocale,
-                        digitForm,
-                        panelRef: articleMetaPanelRef,
-                        onChange: (patch) => {
-                          clearBlockSelection();
-                          applyDocument(updateDocument2Meta(documentRef.current, patch), "text");
-                        }
-                      }
-                    ),
-                    documentNode.blocks.map((block, blockIndex) => /* @__PURE__ */ jsx17(
-                      BlockEditor,
-                      {
-                        block,
-                        references: documentNode.references,
-                        documentNode,
-                        documentDirection,
-                        digitForm,
-                        mathOutput,
-                        equationSide,
-                        editableEquations,
-                        editableCitations: !previewOnly,
-                        uiLocale,
-                        isCollapsed: collapsedBlockIds.has(block.id),
-                        selected: Boolean(blockSelection && blockIndex >= blockSelection.from && blockIndex <= blockSelection.to),
-                        onToggleSelect: toggleSelectBlock,
-                        onTextChange: (fieldId, tokenId, text) => {
-                          clearBlockSelection();
-                          applyDocument(updateTextToken(documentRef.current, fieldId, tokenId, text), "text");
-                        },
-                        onOpenMath: openMath,
-                        onDeleteMath: editableEquations ? deleteMathToken : void 0,
-                        onOpenCite: openCite,
-                        onDeleteCite: deleteCiteToken,
-                        onOpenRef: openRef,
-                        onDeleteRef: deleteRefToken,
-                        onToggleCollapse: toggleBlockCollapse,
-                        onBlockFocus: rememberBlockFocus,
-                        onFieldFocus: rememberFieldFocus,
-                        onMathFocus: rememberMathFocus,
-                        onFieldBlur,
-                        onImageSrcChange: (blockId, value) => {
-                          clearBlockSelection();
-                          applyDocument(updateDocument2ImageValue(documentRef.current, blockId, value), "text");
-                        },
-                        onFloatMetaChange: (blockId, kind, patch) => {
-                          clearBlockSelection();
-                          applyDocument(
-                            kind === "image" ? updateDocument2ImageMeta(documentRef.current, blockId, patch) : updateDocument2TableMeta(documentRef.current, blockId, patch),
-                            "text"
-                          );
-                        },
-                        onParagraphCenteredChange: (blockId, centered) => {
-                          clearBlockSelection();
-                          applyDocument(updateDocument2TextBlockCentered(documentRef.current, blockId, centered), "text");
-                        },
-                        onAddListItem: (listBlockId) => {
-                          clearBlockSelection();
-                          applyDocument(addDocument2ListItem(documentRef.current, listBlockId), "immediate");
-                        },
-                        onRemoveListItem: (listBlockId, itemId) => {
-                          clearBlockSelection();
-                          applyDocument(removeDocument2ListItem(documentRef.current, listBlockId, itemId), "immediate");
-                        },
-                        onManageReferences: () => setReferencesOpen(true)
-                      },
-                      block.id
-                    ))
-                  ] })
-                }
-              ) : null,
-              /* @__PURE__ */ jsx17(
-                "section",
-                {
-                  className: "butex-document2-widget__panel butex-document2-widget__preview-panel",
-                  "aria-label": messages.documentPreview,
-                  "aria-hidden": !showPreviewPanel,
-                  children: /* @__PURE__ */ jsx17(
-                    DocumentPreview,
-                    {
-                      blocks: preview.blocks,
-                      output: mathOutput,
-                      documentDirection,
-                      uiLocale,
-                      digitForm,
-                      resolveImageUrl
-                    }
-                  )
-                }
-              )
-            ]
-          }
+    function toggleInlineTextStyle(styleName) {
+      if (!canFormatText || !editorFocus.fieldId || !editorFocus.textTokenId) {
+        return;
+      }
+      applyDocument(
+        toggleTextTokenStyle(
+          documentRef.current,
+          editorFocus.fieldId,
+          editorFocus.textTokenId,
+          editorFocus.selectionStart,
+          editorFocus.selectionEnd,
+          styleName
         ),
-        debugEnabled ? /* @__PURE__ */ jsxs15("div", { className: "butex-document2-widget__dev", children: [
-          debugEnabled && documentNode.diagnostics.length > 0 ? /* @__PURE__ */ jsxs15(Fragment4, { children: [
-            /* @__PURE__ */ jsx17("strong", { children: messages.importWarnings }),
-            documentNode.diagnostics.map((diagnostic) => /* @__PURE__ */ jsx17("p", { className: "butex-document2-widget__dev-diagnostic", children: formatDocument2Diagnostic(diagnostic, messages) }, `${diagnostic.path}-${diagnostic.message}`))
-          ] }) : null,
-          /* @__PURE__ */ jsxs15("div", { className: "butex-document2-widget__dev-actions", children: [
-            /* @__PURE__ */ jsx17("button", { type: "button", onClick: () => void copyDebugText(JSON.stringify(documentJson, null, 2)), children: "Copy JSON" }),
-            /* @__PURE__ */ jsx17("button", { type: "button", onClick: () => void copyDebugText(latex), children: "Copy TeX" }),
-            /* @__PURE__ */ jsx17("button", { type: "button", "aria-expanded": debugImportOpen, onClick: openDebugJsonImport, children: "Import JSON" })
-          ] }),
-          debugImportOpen ? /* @__PURE__ */ jsxs15("div", { className: "butex-document2-widget__dev-import", children: [
+        "immediate"
+      );
+    }
+    const showEditorPanel = !previewOnly && editorOpen;
+    const showPreviewPanel = previewOnly || previewOpen;
+    return /* @__PURE__ */ jsx17(
+      "div",
+      {
+        ref: widgetRef,
+        className: ["butex-document2-widget", className].filter(Boolean).join(" "),
+        dir: uiLocaleDirection(uiLocale),
+        lang: uiLocale,
+        children: /* @__PURE__ */ jsxs15("div", { className: "butex-document2-widget__shell", children: [
+          !previewOnly ? /* @__PURE__ */ jsxs15("div", { className: "butex-document2-widget__toolbar", children: [
             /* @__PURE__ */ jsx17(
-              "textarea",
+              DocumentInsertToolbar,
               {
-                value: debugImportText,
-                "aria-label": "Import Document2 JSON",
-                spellCheck: false,
-                onChange: (event) => {
-                  setDebugImportText(event.currentTarget.value);
-                  setDebugImportError("");
+                canUndo,
+                canRedo,
+                editableEquations,
+                uiLocale,
+                digitForm,
+                selectionCount,
+                canMoveSelectionUp,
+                canMoveSelectionDown,
+                canFormatText,
+                activeTextStyles,
+                onUndo: undoDocument,
+                onRedo: redoDocument,
+                onToggleTextStyle: toggleInlineTextStyle,
+                onMoveSelectionUp: () => moveSelectedBlocks(-1),
+                onMoveSelectionDown: () => moveSelectedBlocks(1),
+                onDeleteSelection: deleteSelectedBlocks,
+                onAddSection: () => {
+                  clearBlockSelection();
+                  applyDocument(addDocument2TextBlock(documentRef.current, "\\section", afterBlockId()), "immediate");
+                },
+                onAddSubsection: () => {
+                  clearBlockSelection();
+                  applyDocument(addDocument2TextBlock(documentRef.current, "\\subsection", afterBlockId()), "immediate");
+                },
+                onAddSubsubsection: () => {
+                  clearBlockSelection();
+                  applyDocument(addDocument2TextBlock(documentRef.current, "\\subsubsection", afterBlockId()), "immediate");
+                },
+                onAddParagraph: () => {
+                  clearBlockSelection();
+                  applyDocument(addDocument2TextBlock(documentRef.current, "\\paragraph", afterBlockId()), "immediate");
+                },
+                onAddInlineEquation: () => openNewEquation("inline"),
+                onAddDisplayEquation: () => openNewEquation("display"),
+                onAddTable: (rowCount, colCount) => {
+                  clearBlockSelection();
+                  applyDocument(addDocument2TableBlock(documentRef.current, "l".repeat(colCount), rowCount, colCount, afterBlockId()), "immediate");
+                },
+                onAddList: () => {
+                  clearBlockSelection();
+                  applyDocument(addDocument2ListBlock(documentRef.current, false, afterBlockId()), "immediate");
+                },
+                onAddEnumerate: () => {
+                  clearBlockSelection();
+                  applyDocument(addDocument2ListBlock(documentRef.current, true, afterBlockId()), "immediate");
+                },
+                onAddFigure: () => insertImageBlock(""),
+                onInsertCitation: openCitePickerForInsert,
+                onInsertInternalRef: openRefPickerForInsert,
+                onInsertBibliography: () => {
+                  clearBlockSelection();
+                  applyDocument(ensureDocument2BibliographyBlock(documentRef.current, afterBlockId()), "immediate");
+                },
+                onManageReferences: () => setReferencesOpen(true),
+                onManageLabels: () => setLabelsOpen(true),
+                onOpenArticleMeta: () => focusArticleMetaPanel(articleMetaPanelRef.current),
+                onDigitFormChange: (next) => {
+                  setDigitFormState(next);
+                  onDigitFormChange?.(next);
                 }
               }
             ),
+            /* @__PURE__ */ jsxs15("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.panels, children: [
+              /* @__PURE__ */ jsx17("button", { type: "button", "aria-pressed": editorOpen, onClick: toggleEditorPanel, children: editorOpen ? messages.hideEditor : messages.editor }),
+              /* @__PURE__ */ jsx17("button", { type: "button", "aria-pressed": previewOpen, onClick: togglePreviewPanel, children: previewOpen ? messages.hidePreview : messages.preview })
+            ] }),
+            /* @__PURE__ */ jsxs15("div", { className: "butex-document2-widget__toolbar-group", role: "group", "aria-label": messages.collapseBlocks, children: [
+              /* @__PURE__ */ jsx17("button", { type: "button", onClick: collapseAllBlocks, children: messages.collapseAll }),
+              /* @__PURE__ */ jsx17("button", { type: "button", onClick: openAllBlocks, children: messages.openAll })
+            ] })
+          ] }) : null,
+          error ? /* @__PURE__ */ jsx17("p", { className: "butex-document2-widget__error", children: error }) : null,
+          /* @__PURE__ */ jsxs15(
+            "div",
+            {
+              className: `butex-document2-widget__layout butex-document2-widget__layout--editor-${showEditorPanel ? "open" : "closed"} butex-document2-widget__layout--preview-${showPreviewPanel ? "open" : "closed"}`,
+              children: [
+                !previewOnly ? /* @__PURE__ */ jsx17(
+                  "section",
+                  {
+                    className: "butex-document2-widget__panel butex-document2-widget__editor-panel",
+                    "aria-label": messages.documentEditor,
+                    "aria-hidden": !showEditorPanel,
+                    children: /* @__PURE__ */ jsxs15("div", { className: "butex-document2-widget__blocks", children: [
+                      /* @__PURE__ */ jsx17(
+                        ArticleMetaPanel,
+                        {
+                          meta: documentNode.meta ?? emptyDocument2Meta(),
+                          uiLocale,
+                          digitForm,
+                          panelRef: articleMetaPanelRef,
+                          onChange: (patch) => {
+                            clearBlockSelection();
+                            applyDocument(updateDocument2Meta(documentRef.current, patch), "text");
+                          }
+                        }
+                      ),
+                      documentNode.blocks.map((block, blockIndex) => /* @__PURE__ */ jsx17(
+                        BlockEditor,
+                        {
+                          block,
+                          references: documentNode.references,
+                          documentNode,
+                          documentDirection,
+                          digitForm,
+                          mathOutput,
+                          equationSide,
+                          editableEquations,
+                          editableCitations: !previewOnly,
+                          uiLocale,
+                          isCollapsed: collapsedBlockIds.has(block.id),
+                          selected: Boolean(blockSelection && blockIndex >= blockSelection.from && blockIndex <= blockSelection.to),
+                          onToggleSelect: toggleSelectBlock,
+                          onTextChange: (fieldId, tokenId, text) => {
+                            clearBlockSelection();
+                            applyDocument(updateTextToken(documentRef.current, fieldId, tokenId, text), "text");
+                          },
+                          onOpenMath: openMath,
+                          onDeleteMath: editableEquations ? deleteMathToken : void 0,
+                          onOpenCite: openCite,
+                          onDeleteCite: deleteCiteToken,
+                          onOpenRef: openRef,
+                          onDeleteRef: deleteRefToken,
+                          onToggleCollapse: toggleBlockCollapse,
+                          onBlockFocus: rememberBlockFocus,
+                          onFieldFocus: rememberFieldFocus,
+                          onMathFocus: rememberMathFocus,
+                          onFieldBlur,
+                          onImageSrcChange: (blockId, value) => {
+                            clearBlockSelection();
+                            applyDocument(updateDocument2ImageValue(documentRef.current, blockId, value), "text");
+                          },
+                          onFloatMetaChange: (blockId, kind, patch) => {
+                            clearBlockSelection();
+                            applyDocument(
+                              kind === "image" ? updateDocument2ImageMeta(documentRef.current, blockId, patch) : updateDocument2TableMeta(documentRef.current, blockId, patch),
+                              "text"
+                            );
+                          },
+                          onParagraphCenteredChange: (blockId, centered) => {
+                            clearBlockSelection();
+                            applyDocument(updateDocument2TextBlockCentered(documentRef.current, blockId, centered), "text");
+                          },
+                          onAddListItem: (listBlockId) => {
+                            clearBlockSelection();
+                            applyDocument(addDocument2ListItem(documentRef.current, listBlockId), "immediate");
+                          },
+                          onRemoveListItem: (listBlockId, itemId) => {
+                            clearBlockSelection();
+                            applyDocument(removeDocument2ListItem(documentRef.current, listBlockId, itemId), "immediate");
+                          },
+                          onManageReferences: () => setReferencesOpen(true)
+                        },
+                        block.id
+                      ))
+                    ] })
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx17(
+                  "section",
+                  {
+                    className: "butex-document2-widget__panel butex-document2-widget__preview-panel",
+                    "aria-label": messages.documentPreview,
+                    "aria-hidden": !showPreviewPanel,
+                    children: /* @__PURE__ */ jsx17(
+                      DocumentPreview,
+                      {
+                        blocks: preview.blocks,
+                        output: mathOutput,
+                        documentDirection,
+                        uiLocale,
+                        digitForm,
+                        resolveImageUrl
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          debugEnabled ? /* @__PURE__ */ jsxs15("div", { className: "butex-document2-widget__dev", children: [
+            debugEnabled && documentNode.diagnostics.length > 0 ? /* @__PURE__ */ jsxs15(Fragment4, { children: [
+              /* @__PURE__ */ jsx17("strong", { children: messages.importWarnings }),
+              documentNode.diagnostics.map((diagnostic) => /* @__PURE__ */ jsx17("p", { className: "butex-document2-widget__dev-diagnostic", children: formatDocument2Diagnostic(diagnostic, messages) }, `${diagnostic.path}-${diagnostic.message}`))
+            ] }) : null,
             /* @__PURE__ */ jsxs15("div", { className: "butex-document2-widget__dev-actions", children: [
-              /* @__PURE__ */ jsx17("button", { type: "button", onClick: applyDebugJsonImport, children: "Apply" }),
+              /* @__PURE__ */ jsx17("button", { type: "button", onClick: () => void copyDebugText(JSON.stringify(documentJson, null, 2)), children: "Copy JSON" }),
+              /* @__PURE__ */ jsx17("button", { type: "button", onClick: () => void copyDebugText(latex), children: "Copy TeX" }),
+              /* @__PURE__ */ jsx17("button", { type: "button", "aria-expanded": debugImportOpen, onClick: openDebugJsonImport, children: "Import JSON" })
+            ] }),
+            debugImportOpen ? /* @__PURE__ */ jsxs15("div", { className: "butex-document2-widget__dev-import", children: [
               /* @__PURE__ */ jsx17(
-                "button",
+                "textarea",
                 {
-                  type: "button",
-                  onClick: () => {
-                    setDebugImportOpen(false);
+                  value: debugImportText,
+                  "aria-label": "Import Document2 JSON",
+                  spellCheck: false,
+                  onChange: (event) => {
+                    setDebugImportText(event.currentTarget.value);
                     setDebugImportError("");
-                  },
-                  children: "Cancel"
+                  }
                 }
-              )
-            ] }),
-            debugImportError ? /* @__PURE__ */ jsx17("p", { className: "butex-document2-widget__dev-error", children: debugImportError }) : null
+              ),
+              /* @__PURE__ */ jsxs15("div", { className: "butex-document2-widget__dev-actions", children: [
+                /* @__PURE__ */ jsx17("button", { type: "button", onClick: applyDebugJsonImport, children: "Apply" }),
+                /* @__PURE__ */ jsx17(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setDebugImportOpen(false);
+                      setDebugImportError("");
+                    },
+                    children: "Cancel"
+                  }
+                )
+              ] }),
+              debugImportError ? /* @__PURE__ */ jsx17("p", { className: "butex-document2-widget__dev-error", children: debugImportError }) : null
+            ] }) : null,
+            /* @__PURE__ */ jsx17("strong", { children: "LaTeX" }),
+            /* @__PURE__ */ jsx17("pre", { children: latex }),
+            /* @__PURE__ */ jsx17("strong", { children: "JSON" }),
+            /* @__PURE__ */ jsx17("pre", { children: JSON.stringify(documentJson, null, 2) }),
+            /* @__PURE__ */ jsx17("strong", { children: "AST" }),
+            /* @__PURE__ */ jsx17("pre", { children: JSON.stringify(documentNode, null, 2) })
           ] }) : null,
-          /* @__PURE__ */ jsx17("strong", { children: "LaTeX" }),
-          /* @__PURE__ */ jsx17("pre", { children: latex }),
-          /* @__PURE__ */ jsx17("strong", { children: "JSON" }),
-          /* @__PURE__ */ jsx17("pre", { children: JSON.stringify(documentJson, null, 2) }),
-          /* @__PURE__ */ jsx17("strong", { children: "AST" }),
-          /* @__PURE__ */ jsx17("pre", { children: JSON.stringify(documentNode, null, 2) })
-        ] }) : null,
-        !previewOnly && selectedMath ? /* @__PURE__ */ jsx17(
-          EquationDrawer,
-          {
-            debug: debugEnabled,
-            session: selectedMath.session,
-            reason: selectedMath.reason,
-            mathMode: selectedMath.mathMode,
-            canDelete: Boolean(selectedMath.tokenId),
-            equationSide,
-            uiLocale,
-            labelEnabled: selectedMath.labelEnabled,
-            label: selectedMath.label,
-            labels: documentLabels,
-            references: documentNode.references,
-            ownerId: selectedMath.tokenId ?? void 0,
-            onLabelEnabledChange: (enabled) => setSelectedMath((current) => current ? { ...current, labelEnabled: enabled } : current),
-            onLabelChange: (nextLabel) => setSelectedMath((current) => current ? { ...current, label: nextLabel } : current),
-            onMathModeChange: (mode) => setSelectedMath((current) => current ? { ...current, mathMode: mode } : current),
-            onClose: () => setSelectedMath(null),
-            onSave: saveEquation,
-            onDelete: deleteSelectedEquation
-          }
-        ) : null,
-        !previewOnly ? /* @__PURE__ */ jsx17(
-          CitePickerPopover,
-          {
-            open: citePicker !== null,
-            references: documentNode.references,
-            initialKeys: citePicker?.keys ?? [],
-            uiLocale,
-            digitForm,
-            onClose: () => setCitePicker(null),
-            onConfirm: confirmCiteKeys,
-            onManageReferences: () => {
-              setCitePicker(null);
-              setReferencesOpen(true);
+          !previewOnly && selectedMath ? /* @__PURE__ */ jsx17(
+            EquationDrawer,
+            {
+              debug: debugEnabled,
+              session: selectedMath.session,
+              reason: selectedMath.reason,
+              mathMode: selectedMath.mathMode,
+              canDelete: Boolean(selectedMath.tokenId),
+              equationSide,
+              uiLocale,
+              labelEnabled: selectedMath.labelEnabled,
+              label: selectedMath.label,
+              labels: documentLabels,
+              references: documentNode.references,
+              ownerId: selectedMath.tokenId ?? void 0,
+              onLabelEnabledChange: (enabled) => setSelectedMath((current) => current ? { ...current, labelEnabled: enabled } : current),
+              onLabelChange: (nextLabel) => setSelectedMath((current) => current ? { ...current, label: nextLabel } : current),
+              onMathModeChange: (mode) => setSelectedMath((current) => current ? { ...current, mathMode: mode } : current),
+              onClose: () => setSelectedMath(null),
+              onSave: saveEquation,
+              onDelete: deleteSelectedEquation
             }
-          }
-        ) : null,
-        !previewOnly ? /* @__PURE__ */ jsx17(
-          RefPickerPopover,
-          {
-            open: refPicker !== null,
-            labels: documentLabels,
-            initialKeys: refPicker?.keys ?? [],
-            initialRefCommand: refPicker?.refCommand ?? "ref",
-            uiLocale,
-            digitForm,
-            onClose: () => setRefPicker(null),
-            onConfirm: confirmRefKeys,
-            onManageLabels: () => {
-              setRefPicker(null);
-              setLabelsOpen(true);
+          ) : null,
+          !previewOnly ? /* @__PURE__ */ jsx17(
+            CitePickerPopover,
+            {
+              open: citePicker !== null,
+              references: documentNode.references,
+              initialKeys: citePicker?.keys ?? [],
+              uiLocale,
+              digitForm,
+              onClose: () => setCitePicker(null),
+              onConfirm: confirmCiteKeys,
+              onManageReferences: () => {
+                setCitePicker(null);
+                setReferencesOpen(true);
+              }
             }
-          }
-        ) : null,
-        !previewOnly ? /* @__PURE__ */ jsx17(
-          ReferencesPanel,
-          {
-            open: referencesOpen,
-            references: documentNode.references,
-            labels: documentLabels,
-            uiLocale,
-            digitForm,
-            onClose: () => setReferencesOpen(false),
-            onAdd: (partial) => applyDocument(addDocument2Reference(documentRef.current, partial), "immediate"),
-            onUpdate: (referenceId, patch) => applyDocument(updateDocument2Reference(documentRef.current, referenceId, patch), "immediate"),
-            onRemove: (referenceId) => applyDocument(removeDocument2Reference(documentRef.current, referenceId), "immediate"),
-            onMove: (referenceId, direction) => applyDocument(moveDocument2Reference(documentRef.current, referenceId, direction), "immediate")
-          }
-        ) : null,
-        !previewOnly ? /* @__PURE__ */ jsx17(
-          LabelsPanel,
-          {
-            open: labelsOpen,
-            labels: documentLabels,
-            references: documentNode.references,
-            uiLocale,
-            digitForm,
-            onClose: () => setLabelsOpen(false),
-            onUpdateFloat: (ownerId, kind, patch) => applyDocument(
-              kind === "fig" ? updateDocument2ImageMeta(documentRef.current, ownerId, patch) : updateDocument2TableMeta(documentRef.current, ownerId, patch),
-              "text"
-            ),
-            onUpdateEquationLabel: (tokenId, patch) => applyDocument(updateMathTokenLabel(documentRef.current, tokenId, patch), "text")
-          }
-        ) : null
-      ] })
-    }
-  );
-}
+          ) : null,
+          !previewOnly ? /* @__PURE__ */ jsx17(
+            RefPickerPopover,
+            {
+              open: refPicker !== null,
+              labels: documentLabels,
+              initialKeys: refPicker?.keys ?? [],
+              initialRefCommand: refPicker?.refCommand ?? "ref",
+              uiLocale,
+              digitForm,
+              onClose: () => setRefPicker(null),
+              onConfirm: confirmRefKeys,
+              onManageLabels: () => {
+                setRefPicker(null);
+                setLabelsOpen(true);
+              }
+            }
+          ) : null,
+          !previewOnly ? /* @__PURE__ */ jsx17(
+            ReferencesPanel,
+            {
+              open: referencesOpen,
+              references: documentNode.references,
+              labels: documentLabels,
+              uiLocale,
+              digitForm,
+              onClose: () => setReferencesOpen(false),
+              onAdd: (partial) => applyDocument(addDocument2Reference(documentRef.current, partial), "immediate"),
+              onUpdate: (referenceId, patch) => applyDocument(updateDocument2Reference(documentRef.current, referenceId, patch), "immediate"),
+              onRemove: (referenceId) => applyDocument(removeDocument2Reference(documentRef.current, referenceId), "immediate"),
+              onMove: (referenceId, direction) => applyDocument(moveDocument2Reference(documentRef.current, referenceId, direction), "immediate")
+            }
+          ) : null,
+          !previewOnly ? /* @__PURE__ */ jsx17(
+            LabelsPanel,
+            {
+              open: labelsOpen,
+              labels: documentLabels,
+              references: documentNode.references,
+              uiLocale,
+              digitForm,
+              onClose: () => setLabelsOpen(false),
+              onUpdateFloat: (ownerId, kind, patch) => applyDocument(
+                kind === "fig" ? updateDocument2ImageMeta(documentRef.current, ownerId, patch) : updateDocument2TableMeta(documentRef.current, ownerId, patch),
+                "text"
+              ),
+              onUpdateEquationLabel: (tokenId, patch) => applyDocument(updateMathTokenLabel(documentRef.current, tokenId, patch), "text")
+            }
+          ) : null
+        ] })
+      }
+    );
+  }
+);
+ButexDocumentEditor2.displayName = "ButexDocumentEditor2";
 export {
   ButexDocumentEditor2,
   DOCUMENT2_WIDGET_CSS,