text-editor-studio-ts/dist/inline-image-component-DufDpKRG.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"),i=require("./index-BLOj1UA2.cjs"),l=require("./LexicalNestedComposer.prod-BY66YBPy.cjs"),n=require("@lexical/utils"),r=require("lexical"),a=new Set;function o({altText:t,className:i,imageRef:l,src:n,width:r,height:o,position:s}){return function(e){if(!a.has(e))throw new Promise(t=>{const i=new Image;i.src=e,i.onload=()=>{a.add(e),t(null)}})}(n),e.jsx("img",{className:i||void 0,src:n,alt:t,ref:l,"data-position":s,style:{display:"block",height:o,width:r},draggable:"false"})}function s({activeEditor:l,nodeKey:n,onClose:a}){const o=l.getEditorState().read(()=>r.$getNodeByKey(n)),[s,c]=t.useState(o.getAltText()),[d,u]=t.useState(o.getShowCaption()),[g,m]=t.useState(o.getPosition());return e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(i.Label,{htmlFor:"alt-text",children:"Alt Text"}),e.jsx(i.Input,{id:"alt-text",placeholder:"Descriptive alternative text",onChange:e=>c(e.target.value),value:s,"data-test-id":"image-modal-alt-text-input"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(i.Label,{htmlFor:"position-select",children:"Position"}),e.jsxs(i.Select,{value:g,onValueChange:e=>m(e),children:[e.jsx(i.SelectTrigger,{id:"position-select",children:e.jsx(i.SelectValue,{placeholder:"Select position"})}),e.jsxs(i.SelectContent,{children:[e.jsx(i.SelectItem,{value:"left",children:"Left"}),e.jsx(i.SelectItem,{value:"right",children:"Right"}),e.jsx(i.SelectItem,{value:"full",children:"Full Width"})]})]})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(i.Checkbox,{id:"caption",checked:d,onCheckedChange:e=>u(e)}),e.jsx(i.Label,{htmlFor:"caption",children:"Show Caption"})]}),e.jsx(i.DialogFooter,{children:e.jsx(i.Button,{"data-test-id":"image-modal-file-upload-btn",onClick:()=>{const e={altText:s,position:g,showCaption:d};o&&l.update(()=>{o.update(e)}),a()},children:"Confirm"})})]})}exports.UpdateInlineImageDialog=s,exports.default=function({src:a,altText:c,nodeKey:d,width:u,height:g,showCaption:m,caption:h,position:p}){const[x,C]=i.useEditorModal(),f=t.useRef(null),N=t.useRef(null),[b,j,S]=i.u(d),[E]=i.o(),[M,O]=t.useState(null),_=t.useRef(null),v=i.a(),I=t.useCallback(e=>{const t=r.$getSelection();if(b&&r.$isNodeSelection(t)){e.preventDefault(),b&&r.$isNodeSelection(t)&&E.update(()=>{t.getNodes().forEach(e=>{i.$isInlineImageNode(e)&&e.remove()})})}return!1},[E,b]),R=t.useCallback(e=>{const t=r.$getSelection(),i=N.current;if(b&&r.$isNodeSelection(t)&&1===t.getNodes().length){if(m)return r.$setSelection(null),e.preventDefault(),h.focus(),!0;if(null!==i&&i!==document.activeElement)return e.preventDefault(),i.focus(),!0}return!1},[h,b,m]),w=t.useCallback(e=>(_.current===h||N.current===e.target)&&(r.$setSelection(null),E.update(()=>{j(!0);const e=E.getRootElement();null!==e&&e.focus()}),!0),[h,E,j]);t.useEffect(()=>{let e=!0;const t=n.mergeRegister(E.registerUpdateListener(({editorState:t})=>{e&&O(t.read(()=>r.$getSelection()))}),E.registerCommand(r.SELECTION_CHANGE_COMMAND,(e,t)=>(_.current=t,!1),r.COMMAND_PRIORITY_LOW),E.registerCommand(r.CLICK_COMMAND,e=>{const t=e;return t.target===f.current&&(t.shiftKey?j(!b):(S(),j(!0)),!0)},r.COMMAND_PRIORITY_LOW),E.registerCommand(r.DRAGSTART_COMMAND,e=>e.target===f.current&&(e.preventDefault(),!0),r.COMMAND_PRIORITY_LOW),E.registerCommand(r.KEY_DELETE_COMMAND,I,r.COMMAND_PRIORITY_LOW),E.registerCommand(r.KEY_BACKSPACE_COMMAND,I,r.COMMAND_PRIORITY_LOW),E.registerCommand(r.KEY_ENTER_COMMAND,R,r.COMMAND_PRIORITY_LOW),E.registerCommand(r.KEY_ESCAPE_COMMAND,w,r.COMMAND_PRIORITY_LOW));return()=>{e=!1,t()}},[S,E,b,d,I,R,w,j]);const D=b&&r.$isNodeSelection(M),y=b&&v;return e.jsxs(t.Suspense,{fallback:null,children:[e.jsxs(e.Fragment,{children:[e.jsxs("span",{draggable:D,children:[v&&e.jsx(i.Button,{className:"image-edit-button absolute right-1 top-1",variant:"BorderStyle",ref:N,onClick:()=>{C("Update Inline Image",t=>e.jsx(s,{activeEditor:E,nodeKey:d,onClose:t}))},children:"Edit"}),e.jsx(o,{className:`max-w-full cursor-default ${y?(r.$isNodeSelection(M)?"draggable cursor-grab active:cursor-grabbing":"")+" focused ring-2 ring-primary ring-offset-2":null}`,src:a,altText:c,imageRef:f,width:u,height:g,position:p})]}),m&&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(l.f,{initialEditor:h,children:[e.jsx(i.o$1,{}),e.jsx(i.LinkPlugin,{}),e.jsx(i.h,{contentEditable:e.jsx(i.ContentEditable,{placeholder:"Enter a caption...",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"}),ErrorBoundary:i.a$2})]})})]}),x]})};
//# sourceMappingURL=inline-image-component-DufDpKRG.cjs.map