@brevitaz/brv-text-editor 1.0.0 → 1.1.0

package/dist/brv-text-editor.es.js

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useRef, useState, useDebugValue, useEffect, forwardRef, useLayoutEffect, createContext, useContext, createElement } from "react";
+import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
+import React, { useRef, useState, useDebugValue, useEffect, forwardRef, useLayoutEffect, createContext, useContext, createElement, useMemo } from "react";
 import ReactDOM from "react-dom";
 function OrderedMap(content) {
   this.content = content;
@@ -16723,7 +16723,7 @@ function requireWithSelector_development() {
       }
       var objectIs = typeof Object.is === "function" ? Object.is : is;
       var useSyncExternalStore = shim2.useSyncExternalStore;
-      var useRef2 = React$1.useRef, useEffect2 = React$1.useEffect, useMemo = React$1.useMemo, useDebugValue2 = React$1.useDebugValue;
+      var useRef2 = React$1.useRef, useEffect2 = React$1.useEffect, useMemo2 = React$1.useMemo, useDebugValue2 = React$1.useDebugValue;
       function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
         var instRef = useRef2(null);
         var inst;
@@ -16736,7 +16736,7 @@ function requireWithSelector_development() {
         } else {
           inst = instRef.current;
         }
-        var _useMemo = useMemo(function() {
+        var _useMemo = useMemo2(function() {
           var hasMemo = false;
           var memoizedSnapshot;
           var memoizedSelection;
@@ -20499,18 +20499,111 @@ const TextAlign = Extension.create({
     };
   }
 });
+const CALLOUT_TYPES = [
+  { key: "info", label: "Info", icon: "ℹ️", color: "#2563eb" },
+  { key: "success", label: "Success", icon: "✅", color: "#16a34a" },
+  { key: "warning", label: "Warning", icon: "⚠️", color: "#d97706" },
+  { key: "danger", label: "Danger", icon: "🚨", color: "#dc2626" },
+  { key: "tip", label: "Tip", icon: "💡", color: "#7c3aed" },
+  { key: "note", label: "Note", icon: "📝", color: "#64748b" }
+];
+const Callout = Node2.create({
+  name: "callout",
+  group: "block",
+  content: "block+",
+  defining: true,
+  addAttributes() {
+    return {
+      type: {
+        default: "info",
+        parseHTML: (el) => el.getAttribute("data-callout") || "info",
+        renderHTML: (attrs) => ({ "data-callout": attrs.type })
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-callout]"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, { class: `rte-callout rte-callout--${HTMLAttributes["data-callout"] || "info"}` }),
+      0
+    ];
+  },
+  addCommands() {
+    return {
+      setCallout: (type = "info") => ({ commands: commands2 }) => {
+        return commands2.wrapIn(this.name, { type });
+      },
+      toggleCallout: (type = "info") => ({ commands: commands2, editor }) => {
+        if (editor.isActive(this.name, { type })) {
+          return commands2.lift(this.name);
+        }
+        if (editor.isActive(this.name)) {
+          return commands2.updateAttributes(this.name, { type });
+        }
+        return commands2.wrapIn(this.name, { type });
+      },
+      unsetCallout: () => ({ commands: commands2 }) => {
+        return commands2.lift(this.name);
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      // Allow backspace at the start to unwrap the callout
+      Backspace: ({ editor }) => {
+        const { $anchor } = editor.state.selection;
+        if ($anchor.parentOffset !== 0) return false;
+        if (!editor.isActive(this.name)) return false;
+        return editor.commands.lift(this.name);
+      }
+    };
+  }
+});
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 const mergeClasses = (...classes) => classes.filter((className, index, array) => {
   return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
 }).join(" ").trim();
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+/**
+ * @license lucide-react v0.576.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+/**
+ * @license lucide-react v0.576.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+/**
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -20527,7 +20620,21 @@ var defaultAttributes = {
   strokeLinejoin: "round"
 };
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+  return false;
+};
+/**
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -20542,28 +20649,27 @@ const Icon = forwardRef(
     children,
     iconNode,
     ...rest
-  }, ref) => {
-    return createElement(
-      "svg",
-      {
-        ref,
-        ...defaultAttributes,
-        width: size,
-        height: size,
-        stroke: color,
-        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
-        className: mergeClasses("lucide", className),
-        ...rest
-      },
-      [
-        ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
-        ...Array.isArray(children) ? children : [children]
-      ]
-    );
-  }
+  }, ref) => createElement(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
 );
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -20573,164 +20679,161 @@ const createLucideIcon = (iconName, iconNode) => {
     ({ className, ...props }, ref) => createElement(Icon, {
       ref,
       iconNode,
-      className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
       ...props
     })
   );
-  Component.displayName = `${iconName}`;
+  Component.displayName = toPascalCase(iconName);
   return Component;
 };
 /**
- * @license lucide-react v0.468.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const AlignCenter = createLucideIcon("AlignCenter", [
-  ["path", { d: "M17 12H7", key: "16if0g" }],
-  ["path", { d: "M19 18H5", key: "18s9l3" }],
-  ["path", { d: "M21 6H3", key: "1jwq7v" }]
-]);
-/**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const AlignLeft = createLucideIcon("AlignLeft", [
-  ["path", { d: "M15 12H3", key: "6jk70r" }],
-  ["path", { d: "M17 18H3", key: "1amg6g" }],
-  ["path", { d: "M21 6H3", key: "1jwq7v" }]
-]);
-/**
- * @license lucide-react v0.468.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const AlignRight = createLucideIcon("AlignRight", [
-  ["path", { d: "M21 12H9", key: "dn1m92" }],
-  ["path", { d: "M21 18H7", key: "1ygte8" }],
-  ["path", { d: "M21 6H3", key: "1jwq7v" }]
-]);
-/**
- * @license lucide-react v0.468.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const Bold = createLucideIcon("Bold", [
+const __iconNode$j = [
   [
     "path",
     { d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8", key: "mg9rjx" }
   ]
-]);
+];
+const Bold = createLucideIcon("bold", __iconNode$j);
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ChevronDown = createLucideIcon("ChevronDown", [
-  ["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]
-]);
+const __iconNode$i = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$i);
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Code = createLucideIcon("Code", [
-  ["polyline", { points: "16 18 22 12 16 6", key: "z7tu5w" }],
-  ["polyline", { points: "8 6 2 12 8 18", key: "1eg1df" }]
-]);
+const __iconNode$h = [
+  ["path", { d: "m16 18 6-6-6-6", key: "eg8j8" }],
+  ["path", { d: "m8 6-6 6 6 6", key: "ppft3o" }]
+];
+const Code = createLucideIcon("code", __iconNode$h);
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Image = createLucideIcon("Image", [
+const __iconNode$g = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
   ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
   ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
-]);
+];
+const Image = createLucideIcon("image", __iconNode$g);
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Italic = createLucideIcon("Italic", [
+const __iconNode$f = [
   ["line", { x1: "19", x2: "10", y1: "4", y2: "4", key: "15jd3p" }],
   ["line", { x1: "14", x2: "5", y1: "20", y2: "20", key: "bu0au3" }],
   ["line", { x1: "15", x2: "9", y1: "4", y2: "20", key: "uljnxc" }]
-]);
+];
+const Italic = createLucideIcon("italic", __iconNode$f);
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Link = createLucideIcon("Link", [
+const __iconNode$e = [
   ["path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71", key: "1cjeqo" }],
   ["path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71", key: "19qd67" }]
-]);
+];
+const Link = createLucideIcon("link", __iconNode$e);
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ListChecks = createLucideIcon("ListChecks", [
-  ["path", { d: "m3 17 2 2 4-4", key: "1jhpwq" }],
-  ["path", { d: "m3 7 2 2 4-4", key: "1obspn" }],
-  ["path", { d: "M13 6h8", key: "15sg57" }],
+const __iconNode$d = [
+  ["path", { d: "M13 5h8", key: "a7qcls" }],
   ["path", { d: "M13 12h8", key: "h98zly" }],
-  ["path", { d: "M13 18h8", key: "oe0vm4" }]
-]);
+  ["path", { d: "M13 19h8", key: "c3s6r1" }],
+  ["path", { d: "m3 17 2 2 4-4", key: "1jhpwq" }],
+  ["path", { d: "m3 7 2 2 4-4", key: "1obspn" }]
+];
+const ListChecks = createLucideIcon("list-checks", __iconNode$d);
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ListOrdered = createLucideIcon("ListOrdered", [
-  ["path", { d: "M10 12h11", key: "6m4ad9" }],
-  ["path", { d: "M10 18h11", key: "11hvi2" }],
-  ["path", { d: "M10 6h11", key: "c7qv1k" }],
-  ["path", { d: "M4 10h2", key: "16xx2s" }],
-  ["path", { d: "M4 6h1v4", key: "cnovpq" }],
-  ["path", { d: "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1", key: "m9a95d" }]
-]);
+const __iconNode$c = [
+  ["path", { d: "M11 5h10", key: "1cz7ny" }],
+  ["path", { d: "M11 12h10", key: "1438ji" }],
+  ["path", { d: "M11 19h10", key: "11t30w" }],
+  ["path", { d: "M4 4h1v5", key: "10yrso" }],
+  ["path", { d: "M4 9h2", key: "r1h2o0" }],
+  ["path", { d: "M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02", key: "xtkcd5" }]
+];
+const ListOrdered = createLucideIcon("list-ordered", __iconNode$c);
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const List = createLucideIcon("List", [
+const __iconNode$b = [
+  ["path", { d: "M3 5h.01", key: "18ugdj" }],
   ["path", { d: "M3 12h.01", key: "nlz23k" }],
-  ["path", { d: "M3 18h.01", key: "1tta3j" }],
-  ["path", { d: "M3 6h.01", key: "1rqtza" }],
+  ["path", { d: "M3 19h.01", key: "noohij" }],
+  ["path", { d: "M8 5h13", key: "1pao27" }],
   ["path", { d: "M8 12h13", key: "1za7za" }],
-  ["path", { d: "M8 18h13", key: "1lx6n3" }],
-  ["path", { d: "M8 6h13", key: "ik3vkj" }]
-]);
+  ["path", { d: "M8 19h13", key: "m83p4d" }]
+];
+const List = createLucideIcon("list", __iconNode$b);
+/**
+ * @license lucide-react v0.576.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$a = [
+  [
+    "path",
+    {
+      d: "M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z",
+      key: "18887p"
+    }
+  ],
+  ["path", { d: "M12 15h.01", key: "q59x07" }],
+  ["path", { d: "M12 7v4", key: "xawao1" }]
+];
+const MessageSquareWarning = createLucideIcon("message-square-warning", __iconNode$a);
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Minus = createLucideIcon("Minus", [["path", { d: "M5 12h14", key: "1ays0h" }]]);
+const __iconNode$9 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+const Minus = createLucideIcon("minus", __iconNode$9);
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Quote = createLucideIcon("Quote", [
+const __iconNode$8 = [
   [
     "path",
     {
@@ -20745,59 +20848,111 @@ const Quote = createLucideIcon("Quote", [
       key: "1ymkrd"
     }
   ]
-]);
+];
+const Quote = createLucideIcon("quote", __iconNode$8);
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Redo = createLucideIcon("Redo", [
+const __iconNode$7 = [
   ["path", { d: "M21 7v6h-6", key: "3ptur4" }],
   ["path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7", key: "1kgawr" }]
-]);
+];
+const Redo = createLucideIcon("redo", __iconNode$7);
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Strikethrough = createLucideIcon("Strikethrough", [
+const __iconNode$6 = [
   ["path", { d: "M16 4H9a3 3 0 0 0-2.83 4", key: "43sutm" }],
   ["path", { d: "M14 12a4 4 0 0 1 0 8H6", key: "nlfj13" }],
   ["line", { x1: "4", x2: "20", y1: "12", y2: "12", key: "1e0a9i" }]
-]);
+];
+const Strikethrough = createLucideIcon("strikethrough", __iconNode$6);
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Type = createLucideIcon("Type", [
-  ["polyline", { points: "4 7 4 4 20 4 20 7", key: "1nosan" }],
-  ["line", { x1: "9", x2: "15", y1: "20", y2: "20", key: "swin9y" }],
-  ["line", { x1: "12", x2: "12", y1: "4", y2: "20", key: "1tx1rr" }]
-]);
+const __iconNode$5 = [
+  ["path", { d: "M21 5H3", key: "1fi0y6" }],
+  ["path", { d: "M17 12H7", key: "16if0g" }],
+  ["path", { d: "M19 19H5", key: "vjpgq2" }]
+];
+const TextAlignCenter = createLucideIcon("text-align-center", __iconNode$5);
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Underline = createLucideIcon("Underline", [
+const __iconNode$4 = [
+  ["path", { d: "M21 5H3", key: "1fi0y6" }],
+  ["path", { d: "M21 12H9", key: "dn1m92" }],
+  ["path", { d: "M21 19H7", key: "4cu937" }]
+];
+const TextAlignEnd = createLucideIcon("text-align-end", __iconNode$4);
+/**
+ * @license lucide-react v0.576.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$3 = [
+  ["path", { d: "M21 5H3", key: "1fi0y6" }],
+  ["path", { d: "M15 12H3", key: "6jk70r" }],
+  ["path", { d: "M17 19H3", key: "z6ezky" }]
+];
+const TextAlignStart = createLucideIcon("text-align-start", __iconNode$3);
+/**
+ * @license lucide-react v0.576.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$2 = [
+  ["path", { d: "M12 4v16", key: "1654pz" }],
+  ["path", { d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2", key: "e0r10z" }],
+  ["path", { d: "M9 20h6", key: "s66wpe" }]
+];
+const Type = createLucideIcon("type", __iconNode$2);
+/**
+ * @license lucide-react v0.576.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$1 = [
   ["path", { d: "M6 4v6a6 6 0 0 0 12 0V4", key: "9kb039" }],
   ["line", { x1: "4", x2: "20", y1: "20", y2: "20", key: "nun2al" }]
-]);
+];
+const Underline = createLucideIcon("underline", __iconNode$1);
 /**
- * @license lucide-react v0.468.0 - ISC
+ * @license lucide-react v0.576.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Undo = createLucideIcon("Undo", [
+const __iconNode = [
   ["path", { d: "M3 7v6h6", key: "1v2h90" }],
   ["path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13", key: "1r6uu6" }]
-]);
+];
+const Undo = createLucideIcon("undo", __iconNode);
+const DEFAULT_TOOLBAR = {
+  headings: true,
+  formatting: true,
+  alignment: true,
+  lists: true,
+  blocks: true,
+  callouts: true,
+  media: true,
+  history: true
+};
 const RTE_THEMES = {
   /** Default — UnleashTeams teal/cyan palette */
   unleashteams: {},
@@ -21186,17 +21341,147 @@ function HeadingDropdown({ editor, onClose }) {
     }
   );
 }
-function Toolbar({ editor }) {
+function CalloutDropdown({ editor, onClose }) {
+  const activeType = CALLOUT_TYPES.find((ct) => editor.isActive("callout", { type: ct.key }));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: "calc(100% + 6px)",
+        left: 0,
+        zIndex: 200,
+        background: "var(--rte-surface)",
+        border: "1px solid var(--rte-border)",
+        borderRadius: "var(--rte-radius-lg)",
+        boxShadow: "var(--rte-dropdown-shadow)",
+        padding: "4px 0",
+        minWidth: 180
+      },
+      children: [
+        CALLOUT_TYPES.map((ct) => {
+          const isActive2 = (activeType == null ? void 0 : activeType.key) === ct.key;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                editor.chain().focus().toggleCallout(ct.key).run();
+                onClose();
+              },
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 10,
+                width: "100%",
+                textAlign: "left",
+                padding: "8px 14px",
+                border: "none",
+                background: isActive2 ? "var(--rte-btn-active-bg)" : "transparent",
+                cursor: "pointer",
+                fontSize: 13,
+                fontFamily: "var(--rte-font-family)",
+                fontWeight: isActive2 ? 600 : 400,
+                color: isActive2 ? "var(--rte-btn-active-color)" : "var(--rte-text)",
+                transition: "background 0.1s"
+              },
+              onMouseEnter: (e) => {
+                if (!isActive2) e.currentTarget.style.background = "var(--rte-btn-hover-bg)";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.background = isActive2 ? "var(--rte-btn-active-bg)" : "transparent";
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: 22,
+                      height: 22,
+                      borderRadius: 4,
+                      background: ct.color + "18",
+                      fontSize: 13,
+                      flexShrink: 0
+                    },
+                    children: ct.icon
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { children: ct.label }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      width: 8,
+                      height: 8,
+                      borderRadius: "50%",
+                      background: ct.color,
+                      marginLeft: "auto",
+                      flexShrink: 0
+                    }
+                  }
+                )
+              ]
+            },
+            ct.key
+          );
+        }),
+        activeType && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          /* @__PURE__ */ jsx("div", { style: { height: 1, background: "var(--rte-border-subtle)", margin: "4px 0" } }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                editor.chain().focus().unsetCallout().run();
+                onClose();
+              },
+              style: {
+                display: "block",
+                width: "100%",
+                textAlign: "left",
+                padding: "8px 14px",
+                border: "none",
+                background: "transparent",
+                cursor: "pointer",
+                fontSize: 13,
+                fontFamily: "var(--rte-font-family)",
+                fontWeight: 400,
+                color: "var(--rte-text-muted)",
+                transition: "background 0.1s"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.background = "var(--rte-btn-hover-bg)";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.background = "transparent";
+              },
+              children: "Remove callout"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function Toolbar({ editor, groups }) {
   const [showLinkDialog, setShowLinkDialog] = useState(false);
   const [showImageDialog, setShowImageDialog] = useState(false);
   const [showHeadingMenu, setShowHeadingMenu] = useState(false);
+  const [showCalloutMenu, setShowCalloutMenu] = useState(false);
   const toolbarRef = useRef(null);
+  const closeAll = () => {
+    setShowLinkDialog(false);
+    setShowImageDialog(false);
+    setShowHeadingMenu(false);
+    setShowCalloutMenu(false);
+  };
   useEffect(() => {
     const handler = (e) => {
       if (toolbarRef.current && !toolbarRef.current.contains(e.target)) {
-        setShowLinkDialog(false);
-        setShowImageDialog(false);
-        setShowHeadingMenu(false);
+        closeAll();
       }
     };
     document.addEventListener("mousedown", handler);
@@ -21224,7 +21509,147 @@ function Toolbar({ editor }) {
     setShowImageDialog(false);
   };
   const currentLink = editor.getAttributes("link").href || "";
-  return /* @__PURE__ */ jsxs(
+  const sections = [];
+  let needsDivider = false;
+  const addSection = (key, content) => {
+    if (!groups[key]) return;
+    if (needsDivider) sections.push(/* @__PURE__ */ jsx(Divider, {}, `div-${key}`));
+    sections.push(content);
+    needsDivider = true;
+  };
+  addSection("headings", /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx(Tooltip, { text: "Text style", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setShowHeadingMenu((v) => !v);
+          setShowLinkDialog(false);
+          setShowImageDialog(false);
+          setShowCalloutMenu(false);
+        },
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 3,
+          height: 28,
+          padding: "0 8px",
+          border: "1px solid var(--rte-border)",
+          borderRadius: "var(--rte-radius-sm)",
+          background: showHeadingMenu ? "var(--rte-btn-hover-bg)" : "var(--rte-surface)",
+          color: "var(--rte-text)",
+          cursor: "pointer",
+          fontSize: 12,
+          fontFamily: "var(--rte-font-family)",
+          fontWeight: 600,
+          minWidth: 52
+        },
+        children: [
+          getHeadingLabel(),
+          /* @__PURE__ */ jsx(ChevronDown, { size: 11 })
+        ]
+      }
+    ) }),
+    showHeadingMenu && /* @__PURE__ */ jsx(HeadingDropdown, { editor, onClose: () => setShowHeadingMenu(false) })
+  ] }, "headings"));
+  addSection("formatting", /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", gap: 2 }, children: [
+    /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: "Bold (⌘B)", children: /* @__PURE__ */ jsx(Bold, { size: 13, strokeWidth: 2.5 }) }),
+    /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: "Italic (⌘I)", children: /* @__PURE__ */ jsx(Italic, { size: 13, strokeWidth: 2.5 }) }),
+    /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleUnderline().run(), active: editor.isActive("underline"), title: "Underline (⌘U)", children: /* @__PURE__ */ jsx(Underline, { size: 13, strokeWidth: 2.5 }) }),
+    /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleStrike().run(), active: editor.isActive("strike"), title: "Strikethrough", children: /* @__PURE__ */ jsx(Strikethrough, { size: 13, strokeWidth: 2.5 }) }),
+    /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleCode().run(), active: editor.isActive("code"), title: "Inline code", children: /* @__PURE__ */ jsx(Code, { size: 13, strokeWidth: 2.5 }) })
+  ] }, "formatting"));
+  addSection("alignment", /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", gap: 2 }, children: [
+    /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign("left").run(), active: editor.isActive({ textAlign: "left" }), title: "Align left", children: /* @__PURE__ */ jsx(TextAlignStart, { size: 13 }) }),
+    /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign("center").run(), active: editor.isActive({ textAlign: "center" }), title: "Align center", children: /* @__PURE__ */ jsx(TextAlignCenter, { size: 13 }) }),
+    /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign("right").run(), active: editor.isActive({ textAlign: "right" }), title: "Align right", children: /* @__PURE__ */ jsx(TextAlignEnd, { size: 13 }) })
+  ] }, "alignment"));
+  addSection("lists", /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", gap: 2 }, children: [
+    /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBulletList().run(), active: editor.isActive("bulletList"), title: "Bullet list", children: /* @__PURE__ */ jsx(List, { size: 13 }) }),
+    /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleOrderedList().run(), active: editor.isActive("orderedList"), title: "Numbered list", children: /* @__PURE__ */ jsx(ListOrdered, { size: 13 }) }),
+    /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleTaskList().run(), active: editor.isActive("taskList"), title: "Task list", children: /* @__PURE__ */ jsx(ListChecks, { size: 13 }) })
+  ] }, "lists"));
+  addSection("blocks", /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", gap: 2 }, children: [
+    /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBlockquote().run(), active: editor.isActive("blockquote"), title: "Blockquote", children: /* @__PURE__ */ jsx(Quote, { size: 13 }) }),
+    /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleCodeBlock().run(), active: editor.isActive("codeBlock"), title: "Code block", children: /* @__PURE__ */ jsx("span", { style: { fontFamily: "monospace", fontSize: 11, fontWeight: 700, lineHeight: 1, color: "inherit" }, children: "<>" }) }),
+    /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().setHorizontalRule().run(), title: "Horizontal rule", children: /* @__PURE__ */ jsx(Minus, { size: 13 }) })
+  ] }, "blocks"));
+  addSection("callouts", /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx(Tooltip, { text: "Callout block", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setShowCalloutMenu((v) => !v);
+          setShowLinkDialog(false);
+          setShowImageDialog(false);
+          setShowHeadingMenu(false);
+        },
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 3,
+          height: 28,
+          padding: "0 8px",
+          border: "1px solid var(--rte-border)",
+          borderRadius: "var(--rte-radius-sm)",
+          background: showCalloutMenu || editor.isActive("callout") ? "var(--rte-btn-hover-bg)" : "var(--rte-surface)",
+          color: editor.isActive("callout") ? "var(--rte-btn-active-color)" : "var(--rte-text)",
+          cursor: "pointer",
+          fontSize: 12,
+          fontFamily: "var(--rte-font-family)",
+          fontWeight: 600,
+          minWidth: 36
+        },
+        children: [
+          /* @__PURE__ */ jsx(MessageSquareWarning, { size: 14 }),
+          /* @__PURE__ */ jsx(ChevronDown, { size: 11 })
+        ]
+      }
+    ) }),
+    showCalloutMenu && /* @__PURE__ */ jsx(CalloutDropdown, { editor, onClose: () => setShowCalloutMenu(false) })
+  ] }, "callouts"));
+  addSection("media", /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", gap: 2 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          onClick: () => {
+            setShowLinkDialog((v) => !v);
+            setShowImageDialog(false);
+            setShowHeadingMenu(false);
+            setShowCalloutMenu(false);
+          },
+          active: editor.isActive("link") || showLinkDialog,
+          title: "Insert link",
+          children: /* @__PURE__ */ jsx(Link, { size: 13 })
+        }
+      ),
+      showLinkDialog && /* @__PURE__ */ jsx(LinkDialog, { onConfirm: handleLinkInsert, onCancel: () => setShowLinkDialog(false), initialUrl: currentLink })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          onClick: () => {
+            setShowImageDialog((v) => !v);
+            setShowLinkDialog(false);
+            setShowHeadingMenu(false);
+            setShowCalloutMenu(false);
+          },
+          active: showImageDialog,
+          title: "Insert image",
+          children: /* @__PURE__ */ jsx(Image, { size: 13 })
+        }
+      ),
+      showImageDialog && /* @__PURE__ */ jsx(ImageDialog, { onConfirm: handleImageInsert, onCancel: () => setShowImageDialog(false) })
+    ] })
+  ] }, "media"));
+  addSection("history", /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", gap: 2 }, children: [
+    /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: "Undo (⌘Z)", children: /* @__PURE__ */ jsx(Undo, { size: 13 }) }),
+    /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: "Redo (⌘⇧Z)", children: /* @__PURE__ */ jsx(Redo, { size: 13 }) })
+  ] }, "history"));
+  return /* @__PURE__ */ jsx(
     "div",
     {
       ref: toolbarRef,
@@ -21240,96 +21665,7 @@ function Toolbar({ editor }) {
         position: "relative",
         userSelect: "none"
       },
-      children: [
-        /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ jsx(Tooltip, { text: "Text style", children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                setShowHeadingMenu((v) => !v);
-                setShowLinkDialog(false);
-                setShowImageDialog(false);
-              },
-              style: {
-                display: "inline-flex",
-                alignItems: "center",
-                gap: 3,
-                height: 28,
-                padding: "0 8px",
-                border: "1px solid var(--rte-border)",
-                borderRadius: "var(--rte-radius-sm)",
-                background: showHeadingMenu ? "var(--rte-btn-hover-bg)" : "var(--rte-surface)",
-                color: "var(--rte-text)",
-                cursor: "pointer",
-                fontSize: 12,
-                fontFamily: "var(--rte-font-family)",
-                fontWeight: 600,
-                minWidth: 52
-              },
-              children: [
-                getHeadingLabel(),
-                /* @__PURE__ */ jsx(ChevronDown, { size: 11 })
-              ]
-            }
-          ) }),
-          showHeadingMenu && /* @__PURE__ */ jsx(HeadingDropdown, { editor, onClose: () => setShowHeadingMenu(false) })
-        ] }),
-        /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: "Bold (⌘B)", children: /* @__PURE__ */ jsx(Bold, { size: 13, strokeWidth: 2.5 }) }),
-        /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: "Italic (⌘I)", children: /* @__PURE__ */ jsx(Italic, { size: 13, strokeWidth: 2.5 }) }),
-        /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleUnderline().run(), active: editor.isActive("underline"), title: "Underline (⌘U)", children: /* @__PURE__ */ jsx(Underline, { size: 13, strokeWidth: 2.5 }) }),
-        /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleStrike().run(), active: editor.isActive("strike"), title: "Strikethrough", children: /* @__PURE__ */ jsx(Strikethrough, { size: 13, strokeWidth: 2.5 }) }),
-        /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleCode().run(), active: editor.isActive("code"), title: "Inline code", children: /* @__PURE__ */ jsx(Code, { size: 13, strokeWidth: 2.5 }) }),
-        /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign("left").run(), active: editor.isActive({ textAlign: "left" }), title: "Align left", children: /* @__PURE__ */ jsx(AlignLeft, { size: 13 }) }),
-        /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign("center").run(), active: editor.isActive({ textAlign: "center" }), title: "Align center", children: /* @__PURE__ */ jsx(AlignCenter, { size: 13 }) }),
-        /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().setTextAlign("right").run(), active: editor.isActive({ textAlign: "right" }), title: "Align right", children: /* @__PURE__ */ jsx(AlignRight, { size: 13 }) }),
-        /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBulletList().run(), active: editor.isActive("bulletList"), title: "Bullet list", children: /* @__PURE__ */ jsx(List, { size: 13 }) }),
-        /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleOrderedList().run(), active: editor.isActive("orderedList"), title: "Numbered list", children: /* @__PURE__ */ jsx(ListOrdered, { size: 13 }) }),
-        /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleTaskList().run(), active: editor.isActive("taskList"), title: "Task list", children: /* @__PURE__ */ jsx(ListChecks, { size: 13 }) }),
-        /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleBlockquote().run(), active: editor.isActive("blockquote"), title: "Blockquote", children: /* @__PURE__ */ jsx(Quote, { size: 13 }) }),
-        /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().toggleCodeBlock().run(), active: editor.isActive("codeBlock"), title: "Code block", children: /* @__PURE__ */ jsx("span", { style: { fontFamily: "monospace", fontSize: 11, fontWeight: 700, lineHeight: 1, color: "inherit" }, children: "<>" }) }),
-        /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().setHorizontalRule().run(), title: "Horizontal rule", children: /* @__PURE__ */ jsx(Minus, { size: 13 }) }),
-        /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ jsx(
-            ToolbarButton,
-            {
-              onClick: () => {
-                setShowLinkDialog((v) => !v);
-                setShowImageDialog(false);
-                setShowHeadingMenu(false);
-              },
-              active: editor.isActive("link") || showLinkDialog,
-              title: "Insert link",
-              children: /* @__PURE__ */ jsx(Link, { size: 13 })
-            }
-          ),
-          showLinkDialog && /* @__PURE__ */ jsx(LinkDialog, { onConfirm: handleLinkInsert, onCancel: () => setShowLinkDialog(false), initialUrl: currentLink })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ jsx(
-            ToolbarButton,
-            {
-              onClick: () => {
-                setShowImageDialog((v) => !v);
-                setShowLinkDialog(false);
-                setShowHeadingMenu(false);
-              },
-              active: showImageDialog,
-              title: "Insert image",
-              children: /* @__PURE__ */ jsx(Image, { size: 13 })
-            }
-          ),
-          showImageDialog && /* @__PURE__ */ jsx(ImageDialog, { onConfirm: handleImageInsert, onCancel: () => setShowImageDialog(false) })
-        ] }),
-        /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: "Undo (⌘Z)", children: /* @__PURE__ */ jsx(Undo, { size: 13 }) }),
-        /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: "Redo (⌘⇧Z)", children: /* @__PURE__ */ jsx(Redo, { size: 13 }) })
-      ]
+      children: sections
     }
   );
 }
@@ -21416,38 +21752,54 @@ function RichTextEditor({
   autofocus = false,
   className = "",
   theme = "unleashteams",
-  themeVars = {}
+  themeVars = {},
+  toolbar = {}
 }) {
-  const editor = useEditor({
-    extensions: [
+  const resolvedToolbar = useMemo(
+    () => ({ ...DEFAULT_TOOLBAR, ...toolbar }),
+    [toolbar]
+  );
+  const extensions = useMemo(() => {
+    const exts = [
       Document,
       Paragraph,
       Text$1,
-      Bold$1,
-      Italic$1,
-      Underline$1,
-      Strike,
-      Code$1,
-      CodeBlock,
-      Heading.configure({ levels: [1, 2, 3] }),
-      BulletList,
-      OrderedList,
-      ListItem,
-      TaskList,
-      TaskItem.configure({ nested: true }),
-      Blockquote,
-      HorizontalRule,
       HardBreak,
-      History,
-      Image$1,
-      Link$1.configure({
-        openOnClick: false,
-        autolink: true,
-        HTMLAttributes: { rel: "noopener noreferrer", target: "_blank" }
-      }),
-      TextAlign.configure({ types: ["heading", "paragraph"] }),
       Placeholder.configure({ placeholder })
-    ],
+    ];
+    if (resolvedToolbar.headings) {
+      exts.push(Heading.configure({ levels: [1, 2, 3] }));
+    }
+    exts.push(Bold$1, Italic$1, Underline$1, Strike, Code$1);
+    if (resolvedToolbar.alignment) {
+      exts.push(TextAlign.configure({ types: ["heading", "paragraph"] }));
+    }
+    if (resolvedToolbar.lists) {
+      exts.push(BulletList, OrderedList, ListItem, TaskList, TaskItem.configure({ nested: true }));
+    }
+    if (resolvedToolbar.blocks) {
+      exts.push(Blockquote, CodeBlock, HorizontalRule);
+    }
+    if (resolvedToolbar.callouts) {
+      exts.push(Callout);
+    }
+    if (resolvedToolbar.media) {
+      exts.push(
+        Image$1,
+        Link$1.configure({
+          openOnClick: false,
+          autolink: true,
+          HTMLAttributes: { rel: "noopener noreferrer", target: "_blank" }
+        })
+      );
+    }
+    if (resolvedToolbar.history) {
+      exts.push(History);
+    }
+    return exts;
+  }, [resolvedToolbar, placeholder]);
+  const editor = useEditor({
+    extensions,
     content: initialContent,
     autofocus,
     onUpdate({ editor: editor2 }) {
@@ -21472,7 +21824,7 @@ function RichTextEditor({
         ...resolvedVars
       },
       children: [
-        /* @__PURE__ */ jsx(Toolbar, { editor }),
+        /* @__PURE__ */ jsx(Toolbar, { editor, groups: resolvedToolbar }),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -21708,6 +22060,9 @@ function RichTextPreview({
   );
 }
 export {
+  CALLOUT_TYPES,
+  Callout,
+  DEFAULT_TOOLBAR,
   RTE_THEMES,
   RichTextEditor,
   RichTextPreview,