raydit-editor 0.0.10 → 0.0.12

package/dist/index.js

@@ -1,13 +1,14 @@
 'use strict';
 
-var React = require('react');
+var React2 = require('react');
 var react = require('@tiptap/react');
+var menus = require('@tiptap/react/menus');
 var StarterKit = require('@tiptap/starter-kit');
 var Placeholder = require('@tiptap/extension-placeholder');
-var Underline = require('@tiptap/extension-underline');
+var Underline2 = require('@tiptap/extension-underline');
 var extensionColor = require('@tiptap/extension-color');
 var Highlight = require('@tiptap/extension-highlight');
-var Link2 = require('@tiptap/extension-link');
+var Link3 = require('@tiptap/extension-link');
 var extensionTable = require('@tiptap/extension-table');
 var extensionTextStyle = require('@tiptap/extension-text-style');
 var Superscript = require('@tiptap/extension-superscript');
@@ -23,12 +24,12 @@ var lucideReact = require('lucide-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
 var Placeholder__default = /*#__PURE__*/_interopDefault(Placeholder);
-var Underline__default = /*#__PURE__*/_interopDefault(Underline);
+var Underline2__default = /*#__PURE__*/_interopDefault(Underline2);
 var Highlight__default = /*#__PURE__*/_interopDefault(Highlight);
-var Link2__default = /*#__PURE__*/_interopDefault(Link2);
+var Link3__default = /*#__PURE__*/_interopDefault(Link3);
 var Superscript__default = /*#__PURE__*/_interopDefault(Superscript);
 var Subscript__default = /*#__PURE__*/_interopDefault(Subscript);
 var TextAlign__default = /*#__PURE__*/_interopDefault(TextAlign);
@@ -4435,10 +4436,10 @@ tippy.setDefaultProps({
 });
 var tippy_esm_default = tippy;
 function SlashMenu({ items, command }) {
-  const [query, setQuery] = React.useState("");
-  const [activeIndex, setActiveIndex] = React.useState(0);
-  const containerRef = React.useRef(null);
-  const filtered = React.useMemo(() => {
+  const [query, setQuery] = React2.useState("");
+  const [activeIndex, setActiveIndex] = React2.useState(0);
+  const containerRef = React2.useRef(null);
+  const filtered = React2.useMemo(() => {
     return items.filter(
       (item) => {
         var _a;
@@ -4446,7 +4447,7 @@ function SlashMenu({ items, command }) {
       }
     );
   }, [items, query]);
-  const grouped = React.useMemo(() => {
+  const grouped = React2.useMemo(() => {
     return filtered.reduce((acc, item) => {
       var _a, _b;
       (_b = acc[_a = item.category]) != null ? _b : acc[_a] = [];
@@ -4455,14 +4456,14 @@ function SlashMenu({ items, command }) {
     }, {});
   }, [filtered]);
   const flatItems = Object.values(grouped).flat();
-  React.useEffect(() => {
+  React2.useEffect(() => {
     var _a;
     const el = (_a = containerRef.current) == null ? void 0 : _a.querySelector(
       `[data-index="${activeIndex}"]`
     );
     el == null ? void 0 : el.scrollIntoView({ block: "nearest" });
   }, [activeIndex]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     const handler = (e) => {
       if (e.key === "ArrowDown") {
         e.preventDefault();
@@ -4791,9 +4792,414 @@ var SlashExtension = core.Extension.create({
     ];
   }
 });
+function SelectionToolbar({ editor }) {
+  const [showColors, setShowColors] = React2.useState(false);
+  const [showHighlights, setShowHighlights] = React2.useState(false);
+  const [showTurnInto, setShowTurnInto] = React2.useState(false);
+  const [showMore, setShowMore] = React2.useState(false);
+  React2.useEffect(() => {
+    if (!editor) return;
+    const closeMenu = () => {
+      setShowTurnInto(false);
+      setShowColors(false);
+      setShowHighlights(false);
+      setShowMore(false);
+    };
+    editor.on("selectionUpdate", closeMenu);
+    editor.on("blur", closeMenu);
+    return () => {
+      editor.off("selectionUpdate", closeMenu);
+      editor.off("blur", closeMenu);
+    };
+  }, [editor]);
+  const colors = [
+    { name: "Default", value: "#000000" },
+    { name: "Gray", value: "#6B7280" },
+    { name: "Red", value: "#EF4444" },
+    { name: "Orange", value: "#F97316" },
+    { name: "Yellow", value: "#EAB308" },
+    { name: "Green", value: "#10B981" },
+    { name: "Blue", value: "#3B82F6" },
+    { name: "Purple", value: "#8B5CF6" }
+  ];
+  const highlights = [
+    { name: "None", value: "transparent" },
+    { name: "Gray", value: "#F3F4F6" },
+    { name: "Red", value: "#FEE2E2" },
+    { name: "Orange", value: "#FFEDD5" },
+    { name: "Yellow", value: "#FEF3C7" },
+    { name: "Green", value: "#D1FAE5" },
+    { name: "Blue", value: "#DBEAFE" },
+    { name: "Purple", value: "#EDE9FE" }
+  ];
+  const setLink = () => {
+    const previousUrl = editor.getAttributes("link").href;
+    const url = window.prompt("Enter URL:", previousUrl);
+    if (url === null) {
+      return;
+    }
+    if (url === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      return;
+    }
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+  };
+  const currentBlockLabel = () => {
+    if (editor.isActive("heading", { level: 1 })) return "Heading 1";
+    if (editor.isActive("heading", { level: 2 })) return "Heading 2";
+    if (editor.isActive("heading", { level: 3 })) return "Heading 3";
+    if (editor.isActive("bulletList")) return "Bulleted list";
+    if (editor.isActive("orderedList")) return "Numbered list";
+    if (editor.isActive("taskList")) return "To-do list";
+    if (editor.isActive("blockquote")) return "Blockquote";
+    if (editor.isActive("codeBlock")) return "Code block";
+    return "Text";
+  };
+  const turnIntoItems = [
+    {
+      label: "Text",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Type, { size: 16 }),
+      isActive: () => editor.isActive("paragraph") && !editor.isActive("bulletList") && !editor.isActive("orderedList") && !editor.isActive("taskList"),
+      action: () => {
+        editor.chain().focus().clearNodes().setParagraph().run();
+      }
+    },
+    {
+      label: "Heading 1",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading1, { size: 16 }),
+      isActive: () => editor.isActive("heading", { level: 1 }),
+      action: () => editor.chain().focus().toggleHeading({ level: 1 }).run()
+    },
+    {
+      label: "Heading 2",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading2, { size: 16 }),
+      isActive: () => editor.isActive("heading", { level: 2 }),
+      action: () => editor.chain().focus().toggleHeading({ level: 2 }).run()
+    },
+    {
+      label: "Heading 3",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading3, { size: 16 }),
+      isActive: () => editor.isActive("heading", { level: 3 }),
+      action: () => editor.chain().focus().toggleHeading({ level: 3 }).run()
+    },
+    {
+      label: "To-do list",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckSquare, { size: 16 }),
+      isActive: () => editor.isActive("taskList"),
+      action: () => {
+        if (editor.isActive("taskList")) {
+          editor.chain().focus().liftListItem("taskItem").run();
+        } else {
+          editor.chain().focus().toggleTaskList().run();
+        }
+      }
+    },
+    {
+      label: "Blockquote",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Quote, { size: 16 }),
+      isActive: () => editor.isActive("blockquote"),
+      action: () => editor.chain().focus().toggleBlockquote().run()
+    },
+    {
+      label: "Code block",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code2, { size: 16 }),
+      isActive: () => editor.isActive("codeBlock"),
+      action: () => editor.chain().focus().toggleCodeBlock().run()
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 rounded-lg border border-gray-200 bg-white p-1 shadow-xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => {
+          if (editor.isActive("bulletList")) {
+            editor.chain().focus().liftListItem("listItem").run();
+          } else {
+            editor.chain().focus().toggleBulletList().run();
+          }
+        },
+        className: `rounded p-1.5 transition-colors hover:bg-gray-100 ${editor.isActive("bulletList") ? "bg-gray-100 text-blue-600" : "text-gray-700"}`,
+        title: "Bullet List",
+        type: "button",
+        onMouseDown: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => {
+          if (editor.isActive("orderedList")) {
+            editor.chain().focus().liftListItem("listItem").run();
+          } else {
+            editor.chain().focus().toggleOrderedList().run();
+          }
+        },
+        className: `rounded p-1.5 transition-colors hover:bg-gray-100 ${editor.isActive("orderedList") ? "bg-gray-100 text-blue-600" : "text-gray-700"}`,
+        title: "Numbered List",
+        type: "button",
+        onMouseDown: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListOrdered, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-6 w-px bg-gray-300" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => setShowTurnInto((v) => !v),
+          className: "rounded-md px-2 py-1 text-sm text-gray-700 hover:bg-gray-100",
+          children: [
+            currentBlockLabel(),
+            " \u25BE"
+          ]
+        }
+      ),
+      showTurnInto && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-0 top-full z-50 mt-2 w-52 rounded-lg border bg-white shadow-xl", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-xs font-semibold text-gray-500", children: "Turn into" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1", children: turnIntoItems.map((item) => {
+          const active = item.isActive();
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => {
+                item.action();
+                setShowTurnInto(false);
+              },
+              className: `flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors ${active ? "bg-gray-100 text-blue-600" : "text-gray-700 hover:bg-gray-100"}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 items-center justify-center", children: item.icon }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+              ]
+            },
+            item.label
+          );
+        }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-6 w-px bg-gray-300" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => editor.chain().focus().toggleBold().run(),
+        className: `rounded p-1.5 transition-colors hover:bg-gray-100 ${editor.isActive("bold") ? "bg-gray-100 text-blue-600" : "text-gray-700"}`,
+        title: "Bold (Ctrl+B)",
+        type: "button",
+        onMouseDown: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bold, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => editor.chain().focus().toggleItalic().run(),
+        className: `rounded p-1.5 transition-colors hover:bg-gray-100 ${editor.isActive("italic") ? "bg-gray-100 text-blue-600" : "text-gray-700"}`,
+        title: "Italic (Ctrl+I)",
+        type: "button",
+        onMouseDown: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Italic, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => editor.chain().focus().toggleUnderline().run(),
+        className: `rounded p-1.5 transition-colors hover:bg-gray-100 ${editor.isActive("underline") ? "bg-gray-100 text-blue-600" : "text-gray-700"}`,
+        title: "Underline (Ctrl+U)",
+        type: "button",
+        onMouseDown: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Underline, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => editor.chain().focus().toggleStrike().run(),
+        className: `rounded p-1.5 transition-colors hover:bg-gray-100 ${editor.isActive("strike") ? "bg-gray-100 text-blue-600" : "text-gray-700"}`,
+        title: "Strikethrough",
+        type: "button",
+        onMouseDown: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Strikethrough, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => editor.chain().focus().toggleCode().run(),
+        className: `rounded p-1.5 transition-colors hover:bg-gray-100 ${editor.isActive("code") ? "bg-gray-100 text-blue-600" : "text-gray-700"}`,
+        title: "Code",
+        type: "button",
+        onMouseDown: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-6 w-px bg-gray-300" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: setLink,
+        className: `rounded p-1.5 transition-colors hover:bg-gray-100 ${editor.isActive("link") ? "bg-gray-100 text-blue-600" : "text-gray-700"}`,
+        title: "Add Link",
+        type: "button",
+        onMouseDown: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => {
+            setShowColors(!showColors);
+            setShowHighlights(false);
+          },
+          className: "rounded p-1.5 text-gray-700 transition-colors hover:bg-gray-100",
+          title: "Text Color",
+          type: "button",
+          onMouseDown: (e) => e.preventDefault(),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Type, { size: 16 })
+        }
+      ),
+      showColors && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-full z-50 mt-2 flex gap-1 rounded-lg border bg-white p-2 shadow-xl", children: colors.map((color) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => {
+            editor.chain().focus().setMark("textStyle", { color: color.value }).run();
+            setShowColors(false);
+          },
+          className: "h-6 w-6 rounded border border-gray-300 transition-transform hover:scale-110",
+          style: { backgroundColor: color.value },
+          title: color.name,
+          type: "button",
+          onMouseDown: (e) => e.preventDefault()
+        },
+        color.value
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => {
+            setShowHighlights(!showHighlights);
+            setShowColors(false);
+          },
+          className: `rounded p-1.5 transition-colors hover:bg-gray-100 ${editor.isActive("highlight") ? "bg-gray-100 text-blue-600" : "text-gray-700"}`,
+          title: "Highlight",
+          type: "button",
+          onMouseDown: (e) => e.preventDefault(),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Highlighter, { size: 16 })
+        }
+      ),
+      showHighlights && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-full z-50 mt-2 flex gap-1 rounded-lg border bg-white p-2 shadow-xl", children: highlights.map((highlight) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => {
+            if (highlight.value === "transparent") {
+              editor.chain().focus().unsetMark("highlight").run();
+            } else {
+              editor.chain().focus().setMark("highlight", { color: highlight.value }).run();
+            }
+            setShowHighlights(false);
+          },
+          className: "h-6 w-6 rounded border border-gray-300 transition-transform hover:scale-110",
+          style: { backgroundColor: highlight.value },
+          title: highlight.name,
+          type: "button",
+          onMouseDown: (e) => e.preventDefault()
+        },
+        highlight.value
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-6 w-px bg-gray-300" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => setShowMore((v) => !v),
+          className: "rounded p-1.5 hover:bg-gray-100",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { size: 16 })
+        }
+      ),
+      showMore && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 top-full z-50 mt-2 w-56 rounded-lg border bg-white shadow-xl", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-xs font-semibold text-gray-500", children: "More" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1", children: [
+          {
+            label: "Align left",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeft, { size: 16 }),
+            isActive: () => editor.isActive({ textAlign: "left" }),
+            action: () => editor.chain().focus().setTextAlign("left").run()
+          },
+          {
+            label: "Align center",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignCenter, { size: 16 }),
+            isActive: () => editor.isActive({ textAlign: "center" }),
+            action: () => editor.chain().focus().setTextAlign("center").run()
+          },
+          {
+            label: "Align right",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignRight, { size: 16 }),
+            isActive: () => editor.isActive({ textAlign: "right" }),
+            action: () => editor.chain().focus().setTextAlign("right").run()
+          },
+          {
+            label: "Justify",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignJustify, { size: 16 }),
+            isActive: () => editor.isActive({ textAlign: "justify" }),
+            action: () => editor.chain().focus().setTextAlign("justify").run()
+          },
+          { divider: true },
+          {
+            label: "Superscript",
+            icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "x\xB2" }),
+            isActive: () => editor.isActive("superscript"),
+            action: () => editor.chain().focus().toggleSuperscript().run()
+          },
+          {
+            label: "Subscript",
+            icon: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "x\u2082" }),
+            isActive: () => editor.isActive("subscript"),
+            action: () => editor.chain().focus().toggleSubscript().run()
+          }
+        ].map((item, index) => {
+          if ("divider" in item) {
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "my-1 h-px bg-gray-200"
+              },
+              `divider-${index}`
+            );
+          }
+          const active = item.isActive();
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => {
+                item.action();
+                setShowMore(false);
+              },
+              className: `flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors ${active ? "bg-gray-100 text-blue-600" : "text-gray-700 hover:bg-gray-100"}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 items-center justify-center", children: item.icon }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+              ]
+            },
+            item.label
+          );
+        }) })
+      ] })
+    ] })
+  ] });
+}
+var SelectionToolbar_default = SelectionToolbar;
 function useRowHover(editor) {
-  const [rowEl, setRowEl] = React.useState(null);
-  React.useEffect(() => {
+  const [rowEl, setRowEl] = React2.useState(null);
+  React2.useEffect(() => {
     if (!editor) return;
     const root = editor.view.dom;
     const onMouseMove = (e) => {
@@ -4871,7 +5277,7 @@ function MenuItem({
   );
 }
 function RowAddButton({ editor, row }) {
-  const [showRowMenu, setShowRowMenu] = React__default.default.useState(false);
+  const [showRowMenu, setShowRowMenu] = React2__default.default.useState(false);
   const firstCell = row.querySelector("td, th");
   if (!firstCell) return null;
   const rect = row.getBoundingClientRect();
@@ -4915,8 +5321,8 @@ function RowAddButton({ editor, row }) {
   ] });
 }
 function useColumnHover(editor) {
-  const [hovered, setHovered] = React.useState(null);
-  React.useEffect(() => {
+  const [hovered, setHovered] = React2.useState(null);
+  React2.useEffect(() => {
     if (!editor) return;
     const root = editor.view.dom;
     const onMouseMove = (e) => {
@@ -5000,7 +5406,7 @@ function MenuItem2({
   );
 }
 function ColumnAddButton({ editor, table, columnIndex }) {
-  const [showColumnMenu, setShowColumnMenu] = React__default.default.useState(false);
+  const [showColumnMenu, setShowColumnMenu] = React2__default.default.useState(false);
   const firstRow = table.querySelector("tr");
   if (!firstRow) return null;
   const cells = Array.from(firstRow.children);
@@ -5084,8 +5490,8 @@ var NotionEditor = ({
   showToolbar = true,
   showTableControls = true
 }) => {
-  const lastSavedRef = React.useRef("");
-  const isDirtyRef = React.useRef(false);
+  const lastSavedRef = React2.useRef("");
+  const isDirtyRef = React2.useRef(false);
   console.log("demo", 233232362);
   const editor = react.useEditor({
     autofocus: autoFocus,
@@ -5103,7 +5509,7 @@ var NotionEditor = ({
         includeChildren: false
       }),
       SlashExtension,
-      Underline__default.default,
+      Underline2__default.default,
       extensionTextStyle.TextStyle,
       extensionColor.Color,
       Superscript__default.default,
@@ -5114,7 +5520,7 @@ var NotionEditor = ({
       Highlight__default.default.configure({
         multicolor: true
       }),
-      Link2__default.default.configure({
+      Link3__default.default.configure({
         openOnClick: false,
         HTMLAttributes: {
           class: "text-blue-600 underline cursor-pointer hover:text-blue-800"
@@ -5162,20 +5568,21 @@ var NotionEditor = ({
       });
     }
   });
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!editor) return;
     const currentHTML = editor.getHTML();
     if (content !== void 0 && content !== currentHTML) {
       editor.commands.setContent(content || "");
     }
   }, [content, editor]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     editor == null ? void 0 : editor.setEditable(!disabled);
   }, [disabled, editor]);
   const hoveredRow = useRowHover(editor);
   const hoveredColumn = useColumnHover(editor);
   if (!editor) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx__default.default("relative rounded-lg border bg-white", className), children: [
+    showToolbar && /* @__PURE__ */ jsxRuntime.jsx(menus.BubbleMenu, { editor, children: /* @__PURE__ */ jsxRuntime.jsx(SelectionToolbar_default, { editor }) }),
     showTableControls && editor && hoveredRow && /* @__PURE__ */ jsxRuntime.jsx(RowAddButton, { editor, row: hoveredRow }),
     showTableControls && editor && hoveredColumn && /* @__PURE__ */ jsxRuntime.jsx(
       ColumnAddButton,