reactjs-tiptap-editor 0.2.29 → 0.3.0

package/lib/FormatPainter.d.ts

@@ -0,0 +1,353 @@
+import { Editor } from '@tiptap/react';
+import { Extension } from '@tiptap/core';
+import { Mark } from '@tiptap/pm/model';
+
+/**
+ * Represents the ButtonView function.
+ */
+declare type ButtonView<T = any> = (options: ButtonViewParams<T>) => ButtonViewReturn | ButtonViewReturn[];
+
+/**
+ * Represents the parameters for the ButtonView function.
+ */
+declare interface ButtonViewParams<T = any> {
+    /** Editor object */
+    editor: Editor;
+    /** Extension object */
+    extension: Extension<T>;
+    /** Translation function */
+    t: (path: string) => string;
+}
+
+/**
+ * Represents the return value for the ButtonView component.
+ */
+declare interface ButtonViewReturn {
+    /** Component */
+    component: unknown;
+    /** Component props */
+    componentProps: ButtonViewReturnComponentProps;
+    /** Component slots */
+    componentSlots?: ButtonViewReturnComponentSlots;
+}
+
+/**
+ * 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;
+}
+
+/**
+ * Represents the slots for the ButtonView component.
+ */
+declare interface ButtonViewReturnComponentSlots {
+    /** Dialog slot */
+    dialog: () => any;
+    [x: string]: () => any;
+}
+
+/**
+ * 格式刷
+ */
+export declare const FormatPainter: Extension<FormatPainterOptions, any>;
+
+/**
+ * Represents the interface for font size options, extending GeneralOptions.
+ */
+export declare interface FormatPainterOptions extends GeneralOptions<FormatPainterOptions> {
+}
+
+/**
+ * Represents the general options for Tiptap extensions.
+ */
+declare interface GeneralOptions<T> {
+    /** Enabled divider */
+    divider: boolean;
+    /** Enabled spacer */
+    spacer: boolean;
+    /** Button view function */
+    button: ButtonView<T>;
+    /** Show on Toolbar */
+    toolbar?: boolean;
+}
+
+export declare interface PainterAction {
+    type: 'start' | 'end';
+    marks: Mark[];
+}
+
+export { }
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        attachment: {
+            setAttachment: (attrs?: unknown) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        setCodeBlock: {
+            setCodeBlock: (options?: any) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        excalidraw: {
+            setExcalidraw: (attrs?: IExcalidrawAttrs) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        emoji: {
+            setEmoji: (emoji: {
+                name: string;
+                emoji: string;
+            }) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        drawer: {
+            setDrawer: (options: any, replace?: any) => ReturnType;
+            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        exportWord: {
+            exportToWord: () => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        fontSize: {
+            /**
+             * Set the text font size. ex: "12px", "2em", or "small". Must be a valid
+             * CSS font-size
+             * (https://developer.mozilla.org/en-US/docs/Web/CSS/font-size).
+             */
+            setFontSize: (fontSize: string) => ReturnType;
+            /**
+             * Unset the font size
+             */
+            unsetFontSize: () => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        painter: {
+            setPainter: (marks: Mark[]) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        iframe: {
+            /**
+             * Add an iframe
+             */
+            setIframe: (options: {
+                src: string;
+                service: string;
+            }) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        imageUpload: {
+            /**
+             * Add an image
+             */
+            setImageInline: (options: Partial<SetImageAttrsOptions>) => ReturnType;
+            /**
+             * Update an image
+             */
+            updateImage: (options: Partial<SetImageAttrsOptions>) => ReturnType;
+            /**
+             * Set image alignment
+             */
+            setAlignImage: (align: 'left' | 'center' | 'right') => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        imageGifUpload: {
+            /**
+             * Add an image gif
+             */
+            setImageGif: (options: Partial<SetImageAttrsOptions>) => ReturnType;
+            /**
+             * Update an image gif
+             */
+            updateImageGif: (options: Partial<SetImageAttrsOptions>) => ReturnType;
+            /**
+             * Set image alignment
+             */
+            setAlignImageGif: (align: 'left' | 'center' | 'right') => ReturnType;
+        };
+    }
+}
+
+
+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> {
+        katex: {
+            setKatex: (arg?: IKatexAttrs) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        lineHeight: {
+            setLineHeight: (lineHeight: string) => ReturnType;
+            unsetLineHeight: () => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        mermaid: {
+            setMermaid: (options: any, replace?: any) => ReturnType;
+            setAlignImageMermaid: (align: 'left' | 'center' | 'right') => ReturnType;
+        };
+    }
+}
+
+
+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: {
+            setSearchTerm: (searchTerm: string) => ReturnType;
+            setReplaceTerm: (replaceTerm: string) => ReturnType;
+            replace: () => ReturnType;
+            replaceAll: () => ReturnType;
+            goToPrevSearchResult: () => void;
+            goToNextSearchResult: () => void;
+            setCaseSensitive: (caseSensitive: boolean) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        tableOfContents: {
+            setTableOfContents: () => ReturnType;
+            removeTableOfContents: () => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        twitter: {
+            /**
+             * Insert a tweet
+             * @param options The tweet attributes
+             * @example editor.commands.setTweet({ src: 'https://x.com/seanpk/status/1800145949580517852' })
+             */
+            setTweet: (options: SetTweetOptions) => ReturnType;
+            updateTweet: (options: SetTweetOptions) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        video: {
+            /**
+             * Add an video
+             */
+            setVideo: (options: Partial<SetVideoOptions>) => ReturnType;
+            /**
+             * Update an video
+             */
+            updateVideo: (options: Partial<SetVideoOptions>) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        tableCellBackground: {
+            setTableCellBackground: (color: string) => ReturnType;
+            unsetTableCellBackground: () => ReturnType;
+        };
+    }
+}

package/lib/FormatPainter.js

@@ -0,0 +1,74 @@
+import { E as m, P as u, a as c } from "./index-Drmyqk9P.js";
+import { A as p } from "./RichTextEditor-Cy9XKEI5.js";
+const v = /* @__PURE__ */ m.create({
+  name: "painter",
+  addOptions() {
+    var n;
+    return {
+      ...(n = this.parent) == null ? void 0 : n.call(this),
+      button: ({ editor: t, t: e }) => ({
+        component: p,
+        componentProps: {
+          action: () => {
+            t.commands.setPainter(t == null ? void 0 : t.state.selection.$head.marks());
+          },
+          icon: "PaintRoller",
+          tooltip: e("editor.format")
+        }
+      })
+    };
+  },
+  addCommands() {
+    return {
+      setPainter: (n) => ({
+        view: {
+          dispatch: t,
+          state: { tr: e },
+          dom: s
+        }
+      }) => {
+        const a = `url("data:image/svg+xml;utf8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#000" d="M9 22v-6H4V7q0-1.65 1.175-2.825T8 3h12v13h-5v6zM6 10h12V5h-1v4h-2V5h-1v2h-2V5H8q-.825 0-1.412.588T6 7zm0 4h12v-2H6zm0 0v-2z"/></svg>')}"), auto`;
+        return s.style.cursor = a, t(e.setMeta("painterAction", { type: "start", marks: n })), !0;
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      new u({
+        key: new c("format-painter"),
+        state: {
+          init: () => [],
+          apply: (n, t) => {
+            const e = n.getMeta("painterAction");
+            return e && e.type === "start" ? t = e.marks : e && e.type === "end" && (t = []), t;
+          }
+        },
+        props: {
+          handleDOMEvents: {
+            mousedown(n) {
+              const t = this.getState(n.state);
+              if (!t || t.length === 0)
+                return n.dom.style.cursor = "", !1;
+              const e = () => {
+                document.removeEventListener("mouseup", e);
+                let {
+                  dispatch: s,
+                  state: { tr: o, selection: r },
+                  dom: a
+                } = n;
+                a.style.cursor = "", o = o.removeMark(r.from, r.to);
+                for (const i of t)
+                  i.type.name !== "link" && (o = o.addMark(r.from, r.to, i));
+                s(o.setMeta("painterAction", { type: "end" }));
+              };
+              return document.addEventListener("mouseup", e), !0;
+            }
+          }
+        }
+      })
+    ];
+  }
+});
+export {
+  v as FormatPainter
+};

package/lib/Heading.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./index-COecBbaE.cjs"),s=require("react/jsx-runtime"),g=require("react"),m=require("./ActionMenuButton-CpFNwSUZ.cjs"),o=require("./RichTextEditor-DkpDEr5U.cjs"),v=u.Node.create({name:"heading",addOptions(){return{levels:[1,2,3,4,5,6],HTMLAttributes:{}}},content:"inline*",group:"block",defining:!0,addAttributes(){return{level:{default:1,rendered:!1}}},parseHTML(){return this.options.levels.map(e=>({tag:`h${e}`,attrs:{level:e}}))},renderHTML({node:e,HTMLAttributes:t}){return[`h${this.options.levels.includes(e.attrs.level)?e.attrs.level:this.options.levels[0]}`,u.mergeAttributes(this.options.HTMLAttributes,t),0]},addCommands(){return{setHeading:e=>({commands:t})=>this.options.levels.includes(e.level)?t.setNode(this.name,e):!1,toggleHeading:e=>({commands:t})=>this.options.levels.includes(e.level)?t.toggleNode(this.name,"paragraph",e):!1}},addKeyboardShortcuts(){return this.options.levels.reduce((e,t)=>({...e,[`Mod-Alt-${t}`]:()=>this.editor.commands.toggleHeading({level:t})}),{})},addInputRules(){return this.options.levels.map(e=>u.textblockTypeInputRule({find:new RegExp(`^(#{${Math.min(...this.options.levels)},${e}})\\s$`),type:this.type,getAttributes:{level:e}}))}});function x(e){var r;const t=g.useMemo(()=>{var l;const n=(l=e==null?void 0:e.items)==null?void 0:l.find(a=>a.isActive());return n&&!n.default?{...n}:{title:e.tooltip,level:0,isActive:()=>!1}},[e]);return s.jsxs(o.DropdownMenu,{children:[s.jsx(o.DropdownMenuTrigger,{asChild:!0,disabled:e==null?void 0:e.disabled,children:s.jsx(m.ActionMenuButton,{disabled:e==null?void 0:e.disabled,icon:"MenuDown",title:t==null?void 0:t.title,tooltip:e==null?void 0:e.tooltip})}),s.jsx(o.DropdownMenuContent,{className:"richtext-w-full",children:(r=e==null?void 0:e.items)==null?void 0:r.map((n,c)=>{var l,a;return s.jsxs(g.Fragment,{children:[s.jsxs(o.DropdownMenuCheckboxItem,{checked:(t==null?void 0:t.title)===n.title,onClick:n.action,children:[s.jsx("div",{className:`heading- richtext-ml-1 richtext-h-full${n.level}`,children:n.title}),!!((l=n==null?void 0:n.shortcutKeys)!=null&&l.length)&&s.jsx(o.DropdownMenuShortcut,{className:"richtext-pl-4",children:(a=n==null?void 0:n.shortcutKeys)==null?void 0:a.map(d=>o.getShortcutKey(d)).join(" ")})]}),n.level===0&&s.jsx(o.DropdownMenuSeparator,{})]},`heading-k-${c}`)})})]})}const b=v.extend({addOptions(){var e;return{...(e=this.parent)==null?void 0:e.call(this),levels:[1,2,3,4,5,6],button({editor:t,extension:r,t:n}){var h;const{extensions:c=[]}=t.extensionManager??[],l=((h=r.options)==null?void 0:h.levels)||[],a=c.find(i=>i.name==="base-kit"),d=l.map(i=>({action:()=>t.commands.toggleHeading({level:i}),isActive:()=>t.isActive("heading",{level:i})||!1,disabled:!t.can().toggleHeading({level:i}),title:n(`editor.heading.h${i}.tooltip`),level:i,shortcutKeys:["alt","mod",`${i}`]}));a&&a.options.paragraph!==!1&&d.unshift({action:()=>t.commands.setParagraph(),isActive:()=>t.isActive("paragraph")||!1,disabled:!t.can().setParagraph(),level:0,title:n("editor.paragraph.tooltip"),shortcutKeys:["alt","mod","0"]});const f=d.filter(i=>i.disabled).length===d.length;return{component:x,componentProps:{tooltip:n("editor.heading.tooltip"),disabled:f,items:d,editor:t}}}}}});exports.Heading=b;