reactjs-tiptap-editor 0.4.1 → 1.0.0

package/lib/TextDirection.d.ts

@@ -1,4 +1,36 @@
+import { default as default_2 } from 'react';
 import { Extension } from '@tiptap/core';
+import { JSX } from 'react/jsx-runtime';
+
+/**
+ * Represents the props for the ButtonView component.
+ */
+declare interface ButtonViewReturnComponentProps {
+    /** Method triggered when action is performed */
+    action?: (value?: any) => void;
+    /** Whether it is in the active state */
+    isActive?: () => boolean;
+    /** Button icon */
+    icon?: any;
+    /** Text displayed on hover */
+    tooltip?: string;
+    [x: string]: any;
+}
+
+export declare interface Item {
+    title: string;
+    value?: string;
+    icon?: any;
+    isActive: NonNullable<ButtonViewReturnComponentProps['isActive']>;
+    action?: ButtonViewReturnComponentProps['action'];
+    style?: default_2.CSSProperties;
+    shortcutKeys?: string[];
+    disabled?: boolean;
+    divider?: boolean;
+    default?: boolean;
+}
+
+export declare function RichTextTextDirection(): JSX.Element;
 
 export declare const TextDirection: Extension<any, any>;
 
@@ -35,11 +67,22 @@ declare module '@tiptap/core' {
 }
 
 
+declare module '@tiptap/core' {
+    interface Storage {
+        color: ColorStorage;
+    }
+}
+
+
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        drawer: {
-            setDrawer: (options: any, replace?: any) => ReturnType;
-            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
+        columns: {
+            insertColumns: (attrs?: {
+                cols: number;
+            }) => ReturnType;
+            addColBefore: () => ReturnType;
+            addColAfter: () => ReturnType;
+            deleteCol: () => ReturnType;
         };
     }
 }
@@ -47,8 +90,9 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        excalidraw: {
-            setExcalidraw: (attrs?: IExcalidrawAttrs) => ReturnType;
+        drawer: {
+            setDrawer: (options: any, replace?: any) => ReturnType;
+            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
         };
     }
 }
@@ -66,7 +110,16 @@ declare module '@tiptap/core' {
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         exportWord: {
-            exportToWord: () => ReturnType;
+            exportToWord: (docState: any) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        excalidraw: {
+            setExcalidraw: (attrs?: IExcalidrawAttrs) => ReturnType;
         };
     }
 }
@@ -91,10 +144,8 @@ declare module '@tiptap/core' {
 
 
 declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        painter: {
-            setPainter: (marks: Mark[]) => ReturnType;
-        };
+    interface Storage {
+        highlight: HighlightStorage;
     }
 }
 
@@ -134,22 +185,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        indent: {
-            /**
-             * Set the indent attribute
-             */
-            indent: () => ReturnType;
-            /**
-             * Set the outdent attribute
-             */
-            outdent: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         imageGifUpload: {
@@ -172,8 +207,15 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        katex: {
-            setKatex: (arg?: IKatexAttrs) => ReturnType;
+        indent: {
+            /**
+             * Set the indent attribute
+             */
+            indent: () => ReturnType;
+            /**
+             * Set the outdent attribute
+             */
+            outdent: () => ReturnType;
         };
     }
 }
@@ -181,9 +223,8 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        lineHeight: {
-            setLineHeight: (lineHeight: string) => ReturnType;
-            unsetLineHeight: () => ReturnType;
+        katex: {
+            setKatex: (arg?: IKatexAttrs) => ReturnType;
         };
     }
 }
@@ -199,20 +240,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: {
@@ -236,16 +263,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/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,11 +113,22 @@ declare module '@tiptap/core' {
 }
 
 
+declare module '@tiptap/core' {
+    interface Storage {
+        color: ColorStorage;
+    }
+}
+
+
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        drawer: {
-            setDrawer: (options: any, replace?: any) => ReturnType;
-            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
+        columns: {
+            insertColumns: (attrs?: {
+                cols: number;
+            }) => ReturnType;
+            addColBefore: () => ReturnType;
+            addColAfter: () => ReturnType;
+            deleteCol: () => ReturnType;
         };
     }
 }
@@ -122,8 +136,9 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        excalidraw: {
-            setExcalidraw: (attrs?: IExcalidrawAttrs) => ReturnType;
+        drawer: {
+            setDrawer: (options: any, replace?: any) => ReturnType;
+            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
         };
     }
 }
@@ -141,7 +156,16 @@ declare module '@tiptap/core' {
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         exportWord: {
-            exportToWord: () => ReturnType;
+            exportToWord: (docState: any) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        excalidraw: {
+            setExcalidraw: (attrs?: IExcalidrawAttrs) => 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;
     }
 }
 
@@ -209,22 +231,6 @@ declare module '@tiptap/core' {
 }
 
 
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        indent: {
-            /**
-             * Set the indent attribute
-             */
-            indent: () => ReturnType;
-            /**
-             * Set the outdent attribute
-             */
-            outdent: () => ReturnType;
-        };
-    }
-}
-
-
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         imageGifUpload: {
@@ -247,8 +253,15 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        katex: {
-            setKatex: (arg?: IKatexAttrs) => ReturnType;
+        indent: {
+            /**
+             * Set the indent attribute
+             */
+            indent: () => ReturnType;
+            /**
+             * Set the outdent attribute
+             */
+            outdent: () => ReturnType;
         };
     }
 }
@@ -256,9 +269,8 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        lineHeight: {
-            setLineHeight: (lineHeight: string) => ReturnType;
-            unsetLineHeight: () => ReturnType;
+        katex: {
+            setKatex: (arg?: IKatexAttrs) => ReturnType;
         };
     }
 }
@@ -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: {