@layers-app/editor 0.5.8-optimization → 0.5.10-optimization

package/README.md

@@ -715,22 +715,3 @@ editorRef?: { current: EditorType | null } - Reference to the editor.
 ```
 
 </details>
-
-
-
-
----
-
-## 🚀 Integration Guide for other Projects
-
-### Step 1:  Install Required Dependencies
-
-```bash
-npm install lexical @lexical/react @lexical/file @lexical/headless @lexical/markdown @layers-app/shared @tanstack/react-query react-selecto @mantine/core @mantine/hooks @mantine/form @mantine/dropzone @mantine/modals @mantine/notifications @tabler/icons-react i18next react-i18next lodash-es
-```
-
-### Step 2: Add Collaboration if needed
-
-```tsx
-npm install yjs y-websocket
-```

package/dist/ExcalidrawComponent-D7Z_2awF.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),n=require("./lexical-2rxs76dr.cjs"),m=require("./index-CFA9Drk2.cjs"),q=require("react-i18next"),c=require("@mantine/core"),$=require("@tabler/icons-react"),y=require("./index-BZu8Qnrg.cjs"),F=({isCloseModal:t,setCloseModalOpen:a,confirmClose:d})=>{const{t:o}=q.useTranslation();return e.jsx(c.Modal,{opened:t,onClose:()=>{a(!1)},centered:!0,title:o("editor.unsavedChanges.title"),closeOnClickOutside:!0,closeOnEscape:!0,size:"500",zIndex:999,children:e.jsxs("div",{children:[e.jsx(c.Text,{mb:"md",children:o("editor.unsavedChanges.message")}),e.jsxs(c.Flex,{justify:"flex-end",gap:"sm",children:[e.jsx(c.Button,{variant:"default",onClick:()=>{a(!1)},fullWidth:!0,children:o("editor.unsavedChanges.cancel")}),e.jsx(c.Button,{color:"red",onClick:d,fullWidth:!0,children:o("editor.unsavedChanges.closeWithoutSaving")})]})]})})},H=t=>{var o;const a=(o=t==null?void 0:t.firstElementChild)==null?void 0:o.firstElementChild,d=t.getAttribute("viewBox");if(d!=null){const u=d.split(" ");t.setAttribute("width",u[2]),t.setAttribute("height",u[3])}a&&a.tagName==="style"&&a.remove()};function W({elements:t,files:a,imageContainerRef:d,appState:o,editor:u,rootClassName:i=null,width:v="inherit",height:A="inherit",nodeKey:f,alignment:k,setModalOpen:j}){const[b,M]=l.useState(null),[S,h]=l.useState(!1);c.useMantineTheme();const{t:p}=q.useTranslation();l.useEffect(()=>{(async()=>{const r=await y.exportExcalidrawToSvg({appState:o,elements:t,files:a});H(r),r.setAttribute("width","100%"),r.setAttribute("height","100%"),r.setAttribute("display","block"),r.classList.add("excalidraw-svg"),M(r)})()},[t,a,o]);const w=(g,r)=>{u.update(()=>{n.wo(null);const O=n.xo(f);return m.$isExcalidrawNode(O)&&O.setWidthAndHeight(g,r),!0})},z=g=>{m.deleteNode(u,f)};return e.jsx(m.ResizableContainer,{editor:u,isIcon:!1,isEmbed:!0,width:m.parseContainerSize(v),height:m.parseContainerSize(A),onResizeEnd:w,alignment:k,children:e.jsxs(c.Box,{className:"media-wrapper excaildraw",children:[e.jsxs("div",{className:"media-actions",children:[e.jsx(c.Tooltip,{label:p("editor.link.edit"),children:e.jsx(c.ActionIcon,{color:"gray","aria-label":"Settings",className:"media-action",variant:"default",size:24,onClick:()=>{j(!0)},children:e.jsx($.IconEdit,{size:14})})}),e.jsx(m.AlignmentImage,{opened:S,setOpened:h,t:p,editor:u,nodeKey:f}),e.jsx(c.Tooltip,{label:p("editor.actions.delete"),children:e.jsx(c.ActionIcon,{color:"gray","aria-label":"Settings",className:"media-action",variant:"default",size:24,onClick:z,children:e.jsx(m.Icon,{name:"trash",size:"14"})})})]}),e.jsx(c.Box,{w:"100%",ref:g=>{g&&d&&(d.current=g)},className:i??"",dangerouslySetInnerHTML:{__html:(b==null?void 0:b.outerHTML)??""}})]})})}function L({nodeKey:t,data:a,width:d,height:o,alignment:u}){const[i]=n.o(),v=n.a$2(),[A,f]=l.useState(a==="[]"&&i.isEditable()),[k,j]=l.useState(!1),b=l.useRef(null),M=l.useRef(null),S=l.useRef(null),[h,p,w]=n.u(t),[z,g]=l.useState(!1),r=l.useCallback(s=>(h&&(s.preventDefault(),i.update(()=>{const x=n.xo(t);x&&x.remove()})),!1),[i,h,t]);l.useEffect(()=>{if(!v){h&&w();return}return n.U(i.registerCommand(n.se,s=>{const x=M.current,C=s.target;return z?!0:x!==null&&x.contains(C)?(s.shiftKey||w(),p(!h),s.detail>1&&f(!0),!0):!1},n.zi),i.registerCommand(n.Oe,r,n.zi),i.registerCommand(n.we,r,n.zi))},[w,i,h,z,r,p,v]);const O=l.useCallback(()=>(f(!1),i.update(()=>{const s=n.xo(t);s&&s.remove()})),[i,t]),B=(s,x,C)=>i.update(()=>{const N=n.xo(t);m.$isExcalidrawNode(N)&&(s&&s.length>0||Object.keys(C).length>0?N.setData(JSON.stringify({appState:x,elements:s,files:C})):N.remove())}),{elements:E=[],files:T={},appState:I={}}=l.useMemo(()=>JSON.parse(a),[a]),R=l.useCallback(()=>{f(!1),j(!1),S.current=!1,E.length===0&&i.update(()=>{const s=n.xo(t);s&&s.remove()})},[i,t,E.length]),D=l.useCallback(()=>{S.current?j(!0):R()},[]);return e.jsxs(e.Fragment,{children:[e.jsx(F,{isCloseModal:k,confirmClose:R,setCloseModalOpen:j}),e.jsx(y.ExcalidrawModal,{initialElements:E,isEdited:S,initialFiles:T,initialAppState:I,isShown:A,onDelete:O,onClose:D,onSave:(s,x,C)=>{B(s,x,C),f(!1)},closeOnClickOutside:!1}),E.length>0&&e.jsx("div",{style:{display:"flex",justifyContent:u},children:e.jsx(W,{imageContainerRef:b,className:"image",elements:E,files:T,appState:I,width:d,height:o,editor:i,nodeKey:t,alignment:u,setModalOpen:f})})]})}exports.default=L;

package/dist/ExcalidrawComponent-Re4zFgLg.js

@@ -0,0 +1,283 @@
+import { jsx as i, jsxs as E, Fragment as G } from "react/jsx-runtime";
+import { useState as v, useEffect as _, useRef as T, useCallback as z, useMemo as P } from "react";
+import { av as Q, x as w, a1 as V, c4 as X, aK as Y, U as Z, aM as K, z as D, aN as ee, aD as te } from "./lexical-C60GkwxR.js";
+import { R as ie, p as B, A as se, I as ne, a as J, d as ae } from "./index-WCOc4LNL.js";
+import { useTranslation as $ } from "react-i18next";
+import { Modal as le, Text as oe, Flex as re, Button as F, useMantineTheme as ce, Box as H, Tooltip as W, ActionIcon as L } from "@mantine/core";
+import { IconEdit as de } from "@tabler/icons-react";
+import { e as ue, E as fe } from "./index-CbQX0N2c.js";
+const me = ({
+  isCloseModal: e,
+  setCloseModalOpen: n,
+  confirmClose: r
+}) => {
+  const { t: a } = $();
+  return /* @__PURE__ */ i(
+    le,
+    {
+      opened: e,
+      onClose: () => {
+        n(!1);
+      },
+      centered: !0,
+      title: a("editor.unsavedChanges.title"),
+      closeOnClickOutside: !0,
+      closeOnEscape: !0,
+      size: "500",
+      zIndex: 999,
+      children: /* @__PURE__ */ E("div", { children: [
+        /* @__PURE__ */ i(oe, { mb: "md", children: a("editor.unsavedChanges.message") }),
+        /* @__PURE__ */ E(re, { justify: "flex-end", gap: "sm", children: [
+          /* @__PURE__ */ i(
+            F,
+            {
+              variant: "default",
+              onClick: () => {
+                n(!1);
+              },
+              fullWidth: !0,
+              children: a("editor.unsavedChanges.cancel")
+            }
+          ),
+          /* @__PURE__ */ i(F, { color: "red", onClick: r, fullWidth: !0, children: a("editor.unsavedChanges.closeWithoutSaving") })
+        ] })
+      ] })
+    }
+  );
+}, he = (e) => {
+  var a;
+  const n = (a = e == null ? void 0 : e.firstElementChild) == null ? void 0 : a.firstElementChild, r = e.getAttribute("viewBox");
+  if (r != null) {
+    const o = r.split(" ");
+    e.setAttribute("width", o[2]), e.setAttribute("height", o[3]);
+  }
+  n && n.tagName === "style" && n.remove();
+};
+function pe({
+  elements: e,
+  files: n,
+  imageContainerRef: r,
+  appState: a,
+  editor: o,
+  rootClassName: s = null,
+  width: S = "inherit",
+  height: M = "inherit",
+  nodeKey: c,
+  alignment: N,
+  setModalOpen: p
+}) {
+  const [g, k] = v(null), [C, u] = v(!1);
+  ce();
+  const { t: m } = $();
+  _(() => {
+    (async () => {
+      const l = await ue({
+        appState: a,
+        elements: e,
+        files: n
+      });
+      he(l), l.setAttribute("width", "100%"), l.setAttribute("height", "100%"), l.setAttribute("display", "block"), l.classList.add("excalidraw-svg"), k(l);
+    })();
+  }, [e, n, a]);
+  const x = (f, l) => {
+    o.update(() => {
+      Q(null);
+      const O = w(c);
+      return J(O) && O.setWidthAndHeight(f, l), !0;
+    });
+  }, A = (f) => {
+    ae(o, c);
+  };
+  return /* @__PURE__ */ i(
+    ie,
+    {
+      editor: o,
+      isIcon: !1,
+      isEmbed: !0,
+      width: B(S),
+      height: B(M),
+      onResizeEnd: x,
+      alignment: N,
+      children: /* @__PURE__ */ E(H, { className: "media-wrapper excaildraw", children: [
+        /* @__PURE__ */ E("div", { className: "media-actions", children: [
+          /* @__PURE__ */ i(W, { label: m("editor.link.edit"), children: /* @__PURE__ */ i(
+            L,
+            {
+              color: "gray",
+              "aria-label": "Settings",
+              className: "media-action",
+              variant: "default",
+              size: 24,
+              onClick: () => {
+                p(!0);
+              },
+              children: /* @__PURE__ */ i(de, { size: 14 })
+            }
+          ) }),
+          /* @__PURE__ */ i(
+            se,
+            {
+              opened: C,
+              setOpened: u,
+              t: m,
+              editor: o,
+              nodeKey: c
+            }
+          ),
+          /* @__PURE__ */ i(W, { label: m("editor.actions.delete"), children: /* @__PURE__ */ i(
+            L,
+            {
+              color: "gray",
+              "aria-label": "Settings",
+              className: "media-action",
+              variant: "default",
+              size: 24,
+              onClick: A,
+              children: /* @__PURE__ */ i(ne, { name: "trash", size: "14" })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ i(
+          H,
+          {
+            w: "100%",
+            ref: (f) => {
+              f && r && (r.current = f);
+            },
+            className: s ?? "",
+            dangerouslySetInnerHTML: { __html: (g == null ? void 0 : g.outerHTML) ?? "" }
+          }
+        )
+      ] })
+    }
+  );
+}
+function Ae({
+  nodeKey: e,
+  data: n,
+  width: r,
+  height: a,
+  alignment: o
+}) {
+  const [s] = V(), S = X(), [M, c] = v(
+    n === "[]" && s.isEditable()
+  ), [N, p] = v(!1), g = T(null), k = T(null), C = T(null), [u, m, x] = Y(e), [A, f] = v(!1), l = z(
+    (t) => (u && (t.preventDefault(), s.update(() => {
+      const d = w(e);
+      d && d.remove();
+    })), !1),
+    [s, u, e]
+  );
+  _(() => {
+    if (!S) {
+      u && x();
+      return;
+    }
+    return Z(
+      s.registerCommand(
+        te,
+        (t) => {
+          const d = k.current, h = t.target;
+          return A ? !0 : d !== null && d.contains(h) ? (t.shiftKey || x(), m(!u), t.detail > 1 && c(!0), !0) : !1;
+        },
+        D
+      ),
+      s.registerCommand(
+        ee,
+        l,
+        D
+      ),
+      s.registerCommand(
+        K,
+        l,
+        D
+      )
+    );
+  }, [
+    x,
+    s,
+    u,
+    A,
+    l,
+    m,
+    S
+  ]);
+  const O = z(() => (c(!1), s.update(() => {
+    const t = w(e);
+    t && t.remove();
+  })), [s, e]), U = (t, d, h) => s.update(() => {
+    const I = w(e);
+    J(I) && (t && t.length > 0 || Object.keys(h).length > 0 ? I.setData(
+      JSON.stringify({
+        appState: d,
+        elements: t,
+        files: h
+      })
+    ) : I.remove());
+  }), {
+    elements: b = [],
+    files: R = {},
+    appState: j = {}
+  } = P(() => JSON.parse(n), [n]), y = z(() => {
+    c(!1), p(!1), C.current = !1, b.length === 0 && s.update(() => {
+      const t = w(e);
+      t && t.remove();
+    });
+  }, [s, e, b.length]), q = z(() => {
+    C.current ? p(!0) : y();
+  }, []);
+  return /* @__PURE__ */ E(G, { children: [
+    /* @__PURE__ */ i(
+      me,
+      {
+        isCloseModal: N,
+        confirmClose: y,
+        setCloseModalOpen: p
+      }
+    ),
+    /* @__PURE__ */ i(
+      fe,
+      {
+        initialElements: b,
+        isEdited: C,
+        initialFiles: R,
+        initialAppState: j,
+        isShown: M,
+        onDelete: O,
+        onClose: q,
+        onSave: (t, d, h) => {
+          U(t, d, h), c(!1);
+        },
+        closeOnClickOutside: !1
+      }
+    ),
+    b.length > 0 && /* @__PURE__ */ i(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: o
+        },
+        children: /* @__PURE__ */ i(
+          pe,
+          {
+            imageContainerRef: g,
+            className: "image",
+            elements: b,
+            files: R,
+            appState: j,
+            width: r,
+            height: a,
+            editor: s,
+            nodeKey: e,
+            alignment: o,
+            setModalOpen: c
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  Ae as default
+};

package/dist/InlineImageComponent-DHgCaPNk.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),e=require("./lexical-2rxs76dr.cjs"),h=require("./index-CFA9Drk2.cjs"),T=require("@mantine/core");function D({children:n,className:o}){return t.jsx("div",{className:o||"Placeholder__root",children:n})}function y({label:n,value:o,onChange:a,placeholder:x="","data-test-id":i,type:d="text"}){return t.jsx(T.TextInput,{type:d,placeholder:x,value:o,onChange:c=>{a(c.target.value)},label:n,"data-test-id":i,mb:10})}const R=new Set;function F(n){if(!R.has(n))throw new Promise(o=>{const a=new Image;a.src=n,a.onload=()=>{R.add(n),o(null)}})}function q({altText:n,className:o,imageRef:a,src:x,width:i,height:d,position:c}){return F(x),t.jsx("img",{className:o||void 0,src:x,alt:n,ref:a,"data-position":c,style:{display:"block",height:d,width:i},draggable:"false"})}function _({activeEditor:n,nodeKey:o,onClose:a}){const i=n.getEditorState().read(()=>e.xo(o)),[d,c]=l.useState(i.getAltText()),[j,I]=l.useState(i.getShowCaption()),[S,b]=l.useState(i.getPosition()),p=g=>{I(g.target.checked)},m=()=>{const g={altText:d,position:S,showCaption:j};i&&n.update(()=>{i.update(g)}),a()};return t.jsxs(t.Fragment,{children:[t.jsx("div",{style:{marginBottom:"1em"},children:t.jsx(y,{label:"Alt-текст",placeholder:"Альтернативный текст",onChange:c,value:d,"data-test-id":"image-modal-alt-text-input"})}),t.jsxs("div",{className:"Input__wrapper",children:[t.jsx("input",{id:"caption",type:"checkbox",checked:j,onChange:p}),t.jsx("label",{htmlFor:"caption",children:"Show Caption"})]}),t.jsx(h.Button,{"data-test-id":"image-modal-file-upload-btn",onClick:()=>m(),children:"Применить"})]})}function U({src:n,altText:o,nodeKey:a,width:x,height:i,showCaption:d,caption:c,position:j}){const[I,S]=h.useModal(),b=l.useRef(null),p=l.useRef(null),[m,g,E]=e.u(a),[s]=e.o(),[z,L]=l.useState(null),N=l.useRef(null),v=l.useCallback(u=>{if(m&&e.xr(e.Lr())){u.preventDefault();const r=e.xo(a);h.$isInlineImageNode(r)&&r.remove()}return!1},[m,a]),w=l.useCallback(u=>{const f=e.Lr(),r=p.current;if(m&&e.xr(f)&&f.getNodes().length===1){if(d)return e.wo(null),u.preventDefault(),c.focus(),!0;if(r!==null&&r!==document.activeElement)return u.preventDefault(),r.focus(),!0}return!1},[c,m,d]),k=l.useCallback(u=>N.current===c||p.current===u.target?(e.wo(null),s.update(()=>{g(!0);const f=s.getRootElement();f!==null&&f.focus()}),!0):!1,[c,s,g]);l.useEffect(()=>{let u=!0;const f=e.U(s.registerUpdateListener(({editorState:r})=>{u&&L(r.read(()=>e.Lr()))}),s.registerCommand(e.ie,(r,C)=>(N.current=C,!1),e.zi),s.registerCommand(e.se,r=>{const C=r;return C.target===b.current?(C.shiftKey?g(!m):(E(),g(!0)),!0):!1},e.zi),s.registerCommand(e.Ie,r=>r.target===b.current?(r.preventDefault(),!0):!1,e.zi),s.registerCommand(e.Oe,v,e.zi),s.registerCommand(e.we,v,e.zi),s.registerCommand(e.Ne,w,e.zi),s.registerCommand(e.Ee$1,k,e.zi));return()=>{u=!1,f()}},[E,s,m,a,v,w,k,g]);const P=m;return t.jsxs(l.Suspense,{fallback:null,children:[t.jsxs(t.Fragment,{children:[t.jsxs("div",{draggable:!1,children:[t.jsx("button",{className:"image-edit-button",ref:p,onClick:()=>{S("Update Inline Image",u=>t.jsx(_,{activeEditor:s,nodeKey:a,onClose:u}))},children:"Edit"}),t.jsx(q,{className:P?`focused ${e.xr(z)?"draggable":""}`:null,src:n,altText:o,imageRef:b,width:x,height:i,position:j})]}),d&&t.jsx("div",{className:"image-caption-container",children:t.jsxs(e.m$3,{initialEditor:c,children:[t.jsx(h.LinkPlugin,{}),t.jsx(h.FloatingTextFormatToolbarPlugin,{}),t.jsx(e.L,{contentEditable:t.jsx(h.LexicalContentEditable,{className:"InlineImageNode__contentEditable"}),placeholder:t.jsx(D,{className:"InlineImageNode__placeholder",children:"Enter a caption..."}),ErrorBoundary:e.n$1})]})})]}),I]})}exports.UpdateInlineImageDialog=_;exports.default=U;

package/dist/InlineImageComponent-kXhZcmF6.js

@@ -0,0 +1,265 @@
+import { jsx as e, jsxs as p, Fragment as y } from "react/jsx-runtime";
+import { useRef as N, useState as v, useCallback as w, useEffect as j, Suspense as z } from "react";
+import { aK as A, a1 as $, aL as k, g as _, x as B, av as P, U as O, c3 as J, z as f, cS as Y, aM as Z, aN as q, cY as G, aD as H, b9 as Q, cZ as V, cJ as W, cK as X } from "./lexical-C60GkwxR.js";
+import { i as K, j as ee, L as te, F as ne, k as ae, B as oe } from "./index-WCOc4LNL.js";
+import { TextInput as re } from "@mantine/core";
+function le({
+  children: t,
+  className: r
+}) {
+  return /* @__PURE__ */ e("div", { className: r || "Placeholder__root", children: t });
+}
+function se({
+  label: t,
+  value: r,
+  onChange: n,
+  placeholder: g = "",
+  "data-test-id": l,
+  type: c = "text"
+}) {
+  return /* @__PURE__ */ e(
+    re,
+    {
+      type: c,
+      placeholder: g,
+      value: r,
+      onChange: (s) => {
+        n(s.target.value);
+      },
+      label: t,
+      "data-test-id": l,
+      mb: 10
+    }
+  );
+}
+const R = /* @__PURE__ */ new Set();
+function ie(t) {
+  if (!R.has(t))
+    throw new Promise((r) => {
+      const n = new Image();
+      n.src = t, n.onload = () => {
+        R.add(t), r(null);
+      };
+    });
+}
+function ce({
+  altText: t,
+  className: r,
+  imageRef: n,
+  src: g,
+  width: l,
+  height: c,
+  position: s
+}) {
+  return ie(g), /* @__PURE__ */ e(
+    "img",
+    {
+      className: r || void 0,
+      src: g,
+      alt: t,
+      ref: n,
+      "data-position": s,
+      style: {
+        display: "block",
+        height: c,
+        width: l
+      },
+      draggable: "false"
+    }
+  );
+}
+function ue({
+  activeEditor: t,
+  nodeKey: r,
+  onClose: n
+}) {
+  const l = t.getEditorState().read(
+    () => B(r)
+  ), [c, s] = v(l.getAltText()), [C, x] = v(l.getShowCaption()), [E, b] = v(l.getPosition()), h = (d) => {
+    x(d.target.checked);
+  }, u = () => {
+    const d = { altText: c, position: E, showCaption: C };
+    l && t.update(() => {
+      l.update(d);
+    }), n();
+  };
+  return /* @__PURE__ */ p(y, { children: [
+    /* @__PURE__ */ e("div", { style: { marginBottom: "1em" }, children: /* @__PURE__ */ e(
+      se,
+      {
+        label: "Alt-текст",
+        placeholder: "Альтернативный текст",
+        onChange: s,
+        value: c,
+        "data-test-id": "image-modal-alt-text-input"
+      }
+    ) }),
+    /* @__PURE__ */ p("div", { className: "Input__wrapper", children: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          id: "caption",
+          type: "checkbox",
+          checked: C,
+          onChange: h
+        }
+      ),
+      /* @__PURE__ */ e("label", { htmlFor: "caption", children: "Show Caption" })
+    ] }),
+    /* @__PURE__ */ e(
+      oe,
+      {
+        "data-test-id": "image-modal-file-upload-btn",
+        onClick: () => u(),
+        children: "Применить"
+      }
+    )
+  ] });
+}
+function Ce({
+  src: t,
+  altText: r,
+  nodeKey: n,
+  width: g,
+  height: l,
+  showCaption: c,
+  caption: s,
+  position: C
+}) {
+  const [x, E] = K(), b = N(null), h = N(null), [u, d, L] = A(n), [o] = $(), [M, U] = v(null), T = N(null), S = w(
+    (i) => {
+      if (u && k(_())) {
+        i.preventDefault();
+        const a = B(n);
+        ee(a) && a.remove();
+      }
+      return !1;
+    },
+    [u, n]
+  ), D = w(
+    (i) => {
+      const m = _(), a = h.current;
+      if (u && k(m) && m.getNodes().length === 1) {
+        if (c)
+          return P(null), i.preventDefault(), s.focus(), !0;
+        if (a !== null && a !== document.activeElement)
+          return i.preventDefault(), a.focus(), !0;
+      }
+      return !1;
+    },
+    [s, u, c]
+  ), F = w(
+    (i) => T.current === s || h.current === i.target ? (P(null), o.update(() => {
+      d(!0);
+      const m = o.getRootElement();
+      m !== null && m.focus();
+    }), !0) : !1,
+    [s, o, d]
+  );
+  return j(() => {
+    let i = !0;
+    const m = O(
+      o.registerUpdateListener(({ editorState: a }) => {
+        i && U(a.read(() => _()));
+      }),
+      o.registerCommand(
+        Q,
+        (a, I) => (T.current = I, !1),
+        f
+      ),
+      o.registerCommand(
+        H,
+        (a) => {
+          const I = a;
+          return I.target === b.current ? (I.shiftKey ? d(!u) : (L(), d(!0)), !0) : !1;
+        },
+        f
+      ),
+      o.registerCommand(
+        G,
+        (a) => a.target === b.current ? (a.preventDefault(), !0) : !1,
+        f
+      ),
+      o.registerCommand(
+        q,
+        S,
+        f
+      ),
+      o.registerCommand(
+        Z,
+        S,
+        f
+      ),
+      o.registerCommand(Y, D, f),
+      o.registerCommand(
+        J,
+        F,
+        f
+      )
+    );
+    return () => {
+      i = !1, m();
+    };
+  }, [
+    L,
+    o,
+    u,
+    n,
+    S,
+    D,
+    F,
+    d
+  ]), /* @__PURE__ */ p(z, { fallback: null, children: [
+    /* @__PURE__ */ p(y, { children: [
+      /* @__PURE__ */ p("div", { draggable: !1, children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            className: "image-edit-button",
+            ref: h,
+            onClick: () => {
+              E("Update Inline Image", (i) => /* @__PURE__ */ e(
+                ue,
+                {
+                  activeEditor: o,
+                  nodeKey: n,
+                  onClose: i
+                }
+              ));
+            },
+            children: "Edit"
+          }
+        ),
+        /* @__PURE__ */ e(
+          ce,
+          {
+            className: u ? `focused ${k(M) ? "draggable" : ""}` : null,
+            src: t,
+            altText: r,
+            imageRef: b,
+            width: g,
+            height: l,
+            position: C
+          }
+        )
+      ] }),
+      c && /* @__PURE__ */ e("div", { className: "image-caption-container", children: /* @__PURE__ */ p(V, { initialEditor: s, children: [
+        /* @__PURE__ */ e(te, {}),
+        /* @__PURE__ */ e(ne, {}),
+        /* @__PURE__ */ e(
+          W,
+          {
+            contentEditable: /* @__PURE__ */ e(ae, { className: "InlineImageNode__contentEditable" }),
+            placeholder: /* @__PURE__ */ e(le, { className: "InlineImageNode__placeholder", children: "Enter a caption..." }),
+            ErrorBoundary: X
+          }
+        )
+      ] }) })
+    ] }),
+    x
+  ] });
+}
+export {
+  ue as UpdateInlineImageDialog,
+  Ce as default
+};