reactjs-tiptap-editor 0.4.1 → 1.0.0

package/lib/Katex.js

@@ -1,198 +1,7 @@
-import { N as b, n as g, m as w } from "./index-kbO3iWqL.js";
-import { N, R as k } from "./dom-dataset-lYeH6gfI.js";
-import { jsx as n, jsxs as c } from "react/jsx-runtime";
-import { useState as T, useCallback as $, useEffect as v, useMemo as l } from "react";
-import x from "katex";
-import { HelpCircle as A } from "lucide-react";
-import { K as S, P as L, o as P, A as C, p as H, L as I, B as M, N as y } from "./RichTextEditor-DGcKEUGr.js";
-import { T as K } from "./textarea-aPtytkDx.js";
-import { u as R } from "./index-LmrOdnen.js";
-function V({ editor: e, ...t }) {
-  const { t: a } = R(), o = S(e, h.name, {
-    text: "",
-    defaultShowPicker: !1
-  }), { text: s, defaultShowPicker: r } = o, [i, u] = T(""), f = $(() => {
-    e.chain().focus().setKatex({ text: i }).run(), u("");
-  }, [e, i]);
-  v(() => {
-    r && e.chain().updateAttributes(h.name, { defaultShowPicker: !1 }).focus().run();
-  }, [e, r]);
-  const d = l(() => {
-    try {
-      return x.renderToString(`${i}`);
-    } catch {
-      return i;
-    }
-  }, [i]), m = l(
-    () => `${i}`.trim() ? /* @__PURE__ */ n(
-      "span",
-      {
-        contentEditable: !1,
-        dangerouslySetInnerHTML: { __html: d || "" }
-      }
-    ) : null,
-    [i, d]
-  );
-  return /* @__PURE__ */ c(L, { modal: !0, children: [
-    /* @__PURE__ */ n(P, { asChild: !0, children: /* @__PURE__ */ n(
-      C,
-      {
-        icon: t == null ? void 0 : t.icon,
-        tooltip: t == null ? void 0 : t.tooltip,
-        tooltipOptions: t == null ? void 0 : t.tooltipOptions
-      }
-    ) }),
-    /* @__PURE__ */ c(
-      H,
-      {
-        align: "start",
-        className: "richtext-size-full richtext-p-2",
-        hideWhenDetached: !0,
-        side: "bottom",
-        children: [
-          /* @__PURE__ */ n(I, { className: "richtext-mb-[6px]", children: a("editor.formula.dialog.text") }),
-          /* @__PURE__ */ n("div", { className: "richtext-mb-[16px] richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5", children: /* @__PURE__ */ n("div", { className: "richtext-relative richtext-w-full richtext-max-w-sm", children: /* @__PURE__ */ n(
-            K,
-            {
-              autoFocus: !0,
-              className: "richtext-w-full",
-              defaultValue: s,
-              onChange: (p) => u(p.target.value),
-              placeholder: "Text",
-              required: !0,
-              rows: 3,
-              value: i
-            }
-          ) }) }),
-          m && /* @__PURE__ */ n("div", { className: "richtext-my-[10px] richtext-max-w-[286px] richtext-overflow-auto richtext-whitespace-nowrap richtext-rounded-[6px] !richtext-border richtext-p-[10px]", children: m }),
-          /* @__PURE__ */ c("div", { className: "richtext-flex richtext-items-center richtext-justify-between richtext-gap-[6px]", children: [
-            /* @__PURE__ */ n(
-              M,
-              {
-                className: "richtext-flex-1",
-                onClick: f,
-                children: "Submit"
-              }
-            ),
-            /* @__PURE__ */ n(
-              "a",
-              {
-                href: "https://katex.org/docs/supported",
-                rel: "noreferrer noopener",
-                target: "_blank",
-                children: /* @__PURE__ */ n(A, { size: 16 })
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-function B(e, t = 1) {
-  let a = 0, o = 0, s = 0;
-  if (e.startsWith("rgb")) {
-    const r = e.replace(/\s/g, "").match(/rgb\((.*)\)$/)[1].split(",");
-    a = +r[0], o = +r[1], s = +r[2];
-  } else if (e.startsWith("#")) {
-    let r = e.replace("#", "");
-    r.length === 3 && (r = `${r[0]}${r[0]}${r[1]}${r[1]}${r[2]}${r[2]}`), a = Number.parseInt(r.substring(0, 2), 16), o = Number.parseInt(r.substring(2, 4), 16), s = Number.parseInt(r.substring(4, 6), 16);
-  } else
-    return e;
-  return t > 1 && t <= 100 && (t = t / 100), `rgba(${a},${o},${s},${t})`;
-}
-function W({ node: e }) {
-  const t = y(), { text: a } = e.attrs, o = l(() => {
-    const i = "rgb(254, 242, 237)";
-    return t === "dark" ? B(i, 0.75) : i;
-  }, [t]), s = l(() => {
-    try {
-      return x.renderToString(`${a}`);
-    } catch {
-      return a;
-    }
-  }, [a]), r = l(
-    () => a.trim() ? /* @__PURE__ */ n("span", { contentEditable: !1, dangerouslySetInnerHTML: { __html: s } }) : /* @__PURE__ */ n("span", { contentEditable: !1, children: "Not enter a formula" }),
-    [a, s]
-  );
-  return /* @__PURE__ */ n(
-    N,
-    {
-      style: {
-        display: "inline-block",
-        backgroundColor: o
-      },
-      as: "span",
-      children: r
-    }
-  );
-}
-function _(e) {
-  return (t) => t.getAttribute(e);
-}
-const h = /* @__PURE__ */ b.create({
-  name: "katex",
-  group: "inline",
-  inline: !0,
-  defining: !0,
-  draggable: !0,
-  selectable: !0,
-  addOptions() {
-    return {
-      HTMLAttributes: {
-        class: "katex"
-      },
-      button: ({ editor: e, t }) => ({
-        component: V,
-        componentProps: {
-          editor: e,
-          action: () => !0,
-          isActive: () => !1,
-          disabled: !1,
-          icon: "KatexIcon",
-          tooltip: t("editor.katex.tooltip")
-        }
-      })
-    };
-  },
-  addAttributes() {
-    return {
-      text: {
-        default: "",
-        parseHTML: _("text")
-      },
-      defaultShowPicker: {
-        default: !1
-      }
-    };
-  },
-  parseHTML() {
-    return [{ tag: "span.katex" }];
-  },
-  renderHTML({ HTMLAttributes: e }) {
-    return ["span", w(this.options && this.options.HTMLAttributes || {}, e)];
-  },
-  addCommands() {
-    return {
-      setKatex: (e) => ({ commands: t }) => t.insertContent({
-        type: this.name,
-        attrs: e
-      })
-    };
-  },
-  addInputRules() {
-    return [
-      g({
-        find: /^\$katex\$$/,
-        type: this.type,
-        getAttributes: () => ({ defaultShowPicker: !0 })
-      })
-    ];
-  },
-  addNodeView() {
-    return k(W);
-  }
-});
+import "./index-DnWWK9F_.js";
+import "./index-DzcKxutn.js";
+import { K as r, R as x } from "./Katex-DsYXsjSS.js";
 export {
-  h as Katex
+  r as Katex,
+  x as RichTextKatex
 };

package/lib/LineHeight.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("./index-DF2Lp4HZ.cjs"),g=require("./index-6D1J-A-o.cjs"),c=require("react/jsx-runtime"),L=require("react"),u=require("./RichTextEditor-CxvwGvQG.cjs");function T(e){return Number.parseFloat(e.replace("%",""))/100}function x(e){const{t}=g.useLocale(),[n,a]=L.useState("default");function o(i){i==="default"?e.editor.commands.unsetLineHeight():e.editor.commands.setLineHeight(i),a(i)}const d=L.useMemo(()=>{const s=e.editor.extensionManager.extensions.find(l=>l.name==="lineHeight").options.lineHeights.map(l=>({label:T(l),value:l}));return s.unshift({label:t("editor.default"),value:"default"}),s},[e]);return c.jsxs(u.DropdownMenu,{children:[c.jsx(u.DropdownMenuTrigger,{asChild:!0,disabled:e==null?void 0:e.disabled,children:c.jsx(u.ActionButton,{customClass:"!richtext-w-12 richtext-h-12",disabled:e==null?void 0:e.disabled,icon:"LineHeight",tooltip:e==null?void 0:e.tooltip,tooltipOptions:e==null?void 0:e.tooltipOptions,children:c.jsx(u.IconComponent,{className:"richtext-ml-1 richtext-size-3 richtext-text-zinc-500",name:"MenuDown"})})}),c.jsx(u.DropdownMenuContent,{className:"richtext-min-w-24",children:d==null?void 0:d.map((i,h)=>c.jsx(u.DropdownMenuCheckboxItem,{checked:i.value===n,onClick:()=>o(i.value),children:i.label},`lineHeight-${h}`))})]})}const _=["paragraph","heading","list_item","todo_item"];function E(e,t){const{selection:n,doc:a}=e;if(!n||!a||!(n instanceof m.TextSelection||n instanceof m.AllSelection))return e;const{from:o,to:d}=n,i=[],h=t&&t!==g.DEFAULT_LINE_HEIGHT?t:null;if(a.nodesBetween(o,d,(s,l)=>{const r=s.type;return _.includes(r.name)?((s.attrs.lineHeight||null)!==h&&i.push({node:s,pos:l,nodeType:r}),r.name!=="list_item"&&r.name!=="todo_item"):!0}),i.length===0)return e;for(const s of i){const{node:l,pos:r,nodeType:f}=s;let{attrs:H}=l;H={...H,lineHeight:h},e=e.setNodeMarkup(r,f,H,l.marks)}return e}function b(e){return({state:t,dispatch:n})=>{const{selection:a}=t;let{tr:o}=t;return o=o.setSelection(a),o=E(o,e),o.docChanged?(n&&n(o),!0):!1}}const I=m.Extension.create({name:"lineHeight",addOptions(){var e;return{...(e=this.parent)==null?void 0:e.call(this),types:["paragraph","heading","list_item","todo_item"],lineHeights:g.DEFAULT_LINE_HEIGHT_LIST,defaultHeight:g.DEFAULT_LINE_HEIGHT,button({editor:t,t:n}){return{component:x,componentProps:{editor:t,tooltip:n("editor.lineheight.tooltip")}}}}},addGlobalAttributes(){return[{types:this.options.types,attributes:{lineHeight:{default:null,parseHTML:e=>e.style.lineHeight||this.options.defaultHeight,renderHTML:e=>e.lineHeight===this.options.defaultHeight||!e.lineHeight?{}:{style:`line-height: ${e.lineHeight}`}}}}]},addCommands(){return{setLineHeight:e=>b(e),unsetLineHeight:()=>({commands:e})=>this.options.types.every(t=>e.resetAttributes(t,"lineHeight"))}}});exports.DEFAULT_LINE_HEIGHT_LIST=g.DEFAULT_LINE_HEIGHT_LIST;exports.LineHeight=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("./index-N--9MohJ.cjs"),p=require("./index-Dfmm6FTT.cjs"),t=require("react/jsx-runtime"),x=require("react"),D=require("./toggle-D41PzQLJ.cjs");require("./index-DV5kbgRU.cjs");const v=require("./Icon-DUpv2cI6.cjs"),d=require("./useButtonProps-C6Vpn190.cjs"),u=require("./dropdown-menu-CdSm4emp.cjs");function H(){const n=d.useButtonProps(f.name),{tooltip:o=void 0,items:i,icon:c,isActive:l=void 0}=(n==null?void 0:n.componentProps)??{},{editorDisabled:s,dataState:r}=d.useActive(l);return n?t.jsxs(u.DropdownMenu,{children:[t.jsx(u.DropdownMenuTrigger,{asChild:!0,disabled:s,children:t.jsx(D.ActionButton,{customClass:"!richtext-w-12 richtext-h-12",disabled:s,icon:c,tooltip:o,children:t.jsx(v.IconComponent,{className:"richtext-ml-1 richtext-size-3 richtext-text-zinc-500",name:"MenuDown"})})}),t.jsx(u.DropdownMenuContent,{className:"richtext-min-w-24",children:i==null?void 0:i.map((e,a)=>t.jsxs(x.Fragment,{children:[t.jsx(u.DropdownMenuCheckboxItem,{checked:e.value===(r==null?void 0:r.value),onClick:()=>e==null?void 0:e.action(),children:e.label}),e.value==="Default"&&t.jsx(u.DropdownMenuSeparator,{})]},`line-height-${a}`))})]}):t.jsx(t.Fragment,{})}const f=g.LineHeight.extend({addOptions(){var n;return{...(n=this.parent)==null?void 0:n.call(this),lineHeights:p.DEFAULT_LINE_HEIGHT_LIST,button({editor:o,extension:i,t:c}){var s,r;const l=(r=(s=i==null?void 0:i.options)==null?void 0:s.lineHeights)==null?void 0:r.map(e=>({label:e==="Default"?c("editor.default"):String(e),value:e,isActive:()=>e==="Default"?!0:o.isActive("textStyle",{lineHeight:e})||!1,action:()=>{if(e==="Default"){o.chain().focus().unsetLineHeight().run();return}o.chain().focus().toggleTextStyle({lineHeight:e}).run()},default:e==="Default"||!1}));return{componentProps:{tooltip:c("editor.lineheight.tooltip"),items:l,icon:"LineHeight",isActive:()=>{const e=(l||[]).find(h=>h.isActive()&&!h.default);return e&&!e.default?e:{value:"Default",isActive:()=>!1}}}}}}}});exports.LineHeight=f;exports.RichTextLineHeight=H;

package/lib/LineHeight.d.cts

@@ -1,5 +1,7 @@
 import { Editor } from '@tiptap/react';
 import { Extension } from '@tiptap/core';
+import { JSX } from 'react/jsx-runtime';
+import { LineHeightOptions as LineHeightOptions_2 } from '@tiptap/extension-text-style';
 
 /**
  * Represents the ButtonView function.
@@ -54,9 +56,6 @@ declare interface ButtonViewReturnComponentSlots {
     [x: string]: () => any;
 }
 
-/** Line Height List */
-export declare const DEFAULT_LINE_HEIGHT_LIST: string[];
-
 /**
  * Represents the general options for Tiptap extensions.
  */
@@ -75,12 +74,12 @@ declare interface GeneralOptions<T> {
 
 export declare const LineHeight: Extension<LineHeightOptions, any>;
 
-export declare interface LineHeightOptions extends GeneralOptions<LineHeightOptions> {
-    types: string[];
+export declare interface LineHeightOptions extends GeneralOptions<LineHeightOptions_2> {
     lineHeights: string[];
-    defaultHeight: string;
 }
 
+export declare function RichTextLineHeight(): JSX.Element;
+
 export { }
 
 
@@ -114,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;
         };
     }
 }
@@ -126,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;
         };
     }
 }
@@ -145,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;
         };
     }
 }
@@ -170,10 +190,8 @@ declare module '@tiptap/core' {
 
 
 declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        painter: {
-            setPainter: (marks: Mark[]) => ReturnType;
-        };
+    interface Storage {
+        highlight: HighlightStorage;
     }
 }
 
@@ -213,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: {
@@ -251,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;
         };
     }
 }
@@ -260,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;
         };
     }
 }
@@ -278,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: {
@@ -315,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/LineHeight.d.ts

@@ -1,5 +1,7 @@
 import { Editor } from '@tiptap/react';
 import { Extension } from '@tiptap/core';
+import { JSX } from 'react/jsx-runtime';
+import { LineHeightOptions as LineHeightOptions_2 } from '@tiptap/extension-text-style';
 
 /**
  * Represents the ButtonView function.
@@ -54,9 +56,6 @@ declare interface ButtonViewReturnComponentSlots {
     [x: string]: () => any;
 }
 
-/** Line Height List */
-export declare const DEFAULT_LINE_HEIGHT_LIST: string[];
-
 /**
  * Represents the general options for Tiptap extensions.
  */
@@ -75,12 +74,12 @@ declare interface GeneralOptions<T> {
 
 export declare const LineHeight: Extension<LineHeightOptions, any>;
 
-export declare interface LineHeightOptions extends GeneralOptions<LineHeightOptions> {
-    types: string[];
+export declare interface LineHeightOptions extends GeneralOptions<LineHeightOptions_2> {
     lineHeights: string[];
-    defaultHeight: string;
 }
 
+export declare function RichTextLineHeight(): JSX.Element;
+
 export { }
 
 
@@ -114,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;
         };
     }
 }
@@ -126,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;
         };
     }
 }
@@ -145,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;
         };
     }
 }
@@ -170,10 +190,8 @@ declare module '@tiptap/core' {
 
 
 declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        painter: {
-            setPainter: (marks: Mark[]) => ReturnType;
-        };
+    interface Storage {
+        highlight: HighlightStorage;
     }
 }
 
@@ -213,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: {
@@ -251,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;
         };
     }
 }
@@ -260,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;
         };
     }
 }
@@ -278,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: {
@@ -315,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: {