tiptap-editor-custom-stg 1.0.3 → 1.0.5

package/dist/index.d.mts

@@ -4,7 +4,7 @@ import * as _tiptap_extension_underline from '@tiptap/extension-underline';
 import * as _tiptap_core from '@tiptap/core';
 import { Extension } from '@tiptap/core';
 
-type ToolbarGroup = 'history' | 'font' | 'fontSize' | 'textColor' | 'highlight' | 'list' | 'alignment' | 'table' | 'inline' | 'link' | 'insert';
+type ToolbarGroup = 'history' | 'heading' | 'font' | 'fontSize' | 'textColor' | 'highlight' | 'list' | 'alignment' | 'table' | 'inline' | 'link' | 'insert';
 interface ToolbarConfig {
     groups?: ToolbarGroup[];
     showDividers?: boolean;

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import * as _tiptap_extension_underline from '@tiptap/extension-underline';
 import * as _tiptap_core from '@tiptap/core';
 import { Extension } from '@tiptap/core';
 
-type ToolbarGroup = 'history' | 'font' | 'fontSize' | 'textColor' | 'highlight' | 'list' | 'alignment' | 'table' | 'inline' | 'link' | 'insert';
+type ToolbarGroup = 'history' | 'heading' | 'font' | 'fontSize' | 'textColor' | 'highlight' | 'list' | 'alignment' | 'table' | 'inline' | 'link' | 'insert';
 interface ToolbarConfig {
     groups?: ToolbarGroup[];
     showDividers?: boolean;

package/dist/index.js

@@ -398,6 +398,11 @@ var ClearIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LucideSvg, {
 ] });
 var SubmitIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LucideSvg, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "20 6 9 17 4 12" }) });
 var AttachIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LucideSvg, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.82-2.82l8.49-8.48" }) });
+var HeadingIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LucideSvg, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 12h12" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 20V4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 20V4" })
+] });
 var FontSizeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m3 7 5-5 5 5" }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 2v10" }),
@@ -447,6 +452,51 @@ var HistoryGroup = ({ editor, isReadOnly }) => /* @__PURE__ */ (0, import_jsx_ru
     }
   )
 ] });
+var HeadingGroup = ({ editor, isReadOnly, showMenu, onToggle, onClose }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { position: "relative", display: "inline-flex" }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      title: "Heading",
+      onClick: onToggle,
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      className: `toolbar-button-dropdown ${showMenu ? "is-active" : ""}`,
+      "aria-label": "Heading selection",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HeadingIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "dropdown-arrow", viewBox: "0 0 24 24", width: "10", height: "10", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M7 10l5 5 5-5z", fill: "currentColor" }) })
+      ]
+    }
+  ),
+  showMenu && !isReadOnly && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "tiptap-heading-menu", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        className: `heading-option ${!editor.isActive("heading") ? "is-active" : ""}`,
+        onClick: () => {
+          editor.chain().focus().setParagraph().run();
+          onClose();
+        },
+        children: "Paragraph"
+      }
+    ),
+    [1, 2, 3, 4, 5, 6].map((level) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        className: `heading-option h${level} ${editor.isActive("heading", { level }) ? "is-active" : ""}`,
+        onClick: () => {
+          editor.chain().focus().toggleHeading({ level }).run();
+          onClose();
+        },
+        children: [
+          "Heading ",
+          level
+        ]
+      },
+      level
+    ))
+  ] })
+] });
 var FontGroup = ({ editor, isReadOnly, showMenu, onToggle, onClose }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { position: "relative", display: "inline-flex" }, children: [
   /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
@@ -622,12 +672,12 @@ var ListGroup = ({ editor, isReadOnly }) => /* @__PURE__ */ (0, import_jsx_runti
   /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
-      title: "Bullet list",
+      title: "Bulleted list",
       onClick: () => editor.chain().focus().toggleBulletList().run(),
       onMouseDown: (e) => e.preventDefault(),
       disabled: isReadOnly,
       className: editor.isActive("bulletList") ? "is-active" : "",
-      "aria-label": "Bullet list",
+      "aria-label": "Bulleted list",
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BulletListIcon, {})
     }
   ),
@@ -905,6 +955,7 @@ var TiptapEditor = ({
   const [showTextColorMenu, setShowTextColorMenu] = import_react.default.useState(false);
   const [showFontMenu, setShowFontMenu] = import_react.default.useState(false);
   const [showFontSizeMenu, setShowFontSizeMenu] = import_react.default.useState(false);
+  const [showHeadingMenu, setShowHeadingMenu] = import_react.default.useState(false);
   const [showLinkMenu, setShowLinkMenu] = import_react.default.useState(false);
   const [showTableMenu, setShowTableMenu] = import_react.default.useState(false);
   const [tableHoverSize, setTableHoverSize] = import_react.default.useState({ rows: 0, cols: 0 });
@@ -918,6 +969,7 @@ var TiptapEditor = ({
     setShowTextColorMenu(false);
     setShowFontMenu(false);
     setShowFontSizeMenu(false);
+    setShowHeadingMenu(false);
     setShowLinkMenu(false);
     setShowTableMenu(false);
   }, []);
@@ -1079,7 +1131,7 @@ var TiptapEditor = ({
         editor.chain().focus().run();
         const imagesHtml = uploadResults.map(
           (res) => `<img src="${res.url}" alt="${res.name}" />`
-        ).join("&nbsp;");
+        ).join("<br/>");
         editor.chain().insertContent(imagesHtml).run();
       } catch (err) {
         alertFn(err.message || "Image upload failed");
@@ -1129,7 +1181,7 @@ var TiptapEditor = ({
         );
         const attachmentsHtml = uploadResults.map(
           (res) => `<a href="${res.url}" target="_blank" rel="noopener noreferrer" data-attachment="true">${res.name}</a>`
-        ).join("&nbsp;");
+        ).join("<br/>");
         editor.chain().focus().insertContent(attachmentsHtml).run();
       } catch (err) {
         alertFn(err.message || "Attachment upload failed");
@@ -1161,7 +1213,13 @@ var TiptapEditor = ({
       editor.chain().focus().extendMarkRange("link").unsetLink().run();
     } else {
       const formattedUrl = /^https?:\/\//.test(linkUrl) ? linkUrl : `https://${linkUrl}`;
-      editor.chain().focus().extendMarkRange("link").setLink({ href: formattedUrl }).run();
+      const { from, to } = editor.state.selection;
+      const hasSelection = from !== to;
+      if (hasSelection) {
+        editor.chain().focus().extendMarkRange("link").setLink({ href: formattedUrl }).run();
+      } else {
+        editor.chain().focus().insertContent(`<a href="${formattedUrl}">${linkUrl}</a>`).run();
+      }
     }
     setShowLinkMenu(false);
   }, [editor, linkUrl]);
@@ -1192,6 +1250,7 @@ var TiptapEditor = ({
   ] });
   const defaultGroups = [
     "history",
+    "heading",
     "font",
     "fontSize",
     "textColor",
@@ -1208,6 +1267,20 @@ var TiptapEditor = ({
   const getToolbar = () => {
     const toolbarComponents = {
       history: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HistoryGroup, { editor, isReadOnly }),
+      heading: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        HeadingGroup,
+        {
+          editor,
+          isReadOnly,
+          showMenu: showHeadingMenu,
+          onToggle: () => {
+            const nextState = !showHeadingMenu;
+            closeAllMenus();
+            setShowHeadingMenu(nextState);
+          },
+          onClose: () => setShowHeadingMenu(false)
+        }
+      ),
       font: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         FontGroup,
         {