npm - @malaya_jeeva/rich-text-editor - Versions diffs - 1.0.6 → 1.0.8 - Mend

@malaya_jeeva/rich-text-editor 1.0.6 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -49,15 +49,48 @@ export default function Page() {
 | ---------- | ------------------------- | -------- | ---------------------------------------- |
 | `value`    | `string`                  | No       | Initial HTML content (read on first mount only) |
 | `onChange` | `(value: string) => void` | No       | Fires with full `innerHTML` on every change |
+| `toolbar`  | `ToolbarItem[]`           | No       | Controls which toolbar buttons are shown. If omitted, all buttons are shown |
 ### Type export
 ```ts
-import type { RichTextEditorProps } from '@malaya_jeeva/rich-text-editor'
+import type { RichTextEditorProps, ToolbarItem } from '@malaya_jeeva/rich-text-editor'
 ```
 ---
+## 🛠️ Toolbar Customization
+Pass a `toolbar` array to control exactly which buttons appear. If the prop is omitted, **all buttons are shown** — fully backward compatible.
+### All available `ToolbarItem` keys
+| Key | Button | Description |
+| --- | ------ | ----------- |
+| `bold` | **B** | Bold text |
+| `italic` | *I* | Italic text |
+| `underline` | <u>U</u> | Underline text |
+| `color` | A&#818; | Text color picker (palette + HSV wheel + remove) |
+| `blockFormat` | Paragraph ▾ | Block format dropdown (Paragraph, H1, H2, H3) |
+| `alignLeft` | ≡ | Align text left |
+| `alignCenter` | ≡ | Align text center |
+| `alignRight` | ≡ | Align text right |
+| `alignJustify` | ≡ | Justify text |
+| `bulletList` | • | Unordered / bullet list |
+| `numberedList` | 1. | Ordered / numbered list |
+| `indent` | → | Increase indent (or go deeper in list) |
+| `outdent` | ← | Decrease indent (or go back up in list) |
+| `link` | 🔗 | Insert / edit hyperlink |
+| `codeBlock` | `</>` | Wrap selection in `<pre><code>` |
+| `image` | 🖼 | Insert image (upload, URL, or drop) |
+| `table` | ⊞ | Insert table (grid picker up to 8×8) |
+| `html` | HTML | Toggle between Visual and HTML source view |
+| `copyHtml` | ⎘ | Copy current HTML to clipboard |
+> **Note:** Separators between groups are rendered automatically — they appear only when buttons exist on both sides, so you never get a leading, trailing, or double separator regardless of your selection.
+---
 ## ✨ Features
 ### Text Formatting
@@ -112,15 +145,15 @@ import type { RichTextEditorProps } from '@malaya_jeeva/rich-text-editor'
 ## 🧠 Keyboard Shortcuts
-| Shortcut        | Action                             |
-| --------------- | ---------------------------------- |
-| `Ctrl + B`      | Bold                               |
-| `Ctrl + I`      | Italic                             |
-| `Ctrl + U`      | Underline                          |
-| `Tab`           | Indent list item / move to next table cell |
-| `Shift + Tab`   | Outdent list item / move to previous table cell |
-| `Enter` (link bar) | Apply link                      |
-| `Escape` (link bar) | Dismiss link bar               |
+| Shortcut | Action |
+| -------- | ------ |
+| `Ctrl + B` | Bold |
+| `Ctrl + I` | Italic |
+| `Ctrl + U` | Underline |
+| `Tab` | Indent list item / move to next table cell |
+| `Shift + Tab` | Outdent list item / move to previous table cell |
+| `Enter` (link bar) | Apply link |
+| `Escape` (link bar) | Dismiss link bar |
 ---
@@ -129,13 +162,13 @@ import type { RichTextEditorProps } from '@malaya_jeeva/rich-text-editor'
 Click any inserted image to open the image control panel.
 ### Style tab
-| Control     | Options |
-| ----------- | ------- |
-| Display     | Block (full row) · Inline (flows with text) |
-| Alignment   | Left · Center · Right |
-| Width       | 25% · 50% · 75% · 100% · Original size · Custom (e.g. `300px`) |
-| Alt text    | Free text input |
-| Delete      | Removes the image from the editor |
+| Control | Options |
+| ------- | ------- |
+| Display | Block (full row) · Inline (flows with text) |
+| Alignment | Left · Center · Right |
+| Width | 25% · 50% · 75% · 100% · Original size · Custom (e.g. `300px`) |
+| Alt text | Free text input |
+| Delete | Removes the image from the editor |
 ### Caption tab
 Wraps the image in `<figure>` + `<figcaption>`. The caption always renders below the image regardless of float alignment.

package/dist/index.d.mts CHANGED Viewed

@@ -1,10 +1,12 @@
 import { ReactElement } from 'react';
+type ToolbarItem = "bold" | "italic" | "underline" | "color" | "blockFormat" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "bulletList" | "numberedList" | "indent" | "outdent" | "link" | "codeBlock" | "image" | "table" | "html" | "copyHtml";
 type RichTextEditorProps = {
     value?: string;
     onChange?: (value: string) => void;
+    toolbar?: ToolbarItem[];
 };
-declare function RichTextEditor({ value, onChange }: RichTextEditorProps): ReactElement;
+declare function RichTextEditor({ value, onChange, toolbar }: RichTextEditorProps): ReactElement;
 export { type RichTextEditorProps, RichTextEditor as default };

package/dist/index.d.ts CHANGED Viewed

@@ -1,10 +1,12 @@
 import { ReactElement } from 'react';
+type ToolbarItem = "bold" | "italic" | "underline" | "color" | "blockFormat" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "bulletList" | "numberedList" | "indent" | "outdent" | "link" | "codeBlock" | "image" | "table" | "html" | "copyHtml";
 type RichTextEditorProps = {
     value?: string;
     onChange?: (value: string) => void;
+    toolbar?: ToolbarItem[];
 };
-declare function RichTextEditor({ value, onChange }: RichTextEditorProps): ReactElement;
+declare function RichTextEditor({ value, onChange, toolbar }: RichTextEditorProps): ReactElement;
 export { type RichTextEditorProps, RichTextEditor as default };

package/dist/index.js CHANGED Viewed

@@ -66,7 +66,7 @@ var PALETTE = [
 ];
 var CSS = `
   *{box-sizing:border-box;}
-  .rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:1px;padding:4px 8px;background:#f8f8f8;border-bottom:1px solid #e0e0e0;}
+  .rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:1px;padding:4px 8px;background:#f8f8f8;border-bottom:1px solid #e0e0e0;position: sticky;top: 0;z-index: 9;}
   @media(prefers-color-scheme:dark){.rte-toolbar{background:#1e1e1e;border-color:#333;}}
   .rte-btn{background:transparent;border:none;border-radius:3px;cursor:pointer;height:30px;min-width:30px;padding:0 6px;color:#444;font-size:13px;font-weight:500;font-family:var(--font-sans);display:inline-flex;align-items:center;justify-content:center;user-select:none;white-space:nowrap;transition:background 0.1s;flex-shrink:0;}
   .rte-btn:hover{background:#e8e8e8;}.rte-btn.active{background:#d0e4ff;color:#1a5fb4;}
@@ -170,6 +170,12 @@ var CSS = `
   .rte-ie-apply{flex:1;height:26px;background:#1a6fc4;color:#fff;border:none;border-radius:4px;font-size:11px;font-weight:600;cursor:pointer;}
   .rte-ie-remove{flex:1;height:26px;background:#fdecea;color:#c0392b;border:1px solid #f5c6c2;border-radius:4px;font-size:11px;cursor:pointer;}
   .rte-handle{position:absolute;width:10px;height:10px;background:#fff;border:2px solid #1a5fb4;border-radius:2px;pointer-events:all;z-index:53;}
+  .customeditor {
+    max-height: 350px;
+    overflow-y: auto;
+    position: relative;
+}
 `;
 // src/rte/utils.ts
@@ -1109,7 +1115,7 @@ function ImageEditor({ img, containerRef, onClose, onDelete, onChange }) {
 // src/RichTextEditor.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function RichTextEditor({ value, onChange }) {
+function RichTextEditor({ value, onChange, toolbar }) {
   var _a;
   const editorRef = (0, import_react5.useRef)(null);
   const editorAreaRef = (0, import_react5.useRef)(null);
@@ -1461,15 +1467,16 @@ function RichTextEditor({ value, onChange }) {
   const canMerge = selCells.length >= 2;
   const canSplit = fmt.cellMerged;
   const backdrop = { position: "fixed", inset: 0, zIndex: 199 };
+  const show = (key) => !toolbar || toolbar.includes(key);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { padding: "1rem 0" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: CSS }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { border: "1px solid #d8d8d8", borderRadius: 4, boxShadow: "0 1px 3px rgba(0,0,0,0.06)" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "customeditor", style: { border: "1px solid #d8d8d8", borderRadius: 4, boxShadow: "0 1px 3px rgba(0,0,0,0.06)" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rte-toolbar", children: [
         !isCode && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("bold"), title: "Bold (Ctrl+B)", active: fmt.bold, style: { fontWeight: 800, fontFamily: "Georgia,serif" }, children: "B" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("italic"), title: "Italic (Ctrl+I)", active: fmt.italic, style: { fontStyle: "italic", fontFamily: "Georgia,serif" }, children: "I" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("underline"), title: "Underline (Ctrl+U)", active: fmt.underline, style: { textDecoration: "underline" }, children: "U" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { position: "relative", display: "inline-flex" }, children: [
+          show("bold") && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("bold"), title: "Bold (Ctrl+B)", active: fmt.bold, style: { fontWeight: 800, fontFamily: "Georgia,serif" }, children: "B" }),
+          show("italic") && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("italic"), title: "Italic (Ctrl+I)", active: fmt.italic, style: { fontStyle: "italic", fontFamily: "Georgia,serif" }, children: "I" }),
+          show("underline") && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("underline"), title: "Underline (Ctrl+U)", active: fmt.underline, style: { textDecoration: "underline" }, children: "U" }),
+          show("color") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { position: "relative", display: "inline-flex" }, children: [
             showColor && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: backdrop, onMouseDown: () => setShowColor(false) }),
             /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
               Btn,
@@ -1501,8 +1508,8 @@ function RichTextEditor({ value, onChange }) {
               }
             ) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Sep, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          (show("bold") || show("italic") || show("underline") || show("color")) && (show("blockFormat") || show("alignLeft") || show("alignCenter") || show("alignRight") || show("alignJustify")) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Sep, {}),
+          show("blockFormat") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
             "select",
             {
               className: "rte-select",
@@ -1525,20 +1532,20 @@ function RichTextEditor({ value, onChange }) {
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Sep, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("justifyLeft"), title: "Align left", active: fmt.aL, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AlignIco, { t: "left" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("justifyCenter"), title: "Align center", active: fmt.aC, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AlignIco, { t: "center" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("justifyRight"), title: "Align right", active: fmt.aR, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AlignIco, { t: "right" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("justifyFull"), title: "Justify", active: fmt.aJ, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AlignIco, { t: "justify" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Sep, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("insertUnorderedList"), title: "Bullet list", active: fmt.ul, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IcoUL, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("insertOrderedList"), title: "Numbered list", active: fmt.ol, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IcoOL, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("indent"), title: "Indent (Tab)", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IcoIndent, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("outdent"), title: "Outdent (Shift+Tab)", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IcoOutdent, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Sep, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: openLinkBar, title: "Insert link", active: linkBar, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IcoLink, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: insertCodeBlock, title: "Code block", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IcoCode, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { position: "relative", display: "inline-flex" }, children: [
+          show("blockFormat") && (show("alignLeft") || show("alignCenter") || show("alignRight") || show("alignJustify")) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Sep, {}),
+          show("alignLeft") && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("justifyLeft"), title: "Align left", active: fmt.aL, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AlignIco, { t: "left" }) }),
+          show("alignCenter") && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("justifyCenter"), title: "Align center", active: fmt.aC, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AlignIco, { t: "center" }) }),
+          show("alignRight") && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("justifyRight"), title: "Align right", active: fmt.aR, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AlignIco, { t: "right" }) }),
+          show("alignJustify") && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("justifyFull"), title: "Justify", active: fmt.aJ, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AlignIco, { t: "justify" }) }),
+          (show("alignLeft") || show("alignCenter") || show("alignRight") || show("alignJustify")) && (show("bulletList") || show("numberedList") || show("indent") || show("outdent")) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Sep, {}),
+          show("bulletList") && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("insertUnorderedList"), title: "Bullet list", active: fmt.ul, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IcoUL, {}) }),
+          show("numberedList") && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("insertOrderedList"), title: "Numbered list", active: fmt.ol, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IcoOL, {}) }),
+          show("indent") && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("indent"), title: "Indent (Tab)", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IcoIndent, {}) }),
+          show("outdent") && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("outdent"), title: "Outdent (Shift+Tab)", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IcoOutdent, {}) }),
+          (show("bulletList") || show("numberedList") || show("indent") || show("outdent")) && (show("link") || show("codeBlock") || show("image") || show("table")) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Sep, {}),
+          show("link") && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: openLinkBar, title: "Insert link", active: linkBar, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IcoLink, {}) }),
+          show("codeBlock") && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: insertCodeBlock, title: "Code block", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IcoCode, {}) }),
+          show("image") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { position: "relative", display: "inline-flex" }, children: [
             showImagePicker && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: backdrop, onMouseDown: () => setShowImagePicker(false) }),
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => setShowImagePicker((v) => !v), title: "Insert image", active: showImagePicker, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IcoImage, {}) }),
             showImagePicker && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { position: "absolute", top: 34, left: 0, zIndex: 200 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -1552,7 +1559,7 @@ function RichTextEditor({ value, onChange }) {
               }
             ) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { position: "relative", display: "inline-flex" }, children: [
+          show("table") && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { position: "relative", display: "inline-flex" }, children: [
             showTable && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: backdrop, onMouseDown: () => setShowTable(false) }),
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => setShowTable((v) => !v), title: "Insert table", active: showTable || !!fmt.inTable, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IcoTable, {}) }),
             showTable && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { position: "absolute", top: 34, left: 0, zIndex: 200 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -1566,19 +1573,10 @@ function RichTextEditor({ value, onChange }) {
               }
             ) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Sep, {})
+          (show("link") || show("codeBlock") || show("image") || show("table")) && (show("html") || show("copyHtml")) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Sep, {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          Btn,
-          {
-            onClick: isCode ? toVisual : toCode,
-            title: "Toggle HTML",
-            active: isCode,
-            style: { fontSize: 12, fontWeight: 600, letterSpacing: "0.03em", padding: "0 8px" },
-            children: isCode ? "Visual" : "HTML"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: copyHtml, title: "Copy HTML", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IcoCopy, {}) }),
+        show("html") && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: isCode ? toVisual : toCode, title: "Toggle HTML", active: isCode, style: { fontSize: 12, fontWeight: 600, letterSpacing: "0.03em", padding: "0 8px" }, children: isCode ? "Visual" : "HTML" }),
+        show("copyHtml") && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: copyHtml, title: "Copy HTML", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IcoCopy, {}) }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { flex: 1 } }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { style: { fontSize: 12, color: "#aaa" }, children: [
           words,

package/dist/index.mjs CHANGED Viewed

@@ -45,7 +45,7 @@ var PALETTE = [
 ];
 var CSS = `
   *{box-sizing:border-box;}
-  .rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:1px;padding:4px 8px;background:#f8f8f8;border-bottom:1px solid #e0e0e0;}
+  .rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:1px;padding:4px 8px;background:#f8f8f8;border-bottom:1px solid #e0e0e0;position: sticky;top: 0;z-index: 9;}
   @media(prefers-color-scheme:dark){.rte-toolbar{background:#1e1e1e;border-color:#333;}}
   .rte-btn{background:transparent;border:none;border-radius:3px;cursor:pointer;height:30px;min-width:30px;padding:0 6px;color:#444;font-size:13px;font-weight:500;font-family:var(--font-sans);display:inline-flex;align-items:center;justify-content:center;user-select:none;white-space:nowrap;transition:background 0.1s;flex-shrink:0;}
   .rte-btn:hover{background:#e8e8e8;}.rte-btn.active{background:#d0e4ff;color:#1a5fb4;}
@@ -149,6 +149,12 @@ var CSS = `
   .rte-ie-apply{flex:1;height:26px;background:#1a6fc4;color:#fff;border:none;border-radius:4px;font-size:11px;font-weight:600;cursor:pointer;}
   .rte-ie-remove{flex:1;height:26px;background:#fdecea;color:#c0392b;border:1px solid #f5c6c2;border-radius:4px;font-size:11px;cursor:pointer;}
   .rte-handle{position:absolute;width:10px;height:10px;background:#fff;border:2px solid #1a5fb4;border-radius:2px;pointer-events:all;z-index:53;}
+  .customeditor {
+    max-height: 350px;
+    overflow-y: auto;
+    position: relative;
+}
 `;
 // src/rte/utils.ts
@@ -1088,7 +1094,7 @@ function ImageEditor({ img, containerRef, onClose, onDelete, onChange }) {
 // src/RichTextEditor.tsx
 import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-function RichTextEditor({ value, onChange }) {
+function RichTextEditor({ value, onChange, toolbar }) {
   var _a;
   const editorRef = useRef4(null);
   const editorAreaRef = useRef4(null);
@@ -1440,15 +1446,16 @@ function RichTextEditor({ value, onChange }) {
   const canMerge = selCells.length >= 2;
   const canSplit = fmt.cellMerged;
   const backdrop = { position: "fixed", inset: 0, zIndex: 199 };
+  const show = (key) => !toolbar || toolbar.includes(key);
   return /* @__PURE__ */ jsxs6("div", { style: { padding: "1rem 0" }, children: [
     /* @__PURE__ */ jsx7("style", { children: CSS }),
-    /* @__PURE__ */ jsxs6("div", { style: { border: "1px solid #d8d8d8", borderRadius: 4, boxShadow: "0 1px 3px rgba(0,0,0,0.06)" }, children: [
+    /* @__PURE__ */ jsxs6("div", { className: "customeditor", style: { border: "1px solid #d8d8d8", borderRadius: 4, boxShadow: "0 1px 3px rgba(0,0,0,0.06)" }, children: [
       /* @__PURE__ */ jsxs6("div", { className: "rte-toolbar", children: [
         !isCode && /* @__PURE__ */ jsxs6(Fragment4, { children: [
-          /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("bold"), title: "Bold (Ctrl+B)", active: fmt.bold, style: { fontWeight: 800, fontFamily: "Georgia,serif" }, children: "B" }),
-          /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("italic"), title: "Italic (Ctrl+I)", active: fmt.italic, style: { fontStyle: "italic", fontFamily: "Georgia,serif" }, children: "I" }),
-          /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("underline"), title: "Underline (Ctrl+U)", active: fmt.underline, style: { textDecoration: "underline" }, children: "U" }),
-          /* @__PURE__ */ jsxs6("div", { style: { position: "relative", display: "inline-flex" }, children: [
+          show("bold") && /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("bold"), title: "Bold (Ctrl+B)", active: fmt.bold, style: { fontWeight: 800, fontFamily: "Georgia,serif" }, children: "B" }),
+          show("italic") && /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("italic"), title: "Italic (Ctrl+I)", active: fmt.italic, style: { fontStyle: "italic", fontFamily: "Georgia,serif" }, children: "I" }),
+          show("underline") && /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("underline"), title: "Underline (Ctrl+U)", active: fmt.underline, style: { textDecoration: "underline" }, children: "U" }),
+          show("color") && /* @__PURE__ */ jsxs6("div", { style: { position: "relative", display: "inline-flex" }, children: [
             showColor && /* @__PURE__ */ jsx7("div", { style: backdrop, onMouseDown: () => setShowColor(false) }),
             /* @__PURE__ */ jsxs6(
               Btn,
@@ -1480,8 +1487,8 @@ function RichTextEditor({ value, onChange }) {
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx7(Sep, {}),
-          /* @__PURE__ */ jsxs6(
+          (show("bold") || show("italic") || show("underline") || show("color")) && (show("blockFormat") || show("alignLeft") || show("alignCenter") || show("alignRight") || show("alignJustify")) && /* @__PURE__ */ jsx7(Sep, {}),
+          show("blockFormat") && /* @__PURE__ */ jsxs6(
             "select",
             {
               className: "rte-select",
@@ -1504,20 +1511,20 @@ function RichTextEditor({ value, onChange }) {
               ]
             }
           ),
-          /* @__PURE__ */ jsx7(Sep, {}),
-          /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("justifyLeft"), title: "Align left", active: fmt.aL, children: /* @__PURE__ */ jsx7(AlignIco, { t: "left" }) }),
-          /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("justifyCenter"), title: "Align center", active: fmt.aC, children: /* @__PURE__ */ jsx7(AlignIco, { t: "center" }) }),
-          /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("justifyRight"), title: "Align right", active: fmt.aR, children: /* @__PURE__ */ jsx7(AlignIco, { t: "right" }) }),
-          /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("justifyFull"), title: "Justify", active: fmt.aJ, children: /* @__PURE__ */ jsx7(AlignIco, { t: "justify" }) }),
-          /* @__PURE__ */ jsx7(Sep, {}),
-          /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("insertUnorderedList"), title: "Bullet list", active: fmt.ul, children: /* @__PURE__ */ jsx7(IcoUL, {}) }),
-          /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("insertOrderedList"), title: "Numbered list", active: fmt.ol, children: /* @__PURE__ */ jsx7(IcoOL, {}) }),
-          /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("indent"), title: "Indent (Tab)", children: /* @__PURE__ */ jsx7(IcoIndent, {}) }),
-          /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("outdent"), title: "Outdent (Shift+Tab)", children: /* @__PURE__ */ jsx7(IcoOutdent, {}) }),
-          /* @__PURE__ */ jsx7(Sep, {}),
-          /* @__PURE__ */ jsx7(Btn, { onClick: openLinkBar, title: "Insert link", active: linkBar, children: /* @__PURE__ */ jsx7(IcoLink, {}) }),
-          /* @__PURE__ */ jsx7(Btn, { onClick: insertCodeBlock, title: "Code block", children: /* @__PURE__ */ jsx7(IcoCode, {}) }),
-          /* @__PURE__ */ jsxs6("div", { style: { position: "relative", display: "inline-flex" }, children: [
+          show("blockFormat") && (show("alignLeft") || show("alignCenter") || show("alignRight") || show("alignJustify")) && /* @__PURE__ */ jsx7(Sep, {}),
+          show("alignLeft") && /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("justifyLeft"), title: "Align left", active: fmt.aL, children: /* @__PURE__ */ jsx7(AlignIco, { t: "left" }) }),
+          show("alignCenter") && /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("justifyCenter"), title: "Align center", active: fmt.aC, children: /* @__PURE__ */ jsx7(AlignIco, { t: "center" }) }),
+          show("alignRight") && /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("justifyRight"), title: "Align right", active: fmt.aR, children: /* @__PURE__ */ jsx7(AlignIco, { t: "right" }) }),
+          show("alignJustify") && /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("justifyFull"), title: "Justify", active: fmt.aJ, children: /* @__PURE__ */ jsx7(AlignIco, { t: "justify" }) }),
+          (show("alignLeft") || show("alignCenter") || show("alignRight") || show("alignJustify")) && (show("bulletList") || show("numberedList") || show("indent") || show("outdent")) && /* @__PURE__ */ jsx7(Sep, {}),
+          show("bulletList") && /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("insertUnorderedList"), title: "Bullet list", active: fmt.ul, children: /* @__PURE__ */ jsx7(IcoUL, {}) }),
+          show("numberedList") && /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("insertOrderedList"), title: "Numbered list", active: fmt.ol, children: /* @__PURE__ */ jsx7(IcoOL, {}) }),
+          show("indent") && /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("indent"), title: "Indent (Tab)", children: /* @__PURE__ */ jsx7(IcoIndent, {}) }),
+          show("outdent") && /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("outdent"), title: "Outdent (Shift+Tab)", children: /* @__PURE__ */ jsx7(IcoOutdent, {}) }),
+          (show("bulletList") || show("numberedList") || show("indent") || show("outdent")) && (show("link") || show("codeBlock") || show("image") || show("table")) && /* @__PURE__ */ jsx7(Sep, {}),
+          show("link") && /* @__PURE__ */ jsx7(Btn, { onClick: openLinkBar, title: "Insert link", active: linkBar, children: /* @__PURE__ */ jsx7(IcoLink, {}) }),
+          show("codeBlock") && /* @__PURE__ */ jsx7(Btn, { onClick: insertCodeBlock, title: "Code block", children: /* @__PURE__ */ jsx7(IcoCode, {}) }),
+          show("image") && /* @__PURE__ */ jsxs6("div", { style: { position: "relative", display: "inline-flex" }, children: [
             showImagePicker && /* @__PURE__ */ jsx7("div", { style: backdrop, onMouseDown: () => setShowImagePicker(false) }),
             /* @__PURE__ */ jsx7(Btn, { onClick: () => setShowImagePicker((v) => !v), title: "Insert image", active: showImagePicker, children: /* @__PURE__ */ jsx7(IcoImage, {}) }),
             showImagePicker && /* @__PURE__ */ jsx7("div", { style: { position: "absolute", top: 34, left: 0, zIndex: 200 }, children: /* @__PURE__ */ jsx7(
@@ -1531,7 +1538,7 @@ function RichTextEditor({ value, onChange }) {
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsxs6("div", { style: { position: "relative", display: "inline-flex" }, children: [
+          show("table") && /* @__PURE__ */ jsxs6("div", { style: { position: "relative", display: "inline-flex" }, children: [
             showTable && /* @__PURE__ */ jsx7("div", { style: backdrop, onMouseDown: () => setShowTable(false) }),
             /* @__PURE__ */ jsx7(Btn, { onClick: () => setShowTable((v) => !v), title: "Insert table", active: showTable || !!fmt.inTable, children: /* @__PURE__ */ jsx7(IcoTable, {}) }),
             showTable && /* @__PURE__ */ jsx7("div", { style: { position: "absolute", top: 34, left: 0, zIndex: 200 }, children: /* @__PURE__ */ jsx7(
@@ -1545,19 +1552,10 @@ function RichTextEditor({ value, onChange }) {
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx7(Sep, {})
+          (show("link") || show("codeBlock") || show("image") || show("table")) && (show("html") || show("copyHtml")) && /* @__PURE__ */ jsx7(Sep, {})
         ] }),
-        /* @__PURE__ */ jsx7(
-          Btn,
-          {
-            onClick: isCode ? toVisual : toCode,
-            title: "Toggle HTML",
-            active: isCode,
-            style: { fontSize: 12, fontWeight: 600, letterSpacing: "0.03em", padding: "0 8px" },
-            children: isCode ? "Visual" : "HTML"
-          }
-        ),
-        /* @__PURE__ */ jsx7(Btn, { onClick: copyHtml, title: "Copy HTML", children: /* @__PURE__ */ jsx7(IcoCopy, {}) }),
+        show("html") && /* @__PURE__ */ jsx7(Btn, { onClick: isCode ? toVisual : toCode, title: "Toggle HTML", active: isCode, style: { fontSize: 12, fontWeight: 600, letterSpacing: "0.03em", padding: "0 8px" }, children: isCode ? "Visual" : "HTML" }),
+        show("copyHtml") && /* @__PURE__ */ jsx7(Btn, { onClick: copyHtml, title: "Copy HTML", children: /* @__PURE__ */ jsx7(IcoCopy, {}) }),
         /* @__PURE__ */ jsx7("div", { style: { flex: 1 } }),
         /* @__PURE__ */ jsxs6("span", { style: { fontSize: 12, color: "#aaa" }, children: [
           words,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@malaya_jeeva/rich-text-editor",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Custom React Rich Text Editor",
   "main": "dist/index.js",
   "module": "dist/index.mjs",