text-editor-studio-ts/dist/image-component-BHEd7PZU.cjs

A powerful mobile-responsive rich text editor built with Lexical and React

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=require("./index-BLOj1UA2.cjs"),o=require("./LexicalCollaborationContext.prod-BKKUeelU.cjs"),a=require("./LexicalNestedComposer.prod-BY66YBPy.cjs"),n=require("@lexical/utils"),i=require("lexical"),s=require("./image-resizer-B_I9lFMZ.cjs"),l=new Set,c=i.createCommand("RIGHT_CLICK_IMAGE_COMMAND");function d({altText:t,className:r,imageRef:o,src:a,width:n,height:i,maxWidth:s,onError:c}){return function(e){if(!l.has(e))throw new Promise(t=>{const r=new Image;r.src=e,r.onload=()=>{l.add(e),t(null)},r.onerror=()=>{l.add(e)}})}(a),e.jsx("img",{className:r||void 0,src:a,alt:t,ref:o,style:{height:i,maxWidth:s,width:n},onError:c,draggable:"false"})}function u(){return e.jsx("img",{src:"",style:{height:200,opacity:.2,width:200},draggable:"false"})}exports.RIGHT_CLICK_IMAGE_COMMAND=c,exports.default=function({src:l,altText:g,nodeKey:m,width:C,height:h,maxWidth:p,resizable:N,showCaption:x,caption:f,captionsEnabled:b}){const M=t.useRef(null),_=t.useRef(null),[E,R,O]=r.u(m),[I,S]=t.useState(!1),{isCollabActive:A}=o.l(),[w]=r.o(),[D,T]=t.useState(null),$=t.useRef(null),[j,v]=t.useState(!1),y=r.a(),L=t.useCallback(e=>{const t=i.$getSelection();if(E&&i.$isNodeSelection(t)){e.preventDefault(),w.update(()=>{t.getNodes().forEach(e=>{r.$isImageNode(e)&&e.remove()})})}return!1},[w,E]),W=t.useCallback(e=>{const t=i.$getSelection(),r=_.current;if(E&&i.$isNodeSelection(t)&&1===t.getNodes().length){if(x)return i.$setSelection(null),e.preventDefault(),f.focus(),!0;if(null!==r&&r!==document.activeElement)return e.preventDefault(),r.focus(),!0}return!1},[f,E,x]),P=t.useCallback(e=>($.current===f||_.current===e.target)&&(i.$setSelection(null),w.update(()=>{R(!0);const e=w.getRootElement();null!==e&&e.focus()}),!0),[f,w,R]),k=t.useCallback(e=>{const t=e;return!!I||t.target===M.current&&(t.shiftKey?R(!E):(O(),R(!0)),!0)},[I,E,R,O]),K=t.useCallback(e=>{w.getEditorState().read(()=>{const t=i.$getSelection();"IMG"===e.target.tagName&&i.$isRangeSelection(t)&&1===t.getNodes().length&&w.dispatchCommand(c,e)})},[w]);t.useEffect(()=>{let e=!0;const t=w.getRootElement(),r=n.mergeRegister(w.registerUpdateListener(({editorState:t})=>{e&&T(t.read(()=>i.$getSelection()))}),w.registerCommand(i.SELECTION_CHANGE_COMMAND,(e,t)=>($.current=t,!1),i.COMMAND_PRIORITY_LOW),w.registerCommand(i.CLICK_COMMAND,k,i.COMMAND_PRIORITY_LOW),w.registerCommand(c,k,i.COMMAND_PRIORITY_LOW),w.registerCommand(i.DRAGSTART_COMMAND,e=>e.target===M.current&&(e.preventDefault(),!0),i.COMMAND_PRIORITY_LOW),w.registerCommand(i.KEY_DELETE_COMMAND,L,i.COMMAND_PRIORITY_LOW),w.registerCommand(i.KEY_BACKSPACE_COMMAND,L,i.COMMAND_PRIORITY_LOW),w.registerCommand(i.KEY_ENTER_COMMAND,W,i.COMMAND_PRIORITY_LOW),w.registerCommand(i.KEY_ESCAPE_COMMAND,P,i.COMMAND_PRIORITY_LOW));return t?.addEventListener("contextmenu",K),()=>{e=!1,r(),t?.removeEventListener("contextmenu",K)}},[O,w,I,E,m,L,W,P,k,K,R]);const Y=E&&i.$isNodeSelection(D)&&!I,q=(E||I)&&y;return e.jsx(t.Suspense,{fallback:null,children:e.jsxs(e.Fragment,{children:[e.jsx("div",{draggable:Y,children:j?e.jsx(u,{}):e.jsx(d,{className:`max-w-full cursor-default ${q?(i.$isNodeSelection(D)?"draggable cursor-grab active:cursor-grabbing":"")+" focused ring-2 ring-primary ring-offset-2":null}`,src:l,altText:g,imageRef:M,width:C,height:h,maxWidth:p,onError:()=>v(!0)})}),x&&e.jsx("div",{className:"image-caption-container absolute bottom-1 left-0 right-0 m-0 block min-w-[100px] overflow-hidden border-t bg-background-system-body-primary/90 p-0",children:e.jsxs(a.f,{initialEditor:f,initialNodes:[i.RootNode,i.TextNode,i.ParagraphNode],children:[e.jsx(r.o$1,{}),e.jsx(r.a$1,{}),e.jsx(r.h,{contentEditable:e.jsx(r.ContentEditable,{className:"ImageNode__contentEditable user-select-text word-break-break-word relative block min-h-5 w-[calc(100%-20px)] cursor-text resize-none whitespace-pre-wrap border-0 p-2.5 text-sm caret-primary outline-none",placeholderClassName:"ImageNode__placeholder text-sm text-content-system-global-secondary overflow-hidden absolute top-2.5 left-2.5 pointer-events-none text-ellipsis user-select-none whitespace-nowrap inline-block",placeholder:"Enter a caption..."}),ErrorBoundary:r.a$2})]})}),N&&i.$isNodeSelection(D)&&q&&e.jsx(s.ImageResizer,{showCaption:x,setShowCaption:()=>{w.update(()=>{const e=i.$getNodeByKey(m);r.$isImageNode(e)&&e.setShowCaption(!0)})},editor:w,buttonRef:_,imageRef:M,maxWidth:p,onResizeStart:()=>{S(!0)},onResizeEnd:(e,t)=>{setTimeout(()=>{S(!1)},200),w.update(()=>{const o=i.$getNodeByKey(m);r.$isImageNode(o)&&o.setWidthAndHeight(e,t)})},captionsEnabled:!j&&b})]})})};
//# sourceMappingURL=image-component-BHEd7PZU.cjs.map