reactjs-tiptap-editor 0.4.2 → 1.0.0

package/lib/ImageGif.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.ImageGif=e.ImageGif;exports.default=e.ImageGif;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("./index-RfTlOzIr.cjs"),N=require("./throttle-qX7Yjtsg.cjs"),C=require("./index-BH4bc3jN.cjs"),l=require("react/jsx-runtime"),d=require("react"),G=require("./index-Dfmm6FTT.cjs"),L=require("./isNumber-ClPupm7P.cjs"),B=require("./toggle-D41PzQLJ.cjs");require("./index-DV5kbgRU.cjs");const z=require("./useButtonProps-C6Vpn190.cjs"),P=require("./popover-BgmUNMHj.cjs"),D=require("./input-_ECRfn3Y.cjs"),S={TOP_LEFT:"tl",TOP_RIGHT:"tr",BOTTOM_LEFT:"bl",BOTTOM_RIGHT:"br"};function F(e){var q,k;const[t,r]=d.useState({width:G.IMAGE_MAX_SIZE,height:G.IMAGE_MAX_SIZE}),[c,i]=d.useState({width:0,height:0}),[n]=d.useState([S.TOP_LEFT,S.TOP_RIGHT,S.BOTTOM_LEFT,S.BOTTOM_RIGHT]),[a,s]=d.useState(!1),[h,f]=d.useState({x:0,y:0,w:0,h:0,dir:""}),{align:b}=(q=e==null?void 0:e.node)==null?void 0:q.attrs,m=d.useMemo(()=>{var x;const{src:o,alt:w,width:v,height:y}=(x=e==null?void 0:e.node)==null?void 0:x.attrs,M=L.isNumber(v)?`${v}px`:v,u=L.isNumber(y)?`${y}px`:y;return{src:o||void 0,alt:w||void 0,style:{width:M||void 0,height:u||void 0}}},[(k=e==null?void 0:e.node)==null?void 0:k.attrs]),g=d.useMemo(()=>{const{style:{width:o}}=m;return{width:o==="100%"?o:void 0}},[m]);function T(o){i({width:o.target.width,height:o.target.height})}function _(){const{editor:o,getPos:w}=e;o.commands.setNodeSelection(w())}const A=d.useCallback(N.throttle(()=>{const{editor:o}=e,{width:w}=getComputedStyle(o.view.dom);r(v=>({...v,width:Number.parseInt(w,10)}))},G.IMAGE_THROTTLE_WAIT_TIME),[e==null?void 0:e.editor]);function p(o,w){o.preventDefault(),o.stopPropagation();const v=c.width,y=c.height,M=v/y;let u=Number(e.node.attrs.width),x=Number(e.node.attrs.height);const I=t.width;u&&!x?(u=u>I?I:u,x=Math.round(u/M)):x&&!u?(u=Math.round(x*M),u=u>I?I:u):!u&&!x?(u=v>I?I:v,x=Math.round(u/M)):u=u>I?I:u,s(!0),f({x:o.clientX,y:o.clientY,w:u,h:x,dir:w})}const j=d.useCallback(N.throttle(o=>{if(o.preventDefault(),o.stopPropagation(),!a)return;const{x:w,w:v,dir:y}=h,M=(o.clientX-w)*(/l/.test(y)?-1:1),u=L.clamp(v+M,G.IMAGE_MIN_SIZE,t.width);e.updateAttributes({width:u,height:null})},G.IMAGE_THROTTLE_WAIT_TIME),[a,h,t,e.updateAttributes]),E=d.useCallback(o=>{o.preventDefault(),o.stopPropagation(),a&&(f({x:0,y:0,w:0,h:0,dir:""}),s(!1),_())},[a,_]),$=d.useCallback(()=>{document==null||document.addEventListener("mousemove",j,!0),document==null||document.addEventListener("mouseup",E,!0)},[j,E]),O=d.useCallback(()=>{document==null||document.removeEventListener("mousemove",j,!0),document==null||document.removeEventListener("mouseup",E,!0)},[j,E]);d.useEffect(()=>(a?$():O(),()=>{O()}),[a,$,O]);const R=d.useMemo(()=>new ResizeObserver(()=>A()),[A]);return d.useEffect(()=>(R.observe(e.editor.view.dom),()=>{R.disconnect()}),[e.editor.view.dom,R]),l.jsx(C.NodeViewWrapper,{className:"image-view",style:{...g,width:"100%",textAlign:b},children:l.jsxs("div",{"data-drag-handle":!0,draggable:"true",style:g,className:`image-view__body ${e!=null&&e.selected?"image-view__body--focused":""} ${a?"image-view__body--resizing":""}`,children:[l.jsx("img",{alt:m.alt,className:"image-view__body__image block",height:"auto",onClick:_,onLoad:T,src:m.src,style:m.style}),(e==null?void 0:e.editor.view.editable)&&((e==null?void 0:e.selected)||a)&&l.jsx("div",{className:"image-resizer",children:n==null?void 0:n.map(o=>l.jsx("span",{className:`image-resizer__handler image-resizer__handler--${o}`,onMouseDown:w=>p(w,o)},`image-dir-${o}`))})]})})}async function V(e){var c;const r=await(await fetch(`https://api.giphy.com/v1/gifs/trending?q=&limit=15&api_key=${e}`)).json();return(c=r==null?void 0:r.data)==null?void 0:c.map(i=>{var n,a,s;return{id:i==null?void 0:i.id,src:(n=i==null?void 0:i.images.original)==null?void 0:n.url,width:+((a=i==null?void 0:i.images.original)==null?void 0:a.width),height:+((s=i==null?void 0:i.images.original)==null?void 0:s.width)}})}async function X(e,t){var i;const c=await(await fetch(`https://api.giphy.com/v1/gifs/search?q=${e}&limit=15&api_key=${t}`)).json();return(i=c==null?void 0:c.data)==null?void 0:i.map(n=>{var a,s,h;return{id:n==null?void 0:n.id,src:(a=n==null?void 0:n.images.original)==null?void 0:a.url,width:+((s=n==null?void 0:n.images.original)==null?void 0:s.width),height:+((h=n==null?void 0:n.images.original)==null?void 0:h.width)}})}async function Y(e){var n,a;const t=await fetch(`https://tenor.googleapis.com/v2/trending_terms?key=${e}&limit=10`),r=await(t==null?void 0:t.json()),i=await(await fetch(`https://tenor.googleapis.com/v2/search?key=${e}&q=${(n=r==null?void 0:r.results)==null?void 0:n[0]}&limit=15`)).json();return(a=i==null?void 0:i.results)==null?void 0:a.map(s=>{var h,f,b,m,g,T,_,A;return{id:s==null?void 0:s.id,src:(f=(h=s==null?void 0:s.media_formats)==null?void 0:h.gif)==null?void 0:f.url,width:(g=(m=(b=s==null?void 0:s.media_formats)==null?void 0:b.gif)==null?void 0:m.dims)==null?void 0:g[0],height:(A=(_=(T=s==null?void 0:s.media_formats)==null?void 0:T.gif)==null?void 0:_.dims)==null?void 0:A[1]}})}async function Z(e,t){var i;const c=await(await fetch(`https://tenor.googleapis.com/v2/search?key=${t}&q=${e}&limit=15`)).json();return(i=c==null?void 0:c.results)==null?void 0:i.map(n=>{var a,s,h,f,b,m,g,T;return{id:n==null?void 0:n.id,src:(s=(a=n==null?void 0:n.media_formats)==null?void 0:a.gif)==null?void 0:s.url,width:(b=(f=(h=n==null?void 0:n.media_formats)==null?void 0:h.gif)==null?void 0:f.dims)==null?void 0:b[0],height:(T=(g=(m=n==null?void 0:n.media_formats)==null?void 0:m.gif)==null?void 0:g.dims)==null?void 0:T[1]}})}function U(e,t){return{searchTrending:async()=>t?e==="giphy"?V(t):e==="tenor"?Y(t):[]:[],searchWord:async i=>t?e==="giphy"?X(i,t):e==="tenor"?Z(i,t):[]:[]}}function J({selectImage:e,apiKey:t,provider:r,children:c}){const[i,n]=d.useState(!1),[a,s]=d.useState([]),h=d.useRef(null),{searchTrending:f,searchWord:b}=U(r,t);d.useEffect(()=>{(async()=>{const g=await f();s(g)})()},[]);const m=d.useCallback(N.debounce(async g=>{if(!g.target.value){const _=await f();s(_);return}const T=await b(g.target.value);s(T)},350),[]);return l.jsxs(P.Popover,{modal:!0,onOpenChange:n,open:i,children:[l.jsx(P.PopoverTrigger,{asChild:!0,children:c}),l.jsx(P.PopoverContent,{align:"start",className:"richtext-size-full richtext-p-2",hideWhenDetached:!0,side:"bottom",children:t?l.jsxs(l.Fragment,{children:[l.jsx("div",{className:"richtext-mb-[10px] richtext-w-full",children:l.jsx(D.Input,{onChange:m,placeholder:"Search GIF",ref:h,type:"text"})}),l.jsx("div",{className:"richtext-max-h-[280px] !richtext-max-w-[400px] richtext-overflow-y-auto",children:l.jsx("div",{className:"richtext-grid richtext-grid-cols-2 richtext-gap-1 ",children:a!=null&&a.length?a==null?void 0:a.map(g=>l.jsx("img",{alt:"",className:"richtext-cursor-pointer richtext-object-contain richtext-text-center",src:g.src,onClick:()=>{e(g.src),n(!1)}},g.id)):l.jsx("p",{children:"No GIFs found"})})})]}):l.jsx("div",{children:l.jsx("p",{children:"Missing Giphy API Key"})})})]})}function Q(){const e=z.useButtonProps(H.name),{action:t,icon:r,tooltip:c,apiKey:i,provider:n}=(e==null?void 0:e.componentProps)??{},{editorDisabled:a}=z.useToggleActive(),s=h=>{a||t&&t(h)};return l.jsx(J,{apiKey:i,provider:n,selectImage:s,children:l.jsx(B.ActionButton,{icon:r,tooltip:c})})}const H=N.index_default.extend({name:"imageGif",addOptions(){var e;return{...(e=this.parent)==null?void 0:e.call(this),inline:!1,content:"",marks:"",group:"block",API_KEY:"",provider:"giphy",draggable:!1,selectable:!0,atom:!0,button:({editor:t,extension:r,t:c})=>{var a,s;const i=((a=r==null?void 0:r.options)==null?void 0:a.provider)||"",n=((s=r==null?void 0:r.options)==null?void 0:s.API_KEY)||"";return{componentProps:{action:h=>{t.chain().focus().setImageGif({src:h}).run()},isActive:()=>!1,disabled:!1,icon:"GifIcon",tooltip:c("editor.imageGif.tooltip"),apiKey:n,provider:i}}}}},addAttributes(){var e;return{...(e=this.parent)==null?void 0:e.call(this),width:{default:null,parseHTML:t=>{const r=t.style.width||t.getAttribute("width")||"10";return r===void 0?null:Number.parseInt(`${r}`,10)},renderHTML:t=>({width:t.width})},align:{default:"center",parseHTML:t=>t.getAttribute("align"),renderHTML:t=>({align:t.align})}}},addNodeView(){return C.ReactNodeViewRenderer(F)},addCommands(){var e;return{...(e=this.parent)==null?void 0:e.call(this),setImageGif:t=>({commands:r})=>r.insertContent({type:this.name,attrs:t}),updateImageGif:t=>({commands:r})=>r.updateAttributes(this.name,t),setAlignImageGif:t=>({commands:r})=>r.updateAttributes(this.name,{align:t})}},renderHTML({HTMLAttributes:e}){const{align:t}=e;return["div",{style:t?`text-align: ${t};`:"",class:"imageGIf"},["img",W.mergeAttributes({height:"auto"},this.options.HTMLAttributes,e)]]},parseHTML(){return[{tag:"div[class=imageGIf]",getAttrs:e=>{const t=e.querySelector("img"),r=t==null?void 0:t.getAttribute("width");return{src:t==null?void 0:t.getAttribute("src"),alt:t==null?void 0:t.getAttribute("alt"),title:t==null?void 0:t.getAttribute("title"),width:r?Number.parseInt(r,10):null,align:(t==null?void 0:t.getAttribute("align"))||e.style.textAlign||null}}}]}});exports.ImageGif=H;exports.RichTextImageGif=Q;

package/lib/ImageGif.d.cts

@@ -1,9 +1,8 @@
 import { ImageOptions } from '@tiptap/extension-image';
+import { JSX } from 'react/jsx-runtime';
 import { Node as Node_2 } from '@tiptap/core';
 
-declare const ImageGif: Node_2<ImageGifOptions, any>;
-export { ImageGif }
-export default ImageGif;
+export declare const ImageGif: Node_2<ImageGifOptions, any>;
 
 declare interface ImageGifOptions extends ImageOptions {
     provider: 'giphy' | 'tenor';
@@ -13,6 +12,8 @@ declare interface ImageGifOptions extends ImageOptions {
     API_KEY: string;
 }
 
+export declare function RichTextImageGif(): JSX.Element;
+
 export declare interface SetImageAttrsOptions {
     src?: string;
     /** The alternative text for the image. */
@@ -58,11 +59,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;
         };
     }
 }
@@ -70,8 +82,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;
         };
     }
 }
@@ -89,7 +102,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;
         };
     }
 }
@@ -114,10 +136,8 @@ declare module '@tiptap/core' {
 
 
 declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        painter: {
-            setPainter: (marks: Mark[]) => ReturnType;
-        };
+    interface Storage {
+        highlight: HighlightStorage;
     }
 }
 
@@ -202,16 +222,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: {
@@ -222,20 +232,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: {
@@ -259,16 +255,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/ImageGif.d.ts

@@ -1,9 +1,8 @@
 import { ImageOptions } from '@tiptap/extension-image';
+import { JSX } from 'react/jsx-runtime';
 import { Node as Node_2 } from '@tiptap/core';
 
-declare const ImageGif: Node_2<ImageGifOptions, any>;
-export { ImageGif }
-export default ImageGif;
+export declare const ImageGif: Node_2<ImageGifOptions, any>;
 
 declare interface ImageGifOptions extends ImageOptions {
     provider: 'giphy' | 'tenor';
@@ -13,6 +12,8 @@ declare interface ImageGifOptions extends ImageOptions {
     API_KEY: string;
 }
 
+export declare function RichTextImageGif(): JSX.Element;
+
 export declare interface SetImageAttrsOptions {
     src?: string;
     /** The alternative text for the image. */
@@ -58,11 +59,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;
         };
     }
 }
@@ -70,8 +82,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;
         };
     }
 }
@@ -89,7 +102,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;
         };
     }
 }
@@ -114,10 +136,8 @@ declare module '@tiptap/core' {
 
 
 declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        painter: {
-            setPainter: (marks: Mark[]) => ReturnType;
-        };
+    interface Storage {
+        highlight: HighlightStorage;
     }
 }
 
@@ -202,16 +222,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: {
@@ -222,20 +232,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: {
@@ -259,16 +255,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: {