reactjs-tiptap-editor 0.2.29 → 0.3.1

package/lib/ActionMenuButton-BllDdN2-.js

@@ -0,0 +1,33 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import n from "react";
+import { Slot as a } from "@radix-ui/react-slot";
+import { i as r, T as d, a as m, B as f, b as u, g } from "./RichTextEditor-DvrUVNK2.js";
+const T = n.forwardRef(
+  ({ asChild: l, ...t }, x) => {
+    var h;
+    const c = r[t.icon];
+    return /* @__PURE__ */ i(d, { children: [
+      /* @__PURE__ */ e(m, { asChild: !0, children: /* @__PURE__ */ e(
+        l ? a : f,
+        {
+          className: "richtext-h-[32px] richtext-min-w-24 richtext-overflow-hidden richtext-px-[5px]  richtext-py-0",
+          disabled: t == null ? void 0 : t.disabled,
+          ref: x,
+          variant: "ghost",
+          ...t,
+          children: /* @__PURE__ */ i("div", { className: "richtext-flex richtext-h-full richtext-items-center richtext-font-normal", children: [
+            (t == null ? void 0 : t.title) && /* @__PURE__ */ e("div", { className: "richtext-grow richtext-truncate richtext-text-left richtext-text-sm", children: t == null ? void 0 : t.title }),
+            c && /* @__PURE__ */ e(c, { className: "richtext-ml-1 richtext-size-3 richtext-shrink-0 richtext-text-zinc-500" })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ e(u, { children: /* @__PURE__ */ i("div", { className: "richtext-flex richtext-max-w-24 richtext-flex-col richtext-items-center richtext-text-center", children: [
+        (t == null ? void 0 : t.tooltip) && /* @__PURE__ */ e("div", { children: t == null ? void 0 : t.tooltip }),
+        /* @__PURE__ */ e("div", { className: "richtext-flex", children: !!((h = t == null ? void 0 : t.shortcutKeys) != null && h.length) && /* @__PURE__ */ e("span", { children: g(t == null ? void 0 : t.shortcutKeys) }) })
+      ] }) })
+    ] });
+  }
+);
+export {
+  T as A
+};

package/lib/ActionMenuButton-tLPdHfCT.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("react/jsx-runtime"),r=require("react"),a=require("@radix-ui/react-slot"),i=require("./RichTextEditor-CM-Xq9RS.cjs"),d=r.forwardRef(({asChild:n,...t},h)=>{var x;const c=i.icons[t.icon],l=n?a.Slot:i.Button;return e.jsxs(i.Tooltip,{children:[e.jsx(i.TooltipTrigger,{asChild:!0,children:e.jsx(l,{className:"richtext-h-[32px] richtext-min-w-24 richtext-overflow-hidden richtext-px-[5px]  richtext-py-0",disabled:t==null?void 0:t.disabled,ref:h,variant:"ghost",...t,children:e.jsxs("div",{className:"richtext-flex richtext-h-full richtext-items-center richtext-font-normal",children:[(t==null?void 0:t.title)&&e.jsx("div",{className:"richtext-grow richtext-truncate richtext-text-left richtext-text-sm",children:t==null?void 0:t.title}),c&&e.jsx(c,{className:"richtext-ml-1 richtext-size-3 richtext-shrink-0 richtext-text-zinc-500"})]})})}),e.jsx(i.TooltipContent,{children:e.jsxs("div",{className:"richtext-flex richtext-max-w-24 richtext-flex-col richtext-items-center richtext-text-center",children:[(t==null?void 0:t.tooltip)&&e.jsx("div",{children:t==null?void 0:t.tooltip}),e.jsx("div",{className:"richtext-flex",children:!!((x=t==null?void 0:t.shortcutKeys)!=null&&x.length)&&e.jsx("span",{children:i.getShortcutKeys(t==null?void 0:t.shortcutKeys)})})]})})]})});exports.ActionMenuButton=d;

package/lib/Attachment.cjs

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("./index-COecBbaE.cjs"),i=require("./dom-dataset-CAXnsjYE.cjs"),a=require("./RichTextEditor-CM-Xq9RS.cjs"),e=require("react/jsx-runtime"),p=require("lucide-react"),g=require("react"),V=require("./index-LbrE7K9i.cjs"),S={audio:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-audio-lines"><path d="M2 10v3"/><path d="M6 6v11"/><path d="M10 3v18"/><path d="M14 8v7"/><path d="M18 5v13"/><path d="M22 10v3"/></svg>',video:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-video"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>',file:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>',image:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',pdf:`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32">
+      <path fill="currentColor" d="M30 18v-2h-6v10h2v-4h3v-2h-3v-2zm-11 8h-4V16h4a3.003 3.003 0 0 1 3 3v4a3.003 3.003 0 0 1-3 3m-2-2h2a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2zm-6-8H6v10h2v-3h3a2.003 2.003 0 0 0 2-2v-3a2 2 0 0 0-2-2m-3 5v-3h3l.001 3z"></path>
+      <path fill="currentColor" d="M22 14v-4a.91.91 0 0 0-.3-.7l-7-7A.9.9 0 0 0 14 2H4a2.006 2.006 0 0 0-2 2v24a2 2 0 0 0 2 2h16v-2H4V4h8v6a2.006 2.006 0 0 0 2 2h6v2Zm-8-4V4.4l5.6 5.6Z"></path>
+    </svg>`,word:`<svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      className="icon"
+      viewBox="0 0 1024 1024"
+    >
+      <path
+        fill="currentColor"
+        d="M679.253 402.364 618.77 561.015l-60.348-158.651a30.04 30.04 0 0 0-30.447-18.637 29.76 29.76 0 0 0-30.447 18.637l-60.416 158.651-60.416-158.651a30.515 30.515 0 0 0-38.843-17.272 28.945 28.945 0 0 0-17.954 37.547l88.815 233.267c4.369 11.469 15.7 19.115 28.398 19.115a30.31 30.31 0 0 0 28.468-19.115l62.395-163.908 62.396 163.84c4.437 11.605 15.701 19.183 28.4 19.183a30.31 30.31 0 0 0 28.466-19.115l88.747-233.267a28.945 28.945 0 0 0-17.886-37.547 30.447 30.447 0 0 0-38.912 17.272zm219.478 395.605-51.883-29.218c-28.672-16.18-52.224-3.072-52.224 29.082v.273H643.209a29.833 29.833 0 0 0-30.31 29.354c0 16.18 13.584 29.218 30.31 29.218h151.825c1.092 30.516 24.03 43.077 52.224 27.648l51.063-27.989c29.013-15.906 29.15-42.189.41-58.368"
+      />
+      <path
+        fill="currentColor"
+        d="m810.667 913.135-.478.068H201.796c-19.865 0-36.727-11.673-36.727-25.6v-618.36h154.965c51.268 0 92.911-39.39 92.911-87.858v-87.86H810.19c19.797 0 36.522 11.742 36.522 25.669V739.26h61.987V119.262c0-46.421-44.169-84.241-98.51-84.241H328.364l-225.28 194.56v658.09c0 46.285 44.236 84.105 98.713 84.105H810.19c43.759 0 80.554-24.713 93.32-58.573h-92.842zM350.89 94.89v86.562c0 16.11-13.858 29.286-30.925 29.286H216.815L350.959 94.891z"
+      />
+    </svg>`,excel:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sheet"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><line x1="3" x2="21" y1="9" y2="9"/><line x1="3" x2="21" y1="15" y2="15"/><line x1="9" x2="9" y1="9" y2="21"/><line x1="15" x2="15" y1="9" y2="21"/></svg>',ppt:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-table-properties"><path d="M15 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M21 9H3"/><path d="M21 15H3"/></svg>'};function D(t){const n=S[t],l=new DOMParser().parseFromString(n,"image/svg+xml").documentElement,o=["svg",{...Array.from(l.attributes).reduce((r,c)=>(r[c.name]=c.value,r),{})}];return Array.from(l.childNodes).forEach(r=>{if(r.nodeType===1){const c=[r.tagName.toLowerCase(),Array.from(r.attributes).reduce((v,x)=>(v[x.name]=x.value,v),{})];r.textContent&&c.push(r.textContent),o.push(c)}}),o}const B={audio:e.jsx(p.LucideAudioLines,{}),video:e.jsx(p.LucideVideo,{}),file:e.jsx(p.LucideFile,{}),image:e.jsx(p.LucideImage,{}),pdf:e.jsx(a.ExportPdf,{}),word:e.jsx(a.ExportWord,{}),excel:e.jsx(p.LucideSheet,{}),ppt:e.jsx(p.LucideTableProperties,{})};function A(t,n=!1){const s=a.normalizeFileType(t),d=B[s]||e.jsx(e.Fragment,{});return n?D(s):d}const _="_wrap_1x1ms_2",j={wrap:_};function q({editor:t,node:n,updateAttributes:s,deleteNode:d,extension:l}){var M;const o=g.useRef(null),r=a.useEditableEditor(),{hasTrigger:c,fileName:v,fileSize:x,fileExt:L,fileType:C,url:u,error:k}=n.attrs,[H,f]=g.useState(!1),{t:y}=V.useLocale(),N=(M=l==null?void 0:l.options)==null?void 0:M.upload,m=g.useCallback(()=>{!r||u||r&&o.current.click()},[r,u]),z=g.useCallback(async T=>{const h=T.target.files&&T.target.files[0];if(!h)return;const F={fileName:a.extractFilename(h.name),fileSize:h.size,fileType:h.type,fileExt:a.extractFileExtension(h.name)};f(!0);try{const w=await N(h);s({...F,url:w}),f(!1)}catch(w){s({error:`File upload fail: ${w&&w.message}`||"Unknown error"}),f(!1),o.current.value=""}},[f,s]);g.useEffect(()=>{!u&&!c&&(m(),s({hasTrigger:!0}))},[u,c,m,s]);const E=g.useCallback(()=>d(),[t]);return r&&!u?e.jsx(i.NodeViewWrapper,{children:e.jsxs("div",{className:i.clsx(j.wrap,"render-wrapper"),children:[e.jsx("p",{onClick:m,style:{cursor:"pointer"},children:H?e.jsx("span",{children:y("editor.attachment.uploading")}):e.jsx("span",{children:y("editor.attachment.please_upload")})}),e.jsx("input",{hidden:!0,onChange:z,ref:o,type:"file"})]})}):u?e.jsx(i.NodeViewWrapper,{children:e.jsxs("div",{className:i.clsx(j.wrap,"render-wrapper"),onClick:m,children:[e.jsxs("div",{className:"richtext-flex richtext-items-center richtext-gap-[4px]",children:[e.jsx("span",{children:A(C)}),e.jsxs("span",{children:[v,".",L]}),e.jsxs("span",{children:["(",a.normalizeFileSize(x),")"]})]}),e.jsx(a.ActionButton,{action:E,icon:"Trash2",tooltip:y("editor.delete")})]})}):k!=="null"?e.jsx(i.NodeViewWrapper,{children:e.jsx("div",{className:i.clsx(j.wrap,"render-wrapper"),onClick:m,children:e.jsx("p",{children:k})})}):e.jsx(e.Fragment,{})}const R=b.Node.create({name:"attachment",content:"",marks:"",group:"block",selectable:!0,atom:!0,draggable:!0,addOptions(){var t;return{...(t=this.parent)==null?void 0:t.call(this),HTMLAttributes:{class:"attachment"},button:({editor:n,t:s})=>({component:a.ActionButton,componentProps:{action:()=>n.chain().focus().setAttachment().run(),isActive:()=>!1,disabled:!1,icon:"Attachment",tooltip:s("editor.attachment.tooltip")}})}},parseHTML(){return[{tag:"div[class=attachment]"}]},renderHTML({HTMLAttributes:t}){const{url:n="",fileName:s="",fileSize:d="",fileType:l="",fileExt:o=""}=t||{};return["div",b.mergeAttributes(this.options.HTMLAttributes||{},t||{}),n?["a",{href:n||"#"},["span",{class:"attachment__icon"},A(l,!0)],["span",{class:"attachment__text"},`${s}.${o} (${a.normalizeFileSize(d)})`]]:["div",{class:"attachment__placeholder"}]]},addAttributes(){return{fileName:{default:null,parseHTML:i.getDatasetAttribute("filename")},fileSize:{default:null,parseHTML:i.getDatasetAttribute("filesize")},fileType:{default:null,parseHTML:i.getDatasetAttribute("filetype")},fileExt:{default:null,parseHTML:i.getDatasetAttribute("fileext")},url:{default:null,parseHTML:i.getDatasetAttribute("url")},hasTrigger:{default:!1,parseHTML:t=>i.getDatasetAttribute("hastrigger")(t)==="true"},error:{default:null,parseHTML:i.getDatasetAttribute("error")}}},addCommands(){return{setAttachment:(t={})=>({chain:n})=>n().insertContent({type:this.name,attrs:t}).run()}},addNodeView(){return i.ReactNodeViewRenderer(q)}});exports.Attachment=R;

package/lib/Attachment.d.cts

@@ -0,0 +1,344 @@
+import { Editor } from '@tiptap/react';
+import { Extension } from '@tiptap/core';
+import { Node as Node_2 } from '@tiptap/core';
+
+export declare const Attachment: Node_2<AttachmentOptions, any>;
+
+export declare interface AttachmentOptions extends GeneralOptions<AttachmentOptions> {
+    /** Function for uploading files */
+    upload?: (file: File) => Promise<string>;
+}
+
+/**
+ * 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;
+}
+
+/**
+ * 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 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> {
+        drawer: {
+            setDrawer: (options: any, replace?: any) => ReturnType;
+            setAlignImageDrawer: (align: 'left' | 'center' | 'right') => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        emoji: {
+            setEmoji: (emoji: {
+                name: string;
+                emoji: string;
+            }) => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        excalidraw: {
+            setExcalidraw: (attrs?: IExcalidrawAttrs) => 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;
+        };
+    }
+}