reactjs-tiptap-editor/lib/ImageGif.cjs

A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("./clsx-CXbNJWDD.cjs"),f=require("./index-BnVcq33n.cjs"),l=require("react/jsx-runtime"),u=require("react"),j=require("./index-BsFvo9PG.cjs");require("./theme.cjs");const L=require("./popover-DIMT3pae.cjs"),N={TOP_LEFT:"tl",TOP_RIGHT:"tr",BOTTOM_LEFT:"bl",BOTTOM_RIGHT:"br"};function q(e){var k,z;const[t,r]=u.useState({width:j.IMAGE_MAX_SIZE,height:j.IMAGE_MAX_SIZE}),[o,i]=u.useState({width:0,height:0}),[n]=u.useState([N.TOP_LEFT,N.TOP_RIGHT,N.BOTTOM_LEFT,N.BOTTOM_RIGHT]),[s,a]=u.useState(!1),[h,x]=u.useState({x:0,y:0,w:0,h:0,dir:""}),{align:T}=(k=e==null?void 0:e.node)==null?void 0:k.attrs,m=u.useMemo(()=>{var b;const{src:c,alt:w,width:v,height:A}=(b=e==null?void 0:e.node)==null?void 0:b.attrs,G=f.isNumber(v)?`${v}px`:v,d=f.isNumber(A)?`${A}px`:A;return{src:c||void 0,alt:w||void 0,style:{width:G||void 0,height:d||void 0}}},[(z=e==null?void 0:e.node)==null?void 0:z.attrs]),_=u.useMemo(()=>{const{style:{width:c}}=m;return{width:c==="100%"?c:void 0}},[m]);function g(c){i({width:c.target.width,height:c.target.height})}function I(){const{editor:c,getPos:w}=e;c.commands.setNodeSelection(w())}const M=u.useCallback(f.throttle(()=>{const{editor:c}=e,{width:w}=getComputedStyle(c.view.dom);r(v=>({...v,width:Number.parseInt(w,10)}))},j.IMAGE_THROTTLE_WAIT_TIME),[e==null?void 0:e.editor]);function H(c,w){c.preventDefault(),c.stopPropagation();const v=o.width,A=o.height,G=v/A;let d=Number(e.node.attrs.width),b=Number(e.node.attrs.height);const y=t.width;d&&!b?(d=d>y?y:d,b=Math.round(d/G)):b&&!d?(d=Math.round(b*G),d=d>y?y:d):!d&&!b?(d=v>y?y:v,b=Math.round(d/G)):d=d>y?y:d,a(!0),x({x:c.clientX,y:c.clientY,w:d,h:b,dir:w})}const E=u.useCallback(f.throttle(c=>{if(c.preventDefault(),c.stopPropagation(),!s)return;const{x:w,w:v,dir:A}=h,G=(c.clientX-w)*(/l/.test(A)?-1:1),d=f.clamp$1(v+G,j.IMAGE_MIN_SIZE,t.width);e.updateAttributes({width:d,height:null})},j.IMAGE_THROTTLE_WAIT_TIME),[s,h,t,e.updateAttributes]),S=u.useCallback(c=>{c.preventDefault(),c.stopPropagation(),s&&(x({x:0,y:0,w:0,h:0,dir:""}),a(!1),I())},[s,I]),$=u.useCallback(()=>{document==null||document.addEventListener("mousemove",E,!0),document==null||document.addEventListener("mouseup",S,!0)},[E,S]),O=u.useCallback(()=>{document==null||document.removeEventListener("mousemove",E,!0),document==null||document.removeEventListener("mouseup",S,!0)},[E,S]);u.useEffect(()=>(s?$():O(),()=>{O()}),[s,$,O]);const R=u.useMemo(()=>new ResizeObserver(()=>M()),[M]);return u.useEffect(()=>(R.observe(e.editor.view.dom),()=>{R.disconnect()}),[e.editor.view.dom,R]),l.jsx(P.NodeViewWrapper,{className:"image-view",style:{..._,width:"100%",textAlign:T},children:l.jsxs("div",{"data-drag-handle":!0,draggable:"true",style:_,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:I,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(c=>l.jsx("span",{className:`image-resizer__handler image-resizer__handler--${c}`,onMouseDown:w=>H(w,c)},`image-dir-${c}`))})]})})}async function W(e){var o;const r=await(await fetch(`https://api.giphy.com/v1/gifs/trending?q=&limit=15&api_key=${e}`)).json();return(o=r==null?void 0:r.data)==null?void 0:o.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 p(e,t){var i;const o=await(await fetch(`https://api.giphy.com/v1/gifs/search?q=${e}&limit=15&api_key=${t}`)).json();return(i=o==null?void 0:o.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 D(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,x,T,m,_,g,I,M;return{id:a==null?void 0:a.id,src:(x=(h=a==null?void 0:a.media_formats)==null?void 0:h.gif)==null?void 0:x.url,width:(_=(m=(T=a==null?void 0:a.media_formats)==null?void 0:T.gif)==null?void 0:m.dims)==null?void 0:_[0],height:(M=(I=(g=a==null?void 0:a.media_formats)==null?void 0:g.gif)==null?void 0:I.dims)==null?void 0:M[1]}})}async function F(e,t){var i;const o=await(await fetch(`https://tenor.googleapis.com/v2/search?key=${t}&q=${e}&limit=15`)).json();return(i=o==null?void 0:o.results)==null?void 0:i.map(n=>{var s,a,h,x,T,m,_,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:(T=(x=(h=n==null?void 0:n.media_formats)==null?void 0:h.gif)==null?void 0:x.dims)==null?void 0:T[0],height:(g=(_=(m=n==null?void 0:n.media_formats)==null?void 0:m.gif)==null?void 0:_.dims)==null?void 0:g[1]}})}function B(e,t){return{searchTrending:async()=>t?e==="giphy"?W(t):e==="tenor"?D(t):[]:[],searchWord:async i=>t?e==="giphy"?p(i,t):e==="tenor"?F(i,t):[]:[]}}function V({selectImage:e,apiKey:t,provider:r,children:o}){const[i,n]=u.useState(!1),[s,a]=u.useState([]),{editorDisabled:h}=f.useToggleActive(),x=u.useRef(null),{searchTrending:T,searchWord:m}=B(r,t);u.useEffect(()=>{(async()=>{const g=await T();a(g)})()},[]);const _=u.useCallback(f.debounce(async g=>{if(!g.target.value){const M=await T();a(M);return}const I=await m(g.target.value);a(I)},350),[]);return l.jsxs(L.Popover,{modal:!0,onOpenChange:n,open:i,children:[l.jsx(L.PopoverTrigger,{asChild:!0,disabled:h,children:o}),l.jsx(L.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(f.Input,{onChange:_,placeholder:"Search GIF",ref:x,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 X(){const e=f.useButtonProps(C.name),{action:t,icon:r,tooltip:o,apiKey:i,provider:n}=(e==null?void 0:e.componentProps)??{},{editorDisabled:s}=f.useToggleActive(),a=h=>{s||t&&t(h)};return l.jsx(V,{apiKey:i,provider:n,selectImage:a,children:l.jsx(f.ActionButton,{disabled:s,icon:r,tooltip:o})})}const C=f.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:o})=>{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:o("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 P.ReactNodeViewRenderer(q)},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",P.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=C;exports.RichTextImageGif=X;