reactjs-tiptap-editor 1.0.10 → 1.0.12

package/lib/Image.js

@@ -1,23 +1,25 @@
-import { q as he, m as fe, u as ge } from "./index-sVScpCFG.js";
-import { a as q, c as pe } from "./throttle-DsowOft0.js";
+import { o as he, m as fe, s as ge } from "./clsx-DmuN0U_8.js";
+import { a as q, c as pe } from "./throttle-BRtichEP.js";
 import { jsx as o, jsxs as b, Fragment as H } from "react/jsx-runtime";
 import j, { useState as L, useMemo as P, useCallback as F, useEffect as W, useRef as ae } from "react";
-import { I as Z, j as J, k as be, u as ne } from "./index-0OnGZkVF.js";
-import { i as K, c as xe } from "./isNumber-DF0fU3ob.js";
-import { A as ye } from "./index-BIqaogQg.js";
-import { B } from "./button-CBO-WDXK.js";
-import { I as Q } from "./input-Bx4uo4gO.js";
-import { L as ee } from "./label-uKG7RzFU.js";
-import { T as we, a as Ie, b as te, c as ie } from "./tabs-BKpr0QQB.js";
+import { I as Z, i as J, j as be, u as ne } from "./index-BDX1uE62.js";
+import { i as K, c as xe } from "./isNumber-DmQXlKp3.js";
+import { A as ye } from "./toggle-Bxwwb_Kp.js";
+import "./index-D9JOHlso.js";
+import "./theme.js";
+import { B } from "./button-9_8t7ca7.js";
+import { I as Q } from "./input-YoheBL2D.js";
+import { L as ee } from "./label-C8PLcjFI.js";
+import { T as we, a as Ie, b as te, c as ie } from "./tabs-DxlKKM-N.js";
 import { u as re } from "./use-toast-Crf7-q5H.js";
-import { C as ve } from "./checkbox-D1h32VWM.js";
-import { D as le, a as oe, b as se, c as ce, d as Te } from "./dialog-DSvgtlDI.js";
+import { C as ve } from "./checkbox-DnkkV6qo.js";
+import { D as le, a as oe, b as se, c as ce, d as Te } from "./dialog-DhayAPvV.js";
 import Ae from "react-image-crop";
-import { d as Ce, r as Ee } from "./file-BLas99n7.js";
-import { d as de, c as Me, u as Le, a as Ne } from "./useButtonProps-C_bqxmHi.js";
-import { I as $ } from "./Icon-D7GJZzoa.js";
-import { a as Se } from "./store-CsIFDUKR.js";
-import { l as _e, E as ze } from "./events.constant-wrlJ_7JZ.js";
+import { d as de, c as Ce, u as Ee, a as Me } from "./useButtonProps-CfYtuEnd.js";
+import { d as Le, r as Ne } from "./file-BLas99n7.js";
+import { I as $ } from "./Icon-ONE1AwKo.js";
+import { a as Se } from "./store-DG7cMfET.js";
+import { l as _e, E as ze } from "./events.constant-do95b767.js";
 const X = {
   TOP_LEFT: "tl",
   TOP_RIGHT: "tr",
@@ -262,14 +264,14 @@ function Ue({ editor: e, imageInline: t, onClose: a, disabled: s, alt: f }) {
     if (!x) {
       C(!0);
       try {
-        const r = Ce(k, ((i = E == null ? void 0 : E.file) == null ? void 0 : i.name) || "image.png");
+        const r = Le(k, ((i = E == null ? void 0 : E.file) == null ? void 0 : i.name) || "image.png");
         let h = "";
         p.upload ? h = await p.upload(r) : h = URL.createObjectURL(r), e.chain().focus().setImageInline({ src: h, inline: t, alt: f }).run(), m(!1), z({
           src: "",
           file: null
         }), N(), a();
       } catch (r) {
-        console.log("Error cropping image", r);
+        console.error("Error cropping image", r);
       } finally {
         C(!1);
       }
@@ -297,7 +299,7 @@ function Ue({ editor: e, imageInline: t, onClose: a, disabled: s, alt: f }) {
       i.target.value = "";
       return;
     }
-    const l = h[0], w = await Ee(l);
+    const l = h[0], w = await Ne(l);
     m(!0), z({
       src: w.src,
       file: l
@@ -412,11 +414,11 @@ function Ue({ editor: e, imageInline: t, onClose: a, disabled: s, alt: f }) {
     )
   ] });
 }
-function nt() {
-  const { t: e } = ne(), { toast: t } = re(), a = Me(), s = Le(G.name), {
+function lt() {
+  const { t: e } = ne(), { toast: t } = re(), a = Ce(), s = Ee(G.name), {
     icon: f,
     tooltip: u
-  } = (s == null ? void 0 : s.componentProps) ?? {}, { editorDisabled: g } = Ne(), [v, m] = L(!1), [x, C] = L(!1), T = de(G.name), _ = (d) => {
+  } = (s == null ? void 0 : s.componentProps) ?? {}, { editorDisabled: g } = Me(), [v, m] = L(!1), [x, C] = L(!1), T = de(G.name), _ = (d) => {
     m(d.detail);
   }, [S, k] = L(""), [R, M] = L(""), E = ae(null), z = (T == null ? void 0 : T.options.defaultInline) || !1, [A, p] = L(z), c = P(() => T == null ? void 0 : T.options, [T]);
   W(() => {
@@ -824,5 +826,5 @@ const De = {
 });
 export {
   G as Image,
-  nt as RichTextImage
+  lt as RichTextImage
 };

package/lib/ImageGif.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("./index-BBNITgNi.cjs"),N=require("./throttle-BM3Bmbf_.cjs"),l=require("react/jsx-runtime"),u=require("react"),G=require("./index-FSRjMsxW.cjs"),L=require("./isNumber-Bv1Qhmw8.cjs"),W=require("./index-BvIJKpX1.cjs"),D=require("./input-BeD5GdMv.cjs"),P=require("./popover-Csk538NC.cjs"),k=require("./useButtonProps-DEtmDVPr.cjs"),S={TOP_LEFT:"tl",TOP_RIGHT:"tr",BOTTOM_LEFT:"bl",BOTTOM_RIGHT:"br"};function B(e){var C,q;const[t,r]=u.useState({width:G.IMAGE_MAX_SIZE,height:G.IMAGE_MAX_SIZE}),[c,i]=u.useState({width:0,height:0}),[n]=u.useState([S.TOP_LEFT,S.TOP_RIGHT,S.BOTTOM_LEFT,S.BOTTOM_RIGHT]),[s,a]=u.useState(!1),[h,b]=u.useState({x:0,y:0,w:0,h:0,dir:""}),{align:x}=(C=e==null?void 0:e.node)==null?void 0:C.attrs,m=u.useMemo(()=>{var v;const{src:o,alt:f,width:w,height:M}=(v=e==null?void 0:e.node)==null?void 0:v.attrs,A=L.isNumber(w)?`${w}px`:w,d=L.isNumber(M)?`${M}px`:M;return{src:o||void 0,alt:f||void 0,style:{width:A||void 0,height:d||void 0}}},[(q=e==null?void 0:e.node)==null?void 0:q.attrs]),T=u.useMemo(()=>{const{style:{width:o}}=m;return{width:o==="100%"?o:void 0}},[m]);function g(o){i({width:o.target.width,height:o.target.height})}function _(){const{editor:o,getPos:f}=e;o.commands.setNodeSelection(f())}const y=u.useCallback(N.throttle(()=>{const{editor:o}=e,{width:f}=getComputedStyle(o.view.dom);r(w=>({...w,width:Number.parseInt(f,10)}))},G.IMAGE_THROTTLE_WAIT_TIME),[e==null?void 0:e.editor]);function p(o,f){o.preventDefault(),o.stopPropagation();const w=c.width,M=c.height,A=w/M;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/A)):v&&!d?(d=Math.round(v*A),d=d>I?I:d):!d&&!v?(d=w>I?I:w,v=Math.round(d/A)):d=d>I?I:d,a(!0),b({x:o.clientX,y:o.clientY,w:d,h:v,dir:f})}const j=u.useCallback(N.throttle(o=>{if(o.preventDefault(),o.stopPropagation(),!s)return;const{x:f,w,dir:M}=h,A=(o.clientX-f)*(/l/.test(M)?-1:1),d=L.clamp(w+A,G.IMAGE_MIN_SIZE,t.width);e.updateAttributes({width:d,height:null})},G.IMAGE_THROTTLE_WAIT_TIME),[s,h,t,e.updateAttributes]),E=u.useCallback(o=>{o.preventDefault(),o.stopPropagation(),s&&(b({x:0,y:0,w:0,h:0,dir:""}),a(!1),_())},[s,_]),z=u.useCallback(()=>{document==null||document.addEventListener("mousemove",j,!0),document==null||document.addEventListener("mouseup",E,!0)},[j,E]),O=u.useCallback(()=>{document==null||document.removeEventListener("mousemove",j,!0),document==null||document.removeEventListener("mouseup",E,!0)},[j,E]);u.useEffect(()=>(s?z():O(),()=>{O()}),[s,z,O]);const R=u.useMemo(()=>new ResizeObserver(()=>y()),[y]);return u.useEffect(()=>(R.observe(e.editor.view.dom),()=>{R.disconnect()}),[e.editor.view.dom,R]),l.jsx($.NodeViewWrapper,{className:"image-view",style:{...T,width:"100%",textAlign:x},children:l.jsxs("div",{"data-drag-handle":!0,draggable:"true",style:T,className:`image-view__body ${e!=null&&e.selected?"image-view__body--focused":""} ${s?"image-view__body--resizing":""}`,children:[l.jsx("img",{alt:m.alt,className:"image-view__body__image block",height:"auto",onClick:_,onLoad:g,src:m.src,style:m.style}),(e==null?void 0:e.editor.view.editable)&&((e==null?void 0:e.selected)||s)&&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:f=>p(f,o)},`image-dir-${o}`))})]})})}async function F(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,s,a;return{id:i==null?void 0:i.id,src:(n=i==null?void 0:i.images.original)==null?void 0:n.url,width:+((s=i==null?void 0:i.images.original)==null?void 0:s.width),height:+((a=i==null?void 0:i.images.original)==null?void 0:a.width)}})}async function V(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 s,a,h;return{id:n==null?void 0:n.id,src:(s=n==null?void 0:n.images.original)==null?void 0:s.url,width:+((a=n==null?void 0:n.images.original)==null?void 0:a.width),height:+((h=n==null?void 0:n.images.original)==null?void 0:h.width)}})}async function X(e){var n,s;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(s=i==null?void 0:i.results)==null?void 0:s.map(a=>{var h,b,x,m,T,g,_,y;return{id:a==null?void 0:a.id,src:(b=(h=a==null?void 0:a.media_formats)==null?void 0:h.gif)==null?void 0:b.url,width:(T=(m=(x=a==null?void 0:a.media_formats)==null?void 0:x.gif)==null?void 0:m.dims)==null?void 0:T[0],height:(y=(_=(g=a==null?void 0:a.media_formats)==null?void 0:g.gif)==null?void 0:_.dims)==null?void 0:y[1]}})}async function Y(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 s,a,h,b,x,m,T,g;return{id:n==null?void 0:n.id,src:(a=(s=n==null?void 0:n.media_formats)==null?void 0:s.gif)==null?void 0:a.url,width:(x=(b=(h=n==null?void 0:n.media_formats)==null?void 0:h.gif)==null?void 0:b.dims)==null?void 0:x[0],height:(g=(T=(m=n==null?void 0:n.media_formats)==null?void 0:m.gif)==null?void 0:T.dims)==null?void 0:g[1]}})}function Z(e,t){return{searchTrending:async()=>t?e==="giphy"?F(t):e==="tenor"?X(t):[]:[],searchWord:async i=>t?e==="giphy"?V(i,t):e==="tenor"?Y(i,t):[]:[]}}function U({selectImage:e,apiKey:t,provider:r,children:c}){const[i,n]=u.useState(!1),[s,a]=u.useState([]),{editorDisabled:h}=k.useToggleActive(),b=u.useRef(null),{searchTrending:x,searchWord:m}=Z(r,t);u.useEffect(()=>{(async()=>{const g=await x();a(g)})()},[]);const T=u.useCallback(N.debounce(async g=>{if(!g.target.value){const y=await x();a(y);return}const _=await m(g.target.value);a(_)},350),[]);return l.jsxs(P.Popover,{modal:!0,onOpenChange:n,open:i,children:[l.jsx(P.PopoverTrigger,{asChild:!0,disabled:h,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:T,placeholder:"Search GIF",ref:b,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:s!=null&&s.length?s==null?void 0:s.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 J(){const e=k.useButtonProps(H.name),{action:t,icon:r,tooltip:c,apiKey:i,provider:n}=(e==null?void 0:e.componentProps)??{},{editorDisabled:s}=k.useToggleActive(),a=h=>{s||t&&t(h)};return l.jsx(U,{apiKey:i,provider:n,selectImage:a,children:l.jsx(W.ActionButton,{disabled:s,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 s,a;const i=((s=r==null?void 0:r.options)==null?void 0:s.provider)||"",n=((a=r==null?void 0:r.options)==null?void 0:a.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 $.ReactNodeViewRenderer(B)},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",$.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=J;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("./clsx-CXbNJWDD.cjs"),N=require("./throttle-gTTvqDTW.cjs"),l=require("react/jsx-runtime"),d=require("react"),G=require("./index-CVFzP1Dc.cjs"),L=require("./isNumber-BTYSVlKo.cjs"),W=require("./toggle-BYvLnjCL.cjs");require("./index-CX4pNJlH.cjs");require("./theme.cjs");const D=require("./input-BJ7ihMq-.cjs"),P=require("./popover-BiSrlM4j.cjs"),k=require("./useButtonProps-CydzndG1.cjs"),S={TOP_LEFT:"tl",TOP_RIGHT:"tr",BOTTOM_LEFT:"bl",BOTTOM_RIGHT:"br"};function B(e){var C,$;const[t,n]=d.useState({width:G.IMAGE_MAX_SIZE,height:G.IMAGE_MAX_SIZE}),[c,i]=d.useState({width:0,height:0}),[r]=d.useState([S.TOP_LEFT,S.TOP_RIGHT,S.BOTTOM_LEFT,S.BOTTOM_RIGHT]),[s,a]=d.useState(!1),[h,b]=d.useState({x:0,y:0,w:0,h:0,dir:""}),{align:x}=(C=e==null?void 0:e.node)==null?void 0:C.attrs,m=d.useMemo(()=>{var v;const{src:o,alt:f,width:w,height:M}=(v=e==null?void 0:e.node)==null?void 0:v.attrs,A=L.isNumber(w)?`${w}px`:w,u=L.isNumber(M)?`${M}px`:M;return{src:o||void 0,alt:f||void 0,style:{width:A||void 0,height:u||void 0}}},[($=e==null?void 0:e.node)==null?void 0:$.attrs]),T=d.useMemo(()=>{const{style:{width:o}}=m;return{width:o==="100%"?o:void 0}},[m]);function g(o){i({width:o.target.width,height:o.target.height})}function _(){const{editor:o,getPos:f}=e;o.commands.setNodeSelection(f())}const y=d.useCallback(N.throttle(()=>{const{editor:o}=e,{width:f}=getComputedStyle(o.view.dom);n(w=>({...w,width:Number.parseInt(f,10)}))},G.IMAGE_THROTTLE_WAIT_TIME),[e==null?void 0:e.editor]);function p(o,f){o.preventDefault(),o.stopPropagation();const w=c.width,M=c.height,A=w/M;let u=Number(e.node.attrs.width),v=Number(e.node.attrs.height);const I=t.width;u&&!v?(u=u>I?I:u,v=Math.round(u/A)):v&&!u?(u=Math.round(v*A),u=u>I?I:u):!u&&!v?(u=w>I?I:w,v=Math.round(u/A)):u=u>I?I:u,a(!0),b({x:o.clientX,y:o.clientY,w:u,h:v,dir:f})}const j=d.useCallback(N.throttle(o=>{if(o.preventDefault(),o.stopPropagation(),!s)return;const{x:f,w,dir:M}=h,A=(o.clientX-f)*(/l/.test(M)?-1:1),u=L.clamp(w+A,G.IMAGE_MIN_SIZE,t.width);e.updateAttributes({width:u,height:null})},G.IMAGE_THROTTLE_WAIT_TIME),[s,h,t,e.updateAttributes]),E=d.useCallback(o=>{o.preventDefault(),o.stopPropagation(),s&&(b({x:0,y:0,w:0,h:0,dir:""}),a(!1),_())},[s,_]),z=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(()=>(s?z():O(),()=>{O()}),[s,z,O]);const R=d.useMemo(()=>new ResizeObserver(()=>y()),[y]);return d.useEffect(()=>(R.observe(e.editor.view.dom),()=>{R.disconnect()}),[e.editor.view.dom,R]),l.jsx(q.NodeViewWrapper,{className:"image-view",style:{...T,width:"100%",textAlign:x},children:l.jsxs("div",{"data-drag-handle":!0,draggable:"true",style:T,className:`image-view__body ${e!=null&&e.selected?"image-view__body--focused":""} ${s?"image-view__body--resizing":""}`,children:[l.jsx("img",{alt:m.alt,className:"image-view__body__image block",height:"auto",onClick:_,onLoad:g,src:m.src,style:m.style}),(e==null?void 0:e.editor.view.editable)&&((e==null?void 0:e.selected)||s)&&l.jsx("div",{className:"image-resizer",children:r==null?void 0:r.map(o=>l.jsx("span",{className:`image-resizer__handler image-resizer__handler--${o}`,onMouseDown:f=>p(f,o)},`image-dir-${o}`))})]})})}async function F(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,s,a;return{id:i==null?void 0:i.id,src:(r=i==null?void 0:i.images.original)==null?void 0:r.url,width:+((s=i==null?void 0:i.images.original)==null?void 0:s.width),height:+((a=i==null?void 0:i.images.original)==null?void 0:a.width)}})}async function V(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 s,a,h;return{id:r==null?void 0:r.id,src:(s=r==null?void 0:r.images.original)==null?void 0:s.url,width:+((a=r==null?void 0:r.images.original)==null?void 0:a.width),height:+((h=r==null?void 0:r.images.original)==null?void 0:h.width)}})}async function X(e){var r,s;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(s=i==null?void 0:i.results)==null?void 0:s.map(a=>{var h,b,x,m,T,g,_,y;return{id:a==null?void 0:a.id,src:(b=(h=a==null?void 0:a.media_formats)==null?void 0:h.gif)==null?void 0:b.url,width:(T=(m=(x=a==null?void 0:a.media_formats)==null?void 0:x.gif)==null?void 0:m.dims)==null?void 0:T[0],height:(y=(_=(g=a==null?void 0:a.media_formats)==null?void 0:g.gif)==null?void 0:_.dims)==null?void 0:y[1]}})}async function Y(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 s,a,h,b,x,m,T,g;return{id:r==null?void 0:r.id,src:(a=(s=r==null?void 0:r.media_formats)==null?void 0:s.gif)==null?void 0:a.url,width:(x=(b=(h=r==null?void 0:r.media_formats)==null?void 0:h.gif)==null?void 0:b.dims)==null?void 0:x[0],height:(g=(T=(m=r==null?void 0:r.media_formats)==null?void 0:m.gif)==null?void 0:T.dims)==null?void 0:g[1]}})}function Z(e,t){return{searchTrending:async()=>t?e==="giphy"?F(t):e==="tenor"?X(t):[]:[],searchWord:async i=>t?e==="giphy"?V(i,t):e==="tenor"?Y(i,t):[]:[]}}function U({selectImage:e,apiKey:t,provider:n,children:c}){const[i,r]=d.useState(!1),[s,a]=d.useState([]),{editorDisabled:h}=k.useToggleActive(),b=d.useRef(null),{searchTrending:x,searchWord:m}=Z(n,t);d.useEffect(()=>{(async()=>{const g=await x();a(g)})()},[]);const T=d.useCallback(N.debounce(async g=>{if(!g.target.value){const y=await x();a(y);return}const _=await m(g.target.value);a(_)},350),[]);return l.jsxs(P.Popover,{modal:!0,onOpenChange:r,open:i,children:[l.jsx(P.PopoverTrigger,{asChild:!0,disabled:h,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:T,placeholder:"Search GIF",ref:b,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:s!=null&&s.length?s==null?void 0:s.map(g=>l.jsx("img",{alt:"",className:"richtext-cursor-pointer richtext-object-contain richtext-text-center",src:g.src,onClick:()=>{e(g.src),r(!1)}},g.id)):l.jsx("p",{children:"No GIFs found"})})})]}):l.jsx("div",{children:l.jsx("p",{children:"Missing Giphy API Key"})})})]})}function J(){const e=k.useButtonProps(H.name),{action:t,icon:n,tooltip:c,apiKey:i,provider:r}=(e==null?void 0:e.componentProps)??{},{editorDisabled:s}=k.useToggleActive(),a=h=>{s||t&&t(h)};return l.jsx(U,{apiKey:i,provider:r,selectImage:a,children:l.jsx(W.ActionButton,{disabled:s,icon:n,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:n,t:c})=>{var s,a;const i=((s=n==null?void 0:n.options)==null?void 0:s.provider)||"",r=((a=n==null?void 0:n.options)==null?void 0:a.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: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 q.ReactNodeViewRenderer(B)},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",{style:t?`text-align: ${t};`:"",class:"imageGIf"},["img",q.mergeAttributes({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}}}]}});exports.ImageGif=H;exports.RichTextImageGif=J;

package/lib/ImageGif.js

@@ -1,13 +1,15 @@
-import { q, m as B, u as V } from "./index-sVScpCFG.js";
-import { a as H, d as X, c as Y } from "./throttle-DsowOft0.js";
-import { jsx as u, jsxs as p, Fragment as Z } from "react/jsx-runtime";
-import { useState as G, useMemo as P, useCallback as M, useEffect as z, useRef as U } from "react";
-import { I as C, j, k as J } from "./index-0OnGZkVF.js";
-import { i as W, c as Q } from "./isNumber-DF0fU3ob.js";
-import { A as K } from "./index-BIqaogQg.js";
-import { I as ee } from "./input-Bx4uo4gO.js";
-import { P as te, a as re, b as ne } from "./popover-BVX8otO9.js";
-import { u as ie, a as D } from "./useButtonProps-C_bqxmHi.js";
+import { o as B, m as q, s as V } from "./clsx-DmuN0U_8.js";
+import { a as k, d as X, c as Y } from "./throttle-BRtichEP.js";
+import { jsx as u, jsxs as P, Fragment as Z } from "react/jsx-runtime";
+import { useState as G, useMemo as L, useCallback as M, useEffect as z, useRef as U } from "react";
+import { I as C, i as j, j as J } from "./index-BDX1uE62.js";
+import { i as W, c as Q } from "./isNumber-DmQXlKp3.js";
+import { A as K } from "./toggle-Bxwwb_Kp.js";
+import "./index-D9JOHlso.js";
+import "./theme.js";
+import { I as ee } from "./input-YoheBL2D.js";
+import { P as te, a as re, b as ne } from "./popover-CWmTzHSy.js";
+import { u as ie, a as D } from "./useButtonProps-CfYtuEnd.js";
 const O = {
   TOP_LEFT: "tl",
   TOP_RIGHT: "tr",
@@ -15,7 +17,7 @@ const O = {
   BOTTOM_RIGHT: "br"
 };
 function ae(e) {
-  var R, k;
+  var R, H;
   const [t, n] = G({
     width: C,
     height: C
@@ -33,23 +35,23 @@ function ae(e) {
     w: 0,
     h: 0,
     dir: ""
-  }), { align: b } = (R = e == null ? void 0 : e.node) == null ? void 0 : R.attrs, g = P(() => {
+  }), { align: b } = (R = e == null ? void 0 : e.node) == null ? void 0 : R.attrs, m = L(() => {
     var w;
-    const { src: o, alt: m, width: f, height: x } = (w = e == null ? void 0 : e.node) == null ? void 0 : w.attrs, A = W(f) ? `${f}px` : f, d = W(x) ? `${x}px` : x;
+    const { src: o, alt: g, width: f, height: x } = (w = e == null ? void 0 : e.node) == null ? void 0 : w.attrs, A = W(f) ? `${f}px` : f, d = W(x) ? `${x}px` : x;
     return {
       src: o || void 0,
-      alt: m || void 0,
+      alt: g || void 0,
       style: {
         width: A || void 0,
         height: d || void 0
       }
     };
-  }, [(k = e == null ? void 0 : e.node) == null ? void 0 : k.attrs]), _ = P(() => {
+  }, [(H = e == null ? void 0 : e.node) == null ? void 0 : H.attrs]), _ = L(() => {
     const {
       style: { width: o }
-    } = g;
+    } = m;
     return { width: o === "100%" ? o : void 0 };
-  }, [g]);
+  }, [m]);
   function h(o) {
     i({
       width: o.target.width,
@@ -57,20 +59,20 @@ function ae(e) {
     });
   }
   function y() {
-    const { editor: o, getPos: m } = e;
-    o.commands.setNodeSelection(m());
+    const { editor: o, getPos: g } = e;
+    o.commands.setNodeSelection(g());
   }
   const T = M(
-    H(() => {
-      const { editor: o } = e, { width: m } = getComputedStyle(o.view.dom);
+    k(() => {
+      const { editor: o } = e, { width: g } = getComputedStyle(o.view.dom);
       n((f) => ({
         ...f,
-        width: Number.parseInt(m, 10)
+        width: Number.parseInt(g, 10)
       }));
     }, j),
     [e == null ? void 0 : e.editor]
   );
-  function F(o, m) {
+  function F(o, g) {
     o.preventDefault(), o.stopPropagation();
     const f = c.width, x = c.height, A = f / x;
     let d = Number(e.node.attrs.width), w = Number(e.node.attrs.height);
@@ -80,14 +82,14 @@ function ae(e) {
       y: o.clientY,
       w: d,
       h: w,
-      dir: m
+      dir: g
     });
   }
   const N = M(
-    H((o) => {
+    k((o) => {
       if (o.preventDefault(), o.stopPropagation(), !a)
         return;
-      const { x: m, w: f, dir: x } = l, A = (o.clientX - m) * (/l/.test(x) ? -1 : 1), d = Q(f + A, J, t.width);
+      const { x: g, w: f, dir: x } = l, A = (o.clientX - g) * (/l/.test(x) ? -1 : 1), d = Q(f + A, J, t.width);
       e.updateAttributes({
         width: d,
         height: null
@@ -107,21 +109,21 @@ function ae(e) {
     [a, y]
   ), $ = M(() => {
     document == null || document.addEventListener("mousemove", N, !0), document == null || document.addEventListener("mouseup", E, !0);
-  }, [N, E]), S = M(() => {
+  }, [N, E]), p = M(() => {
     document == null || document.removeEventListener("mousemove", N, !0), document == null || document.removeEventListener("mouseup", E, !0);
   }, [N, E]);
-  z(() => (a ? $() : S(), () => {
-    S();
-  }), [a, $, S]);
-  const L = P(() => new ResizeObserver(() => T()), [T]);
-  return z(() => (L.observe(e.editor.view.dom), () => {
-    L.disconnect();
-  }), [e.editor.view.dom, L]), /* @__PURE__ */ u(
-    q,
+  z(() => (a ? $() : p(), () => {
+    p();
+  }), [a, $, p]);
+  const S = L(() => new ResizeObserver(() => T()), [T]);
+  return z(() => (S.observe(e.editor.view.dom), () => {
+    S.disconnect();
+  }), [e.editor.view.dom, S]), /* @__PURE__ */ u(
+    B,
     {
       className: "image-view",
       style: { ..._, width: "100%", textAlign: b },
-      children: /* @__PURE__ */ p(
+      children: /* @__PURE__ */ P(
         "div",
         {
           "data-drag-handle": !0,
@@ -132,20 +134,20 @@ function ae(e) {
             /* @__PURE__ */ u(
               "img",
               {
-                alt: g.alt,
+                alt: m.alt,
                 className: "image-view__body__image block",
                 height: "auto",
                 onClick: y,
                 onLoad: h,
-                src: g.src,
-                style: g.style
+                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: (m) => F(m, o)
+                onMouseDown: (g) => F(g, o)
               },
               `image-dir-${o}`
             )) })
@@ -185,11 +187,11 @@ 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, v, b, g, _, h, y, T;
+    var l, v, b, m, _, h, y, T;
     return {
       id: s == null ? void 0 : s.id,
       src: (v = (l = s == null ? void 0 : s.media_formats) == null ? void 0 : l.gif) == null ? void 0 : v.url,
-      width: (_ = (g = (b = s == null ? void 0 : s.media_formats) == null ? void 0 : b.gif) == null ? void 0 : g.dims) == null ? void 0 : _[0],
+      width: (_ = (m = (b = s == null ? void 0 : s.media_formats) == null ? void 0 : b.gif) == null ? void 0 : m.dims) == null ? void 0 : _[0],
       height: (T = (y = (h = s == null ? void 0 : s.media_formats) == null ? void 0 : h.gif) == null ? void 0 : y.dims) == null ? void 0 : T[1]
     };
   });
@@ -198,12 +200,12 @@ 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, v, b, g, _, h;
+    var a, s, l, v, 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 = (v = (l = r == null ? void 0 : r.media_formats) == null ? void 0 : l.gif) == null ? void 0 : v.dims) == null ? void 0 : b[0],
-      height: (h = (_ = (g = r == null ? void 0 : r.media_formats) == null ? void 0 : g.gif) == null ? void 0 : _.dims) == null ? void 0 : h[1]
+      height: (h = (_ = (m = r == null ? void 0 : r.media_formats) == null ? void 0 : m.gif) == null ? void 0 : _.dims) == null ? void 0 : h[1]
     };
   });
 }
@@ -214,7 +216,7 @@ function le(e, t) {
   };
 }
 function he({ selectImage: e, apiKey: t, provider: n, children: c }) {
-  const [i, r] = G(!1), [a, s] = G([]), { editorDisabled: l } = D(), v = U(null), { searchTrending: b, searchWord: g } = le(n, t);
+  const [i, r] = G(!1), [a, s] = G([]), { editorDisabled: l } = D(), v = U(null), { searchTrending: b, searchWord: m } = le(n, t);
   z(() => {
     (async () => {
       const h = await b();
@@ -228,13 +230,13 @@ function he({ selectImage: e, apiKey: t, provider: n, children: c }) {
         s(T);
         return;
       }
-      const y = await g(h.target.value);
+      const y = await m(h.target.value);
       s(y);
     }, 350),
     // Adjust the debounce delay as needed
     []
   );
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ P(
     te,
     {
       modal: !0,
@@ -256,7 +258,7 @@ function he({ selectImage: e, apiKey: t, provider: n, children: c }) {
             className: "richtext-size-full richtext-p-2",
             hideWhenDetached: !0,
             side: "bottom",
-            children: t ? /* @__PURE__ */ p(Z, { children: [
+            children: t ? /* @__PURE__ */ P(Z, { children: [
               /* @__PURE__ */ u("div", { className: "richtext-mb-[10px] richtext-w-full", children: /* @__PURE__ */ u(
                 ee,
                 {
@@ -285,7 +287,7 @@ function he({ selectImage: e, apiKey: t, provider: n, children: c }) {
     }
   );
 }
-function xe() {
+function Ge() {
   const e = ie(ue.name), {
     action: t,
     icon: n,
@@ -397,7 +399,7 @@ const ue = /* @__PURE__ */ Y.extend({
       },
       [
         "img",
-        B(
+        q(
           // Always render the `height="auto"`
           {
             height: "auto"
@@ -428,5 +430,5 @@ const ue = /* @__PURE__ */ Y.extend({
 });
 export {
   ue as ImageGif,
-  xe as RichTextImageGif
+  Ge as RichTextImageGif
 };