@w100n/documents 0.13.0 → 0.15.0

package/dist/TextEditor-NSICFE6U.js

@@ -0,0 +1,1562 @@
+'use client';
+import {
+  useLoad
+} from "./chunk-QDH7EZAF.js";
+import {
+  useLive
+} from "./chunk-OXC4PUOC.js";
+import {
+  a4,
+  align,
+  changes,
+  cleanPaste,
+  clear,
+  decide,
+  entries,
+  fromMarkdown,
+  indent,
+  kit,
+  letter,
+  locate,
+  notes,
+  paging,
+  replace,
+  searching,
+  spacing,
+  suggesting,
+  toMarkdown,
+  track
+} from "./chunk-Z7UNJ4ND.js";
+import {
+  rove,
+  useRestore
+} from "./chunk-TDP6OJET.js";
+import {
+  mathml,
+  readDocx,
+  writeDocx
+} from "./chunk-M4OQG3EN.js";
+import "./chunk-ISOOUYLI.js";
+
+// src/editor/TextEditor.tsx
+import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  Baseline,
+  BetweenHorizontalEnd,
+  BetweenHorizontalStart,
+  BetweenVerticalEnd,
+  BetweenVerticalStart,
+  Bold,
+  Check,
+  ChevronDown,
+  ChevronUp,
+  CloudAlert,
+  Code,
+  FilePenLine,
+  Highlighter,
+  ImagePlus,
+  Italic,
+  Link,
+  Link2Off,
+  List,
+  ListChecks,
+  ListIndentDecrease,
+  ListIndentIncrease,
+  ListOrdered,
+  ListTree,
+  Grid3x3,
+  Image,
+  MessageSquarePlus,
+  MessagesSquare,
+  PaintBucket,
+  PaintRoller,
+  Search,
+  Omega,
+  PanelLeft,
+  PanelRight,
+  Ruler,
+  PanelTop,
+  Pencil,
+  Plus,
+  Minus,
+  Redo2,
+  RemoveFormatting,
+  Reply,
+  RotateCcw,
+  Save,
+  Sigma,
+  Strikethrough,
+  Table,
+  Subscript,
+  Superscript,
+  TableCellsMerge,
+  TableColumnsSplit,
+  TableRowsSplit,
+  Trash2,
+  Underline,
+  Undo2,
+  UnfoldVertical,
+  WifiOff,
+  X
+} from "lucide-react";
+import { Fragment as Fragment2, useEffect, useRef as useRef2, useState as useState2 } from "react";
+import { createPortal } from "react-dom";
+
+// src/viewers/DocxView.tsx
+import { useLayoutEffect, useRef, useState } from "react";
+
+// src/viewers/headings.ts
+var last = 0;
+function collect(root, selector, level = (el) => Number(el.tagName.slice(1))) {
+  return [...root.querySelectorAll(selector)].flatMap((el) => {
+    const text = el.textContent?.trim() ?? "";
+    if (!text) return [];
+    if (!el.id) el.id = `w100n-docs-h${++last}`;
+    return [{ id: el.id, level: Math.min(3, Math.max(1, level(el) || 1)), text }];
+  });
+}
+
+// src/viewers/DocxView.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DocxView({ bytes, onOutline, failed }) {
+  const box = useRef(null);
+  const [error, setError] = useState(false);
+  useLayoutEffect(() => {
+    let live = true;
+    let width = 0;
+    const root = box.current;
+    const fit = () => {
+      const wrapper = root.querySelector(".w100n-docx-wrapper");
+      if (wrapper && width) wrapper.style.zoom = String(Math.min(1, root.clientWidth / width));
+    };
+    const watch = new ResizeObserver(fit);
+    root.replaceChildren();
+    setError(false);
+    import("docx-preview").then(({ renderAsync }) => renderAsync(bytes, root, void 0, { inWrapper: true, className: "w100n-docx", ignoreLastRenderedPageBreak: true, renderAltChunks: false })).then(() => {
+      if (!live) return;
+      width = Math.max(0, ...[...root.querySelectorAll("section.w100n-docx")].map((page) => page.offsetWidth));
+      fit();
+      watch.observe(root);
+      onOutline(collect(root, '[class*="heading"]', (el) => Number(/heading(\d)/i.exec(el.className)?.[1] ?? 1)));
+    }).catch(() => {
+      if (live) setError(true);
+    });
+    return () => {
+      live = false;
+      watch.disconnect();
+    };
+  }, [bytes, onOutline]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    error && /* @__PURE__ */ jsx("p", { className: "w100n-docs-note", children: failed }),
+    /* @__PURE__ */ jsx("div", { ref: box, className: "w100n-docs-docx" })
+  ] });
+}
+
+// src/editor/TextEditor.tsx
+import { Fragment as Fragment3, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var legal = { width: 816, height: 1344 };
+var symbols = [
+  ["\xA9", "copyright"],
+  ["\xAE", "registered"],
+  ["\u2122", "trademark"],
+  ["\xA7", "section"],
+  ["\xB6", "paragraph"],
+  ["\u2020", "dagger"],
+  ["\u2021", "double dagger"],
+  ["\u2022", "bullet"],
+  ["\u2026", "ellipsis"],
+  ["\u2030", "per mille"],
+  ["\u20AC", "euro"],
+  ["\xA3", "pound"],
+  ["\xA5", "yen"],
+  ["\u20B4", "hryvnia"],
+  ["z\u0142", "zloty"],
+  ["\xB0", "degree"],
+  ["\xB1", "plus minus"],
+  ["\xD7", "times multiply"],
+  ["\xF7", "divide"],
+  ["\u2248", "approximately"],
+  ["\u2260", "not equal"],
+  ["\u2264", "less or equal"],
+  ["\u2265", "greater or equal"],
+  ["\u221E", "infinity"],
+  ["\u221A", "square root"],
+  ["\u2211", "sum"],
+  ["\u03C0", "pi"],
+  ["\u03A9", "omega"],
+  ["\xB5", "micro"],
+  ["\u03B1", "alpha"],
+  ["\u03B2", "beta"],
+  ["\u03B3", "gamma"],
+  ["\u0394", "delta"],
+  ["\u03BB", "lambda"],
+  ["\u2192", "arrow right"],
+  ["\u2190", "arrow left"],
+  ["\u2191", "arrow up"],
+  ["\u2193", "arrow down"],
+  ["\u21D2", "arrow implies"],
+  ["\u2713", "check tick"],
+  ["\u2014", "em dash"],
+  ["\u2013", "en dash"],
+  ["\xAB", "quote left"],
+  ["\xBB", "quote right"],
+  ["\u201E", "quote low"],
+  ["\u2116", "number"],
+  ["\xBD", "half"],
+  ["\xBC", "quarter"],
+  ["\xB2", "squared"],
+  ["\xB3", "cubed"]
+];
+var helpers = [["x\xB2", "^{2}"], ["x\u2099", "_{n}"], ["\u221Ax", "\\sqrt{}"], ["a/b", "\\frac{}{}"], ["\u2211", "\\sum_{}^{}"], ["\u222B", "\\int "], ["\u03C0", "\\pi "], ["\u2264", "\\le "], ["\u2265", "\\ge "], ["\u2260", "\\ne "], ["\xB1", "\\pm "], ["\xB7", "\\cdot "]];
+var cm = (px) => Math.round(px / 96 * 254) / 100;
+var inks = ["#0f172a", "#475569", "#dc2626", "#ea580c", "#ca8a04", "#16a34a", "#0891b2", "#2563eb", "#7c3aed", "#db2777"];
+var glows = ["#fef08a", "#bbf7d0", "#bfdbfe", "#fbcfe8", "#fed7aa", "#ddd6fe"];
+var faces = ["Arial", "Calibri", "Cambria", "Courier New", "Georgia", "Inter", "Roboto", "Times New Roman", "Verdana"];
+var sizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
+var uid = () => Math.random().toString(36).slice(2, 10);
+function TextEditor({ kind, bytes, t, language, rights, host, together, documentId, onSaved, onOutline, onReading, onPanel, slot, head, file, guard }) {
+  const docx = kind === "docx";
+  const can = { edit: !!host?.save && !!rights?.edit, comment: !!host?.comment && !!rights && (rights.comment || rights.edit) };
+  const source = useLoad(async () => {
+    if (docx) return { ...await readDocx(bytes), md: null };
+    const md = fromMarkdown(new TextDecoder().decode(bytes));
+    return { doc: md.doc, md, styles: [], page: a4 };
+  }, [bytes, kind]);
+  const live = useLive(together ? host : void 0, documentId, kind, bytes, source.data?.doc, language, can.edit, onSaved);
+  const shared = live?.ready ? live.wire : null;
+  if (live?.readonly) can.edit = false;
+  const baseline = useRef2(null);
+  const anchors = useRef2(/* @__PURE__ */ new Map());
+  const scroller = useRef2(null);
+  const root = useRef2(null);
+  const [pop, setPop] = useState2(null);
+  const [dialog, setDialog] = useState2(null);
+  const field = useRef2(null);
+  const [more, setMore] = useState2(() => typeof localStorage !== "undefined" && localStorage.getItem("w100n-docs-more") === "1");
+  const [zoom, setZoom] = useState2(null);
+  const [layout, setLayout] = useState2(null);
+  const [room, setRoom] = useState2(0);
+  const [saving, setSaving] = useState2("idle");
+  const [href, setHref] = useState2("");
+  const [grid, setGrid] = useState2({ rows: 0, cols: 0 });
+  const [draft, setDraft] = useState2(null);
+  const [reply, setReply] = useState2(null);
+  const [active, setActive] = useState2(null);
+  const [resolved, setResolved] = useState2(false);
+  const [posting, setPosting] = useState2("idle");
+  const [added, setAdded] = useState2([]);
+  const [changed, setChanged] = useState2({});
+  const [editing, setEditing] = useState2(null);
+  const [dropping, setDropping] = useState2(null);
+  const [failed, setFailed] = useState2(false);
+  const [paint, setPaint] = useState2(null);
+  const [query, setQuery] = useState2("");
+  const [swap, setSwap] = useState2("");
+  const [matchCase, setMatchCase] = useState2(false);
+  const [count, setCount] = useState2({ words: 0, pages: 0 });
+  const [marg, setMarg] = useState2(null);
+  const [unsetup, setUnsetup] = useState2(false);
+  const [draft2, setDraft2] = useState2(null);
+  useRestore(pop !== null);
+  useRestore(editing !== null);
+  useRestore(dropping !== null);
+  const editor = useEditor({
+    extensions: kit(kind, t, shared),
+    content: shared ? null : source.data?.doc ?? null,
+    editable: can.edit && (!live || !!shared),
+    immediatelyRender: true,
+    shouldRerenderOnTransaction: false,
+    editorProps: { attributes: { class: "w100n-docs-prose w100n-text-body", "aria-label": t.documentText }, transformPastedHTML: cleanPaste },
+    onCreate: ({ editor: made }) => {
+      if (source.data && !live) baseline.current = { bytes, doc: made.state.doc, base: source.data.md && track(source.data.md, made.state.doc) };
+    }
+  }, [source.data, can.edit, shared]);
+  const state = useEditorState({
+    editor,
+    selector: ({ editor: e }) => {
+      if (!e) return null;
+      const { $from, empty } = e.state.selection;
+      const block = $from.parent;
+      return {
+        style: e.isActive("codeBlock") ? "code" : block.type.name === "heading" ? `h${block.attrs.level}` : e.isActive("blockquote") ? "quote" : "normal",
+        bold: e.isActive("bold"),
+        italic: e.isActive("italic"),
+        underline: e.isActive("underline"),
+        strike: e.isActive("strike"),
+        code: e.isActive("code"),
+        bullets: e.isActive("bulletList"),
+        numbers: e.isActive("orderedList"),
+        tasks: e.isActive("taskList"),
+        align: block.attrs.align ?? "left",
+        table: e.isActive("table"),
+        link: e.isActive("link"),
+        color: e.getAttributes("textStyle").color ?? null,
+        glow: e.isActive("highlight"),
+        font: e.getAttributes("textStyle").fontFamily ?? null,
+        size: e.getAttributes("textStyle").fontSize ?? null,
+        fill: e.getAttributes("tableCell").background ?? e.getAttributes("tableHeader").background ?? null,
+        bare: e.getAttributes("table").borders === "none",
+        sup: e.isActive("superscript"),
+        sub: e.isActive("subscript"),
+        img: e.isActive("image") ? e.getAttributes("image").wrap ?? "inline" : null,
+        line: block.attrs.line ?? null,
+        after: block.attrs.after ?? null,
+        undo: e.can().undo(),
+        redo: e.can().redo(),
+        empty,
+        toc: (() => {
+          let at = -1;
+          e.state.doc.forEach((node, pos) => {
+            if (at < 0 && node.type.name === "toc") at = pos;
+          });
+          return at;
+        })(),
+        find: (({ at, hits }) => `${at}/${hits.length}`)(searching.getState(e.state)),
+        suggest: !!suggesting.getState(e.state)?.on,
+        revs: docx ? changes(e.state.doc) : [],
+        dirty: !!baseline.current && !e.state.doc.eq(baseline.current.doc)
+      };
+    }
+  });
+  const page = layout ?? source.data?.page ?? a4;
+  const print = () => {
+    if (!editor) return;
+    const frame = document.createElement("iframe");
+    frame.style.cssText = "position:fixed;width:0;height:0;border:0;opacity:0";
+    document.body.append(frame);
+    const [mt, mr, mb, ml] = page.margins;
+    const size = docx ? `${page.width}px ${page.height}px` : "A4";
+    frame.contentDocument.open();
+    frame.contentDocument.write(`<!DOCTYPE html><html><head><meta charset="utf-8"><title>${editor.state.doc.firstChild?.textContent.slice(0, 80).replace(/[<&]/g, "") ?? ""}</title><style>
+@page { size: ${size}; margin: ${docx ? `${mt}px ${mr}px ${mb}px ${ml}px` : "20mm"}; }
+body { margin: 0; font: 11pt/1.5 Arial, sans-serif; color: #111; }
+h1 { font-size: 20pt; } h2 { font-size: 15pt; } h3 { font-size: 13pt; }
+table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #94a3b8; padding: 4px 6px; vertical-align: top; } table[data-borders='none'] td, table[data-borders='none'] th { border-color: transparent; }
+img { max-width: 100%; } img[data-wrap='left'] { float: left; margin: 0 12pt 6pt 0; } img[data-wrap='right'] { float: right; margin: 0 0 6pt 12pt; }
+[data-type='page-break'], .page-break { break-after: page; height: 0; overflow: hidden; }
+</style></head><body>${editor.getHTML()}</body></html>`);
+    frame.contentDocument.close();
+    frame.contentWindow.focus();
+    frame.contentWindow.print();
+    setTimeout(() => frame.remove(), 1e3);
+  };
+  const marginal = marg ?? (source.data && "marginal" in source.data ? source.data.marginal : null) ?? { header: "", footer: "", numbers: false };
+  useEffect(() => {
+    if (editor && docx && source.data) editor.view.dispatch(editor.state.tr.setMeta(paging, { page, marks: { header: marginal.header, footer: marginal.footer } }));
+  }, [editor, source.data, page, marginal.header, marginal.footer]);
+  useEffect(() => {
+    if (!shared || !docx) return;
+    const map = shared.doc.getMap("setup");
+    const sync = () => {
+      const v = map.toJSON();
+      if (v.page) setLayout(v.page);
+      if (v.header !== void 0 || v.footer !== void 0 || v.numbers !== void 0) setMarg({ header: v.header ?? "", footer: v.footer ?? "", numbers: !!v.numbers });
+    };
+    sync();
+    map.observe(sync);
+    return () => map.unobserve(sync);
+  }, [shared, docx]);
+  const loaded = useLoad((signal) => host?.comments ? host.comments(documentId, { signal }) : Promise.resolve([]), [host, documentId]);
+  const all = [...loaded.data ?? [], ...added].flatMap((c) => c.id in changed ? changed[c.id] ?? [] : [c]).filter((c) => !c.replyTo || changed[c.replyTo] !== null);
+  const open = all.filter((c) => !c.replyTo && !c.resolved);
+  const threads = all.filter((c) => !c.replyTo && (resolved || !c.resolved)).sort((a, b) => a.createdAt.localeCompare(b.createdAt));
+  const openIds = open.map((c) => c.id).join();
+  useEffect(() => {
+    if (!editor || !source.data) return;
+    const have = new Map(notes.getState(editor.state).spots.map((s) => [s.id, s]));
+    const fresh = open.filter((c) => !have.has(c.id));
+    const found2 = locate(editor.state.doc, fresh.map((c) => ({ id: c.id, quote: c.quote, anchor: anchors.current.get(c.id) })));
+    editor.view.dispatch(editor.state.tr.setMeta(notes, { spots: [...open.flatMap((c) => have.get(c.id) ?? []), ...found2] }));
+  }, [editor, source.data, openIds]);
+  useEffect(() => {
+    if (editor && source.data) editor.view.dispatch(editor.state.tr.setMeta(notes, { active }));
+  }, [editor, source.data, active]);
+  useEffect(() => {
+    if (!editor || !source.data) return;
+    let timer = 0;
+    let last2 = "";
+    const run = () => {
+      const list = [];
+      editor.state.doc.forEach((node, offset) => {
+        if (node.type.name !== "heading" || !node.textContent.trim()) return;
+        list.push({ id: `h${offset}`, level: Math.min(3, node.attrs.level), text: node.textContent.trim(), go: () => {
+          editor.view.nodeDOM(offset)?.scrollIntoView({ behavior: "smooth", block: "start" });
+          editor.commands.setTextSelection(offset + 1);
+        } });
+      });
+      const text = editor.state.doc.textBetween(0, editor.state.doc.content.size, " ", " ");
+      setCount({ words: (text.match(/[\p{L}\p{N}]+(?:['’-][\p{L}\p{N}]+)*/gu) ?? []).length, pages: scroller.current?.querySelectorAll(".w100n-text-gap").length ?? 0 });
+      const key = JSON.stringify(list.map((h) => [h.id, h.level, h.text]));
+      if (key === last2) return;
+      last2 = key;
+      onOutline(list);
+    };
+    const later = () => {
+      clearTimeout(timer);
+      timer = window.setTimeout(run, 300);
+    };
+    run();
+    editor.on("update", later);
+    return () => {
+      clearTimeout(timer);
+      editor.off("update", later);
+    };
+  }, [editor, source.data, onOutline]);
+  useEffect(() => {
+    const el = scroller.current;
+    if (!el || !editor || !onReading) return;
+    let frame = 0;
+    let last2 = "";
+    const look = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        const line = el.getBoundingClientRect().top + el.clientHeight / 3;
+        let id = null;
+        editor.state.doc.forEach((node, offset) => {
+          const dom = node.type.name === "heading" && node.textContent.trim() ? editor.view.nodeDOM(offset) : null;
+          if (dom && dom.getBoundingClientRect().top <= line) id = `h${offset}`;
+        });
+        const room2 = el.scrollHeight - el.clientHeight;
+        const progress = room2 > 0 ? Math.round(el.scrollTop / room2 * 100) / 100 : 1;
+        if (`${id}:${progress}` === last2) return;
+        last2 = `${id}:${progress}`;
+        onReading({ documentId, id, progress });
+      });
+    };
+    look();
+    el.addEventListener("scroll", look, { passive: true });
+    return () => {
+      cancelAnimationFrame(frame);
+      el.removeEventListener("scroll", look);
+    };
+  }, [editor, source.data, onReading, documentId]);
+  const dirty = live ? live.pending : !!state?.dirty || unsetup;
+  const unsent = live ? live.unsynced && can.edit : dirty;
+  useEffect(() => {
+    if (!guard || live || !dirty || !source.data || !editor) return;
+    guard.current = save;
+    return () => {
+      guard.current = null;
+    };
+  });
+  useEffect(() => {
+    if (live || !dirty || !can.edit || saving === "busy" || !editor) return;
+    const timer = window.setTimeout(() => void save(true), 3e3);
+    return () => clearTimeout(timer);
+  });
+  useEffect(() => {
+    if (!unsent) return;
+    const stop = (e) => e.preventDefault();
+    window.addEventListener("beforeunload", stop);
+    return () => window.removeEventListener("beforeunload", stop);
+  }, [unsent]);
+  useEffect(() => {
+    const el = scroller.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const watch = new ResizeObserver(() => setRoom(el.clientWidth));
+    watch.observe(el);
+    return () => watch.disconnect();
+  }, [editor, source.data]);
+  useEffect(() => {
+    const el = root.current;
+    if (!el) return;
+    const open2 = () => {
+      setPop("find");
+      el.querySelector(".w100n-text-find input")?.focus();
+    };
+    el.addEventListener("docs-find", open2);
+    return () => el.removeEventListener("docs-find", open2);
+  }, [editor, source.data]);
+  useEffect(() => {
+    const shown = pop === "find" ? query : "";
+    if (editor && searching.getState(editor.state).query !== shown) editor.view.dispatch(editor.state.tr.setMeta(searching, { query: shown }));
+  }, [editor, pop, query]);
+  useEffect(() => {
+    const press = (e) => {
+      if (!(e.metaKey || e.ctrlKey) || e.altKey || e.shiftKey || e.key.toLowerCase() !== "p") return;
+      e.preventDefault();
+      e.stopPropagation();
+      print();
+    };
+    window.addEventListener("keydown", press, true);
+    return () => window.removeEventListener("keydown", press, true);
+  });
+  useEffect(() => {
+    if (!pop) return;
+    const close = (e) => {
+      if (!e.target.closest(".w100n-text-pop, [data-pop]")) setPop(null);
+    };
+    document.addEventListener("pointerdown", close);
+    return () => document.removeEventListener("pointerdown", close);
+  }, [pop]);
+  if (source.error) return docx ? /* @__PURE__ */ jsx2("div", { className: "w100n-docs-scroll", children: /* @__PURE__ */ jsx2(DocxView, { bytes, onOutline, failed: t.failed }) }) : /* @__PURE__ */ jsx2("div", { className: "w100n-docs-empty", children: t.failed });
+  if (!source.data || !editor || !state || live && !live.ready && !live.late && !live.denied) return /* @__PURE__ */ jsx2("div", { className: "w100n-docs-empty", children: t.loading });
+  const save = async (auto = false) => {
+    if (live) {
+      if (!can.edit || !live.ready || !live.online || !live.pending || saving === "busy") return false;
+      setSaving("busy");
+      const ok = await live.save();
+      setSaving(ok ? "done" : "failed");
+      return ok;
+    }
+    const was = baseline.current;
+    const doc = editor.state.doc;
+    if (!can.edit || !was || saving === "busy" || doc.eq(was.doc) && !unsetup) return false;
+    setSaving("busy");
+    try {
+      const md = was.base && toMarkdown(doc, was.base);
+      const out = md ? new TextEncoder().encode(md.text).buffer : await writeDocx(was.bytes, editor.getJSON(), void 0, unsetup ? { page, ...marginal } : void 0);
+      await host.save(documentId, out, auto ? t.autosavedNote : t.editedNote, auto);
+      baseline.current = { bytes: md ? out : was.bytes, doc, base: md ? md.base : null };
+      if (!md && editor.state.doc === doc) {
+        const fresh = (await readDocx(out)).doc;
+        if (editor.state.doc === doc && renew(fresh)) baseline.current = { bytes: out, doc: editor.state.doc, base: null };
+      }
+      setUnsetup(false);
+      setSaving("done");
+      onSaved?.();
+      return true;
+    } catch {
+      setSaving("failed");
+      return false;
+    }
+  };
+  const renew = (fresh) => {
+    const at = [];
+    const refs = [];
+    editor.state.doc.descendants((node, pos) => {
+      if (node.isBlock) at.push(pos);
+    });
+    editor.schema.nodeFromJSON(fresh).descendants((node) => {
+      if (node.isBlock) refs.push(node.type.name, node.attrs.ref);
+    });
+    if (refs.length !== at.length * 2 || at.some((pos, i) => editor.state.doc.nodeAt(pos).type.name !== refs[i * 2])) return false;
+    const tr = editor.state.tr.setMeta("addToHistory", false);
+    at.forEach((pos, i) => {
+      if (tr.doc.nodeAt(pos).attrs.ref !== refs[i * 2 + 1]) tr.setNodeAttribute(pos, "ref", refs[i * 2 + 1]);
+    });
+    editor.view.dispatch(tr);
+    return true;
+  };
+  const linkUp = () => {
+    setHref(editor.getAttributes("link").href ?? "");
+    setPop("link");
+  };
+  const putLink = () => {
+    const value = href.trim();
+    const chain = editor.chain().focus();
+    if (!value) chain.extendMarkRange("link").unsetLink().run();
+    else if (editor.state.selection.empty && !editor.isActive("link")) chain.insertContent({ type: "text", text: value, marks: [{ type: "link", attrs: { href: value } }] }).run();
+    else chain.extendMarkRange("link").setLink({ href: value }).run();
+    setPop(null);
+  };
+  const begin = () => {
+    const { from, to, empty } = editor.state.selection;
+    if (empty || !can.comment) return;
+    editor.view.dispatch(editor.state.tr.setMeta(notes, { pending: { from, to } }));
+    setDraft({ quote: editor.state.doc.textBetween(from, to, "\n", " "), body: "" });
+    setPosting("idle");
+    onPanel?.("comments");
+  };
+  const drop = () => {
+    editor.view.dispatch(editor.state.tr.setMeta(notes, { pending: null }));
+    setDraft(null);
+  };
+  const post = async () => {
+    if (!draft?.body.trim() || !host?.comment || posting === "busy") return;
+    setPosting("busy");
+    try {
+      const anchor = uid();
+      const made = await host.comment(documentId, { body: draft.body.trim(), quote: draft.quote, replyTo: null, anchor });
+      anchors.current.set(made.id, anchor);
+      const range = notes.getState(editor.state).pending;
+      editor.view.dispatch(editor.state.tr.setMeta(notes, { pending: null, spots: [...notes.getState(editor.state).spots, ...range ? [{ id: made.id, ...range }] : []] }));
+      setAdded((list) => [...list, made]);
+      setDraft(null);
+      setActive(made.id);
+      setPosting("idle");
+    } catch {
+      setPosting("failed");
+    }
+  };
+  const answer = async (parent) => {
+    if (!reply?.body.trim() || !host?.comment || posting === "busy") return;
+    setPosting("busy");
+    try {
+      const made = await host.comment(documentId, { body: reply.body.trim(), quote: parent.quote, replyTo: parent.id, anchor: anchors.current.get(parent.id) ?? "" });
+      setAdded((list) => [...list, made]);
+      setReply(null);
+      setPosting("idle");
+    } catch {
+      setPosting("failed");
+    }
+  };
+  const settle = async (c) => {
+    try {
+      await host.resolveComment(documentId, c.id, !c.resolved);
+      setChanged((list) => ({ ...list, [c.id]: { ...c, resolved: !c.resolved } }));
+    } catch {
+      setPosting("failed");
+    }
+  };
+  const change = async (id, body) => {
+    if (posting === "busy") return;
+    setPosting("busy");
+    setFailed(false);
+    try {
+      let made = null;
+      if (body === null) await host.deleteComment(documentId, id);
+      else made = await host.editComment(documentId, id, body);
+      setChanged((list) => ({ ...list, [id]: made }));
+      setEditing(null);
+      setDropping(null);
+      if (body === null && active === id) setActive(null);
+    } catch {
+      setFailed(true);
+    }
+    setPosting("idle");
+  };
+  const mine = (c) => c.author.id === host?.me.id;
+  const drops = (c) => mine(c) || c.author.id.startsWith("guest:") && !!rights?.edit;
+  const show = (c) => {
+    setActive(c.id);
+    const spot = notes.getState(editor.state).spots.find((s) => s.id === c.id);
+    if (!spot) return;
+    const at = editor.view.domAtPos(spot.from).node;
+    (at instanceof HTMLElement ? at : at.parentElement)?.scrollIntoView({ behavior: "smooth", block: "center" });
+  };
+  const suggested = [...state.revs.reduce((all2, c) => {
+    const key = `${c.kind}:${c.id}`;
+    const was = all2.get(key);
+    all2.set(key, was ? { ...was, text: `${was.text} ${c.text}` } : c);
+    return all2;
+  }, /* @__PURE__ */ new Map()).values()];
+  const jump = (at) => {
+    const dom = editor.view.domAtPos(at).node;
+    (dom instanceof HTMLElement ? dom : dom.parentElement)?.scrollIntoView({ behavior: "smooth", block: "center" });
+  };
+  const percent = zoom ?? (docx && room ? Math.max(10, Math.min(100, Math.floor((room - 24) / page.width * 100))) : 100);
+  const zoomBy = (d) => setZoom(Math.min(200, Math.max(30, percent + d)));
+  const keys = (e) => {
+    if (e.defaultPrevented) return;
+    const key = e.key.toLowerCase();
+    const mod2 = e.metaKey || e.ctrlKey;
+    if (key === "escape" && (pop || draft || paint)) {
+      e.stopPropagation();
+      if (paint) setPaint(null);
+      else if (pop) setPop(null);
+      else drop();
+      return;
+    }
+    if (!mod2) return;
+    const act = (run) => {
+      e.preventDefault();
+      run();
+    };
+    if (key === "s" && can.edit) act(() => void save());
+    else if (key === "k" && can.edit) act(linkUp);
+    else if (key === "f" && !e.altKey) act(() => setPop("find"));
+    else if (key === "m" && e.altKey && can.comment) act(begin);
+    else if (!can.edit || e.altKey) return;
+    else if (key === "]" || key === "[") act(() => indent(editor, key === "]" ? 1 : -1));
+    else if (key === "\\") act(() => clear(editor));
+    else if (key === "enter" && docx) act(() => editor.chain().focus().insertContent({ type: "pageBreak" }).run());
+    else if (e.shiftKey && docx && ["l", "e", "r", "j"].includes(key)) act(() => align(editor, { l: "left", e: "center", r: "right", j: "justify" }[key]));
+  };
+  const tool = (icon, label, run, pressed, disabled) => {
+    const Icon = icon;
+    return /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": label, title: label, "aria-pressed": pressed, disabled, onClick: () => {
+      run();
+    }, children: /* @__PURE__ */ jsx2(Icon, { "aria-hidden": true }) });
+  };
+  const gap = /* @__PURE__ */ jsx2("span", { className: "w100n-pdf-gap" });
+  const known = source.data.styles;
+  const named = (test) => {
+    const name = known.find(test)?.name;
+    return name && `${name[0].toUpperCase()}${name.slice(1)}`;
+  };
+  const levels = docx ? [1, 2, 3, 4, 5, 6].filter((level) => level <= 4 || named((s) => s.heading === level)) : [1, 2, 3, 4];
+  const styles = [
+    ["normal", t.normal, () => editor.chain().focus().clearNodes().setParagraph().run()],
+    ...levels.map((level) => [
+      `h${level}`,
+      named((s) => s.heading === level && !/^title$/i.test(s.name)) || `${t.heading} ${level}`,
+      () => editor.chain().focus().setHeading({ level }).run()
+    ]),
+    ["quote", named((s) => /quote/i.test(s.name)) || t.quote, () => editor.chain().focus().clearNodes().setParagraph().setBlockquote().run()],
+    ["code", t.code, () => editor.chain().focus().setCodeBlock().run()]
+  ];
+  const margins = [[t.marginsNormal, [96, 96, 96, 96]], [t.marginsNarrow, [48, 48, 48, 48]], [t.marginsWide, [96, 192, 96, 192]]];
+  const when = (iso) => new Intl.DateTimeFormat(language, { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" }).format(new Date(iso));
+  const person = (c) => /* @__PURE__ */ jsxs2("header", { children: [
+    c.author.avatarUrl ? /* @__PURE__ */ jsx2("img", { className: "w100n-text-face", src: c.author.avatarUrl, alt: "" }) : /* @__PURE__ */ jsx2("span", { className: "w100n-text-face", "aria-hidden": true, children: c.author.name.slice(0, 1).toUpperCase() }),
+    /* @__PURE__ */ jsxs2("span", { className: "w100n-text-who", children: [
+      /* @__PURE__ */ jsxs2("b", { children: [
+        c.author.name,
+        c.author.id.startsWith("guest:") && /* @__PURE__ */ jsx2("span", { className: "w100n-docs-badge", children: t.guest })
+      ] }),
+      /* @__PURE__ */ jsx2("small", { children: when(c.createdAt) })
+    ] }),
+    drops(c) && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-own", onClick: (e) => e.stopPropagation(), children: [
+      mine(c) && host.editComment && /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": t.editComment, title: t.editComment, onClick: () => {
+        setDropping(null);
+        setEditing({ id: c.id, body: c.body });
+      }, children: /* @__PURE__ */ jsx2(Pencil, { "aria-hidden": true }) }),
+      host.deleteComment && /* @__PURE__ */ jsx2("button", { type: "button", "data-tone": "red", "aria-label": t.delete, title: t.delete, onClick: () => {
+        setEditing(null);
+        setDropping(c.id);
+      }, children: /* @__PURE__ */ jsx2(Trash2, { "aria-hidden": true }) })
+    ] })
+  ] });
+  const words = (c) => editing?.id === c.id ? /* @__PURE__ */ jsxs2("div", { className: "w100n-text-reply w100n-text-edit", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx2(
+      "textarea",
+      {
+        autoFocus: true,
+        value: editing.body,
+        "aria-label": t.editComment,
+        onChange: (e) => setEditing({ ...editing, body: e.target.value }),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && editing.body.trim()) void change(c.id, editing.body.trim());
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs2("span", { className: "w100n-pdf-dialog-end", children: [
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-pdf-link", onClick: () => setEditing(null), children: t.cancel }),
+      /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", disabled: !editing.body.trim() || editing.body.trim() === c.body || posting === "busy", onClick: () => void change(c.id, editing.body.trim()), children: [
+        /* @__PURE__ */ jsx2(Save, { "aria-hidden": true }),
+        t.save
+      ] })
+    ] })
+  ] }) : dropping === c.id ? /* @__PURE__ */ jsxs2("div", { className: "w100n-text-confirm", role: "group", "aria-label": t.delete, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx2("p", { children: c.replyTo || !all.some((r) => r.replyTo === c.id) ? t.deleteAsk : t.deleteThread }),
+    /* @__PURE__ */ jsxs2("span", { className: "w100n-pdf-dialog-end", children: [
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-pdf-link", autoFocus: true, onClick: () => setDropping(null), children: t.cancel }),
+      /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", "data-tone": "red", disabled: posting === "busy", onClick: () => void change(c.id, null), children: [
+        /* @__PURE__ */ jsx2(Trash2, { "aria-hidden": true }),
+        t.delete
+      ] })
+    ] })
+  ] }) : /* @__PURE__ */ jsx2("p", { children: c.body });
+  const pick = (next) => setPop(pop === next ? null : next);
+  const swatches = (list, current, set, none) => /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-swatches", role: "group", children: [
+    /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-text-none", onClick: () => {
+      set(null);
+      setPop(null);
+    }, children: none }),
+    list.map((c, i) => /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": c, "aria-pressed": current === c, onClick: () => {
+      set(c);
+      setPop(null);
+    }, children: /* @__PURE__ */ jsx2("i", { style: { background: c } }) }, i))
+  ] });
+  const mod = /Mac|iPhone|iPad/.test(navigator.platform) ? "\u2318" : "Ctrl+";
+  const item = (label, run, more2 = {}) => ({ label, run, ...more2 });
+  const insertToc = () => {
+    const at = editor.state.selection.$from.before(1);
+    editor.chain().focus().insertContentAt(at, { type: "toc", attrs: { entries: JSON.stringify(entries(editor.state.doc, !docx, at - 1)) } }).run();
+  };
+  const suggest = () => editor.view.dispatch(editor.state.tr.setMeta(suggesting, { on: !state.suggest, me: host?.me.name ?? "" }));
+  const aligns = [[AlignLeft, t.alignLeft, "left"], [AlignCenter, t.alignCenter, "center"], [AlignRight, t.alignRight, "right"], [AlignJustify, t.justify, "justify"]];
+  const lines = [[1, t.single], [1.15, "1.15"], [1.5, "1.5"], [2, t.double]];
+  const menus = [
+    ["file", t.menuFile, [
+      ...can.edit ? [
+        item(t.save, () => void save(), { keys: `${mod}S`, off: !dirty }),
+        item(t.print, print, { keys: `${mod}P` }),
+        ...docx ? ["-", item(t.pageSetup, () => setDraft2({ width: page.width, height: page.height, margins: page.margins.map(cm), ...marginal }))] : []
+      ] : [],
+      ...can.edit && (file?.formats.length || file?.copy || file?.rename) ? ["-"] : [],
+      ...(file?.formats ?? []).map((f) => item(`${t.downloadAs} ${f === "md" ? "Markdown" : f.toUpperCase()}`, () => file.download(f))),
+      !!file?.copy && item(t.makeCopy, file.copy),
+      !!file?.rename && item(t.rename, file.rename)
+    ]],
+    ["edit", t.menuEdit, can.edit ? [
+      item(t.undo, () => editor.chain().focus().undo().run(), { keys: `${mod}Z`, off: !state.undo }),
+      item(t.redo, () => editor.chain().focus().redo().run(), { keys: `${mod}\u21E7Z`, off: !state.redo }),
+      "-",
+      item(t.findReplace, () => setPop("find"), { keys: `${mod}F` }),
+      "-",
+      item(t.clearFormat, () => clear(editor), { keys: `${mod}\\` })
+    ] : []],
+    ["view", t.viewTab, [
+      item(t.zoomIn, () => zoomBy(10)),
+      item(t.zoomOut, () => zoomBy(-10)),
+      docx && item(t.fitWidth, () => setZoom(null), { on: zoom === null }),
+      item(t.fit, () => setZoom(100)),
+      "-",
+      item(t.outline, () => onPanel?.("outline")),
+      "-",
+      item([docx && count.pages ? `${t.pages}: ${count.pages}` : "", `${t.words}: ${count.words.toLocaleString(language)}`].filter(Boolean).join(" \xB7 "), () => {
+      }, { off: true })
+    ]],
+    ["insert", t.insert, can.edit ? [
+      item(t.table, () => setPop("table")),
+      item(t.image, () => {
+        setHref("");
+        setPop("image");
+      }),
+      item(t.link, linkUp, { keys: `${mod}K` }),
+      docx && item(t.pageBreak, () => editor.chain().focus().insertContent({ type: "pageBreak" }).run(), { keys: `${mod}\u21B5` }),
+      item(t.rule, () => editor.chain().focus().setHorizontalRule().run()),
+      "-",
+      state.toc < 0 ? item(t.tocInsert, insertToc) : item(t.tocRemove, () => editor.chain().focus().deleteRange({ from: state.toc, to: state.toc + editor.state.doc.nodeAt(state.toc).nodeSize }).run()),
+      can.comment && item(t.addComment, begin, { off: state.empty, keys: `${mod}\u2325M` }),
+      "-",
+      item(t.symbols, () => setDialog({ kind: "symbol", query: "" })),
+      docx && item(t.formula, () => setDialog({ kind: "formula", latex: "", at: null })),
+      docx && item(t.footnote, () => setDialog({ kind: "note", text: "", at: null }))
+    ] : []],
+    ["format", t.menuFormat, can.edit ? [
+      ...styles.map(([key, label, run]) => item(label, run, { on: state.style === key })),
+      "-",
+      item(t.bold, () => editor.chain().focus().toggleBold().run(), { on: state.bold, keys: `${mod}B` }),
+      item(t.italic, () => editor.chain().focus().toggleItalic().run(), { on: state.italic, keys: `${mod}I` }),
+      docx && item(t.underline, () => editor.chain().focus().toggleUnderline().run(), { on: state.underline, keys: `${mod}U` }),
+      item(t.strike, () => editor.chain().focus().toggleStrike().run(), { on: state.strike }),
+      docx && item(t.superscript, () => editor.chain().focus().toggleMark("superscript").run(), { on: state.sup, keys: `${mod}.` }),
+      docx && item(t.subscript, () => editor.chain().focus().toggleMark("subscript").run(), { on: state.sub, keys: `${mod},` }),
+      ...docx ? [
+        "-",
+        ...aligns.map(([, label, value]) => item(label, () => align(editor, value), { on: state.align === value })),
+        "-",
+        ...lines.map(([v, label]) => item(`${t.lineSpacing}: ${label}`, () => spacing(editor, { line: v }), { on: state.line === v }))
+      ] : [],
+      "-",
+      item(t.bullets, () => editor.chain().focus().toggleBulletList().run(), { on: state.bullets }),
+      item(t.numbers, () => editor.chain().focus().toggleOrderedList().run(), { on: state.numbers }),
+      item(t.tasks, () => editor.chain().focus().toggleTaskList().run(), { on: state.tasks }),
+      "-",
+      item(t.outdent, () => indent(editor, -1), { keys: `${mod}[` }),
+      item(t.indent, () => indent(editor, 1), { keys: `${mod}]` })
+    ] : []],
+    ["tools", t.menuTools, [
+      docx && can.edit && item(t.suggest, suggest, { on: state.suggest }),
+      docx && can.edit && state.revs.length > 0 && item(t.acceptAll, () => decide(editor, true)),
+      docx && can.edit && state.revs.length > 0 && item(t.rejectAll, () => decide(editor, false)),
+      !!host?.comments && (can.comment || open.length > 0) && item(t.comments, () => onPanel?.("comments"))
+    ]]
+  ];
+  const menu = ([key, label, list]) => /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+    /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-text-menu-button", "data-pop": true, "aria-haspopup": "menu", "aria-expanded": pop === key, onClick: () => pick(key), children: label }),
+    pop === key && /* @__PURE__ */ jsx2("span", { className: "w100n-text-pop w100n-text-menu", role: "menu", "aria-label": label, children: list.filter((x) => x !== false).map((x, i) => x === "-" ? /* @__PURE__ */ jsx2("hr", {}, i) : /* @__PURE__ */ jsxs2("button", { type: "button", role: x.on === void 0 ? "menuitem" : "menuitemcheckbox", "aria-checked": x.on, disabled: x.off, onClick: () => {
+      setPop(null);
+      x.run();
+    }, children: [
+      /* @__PURE__ */ jsx2(Check, { "aria-hidden": true }),
+      /* @__PURE__ */ jsx2("span", { children: x.label }),
+      x.keys && /* @__PURE__ */ jsx2("kbd", { children: x.keys })
+    ] }, i)) })
+  ] }, key);
+  const seek = (next) => {
+    editor.view.dispatch(editor.state.tr.setMeta(searching, next));
+    const found2 = searching.getState(editor.state);
+    const hit = found2.hits[found2.at];
+    if (hit && next.at !== void 0) {
+      editor.commands.setTextSelection(hit);
+      editor.view.dom.querySelector(".w100n-found.is-current")?.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  };
+  const found = searching.getState(editor.state);
+  const finder = /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+    /* @__PURE__ */ jsx2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "find", "aria-label": t.findReplace, title: t.findReplace, onClick: () => pick("find"), children: /* @__PURE__ */ jsx2(Search, { "aria-hidden": true }) }),
+    pop === "find" && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-find", role: "search", "aria-label": t.findReplace, children: [
+      /* @__PURE__ */ jsxs2("span", { className: "w100n-docs-row", children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            autoFocus: true,
+            value: query,
+            placeholder: t.find,
+            "aria-label": t.find,
+            onFocus: (e) => e.currentTarget.select(),
+            onChange: (e) => {
+              setQuery(e.target.value);
+              seek({ query: e.target.value, at: 0 });
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                seek({ at: (found?.at ?? 0) + (e.shiftKey ? -1 : 1) });
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2("small", { "aria-live": "polite", children: query ? found?.hits.length ? `${(found.at ?? 0) + 1} / ${found.hits.length}` : t.noHits : "" }),
+        /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": t.previous, title: t.previous, disabled: !found?.hits.length, onClick: () => seek({ at: found.at - 1 }), children: /* @__PURE__ */ jsx2(ChevronUp, { "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": t.next, title: t.next, disabled: !found?.hits.length, onClick: () => seek({ at: found.at + 1 }), children: /* @__PURE__ */ jsx2(ChevronDown, { "aria-hidden": true }) })
+      ] }),
+      can.edit && /* @__PURE__ */ jsxs2("span", { className: "w100n-docs-row", children: [
+        /* @__PURE__ */ jsx2("input", { value: swap, placeholder: t.replaceWith, "aria-label": t.replaceWith, onChange: (e) => setSwap(e.target.value) }),
+        /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-pdf-link", disabled: !found?.hits.length, onClick: () => {
+          replace(editor, swap, false);
+          seek({});
+        }, children: t.replaceOne }),
+        /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-docs-action", disabled: !found?.hits.length, onClick: () => {
+          replace(editor, swap, true);
+          seek({});
+        }, children: t.replaceAll })
+      ] }),
+      /* @__PURE__ */ jsxs2("label", { className: "w100n-setup-check", children: [
+        /* @__PURE__ */ jsx2("input", { type: "checkbox", checked: matchCase, onChange: (e) => {
+          setMatchCase(e.target.checked);
+          seek({ matchCase: e.target.checked, at: 0 });
+        } }),
+        t.matchCase
+      ] })
+    ] })
+  ] });
+  const formats = ["bold", "italic", "underline", "strike", "code", "highlight", "textStyle", "superscript", "subscript"];
+  const take = (keep2) => {
+    if (paint && !keep2) return setPaint(null);
+    const { $from } = editor.state.selection;
+    const marks = (editor.state.storedMarks ?? $from.marks()).filter((m) => formats.includes(m.type.name)).map((m) => ({ type: m.type.name, attrs: m.attrs }));
+    setPaint({ marks, block: { align: $from.parent.attrs.align, line: $from.parent.attrs.line, after: $from.parent.attrs.after }, keep: keep2 });
+  };
+  const lay = () => {
+    if (!paint || editor.state.selection.empty) return;
+    const chain = editor.chain().focus();
+    for (const name of formats) chain.unsetMark(name);
+    for (const m of paint.marks) chain.setMark(m.type, m.attrs);
+    chain.run();
+    align(editor, paint.block.align);
+    spacing(editor, { line: paint.block.line, after: paint.block.after });
+    if (!paint.keep) setPaint(null);
+  };
+  const fontPicker = /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+    /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-text-picker", "data-size": "mid", "data-pop": true, "aria-haspopup": "listbox", "aria-expanded": pop === "font", "aria-label": t.font, title: t.font, onClick: () => pick("font"), children: [
+      /* @__PURE__ */ jsx2("span", { style: { fontFamily: state.font ?? void 0 }, children: state.font ?? t.defaultFont }),
+      /* @__PURE__ */ jsx2(ChevronDown, { "aria-hidden": true })
+    ] }),
+    pop === "font" && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-styles", role: "listbox", "aria-label": t.font, children: [
+      /* @__PURE__ */ jsx2("button", { type: "button", role: "option", "aria-selected": !state.font, onClick: () => {
+        editor.chain().focus().unsetFontFamily().run();
+        setPop(null);
+      }, children: t.defaultFont }),
+      faces.map((f) => /* @__PURE__ */ jsx2("button", { type: "button", role: "option", "aria-selected": state.font === f, style: { fontFamily: f }, onClick: () => {
+        editor.chain().focus().setFontFamily(f).run();
+        setPop(null);
+      }, children: f }, f))
+    ] })
+  ] });
+  const sizePicker = /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+    /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-text-picker", "data-size": "small", "data-pop": true, "aria-haspopup": "listbox", "aria-expanded": pop === "size", "aria-label": t.fontSize, title: t.fontSize, onClick: () => pick("size"), children: [
+      state.size ? parseFloat(state.size) : t.defaultFont,
+      /* @__PURE__ */ jsx2(ChevronDown, { "aria-hidden": true })
+    ] }),
+    pop === "size" && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-styles", role: "listbox", "aria-label": t.fontSize, children: [
+      /* @__PURE__ */ jsx2("button", { type: "button", role: "option", "aria-selected": !state.size, onClick: () => {
+        editor.chain().focus().unsetFontSize().run();
+        setPop(null);
+      }, children: t.defaultFont }),
+      sizes.map((n) => /* @__PURE__ */ jsx2("button", { type: "button", role: "option", "aria-selected": state.size !== null && parseFloat(state.size) === n, onClick: () => {
+        editor.chain().focus().setFontSize(`${n}pt`).run();
+        setPop(null);
+      }, children: n }, n))
+    ] })
+  ] });
+  const spacer = /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+    /* @__PURE__ */ jsx2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "spacing", "aria-label": t.lineSpacing, title: t.lineSpacing, onClick: () => pick("spacing"), children: /* @__PURE__ */ jsx2(UnfoldVertical, { "aria-hidden": true }) }),
+    pop === "spacing" && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-styles", role: "listbox", "aria-label": t.lineSpacing, children: [
+      lines.map(([v, label]) => /* @__PURE__ */ jsx2("button", { type: "button", role: "option", "aria-selected": state.line === v, onClick: () => {
+        spacing(editor, { line: v });
+        setPop(null);
+      }, children: label }, v)),
+      /* @__PURE__ */ jsx2("hr", {}),
+      /* @__PURE__ */ jsx2("button", { type: "button", role: "option", "aria-selected": false, onClick: () => {
+        spacing(editor, { after: state.after === 0 ? 8 : 0 });
+        setPop(null);
+      }, children: state.after === 0 ? t.spaceAfter : t.noSpaceAfter })
+    ] })
+  ] });
+  const applySetup = () => {
+    const d = draft2;
+    const next = { width: d.width, height: d.height, margins: d.margins.map((v) => Math.round(v / 2.54 * 96 * 100) / 100) };
+    const marks = { header: d.header.trim(), footer: d.footer.trim(), numbers: d.numbers };
+    if (shared) shared.doc.transact(() => {
+      const map = shared.doc.getMap("setup");
+      map.set("page", next);
+      for (const [key, v] of Object.entries(marks)) map.set(key, v);
+    });
+    else {
+      setLayout(next);
+      setMarg(marks);
+      setUnsetup(true);
+    }
+    setDraft2(null);
+  };
+  const zooms = [50, 75, 90, 100, 125, 150, 200];
+  const zoomer = /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+    /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-text-picker", "data-size": "small", "data-pop": true, "aria-haspopup": "listbox", "aria-expanded": pop === "zoom", "aria-label": t.zoom, title: t.zoom, onClick: () => pick("zoom"), children: [
+      percent,
+      "%",
+      /* @__PURE__ */ jsx2(ChevronDown, { "aria-hidden": true })
+    ] }),
+    pop === "zoom" && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-styles", role: "listbox", "aria-label": t.zoom, children: [
+      docx && /* @__PURE__ */ jsx2("button", { type: "button", role: "option", "aria-selected": zoom === null, onClick: () => {
+        setZoom(null);
+        setPop(null);
+      }, children: t.fitWidth }),
+      zooms.map((z) => /* @__PURE__ */ jsxs2("button", { type: "button", role: "option", "aria-selected": zoom === z, onClick: () => {
+        setZoom(z);
+        setPop(null);
+      }, children: [
+        z,
+        "%"
+      ] }, z))
+    ] })
+  ] });
+  const Aligned = aligns.find(([, , value]) => value === state.align)?.[0] ?? AlignLeft;
+  const aligner = /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+    /* @__PURE__ */ jsx2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "align", "aria-label": t.align, title: t.align, onClick: () => pick("align"), children: /* @__PURE__ */ jsx2(Aligned, { "aria-hidden": true }) }),
+    pop === "align" && /* @__PURE__ */ jsx2("span", { className: "w100n-text-pop", role: "group", "aria-label": t.align, children: /* @__PURE__ */ jsx2("span", { className: "w100n-text-tools", children: aligns.map(([icon, label, value], i) => /* @__PURE__ */ jsx2(Fragment2, { children: tool(icon, label, () => {
+      align(editor, value);
+      setPop(null);
+    }, state.align === value) }, i)) }) })
+  ] });
+  const widen = () => {
+    localStorage.setItem("w100n-docs-more", more ? "" : "1");
+    setMore(!more);
+  };
+  const main = can.edit ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+    /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+      /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-text-picker", "data-size": "mid", "data-pop": true, "aria-haspopup": "listbox", "aria-expanded": pop === "style", "aria-label": t.paragraphStyle, title: t.paragraphStyle, onClick: () => pick("style"), children: [
+        styles.find(([key]) => key === state.style)?.[1] ?? t.normal,
+        /* @__PURE__ */ jsx2(ChevronDown, { "aria-hidden": true })
+      ] }),
+      pop === "style" && /* @__PURE__ */ jsx2("span", { className: "w100n-text-pop w100n-text-styles", role: "listbox", "aria-label": t.paragraphStyle, children: styles.map(([key, label, run]) => /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "data-style": key,
+          "aria-selected": state.style === key,
+          onClick: () => {
+            run();
+            setPop(null);
+          },
+          children: label
+        },
+        key
+      )) })
+    ] }),
+    gap,
+    tool(Bold, t.bold, () => editor.chain().focus().toggleBold().run(), state.bold),
+    tool(Italic, t.italic, () => editor.chain().focus().toggleItalic().run(), state.italic),
+    docx ? tool(Underline, t.underline, () => editor.chain().focus().toggleUnderline().run(), state.underline) : tool(Strikethrough, t.strike, () => editor.chain().focus().toggleStrike().run(), state.strike),
+    !docx && tool(Code, t.code, () => editor.chain().focus().toggleCode().run(), state.code),
+    docx && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+      /* @__PURE__ */ jsxs2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "color", "aria-label": t.textColour, title: t.textColour, onClick: () => pick("color"), children: [
+        /* @__PURE__ */ jsx2(Baseline, { "aria-hidden": true }),
+        /* @__PURE__ */ jsx2("i", { className: "w100n-text-bar", style: { background: state.color ?? "currentColor" } })
+      ] }),
+      pop === "color" && swatches(inks, state.color, (c) => c ? editor.chain().focus().setColor(c).run() : editor.chain().focus().unsetColor().run(), t.automatic)
+    ] }),
+    gap,
+    docx && aligner,
+    tool(List, t.bullets, () => editor.chain().focus().toggleBulletList().run(), state.bullets),
+    tool(ListOrdered, t.numbers, () => editor.chain().focus().toggleOrderedList().run(), state.numbers),
+    !docx && tool(ListChecks, t.tasks, () => editor.chain().focus().toggleTaskList().run(), state.tasks),
+    gap,
+    /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+      /* @__PURE__ */ jsx2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "link", "aria-pressed": state.link, "aria-label": t.link, title: t.link, onClick: () => pop === "link" ? setPop(null) : linkUp(), children: /* @__PURE__ */ jsx2(Link, { "aria-hidden": true }) }),
+      pop === "link" && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-form", children: [
+        /* @__PURE__ */ jsx2("input", { autoFocus: true, value: href, placeholder: t.linkAddress, "aria-label": t.linkAddress, onChange: (e) => setHref(e.target.value), onKeyDown: (e) => {
+          if (e.key === "Enter") putLink();
+        } }),
+        /* @__PURE__ */ jsxs2("span", { className: "w100n-docs-row", children: [
+          state.link && /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-pdf-link", onClick: () => {
+            editor.chain().focus().extendMarkRange("link").unsetLink().run();
+            setPop(null);
+          }, children: [
+            /* @__PURE__ */ jsx2(Link2Off, { "aria-hidden": true }),
+            t.unlink
+          ] }),
+          /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", disabled: !href.trim(), onClick: putLink, children: [
+            /* @__PURE__ */ jsx2(Link, { "aria-hidden": true }),
+            t.apply
+          ] })
+        ] })
+      ] })
+    ] }),
+    can.comment && tool(MessageSquarePlus, t.addComment, begin, void 0, state.empty),
+    /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+      /* @__PURE__ */ jsx2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "image", "aria-label": t.image, title: t.image, onClick: () => {
+        setHref("");
+        pick("image");
+      }, children: /* @__PURE__ */ jsx2(ImagePlus, { "aria-hidden": true }) }),
+      pop === "image" && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-form", children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            autoFocus: true,
+            value: href,
+            placeholder: t.imageLink,
+            "aria-label": t.imageLink,
+            onChange: (e) => setHref(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && href.trim()) {
+                editor.chain().focus().setImage({ src: href.trim() }).run();
+                setPop(null);
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs2("span", { className: "w100n-docs-row", children: [
+          docx && /* @__PURE__ */ jsxs2("label", { className: "w100n-pdf-link", children: [
+            t.chooseFile,
+            /* @__PURE__ */ jsx2("input", { type: "file", accept: "image/png,image/jpeg,image/gif", hidden: true, onChange: (e) => {
+              const file2 = e.target.files?.[0];
+              if (!file2) return;
+              const reader = new FileReader();
+              reader.onload = () => {
+                editor.chain().focus().setImage({ src: String(reader.result), alt: file2.name }).run();
+                setPop(null);
+              };
+              reader.readAsDataURL(file2);
+            } })
+          ] }),
+          /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", disabled: !href.trim(), onClick: () => {
+            editor.chain().focus().setImage({ src: href.trim() }).run();
+            setPop(null);
+          }, children: [
+            /* @__PURE__ */ jsx2(ImagePlus, { "aria-hidden": true }),
+            t.put
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+      /* @__PURE__ */ jsx2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "table", "aria-label": t.table, title: t.table, onClick: () => pick("table"), children: /* @__PURE__ */ jsx2(Table, { "aria-hidden": true }) }),
+      pop === "table" && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-grid", role: "group", "aria-label": t.table, onPointerLeave: () => setGrid({ rows: 0, cols: 0 }), children: [
+        /* @__PURE__ */ jsx2("span", { children: Array.from({ length: 48 }, (_, i) => {
+          const rows = Math.floor(i / 8) + 1;
+          const cols = i % 8 + 1;
+          return /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              "aria-label": `${rows} \xD7 ${cols}`,
+              "data-on": rows <= grid.rows && cols <= grid.cols,
+              onPointerEnter: () => setGrid({ rows, cols }),
+              onClick: () => {
+                editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
+                setPop(null);
+              }
+            },
+            i
+          );
+        }) }),
+        /* @__PURE__ */ jsx2("small", { children: grid.rows ? `${grid.rows} \xD7 ${grid.cols}` : t.table })
+      ] })
+    ] }),
+    gap,
+    /* @__PURE__ */ jsx2("button", { type: "button", "aria-expanded": more, "aria-label": more ? t.fewerTools : t.moreTools, title: more ? t.fewerTools : t.moreTools, onClick: widen, children: more ? /* @__PURE__ */ jsx2(ChevronDown, { "aria-hidden": true }) : /* @__PURE__ */ jsx2(ChevronUp, { "aria-hidden": true }) })
+  ] }) : /* @__PURE__ */ jsxs2(Fragment3, { children: [
+    /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-text-word", onClick: () => onPanel?.("outline"), children: [
+      /* @__PURE__ */ jsx2(ListTree, { "aria-hidden": true }),
+      t.outline
+    ] }),
+    can.comment && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+      /* @__PURE__ */ jsx2("span", { className: "w100n-text-grow" }),
+      /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", disabled: state.empty, onClick: begin, children: [
+        /* @__PURE__ */ jsx2(MessageSquarePlus, { "aria-hidden": true }),
+        t.addComment
+      ] })
+    ] }),
+    !!host?.comments && (can.comment || open.length > 0) && /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-text-word", onClick: () => onPanel?.("comments"), children: [
+      /* @__PURE__ */ jsx2(MessagesSquare, { "aria-hidden": true }),
+      t.comments,
+      /* @__PURE__ */ jsx2("b", { children: open.length })
+    ] })
+  ] });
+  const extra = can.edit && more && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+    docx && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+      fontPicker,
+      sizePicker,
+      gap
+    ] }),
+    docx && tool(Strikethrough, t.strike, () => editor.chain().focus().toggleStrike().run(), state.strike),
+    docx && tool(Superscript, t.superscript, () => editor.chain().focus().toggleMark("superscript").run(), state.sup),
+    docx && tool(Subscript, t.subscript, () => editor.chain().focus().toggleMark("subscript").run(), state.sub),
+    docx && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+      /* @__PURE__ */ jsx2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "mark", "aria-pressed": state.glow, "aria-label": t.highlight, title: t.highlight, onClick: () => pick("mark"), children: /* @__PURE__ */ jsx2(Highlighter, { "aria-hidden": true }) }),
+      pop === "mark" && swatches(glows, null, (c) => c ? editor.chain().focus().setHighlight({ color: c }).run() : editor.chain().focus().unsetHighlight().run(), t.noColour)
+    ] }),
+    docx && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+      gap,
+      spacer
+    ] }),
+    tool(ListIndentDecrease, t.outdent, () => indent(editor, -1)),
+    tool(ListIndentIncrease, t.indent, () => indent(editor, 1)),
+    docx && tool(ListChecks, t.tasks, () => editor.chain().focus().toggleTaskList().run(), state.tasks),
+    gap,
+    /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": t.painter, title: paint ? t.painterHint : t.painter, "aria-pressed": !!paint, onClick: () => take(false), onDoubleClick: () => take(true), children: /* @__PURE__ */ jsx2(PaintRoller, { "aria-hidden": true }) }),
+    tool(RemoveFormatting, t.clearFormat, () => clear(editor)),
+    docx && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+      gap,
+      tool(FilePenLine, t.suggest, suggest, state.suggest)
+    ] })
+  ] });
+  const context = can.edit && (state.table ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+    tool(BetweenHorizontalStart, t.rowAbove, () => editor.chain().focus().addRowBefore().run()),
+    tool(BetweenHorizontalEnd, t.rowBelow, () => editor.chain().focus().addRowAfter().run()),
+    tool(BetweenVerticalStart, t.columnLeft, () => editor.chain().focus().addColumnBefore().run()),
+    tool(BetweenVerticalEnd, t.columnRight, () => editor.chain().focus().addColumnAfter().run()),
+    tool(PanelTop, t.headerRow, () => editor.chain().focus().toggleHeaderRow().run()),
+    docx && tool(TableCellsMerge, t.mergeCells, () => editor.chain().focus().mergeOrSplit().run()),
+    docx && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+      /* @__PURE__ */ jsxs2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "fill", "aria-label": t.cellFill, title: t.cellFill, onClick: () => pick("fill"), children: [
+        /* @__PURE__ */ jsx2(PaintBucket, { "aria-hidden": true }),
+        /* @__PURE__ */ jsx2("i", { className: "w100n-text-bar", style: { background: state.fill ?? "transparent" } })
+      ] }),
+      pop === "fill" && swatches(glows, state.fill, (c) => editor.chain().focus().setCellAttribute("background", c).run(), t.noColour)
+    ] }),
+    docx && tool(Grid3x3, t.tableBorders, () => editor.chain().focus().updateAttributes("table", { borders: state.bare ? null : "none" }).run(), !state.bare),
+    tool(TableRowsSplit, t.deleteRow, () => editor.chain().focus().deleteRow().run()),
+    tool(TableColumnsSplit, t.deleteColumn, () => editor.chain().focus().deleteColumn().run()),
+    tool(Trash2, t.deleteTable, () => editor.chain().focus().deleteTable().run())
+  ] }) : state.img && /* @__PURE__ */ jsx2(Fragment3, { children: [[Image, t.wrapInline, "inline"], [PanelLeft, t.wrapLeft, "left"], [PanelRight, t.wrapRight, "right"]].map(([icon, label, value]) => /* @__PURE__ */ jsx2(Fragment2, { children: tool(icon, label, () => editor.chain().focus().updateAttributes("image", { wrap: value === "inline" ? null : value }).run(), state.img === value) }, value)) }));
+  const status = (can.edit || live) && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-end", children: [
+    live && (live.ready ? !live.online : live.late || live.denied) && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-live", title: live.denied ? void 0 : t.offlineHint, children: [
+      /* @__PURE__ */ jsx2(WifiOff, { "aria-hidden": true }),
+      live.denied ? t.liveOff : t.offline
+    ] }),
+    state.suggest && /* @__PURE__ */ jsx2("span", { className: "w100n-docs-badge", children: t.suggesting }),
+    can.edit && saving === "failed" && /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-text-saved", title: `${t.save} (${mod}S)`, onClick: () => void save(), children: [
+      /* @__PURE__ */ jsx2(CloudAlert, { "aria-hidden": true }),
+      /* @__PURE__ */ jsx2("span", { children: t.saveFailed })
+    ] }),
+    live && live.people.length > 0 && /* @__PURE__ */ jsx2("span", { className: "w100n-text-people", role: "group", "aria-label": t.people, children: live.people.map((p) => /* @__PURE__ */ jsx2("span", { className: "w100n-text-face", title: p.me ? `${p.name} (${t.you})` : p.name, style: { "--face": p.color }, children: p.avatarUrl ? /* @__PURE__ */ jsx2("img", { src: p.avatarUrl, alt: "" }) : p.name.split(/\s+/).map((w) => w[0]).join("").slice(0, 2).toUpperCase() }, p.id)) })
+  ] });
+  const menubar = /* @__PURE__ */ jsx2("span", { className: "w100n-text-menus", role: "menubar", "aria-label": t.textTools, children: menus.filter(([, , list]) => list.some((x) => x && x !== "-")).map(menu) });
+  const keep = (e) => {
+    if (e.target.closest("button")) e.preventDefault();
+  };
+  const sheet = docx ? { "--page-w": `${page.width}px`, "--page-h": `${page.height}px`, "--mt": `${page.margins[0]}px`, "--mr": `${page.margins[1]}px`, "--mb": `${page.margins[2]}px`, "--ml": `${page.margins[3]}px` } : void 0;
+  return /* @__PURE__ */ jsxs2("div", { ref: root, className: "w100n-text", "data-kind": kind, "data-docs-find": true, onKeyDown: keys, children: [
+    head ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+      head.menus && createPortal(/* @__PURE__ */ jsx2("div", { className: "w100n-text-ribbon w100n-text-docbar", onKeyDown: rove, onPointerDown: keep, children: menubar }), head.menus),
+      head.status && status && createPortal(/* @__PURE__ */ jsx2("div", { className: "w100n-text-ribbon w100n-text-docbar", onPointerDown: keep, children: status }), head.status)
+    ] }) : /* @__PURE__ */ jsxs2("div", { className: "w100n-text-ribbon w100n-text-top", onKeyDown: rove, onPointerDown: keep, children: [
+      menubar,
+      status
+    ] }),
+    /* @__PURE__ */ jsx2("div", { ref: scroller, className: "w100n-text-scroll", "data-paint": !!paint, onMouseUp: lay, onClick: (e) => {
+      const atom = can.edit ? e.target.closest(".w100n-math, sup[data-footnote]") : null;
+      if (atom) {
+        const at = editor.view.posAtDOM(atom, 0);
+        const node = editor.state.doc.nodeAt(at);
+        if (node?.type.name === "math") setDialog({ kind: "formula", latex: node.attrs.latex, at });
+        if (node?.type.name === "footnote") setDialog({ kind: "note", text: node.attrs.text, at });
+        return;
+      }
+      const id = e.target.closest("[data-note]")?.getAttribute("data-note");
+      if (!id) return;
+      setActive(id);
+      onPanel?.("comments");
+    }, children: /* @__PURE__ */ jsx2("div", { className: "w100n-text-zoomed", style: { zoom: percent / 100 }, children: /* @__PURE__ */ jsx2("div", { className: docx ? "w100n-text-sheet" : "w100n-docs-page w100n-text-column", style: sheet, children: /* @__PURE__ */ jsx2(EditorContent, { editor }) }) }) }),
+    /* @__PURE__ */ jsx2("div", { className: "w100n-text-ribbon w100n-text-corner", "data-side": "left", onPointerDown: keep, children: /* @__PURE__ */ jsxs2("div", { className: "w100n-text-tools", role: "group", "aria-label": t.zoom, children: [
+      tool(Minus, t.zoomOut, () => zoomBy(-10)),
+      zoomer,
+      tool(Plus, t.zoomIn, () => zoomBy(10))
+    ] }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "w100n-text-ribbon w100n-text-island", role: "toolbar", "aria-label": t.textTools, onKeyDown: rove, onPointerDown: keep, children: [
+      context && /* @__PURE__ */ jsx2("div", { className: "w100n-text-tools", role: "group", "aria-label": state.table ? t.table : t.image, children: context }),
+      extra && /* @__PURE__ */ jsx2("div", { className: "w100n-text-tools", role: "group", "aria-label": t.moreTools, children: extra }),
+      /* @__PURE__ */ jsx2("div", { className: "w100n-text-tools", role: "group", "aria-label": t.textTools, children: main })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "w100n-text-ribbon w100n-text-corner", "data-side": "right", onPointerDown: keep, children: /* @__PURE__ */ jsxs2("div", { className: "w100n-text-tools", role: "group", "aria-label": t.findReplace, children: [
+      can.edit && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+        tool(Undo2, t.undo, () => editor.chain().focus().undo().run(), void 0, !state.undo),
+        tool(Redo2, t.redo, () => editor.chain().focus().redo().run(), void 0, !state.redo),
+        gap
+      ] }),
+      finder
+    ] }) }),
+    dialog && /* @__PURE__ */ jsx2("div", { className: "w100n-pdf-back", onKeyDown: (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        setDialog(null);
+      }
+    }, children: dialog.kind === "symbol" ? /* @__PURE__ */ jsxs2("div", { className: "w100n-pdf-dialog w100n-insert", role: "dialog", "aria-modal": true, "aria-label": t.symbols, children: [
+      /* @__PURE__ */ jsxs2("div", { className: "w100n-new-head", children: [
+        /* @__PURE__ */ jsx2("span", { className: "w100n-new-tile", "data-tone": "pink", children: /* @__PURE__ */ jsx2(Omega, { "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx2("b", { className: "w100n-pdf-dialog-title", children: t.symbols }),
+        /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-docs-close", onClick: () => setDialog(null), "aria-label": t.close, title: t.close, children: /* @__PURE__ */ jsx2(X, { "aria-hidden": true }) })
+      ] }),
+      /* @__PURE__ */ jsxs2("label", { className: "w100n-docs-field w100n-docs-search", children: [
+        /* @__PURE__ */ jsx2(Search, { "aria-hidden": true }),
+        /* @__PURE__ */ jsx2("input", { autoFocus: true, value: dialog.query, placeholder: t.symbolSearch, "aria-label": t.symbolSearch, onChange: (e) => setDialog({ kind: "symbol", query: e.target.value }) })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: "w100n-insert-grid", role: "group", "aria-label": t.symbols, children: symbols.filter(([ch, name]) => !dialog.query.trim() || name.includes(dialog.query.trim().toLowerCase()) || ch === dialog.query.trim()).map(([ch, name]) => /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": name, title: name, onClick: () => {
+        editor.chain().focus().insertContent(ch).run();
+        setDialog(null);
+      }, children: ch }, ch)) })
+    ] }) : dialog.kind === "formula" ? /* @__PURE__ */ jsxs2("form", { className: "w100n-pdf-dialog w100n-insert", role: "dialog", "aria-modal": true, "aria-label": t.formula, onSubmit: (e) => {
+      e.preventDefault();
+      const latex = dialog.latex.trim();
+      if (!latex) return;
+      if (dialog.at !== null) editor.chain().focus().command(({ tr }) => {
+        tr.setNodeMarkup(dialog.at, void 0, { latex });
+        return true;
+      }).run();
+      else editor.chain().focus().insertContent({ type: "math", attrs: { latex } }).run();
+      setDialog(null);
+    }, children: [
+      /* @__PURE__ */ jsxs2("div", { className: "w100n-new-head", children: [
+        /* @__PURE__ */ jsx2("span", { className: "w100n-new-tile", "data-tone": "blue", children: /* @__PURE__ */ jsx2(Sigma, { "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx2("b", { className: "w100n-pdf-dialog-title", children: t.formula }),
+        /* @__PURE__ */ jsx2("span", { className: "w100n-docs-badge", children: t.formulaHint }),
+        /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-docs-close", onClick: () => setDialog(null), "aria-label": t.close, title: t.close, children: /* @__PURE__ */ jsx2(X, { "aria-hidden": true }) })
+      ] }),
+      /* @__PURE__ */ jsx2("input", { ref: field, autoFocus: true, className: "w100n-insert-latex", value: dialog.latex, "aria-label": t.formula, placeholder: "F = 900 + 12 \\\\cdot n", onChange: (e) => setDialog({ ...dialog, latex: e.target.value }) }),
+      /* @__PURE__ */ jsx2("div", { className: "w100n-insert-tools", role: "group", "aria-label": t.formula, children: helpers.map(([label, code]) => /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => {
+        const el = field.current;
+        const at = el.selectionStart ?? dialog.latex.length;
+        const latex = dialog.latex.slice(0, at) + code + dialog.latex.slice(el.selectionEnd ?? at);
+        setDialog({ ...dialog, latex });
+        const caret = at + (code.indexOf("{}") >= 0 ? code.indexOf("{}") + 1 : code.length);
+        requestAnimationFrame(() => {
+          el.focus();
+          el.setSelectionRange(caret, caret);
+        });
+      }, children: label }, label)) }),
+      /* @__PURE__ */ jsx2("div", { className: "w100n-insert-preview", "aria-live": "polite", dangerouslySetInnerHTML: { __html: dialog.latex.trim() ? mathml(dialog.latex) : "" } }),
+      /* @__PURE__ */ jsxs2("span", { className: "w100n-pdf-dialog-end", children: [
+        /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-pdf-link", onClick: () => setDialog(null), children: t.cancel }),
+        /* @__PURE__ */ jsxs2("button", { type: "submit", className: "w100n-docs-action", disabled: !dialog.latex.trim(), children: [
+          /* @__PURE__ */ jsx2(Check, { "aria-hidden": true }),
+          dialog.at !== null ? t.update : t.put
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs2("form", { className: "w100n-pdf-dialog w100n-insert", role: "dialog", "aria-modal": true, "aria-label": t.footnote, onSubmit: (e) => {
+      e.preventDefault();
+      const text = dialog.text.trim();
+      if (!text) return;
+      if (dialog.at !== null) editor.chain().focus().command(({ tr }) => {
+        tr.setNodeAttribute(dialog.at, "text", text);
+        return true;
+      }).run();
+      else editor.chain().focus().insertContent({ type: "footnote", attrs: { id: null, text } }).run();
+      setDialog(null);
+    }, children: [
+      /* @__PURE__ */ jsxs2("div", { className: "w100n-new-head", children: [
+        /* @__PURE__ */ jsx2("span", { className: "w100n-new-tile", "data-tone": "violet", children: /* @__PURE__ */ jsx2(Superscript, { "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx2("b", { className: "w100n-pdf-dialog-title", children: t.footnote }),
+        /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-docs-close", onClick: () => setDialog(null), "aria-label": t.close, title: t.close, children: /* @__PURE__ */ jsx2(X, { "aria-hidden": true }) })
+      ] }),
+      /* @__PURE__ */ jsx2(
+        "textarea",
+        {
+          autoFocus: true,
+          className: "w100n-insert-note",
+          value: dialog.text,
+          "aria-label": t.footnoteText,
+          placeholder: t.footnoteText,
+          onChange: (e) => setDialog({ ...dialog, text: e.target.value }),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) e.currentTarget.form?.requestSubmit();
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs2("span", { className: "w100n-pdf-dialog-end", children: [
+        dialog.at !== null && /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-pdf-link", onClick: () => {
+          editor.chain().focus().deleteRange({ from: dialog.at, to: dialog.at + 1 }).run();
+          setDialog(null);
+        }, children: t.removeFootnote }),
+        /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-pdf-link", onClick: () => setDialog(null), children: t.cancel }),
+        /* @__PURE__ */ jsxs2("button", { type: "submit", className: "w100n-docs-action", disabled: !dialog.text.trim(), children: [
+          /* @__PURE__ */ jsx2(Check, { "aria-hidden": true }),
+          dialog.at !== null ? t.update : t.put
+        ] })
+      ] })
+    ] }) }),
+    draft2 && /* @__PURE__ */ jsx2("div", { className: "w100n-pdf-back", onKeyDown: (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        setDraft2(null);
+      }
+    }, children: /* @__PURE__ */ jsxs2("form", { className: "w100n-pdf-dialog w100n-setup", role: "dialog", "aria-modal": true, "aria-label": t.pageSetup, onSubmit: (e) => {
+      e.preventDefault();
+      applySetup();
+    }, children: [
+      /* @__PURE__ */ jsxs2("div", { className: "w100n-new-head", children: [
+        /* @__PURE__ */ jsx2("span", { className: "w100n-new-tile", "data-tone": "blue", children: /* @__PURE__ */ jsx2(Ruler, { "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx2("b", { className: "w100n-pdf-dialog-title", children: t.pageSetup }),
+        /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-docs-close", onClick: () => setDraft2(null), "aria-label": t.close, title: t.close, children: /* @__PURE__ */ jsx2(X, { "aria-hidden": true }) })
+      ] }),
+      /* @__PURE__ */ jsx2("p", { className: "w100n-docs-caption", children: t.pageSize }),
+      /* @__PURE__ */ jsx2("div", { className: "w100n-docs-chips", role: "group", "aria-label": t.pageSize, children: [["A4", a4], ["Letter", letter], ["Legal", legal]].map(([label, size]) => {
+        const land = draft2.width > draft2.height;
+        const on = Math.abs(Math.min(draft2.width, draft2.height) - size.width) < 2 && Math.abs(Math.max(draft2.width, draft2.height) - size.height) < 2;
+        return /* @__PURE__ */ jsx2("button", { type: "button", "aria-pressed": on, onClick: () => setDraft2({ ...draft2, width: land ? size.height : size.width, height: land ? size.width : size.height }), children: label }, label);
+      }) }),
+      /* @__PURE__ */ jsx2("p", { className: "w100n-docs-caption", children: t.orientation }),
+      /* @__PURE__ */ jsx2("div", { className: "w100n-docs-chips", role: "group", "aria-label": t.orientation, children: [[false, t.portrait], [true, t.landscape]].map(([land, label]) => /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": draft2.width > draft2.height === land,
+          onClick: () => {
+            if (draft2.width > draft2.height !== land) setDraft2({ ...draft2, width: draft2.height, height: draft2.width });
+          },
+          children: label
+        },
+        label
+      )) }),
+      /* @__PURE__ */ jsx2("p", { className: "w100n-docs-caption", children: t.marginsCm }),
+      /* @__PURE__ */ jsx2("div", { className: "w100n-docs-chips", role: "group", "aria-label": t.margins, children: margins.map(([label, values]) => /* @__PURE__ */ jsx2("button", { type: "button", "aria-pressed": values.every((v, n) => Math.abs(cm(v) - draft2.margins[n]) < 0.05), onClick: () => setDraft2({ ...draft2, margins: values.map(cm) }), children: label }, label)) }),
+      /* @__PURE__ */ jsx2("div", { className: "w100n-setup-grid", children: [t.mTop, t.mRight, t.mBottom, t.mLeft].map((label, n) => /* @__PURE__ */ jsxs2("label", { children: [
+        /* @__PURE__ */ jsx2("span", { children: label }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            className: "w100n-docs-field",
+            type: "number",
+            min: 0,
+            max: 10,
+            step: 0.1,
+            value: draft2.margins[n],
+            onChange: (e) => setDraft2({ ...draft2, margins: draft2.margins.map((v, i) => i === n ? Math.max(0, Math.min(10, Number(e.target.value) || 0)) : v) })
+          }
+        )
+      ] }, n)) }),
+      /* @__PURE__ */ jsxs2("label", { className: "w100n-setup-line", children: [
+        /* @__PURE__ */ jsx2("span", { children: t.headerText }),
+        /* @__PURE__ */ jsx2("input", { className: "w100n-docs-field", value: draft2.header, onChange: (e) => setDraft2({ ...draft2, header: e.target.value }) })
+      ] }),
+      /* @__PURE__ */ jsxs2("label", { className: "w100n-setup-line", children: [
+        /* @__PURE__ */ jsx2("span", { children: t.footerText }),
+        /* @__PURE__ */ jsx2("input", { className: "w100n-docs-field", value: draft2.footer, onChange: (e) => setDraft2({ ...draft2, footer: e.target.value }) })
+      ] }),
+      /* @__PURE__ */ jsxs2("label", { className: "w100n-setup-check", children: [
+        /* @__PURE__ */ jsx2("input", { type: "checkbox", checked: draft2.numbers, onChange: (e) => setDraft2({ ...draft2, numbers: e.target.checked }) }),
+        t.pageNumbers
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "w100n-pdf-dialog-end", children: [
+        /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-pdf-link", onClick: () => setDraft2(null), children: t.cancel }),
+        /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", onClick: applySetup, children: [
+          /* @__PURE__ */ jsx2(Check, { "aria-hidden": true }),
+          t.apply
+        ] })
+      ] })
+    ] }) }),
+    slot && createPortal(/* @__PURE__ */ jsxs2("div", { className: "w100n-text-notes", children: [
+      draft && /* @__PURE__ */ jsxs2("div", { className: "w100n-text-card w100n-text-draft", children: [
+        /* @__PURE__ */ jsx2("blockquote", { children: draft.quote }),
+        /* @__PURE__ */ jsx2(
+          "textarea",
+          {
+            autoFocus: true,
+            value: draft.body,
+            placeholder: t.writeComment,
+            "aria-label": t.writeComment,
+            onChange: (e) => setDraft({ ...draft, body: e.target.value }),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) void post();
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs2("span", { className: "w100n-pdf-dialog-end", children: [
+          /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-pdf-link", onClick: drop, children: t.cancel }),
+          /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", disabled: !draft.body.trim() || posting === "busy", onClick: () => void post(), children: [
+            /* @__PURE__ */ jsx2(MessageSquarePlus, { "aria-hidden": true }),
+            t.post
+          ] })
+        ] })
+      ] }),
+      suggested.length > 0 && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+        /* @__PURE__ */ jsxs2("p", { className: "w100n-docs-caption", children: [
+          /* @__PURE__ */ jsx2(FilePenLine, { "aria-hidden": true }),
+          t.suggestions,
+          /* @__PURE__ */ jsx2("span", { children: suggested.length })
+        ] }),
+        suggested.map((c, i) => /* @__PURE__ */ jsxs2("article", { className: "w100n-text-card w100n-text-change", "data-kind": c.kind, onClick: () => jump(c.from), children: [
+          /* @__PURE__ */ jsxs2("header", { children: [
+            /* @__PURE__ */ jsx2("span", { className: "w100n-text-face", "aria-hidden": true, children: (c.author || "?").slice(0, 1).toUpperCase() }),
+            /* @__PURE__ */ jsxs2("span", { className: "w100n-text-who", children: [
+              /* @__PURE__ */ jsx2("b", { children: c.author || t.someone }),
+              c.date && /* @__PURE__ */ jsx2("small", { children: when(c.date) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs2("p", { children: [
+            c.kind === "insertion" ? t.added : t.removed,
+            " ",
+            /* @__PURE__ */ jsx2("q", { children: c.text })
+          ] }),
+          can.edit && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-actions", onClick: (e) => e.stopPropagation(), children: [
+            /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", "data-tone": "green", onClick: () => decide(editor, true, c.id), children: [
+              /* @__PURE__ */ jsx2(Check, { "aria-hidden": true }),
+              t.accept
+            ] }),
+            /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", "data-tone": "red", onClick: () => decide(editor, false, c.id), children: [
+              /* @__PURE__ */ jsx2(X, { "aria-hidden": true }),
+              t.reject
+            ] })
+          ] })
+        ] }, i))
+      ] }),
+      posting === "failed" && /* @__PURE__ */ jsx2("p", { className: "w100n-docs-muted", role: "alert", children: t.commentFailed }),
+      failed && /* @__PURE__ */ jsx2("p", { className: "w100n-docs-muted", role: "alert", children: t.changeFailed }),
+      /* @__PURE__ */ jsxs2("div", { className: "w100n-docs-row", children: [
+        /* @__PURE__ */ jsxs2("p", { className: "w100n-docs-caption", children: [
+          /* @__PURE__ */ jsx2(MessagesSquare, { "aria-hidden": true }),
+          t.comments,
+          /* @__PURE__ */ jsx2("span", { children: open.length })
+        ] }),
+        /* @__PURE__ */ jsx2("span", { className: "w100n-docs-chips", children: /* @__PURE__ */ jsx2("button", { type: "button", "aria-pressed": resolved, onClick: () => setResolved(!resolved), children: t.showResolved }) })
+      ] }),
+      !threads.length && !draft && /* @__PURE__ */ jsx2("p", { className: "w100n-docs-muted", children: can.comment ? t.commentHint : t.noComments }),
+      threads.map((c) => /* @__PURE__ */ jsxs2("article", { className: "w100n-text-card", "aria-current": active === c.id, "data-resolved": c.resolved, onClick: () => show(c), children: [
+        person(c),
+        c.quote && /* @__PURE__ */ jsx2("blockquote", { children: c.quote }),
+        words(c),
+        all.filter((r) => r.replyTo === c.id).map((r) => /* @__PURE__ */ jsxs2("div", { className: "w100n-text-reply", children: [
+          person(r),
+          words(r)
+        ] }, r.id)),
+        reply?.id === c.id && /* @__PURE__ */ jsxs2("div", { className: "w100n-text-reply", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx2(
+            "textarea",
+            {
+              autoFocus: true,
+              value: reply.body,
+              placeholder: t.writeComment,
+              "aria-label": t.reply,
+              onChange: (e) => setReply({ ...reply, body: e.target.value }),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) void answer(c);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs2("span", { className: "w100n-pdf-dialog-end", children: [
+            /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-pdf-link", onClick: () => setReply(null), children: t.cancel }),
+            /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", disabled: !reply.body.trim() || posting === "busy", onClick: () => void answer(c), children: [
+              /* @__PURE__ */ jsx2(Reply, { "aria-hidden": true }),
+              t.reply
+            ] })
+          ] })
+        ] }),
+        can.comment && reply?.id !== c.id && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-actions", onClick: (e) => e.stopPropagation(), children: [
+          c.resolved && /* @__PURE__ */ jsx2("span", { className: "w100n-docs-badge", children: t.resolved }),
+          !c.resolved && /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", onClick: () => setReply({ id: c.id, body: "" }), children: [
+            /* @__PURE__ */ jsx2(Reply, { "aria-hidden": true }),
+            t.reply
+          ] }),
+          host?.resolveComment && /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", "data-tone": "green", onClick: () => void settle(c), children: [
+            c.resolved ? /* @__PURE__ */ jsx2(RotateCcw, { "aria-hidden": true }) : /* @__PURE__ */ jsx2(Check, { "aria-hidden": true }),
+            c.resolved ? t.reopen : t.resolve
+          ] })
+        ] })
+      ] }, c.id))
+    ] }), slot)
+  ] });
+}
+export {
+  TextEditor as default
+};
+//# sourceMappingURL=TextEditor-NSICFE6U.js.map