reactjs-tiptap-editor 0.4.2 → 1.0.1

package/lib/TextDirection.js

@@ -1,142 +1,135 @@
-import { E as b } from "./index-kbO3iWqL.js";
-import { jsxs as h, jsx as n } from "react/jsx-runtime";
-import { useMemo as g } from "react";
-import { P as D, o as v, A as y, f as T, p as A, T as C, a as w, n as M, b as P, r as z } from "./RichTextEditor-DGcKEUGr.js";
-function L(t) {
-  var r;
-  const i = g(() => {
-    var c;
-    const e = (c = t == null ? void 0 : t.items) == null ? void 0 : c.find((o) => o.isActive());
-    return e && !e.default ? {
-      ...e,
-      icon: e.icon ? e.icon : t.icon
-    } : {
-      title: t == null ? void 0 : t.tooltip,
-      icon: t.icon,
-      isActive: () => !1
-    };
-  }, [t]);
-  return /* @__PURE__ */ h(D, { modal: !0, children: [
-    /* @__PURE__ */ n(
-      v,
-      {
-        asChild: !0,
-        disabled: t == null ? void 0 : t.disabled,
-        children: /* @__PURE__ */ n(
-          y,
+import { E as g } from "./index-DnWWK9F_.js";
+import { jsx as o, Fragment as D, jsxs as x } from "react/jsx-runtime";
+import v, { useMemo as b } from "react";
+import { A as C, T as A } from "./toggle-Cdp4IT2U.js";
+import "./index-BPfVXs5_.js";
+import { I as f } from "./Icon-jKs8Hr6p.js";
+import { u as P, b as w, h as z } from "./useButtonProps-BsEd4zYM.js";
+import { P as N, a as R, b as j } from "./popover-CAuEW0Mr.js";
+import { T as y, a as K, b as M } from "./tooltip-CopwsU8q.js";
+function X() {
+  const i = P(O.name), [c, h] = v.useState(!1), {
+    icon: p = void 0,
+    tooltip: u = void 0,
+    items: s = [],
+    isActive: d = void 0
+  } = (i == null ? void 0 : i.componentProps) ?? {}, { editorDisabled: a, dataState: e } = w(d), r = b(() => (e == null ? void 0 : e.dir) || "unset", [e]);
+  return i ? /* @__PURE__ */ x(
+    N,
+    {
+      open: c,
+      onOpenChange: h,
+      modal: !0,
+      children: [
+        /* @__PURE__ */ o(
+          R,
           {
-            customClass: "!richtext-w-12 richtext-h-12",
-            disabled: t == null ? void 0 : t.disabled,
-            icon: t == null ? void 0 : t.icon,
-            tooltip: t == null ? void 0 : t.tooltip,
-            tooltipOptions: t == null ? void 0 : t.tooltipOptions,
-            children: /* @__PURE__ */ n(
-              T,
+            asChild: !0,
+            disabled: a,
+            children: /* @__PURE__ */ o(
+              C,
               {
-                className: "richtext-ml-1 richtext-size-3 richtext-text-zinc-500",
-                name: "MenuDown"
+                customClass: "!richtext-w-12 richtext-h-12",
+                disabled: a,
+                icon: p,
+                tooltip: u,
+                children: /* @__PURE__ */ o(
+                  f,
+                  {
+                    className: "richtext-ml-1 richtext-size-3 richtext-text-zinc-500",
+                    name: "MenuDown"
+                  }
+                )
               }
             )
           }
+        ),
+        /* @__PURE__ */ o(
+          j,
+          {
+            align: "start",
+            className: "richtext-flex richtext-w-full richtext-min-w-4 richtext-flex-row richtext-gap-1 !richtext-p-[4px]",
+            side: "bottom",
+            hideWhenDetached: !0,
+            children: s == null ? void 0 : s.map((t, n) => {
+              var l, m;
+              return /* @__PURE__ */ x(y, { children: [
+                /* @__PURE__ */ o(
+                  K,
+                  {
+                    "data-state": r === t.value ? "on" : "off",
+                    asChild: !0,
+                    children: /* @__PURE__ */ o(
+                      A,
+                      {
+                        className: "richtext-size-7 richtext-p-1",
+                        onClick: () => {
+                          t == null || t.action(), h(!1);
+                        },
+                        size: "sm",
+                        children: (t == null ? void 0 : t.icon) && /* @__PURE__ */ o(f, { name: t.icon })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ x(M, { className: "richtext-flex richtext-flex-col richtext-items-center", children: [
+                  /* @__PURE__ */ o("span", { children: t.title }),
+                  !!((l = t.shortcutKeys) != null && l.length) && /* @__PURE__ */ o("span", { children: (m = t.shortcutKeys) == null ? void 0 : m.map((T) => z(T)).join(" ") })
+                ] })
+              ] }, `text-direction-${n}`);
+            })
+          }
         )
-      }
-    ),
-    /* @__PURE__ */ n(
-      A,
-      {
-        align: "start",
-        className: "richtext-flex richtext-w-full richtext-min-w-4 richtext-flex-row richtext-gap-1 !richtext-p-[4px]",
-        side: "bottom",
-        children: (r = t == null ? void 0 : t.items) == null ? void 0 : r.map((e, s) => {
-          var c, o;
-          return /* @__PURE__ */ h(C, { children: [
-            /* @__PURE__ */ n(w, { asChild: !0, children: /* @__PURE__ */ n(
-              M,
-              {
-                className: "richtext-size-7 richtext-p-1",
-                "data-state": i.title === e.title ? "on" : "off",
-                onClick: e == null ? void 0 : e.action,
-                pressed: i.title === e.title,
-                size: "sm",
-                children: (e == null ? void 0 : e.icon) && /* @__PURE__ */ n(T, { name: e.icon })
-              }
-            ) }),
-            /* @__PURE__ */ h(P, { className: "richtext-flex richtext-flex-col richtext-items-center", children: [
-              /* @__PURE__ */ n("span", { children: e.title }),
-              !!((c = e.shortcutKeys) != null && c.length) && /* @__PURE__ */ n("span", { children: (o = e.shortcutKeys) == null ? void 0 : o.map((u) => z(u)).join(" ") })
-            ] })
-          ] }, `text-align-${s}`);
-        })
-      }
-    )
-  ] });
+      ]
+    }
+  ) : /* @__PURE__ */ o(D, {});
 }
-const B = /* @__PURE__ */ b.create({
-  name: "text-direction",
+const O = /* @__PURE__ */ g.create({
+  name: "richTextTextDirection",
   addOptions() {
-    var t;
+    var i;
     return {
-      ...(t = this.parent) == null ? void 0 : t.call(this),
-      types: ["heading", "paragraph"],
-      directions: ["auto", "ltr", "rtl"],
+      ...(i = this.parent) == null ? void 0 : i.call(this),
+      directions: ["auto", "ltr", "rtl", "unset"],
       defaultDirection: "auto",
       button({
-        editor: i,
-        extension: r,
-        t: e
+        editor: c,
+        extension: h,
+        t: p
       }) {
-        var x;
-        const s = ((x = r.options) == null ? void 0 : x.directions) || [], c = {
+        var a;
+        const u = ((a = h.options) == null ? void 0 : a.directions) || [], s = {
           auto: "TextDirection",
           ltr: "LeftToRight",
-          rtl: "RightToLeft"
-        }, o = s.map((a) => ({
-          title: e(`editor.textDirection.${a}.tooltip`),
-          icon: c[a],
-          isActive: () => !1,
+          rtl: "RightToLeft",
+          unset: "X"
+        }, d = u.map((e) => ({
+          title: p(`editor.textDirection.${e}.tooltip`),
+          value: e,
+          icon: s[e],
           action: () => {
-            var l, f, d, m;
-            if (a === "auto") {
-              (f = (l = i.commands) == null ? void 0 : l.unsetTextDirection) == null || f.call(l);
+            var r, t, n, l;
+            if (e === "unset") {
+              (t = (r = c.commands) == null ? void 0 : r.unsetTextDirection) == null || t.call(r);
               return;
             }
-            (m = (d = i.commands) == null ? void 0 : d.setTextDirection) == null || m.call(d, a);
+            (l = (n = c.commands) == null ? void 0 : n.setTextDirection) == null || l.call(n, e);
           },
           disabled: !1
-        })), u = o.filter((a) => a.disabled).length === o.length;
+        }));
         return {
-          component: L,
           componentProps: {
             icon: "TextDirection",
-            tooltip: e("editor.textDirection.tooltip"),
-            disabled: u,
-            items: o
+            tooltip: p("editor.textDirection.tooltip"),
+            items: d,
+            isActive: () => c.getAttributes("paragraph")
           }
         };
       }
     };
-  },
-  addGlobalAttributes() {
-    return [
-      {
-        types: this.options.types,
-        attributes: {
-          dir: {
-            default: this.options.defaultDirection,
-            parseHTML: (t) => t.attributes.dir && this.options.directions.includes(t.attributes.dir) ? t.attributes.dir.value : this.options.defaultDirection,
-            renderHTML: (t) => ({ dir: t.dir })
-          }
-        }
-      }
-    ];
-  },
-  addCommands() {
-    return {
-      setTextDirection: (t) => ({ commands: i }) => this.options.directions.includes(t) ? this.options.types.every((r) => i.updateAttributes(r, { dir: t })) : !1,
-      unsetTextDirection: () => ({ commands: t }) => this.options.types.every((i) => t.resetAttributes(i, "dir"))
-    };
   }
 });
 export {
-  B as TextDirection
+  X as RichTextTextDirection,
+  O as TextDirection
 };

package/lib/TextUnderline.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index-DF2Lp4HZ.cjs"),d=require("./RichTextEditor-CxvwGvQG.cjs");var a=s.Mark.create({name:"underline",addOptions(){return{HTMLAttributes:{}}},parseHTML(){return[{tag:"u"},{style:"text-decoration",consuming:!1,getAttrs:e=>e.includes("underline")?{}:!1}]},renderHTML({HTMLAttributes:e}){return["u",s.mergeAttributes(this.options.HTMLAttributes,e),0]},parseMarkdown(e,n){return n.applyMark(this.name||"underline",n.parseInline(e.tokens||[]))},renderMarkdown(e,n){return`++${n.renderChildren(e)}++`},markdownTokenizer:{name:"underline",level:"inline",start(e){return e.indexOf("++")},tokenize(e,n,t){const r=/^(\+\+)([\s\S]+?)(\+\+)/.exec(e);if(!r)return;const o=r[2].trim();return{type:"underline",raw:r[0],text:o,tokens:t.inlineTokens(o)}}},addCommands(){return{setUnderline:()=>({commands:e})=>e.setMark(this.name),toggleUnderline:()=>({commands:e})=>e.toggleMark(this.name),unsetUnderline:()=>({commands:e})=>e.unsetMark(this.name)}},addKeyboardShortcuts(){return{"Mod-u":()=>this.editor.commands.toggleUnderline(),"Mod-U":()=>this.editor.commands.toggleUnderline()}}}),u=a;const l=u.extend({addOptions(){var e;return{...(e=this.parent)==null?void 0:e.call(this),button({editor:n,t,extension:i}){return{component:d.ActionButton,componentProps:{action:()=>n.commands.toggleUnderline(),isActive:()=>n.isActive("underline")||!1,disabled:!1,icon:"Underline",shortcutKeys:i.options.shortcutKeys??["mod","U"],tooltip:t("editor.underline.tooltip")}}}}}});exports.TextUnderline=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./index-RfTlOzIr.cjs"),s=require("react/jsx-runtime"),h=require("./toggle-D41PzQLJ.cjs");require("react");require("./index-DV5kbgRU.cjs");const a=require("./useButtonProps-C6Vpn190.cjs");var k=u.Mark.create({name:"underline",addOptions(){return{HTMLAttributes:{}}},parseHTML(){return[{tag:"u"},{style:"text-decoration",consuming:!1,getAttrs:e=>e.includes("underline")?{}:!1}]},renderHTML({HTMLAttributes:e}){return["u",u.mergeAttributes(this.options.HTMLAttributes,e),0]},parseMarkdown(e,n){return n.applyMark(this.name||"underline",n.parseInline(e.tokens||[]))},renderMarkdown(e,n){return`++${n.renderChildren(e)}++`},markdownTokenizer:{name:"underline",level:"inline",start(e){return e.indexOf("++")},tokenize(e,n,t){const r=/^(\+\+)([\s\S]+?)(\+\+)/.exec(e);if(!r)return;const i=r[2].trim();return{type:"underline",raw:r[0],text:i,tokens:t.inlineTokens(i)}}},addCommands(){return{setUnderline:()=>({commands:e})=>e.setMark(this.name),toggleUnderline:()=>({commands:e})=>e.toggleMark(this.name),unsetUnderline:()=>({commands:e})=>e.unsetMark(this.name)}},addKeyboardShortcuts(){return{"Mod-u":()=>this.editor.commands.toggleUnderline(),"Mod-U":()=>this.editor.commands.toggleUnderline()}}}),v=k;function x(){const e=a.useButtonProps(l.name),{icon:n=void 0,tooltip:t=void 0,shortcutKeys:o=void 0,tooltipOptions:r={},action:i=void 0,isActive:c=void 0}=(e==null?void 0:e.componentProps)??{},{dataState:m,disabled:d,update:p}=a.useToggleActive(c),g=()=>{d||i&&(i(),p())};return e?s.jsx(h.ActionButton,{action:g,dataState:m,disabled:d,icon:n,shortcutKeys:o,tooltip:t,tooltipOptions:r}):s.jsx(s.Fragment,{})}const l=v.extend({addOptions(){var e;return{...(e=this.parent)==null?void 0:e.call(this),button({editor:n,t,extension:o}){return{componentProps:{action:()=>n.commands.toggleUnderline(),isActive:()=>n.isActive("underline")||!1,disabled:!1,icon:"Underline",shortcutKeys:o.options.shortcutKeys??["mod","U"],tooltip:t("editor.underline.tooltip")}}}}}});exports.RichTextUnderline=x;exports.TextUnderline=l;

package/lib/TextUnderline.d.cts

@@ -1,5 +1,6 @@
 import { Editor } from '@tiptap/react';
 import { Extension } from '@tiptap/core';
+import { JSX } from 'react/jsx-runtime';
 import { Mark } from '@tiptap/core';
 import { UnderlineOptions as UnderlineOptions_2 } from '@tiptap/extension-underline';
 
@@ -72,6 +73,8 @@ declare interface GeneralOptions<T> {
     shortcutKeys?: string[] | string[][];
 }
 
+export declare function RichTextUnderline(): JSX.Element;
+
 export declare const TextUnderline: Mark<UnderlineOptions, any>;
 
 export declare interface UnderlineOptions extends UnderlineOptions_2, GeneralOptions<UnderlineOptions> {
@@ -110,6 +113,27 @@ declare module '@tiptap/core' {
 }
 
 
+declare module '@tiptap/core' {
+    interface Storage {
+        color: ColorStorage;
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        columns: {
+            insertColumns: (attrs?: {
+                cols: number;
+            }) => ReturnType;
+            addColBefore: () => ReturnType;
+            addColAfter: () => ReturnType;
+            deleteCol: () => ReturnType;
+        };
+    }
+}
+
+
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         drawer: {
@@ -141,7 +165,7 @@ declare module '@tiptap/core' {
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         exportWord: {
-            exportToWord: () => ReturnType;
+            exportToWord: (docState: any) => ReturnType;
         };
     }
 }
@@ -166,10 +190,8 @@ declare module '@tiptap/core' {
 
 
 declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        painter: {
-            setPainter: (marks: Mark[]) => ReturnType;
-        };
+    interface Storage {
+        highlight: HighlightStorage;
     }
 }
 
@@ -254,16 +276,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        lineHeight: {
-            setLineHeight: (lineHeight: string) => ReturnType;
-            unsetLineHeight: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         mermaid: {
@@ -274,20 +286,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        columns: {
-            insertColumns: (attrs?: {
-                cols: number;
-            }) => ReturnType;
-            addColBefore: () => ReturnType;
-            addColAfter: () => ReturnType;
-            deleteCol: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         search: {
@@ -311,16 +309,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        tableOfContents: {
-            setTableOfContents: () => ReturnType;
-            removeTableOfContents: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         twitter: {

package/lib/TextUnderline.d.ts

@@ -1,5 +1,6 @@
 import { Editor } from '@tiptap/react';
 import { Extension } from '@tiptap/core';
+import { JSX } from 'react/jsx-runtime';
 import { Mark } from '@tiptap/core';
 import { UnderlineOptions as UnderlineOptions_2 } from '@tiptap/extension-underline';
 
@@ -72,6 +73,8 @@ declare interface GeneralOptions<T> {
     shortcutKeys?: string[] | string[][];
 }
 
+export declare function RichTextUnderline(): JSX.Element;
+
 export declare const TextUnderline: Mark<UnderlineOptions, any>;
 
 export declare interface UnderlineOptions extends UnderlineOptions_2, GeneralOptions<UnderlineOptions> {
@@ -110,6 +113,27 @@ declare module '@tiptap/core' {
 }
 
 
+declare module '@tiptap/core' {
+    interface Storage {
+        color: ColorStorage;
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        columns: {
+            insertColumns: (attrs?: {
+                cols: number;
+            }) => ReturnType;
+            addColBefore: () => ReturnType;
+            addColAfter: () => ReturnType;
+            deleteCol: () => ReturnType;
+        };
+    }
+}
+
+
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         drawer: {
@@ -141,7 +165,7 @@ declare module '@tiptap/core' {
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         exportWord: {
-            exportToWord: () => ReturnType;
+            exportToWord: (docState: any) => ReturnType;
         };
     }
 }
@@ -166,10 +190,8 @@ declare module '@tiptap/core' {
 
 
 declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        painter: {
-            setPainter: (marks: Mark[]) => ReturnType;
-        };
+    interface Storage {
+        highlight: HighlightStorage;
     }
 }
 
@@ -254,16 +276,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        lineHeight: {
-            setLineHeight: (lineHeight: string) => ReturnType;
-            unsetLineHeight: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         mermaid: {
@@ -274,20 +286,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        columns: {
-            insertColumns: (attrs?: {
-                cols: number;
-            }) => ReturnType;
-            addColBefore: () => ReturnType;
-            addColAfter: () => ReturnType;
-            deleteCol: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         search: {
@@ -311,16 +309,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        tableOfContents: {
-            setTableOfContents: () => ReturnType;
-            removeTableOfContents: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         twitter: {

package/lib/TextUnderline.js

@@ -1,6 +1,10 @@
-import { M as s, m as d } from "./index-kbO3iWqL.js";
-import { A as a } from "./RichTextEditor-DGcKEUGr.js";
-var u = s.create({
+import { M as m, m as p } from "./index-DnWWK9F_.js";
+import { jsx as d, Fragment as g } from "react/jsx-runtime";
+import { A as f } from "./toggle-Cdp4IT2U.js";
+import "react";
+import "./index-BPfVXs5_.js";
+import { u as h, a as k } from "./useButtonProps-BsEd4zYM.js";
+var M = m.create({
   name: "underline",
   addOptions() {
     return {
@@ -20,13 +24,13 @@ var u = s.create({
     ];
   },
   renderHTML({ HTMLAttributes: e }) {
-    return ["u", d(this.options.HTMLAttributes, e), 0];
+    return ["u", p(this.options.HTMLAttributes, e), 0];
   },
-  parseMarkdown(e, n) {
-    return n.applyMark(this.name || "underline", n.parseInline(e.tokens || []));
+  parseMarkdown(e, t) {
+    return t.applyMark(this.name || "underline", t.parseInline(e.tokens || []));
   },
-  renderMarkdown(e, n) {
-    return `++${n.renderChildren(e)}++`;
+  renderMarkdown(e, t) {
+    return `++${t.renderChildren(e)}++`;
   },
   markdownTokenizer: {
     name: "underline",
@@ -34,7 +38,7 @@ var u = s.create({
     start(e) {
       return e.indexOf("++");
     },
-    tokenize(e, n, t) {
+    tokenize(e, t, n) {
       const r = /^(\+\+)([\s\S]+?)(\+\+)/.exec(e);
       if (!r)
         return;
@@ -43,7 +47,7 @@ var u = s.create({
         type: "underline",
         raw: r[0],
         text: o,
-        tokens: t.inlineTokens(o)
+        tokens: n.inlineTokens(o)
       };
     }
   },
@@ -60,24 +64,47 @@ var u = s.create({
       "Mod-U": () => this.editor.commands.toggleUnderline()
     };
   }
-}), l = u;
-const p = /* @__PURE__ */ l.extend({
+}), v = M;
+function H() {
+  const e = h(U.name), {
+    icon: t = void 0,
+    tooltip: n = void 0,
+    shortcutKeys: i = void 0,
+    tooltipOptions: r = {},
+    action: o = void 0,
+    isActive: a = void 0
+  } = (e == null ? void 0 : e.componentProps) ?? {}, { dataState: u, disabled: s, update: l } = k(a), c = () => {
+    s || o && (o(), l());
+  };
+  return e ? /* @__PURE__ */ d(
+    f,
+    {
+      action: c,
+      dataState: u,
+      disabled: s,
+      icon: t,
+      shortcutKeys: i,
+      tooltip: n,
+      tooltipOptions: r
+    }
+  ) : /* @__PURE__ */ d(g, {});
+}
+const U = /* @__PURE__ */ v.extend({
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-expect-error
   addOptions() {
     var e;
     return {
       ...(e = this.parent) == null ? void 0 : e.call(this),
-      button({ editor: n, t, extension: i }) {
+      button({ editor: t, t: n, extension: i }) {
         return {
-          component: a,
           componentProps: {
-            action: () => n.commands.toggleUnderline(),
-            isActive: () => n.isActive("underline") || !1,
+            action: () => t.commands.toggleUnderline(),
+            isActive: () => t.isActive("underline") || !1,
             disabled: !1,
             icon: "Underline",
             shortcutKeys: i.options.shortcutKeys ?? ["mod", "U"],
-            tooltip: t("editor.underline.tooltip")
+            tooltip: n("editor.underline.tooltip")
           }
         };
       }
@@ -85,5 +112,6 @@ const p = /* @__PURE__ */ l.extend({
   }
 });
 export {
-  p as TextUnderline
+  H as RichTextUnderline,
+  U as TextUnderline
 };