rte-builder 2.0.4 → 2.0.6

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
@@ -1595,6 +1582,7 @@ var init_Indent = __esm({
 
 // src/adapters/tiptap/TipTapToolbar.tsx
 import { useState, useRef, useEffect } from "react";
+import { CodeXml } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var FONT_FAMILIES, FONT_SIZES, LINE_HEIGHTS, EmojiPicker, TipTapToolbar;
 var init_TipTapToolbar = __esm({
@@ -1697,7 +1685,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" : ""}`,
@@ -1781,27 +1772,43 @@ var init_TipTapToolbar = __esm({
             return /* @__PURE__ */ jsx(
               ToolbarButton3,
               {
-                onClick: () => editor.chain().focus().toggleCodeBlock().run(),
-                active: editor.isActive("codeBlock"),
-                title: "Code Block",
-                children: /* @__PURE__ */ jsxs(
-                  "svg",
-                  {
-                    width: "18",
-                    height: "18",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    children: [
-                      /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-                      /* @__PURE__ */ jsx("polyline", { points: "9 8 5 12 9 16" }),
-                      /* @__PURE__ */ jsx("polyline", { points: "15 8 19 12 15 16" })
-                    ]
+                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 (HTML Source)",
+                children: /* @__PURE__ */ jsx(CodeXml, { size: 18 })
               },
               "codeBlock"
             );
@@ -2282,7 +2289,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) });
     };
   }
 });
@@ -2587,203 +2595,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";
@@ -3695,12 +3506,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",
@@ -4040,7 +3851,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);
@@ -6190,7 +6001,6 @@ import {
   Underline as Underline2,
   Strikethrough,
   Code as Code2,
-  FileCode,
   Subscript as Subscript2,
   Superscript as Superscript2,
   RemoveFormatting,
@@ -6217,7 +6027,8 @@ import {
   Minimize,
   Printer,
   Undo,
-  Redo
+  Redo,
+  CodeXml as CodeXml2
 } from "lucide-react";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var FONT_FAMILIES2 = [
@@ -6316,7 +6127,10 @@ var Toolbar = ({
     {
       ref: buttonRef,
       type: "button",
-      onClick,
+      onMouseDown: (e) => {
+        e.preventDefault();
+        onClick();
+      },
       disabled,
       title,
       className: `rte-builder-toolbar-btn ${active ? "active" : ""} ${disabled ? "disabled" : ""}`,
@@ -6384,10 +6198,43 @@ 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",
-            children: /* @__PURE__ */ jsx8(FileCode, { size: 18 })
+            title: "Code Block (HTML Source)",
+            children: /* @__PURE__ */ jsx8(CodeXml2, { size: 18 })
           },
           "codeBlock"
         );
@@ -6780,7 +6627,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