@arbidocs/blocks 0.4.96 → 0.4.97

package/dist/{chunk-K27SDLLN.js → chunk-QIEEFBZ5.js}

@@ -1,12 +1,12 @@
 "use client";
 import { stylesXml, definitionBookmark, DEFINITION_BOOKMARK_PREFIX, compareTerms, groupDefinitions, definitionLabels, filterTermGroups, toDefinition, definitionIdOfBookmark, esc, parseDefinition, docxPackage, documentXml } from './chunk-D3QPYKZG.js';
-import { filterMentionCandidates, MentionMenu, findMentionQuery, listOptionId, extractMentions } from './chunk-AA3PT6KR.js';
+import { filterMentionCandidates, MentionMenu, findMentionQuery, listOptionId, extractMentions, useListKeyNav } from './chunk-AA3PT6KR.js';
 import { unzipSync, strFromU8, strToU8, zipSync } from 'fflate';
 import { collectReviewItems, revisionItemsOf } from '@docx-editor.dev/core/store';
 import React3, { createContext, useContext, useState, useRef, useCallback, useEffect, useLayoutEffect, useMemo } from 'react';
-import { useDocxEditor, ReviewRailContext, useEditorSnapshot, useChromeTranslate, DocxEditor, createFontSource } from '@docx-editor.dev/react';
+import { useDocxEditor, ReviewRailContext, useEditorSnapshot, useChromeTranslate, DocxEditor, createFontSource, useParagraphStyle, useEditorCommand } from '@docx-editor.dev/react';
 import { AiMarkdown, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Button, DialogFooter, cn, splitMarkdownBlocks } from '@arbidocs/react/ui';
-import { MessageSquarePlus, MessageSquare, PencilLine, ChevronLeft, ChevronRight, X, ChevronUp, ChevronDown, CheckCheck, RotateCcw, CircleCheck, Trash2, Check, SendHorizontal, Type, Ellipsis, RefreshCw, WifiOff, Download, Save, BookA, ListRestart } from 'lucide-react';
+import { MessageSquarePlus, MessageSquare, PencilLine, ChevronLeft, ChevronRight, X, ChevronUp, ChevronDown, CheckCheck, RotateCcw, CircleCheck, Trash2, Check, SendHorizontal, Type, Ellipsis, RefreshCw, WifiOff, Download, Save, BookA, ListRestart, Superscript, NotebookText } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { renderToStaticMarkup } from 'react-dom/server';
@@ -2209,57 +2209,12 @@ var WordDraftStream = class {
     }
   }
 };
-function contentPath(documentId) {
-  const match = /^(doc-[A-Za-z0-9]+)@v([1-9][0-9]*)$/.exec(documentId);
-  return match ? `/${encodeURIComponent(match[1])}/content?version=${match[2]}` : `/${encodeURIComponent(documentId)}/content`;
-}
-var drafts = /* @__PURE__ */ new Map();
-var stateBytes = (room) => Y.encodeStateAsUpdate(room.ydoc);
-var encodeState = (room) => {
-  let binary = "";
-  for (const byte of stateBytes(room)) binary += String.fromCharCode(byte);
-  return btoa(binary);
-};
-function covered(room, vector, receipt) {
-  const decode = (value) => Uint8Array.from(atob(value), (c) => c.charCodeAt(0));
-  const server = Y.decodeStateVector(decode(vector)), local = Y.decodeStateVector(Y.encodeStateVector(room.ydoc));
-  for (const [client, clock] of local) if ((server.get(client) || 0) < clock) return false;
-  const deleted = Y.decodeUpdate(stateBytes(room)).ds.clients;
-  const saved = Y.decodeUpdate(decode(receipt)).ds.clients;
-  for (const [client, ranges] of deleted)
-    for (const range of ranges) {
-      if (!(saved.get(client) || []).some(
-        (s) => s.clock <= range.clock && s.clock + s.len >= range.clock + range.len
-      ))
-        return false;
-    }
-  return true;
-}
-var EditorBoundary = class extends React3.Component {
-  state = {};
-  static getDerivedStateFromError(error) {
-    return { error };
-  }
-  render() {
-    return this.state.error ? /* @__PURE__ */ jsxs("div", { role: "alert", className: "native-docx-error", children: [
-      "Could not render this Word document: ",
-      this.state.error.message
-    ] }) : this.props.children;
-  }
-};
-function DocxParticipants({ session }) {
-  const [people, setPeople] = useState([]);
-  useEffect(() => {
-    if (!session) return;
-    setPeople(session.participants());
-    return session.subscribeParticipants(setPeople);
-  }, [session]);
-  return /* @__PURE__ */ jsx("div", { className: "native-docx-presence", "aria-label": "People viewing this document", children: people.map((p) => /* @__PURE__ */ jsx("span", { className: "native-docx-avatar", title: p.name, children: p.name.split(" ").map((s) => s[0]).slice(0, 2).join("") }, p.actorId)) });
-}
 function RibbonMenu({
   label,
   icon,
-  children
+  children,
+  className,
+  testId
 }) {
   const [open, setOpen] = useState(false);
   const element = useRef(null);
@@ -2283,10 +2238,11 @@ function RibbonMenu({
       "button",
       {
         type: "button",
-        className: "native-docx-ribbon-trigger",
+        className: ["native-docx-ribbon-trigger", className].filter(Boolean).join(" "),
         "aria-label": label,
         title: label,
         "aria-expanded": open,
+        "data-testid": testId,
         onMouseDown: (event) => event.preventDefault(),
         onClick: () => setOpen((value) => !value),
         children: icon
@@ -2302,11 +2258,295 @@ function RibbonMenu({
           if (!(event.target instanceof HTMLInputElement || event.target instanceof HTMLSelectElement))
             event.preventDefault();
         },
-        children
+        children: typeof children === "function" ? children(() => setOpen(false)) : children
+      }
+    )
+  ] });
+}
+
+// src/docx/wordStyles.ts
+var QUICK_STYLES = ["Normal", "Title", "heading 1", "heading 2", "heading 3"];
+function findStyle(options, name) {
+  const wanted = name.toLowerCase();
+  const id = name.replace(/(^|\s)(\w)/g, (_, _s, c) => c.toUpperCase());
+  return options.find((o) => o.name.toLowerCase() === wanted) ?? options.find((o) => o.styleId.toLowerCase() === id.toLowerCase());
+}
+function styleLabel(name) {
+  return name === name.toLowerCase() ? name.replace(/(^|\s)(\w)/g, (m) => m.toUpperCase()) : name;
+}
+function wordShortcut(event) {
+  const mod = event.ctrlKey || event.metaKey;
+  if (!mod) return null;
+  if (event.altKey && !event.shiftKey) {
+    switch (event.code) {
+      case "KeyF":
+        return "footnote";
+      case "KeyD":
+        return "endnote";
+      case "Digit1":
+      case "Numpad1":
+        return "heading 1";
+      case "Digit2":
+      case "Numpad2":
+        return "heading 2";
+      case "Digit3":
+      case "Numpad3":
+        return "heading 3";
+    }
+  }
+  if (event.shiftKey && !event.altKey && event.code === "KeyN") return "Normal";
+  return null;
+}
+var FILTER_FROM = 8;
+function previewStyle(option) {
+  const { fontFamily, fontSizePt, bold, italic, color } = option.preview;
+  return {
+    fontFamily: fontFamily ? `"${fontFamily}", serif` : void 0,
+    // In the face of the style, but within a row: 9-18pt.
+    fontSize: fontSizePt ? `${Math.min(18, Math.max(9, fontSizePt))}pt` : void 0,
+    fontWeight: bold ? 700 : void 0,
+    fontStyle: italic ? "italic" : void 0,
+    color: color ? `#${color}` : void 0
+  };
+}
+function Gallery({ close }) {
+  const { value, setValue, options, isEnabled } = useParagraphStyle();
+  const editor = useDocxEditor();
+  const [query, setQuery] = useState("");
+  const quick = useMemo(
+    () => QUICK_STYLES.map((name) => findStyle(options, name)).filter(
+      (o) => !!o
+    ),
+    [options]
+  );
+  const shown = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return q ? options.filter(
+      (o) => o.name.toLowerCase().includes(q) || o.styleId.toLowerCase().includes(q)
+    ) : options;
+  }, [options, query]);
+  const apply = (option) => {
+    setValue(option.styleId);
+    close();
+    editor?.surface?.focus();
+  };
+  const nav = useListKeyNav({
+    open: true,
+    items: shown,
+    onPick: apply,
+    onDismiss: close,
+    resetKey: query
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "native-docx-style-gallery", "data-testid": "docx-style-gallery", children: [
+    quick.length > 0 && /* @__PURE__ */ jsx("div", { className: "native-docx-style-quick", role: "group", "aria-label": "Quick styles", children: quick.map((option) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": value === option.styleId,
+        disabled: !isEnabled,
+        "data-style-id": option.styleId,
+        title: styleLabel(option.name),
+        onClick: () => apply(option),
+        children: /* @__PURE__ */ jsx("span", { style: previewStyle(option), children: styleLabel(option.name) })
+      },
+      option.styleId
+    )) }),
+    options.length > FILTER_FROM && /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: "native-docx-style-filter",
+        placeholder: "Find a style",
+        "aria-label": "Find a style",
+        value: query,
+        autoFocus: true,
+        onChange: (event) => setQuery(event.target.value),
+        onKeyDown: (event) => {
+          nav.handleKeyDown(event);
+        },
+        ...nav.comboboxProps
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "ul",
+      {
+        className: "native-docx-style-list",
+        role: "listbox",
+        id: nav.listboxId,
+        "aria-label": "Document styles",
+        children: [
+          shown.map((option, index) => /* @__PURE__ */ jsx(
+            "li",
+            {
+              id: listOptionId(nav.listboxId, index),
+              role: "option",
+              "aria-selected": value === option.styleId,
+              "aria-disabled": !isEnabled,
+              "data-active": index === nav.selectedIndex || void 0,
+              "data-style-id": option.styleId,
+              onMouseEnter: () => nav.setSelectedIndex(index),
+              onClick: () => isEnabled && apply(option),
+              children: /* @__PURE__ */ jsx("span", { style: previewStyle(option), children: styleLabel(option.name) })
+            },
+            option.styleId
+          )),
+          shown.length === 0 && /* @__PURE__ */ jsx("li", { className: "native-docx-style-empty", children: "No matching style" })
+        ]
       }
     )
   ] });
 }
+function StyleGallery() {
+  const { value, options } = useParagraphStyle();
+  const current = options.find((o) => o.styleId === value);
+  const name = current ? styleLabel(current.name) : "Styles";
+  return /* @__PURE__ */ jsx(
+    RibbonMenu,
+    {
+      label: "Styles",
+      className: "native-docx-style-trigger",
+      testId: "docx-style-trigger",
+      icon: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "native-docx-style-current", "data-testid": "docx-current-style", children: name }),
+        /* @__PURE__ */ jsx(ChevronDown, { size: 12, "aria-hidden": true })
+      ] }),
+      children: (close) => /* @__PURE__ */ jsx(Gallery, { close })
+    }
+  );
+}
+function useInsertNote(kind) {
+  const command = useEditorCommand(kind === "footnote" ? "insert.footnote" : "insert.endnote");
+  const { options } = useParagraphStyle();
+  const editor = useDocxEditor();
+  const insert = () => {
+    if (!command.execute()) return false;
+    const text = findStyle(options, `${kind} text`);
+    if (text && editor)
+      withDirectEditing(
+        editor,
+        () => editor.exec({ type: "setParagraphStyle", styleId: text.styleId })
+      );
+    return true;
+  };
+  return { insert, isEnabled: command.isEnabled, disabledReason: command.disabledReason };
+}
+function NoteAction({
+  kind,
+  label,
+  shortcut,
+  icon
+}) {
+  const note = useInsertNote(kind);
+  return /* @__PURE__ */ jsx(
+    DocxEditor.Toolbar.Action,
+    {
+      label: `${label} (${shortcut})`,
+      icon,
+      disabled: !note.isEnabled,
+      disabledReason: note.disabledReason ?? void 0,
+      onSelect: () => void note.insert(),
+      className: `native-docx-insert-${kind}`
+    }
+  );
+}
+function NoteButtons() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      NoteAction,
+      {
+        kind: "footnote",
+        label: "Insert footnote",
+        shortcut: "Ctrl+Alt+F",
+        icon: /* @__PURE__ */ jsx(Superscript, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NoteAction,
+      {
+        kind: "endnote",
+        label: "Insert endnote",
+        shortcut: "Ctrl+Alt+D",
+        icon: /* @__PURE__ */ jsx(NotebookText, { size: 16 })
+      }
+    )
+  ] });
+}
+function WordShortcuts({ scope }) {
+  const footnote = useInsertNote("footnote");
+  const endnote = useInsertNote("endnote");
+  const styles = useParagraphStyle();
+  const editor = useDocxEditor();
+  const latest = useRef({ footnote, endnote, styles, editor });
+  latest.current = { footnote, endnote, styles, editor };
+  useEffect(() => {
+    const element = scope.current;
+    if (!element) return;
+    const onKeyDown = (event) => {
+      const action = wordShortcut(event);
+      if (!action) return;
+      const { footnote: footnote2, endnote: endnote2, styles: styles2, editor: editor2 } = latest.current;
+      if (action === "footnote" || action === "endnote") {
+        if (!(action === "footnote" ? footnote2 : endnote2).insert()) return;
+      } else {
+        const style = findStyle(styles2.options, action);
+        if (!style) return;
+        styles2.setValue(style.styleId);
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      editor2?.surface?.focus();
+    };
+    element.addEventListener("keydown", onKeyDown, true);
+    return () => element.removeEventListener("keydown", onKeyDown, true);
+  }, [scope]);
+  return null;
+}
+function contentPath(documentId) {
+  const match = /^(doc-[A-Za-z0-9]+)@v([1-9][0-9]*)$/.exec(documentId);
+  return match ? `/${encodeURIComponent(match[1])}/content?version=${match[2]}` : `/${encodeURIComponent(documentId)}/content`;
+}
+var drafts = /* @__PURE__ */ new Map();
+var stateBytes = (room) => Y.encodeStateAsUpdate(room.ydoc);
+var encodeState = (room) => {
+  let binary = "";
+  for (const byte of stateBytes(room)) binary += String.fromCharCode(byte);
+  return btoa(binary);
+};
+function covered(room, vector, receipt) {
+  const decode = (value) => Uint8Array.from(atob(value), (c) => c.charCodeAt(0));
+  const server = Y.decodeStateVector(decode(vector)), local = Y.decodeStateVector(Y.encodeStateVector(room.ydoc));
+  for (const [client, clock] of local) if ((server.get(client) || 0) < clock) return false;
+  const deleted = Y.decodeUpdate(stateBytes(room)).ds.clients;
+  const saved = Y.decodeUpdate(decode(receipt)).ds.clients;
+  for (const [client, ranges] of deleted)
+    for (const range of ranges) {
+      if (!(saved.get(client) || []).some(
+        (s) => s.clock <= range.clock && s.clock + s.len >= range.clock + range.len
+      ))
+        return false;
+    }
+  return true;
+}
+var EditorBoundary = class extends React3.Component {
+  state = {};
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  render() {
+    return this.state.error ? /* @__PURE__ */ jsxs("div", { role: "alert", className: "native-docx-error", children: [
+      "Could not render this Word document: ",
+      this.state.error.message
+    ] }) : this.props.children;
+  }
+};
+function DocxParticipants({ session }) {
+  const [people, setPeople] = useState([]);
+  useEffect(() => {
+    if (!session) return;
+    setPeople(session.participants());
+    return session.subscribeParticipants(setPeople);
+  }, [session]);
+  return /* @__PURE__ */ jsx("div", { className: "native-docx-presence", "aria-label": "People viewing this document", children: people.map((p) => /* @__PURE__ */ jsx("span", { className: "native-docx-avatar", title: p.name, children: p.name.split(" ").map((s) => s[0]).slice(0, 2).join("") }, p.actorId)) });
+}
 function DefinedTermButtons() {
   const terms = useDefinedTerms();
   if (!terms) return null;
@@ -2349,6 +2589,7 @@ function DocxRibbon({
     /* @__PURE__ */ jsxs("select", { "aria-label": "Ribbon tab", value: tab, onChange: (event) => setTab(event.target.value), children: [
       /* @__PURE__ */ jsx("option", { children: "Home" }),
       /* @__PURE__ */ jsx("option", { children: "Insert" }),
+      /* @__PURE__ */ jsx("option", { children: "References" }),
       /* @__PURE__ */ jsx("option", { children: "Review" })
     ] }),
     /* @__PURE__ */ jsxs(DocxEditor.Toolbar, { t, preset: false, onSave, children: [
@@ -2356,6 +2597,7 @@ function DocxRibbon({
       /* @__PURE__ */ jsx(DocxEditor.Toolbar.Redo, {}),
       /* @__PURE__ */ jsx(DocxEditor.Toolbar.Save, {}),
       tab === "Home" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(StyleGallery, {}),
         /* @__PURE__ */ jsx(DocxEditor.Toolbar.Bold, {}),
         /* @__PURE__ */ jsx(DocxEditor.Toolbar.Italic, {}),
         /* @__PURE__ */ jsx(DocxEditor.Toolbar.Underline, {}),
@@ -2366,7 +2608,6 @@ function DocxRibbon({
           /* @__PURE__ */ jsx(DocxEditor.Toolbar.Highlight, {})
         ] }),
         /* @__PURE__ */ jsxs(RibbonMenu, { label: "More formatting", icon: /* @__PURE__ */ jsx(Ellipsis, { size: 16 }), children: [
-          /* @__PURE__ */ jsx(DocxEditor.Toolbar.StylePicker, {}),
           /* @__PURE__ */ jsx(DocxEditor.Toolbar.Alignment, {}),
           /* @__PURE__ */ jsx(DocxEditor.Toolbar.BulletList, {}),
           /* @__PURE__ */ jsx(DocxEditor.Toolbar.NumberedList, {}),
@@ -2383,6 +2624,7 @@ function DocxRibbon({
         /* @__PURE__ */ jsx(DocxEditor.Toolbar.Link, {}),
         /* @__PURE__ */ jsx(DefinedTermButtons, {})
       ] }),
+      tab === "References" && /* @__PURE__ */ jsx(NoteButtons, {}),
       tab === "Review" && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(DocxEditor.Toolbar.EditingMode, {}),
         /* @__PURE__ */ jsx(DocxEditor.Toolbar.Comments, {}),
@@ -2749,6 +2991,7 @@ function NativeDocxEditor({
                       )
                     }
                   ),
+                  !stream && /* @__PURE__ */ jsx(WordShortcuts, { scope: stageRef }),
                   /* @__PURE__ */ jsxs(
                     "div",
                     {
@@ -2880,5 +3123,5 @@ async function loadFonts(baseUrl) {
 }
 
 export { DEFAULT_DEFINED_TERMS_LABELS, DEFINED_TERM_TRIGGER, DefinedTermsProvider, DocxCommentActivity, DocxEditorReview, DocxMentions, DocxParticipants, DocxRibbon, NativeDocxEditor, editorPort, findDefinitionsSection, insertDefinedTerm, loadDocxFonts, normalizeDocxExport, reviewModule, updateDefinitions, useDefinedTerms, useReview, useReviewItem, withDirectEditing };
-//# sourceMappingURL=chunk-K27SDLLN.js.map
-//# sourceMappingURL=chunk-K27SDLLN.js.map
+//# sourceMappingURL=chunk-QIEEFBZ5.js.map
+//# sourceMappingURL=chunk-QIEEFBZ5.js.map