rte-builder 2.0.5 → 2.0.7

package/dist/index.mjs

@@ -1,9 +1,7 @@
 "use client";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
@@ -14,9 +12,6 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
-var __commonJS = (cb, mod) => function __require2() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -29,14 +24,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/extensions/FontSize.ts
@@ -1585,8 +1572,18 @@ var init_Indent = __esm({
       },
       addKeyboardShortcuts() {
         return {
-          Tab: () => this.editor.commands.indent(),
-          "Shift-Tab": () => this.editor.commands.outdent()
+          Tab: () => {
+            if (this.editor.isActive("listItem")) {
+              return false;
+            }
+            return this.editor.commands.indent();
+          },
+          "Shift-Tab": () => {
+            if (this.editor.isActive("listItem")) {
+              return false;
+            }
+            return this.editor.commands.outdent();
+          }
         };
       }
     });
@@ -1698,7 +1695,10 @@ var init_TipTapToolbar = __esm({
         {
           ref: buttonRef,
           type: "button",
-          onClick,
+          onMouseDown: (e) => {
+            e.preventDefault();
+            onClick();
+          },
           disabled,
           title,
           className: `rte-builder-toolbar-btn ${active ? "active" : ""} ${disabled ? "disabled" : ""}`,
@@ -1782,9 +1782,42 @@ var init_TipTapToolbar = __esm({
             return /* @__PURE__ */ jsx(
               ToolbarButton3,
               {
-                onClick: () => editor.chain().focus().toggleCodeBlock().run(),
+                onClick: () => {
+                  if (editor.isActive("codeBlock")) {
+                    let htmlSource = "";
+                    editor.state.doc.descendants((node) => {
+                      if (node.type.name === "codeBlock") {
+                        htmlSource = node.textContent;
+                        return false;
+                      }
+                    });
+                    htmlSource = htmlSource.trim();
+                    if (htmlSource) {
+                      editor.commands.setContent(htmlSource, true, {
+                        preserveWhitespace: false
+                      });
+                    } else {
+                      editor.commands.clearContent(true);
+                    }
+                    editor.commands.focus();
+                  } else {
+                    const currentHTML = editor.getHTML();
+                    const isEmptyContent = !currentHTML || currentHTML === "<p></p>" || currentHTML.trim() === "";
+                    const codeBlockContent = isEmptyContent ? { type: "doc", content: [{ type: "codeBlock" }] } : {
+                      type: "doc",
+                      content: [
+                        {
+                          type: "codeBlock",
+                          content: [{ type: "text", text: currentHTML }]
+                        }
+                      ]
+                    };
+                    editor.commands.setContent(codeBlockContent, false);
+                    editor.commands.focus();
+                  }
+                },
                 active: editor.isActive("codeBlock"),
-                title: "Code Block",
+                title: "Code Block (HTML Source)",
                 children: /* @__PURE__ */ jsx(CodeXml, { size: 18 })
               },
               "codeBlock"
@@ -1885,6 +1918,16 @@ var init_TipTapToolbar = __esm({
           case "textColor":
             const textPresetColors = ["#11a161", "#85144b", "#ff851b", "#b10dc9"];
             return /* @__PURE__ */ jsxs("span", { className: "rte-builder-toolbar-color-group", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "rte-builder-color-preset rte-builder-color-preset-none",
+                  onClick: () => editor.chain().focus().unsetColor().run(),
+                  title: "Text Color: None (Reset)",
+                  type: "button"
+                },
+                "text-none"
+              ),
               textPresetColors.map((color) => /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -2266,7 +2309,8 @@ var init_TipTapToolbar = __esm({
             return null;
         }
       };
-      return /* @__PURE__ */ jsx("div", { className: "rte-builder-toolbar", children: buttons.map(renderButton) });
+      const isSourceMode = editor.isActive("codeBlock");
+      return /* @__PURE__ */ jsx("div", { className: `rte-builder-toolbar${isSourceMode ? " rte-builder-toolbar-source-mode" : ""}`, children: buttons.map(renderButton) });
     };
   }
 });
@@ -2434,6 +2478,12 @@ var init_TipTapEditorComponent = __esm({
             attributes: {
               class: "rte-builder-content",
               style: `min-height: ${minHeight}px; ${maxHeight ? `max-height: ${maxHeight}px;` : ""}`
+            },
+            transformPastedHTML(html) {
+              return html.replace(/(<br\s*\/?>\s*){3,}/gi, "<br><br>").replace(/(<p>\s*<\/p>\s*){2,}/gi, "<p></p>").replace(/>\s{2,}</g, "> <").replace(/(&nbsp;\s*){2,}/g, "&nbsp;").replace(/[\u200B\u200C\u200D\uFEFF]/g, "").replace(
+                /style="[^"]*"/gi,
+                (match) => match.replace(/margin(-top|-bottom):\s*[\d.]+(px|em|rem|pt)\s*;?/gi, "").replace(/padding(-top|-bottom):\s*[\d.]+(px|em|rem|pt)\s*;?/gi, "").replace(/line-height:\s*[\d.]+(px|em|rem|pt|%)?\s*;?/gi, "").replace(/style="\s*"/gi, "")
+              );
             }
           },
           ...editorConfig
@@ -2571,203 +2621,6 @@ var init_TipTapEditorComponent = __esm({
   }
 });
 
-// node_modules/is-hotkey/lib/index.js
-var require_lib = __commonJS({
-  "node_modules/is-hotkey/lib/index.js"(exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", {
-      value: true
-    });
-    var IS_MAC = typeof window != "undefined" && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
-    var MODIFIERS = {
-      alt: "altKey",
-      control: "ctrlKey",
-      meta: "metaKey",
-      shift: "shiftKey"
-    };
-    var ALIASES = {
-      add: "+",
-      break: "pause",
-      cmd: "meta",
-      command: "meta",
-      ctl: "control",
-      ctrl: "control",
-      del: "delete",
-      down: "arrowdown",
-      esc: "escape",
-      ins: "insert",
-      left: "arrowleft",
-      mod: IS_MAC ? "meta" : "control",
-      opt: "alt",
-      option: "alt",
-      return: "enter",
-      right: "arrowright",
-      space: " ",
-      spacebar: " ",
-      up: "arrowup",
-      win: "meta",
-      windows: "meta"
-    };
-    var CODES = {
-      backspace: 8,
-      tab: 9,
-      enter: 13,
-      shift: 16,
-      control: 17,
-      alt: 18,
-      pause: 19,
-      capslock: 20,
-      escape: 27,
-      " ": 32,
-      pageup: 33,
-      pagedown: 34,
-      end: 35,
-      home: 36,
-      arrowleft: 37,
-      arrowup: 38,
-      arrowright: 39,
-      arrowdown: 40,
-      insert: 45,
-      delete: 46,
-      meta: 91,
-      numlock: 144,
-      scrolllock: 145,
-      ";": 186,
-      "=": 187,
-      ",": 188,
-      "-": 189,
-      ".": 190,
-      "/": 191,
-      "`": 192,
-      "[": 219,
-      "\\": 220,
-      "]": 221,
-      "'": 222
-    };
-    for (f = 1; f < 20; f++) {
-      CODES["f" + f] = 111 + f;
-    }
-    var f;
-    function isHotkey2(hotkey, options, event) {
-      if (options && !("byKey" in options)) {
-        event = options;
-        options = null;
-      }
-      if (!Array.isArray(hotkey)) {
-        hotkey = [hotkey];
-      }
-      var array = hotkey.map(function(string) {
-        return parseHotkey(string, options);
-      });
-      var check = function check2(e) {
-        return array.some(function(object) {
-          return compareHotkey(object, e);
-        });
-      };
-      var ret = event == null ? check : check(event);
-      return ret;
-    }
-    function isCodeHotkey(hotkey, event) {
-      return isHotkey2(hotkey, event);
-    }
-    function isKeyHotkey(hotkey, event) {
-      return isHotkey2(hotkey, { byKey: true }, event);
-    }
-    function parseHotkey(hotkey, options) {
-      var byKey = options && options.byKey;
-      var ret = {};
-      hotkey = hotkey.replace("++", "+add");
-      var values = hotkey.split("+");
-      var length = values.length;
-      for (var k in MODIFIERS) {
-        ret[MODIFIERS[k]] = false;
-      }
-      var _iteratorNormalCompletion = true;
-      var _didIteratorError = false;
-      var _iteratorError = void 0;
-      try {
-        for (var _iterator = values[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-          var value = _step.value;
-          var optional = value.endsWith("?") && value.length > 1;
-          if (optional) {
-            value = value.slice(0, -1);
-          }
-          var name = toKeyName(value);
-          var modifier = MODIFIERS[name];
-          if (value.length > 1 && !modifier && !ALIASES[value] && !CODES[name]) {
-            throw new TypeError('Unknown modifier: "' + value + '"');
-          }
-          if (length === 1 || !modifier) {
-            if (byKey) {
-              ret.key = name;
-            } else {
-              ret.which = toKeyCode(value);
-            }
-          }
-          if (modifier) {
-            ret[modifier] = optional ? null : true;
-          }
-        }
-      } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion && _iterator.return) {
-            _iterator.return();
-          }
-        } finally {
-          if (_didIteratorError) {
-            throw _iteratorError;
-          }
-        }
-      }
-      return ret;
-    }
-    function compareHotkey(object, event) {
-      for (var key in object) {
-        var expected = object[key];
-        var actual = void 0;
-        if (expected == null) {
-          continue;
-        }
-        if (key === "key" && event.key != null) {
-          actual = event.key.toLowerCase();
-        } else if (key === "which") {
-          actual = expected === 91 && event.which === 93 ? 91 : event.which;
-        } else {
-          actual = event[key];
-        }
-        if (actual == null && expected === false) {
-          continue;
-        }
-        if (actual !== expected) {
-          return false;
-        }
-      }
-      return true;
-    }
-    function toKeyCode(name) {
-      name = toKeyName(name);
-      var code = CODES[name] || name.toUpperCase().charCodeAt(0);
-      return code;
-    }
-    function toKeyName(name) {
-      name = name.toLowerCase();
-      name = ALIASES[name] || name;
-      return name;
-    }
-    exports.default = isHotkey2;
-    exports.isHotkey = isHotkey2;
-    exports.isCodeHotkey = isCodeHotkey;
-    exports.isKeyHotkey = isKeyHotkey;
-    exports.parseHotkey = parseHotkey;
-    exports.compareHotkey = compareHotkey;
-    exports.toKeyCode = toKeyCode;
-    exports.toKeyName = toKeyName;
-  }
-});
-
 // src/adapters/slate/SlateToolbar.tsx
 import { useCallback as useCallback2, useState as useState2, useRef as useRef2, useEffect as useEffect3 } from "react";
 import { Editor, Transforms, Element as SlateElement } from "slate";
@@ -3679,12 +3532,12 @@ import {
 import { createEditor, Editor as Editor2, Transforms as Transforms2, Text as Text2, Element as SlateElement2, Node as Node2 } from "slate";
 import { Slate, Editable, withReact, ReactEditor as ReactEditor2 } from "slate-react";
 import { withHistory, HistoryEditor } from "slate-history";
+import isHotkey from "is-hotkey";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var import_is_hotkey, HOTKEYS, LIST_TYPES, TEXT_ALIGN_TYPES, isMarkActive, isBlockActive, toggleMark, toggleBlock, serializeToHtml, serializeNode, escapeHtml, deserializeFromHtml, deserializeElement, renderElement, renderLeaf, withInlines, SlateEditorComponent, SlateEditorComponent_default;
+var HOTKEYS, LIST_TYPES, TEXT_ALIGN_TYPES, isMarkActive, isBlockActive, toggleMark, toggleBlock, serializeToHtml, serializeNode, escapeHtml, deserializeFromHtml, deserializeElement, renderElement, renderLeaf, withInlines, SlateEditorComponent, SlateEditorComponent_default;
 var init_SlateEditorComponent = __esm({
   "src/adapters/slate/SlateEditorComponent.tsx"() {
     "use strict";
-    import_is_hotkey = __toESM(require_lib());
     init_SlateToolbar();
     HOTKEYS = {
       "mod+b": "bold",
@@ -4024,7 +3877,7 @@ var init_SlateEditorComponent = __esm({
         const handleKeyDown = useCallback3(
           (event) => {
             for (const hotkey in HOTKEYS) {
-              if ((0, import_is_hotkey.default)(hotkey, event)) {
+              if (isHotkey(hotkey, event)) {
                 event.preventDefault();
                 const mark = HOTKEYS[hotkey];
                 toggleMark(editor, mark);
@@ -6300,7 +6153,10 @@ var Toolbar = ({
     {
       ref: buttonRef,
       type: "button",
-      onClick,
+      onMouseDown: (e) => {
+        e.preventDefault();
+        onClick();
+      },
       disabled,
       title,
       className: `rte-builder-toolbar-btn ${active ? "active" : ""} ${disabled ? "disabled" : ""}`,
@@ -6368,9 +6224,42 @@ var Toolbar = ({
         return /* @__PURE__ */ jsx8(
           ToolbarButton3,
           {
-            onClick: () => editor.chain().focus().toggleCodeBlock().run(),
+            onClick: () => {
+              if (editor.isActive("codeBlock")) {
+                let htmlSource = "";
+                editor.state.doc.descendants((node) => {
+                  if (node.type.name === "codeBlock") {
+                    htmlSource = node.textContent;
+                    return false;
+                  }
+                });
+                htmlSource = htmlSource.trim();
+                if (htmlSource) {
+                  editor.commands.setContent(htmlSource, true, {
+                    preserveWhitespace: false
+                  });
+                } else {
+                  editor.commands.clearContent(true);
+                }
+                editor.commands.focus();
+              } else {
+                const currentHTML = editor.getHTML();
+                const isEmptyContent = !currentHTML || currentHTML === "<p></p>" || currentHTML.trim() === "";
+                const codeBlockContent = isEmptyContent ? { type: "doc", content: [{ type: "codeBlock" }] } : {
+                  type: "doc",
+                  content: [
+                    {
+                      type: "codeBlock",
+                      content: [{ type: "text", text: currentHTML }]
+                    }
+                  ]
+                };
+                editor.commands.setContent(codeBlockContent, false);
+                editor.commands.focus();
+              }
+            },
             active: editor.isActive("codeBlock"),
-            title: "Code Block",
+            title: "Code Block (HTML Source)",
             children: /* @__PURE__ */ jsx8(CodeXml2, { size: 18 })
           },
           "codeBlock"
@@ -6469,17 +6358,29 @@ var Toolbar = ({
           "lineHeight"
         );
       case "textColor":
-        return /* @__PURE__ */ jsx8("span", { className: "rte-builder-toolbar-color", children: /* @__PURE__ */ jsxs8("label", { title: "Text Color", children: [
-          /* @__PURE__ */ jsx8(Type, { size: 18 }),
+        return /* @__PURE__ */ jsxs8("span", { className: "rte-builder-toolbar-color-group", children: [
           /* @__PURE__ */ jsx8(
-            "input",
+            "button",
             {
-              type: "color",
-              onChange: (e) => editor.chain().focus().setColor(e.target.value).run(),
-              value: editor.getAttributes("textStyle").color || "#000000"
-            }
-          )
-        ] }) }, "textColor");
+              className: "rte-builder-color-preset rte-builder-color-preset-none",
+              onClick: () => editor.chain().focus().unsetColor().run(),
+              title: "Text Color: None (Reset)",
+              type: "button"
+            },
+            "text-none"
+          ),
+          /* @__PURE__ */ jsx8("span", { className: "rte-builder-toolbar-color", children: /* @__PURE__ */ jsxs8("label", { title: "Text Color", children: [
+            /* @__PURE__ */ jsx8(Type, { size: 18 }),
+            /* @__PURE__ */ jsx8(
+              "input",
+              {
+                type: "color",
+                onChange: (e) => editor.chain().focus().setColor(e.target.value).run(),
+                value: editor.getAttributes("textStyle").color || "#000000"
+              }
+            )
+          ] }) })
+        ] }, "textColor");
       case "backgroundColor":
         return /* @__PURE__ */ jsx8("span", { className: "rte-builder-toolbar-color", children: /* @__PURE__ */ jsxs8("label", { title: "Background Color", children: [
           /* @__PURE__ */ jsx8(Highlighter, { size: 18 }),
@@ -6764,7 +6665,8 @@ var Toolbar = ({
         return null;
     }
   };
-  return /* @__PURE__ */ jsx8("div", { className: "rte-builder-toolbar", children: buttons.map(renderButton) });
+  const isSourceMode = editor.isActive("codeBlock");
+  return /* @__PURE__ */ jsx8("div", { className: `rte-builder-toolbar${isSourceMode ? " rte-builder-toolbar-source-mode" : ""}`, children: buttons.map(renderButton) });
 };
 
 // src/components/RichTextEditor.tsx