reactjs-tiptap-editor 0.4.2 → 1.0.1

package/lib/Color.js

@@ -1,109 +1,153 @@
-import { C } from "./index-ByurDDMv.js";
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { useState as h, useCallback as f } from "react";
-import { e as u, A as s, C as x, B as m, f as L } from "./RichTextEditor-DGcKEUGr.js";
-function g({ fill: t }) {
-  return /* @__PURE__ */ e(
+import { C as d } from "./index-D2TUfKkC.js";
+import { jsx as o, jsxs as f, Fragment as p } from "react/jsx-runtime";
+import { useState as m, useEffect as x } from "react";
+import { A as g } from "./toggle-Cdp4IT2U.js";
+import { C as v } from "./separator-CuBW_w98.js";
+import "./index-BPfVXs5_.js";
+import { I as L } from "./Icon-jKs8Hr6p.js";
+import { u as A, b as y } from "./useButtonProps-BsEd4zYM.js";
+function S({ fill: t }) {
+  return /* @__PURE__ */ o(
     "svg",
     {
-      width: "18px",
       height: "18px",
-      viewBox: "0 0 240 240",
       version: "1.1",
+      viewBox: "0 0 240 240",
+      width: "18px",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ e("g", { stroke: "none", strokeWidth: 1, fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ e("g", { transform: "translate(0.000000, 0.500000)", children: /* @__PURE__ */ d("g", { transform: "translate(39.000000, 17.353553)", children: [
-        /* @__PURE__ */ e(
-          "path",
-          {
-            d: "M11,201.146447 L167,201.146447 C173.075132,201.146447 178,206.071314 178,212.146447 C178,218.221579 173.075132,223.146447 167,223.146447 L11,223.146447 C4.92486775,223.146447 7.43989126e-16,218.221579 0,212.146447 C-7.43989126e-16,206.071314 4.92486775,201.146447 11,201.146447 Z",
-            id: "矩形",
-            fill: t || "#DF2A3F",
-            fillRule: "evenodd"
-          }
-        ),
-        /* @__PURE__ */ e(
-          "path",
-          {
-            d: "M72.3425855,16.8295583 C75.799482,7.50883712 86.1577877,2.75526801 95.4785089,6.21216449 C100.284516,7.99463061 104.096358,11.7387855 105.968745,16.4968188 L106.112518,16.8745422 L159.385152,161.694068 C161.291848,166.877345 158.635655,172.624903 153.452378,174.531599 C148.358469,176.405421 142.719567,173.872338 140.716873,168.864661 L140.614848,168.598825 L89.211,28.86 L37.3759214,168.623816 C35.4885354,173.712715 29.8981043,176.351047 24.7909589,174.617647 L24.5226307,174.522368 C19.4337312,172.634982 16.7953993,167.044551 18.5287999,161.937406 L18.6240786,161.669077 L72.3425855,16.8295583 Z",
-            id: "路径-21",
-            fill: "currentColor",
-            fillRule: "nonzero"
-          }
-        ),
-        /* @__PURE__ */ e(
-          "path",
-          {
-            d: "M121,103.146447 C126.522847,103.146447 131,107.623599 131,113.146447 C131,118.575687 126.673329,122.994378 121.279905,123.142605 L121,123.146447 L55,123.146447 C49.4771525,123.146447 45,118.669294 45,113.146447 C45,107.717207 49.3266708,103.298515 54.7200952,103.150288 L55,103.146447 L121,103.146447 Z",
-            id: "路径-22",
-            fill: "currentColor",
-            fillRule: "nonzero"
-          }
-        )
-      ] }) }) })
+      children: /* @__PURE__ */ o(
+        "g",
+        {
+          fill: "none",
+          fillRule: "evenodd",
+          stroke: "none",
+          strokeWidth: 1,
+          children: /* @__PURE__ */ o("g", { transform: "translate(0.000000, 0.500000)", children: /* @__PURE__ */ f("g", { transform: "translate(39.000000, 17.353553)", children: [
+            /* @__PURE__ */ o(
+              "path",
+              {
+                d: "M11,201.146447 L167,201.146447 C173.075132,201.146447 178,206.071314 178,212.146447 C178,218.221579 173.075132,223.146447 167,223.146447 L11,223.146447 C4.92486775,223.146447 7.43989126e-16,218.221579 0,212.146447 C-7.43989126e-16,206.071314 4.92486775,201.146447 11,201.146447 Z",
+                fill: typeof t == "string" ? t : "#000",
+                fillRule: "evenodd"
+              }
+            ),
+            /* @__PURE__ */ o(
+              "path",
+              {
+                d: "M72.3425855,16.8295583 C75.799482,7.50883712 86.1577877,2.75526801 95.4785089,6.21216449 C100.284516,7.99463061 104.096358,11.7387855 105.968745,16.4968188 L106.112518,16.8745422 L159.385152,161.694068 C161.291848,166.877345 158.635655,172.624903 153.452378,174.531599 C148.358469,176.405421 142.719567,173.872338 140.716873,168.864661 L140.614848,168.598825 L89.211,28.86 L37.3759214,168.623816 C35.4885354,173.712715 29.8981043,176.351047 24.7909589,174.617647 L24.5226307,174.522368 C19.4337312,172.634982 16.7953993,167.044551 18.5287999,161.937406 L18.6240786,161.669077 L72.3425855,16.8295583 Z",
+                fill: "currentColor",
+                fillRule: "nonzero"
+              }
+            ),
+            /* @__PURE__ */ o(
+              "path",
+              {
+                d: "M121,103.146447 C126.522847,103.146447 131,107.623599 131,113.146447 C131,118.575687 126.673329,122.994378 121.279905,123.142605 L121,123.146447 L55,123.146447 C49.4771525,123.146447 45,118.669294 45,113.146447 C45,107.717207 49.3266708,103.298515 54.7200952,103.150288 L55,103.146447 L121,103.146447 Z",
+                fill: "currentColor",
+                fillRule: "nonzero"
+              }
+            )
+          ] }) })
+        }
+      )
     }
   );
 }
-function b(t) {
-  const [i, c] = h(void 0);
-  function o(n) {
-    var a;
-    (a = t.action) == null || a.call(t, n);
-  }
-  function l() {
-    var n;
-    (n = t.action) == null || n.call(t, i);
+function I() {
+  const t = A(w.name), {
+    tooltip: r = void 0,
+    isActive: n = void 0,
+    defaultColor: e = void 0,
+    colors: i,
+    action: s
+  } = (t == null ? void 0 : t.componentProps) ?? {}, { disabled: l, dataState: c } = y(n), [h, u] = m(e);
+  x(() => {
+    u(c);
+  }, [c]);
+  function C(a) {
+    l || s && (s == null || s(a), u(a));
   }
-  const r = f(
-    u((n) => {
-      c(n);
-    }, 350),
-    []
-  );
-  return /* @__PURE__ */ d("div", { className: "richtext-flex richtext-items-center richtext-h-[32px]", children: [
-    /* @__PURE__ */ e(s, { tooltip: t == null ? void 0 : t.tooltip, disabled: t == null ? void 0 : t.disabled, action: l, tooltipOptions: t == null ? void 0 : t.tooltipOptions, children: /* @__PURE__ */ e("span", { className: "richtext-flex richtext-items-center richtext-justify-center richtext-text-sm", children: /* @__PURE__ */ e(g, { fill: i || t.initialDisplayedColor }) }) }),
-    /* @__PURE__ */ e(
-      x,
-      {
-        selectedColor: i,
-        setSelectedColor: r,
-        onChange: o,
-        disabled: t == null ? void 0 : t.disabled,
-        colors: t == null ? void 0 : t.colors,
-        defaultColor: t == null ? void 0 : t.defaultColor,
-        children: /* @__PURE__ */ e(m, { variant: "ghost", size: "icon", className: "r!ichtext-h-[32px] !richtext-w-3", disabled: t == null ? void 0 : t.disabled, children: /* @__PURE__ */ e(L, { className: "!richtext-w-3 !richtext-h-3 richtext-text-zinc-500", name: "MenuDown" }) })
-      }
-    )
-  ] });
+  return t ? /* @__PURE__ */ o(
+    v,
+    {
+      colors: i,
+      disabled: l,
+      onChange: C,
+      value: h,
+      children: /* @__PURE__ */ o(
+        g,
+        {
+          disabled: l,
+          tooltip: r,
+          children: /* @__PURE__ */ f("span", { className: "richtext-flex richtext-items-center richtext-justify-center richtext-gap-[4px] richtext-text-sm", children: [
+            /* @__PURE__ */ o(S, { fill: c }),
+            /* @__PURE__ */ o(
+              L,
+              {
+                className: "!richtext-h-3 !richtext-w-3 richtext-text-zinc-500",
+                name: "MenuDown"
+              }
+            )
+          ] })
+        }
+      )
+    }
+  ) : /* @__PURE__ */ o(p, {});
 }
-const S = /* @__PURE__ */ C.extend({
+const w = /* @__PURE__ */ d.extend({
+  addStorage() {
+    return {
+      // Stores the currently selected text color; undefined indicates "No Fill" (default color)
+      currentColor: this.options.defaultColor || void 0
+    };
+  },
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-expect-error
   addOptions() {
     var t;
     return {
       ...(t = this.parent) == null ? void 0 : t.call(this),
-      button({ editor: i, t: c, extension: o }) {
+      button({ editor: r, t: n, extension: e }) {
         return {
-          component: b,
+          // component: ColorActionButton,
           componentProps: {
-            colors: o.options.colors,
-            defaultColor: o.options.defaultColor,
-            action: (l) => {
-              l === void 0 && i.chain().focus().unsetColor().run(), typeof l == "string" && i.chain().focus().setColor(l).run();
+            colors: e.options.colors,
+            defaultColor: e.options.defaultColor,
+            action: (i) => {
+              if (typeof i == "string") {
+                r.storage.color.currentColor = i, r.chain().focus().setColor(i).run();
+                return;
+              }
+              r.chain().focus().unsetColor().run();
             },
             isActive: () => {
-              const { color: l } = i.getAttributes("textStyle");
-              return l && i.isActive({ color: l }) || !1;
+              const { color: i } = r.getAttributes("textStyle");
+              return i;
             },
-            editor: i,
             disabled: !1,
-            tooltip: c("editor.color.tooltip")
+            shortcutKeys: e.options.shortcutKeys ?? ["⇧", "alt", "C"],
+            tooltip: n("editor.color.tooltip")
           }
         };
       }
     };
+  },
+  addKeyboardShortcuts() {
+    var t;
+    return {
+      ...(t = this.parent) == null ? void 0 : t.call(this),
+      "Alt-Shift-c": () => {
+        const r = this.storage.currentColor || this.options.defaultColor;
+        if (!r) {
+          const { color: e } = this.editor.getAttributes("textStyle");
+          return e ? this.editor.chain().focus().unsetColor().run() : !1;
+        }
+        return this.editor.isActive("textStyle", { color: r }) ? this.editor.chain().focus().unsetColor().run() : this.editor.chain().focus().setColor(r).run();
+      }
+    };
   }
 });
 export {
-  S as Color
+  w as Color,
+  I as RichTextColor
 };

package/lib/Column.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./index-RfTlOzIr.cjs"),C=require("@tiptap/pm/state"),A=require("@tiptap/pm/model"),f=require("react/jsx-runtime"),v=require("./toggle-D41PzQLJ.cjs");require("react");require("./index-DV5kbgRU.cjs");const y=require("./useButtonProps-C6Vpn190.cjs");function M(e,t,r=null){return r?e.createChecked({index:t},r):e.createAndFill({index:t})}function H(e){if(e.cached.columnsNodeTypes)return e.cached.columnsNodeTypes;const t={columns:e.nodes.columns,column:e.nodes.column};return e.cached.columnsNodeTypes=t,t}function O(e,t,r=null){const n=H(e),c=[];for(let o=0;o<t;o+=1){const s=M(n.column,o,r);s&&c.push(s)}return n.columns.createChecked({cols:t},c)}function h({state:e,dispatch:t,type:r}){const n=u.findParentNode(o=>o.type.name===T.name)(e.selection),c=u.findParentNode(o=>o.type.name===x.name)(e.selection);if(t&&n&&c){const o=n.node,s=c.node.attrs.index,i=o.toJSON();let l=s;r==="delete"?(l=s-1,i.content.splice(s,1)):(l=r==="addBefore"?s:s+1,i.content.splice(l,0,{type:"column",attrs:{index:s},content:[{type:"paragraph"}]})),i.attrs.cols=i.content.length,i.content.forEach((m,b)=>{m.attrs.index=b});const d=A.Node.fromJSON(e.schema,i);let a=n.pos;d.content.forEach((m,b,N)=>{N<l&&(a+=m.nodeSize)});const p=e.tr.setTime(Date.now());p.replaceWith(n.pos,n.pos+n.node.nodeSize,d).setSelection(C.TextSelection.near(p.doc.resolve(a))),t(p)}return!0}function g({state:e,dispatch:t,type:r}){const n=u.findParentNode(o=>o.type.name===T.name)(e.selection),c=u.findParentNode(o=>o.type.name===x.name)(e.selection);if(t&&n&&c){const o=n.node,s=c.node.attrs.index;let i=0;r==="before"?i=(s-1+o.attrs.cols)%o.attrs.cols:i=(s+1)%o.attrs.cols;let l=n.pos;o.content.forEach((a,p,m)=>{m<i&&(l+=a.nodeSize)});const d=e.tr.setTime(Date.now());return d.setSelection(C.TextSelection.near(d.doc.resolve(l))),t(d),!0}return!1}function P(){const e=y.useButtonProps(S.name),{icon:t=void 0,tooltip:r=void 0,shortcutKeys:n=void 0,tooltipOptions:c={},action:o=void 0,isActive:s=void 0}=(e==null?void 0:e.componentProps)??{},{dataState:i,disabled:l,update:d}=y.useToggleActive(s),a=()=>{l||o&&(o(),d())};return e?f.jsx(v.ActionButton,{action:a,dataState:i,disabled:l,icon:t,shortcutKeys:n,tooltip:r,tooltipOptions:c}):f.jsx(f.Fragment,{})}const L=200,S=u.Extension.create({name:"richtextColumnExtension",addOptions(){var e;return{...(e=this.parent)==null?void 0:e.call(this),button:({editor:t,t:r})=>({componentProps:{action:()=>{t.chain().focus().insertColumns({cols:2}).run()},icon:"Columns",tooltip:r("editor.columns.tooltip")}})}}}),x=u.Node3.create({name:"column",content:"block+",isolating:!0,addOptions(){return{HTMLAttributes:{class:"column"}}},addAttributes(){return{index:{default:0,parseHTML:e=>e.getAttribute("index")}}},parseHTML(){return[{tag:"div[class=column]"}]},renderHTML({HTMLAttributes:e}){return["div",u.mergeAttributes(this.options.HTMLAttributes,e),0]}}),T=u.Node3.create({name:"columns",group:"block",defining:!0,isolating:!0,allowGapCursor:!1,content:"column{1,}",priority:L,addOptions(){return{HTMLAttributes:{class:"columns"}}},addAttributes(){return{cols:{default:2,parseHTML:e=>e.getAttribute("cols")}}},parseHTML(){return[{tag:"div[class=grid]"}]},renderHTML({HTMLAttributes:e}){return["div",u.mergeAttributes(this.options.HTMLAttributes,e),0]},addCommands(){return{insertColumns:e=>({tr:t,dispatch:r,editor:n})=>{const c=O(n.schema,e&&e.cols||3);if(r){const o=t.selection.anchor+1;t.replaceSelectionWith(c).scrollIntoView().setSelection(C.TextSelection.near(t.doc.resolve(o)))}return!0},addColBefore:()=>({dispatch:e,state:t})=>h({dispatch:e,state:t,type:"addBefore"}),addColAfter:()=>({dispatch:e,state:t})=>h({dispatch:e,state:t,type:"addAfter"}),deleteCol:()=>({dispatch:e,state:t})=>h({dispatch:e,state:t,type:"delete"})}},addKeyboardShortcuts(){return{"Mod-Alt-G":()=>this.editor.commands.insertColumns(),Tab:()=>g({state:this.editor.state,dispatch:this.editor.view.dispatch,type:"after"}),"Shift-Tab":()=>g({state:this.editor.state,dispatch:this.editor.view.dispatch,type:"before"})}}});exports.Column=S;exports.ColumnNode=x;exports.MultipleColumnNode=T;exports.RichTextColumn=P;

package/lib/{Document.d.cts → Column.d.cts}

@@ -1,8 +1,14 @@
+import { Extension } from '@tiptap/core';
+import { JSX } from 'react/jsx-runtime';
 import { Node as Node_2 } from '@tiptap/core';
 
-declare const Document_2: Node_2<any, any>;
-export { Document_2 as Document }
-export default Document_2;
+export declare const Column: Extension<any, any>;
+
+export declare const ColumnNode: Node_2<any, any>;
+
+export declare const MultipleColumnNode: Node_2<any, any>;
+
+export declare function RichTextColumn(): JSX.Element;
 
 export { }
 
@@ -37,6 +43,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: {
@@ -68,7 +95,7 @@ declare module '@tiptap/core' {
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         exportWord: {
-            exportToWord: () => ReturnType;
+            exportToWord: (docState: any) => ReturnType;
         };
     }
 }
@@ -93,10 +120,8 @@ declare module '@tiptap/core' {
 
 
 declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        painter: {
-            setPainter: (marks: Mark[]) => ReturnType;
-        };
+    interface Storage {
+        highlight: HighlightStorage;
     }
 }
 
@@ -181,16 +206,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: {
@@ -201,20 +216,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: {
@@ -238,16 +239,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/{Document.d.ts → Column.d.ts}

@@ -1,8 +1,14 @@
+import { Extension } from '@tiptap/core';
+import { JSX } from 'react/jsx-runtime';
 import { Node as Node_2 } from '@tiptap/core';
 
-declare const Document_2: Node_2<any, any>;
-export { Document_2 as Document }
-export default Document_2;
+export declare const Column: Extension<any, any>;
+
+export declare const ColumnNode: Node_2<any, any>;
+
+export declare const MultipleColumnNode: Node_2<any, any>;
+
+export declare function RichTextColumn(): JSX.Element;
 
 export { }
 
@@ -37,6 +43,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: {
@@ -68,7 +95,7 @@ declare module '@tiptap/core' {
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         exportWord: {
-            exportToWord: () => ReturnType;
+            exportToWord: (docState: any) => ReturnType;
         };
     }
 }
@@ -93,10 +120,8 @@ declare module '@tiptap/core' {
 
 
 declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        painter: {
-            setPainter: (marks: Mark[]) => ReturnType;
-        };
+    interface Storage {
+        highlight: HighlightStorage;
     }
 }
 
@@ -181,16 +206,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: {
@@ -201,20 +216,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: {
@@ -238,16 +239,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: {