raydit-editor 0.0.10 → 0.0.12

package/dist/index.mjs

@@ -1,11 +1,12 @@
-import React, { useState, useRef, useMemo, useEffect } from 'react';
+import React2, { useState, useRef, useMemo, useEffect } from 'react';
 import { ReactRenderer, useEditor, EditorContent } from '@tiptap/react';
+import { BubbleMenu } from '@tiptap/react/menus';
 import StarterKit from '@tiptap/starter-kit';
 import Placeholder from '@tiptap/extension-placeholder';
-import Underline from '@tiptap/extension-underline';
+import Underline2 from '@tiptap/extension-underline';
 import { Color } from '@tiptap/extension-color';
 import Highlight from '@tiptap/extension-highlight';
-import Link2 from '@tiptap/extension-link';
+import Link3 from '@tiptap/extension-link';
 import { TableRow, TableHeader, TableCell, Table as Table$1 } from '@tiptap/extension-table';
 import { TextStyle } from '@tiptap/extension-text-style';
 import Superscript from '@tiptap/extension-superscript';
@@ -17,7 +18,7 @@ import clsx from 'clsx';
 import { Extension } from '@tiptap/core';
 import Suggestion from '@tiptap/suggestion';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Type, Heading1, Heading2, Heading3, List, ListOrdered, Quote, Code, Minus, Table, Link, MoreHorizontal } from 'lucide-react';
+import { Type, Heading1, Heading2, Heading3, List, ListOrdered, Quote, Code, Minus, Table, Link, Bold, Italic, Underline, Strikethrough, Link2, Highlighter, MoreVertical, AlignLeft, AlignCenter, AlignRight, AlignJustify, MoreHorizontal, CheckSquare, Code2 } from 'lucide-react';
 
 // src/NotionEditor.tsx
 
@@ -4773,6 +4774,411 @@ var SlashExtension = Extension.create({
     ];
   }
 });
+function SelectionToolbar({ editor }) {
+  const [showColors, setShowColors] = useState(false);
+  const [showHighlights, setShowHighlights] = useState(false);
+  const [showTurnInto, setShowTurnInto] = useState(false);
+  const [showMore, setShowMore] = useState(false);
+  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__ */ jsx(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__ */ jsx(Heading1, { size: 16 }),
+      isActive: () => editor.isActive("heading", { level: 1 }),
+      action: () => editor.chain().focus().toggleHeading({ level: 1 }).run()
+    },
+    {
+      label: "Heading 2",
+      icon: /* @__PURE__ */ jsx(Heading2, { size: 16 }),
+      isActive: () => editor.isActive("heading", { level: 2 }),
+      action: () => editor.chain().focus().toggleHeading({ level: 2 }).run()
+    },
+    {
+      label: "Heading 3",
+      icon: /* @__PURE__ */ jsx(Heading3, { size: 16 }),
+      isActive: () => editor.isActive("heading", { level: 3 }),
+      action: () => editor.chain().focus().toggleHeading({ level: 3 }).run()
+    },
+    {
+      label: "To-do list",
+      icon: /* @__PURE__ */ jsx(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__ */ jsx(Quote, { size: 16 }),
+      isActive: () => editor.isActive("blockquote"),
+      action: () => editor.chain().focus().toggleBlockquote().run()
+    },
+    {
+      label: "Code block",
+      icon: /* @__PURE__ */ jsx(Code2, { size: 16 }),
+      isActive: () => editor.isActive("codeBlock"),
+      action: () => editor.chain().focus().toggleCodeBlock().run()
+    }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-lg border border-gray-200 bg-white p-1 shadow-xl", children: [
+    /* @__PURE__ */ 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__ */ jsx(List, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ 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__ */ jsx(ListOrdered, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px bg-gray-300" }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ 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__ */ jsxs("div", { className: "absolute left-0 top-full z-50 mt-2 w-52 rounded-lg border bg-white shadow-xl", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs font-semibold text-gray-500", children: "Turn into" }),
+        /* @__PURE__ */ jsx("div", { className: "p-1", children: turnIntoItems.map((item) => {
+          const active = item.isActive();
+          return /* @__PURE__ */ 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__ */ jsx("span", { className: "flex h-5 w-5 items-center justify-center", children: item.icon }),
+                /* @__PURE__ */ jsx("span", { children: item.label })
+              ]
+            },
+            item.label
+          );
+        }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px bg-gray-300" }),
+    /* @__PURE__ */ 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__ */ jsx(Bold, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ 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__ */ jsx(Italic, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ 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__ */ jsx(Underline, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ 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__ */ jsx(Strikethrough, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ 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__ */ jsx(Code, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px bg-gray-300" }),
+    /* @__PURE__ */ 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__ */ jsx(Link2, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ 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__ */ jsx(Type, { size: 16 })
+        }
+      ),
+      showColors && /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ 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__ */ jsx(Highlighter, { size: 16 })
+        }
+      ),
+      showHighlights && /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "mx-1 h-6 w-px bg-gray-300" }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => setShowMore((v) => !v),
+          className: "rounded p-1.5 hover:bg-gray-100",
+          children: /* @__PURE__ */ jsx(MoreVertical, { size: 16 })
+        }
+      ),
+      showMore && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-full z-50 mt-2 w-56 rounded-lg border bg-white shadow-xl", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs font-semibold text-gray-500", children: "More" }),
+        /* @__PURE__ */ jsx("div", { className: "p-1", children: [
+          {
+            label: "Align left",
+            icon: /* @__PURE__ */ jsx(AlignLeft, { size: 16 }),
+            isActive: () => editor.isActive({ textAlign: "left" }),
+            action: () => editor.chain().focus().setTextAlign("left").run()
+          },
+          {
+            label: "Align center",
+            icon: /* @__PURE__ */ jsx(AlignCenter, { size: 16 }),
+            isActive: () => editor.isActive({ textAlign: "center" }),
+            action: () => editor.chain().focus().setTextAlign("center").run()
+          },
+          {
+            label: "Align right",
+            icon: /* @__PURE__ */ jsx(AlignRight, { size: 16 }),
+            isActive: () => editor.isActive({ textAlign: "right" }),
+            action: () => editor.chain().focus().setTextAlign("right").run()
+          },
+          {
+            label: "Justify",
+            icon: /* @__PURE__ */ jsx(AlignJustify, { size: 16 }),
+            isActive: () => editor.isActive({ textAlign: "justify" }),
+            action: () => editor.chain().focus().setTextAlign("justify").run()
+          },
+          { divider: true },
+          {
+            label: "Superscript",
+            icon: /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "x\xB2" }),
+            isActive: () => editor.isActive("superscript"),
+            action: () => editor.chain().focus().toggleSuperscript().run()
+          },
+          {
+            label: "Subscript",
+            icon: /* @__PURE__ */ 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__ */ jsx(
+              "div",
+              {
+                className: "my-1 h-px bg-gray-200"
+              },
+              `divider-${index}`
+            );
+          }
+          const active = item.isActive();
+          return /* @__PURE__ */ 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__ */ jsx("span", { className: "flex h-5 w-5 items-center justify-center", children: item.icon }),
+                /* @__PURE__ */ jsx("span", { children: item.label })
+              ]
+            },
+            item.label
+          );
+        }) })
+      ] })
+    ] })
+  ] });
+}
+var SelectionToolbar_default = SelectionToolbar;
 function useRowHover(editor) {
   const [rowEl, setRowEl] = useState(null);
   useEffect(() => {
@@ -4853,7 +5259,7 @@ function MenuItem({
   );
 }
 function RowAddButton({ editor, row }) {
-  const [showRowMenu, setShowRowMenu] = React.useState(false);
+  const [showRowMenu, setShowRowMenu] = React2.useState(false);
   const firstCell = row.querySelector("td, th");
   if (!firstCell) return null;
   const rect = row.getBoundingClientRect();
@@ -4982,7 +5388,7 @@ function MenuItem2({
   );
 }
 function ColumnAddButton({ editor, table, columnIndex }) {
-  const [showColumnMenu, setShowColumnMenu] = React.useState(false);
+  const [showColumnMenu, setShowColumnMenu] = React2.useState(false);
   const firstRow = table.querySelector("tr");
   if (!firstRow) return null;
   const cells = Array.from(firstRow.children);
@@ -5085,7 +5491,7 @@ var NotionEditor = ({
         includeChildren: false
       }),
       SlashExtension,
-      Underline,
+      Underline2,
       TextStyle,
       Color,
       Superscript,
@@ -5096,7 +5502,7 @@ var NotionEditor = ({
       Highlight.configure({
         multicolor: true
       }),
-      Link2.configure({
+      Link3.configure({
         openOnClick: false,
         HTMLAttributes: {
           class: "text-blue-600 underline cursor-pointer hover:text-blue-800"
@@ -5158,6 +5564,7 @@ var NotionEditor = ({
   const hoveredColumn = useColumnHover(editor);
   if (!editor) return null;
   return /* @__PURE__ */ jsxs("div", { className: clsx("relative rounded-lg border bg-white", className), children: [
+    showToolbar && /* @__PURE__ */ jsx(BubbleMenu, { editor, children: /* @__PURE__ */ jsx(SelectionToolbar_default, { editor }) }),
     showTableControls && editor && hoveredRow && /* @__PURE__ */ jsx(RowAddButton, { editor, row: hoveredRow }),
     showTableControls && editor && hoveredColumn && /* @__PURE__ */ jsx(
       ColumnAddButton,