reactjs-tiptap-editor 0.4.1 → 1.0.0

package/lib/Iframe.d.ts

@@ -1,13 +1,9 @@
+import { JSX } from 'react/jsx-runtime';
 import { Node as Node_2 } from '@tiptap/core';
 
 export declare const Iframe: Node_2<any, any>;
 
-export declare interface IIframeAttrs {
-    width?: number | string;
-    height?: number;
-    src?: string;
-    defaultShowPicker?: boolean;
-}
+export declare function RichTextIframe(): JSX.Element;
 
 export { }
 
@@ -42,11 +38,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;
         };
     }
 }
@@ -54,8 +61,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;
         };
     }
 }
@@ -73,7 +81,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;
         };
     }
 }
@@ -98,10 +115,8 @@ declare module '@tiptap/core' {
 
 
 declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        painter: {
-            setPainter: (marks: Mark[]) => ReturnType;
-        };
+    interface Storage {
+        highlight: HighlightStorage;
     }
 }
 
@@ -141,22 +156,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: {
@@ -179,8 +178,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;
         };
     }
 }
@@ -188,9 +194,8 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        lineHeight: {
-            setLineHeight: (lineHeight: string) => ReturnType;
-            unsetLineHeight: () => ReturnType;
+        katex: {
+            setKatex: (arg?: IKatexAttrs) => ReturnType;
         };
     }
 }
@@ -206,20 +211,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: {
@@ -243,16 +234,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/Iframe.js

@@ -1,6 +1,8 @@
-import "./index-kbO3iWqL.js";
-import "./dom-dataset-lYeH6gfI.js";
-import { ay as p } from "./RichTextEditor-DGcKEUGr.js";
+import "./index-DnWWK9F_.js";
+import "./index-DzcKxutn.js";
+import { I as e, R as i } from "./Iframe-CmXkEqOd.js";
+import "./dom-dataset-CIEeltF6.js";
 export {
-  p as Iframe
+  e as Iframe,
+  i as RichTextIframe
 };

package/lib/Image.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("./index-DF2Lp4HZ.cjs");const e=require("./RichTextEditor-CxvwGvQG.cjs");require("./dom-dataset-_6-diIRQ.cjs");exports.Image=e.Image;exports.default=e.Image;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const se=require("./index-RfTlOzIr.cjs"),G=require("./throttle-qX7Yjtsg.cjs"),ee=require("./index-BH4bc3jN.cjs"),i=require("react/jsx-runtime"),o=require("react"),k=require("./index-Dfmm6FTT.cjs"),Y=require("./isNumber-ClPupm7P.cjs"),le=require("./toggle-D41PzQLJ.cjs"),W=require("./index-DV5kbgRU.cjs"),B=require("./Icon-DUpv2cI6.cjs"),R=require("./dialog-CaCS-W5S.cjs"),oe=require("react-image-crop"),U=require("./button-B12K7BJ4.cjs"),J=require("./file-i7e4nQY2.cjs"),H=require("./useButtonProps-C6Vpn190.cjs"),te=require("./use-toast-Bz3QCOtE.cjs"),ce=require("./store-WStcMOiW.cjs"),F=require("./tabs-BoLCMcCI.cjs"),ue=require("@radix-ui/react-checkbox"),de=require("lucide-react"),K=require("./label-BkgAe7IY.cjs"),Q=require("./input-_ECRfn3Y.cjs");function ie(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,c.get?c:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const he=ie(o),V=ie(ue),ne=he.forwardRef(({className:e,...t},r)=>i.jsx(V.Root,{ref:r,className:W.cn("!richtext-peer !richtext-h-4 !richtext-w-4 !richtext-p-0 !richtext-shrink-0 !richtext-rounded-sm !richtext-border !richtext-border-primary !richtext-ring-offset-background focus-visible:!richtext-outline-none focus-visible:!richtext-ring-2 focus-visible:!richtext-ring-ring focus-visible:!richtext-ring-offset-2 disabled:!richtext-cursor-not-allowed disabled:!richtext-opacity-50 data-[state=checked]:!richtext-bg-primary data-[state=checked]:!richtext-text-primary-foreground",e),...t,children:i.jsx(V.Indicator,{className:W.cn("!richtext-flex !richtext-p-0 !richtext-items-center !richtext-justify-center !richtext-text-current"),children:i.jsx(de.Check,{className:"!richtext-h-4 !richtext-w-4"})})}));ne.displayName=V.Root.displayName;const P={TOP_LEFT:"tl",TOP_RIGHT:"tr",BOTTOM_LEFT:"bl",BOTTOM_RIGHT:"br"};function ge(e){var q,d,M;const[t,r]=o.useState({width:k.IMAGE_MAX_SIZE,height:k.IMAGE_MAX_SIZE}),[c,f]=o.useState({width:0,height:0}),[h]=o.useState([P.TOP_LEFT,P.TOP_RIGHT,P.BOTTOM_LEFT,P.BOTTOM_RIGHT]),[x,j]=o.useState(!1),[g,b]=o.useState({x:0,y:0,w:0,h:0,dir:""}),{align:A,inline:v}=(q=e==null?void 0:e.node)==null?void 0:q.attrs,N=v&&(A==="left"||A==="right"),E=o.useMemo(()=>{var Z;const{src:a,alt:y,width:n,height:s,flipX:m,flipY:l}=(Z=e==null?void 0:e.node)==null?void 0:Z.attrs,I=Y.isNumber(n)?`${n}px`:n,w=Y.isNumber(s)?`${s}px`:s,X=[];m&&X.push("rotateX(180deg)"),l&&X.push("rotateY(180deg)");const ae=X.join(" ");return{src:a||void 0,alt:y||void 0,style:{width:I||void 0,height:w||void 0,transform:ae||"none",...N?{float:A}:{}}}},[(d=e==null?void 0:e.node)==null?void 0:d.attrs]),z=o.useMemo(()=>{const{style:{width:a}}=E;return{width:a==="100%"?a:void 0}},[E]);function _(a){f({width:a.target.width,height:a.target.height})}function C(){const{editor:a,getPos:y}=e;a.commands.setNodeSelection(y())}const S=o.useCallback(G.throttle(()=>{const{editor:a}=e,{width:y}=getComputedStyle(a.view.dom);r(n=>({...n,width:Number.parseInt(y,10)}))},k.IMAGE_THROTTLE_WAIT_TIME),[e==null?void 0:e.editor]);function L(a,y){a.preventDefault(),a.stopPropagation();const n=c.width,s=c.height,m=n/s;let l=Number(e.node.attrs.width),I=Number(e.node.attrs.height);const w=t.width;l&&!I?(l=l>w?w:l,I=Math.round(l/m)):I&&!l?(l=Math.round(I*m),l=l>w?w:l):!l&&!I?(l=n>w?w:n,I=Math.round(l/m)):l=l>w?w:l,j(!0),b({x:a.clientX,y:a.clientY,w:l,h:I,dir:y})}const T=o.useCallback(G.throttle(a=>{if(a.preventDefault(),a.stopPropagation(),!x)return;const{x:y,w:n,dir:s}=g,m=(a.clientX-y)*(/l/.test(s)?-1:1),l=Y.clamp(n+m,k.IMAGE_MIN_SIZE,t.width);e.updateAttributes({width:l,height:null})},k.IMAGE_THROTTLE_WAIT_TIME),[x,g,t,e.updateAttributes]),p=o.useCallback(a=>{a.preventDefault(),a.stopPropagation(),x&&(b({x:0,y:0,w:0,h:0,dir:""}),j(!1),C())},[x,C]),u=o.useCallback(()=>{document==null||document.addEventListener("mousemove",T,!0),document==null||document.addEventListener("mouseup",p,!0)},[T,p]),O=o.useCallback(()=>{document==null||document.removeEventListener("mousemove",T,!0),document==null||document.removeEventListener("mouseup",p,!0)},[T,p]);o.useEffect(()=>(x?u():O(),()=>{O()}),[x,u,O]);const D=o.useMemo(()=>new ResizeObserver(()=>S()),[S]);return o.useEffect(()=>(D.observe(e.editor.view.dom),()=>{D.disconnect()}),[e.editor.view.dom,D]),i.jsx(ee.NodeViewWrapper,{as:v?"span":"div",className:"image-view",style:{float:N?A:void 0,margin:N?A==="left"?"1em 1em 1em 0":"1em 0 1em 1em":void 0,display:v?"inline":"block",textAlign:N?void 0:A,width:((M=E.style)==null?void 0:M.width)??"auto",...N?{}:z},children:i.jsxs("div",{"data-drag-handle":!0,draggable:"true",style:z,className:`image-view__body ${e!=null&&e.selected?"image-view__body--focused":""} ${x?"image-view__body--resizing":""}`,children:[i.jsx("img",{alt:E.alt,className:"image-view__body__image block",height:"auto",onClick:C,onLoad:_,src:E.src,style:E.style}),(e==null?void 0:e.editor.view.editable)&&((e==null?void 0:e.selected)||x)&&i.jsx("div",{className:"image-resizer",children:h==null?void 0:h.map(a=>i.jsx("span",{className:`image-resizer__handler image-resizer__handler--${a}`,onMouseDown:y=>L(y,a)},`image-dir-${a}`))})]})})}function me(e,t){const r=e.type,c=e.name.toLowerCase(),f=c.split(".").pop();if(!f)return!1;const x=r||{heif:"image/heif",heic:"image/heic",dng:"image/x-adobe-dng",cr2:"image/x-canon-cr2",nef:"image/x-nikon-nef",arw:"image/x-sony-arw",raf:"image/x-fuji-raf",orf:"image/x-olympus-orf"}[f];return t.some(j=>{if(j.startsWith("."))return c.endsWith(j);if(j.endsWith("/*")){const g=j.split("/")[0];return x==null?void 0:x.startsWith(g+"/")}return x===j})}function re(e,t){const{acceptMimes:r,maxSize:c,t:f,toast:h}=t,x=[];return(Array.isArray(e)?e:Object.values(e)).forEach(g=>{if(!me(g,r)){t.onError?t.onError({type:"type",message:f("editor.upload.fileTypeNotSupported",{fileName:g.name}),file:g}):h({variant:"default",title:f("editor.upload.fileTypeNotSupported",{fileName:g.name})});return}if(g.size>c){const b=(c/1024/1024).toFixed(2);t.onError?t.onError({type:"size",message:f("editor.upload.fileSizeTooBig",{fileName:g.name,size:b}),file:g}):h({variant:"default",title:f("editor.upload.fileSizeTooBig",{fileName:g.name,size:b})});return}x.push(g)}),x}function fe({editor:e,imageInline:t,onClose:r,disabled:c,alt:f}){var a,y;const{t:h}=k.useLocale(),{toast:x}=te.useToast(),[j,g]=o.useState(!1),[b,A]=o.useState(!1),v=o.useRef(null),[N,E]=o.useState(),[z,_]=o.useState(""),C=o.useRef(null),[S,L]=o.useState({src:"",file:null}),T=H.useExtension($.name),p=o.useMemo(()=>(T==null?void 0:T.options)??{},[T]);function u(n){if(v.current&&n.width&&n.height){const s=O(v.current,n);_(s)}}function O(n,s){const m=document.createElement("canvas"),l=n.naturalWidth/n.width,I=n.naturalHeight/n.height;m.width=s.width*l,m.height=s.height*I;const w=m.getContext("2d");return w&&(w.imageSmoothingEnabled=!1,w.drawImage(n,s.x*l,s.y*I,s.width*l,s.height*I,0,0,s.width*l,s.height*I)),m.toDataURL("image/png",1)}const D=o.useCallback(async()=>{var n;if(!b){A(!0);try{const s=J.dataURLtoFile(z,((n=S==null?void 0:S.file)==null?void 0:n.name)||"image.png");let m="";p.upload?m=await p.upload(s):m=URL.createObjectURL(s),e.chain().focus().setImageInline({src:m,inline:t,alt:f}).run(),g(!1),L({src:"",file:null}),M(),r()}catch(s){console.log("Error cropping image",s)}finally{A(!1)}}},[z,e,t,b,r,(a=S==null?void 0:S.file)==null?void 0:a.name,p]);function q(n){var s;n.preventDefault(),(s=C.current)==null||s.click()}const d=async n=>{var w;const s=(w=n==null?void 0:n.target)==null?void 0:w.files;if(!e||e.isDestroyed||s.length===0){n.target.value="";return}const m=re(s,{acceptMimes:p==null?void 0:p.acceptMimes,maxSize:p==null?void 0:p.maxSize,t:h,toast:x,onError:p.onError});if(m.length<=0){n.target.value="";return}const l=m[0],I=await J.readImageAsBase64(l);g(!0),L({src:I.src,file:l})},M=()=>{C.current&&(C.current.value="")};return i.jsxs(i.Fragment,{children:[i.jsx(U.Button,{className:"richtext-mt-1 richtext-w-full",disabled:c,onClick:q,size:"sm",children:h("editor.image.dialog.tab.uploadCrop")}),i.jsxs(R.Dialog,{open:j,onOpenChange:n=>{g(n),n||(L({src:"",file:null}),M())},children:[i.jsx(R.DialogTrigger,{}),i.jsxs(R.DialogContent,{children:[i.jsx(R.DialogTitle,{children:h("editor.image.dialog.tab.uploadCrop")}),i.jsx("div",{children:S.src&&i.jsx(oe,{className:"richtext-w-full",crop:N,onChange:n=>E(n),onComplete:n=>u(n),children:i.jsx("img",{alt:"Crop me",ref:v,src:S.src})})}),i.jsxs(R.DialogFooter,{children:[i.jsxs(U.Button,{disabled:b,onClick:()=>{g(!1),L({src:"",file:null}),M()},children:[h("editor.imageUpload.cancel"),i.jsx(B.IconComponent,{className:"richtext-ml-1",name:"Trash2"})]}),i.jsx(U.Button,{className:"richtext-w-fit",disabled:b||!N,onClick:D,children:b?i.jsxs(i.Fragment,{children:[h("editor.imageUpload.uploading"),i.jsx(B.IconComponent,{className:"richtext-ml-1 richtext-animate-spin",name:"Loader"})]}):i.jsxs(i.Fragment,{children:[h("editor.imageUpload.crop"),i.jsx(B.IconComponent,{className:"richtext-ml-1",name:"Crop"})]})})]})]})]}),i.jsx("input",{accept:((y=p==null?void 0:p.acceptMimes)==null?void 0:y.join(","))||"image/*",multiple:!1,onChange:d,ref:C,style:{display:"none"},type:"file"})]})}function xe(){const{t:e}=k.useLocale(),{toast:t}=te.useToast(),r=W.useEditorInstance(),c=H.useButtonProps($.name),{icon:f,tooltip:h}=(c==null?void 0:c.componentProps)??{},{editorDisabled:x}=H.useToggleActive(),[j,g]=o.useState(!1),[b,A]=o.useState(!1),v=H.useExtension($.name),N=d=>{g(d.detail)},[E,z]=o.useState(""),[_,C]=o.useState(""),S=o.useRef(null),L=(v==null?void 0:v.options.defaultInline)||!1,[T,p]=o.useState(L),u=o.useMemo(()=>v==null?void 0:v.options,[v]);o.useEffect(()=>{const d=k.listenEvent(k.EVENTS.UPLOAD_IMAGE(r.id),N);return()=>{d()}},[]);async function O(d){var y;const M=(y=d==null?void 0:d.target)==null?void 0:y.files;if(!r||r.isDestroyed||M.length===0||b){d.target.value="";return}const a=re(M,{acceptMimes:u==null?void 0:u.acceptMimes,maxSize:u==null?void 0:u.maxSize,t:e,toast:t,onError:u.onError});if(a.length<=0){d.target.value="";return}A(!0);try{if(u!=null&&u.multiple){const n=a.map(async m=>{let l="";return u.upload?l=await u.upload(m):l=URL.createObjectURL(m),l});(await Promise.all(n)).forEach(m=>{r.chain().focus().setImageInline({src:m,inline:T,alt:_}).run()})}else{const n=a[0];let s="";u.upload?s=await u.upload(n):s=URL.createObjectURL(n),r.chain().focus().setImageInline({src:s,inline:T,alt:_}).run()}g(!1),C(""),p(L)}catch(n){console.error("Error uploading image",n),u.onError?u.onError({type:"upload",message:e("editor.upload.error")}):t({variant:"destructive",title:e("editor.upload.error")})}finally{A(!1),d.target.value=""}}function D(d){d.preventDefault(),d.stopPropagation(),r.chain().focus().setImageInline({src:E,inline:T,alt:_}).run(),g(!1),p(L),z(""),C("")}function q(d){var M;d.preventDefault(),(M=S.current)==null||M.click()}return c?i.jsxs(R.Dialog,{onOpenChange:g,open:j,children:[i.jsx(R.DialogTrigger,{asChild:!0,children:i.jsx(le.ActionButton,{disabled:x,icon:f,tooltip:h,action:()=>{x||g(!0)}})}),i.jsxs(R.DialogContent,{children:[i.jsx(R.DialogTitle,{children:e("editor.image.dialog.title")}),i.jsxs(F.Tabs,{activationMode:"manual",defaultValue:u.resourceImage==="both"||u.resourceImage==="upload"?"upload":"link",children:[u.resourceImage==="both"&&i.jsxs(F.TabsList,{className:"richtext-grid richtext-w-full richtext-grid-cols-2",children:[i.jsx(F.TabsTrigger,{value:"upload",children:e("editor.image.dialog.tab.upload")}),i.jsx(F.TabsTrigger,{value:"link",children:e("editor.image.dialog.tab.url")})]}),i.jsxs("div",{className:"richtext-my-[10px] richtext-flex richtext-items-center richtext-gap-[4px]",children:[i.jsx(ne,{checked:T,onCheckedChange:d=>{p(d)}}),i.jsx(K.Label,{children:e("editor.link.dialog.inline")})]}),u.enableAlt&&i.jsxs("div",{className:"richtext-my-[10px] ",children:[i.jsx(K.Label,{className:"mb-[6px]",children:e("editor.imageUpload.alt")}),i.jsx(Q.Input,{onChange:d=>C(d.target.value),required:!0,type:"text",value:_})]}),i.jsxs(F.TabsContent,{value:"upload",children:[i.jsxs("div",{className:"richtext-flex richtext-items-center richtext-gap-[10px]",children:[i.jsx(U.Button,{className:"richtext-mt-1 richtext-w-full",disabled:b,onClick:q,size:"sm",children:b?i.jsxs(i.Fragment,{children:[e("editor.imageUpload.uploading"),i.jsx(B.IconComponent,{className:"richtext-ml-1 richtext-animate-spin",name:"Loader"})]}):e("editor.image.dialog.tab.upload")}),i.jsx(fe,{alt:_,disabled:b,editor:r,imageInline:T,onClose:()=>{ce.actionDialogImage.setOpen(r.id,!1),C("")}})]}),i.jsx("input",{accept:u.acceptMimes.join(",")||"image/*",multiple:u.multiple,onChange:O,ref:S,style:{display:"none"},type:"file"})]}),i.jsx(F.TabsContent,{value:"link",children:i.jsx("form",{onSubmit:D,children:i.jsxs("div",{className:"richtext-flex richtext-items-center richtext-gap-2",children:[i.jsx(Q.Input,{autoFocus:!0,onChange:d=>z(d.target.value),placeholder:e("editor.image.dialog.placeholder"),required:!0,type:"url",value:E}),i.jsx(U.Button,{type:"submit",children:e("editor.image.dialog.button.apply")})]})})})]})]})]}):i.jsx(i.Fragment,{})}const pe={acceptMimes:["image/jpeg","image/gif","image/png","image/jpg"],maxSize:1024*1024*5,multiple:!0,resourceImage:"both",defaultInline:!1,enableAlt:!0},$=G.index_default.extend({group:"inline",inline:!0,defining:!0,draggable:!0,selectable:!0,addOptions(){var e;return{...pe,...(e=this.parent)==null?void 0:e.call(this),upload:()=>Promise.reject("Image Upload Function"),button:({editor:t,extension:r,t:c})=>{var f,h;return{componentProps:{action:()=>!0,upload:r.options.upload,disabled:!((h=(f=t.can()).setImage)!=null&&h.call(f,{})),icon:"ImageUp",tooltip:c("editor.image.tooltip")}}}}},addAttributes(){var e;return{...(e=this.parent)==null?void 0:e.call(this),flipX:{default:!1},flipY:{default:!1},width:{default:null,parseHTML:t=>{const r=t.style.width||t.getAttribute("width")||null;return r?Number.parseInt(r,10):null},renderHTML:t=>({width:t.width})},align:{default:"center",parseHTML:t=>t.getAttribute("align"),renderHTML:t=>({align:t.align})},inline:{default:!1,parseHTML:t=>!!t.getAttribute("inline"),renderHTML:t=>({inline:t.inline})},alt:{default:"",parseHTML:t=>t.getAttribute("alt"),renderHTML:t=>({alt:t.alt})}}},addNodeView(){return ee.ReactNodeViewRenderer(ge)},addCommands(){var e;return{...(e=this.parent)==null?void 0:e.call(this),setImageInline:t=>({commands:r})=>r.insertContent({type:this.name,attrs:{...t,inline:t.inline??this.options.defaultInline}}),updateImage:t=>({commands:r})=>r.updateAttributes(this.name,t),setAlignImage:t=>({commands:r})=>r.updateAttributes(this.name,{align:t})}},renderHTML({HTMLAttributes:e}){const{flipX:t,flipY:r,align:c,inline:f}=e,h=f&&(c==="left"||c==="right"),x=t||r?`transform: rotateX(${t?"180":"0"}deg) rotateY(${r?"180":"0"}deg);`:"",j=h?"":`text-align: ${c};`,A=`${h?`float: ${c};`:""}${h?c==="left"?"margin: 1em 1em 1em 0;":"margin: 1em 0 1em 1em;":""}${x}`;return[f?"span":"div",{style:j,class:"image"},["img",se.mergeAttributes({height:"auto",style:A},this.options.HTMLAttributes,e)]]},parseHTML(){return[{tag:"span.image img",getAttrs:e=>{var h;const t=e==null?void 0:e.parentElement,r=e==null?void 0:e.getAttribute("width"),c=(e==null?void 0:e.getAttribute("flipx"))||!1,f=(e==null?void 0:e.getAttribute("flipy"))||!1;return{src:e==null?void 0:e.getAttribute("src"),alt:e==null?void 0:e.getAttribute("alt"),caption:e==null?void 0:e.getAttribute("caption"),width:r?Number.parseInt(r,10):null,align:(e==null?void 0:e.getAttribute("align"))||((h=t==null?void 0:t.style)==null?void 0:h.textAlign)||null,inline:(e==null?void 0:e.getAttribute("inline"))||!1,flipX:c==="true",flipY:f==="true"}}},{tag:"div[class=image]",getAttrs:e=>{const t=e.querySelector("img"),r=t==null?void 0:t.getAttribute("width"),c=(t==null?void 0:t.getAttribute("flipx"))||!1,f=(t==null?void 0:t.getAttribute("flipy"))||!1;return{src:t==null?void 0:t.getAttribute("src"),alt:t==null?void 0:t.getAttribute("alt"),caption:t==null?void 0:t.getAttribute("caption"),width:r?Number.parseInt(r,10):null,align:(t==null?void 0:t.getAttribute("align"))||e.style.textAlign||null,inline:(t==null?void 0:t.getAttribute("inline"))||!1,flipX:c==="true",flipY:f==="true"}}},{tag:'img[src]:not([src^="data:"])'}]}});exports.Image=$;exports.RichTextImage=xe;

package/lib/Image.d.cts

@@ -1,5 +1,6 @@
 import { Editor } from '@tiptap/react';
 import { Extension } from '@tiptap/core';
+import { JSX } from 'react/jsx-runtime';
 import { Node as Node_2 } from '@tiptap/core';
 
 /**
@@ -92,7 +93,8 @@ export declare interface IImageOptions extends GeneralOptions<IImageOptions> {
 
 declare const Image_2: Node_2<IImageOptions, any>;
 export { Image_2 as Image }
-export default Image_2;
+
+export declare function RichTextImage(): JSX.Element;
 
 export declare interface SetImageAttrsOptions {
     src?: string;
@@ -145,11 +147,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;
         };
     }
 }
@@ -157,8 +170,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;
         };
     }
 }
@@ -176,7 +190,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;
         };
     }
 }
@@ -201,10 +224,8 @@ declare module '@tiptap/core' {
 
 
 declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        painter: {
-            setPainter: (marks: Mark[]) => ReturnType;
-        };
+    interface Storage {
+        highlight: HighlightStorage;
     }
 }
 
@@ -244,22 +265,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: {
@@ -282,8 +287,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;
         };
     }
 }
@@ -291,9 +303,8 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        lineHeight: {
-            setLineHeight: (lineHeight: string) => ReturnType;
-            unsetLineHeight: () => ReturnType;
+        katex: {
+            setKatex: (arg?: IKatexAttrs) => ReturnType;
         };
     }
 }
@@ -309,20 +320,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: {
@@ -346,16 +343,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/Image.d.ts

@@ -1,5 +1,6 @@
 import { Editor } from '@tiptap/react';
 import { Extension } from '@tiptap/core';
+import { JSX } from 'react/jsx-runtime';
 import { Node as Node_2 } from '@tiptap/core';
 
 /**
@@ -92,7 +93,8 @@ export declare interface IImageOptions extends GeneralOptions<IImageOptions> {
 
 declare const Image_2: Node_2<IImageOptions, any>;
 export { Image_2 as Image }
-export default Image_2;
+
+export declare function RichTextImage(): JSX.Element;
 
 export declare interface SetImageAttrsOptions {
     src?: string;
@@ -145,11 +147,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;
         };
     }
 }
@@ -157,8 +170,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;
         };
     }
 }
@@ -176,7 +190,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;
         };
     }
 }
@@ -201,10 +224,8 @@ declare module '@tiptap/core' {
 
 
 declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        painter: {
-            setPainter: (marks: Mark[]) => ReturnType;
-        };
+    interface Storage {
+        highlight: HighlightStorage;
     }
 }
 
@@ -244,22 +265,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: {
@@ -282,8 +287,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;
         };
     }
 }
@@ -291,9 +303,8 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        lineHeight: {
-            setLineHeight: (lineHeight: string) => ReturnType;
-            unsetLineHeight: () => ReturnType;
+        katex: {
+            setKatex: (arg?: IKatexAttrs) => ReturnType;
         };
     }
 }
@@ -309,20 +320,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: {
@@ -346,16 +343,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: {