@w100n/documents 0.15.1 → 0.16.0

package/dist/{TextEditor-D6QH2B7O.js → TextEditor-MGCSGGGA.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-QDH7EZAF.js";
 import {
   useLive
-} from "./chunk-XR42B3F5.js";
+} from "./chunk-3OLRFIHQ.js";
 import {
   a4,
   align,
@@ -13,7 +13,6 @@ import {
   clear,
   decide,
   entries,
-  fromMarkdown,
   indent,
   kit,
   letter,
@@ -23,19 +22,23 @@ import {
   replace,
   searching,
   spacing,
-  suggesting,
+  suggesting
+} from "./chunk-2L3TK7UF.js";
+import {
+  fromMarkdown,
   toMarkdown,
   track
-} from "./chunk-BGH36LAR.js";
+} from "./chunk-EQLBYW42.js";
 import {
   rove,
   useRestore
 } from "./chunk-TDP6OJET.js";
+import "./chunk-RKV3N6OS.js";
 import {
   mathml,
   readDocx,
   writeDocx
-} from "./chunk-CAPICJ6B.js";
+} from "./chunk-ZAVXCH7V.js";
 import "./chunk-ISOOUYLI.js";
 
 // src/editor/TextEditor.tsx
@@ -234,12 +237,17 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
   const scroller = useRef2(null);
   const root = useRef2(null);
   const [pop, setPop] = useState2(null);
+  const [spot, setSpot] = useState2({ x: 0, y: 0 });
+  const touch = useRef2(false);
+  const [spell, setSpell] = useState2(() => typeof localStorage === "undefined" || localStorage.getItem("w100n-docs-spell") !== "0");
   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 [printed, setPrinted] = useState2(null);
+  const flow = docx && !(printed ?? !(room > 0 && room < 640));
   const [saving, setSaving] = useState2("idle");
   const [href, setHref] = useState2("");
   const [grid, setGrid] = useState2({ rows: 0, cols: 0 });
@@ -270,7 +278,7 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
     editable: can.edit && (!live || !!shared),
     immediatelyRender: true,
     shouldRerenderOnTransaction: false,
-    editorProps: { attributes: { class: "w100n-docs-prose w100n-text-body", "aria-label": t.documentText }, transformPastedHTML: cleanPaste },
+    editorProps: { attributes: { class: "w100n-docs-prose w100n-text-body", "aria-label": t.documentText, spellcheck: String(spell), lang: language }, 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) };
     }
@@ -346,8 +354,8 @@ img { max-width: 100%; } img[data-wrap='left'] { float: left; margin: 0 12pt 6pt
   };
   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]);
+    if (editor && docx && source.data) editor.view.dispatch(editor.state.tr.setMeta(paging, { page, marks: { header: marginal.header, footer: marginal.footer }, flow }));
+  }, [editor, source.data, page, marginal.header, marginal.footer, flow]);
   useEffect(() => {
     if (!shared || !docx) return;
     const map = shared.doc.getMap("setup");
@@ -461,6 +469,18 @@ img { max-width: 100%; } img[data-wrap='left'] { float: left; margin: 0 12pt 6pt
     watch.observe(el);
     return () => watch.disconnect();
   }, [editor, source.data]);
+  useEffect(() => {
+    const view = window.visualViewport;
+    const el = root.current;
+    if (!view || !el) return;
+    const lift = () => el.style.setProperty("--kb", `${Math.max(0, innerHeight - view.height - view.offsetTop)}px`);
+    view.addEventListener("resize", lift);
+    view.addEventListener("scroll", lift);
+    return () => {
+      view.removeEventListener("resize", lift);
+      view.removeEventListener("scroll", lift);
+    };
+  }, [editor, source.data]);
   useEffect(() => {
     const el = root.current;
     if (!el) return;
@@ -490,8 +510,17 @@ img { max-width: 100%; } img[data-wrap='left'] { float: left; margin: 0 12pt 6pt
     const close = (e) => {
       if (!e.target.closest(".w100n-text-pop, [data-pop]")) setPop(null);
     };
+    const off = (e) => {
+      if (pop === "context" && (e.type === "scroll" || e.key === "Escape")) setPop(null);
+    };
     document.addEventListener("pointerdown", close);
-    return () => document.removeEventListener("pointerdown", close);
+    window.addEventListener("keydown", off);
+    window.addEventListener("scroll", off, true);
+    return () => {
+      document.removeEventListener("pointerdown", close);
+      window.removeEventListener("keydown", off);
+      window.removeEventListener("scroll", off, true);
+    };
   }, [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 });
@@ -624,9 +653,9 @@ img { max-width: 100%; } img[data-wrap='left'] { float: left; margin: 0 12pt 6pt
   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;
+    const spot2 = notes.getState(editor.state).spots.find((s) => s.id === c.id);
+    if (!spot2) return;
+    const at = editor.view.domAtPos(spot2.from).node;
     (at instanceof HTMLElement ? at : at.parentElement)?.scrollIntoView({ behavior: "smooth", block: "center" });
   };
   const suggested = [...state.revs.reduce((all2, c) => {
@@ -639,7 +668,7 @@ img { max-width: 100%; } img[data-wrap='left'] { float: left; margin: 0 12pt 6pt
     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 percent = zoom ?? (docx && room && !flow ? 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;
@@ -665,7 +694,7 @@ img { max-width: 100%; } img[data-wrap='left'] { float: left; margin: 0 12pt 6pt
     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]));
+    else if (e.shiftKey && ["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;
@@ -783,9 +812,13 @@ img { max-width: 100%; } img[data-wrap='left'] { float: left; margin: 0 12pt 6pt
       item(t.clearFormat, () => clear(editor), { keys: `${mod}\\` })
     ] : []],
     ["view", t.viewTab, [
+      docx && item(t.printLayout, () => {
+        setPrinted(flow);
+        setZoom(null);
+      }, { on: !flow }),
       item(t.zoomIn, () => zoomBy(10)),
       item(t.zoomOut, () => zoomBy(-10)),
-      docx && item(t.fitWidth, () => setZoom(null), { on: zoom === null }),
+      docx && !flow && item(t.fitWidth, () => setZoom(null), { on: zoom === null }),
       item(t.fit, () => setZoom(100)),
       "-",
       item(t.outline, () => onPanel?.("outline")),
@@ -807,8 +840,8 @@ img { max-width: 100%; } img[data-wrap='left'] { float: left; margin: 0 12pt 6pt
       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 }))
+      item(t.formula, () => setDialog({ kind: "formula", latex: "", at: null })),
+      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 })),
@@ -819,12 +852,9 @@ img { max-width: 100%; } img[data-wrap='left'] { float: left; margin: 0 12pt 6pt
       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 }))
-      ] : [],
+      "-",
+      ...aligns.map(([, label, value]) => item(label, () => align(editor, value), { on: state.align === value })),
+      ...docx ? ["-", ...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 }),
@@ -837,19 +867,55 @@ img { max-width: 100%; } img[data-wrap='left'] { float: left; margin: 0 12pt 6pt
       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"))
+      !!host?.comments && (can.comment || open.length > 0) && item(t.comments, () => onPanel?.("comments")),
+      can.edit && item(t.spellCheck, () => {
+        editor.view.dom.spellcheck = !spell;
+        localStorage.setItem("w100n-docs-spell", spell ? "0" : "1");
+        setSpell(!spell);
+      }, { on: spell })
     ]]
   ];
+  const clip = (kind2) => {
+    editor.view.focus();
+    document.execCommand(kind2);
+  };
+  const paste = async () => {
+    const found2 = await navigator.clipboard.read().catch(() => []);
+    const html = found2.find((c) => c.types.includes("text/html"));
+    if (html) return editor.view.pasteHTML(await (await html.getType("text/html")).text());
+    const plain = found2.find((c) => c.types.includes("text/plain"));
+    if (plain) editor.view.pasteText(await (await plain.getType("text/plain")).text());
+  };
+  const table = editor.isActive("table");
+  const near = [
+    can.edit && item(t.cut, () => clip("cut"), { off: state.empty, keys: `${mod}X` }),
+    item(t.copy, () => clip("copy"), { off: state.empty, keys: `${mod}C` }),
+    can.edit && !!navigator.clipboard?.read && item(t.paste, () => void paste(), { keys: `${mod}V` }),
+    "-",
+    can.comment && item(t.addComment, begin, { off: state.empty, keys: `${mod}\u2325M` }),
+    can.edit && item(t.link, linkUp, { keys: `${mod}K` }),
+    can.edit && item(t.clearFormat, () => clear(editor), { keys: `${mod}\\` }),
+    ...can.edit && table ? [
+      "-",
+      item(t.rowAbove, () => editor.chain().focus().addRowBefore().run()),
+      item(t.rowBelow, () => editor.chain().focus().addRowAfter().run()),
+      item(t.columnLeft, () => editor.chain().focus().addColumnBefore().run()),
+      item(t.columnRight, () => editor.chain().focus().addColumnAfter().run()),
+      item(t.deleteRow, () => editor.chain().focus().deleteRow().run()),
+      item(t.deleteColumn, () => editor.chain().focus().deleteColumn().run())
+    ] : []
+  ];
+  const rows = (list) => list.filter((x) => x !== false).filter((x, i, all2) => x !== "-" || i > 0 && all2[i - 1] !== "-" && i < all2.length - 1).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));
   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)) })
+    pop === key && /* @__PURE__ */ jsx2("span", { className: "w100n-text-pop w100n-text-menu", role: "menu", "aria-label": label, children: rows(list) })
   ] }, key);
   const seek = (next) => {
     editor.view.dispatch(editor.state.tr.setMeta(searching, next));
@@ -1056,7 +1122,7 @@ img { max-width: 100%; } img[data-wrap='left'] { float: left; margin: 0 12pt 6pt
       pop === "color" && swatches(inks, state.color, (c) => c ? editor.chain().focus().setColor(c).run() : editor.chain().focus().unsetColor().run(), t.automatic)
     ] }),
     gap,
-    docx && aligner,
+    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),
@@ -1133,17 +1199,17 @@ img { max-width: 100%; } img[data-wrap='left'] { float: left; margin: 0 12pt 6pt
       /* @__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 rows2 = 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 }),
+              "aria-label": `${rows2} \xD7 ${cols}`,
+              "data-on": rows2 <= grid.rows && cols <= grid.cols,
+              onPointerEnter: () => setGrid({ rows: rows2, cols }),
               onClick: () => {
-                editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
+                editor.chain().focus().insertTable({ rows: rows2, cols, withHeaderRow: true }).run();
                 setPop(null);
               }
             },
@@ -1245,7 +1311,17 @@ img { max-width: 100%; } img[data-wrap='left'] { float: left; margin: 0 12pt 6pt
       menubar,
       status
     ] }),
-    /* @__PURE__ */ jsx2("div", { ref: scroller, className: "w100n-text-scroll", "data-paint": !!paint, onMouseUp: lay, onClick: (e) => {
+    /* @__PURE__ */ jsx2("div", { ref: scroller, className: "w100n-text-scroll", "data-paint": !!paint, onMouseUp: lay, onPointerDown: (e) => {
+      touch.current = e.pointerType === "touch";
+    }, onContextMenu: (e) => {
+      if (touch.current || e.shiftKey || pop === "context" || !e.target.closest(".ProseMirror")) return setPop(null);
+      e.preventDefault();
+      const at = editor.view.posAtCoords({ left: e.clientX, top: e.clientY });
+      const { from, to } = editor.state.selection;
+      if (at && (at.pos < from || at.pos > to)) editor.commands.setTextSelection(at.pos);
+      setSpot({ x: Math.min(e.clientX, innerWidth - 260), y: Math.min(e.clientY, innerHeight - 360) });
+      setPop("context");
+    }, onClick: (e) => {
       const atom = can.edit ? e.target.closest(".w100n-math, sup[data-footnote]") : null;
       if (atom) {
         const at = editor.view.posAtDOM(atom, 0);
@@ -1258,7 +1334,11 @@ img { max-width: 100%; } img[data-wrap='left'] { float: left; margin: 0 12pt 6pt
       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 }) }) }) }),
+    }, children: /* @__PURE__ */ jsx2("div", { className: "w100n-text-zoomed", style: { zoom: percent / 100 }, children: /* @__PURE__ */ jsx2("div", { className: docx ? `w100n-text-sheet${flow ? " is-flow" : ""}` : "w100n-docs-page w100n-text-column", style: sheet, children: /* @__PURE__ */ jsx2(EditorContent, { editor }) }) }) }),
+    pop === "context" && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-menu w100n-text-context", role: "menu", "aria-label": t.textTools, style: { left: spot.x, top: spot.y }, onPointerDown: keep, children: [
+      rows(near),
+      spell && /* @__PURE__ */ jsx2("small", { className: "w100n-text-hint", children: t.spellHint })
+    ] }),
     /* @__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,
@@ -1310,7 +1390,6 @@ img { max-width: 100%; } img[data-wrap='left'] { float: left; margin: 0 12pt 6pt
       /* @__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 }) }),
@@ -1341,7 +1420,13 @@ img { max-width: 100%; } img[data-wrap='left'] { float: left; margin: 0 12pt 6pt
         tr.setNodeAttribute(dialog.at, "text", text);
         return true;
       }).run();
-      else editor.chain().focus().insertContent({ type: "footnote", attrs: { id: null, text } }).run();
+      else {
+        let id = 0;
+        editor.state.doc.descendants((n) => {
+          if (n.type.name === "footnote") id = Math.max(id, Number(n.attrs.id) || 0);
+        });
+        editor.chain().focus().insertContent({ type: "footnote", attrs: { id: docx ? null : String(id + 1), text } }).run();
+      }
       setDialog(null);
     }, children: [
       /* @__PURE__ */ jsxs2("div", { className: "w100n-new-head", children: [
@@ -1559,4 +1644,4 @@ img { max-width: 100%; } img[data-wrap='left'] { float: left; margin: 0 12pt 6pt
 export {
   TextEditor as default
 };
-//# sourceMappingURL=TextEditor-D6QH2B7O.js.map
+//# sourceMappingURL=TextEditor-MGCSGGGA.js.map