reactjs-tiptap-editor 0.4.2 → 1.0.1

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,6 +59,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: {
@@ -89,7 +111,7 @@ declare module '@tiptap/core' {
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         exportWord: {
-            exportToWord: () => ReturnType;
+            exportToWord: (docState: any) => 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,6 +59,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: {
@@ -89,7 +111,7 @@ declare module '@tiptap/core' {
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         exportWord: {
-            exportToWord: () => ReturnType;
+            exportToWord: (docState: any) => 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.js

@@ -1,7 +1,426 @@
-import "./index-kbO3iWqL.js";
-import { av as t, av as e } from "./RichTextEditor-DGcKEUGr.js";
-import "./dom-dataset-lYeH6gfI.js";
+import { m as F } from "./index-DnWWK9F_.js";
+import { a as k, d as B, c as q } from "./throttle-CdwDrFpn.js";
+import { N as V, R as X } from "./index-DzcKxutn.js";
+import { jsx as u, jsxs as P, Fragment as Y } from "react/jsx-runtime";
+import { useState as A, useMemo as L, useCallback as G, useEffect as z, useRef as Z } from "react";
+import { I as C, m as W, n as U } from "./index-DYkucCoF.js";
+import { i as j, c as J } from "./isNumber-fpLGS0AZ.js";
+import { A as Q } from "./toggle-Cdp4IT2U.js";
+import "./index-BPfVXs5_.js";
+import { u as K, a as ee } from "./useButtonProps-BsEd4zYM.js";
+import { P as te, a as re, b as ne } from "./popover-CAuEW0Mr.js";
+import { I as ie } from "./input-wJ9PDEzZ.js";
+const O = {
+  TOP_LEFT: "tl",
+  TOP_RIGHT: "tr",
+  BOTTOM_LEFT: "bl",
+  BOTTOM_RIGHT: "br"
+};
+function ae(e) {
+  var $, H;
+  const [t, n] = A({
+    width: C,
+    height: C
+  }), [c, i] = A({
+    width: 0,
+    height: 0
+  }), [r] = A([
+    O.TOP_LEFT,
+    O.TOP_RIGHT,
+    O.BOTTOM_LEFT,
+    O.BOTTOM_RIGHT
+  ]), [a, s] = A(!1), [l, g] = A({
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0,
+    dir: ""
+  }), { align: b } = ($ = e == null ? void 0 : e.node) == null ? void 0 : $.attrs, m = L(() => {
+    var v;
+    const { src: o, alt: f, width: w, height: T } = (v = e == null ? void 0 : e.node) == null ? void 0 : v.attrs, x = j(w) ? `${w}px` : w, d = j(T) ? `${T}px` : T;
+    return {
+      src: o || void 0,
+      alt: f || void 0,
+      style: {
+        width: x || void 0,
+        height: d || void 0
+      }
+    };
+  }, [(H = e == null ? void 0 : e.node) == null ? void 0 : H.attrs]), h = L(() => {
+    const {
+      style: { width: o }
+    } = m;
+    return { width: o === "100%" ? o : void 0 };
+  }, [m]);
+  function _(o) {
+    i({
+      width: o.target.width,
+      height: o.target.height
+    });
+  }
+  function y() {
+    const { editor: o, getPos: f } = e;
+    o.commands.setNodeSelection(f());
+  }
+  const M = G(
+    k(() => {
+      const { editor: o } = e, { width: f } = getComputedStyle(o.view.dom);
+      n((w) => ({
+        ...w,
+        width: Number.parseInt(f, 10)
+      }));
+    }, W),
+    [e == null ? void 0 : e.editor]
+  );
+  function D(o, f) {
+    o.preventDefault(), o.stopPropagation();
+    const w = c.width, T = c.height, x = w / T;
+    let d = Number(e.node.attrs.width), v = Number(e.node.attrs.height);
+    const I = t.width;
+    d && !v ? (d = d > I ? I : d, v = Math.round(d / x)) : v && !d ? (d = Math.round(v * x), d = d > I ? I : d) : !d && !v ? (d = w > I ? I : w, v = Math.round(d / x)) : d = d > I ? I : d, s(!0), g({
+      x: o.clientX,
+      y: o.clientY,
+      w: d,
+      h: v,
+      dir: f
+    });
+  }
+  const N = G(
+    k((o) => {
+      if (o.preventDefault(), o.stopPropagation(), !a)
+        return;
+      const { x: f, w, dir: T } = l, x = (o.clientX - f) * (/l/.test(T) ? -1 : 1), d = J(w + x, U, t.width);
+      e.updateAttributes({
+        width: d,
+        height: null
+      });
+    }, W),
+    [a, l, t, e.updateAttributes]
+  ), E = G(
+    (o) => {
+      o.preventDefault(), o.stopPropagation(), a && (g({
+        x: 0,
+        y: 0,
+        w: 0,
+        h: 0,
+        dir: ""
+      }), s(!1), y());
+    },
+    [a, y]
+  ), R = G(() => {
+    document == null || document.addEventListener("mousemove", N, !0), document == null || document.addEventListener("mouseup", E, !0);
+  }, [N, E]), p = G(() => {
+    document == null || document.removeEventListener("mousemove", N, !0), document == null || document.removeEventListener("mouseup", E, !0);
+  }, [N, E]);
+  z(() => (a ? R() : p(), () => {
+    p();
+  }), [a, R, p]);
+  const S = L(() => new ResizeObserver(() => M()), [M]);
+  return z(() => (S.observe(e.editor.view.dom), () => {
+    S.disconnect();
+  }), [e.editor.view.dom, S]), /* @__PURE__ */ u(
+    V,
+    {
+      className: "image-view",
+      style: { ...h, width: "100%", textAlign: b },
+      children: /* @__PURE__ */ P(
+        "div",
+        {
+          "data-drag-handle": !0,
+          draggable: "true",
+          style: h,
+          className: `image-view__body ${e != null && e.selected ? "image-view__body--focused" : ""} ${a ? "image-view__body--resizing" : ""}`,
+          children: [
+            /* @__PURE__ */ u(
+              "img",
+              {
+                alt: m.alt,
+                className: "image-view__body__image block",
+                height: "auto",
+                onClick: y,
+                onLoad: _,
+                src: m.src,
+                style: m.style
+              }
+            ),
+            (e == null ? void 0 : e.editor.view.editable) && ((e == null ? void 0 : e.selected) || a) && /* @__PURE__ */ u("div", { className: "image-resizer", children: r == null ? void 0 : r.map((o) => /* @__PURE__ */ u(
+              "span",
+              {
+                className: `image-resizer__handler image-resizer__handler--${o}`,
+                onMouseDown: (f) => D(f, o)
+              },
+              `image-dir-${o}`
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
+async function se(e) {
+  var c;
+  const n = await (await fetch(`https://api.giphy.com/v1/gifs/trending?q=&limit=15&api_key=${e}`)).json();
+  return (c = n == null ? void 0 : n.data) == null ? void 0 : c.map((i) => {
+    var r, a, s;
+    return {
+      id: i == null ? void 0 : i.id,
+      src: (r = i == null ? void 0 : i.images.original) == null ? void 0 : r.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 oe(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((r) => {
+    var a, s, l;
+    return {
+      id: r == null ? void 0 : r.id,
+      src: (a = r == null ? void 0 : r.images.original) == null ? void 0 : a.url,
+      width: +((s = r == null ? void 0 : r.images.original) == null ? void 0 : s.width),
+      height: +((l = r == null ? void 0 : r.images.original) == null ? void 0 : l.width)
+    };
+  });
+}
+async function ce(e) {
+  var r, a;
+  const t = await fetch(`https://tenor.googleapis.com/v2/trending_terms?key=${e}&limit=10`), n = await (t == null ? void 0 : t.json()), i = await (await fetch(`https://tenor.googleapis.com/v2/search?key=${e}&q=${(r = n == null ? void 0 : n.results) == null ? void 0 : r[0]}&limit=15`)).json();
+  return (a = i == null ? void 0 : i.results) == null ? void 0 : a.map((s) => {
+    var l, g, b, m, h, _, y, M;
+    return {
+      id: s == null ? void 0 : s.id,
+      src: (g = (l = s == null ? void 0 : s.media_formats) == null ? void 0 : l.gif) == null ? void 0 : g.url,
+      width: (h = (m = (b = s == null ? void 0 : s.media_formats) == null ? void 0 : b.gif) == null ? void 0 : m.dims) == null ? void 0 : h[0],
+      height: (M = (y = (_ = s == null ? void 0 : s.media_formats) == null ? void 0 : _.gif) == null ? void 0 : y.dims) == null ? void 0 : M[1]
+    };
+  });
+}
+async function de(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((r) => {
+    var a, s, l, g, b, m, h, _;
+    return {
+      id: r == null ? void 0 : r.id,
+      src: (s = (a = r == null ? void 0 : r.media_formats) == null ? void 0 : a.gif) == null ? void 0 : s.url,
+      width: (b = (g = (l = r == null ? void 0 : r.media_formats) == null ? void 0 : l.gif) == null ? void 0 : g.dims) == null ? void 0 : b[0],
+      height: (_ = (h = (m = r == null ? void 0 : r.media_formats) == null ? void 0 : m.gif) == null ? void 0 : h.dims) == null ? void 0 : _[1]
+    };
+  });
+}
+function le(e, t) {
+  return {
+    searchTrending: async () => t ? e === "giphy" ? se(t) : e === "tenor" ? ce(t) : [] : [],
+    searchWord: async (i) => t ? e === "giphy" ? oe(i, t) : e === "tenor" ? de(i, t) : [] : []
+  };
+}
+function he({ selectImage: e, apiKey: t, provider: n, children: c }) {
+  const [i, r] = A(!1), [a, s] = A([]), l = Z(null), { searchTrending: g, searchWord: b } = le(n, t);
+  z(() => {
+    (async () => {
+      const h = await g();
+      s(h);
+    })();
+  }, []);
+  const m = G(
+    B(async (h) => {
+      if (!h.target.value) {
+        const y = await g();
+        s(y);
+        return;
+      }
+      const _ = await b(h.target.value);
+      s(_);
+    }, 350),
+    // Adjust the debounce delay as needed
+    []
+  );
+  return /* @__PURE__ */ P(
+    te,
+    {
+      modal: !0,
+      onOpenChange: r,
+      open: i,
+      children: [
+        /* @__PURE__ */ u(re, { asChild: !0, children: c }),
+        /* @__PURE__ */ u(
+          ne,
+          {
+            align: "start",
+            className: "richtext-size-full richtext-p-2",
+            hideWhenDetached: !0,
+            side: "bottom",
+            children: t ? /* @__PURE__ */ P(Y, { children: [
+              /* @__PURE__ */ u("div", { className: "richtext-mb-[10px] richtext-w-full", children: /* @__PURE__ */ u(
+                ie,
+                {
+                  onChange: m,
+                  placeholder: "Search GIF",
+                  ref: l,
+                  type: "text"
+                }
+              ) }),
+              /* @__PURE__ */ u("div", { className: "richtext-max-h-[280px] !richtext-max-w-[400px] richtext-overflow-y-auto", children: /* @__PURE__ */ u("div", { className: "richtext-grid richtext-grid-cols-2 richtext-gap-1 ", children: a != null && a.length ? a == null ? void 0 : a.map((h) => /* @__PURE__ */ u(
+                "img",
+                {
+                  alt: "",
+                  className: "richtext-cursor-pointer richtext-object-contain richtext-text-center",
+                  src: h.src,
+                  onClick: () => {
+                    e(h.src), r(!1);
+                  }
+                },
+                h.id
+              )) : /* @__PURE__ */ u("p", { children: "No GIFs found" }) }) })
+            ] }) : /* @__PURE__ */ u("div", { children: /* @__PURE__ */ u("p", { children: "Missing Giphy API Key" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function Ge() {
+  const e = K(ue.name), {
+    action: t,
+    icon: n,
+    tooltip: c,
+    apiKey: i,
+    provider: r
+  } = (e == null ? void 0 : e.componentProps) ?? {}, { editorDisabled: a } = ee();
+  return /* @__PURE__ */ u(
+    he,
+    {
+      apiKey: i,
+      provider: r,
+      selectImage: (l) => {
+        a || t && t(l);
+      },
+      children: /* @__PURE__ */ u(
+        Q,
+        {
+          icon: n,
+          tooltip: c
+        }
+      )
+    }
+  );
+}
+const ue = /* @__PURE__ */ q.extend({
+  name: "imageGif",
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-expect-error
+  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: n, t: c }) => {
+        var a, s;
+        const i = ((a = n == null ? void 0 : n.options) == null ? void 0 : a.provider) || "", r = ((s = n == null ? void 0 : n.options) == null ? void 0 : s.API_KEY) || "";
+        return {
+          componentProps: {
+            action: (l) => {
+              t.chain().focus().setImageGif({ src: l }).run();
+            },
+            isActive: () => !1,
+            disabled: !1,
+            icon: "GifIcon",
+            tooltip: c("editor.imageGif.tooltip"),
+            apiKey: r,
+            provider: i
+          }
+        };
+      }
+    };
+  },
+  addAttributes() {
+    var e;
+    return {
+      ...(e = this.parent) == null ? void 0 : e.call(this),
+      width: {
+        default: null,
+        parseHTML: (t) => {
+          const n = t.style.width || t.getAttribute("width") || "10";
+          return n === void 0 ? null : Number.parseInt(`${n}`, 10);
+        },
+        renderHTML: (t) => ({
+          width: t.width
+        })
+      },
+      align: {
+        default: "center",
+        parseHTML: (t) => t.getAttribute("align"),
+        renderHTML: (t) => ({
+          align: t.align
+        })
+      }
+    };
+  },
+  addNodeView() {
+    return X(ae);
+  },
+  addCommands() {
+    var e;
+    return {
+      ...(e = this.parent) == null ? void 0 : e.call(this),
+      setImageGif: (t) => ({ commands: n }) => n.insertContent({
+        type: this.name,
+        attrs: t
+      }),
+      updateImageGif: (t) => ({ commands: n }) => n.updateAttributes(this.name, t),
+      setAlignImageGif: (t) => ({ commands: n }) => n.updateAttributes(this.name, { align: t })
+    };
+  },
+  renderHTML({ HTMLAttributes: e }) {
+    const { align: t } = e;
+    return [
+      "div",
+      // Parent element
+      {
+        style: t ? `text-align: ${t};` : "",
+        class: "imageGIf"
+      },
+      [
+        "img",
+        F(
+          // Always render the `height="auto"`
+          {
+            height: "auto"
+          },
+          this.options.HTMLAttributes,
+          e
+        )
+      ]
+    ];
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "div[class=imageGIf]",
+        getAttrs: (e) => {
+          const t = e.querySelector("img"), n = 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: n ? Number.parseInt(n, 10) : null,
+            align: (t == null ? void 0 : t.getAttribute("align")) || e.style.textAlign || null
+          };
+        }
+      }
+    ];
+  }
+});
 export {
-  t as ImageGif,
-  e as default
+  ue as ImageGif,
+  Ge as RichTextImageGif
 };