@sethumadhavan004/ink-editor 0.0.2 → 0.0.4

package/dist/index.mjs

@@ -2224,6 +2224,103 @@ var TabIndent = Extension.create({
   }
 });
 
+// src/extensions/SinglePageOverflow.ts
+import { Plugin as Plugin3, PluginKey as PluginKey3 } from "@tiptap/pm/state";
+var pluginKey2 = new PluginKey3("singlePageOverflow");
+function getBodyHeightPx2(view, pageSize) {
+  const card = view.dom.closest(".ink-page-card");
+  if (card) {
+    const style = window.getComputedStyle(card);
+    const paddingTop = parseFloat(style.paddingTop);
+    const paddingBottom = parseFloat(style.paddingBottom);
+    const totalHeight = card.offsetHeight || 0;
+    const bodyPx = totalHeight - paddingTop - paddingBottom;
+    if (bodyPx > 0) return Math.floor(bodyPx / 28) * 28;
+  }
+  const d = PAGE_DIMENSIONS[pageSize];
+  const PX_PER_MM2 = 3.7795;
+  return Math.floor((d.heightMm - d.paddingTopMm - d.paddingBottomMm) * PX_PER_MM2 / 28) * 28;
+}
+function splitAtOverflow(doc, view, bodyHeightPx) {
+  let baseY = null;
+  let splitPos = null;
+  doc.forEach((node, offset) => {
+    if (splitPos !== null) return;
+    const pos = offset + 1;
+    if (pos >= doc.content.size) return;
+    let bottom;
+    try {
+      const coords = view.coordsAtPos(pos);
+      if (baseY === null) baseY = coords.top;
+      const endPos = offset + node.nodeSize - 1;
+      bottom = endPos > pos ? view.coordsAtPos(endPos).bottom : coords.bottom;
+    } catch {
+      return;
+    }
+    const relBottom = bottom - (baseY ?? bottom);
+    if (relBottom > bodyHeightPx) {
+      splitPos = offset;
+    }
+  });
+  if (splitPos === null) return null;
+  const schema = doc.type.schema;
+  const fitsContent = doc.slice(0, splitPos).content;
+  const overflowContent = doc.slice(splitPos).content;
+  const fitsJson = schema.nodeFromJSON({ type: "doc", content: fitsContent.toJSON() ?? [] }).toJSON();
+  const overflowJson = schema.nodeFromJSON({ type: "doc", content: overflowContent.toJSON() ?? [] }).toJSON();
+  return { fitsJson, overflowJson };
+}
+var SinglePageOverflow = Extension.create({
+  name: "singlePageOverflow",
+  addOptions() {
+    return {
+      pageSize: "A4",
+      onOverflow: () => {
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    const { pageSize, onOverflow } = this.options;
+    let rafId = null;
+    function scheduleCheck(view) {
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        if (view.isDestroyed) return;
+        const bodyHeightPx = getBodyHeightPx2(view, pageSize);
+        const result = splitAtOverflow(view.state.doc, view, bodyHeightPx);
+        if (!result) return;
+        const { fitsJson, overflowJson } = result;
+        const schema = view.state.schema;
+        const fitsDoc = schema.nodeFromJSON(fitsJson);
+        const tr = view.state.tr.replaceWith(0, view.state.doc.content.size, fitsDoc.content);
+        tr.setMeta("addToHistory", false);
+        tr.setMeta("singlePageTrim", true);
+        view.dispatch(tr);
+        onOverflow(fitsJson, overflowJson);
+      });
+    }
+    return [
+      new Plugin3({
+        key: pluginKey2,
+        view(editorView) {
+          return {
+            update(view, prevState) {
+              if (view.state.doc.eq(prevState.doc) || view.state.tr?.getMeta?.("singlePageTrim")) return;
+              if (view.state.doc.content.size !== prevState.doc.content.size || !view.state.doc.eq(prevState.doc)) {
+                scheduleCheck(view);
+              }
+            },
+            destroy() {
+              if (rafId !== null) cancelAnimationFrame(rafId);
+            }
+          };
+        }
+      })
+    ];
+  }
+});
+
 // src/components/PagedEditorContent.tsx
 import { EditorContent } from "@tiptap/react";
 
@@ -2243,7 +2340,8 @@ import {
   ListOrdered,
   Indent,
   Outdent,
-  Rows
+  Rows,
+  FilePlus
 } from "lucide-react";
 
 // src/components/FontPicker.tsx
@@ -2376,7 +2474,7 @@ function ColorPanel({ colors, onChange, open, onToggle, onClose }) {
 }
 
 // src/components/FloatingToolbar.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function Sep() {
   return /* @__PURE__ */ jsx3("span", { className: "ink-toolbar-sep", "aria-hidden": "true" });
 }
@@ -2388,7 +2486,9 @@ function FloatingToolbar({
   font,
   onFontChange,
   colors,
-  onColorsChange
+  onColorsChange,
+  toolbarStart,
+  toolbarEnd
 }) {
   const [openPanel, setOpenPanel] = useState(null);
   useEffect3(() => {
@@ -2479,10 +2579,26 @@ function FloatingToolbar({
         isActive: () => ruled,
         action: onToggleRuled
       }]
+    },
+    {
+      key: "addpage",
+      configs: [{
+        label: "Add page",
+        icon: /* @__PURE__ */ jsx3(FilePlus, { size: iconSize }),
+        isActive: () => false,
+        action: () => {
+          const end = editor.state.doc.content.size - 1;
+          editor.chain().focus().insertContentAt(end, [{ type: "paragraph" }, { type: "paragraph" }]).run();
+        }
+      }]
     }
   ];
   const activeGroups = allGroups.filter((g) => buttons.includes(g.key));
   return /* @__PURE__ */ jsx3("div", { className: "ink-floating-toolbar-wrap", children: /* @__PURE__ */ jsxs3("div", { className: "ink-floating-toolbar", role: "toolbar", "aria-label": "Text formatting", children: [
+    toolbarStart && toolbarStart.length > 0 && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      toolbarStart.map((node, i) => /* @__PURE__ */ jsx3("span", { style: { display: "contents" }, children: node }, i)),
+      /* @__PURE__ */ jsx3(Sep, {})
+    ] }),
     activeGroups.map((group, gi) => /* @__PURE__ */ jsxs3("span", { className: "ink-toolbar-group", style: { display: "contents" }, children: [
       group.configs.map((cfg) => /* @__PURE__ */ jsx3(
         "button",
@@ -2518,7 +2634,11 @@ function FloatingToolbar({
         onToggle: () => togglePanel("color"),
         onClose: () => setOpenPanel(null)
       }
-    )
+    ),
+    toolbarEnd && toolbarEnd.length > 0 && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      /* @__PURE__ */ jsx3(Sep, {}),
+      toolbarEnd.map((node, i) => /* @__PURE__ */ jsx3("span", { style: { display: "contents" }, children: node }, i))
+    ] })
   ] }) });
 }
 
@@ -2534,7 +2654,10 @@ function PagedEditorContent({
   font,
   onFontChange,
   colors,
-  onColorsChange
+  onColorsChange,
+  toolbarStart,
+  toolbarEnd,
+  singlePage = false
 }) {
   const widthPx = getPageWidthPx(pageSize);
   const bodyWidthPx = getBodyWidthPx(pageSize);
@@ -2545,7 +2668,7 @@ function PagedEditorContent({
   return /* @__PURE__ */ jsxs4(
     "div",
     {
-      className: "ink-page-wrap",
+      className: `ink-page-wrap${singlePage ? " ink-page-wrap--single" : ""}`,
       "data-theme": theme,
       style: {
         "--ink-bg": colors.canvasBg,
@@ -2566,7 +2689,9 @@ function PagedEditorContent({
             font,
             onFontChange,
             colors,
-            onColorsChange
+            onColorsChange,
+            toolbarStart,
+            toolbarEnd
           }
         ),
         /* @__PURE__ */ jsx4(
@@ -2575,7 +2700,8 @@ function PagedEditorContent({
             className: `ink-page-card${ruled ? " ink-ruled" : ""}`,
             style: {
               width: widthPx,
-              minHeight: pageHeightPx,
+              // In singlePage mode: fixed height + overflow hidden so content never visually spills
+              ...singlePage ? { height: pageHeightPx, overflow: "hidden" } : { minHeight: pageHeightPx },
               padding: `${dims.paddingTopMm}mm ${dims.paddingRightMm}mm ${dims.paddingBottomMm}mm ${dims.paddingLeftMm}mm`,
               ["--ink-padding-top"]: `${dims.paddingTopMm}mm`,
               ["--ink-padding-right"]: `${dims.paddingRightMm}mm`,
@@ -2600,7 +2726,12 @@ function InkEditor({
   theme = "parchment",
   toolbar = DEFAULT_TOOLBAR,
   initialFont = "cursive",
-  initialColors
+  initialColors,
+  toolbarStart,
+  toolbarEnd,
+  singlePage = false,
+  onOverflow,
+  initialContent
 }) {
   const [ruled, setRuled] = useState2(false);
   const [font, setFont] = useState2(initialFont);
@@ -2608,14 +2739,17 @@ function InkEditor({
     ...theme === "minimal" ? MINIMAL_DEFAULTS : PARCHMENT_DEFAULTS,
     ...initialColors
   });
+  const extensions = [
+    StarterKit,
+    TextAlign.configure({ types: ["heading", "paragraph"] }),
+    Underline2,
+    TabIndent,
+    ...singlePage ? [SinglePageOverflow.configure({ pageSize, onOverflow: onOverflow ?? (() => {
+    }) })] : [PageLayout.configure({ pageSize })]
+  ];
   const editor = useEditor({
-    extensions: [
-      StarterKit,
-      PageLayout.configure({ pageSize }),
-      TextAlign.configure({ types: ["heading", "paragraph"] }),
-      Underline2,
-      TabIndent
-    ],
+    extensions,
+    content: initialContent ?? void 0,
     onUpdate({ editor: editor2 }) {
       onChange?.(editor2.getJSON());
     }
@@ -2637,13 +2771,17 @@ function InkEditor({
       font,
       onFontChange: setFont,
       colors,
-      onColorsChange: setColors
+      onColorsChange: setColors,
+      toolbarStart,
+      toolbarEnd,
+      singlePage
     }
   );
 }
 export {
   InkEditor,
   MINIMAL_DEFAULTS,
-  PARCHMENT_DEFAULTS
+  PARCHMENT_DEFAULTS,
+  SinglePageOverflow
 };
 //# sourceMappingURL=index.mjs.map