@sethumadhavan004/ink-editor 0.0.1 → 0.0.3

package/dist/index.mjs

@@ -2243,7 +2243,8 @@ import {
   ListOrdered,
   Indent,
   Outdent,
-  Rows
+  Rows,
+  FilePlus
 } from "lucide-react";
 
 // src/components/FontPicker.tsx
@@ -2376,7 +2377,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 +2389,9 @@ function FloatingToolbar({
   font,
   onFontChange,
   colors,
-  onColorsChange
+  onColorsChange,
+  toolbarStart,
+  toolbarEnd
 }) {
   const [openPanel, setOpenPanel] = useState(null);
   useEffect3(() => {
@@ -2479,10 +2482,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 +2537,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 +2557,9 @@ function PagedEditorContent({
   font,
   onFontChange,
   colors,
-  onColorsChange
+  onColorsChange,
+  toolbarStart,
+  toolbarEnd
 }) {
   const widthPx = getPageWidthPx(pageSize);
   const bodyWidthPx = getBodyWidthPx(pageSize);
@@ -2566,7 +2591,9 @@ function PagedEditorContent({
             font,
             onFontChange,
             colors,
-            onColorsChange
+            onColorsChange,
+            toolbarStart,
+            toolbarEnd
           }
         ),
         /* @__PURE__ */ jsx4(
@@ -2598,13 +2625,18 @@ function InkEditor({
   pageSize = "A4",
   onChange,
   theme = "parchment",
-  toolbar = DEFAULT_TOOLBAR
+  toolbar = DEFAULT_TOOLBAR,
+  initialFont = "cursive",
+  initialColors,
+  toolbarStart,
+  toolbarEnd
 }) {
   const [ruled, setRuled] = useState2(false);
-  const [font, setFont] = useState2("cursive");
-  const [colors, setColors] = useState2(
-    theme === "minimal" ? MINIMAL_DEFAULTS : PARCHMENT_DEFAULTS
-  );
+  const [font, setFont] = useState2(initialFont);
+  const [colors, setColors] = useState2({
+    ...theme === "minimal" ? MINIMAL_DEFAULTS : PARCHMENT_DEFAULTS,
+    ...initialColors
+  });
   const editor = useEditor({
     extensions: [
       StarterKit,
@@ -2634,7 +2666,9 @@ function InkEditor({
       font,
       onFontChange: setFont,
       colors,
-      onColorsChange: setColors
+      onColorsChange: setColors,
+      toolbarStart,
+      toolbarEnd
     }
   );
 }