@sethumadhavan004/ink-editor 0.0.4 → 0.0.5

package/dist/index.d.mts

@@ -31,8 +31,12 @@ interface InkEditorProps {
     onOverflow?: (fitsJson: object, overflowJson: object) => void;
     /** Seed content (Tiptap JSON doc) — used to pre-fill a page, e.g. overflow from previous page. */
     initialContent?: object;
+    /** Called whenever the user changes colors via the color panel. */
+    onColorsChange?: (colors: ThemeColors) => void;
+    /** Color panel keys to hide — e.g. ['canvasBg'] when the host controls the background. */
+    hiddenColorKeys?: (keyof ThemeColors)[];
 }
-declare function InkEditor({ pageSize, onChange, theme, toolbar, initialFont, initialColors, toolbarStart, toolbarEnd, singlePage, onOverflow, initialContent, }: InkEditorProps): react_jsx_runtime.JSX.Element;
+declare function InkEditor({ pageSize, onChange, theme, toolbar, initialFont, initialColors, toolbarStart, toolbarEnd, singlePage, onOverflow, initialContent, onColorsChange, hiddenColorKeys, }: InkEditorProps): react_jsx_runtime.JSX.Element;
 
 interface SinglePageOverflowOptions {
     pageSize: PageSize;

package/dist/index.d.ts

@@ -31,8 +31,12 @@ interface InkEditorProps {
     onOverflow?: (fitsJson: object, overflowJson: object) => void;
     /** Seed content (Tiptap JSON doc) — used to pre-fill a page, e.g. overflow from previous page. */
     initialContent?: object;
+    /** Called whenever the user changes colors via the color panel. */
+    onColorsChange?: (colors: ThemeColors) => void;
+    /** Color panel keys to hide — e.g. ['canvasBg'] when the host controls the background. */
+    hiddenColorKeys?: (keyof ThemeColors)[];
 }
-declare function InkEditor({ pageSize, onChange, theme, toolbar, initialFont, initialColors, toolbarStart, toolbarEnd, singlePage, onOverflow, initialContent, }: InkEditorProps): react_jsx_runtime.JSX.Element;
+declare function InkEditor({ pageSize, onChange, theme, toolbar, initialFont, initialColors, toolbarStart, toolbarEnd, singlePage, onOverflow, initialContent, onColorsChange, hiddenColorKeys, }: InkEditorProps): react_jsx_runtime.JSX.Element;
 
 interface SinglePageOverflowOptions {
     pageSize: PageSize;

package/dist/index.js

@@ -2442,7 +2442,7 @@ var COLOR_LABELS = {
   accentColor: "Accent"
 };
 var COLOR_KEYS = Object.keys(SWATCHES);
-function ColorPanel({ colors, onChange, open, onToggle, onClose }) {
+function ColorPanel({ colors, onChange, open, onToggle, onClose, hiddenKeys = [] }) {
   const ref = (0, import_react2.useRef)(null);
   (0, import_react2.useEffect)(() => {
     if (!open) return;
@@ -2467,7 +2467,7 @@ function ColorPanel({ colors, onChange, open, onToggle, onClose }) {
         children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Palette, { size: 16 })
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "ink-popover ink-popover--right ink-color-panel", role: "dialog", "aria-label": "Color customization", children: COLOR_KEYS.map((key) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ink-color-row", children: [
+    open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "ink-popover ink-popover--right ink-color-panel", role: "dialog", "aria-label": "Color customization", children: COLOR_KEYS.filter((k) => !hiddenKeys.includes(k)).map((key) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ink-color-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ink-color-label", children: COLOR_LABELS[key] }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ink-swatches", children: [
         SWATCHES[key].map((swatch) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -2511,7 +2511,8 @@ function FloatingToolbar({
   colors,
   onColorsChange,
   toolbarStart,
-  toolbarEnd
+  toolbarEnd,
+  hiddenColorKeys
 }) {
   const [openPanel, setOpenPanel] = (0, import_react3.useState)(null);
   (0, import_react3.useEffect)(() => {
@@ -2655,7 +2656,8 @@ function FloatingToolbar({
         onChange: onColorsChange,
         open: openPanel === "color",
         onToggle: () => togglePanel("color"),
-        onClose: () => setOpenPanel(null)
+        onClose: () => setOpenPanel(null),
+        hiddenKeys: hiddenColorKeys
       }
     ),
     toolbarEnd && toolbarEnd.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
@@ -2680,7 +2682,8 @@ function PagedEditorContent({
   onColorsChange,
   toolbarStart,
   toolbarEnd,
-  singlePage = false
+  singlePage = false,
+  hiddenColorKeys
 }) {
   const widthPx = getPageWidthPx(pageSize);
   const bodyWidthPx = getBodyWidthPx(pageSize);
@@ -2688,53 +2691,62 @@ function PagedEditorContent({
   const pageHeightPx = Math.round(dims.heightMm * 3.7795);
   const hasToolbar = toolbar.length > 0;
   const bodyHeightPx = getBodyHeightPx(pageSize);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  const cssVars = {
+    "--ink-bg": colors.canvasBg,
+    "--ink-page": colors.paperColor,
+    "--ink-text": colors.textColor,
+    "--ink-border-line": colors.lineColor,
+    "--ink-accent": colors.accentColor,
+    "--ink-font-body": FONTS[font].family
+  };
+  const toolbar_el = editor && hasToolbar ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    FloatingToolbar,
+    {
+      editor,
+      buttons: toolbar,
+      ruled,
+      onToggleRuled,
+      font,
+      onFontChange,
+      colors,
+      onColorsChange,
+      toolbarStart,
+      toolbarEnd,
+      hiddenColorKeys
+    }
+  ) : null;
+  const card_el = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
-      className: `ink-page-wrap${singlePage ? " ink-page-wrap--single" : ""}`,
-      "data-theme": theme,
+      className: `ink-page-card${ruled ? " ink-ruled" : ""}`,
       style: {
-        "--ink-bg": colors.canvasBg,
-        "--ink-page": colors.paperColor,
-        "--ink-text": colors.textColor,
-        "--ink-border-line": colors.lineColor,
-        "--ink-accent": colors.accentColor,
-        "--ink-font-body": FONTS[font].family
+        width: widthPx,
+        ...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`,
+        ["--ink-padding-left"]: `${dims.paddingLeftMm}mm`,
+        ["--ink-body-width"]: `${bodyWidthPx}px`,
+        ["--ink-body-height"]: `${bodyHeightPx}px`
       },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react4.EditorContent, { editor })
+    }
+  );
+  if (singlePage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { "data-theme": theme, style: cssVars, children: [
+      toolbar_el,
+      card_el
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: "ink-page-wrap",
+      "data-theme": theme,
+      style: cssVars,
       children: [
-        editor && hasToolbar && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          FloatingToolbar,
-          {
-            editor,
-            buttons: toolbar,
-            ruled,
-            onToggleRuled,
-            font,
-            onFontChange,
-            colors,
-            onColorsChange,
-            toolbarStart,
-            toolbarEnd
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "div",
-          {
-            className: `ink-page-card${ruled ? " ink-ruled" : ""}`,
-            style: {
-              width: widthPx,
-              // 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`,
-              ["--ink-padding-left"]: `${dims.paddingLeftMm}mm`,
-              ["--ink-body-width"]: `${bodyWidthPx}px`,
-              ["--ink-body-height"]: `${bodyHeightPx}px`
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react4.EditorContent, { editor })
-          }
-        )
+        toolbar_el,
+        card_el
       ]
     }
   );
@@ -2754,7 +2766,9 @@ function InkEditor({
   toolbarEnd,
   singlePage = false,
   onOverflow,
-  initialContent
+  initialContent,
+  onColorsChange,
+  hiddenColorKeys
 }) {
   const [ruled, setRuled] = (0, import_react6.useState)(false);
   const [font, setFont] = (0, import_react6.useState)(initialFont);
@@ -2794,10 +2808,14 @@ function InkEditor({
       font,
       onFontChange: setFont,
       colors,
-      onColorsChange: setColors,
+      onColorsChange: (c) => {
+        setColors(c);
+        onColorsChange?.(c);
+      },
       toolbarStart,
       toolbarEnd,
-      singlePage
+      singlePage,
+      hiddenColorKeys
     }
   );
 }