@anhnv/lexical-playground 0.39.0

package/dist/DateTimeComponent-DX3ALs4U.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),o=require("@floating-ui/react"),O=require("@lexical/react/LexicalComposerContext"),I=require("@lexical/react/useLexicalNodeSelection"),d=require("date-fns"),E=require("lexical"),r=require("react"),R=require("react-day-picker"),$=require("./index-BF-WAqsp.cjs"),H=Intl.DateTimeFormat().resolvedOptions().timeZone;function B({dateTime:i,nodeKey:D}){const[v]=O.useLexicalComposerContext(),[y,w]=r.useState(!1),f=r.useRef(null),[c,m]=r.useState(i),[p,j]=r.useState(()=>{if(i===void 0)return!1;const e=i?.getHours(),t=i?.getMinutes();return e!==0||t!==0}),[l,h]=r.useState(()=>{if(i===void 0)return"00:00";const e=i?.getHours(),t=i?.getMinutes();return e!==0||t!==0?`${e?.toString().padStart(2,"0")}:${t?.toString().padStart(2,"0")}`:"00:00"}),[C,V,Z]=I.useLexicalNodeSelection(D),{refs:k,floatingStyles:F,context:g}=o.useFloating({elements:{reference:f.current},middleware:[o.offset(5),o.flip({fallbackPlacements:["top-start"]}),o.shift({padding:10})],onOpenChange:w,open:y,placement:"bottom-start",strategy:"fixed",whileElementsMounted:o.autoUpdate}),q=o.useRole(g,{role:"dialog"}),M=o.useDismiss(g),{getFloatingProps:N}=o.useInteractions([q,M]);r.useEffect(()=>{const e=f.current;function t(n){n.preventDefault(),w(!0)}return e&&e.addEventListener("click",t),()=>{e&&e.removeEventListener("click",t)}},[k,v]);const x=(e,t)=>{v.update(()=>{const n=E.$getNodeByKey(D);$.$isDateTimeNode(n)&&e(n)},{onUpdate:t})},P=e=>{x(t=>{if(e.target.checked)j(!0);else{if(c){const n=d.setHours(d.setMinutes(c,0),0);t.setDateTime(n)}j(!1),h("00:00")}})},T=e=>{x(t=>{const n=e.target.value;if(!c){h(n);return}const[S,a]=n.split(":").map(L=>parseInt(L,10)),u=d.setHours(d.setMinutes(c,a),S);m(u),t.setDateTime(u),h(n)})},b=e=>{x(t=>{if(!l||!e){m(e);return}const[n,S]=l.split(":").map(u=>parseInt(u,10)),a=new Date(e.getFullYear(),e.getMonth(),e.getDate(),n,S);t.setDateTime(a),m(a)})};return s.jsxs("div",{className:`dateTimePill ${C?"selected":""}`,ref:f,style:{cursor:"pointer",width:"fit-content"},children:[i?.toDateString()+(p?" "+l:"")||"Invalid Date",y&&s.jsx(o.FloatingPortal,{children:s.jsx(o.FloatingOverlay,{lockScroll:!0,children:s.jsx(o.FloatingFocusManager,{context:g,initialFocus:-1,children:s.jsxs("div",{className:"dateTimePicker",ref:k.setFloating,style:F,...N(),children:[s.jsx(R.DayPicker,{captionLayout:"dropdown",navLayout:"after",fixedWeeks:!1,showOutsideDays:!1,mode:"single",selected:c,required:!0,onSelect:b,startMonth:new Date(1925,0),endMonth:new Date(2042,7)}),s.jsx("form",{style:{marginBlockEnd:"1em"},children:s.jsxs("div",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",width:"300px"},children:[s.jsx("input",{type:"checkbox",id:"option1",name:"option1",value:"value1",checked:p,onChange:P}),s.jsx("label",{children:s.jsx("input",{type:"time",value:l,onChange:T,disabled:!p})}),s.jsxs("span",{children:[" ",H]})]})})]})})})})]})}exports.default=B;

package/dist/DateTimeComponent-DaF6ca1f.js

@@ -0,0 +1,174 @@
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { useFloating as E, autoUpdate as H, offset as R, flip as j, shift as B, useRole as V, useDismiss as Z, useInteractions as q, FloatingPortal as U, FloatingOverlay as W, FloatingFocusManager as Y } from "@floating-ui/react";
+import { useLexicalComposerContext as z } from "@lexical/react/LexicalComposerContext";
+import { useLexicalNodeSelection as A } from "@lexical/react/useLexicalNodeSelection";
+import { setHours as C, setMinutes as F } from "date-fns";
+import { $getNodeByKey as G } from "lexical";
+import { useState as u, useRef as J, useEffect as K } from "react";
+import { DayPicker as Q } from "react-day-picker";
+import { $ as X } from "./index-C0BTrOQP.js";
+const _ = Intl.DateTimeFormat().resolvedOptions().timeZone;
+function de({
+  dateTime: o,
+  nodeKey: v
+}) {
+  const [S] = z(), [w, y] = u(!1), d = J(null), [i, m] = u(o), [f, k] = u(() => {
+    if (o === void 0)
+      return !1;
+    const e = o?.getHours(), t = o?.getMinutes();
+    return e !== 0 || t !== 0;
+  }), [r, p] = u(() => {
+    if (o === void 0)
+      return "00:00";
+    const e = o?.getHours(), t = o?.getMinutes();
+    return e !== 0 || t !== 0 ? `${e?.toString().padStart(2, "0")}:${t?.toString().padStart(2, "0")}` : "00:00";
+  }), [N, ee, te] = A(v), { refs: x, floatingStyles: M, context: h } = E({
+    elements: {
+      reference: d.current
+    },
+    middleware: [
+      R(5),
+      j({
+        fallbackPlacements: ["top-start"]
+      }),
+      B({ padding: 10 })
+    ],
+    onOpenChange: y,
+    open: w,
+    placement: "bottom-start",
+    strategy: "fixed",
+    whileElementsMounted: H
+  }), T = V(h, { role: "dialog" }), I = Z(h), { getFloatingProps: O } = q([T, I]);
+  K(() => {
+    const e = d.current;
+    function t(n) {
+      n.preventDefault(), y(!0);
+    }
+    return e && e.addEventListener("click", t), () => {
+      e && e.removeEventListener("click", t);
+    };
+  }, [x, S]);
+  const g = (e, t) => {
+    S.update(
+      () => {
+        const n = G(v);
+        X(n) && e(n);
+      },
+      { onUpdate: t }
+    );
+  }, P = (e) => {
+    g((t) => {
+      if (e.target.checked)
+        k(!0);
+      else {
+        if (i) {
+          const n = C(F(i, 0), 0);
+          t.setDateTime(n);
+        }
+        k(!1), p("00:00");
+      }
+    });
+  }, b = (e) => {
+    g((t) => {
+      const n = e.target.value;
+      if (!i) {
+        p(n);
+        return;
+      }
+      const [D, l] = n.split(":").map(($) => parseInt($, 10)), a = C(F(i, l), D);
+      m(a), t.setDateTime(a), p(n);
+    });
+  }, L = (e) => {
+    g((t) => {
+      if (!r || !e) {
+        m(e);
+        return;
+      }
+      const [n, D] = r.split(":").map((a) => parseInt(a, 10)), l = new Date(
+        e.getFullYear(),
+        e.getMonth(),
+        e.getDate(),
+        n,
+        D
+      );
+      t.setDateTime(l), m(l);
+    });
+  };
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: `dateTimePill ${N ? "selected" : ""}`,
+      ref: d,
+      style: { cursor: "pointer", width: "fit-content" },
+      children: [
+        o?.toDateString() + (f ? " " + r : "") || "Invalid Date",
+        w && /* @__PURE__ */ s(U, { children: /* @__PURE__ */ s(W, { lockScroll: !0, children: /* @__PURE__ */ s(Y, { context: h, initialFocus: -1, children: /* @__PURE__ */ c(
+          "div",
+          {
+            className: "dateTimePicker",
+            ref: x.setFloating,
+            style: M,
+            ...O(),
+            children: [
+              /* @__PURE__ */ s(
+                Q,
+                {
+                  captionLayout: "dropdown",
+                  navLayout: "after",
+                  fixedWeeks: !1,
+                  showOutsideDays: !1,
+                  mode: "single",
+                  selected: i,
+                  required: !0,
+                  onSelect: L,
+                  startMonth: new Date(1925, 0),
+                  endMonth: new Date(2042, 7)
+                }
+              ),
+              /* @__PURE__ */ s("form", { style: { marginBlockEnd: "1em" }, children: /* @__PURE__ */ c(
+                "div",
+                {
+                  style: {
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    width: "300px"
+                  },
+                  children: [
+                    /* @__PURE__ */ s(
+                      "input",
+                      {
+                        type: "checkbox",
+                        id: "option1",
+                        name: "option1",
+                        value: "value1",
+                        checked: f,
+                        onChange: P
+                      }
+                    ),
+                    /* @__PURE__ */ s("label", { children: /* @__PURE__ */ s(
+                      "input",
+                      {
+                        type: "time",
+                        value: r,
+                        onChange: b,
+                        disabled: !f
+                      }
+                    ) }),
+                    /* @__PURE__ */ c("span", { children: [
+                      " ",
+                      _
+                    ] })
+                  ]
+                }
+              ) })
+            ]
+          }
+        ) }) }) })
+      ]
+    }
+  );
+}
+export {
+  de as default
+};

package/dist/EquationComponent-BrbIAXFZ.js

@@ -0,0 +1,105 @@
+import { jsxs as p, jsx as t, Fragment as _ } from "react/jsx-runtime";
+import { useLexicalComposerContext as C } from "@lexical/react/LexicalComposerContext";
+import { useLexicalEditable as h } from "@lexical/react/useLexicalEditable";
+import { mergeRegister as S } from "@lexical/utils";
+import { isHTMLElement as $, $getNodeByKey as x, SELECTION_CHANGE_COMMAND as v, COMMAND_PRIORITY_HIGH as g, KEY_ESCAPE_COMMAND as M, $getSelection as b, $isNodeSelection as k } from "lexical";
+import { forwardRef as A, useState as N, useRef as H, useCallback as L, useEffect as q } from "react";
+import { ErrorBoundary as O } from "react-error-boundary";
+import { a as R, K as B } from "./index-C0BTrOQP.js";
+function D({ equation: r, setEquation: c, inline: s }, e) {
+  const i = (n) => {
+    c(n.target.value);
+  };
+  return s && $(e) ? /* @__PURE__ */ p("span", { className: "EquationEditor_inputBackground", children: [
+    /* @__PURE__ */ t("span", { className: "EquationEditor_dollarSign", children: "$" }),
+    /* @__PURE__ */ t(
+      "input",
+      {
+        className: "EquationEditor_inlineEditor",
+        value: r,
+        onChange: i,
+        autoFocus: !0,
+        ref: e
+      }
+    ),
+    /* @__PURE__ */ t("span", { className: "EquationEditor_dollarSign", children: "$" })
+  ] }) : /* @__PURE__ */ p("div", { className: "EquationEditor_inputBackground", children: [
+    /* @__PURE__ */ t("span", { className: "EquationEditor_dollarSign", children: `$$
+` }),
+    /* @__PURE__ */ t(
+      "textarea",
+      {
+        className: "EquationEditor_blockEditor",
+        value: r,
+        onChange: i,
+        ref: e
+      }
+    ),
+    /* @__PURE__ */ t("span", { className: "EquationEditor_dollarSign", children: `
+$$` })
+  ] });
+}
+const I = A(D);
+function w({
+  equation: r,
+  inline: c,
+  nodeKey: s
+}) {
+  const [e] = C(), i = h(), [n, f] = N(r), [l, E] = N(!1), d = H(null), m = L(
+    (a) => {
+      E(!1), e.update(() => {
+        const o = x(s);
+        R(o) && (o.setEquation(n), a && o.selectNext(0, 0));
+      });
+    },
+    [e, n, s]
+  );
+  return q(() => {
+    !l && n !== r && f(r);
+  }, [l, r, n]), q(() => {
+    if (i)
+      return l ? S(
+        e.registerCommand(
+          v,
+          (a) => {
+            const o = document.activeElement;
+            return d.current !== o && m(), !1;
+          },
+          g
+        ),
+        e.registerCommand(
+          M,
+          (a) => {
+            const o = document.activeElement;
+            return d.current === o ? (m(!0), !0) : !1;
+          },
+          g
+        )
+      ) : e.registerUpdateListener(({ editorState: a }) => {
+        a.read(() => {
+          const u = b();
+          return k(u) && u.has(s) && u.getNodes().length === 1;
+        }) && E(!0);
+      });
+  }, [e, s, m, l, i]), /* @__PURE__ */ t(_, { children: l && i ? /* @__PURE__ */ t(
+    I,
+    {
+      equation: n,
+      setEquation: f,
+      inline: c,
+      ref: d
+    }
+  ) : /* @__PURE__ */ t(O, { onError: (a) => e._onError(a), fallback: null, children: /* @__PURE__ */ t(
+    B,
+    {
+      equation: n,
+      inline: c,
+      onDoubleClick: () => {
+        i && E(!0);
+      }
+    }
+  ) }) });
+}
+export {
+  w as default
+};

package/dist/EquationComponent-DFRdSLyf.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("@lexical/react/LexicalComposerContext"),N=require("@lexical/react/useLexicalEditable"),C=require("@lexical/utils"),i=require("lexical"),u=require("react"),_=require("react-error-boundary"),p=require("./index-BF-WAqsp.cjs");function S({equation:o,setEquation:d,inline:l},t){const s=n=>{d(n.target.value)};return l&&i.isHTMLElement(t)?e.jsxs("span",{className:"EquationEditor_inputBackground",children:[e.jsx("span",{className:"EquationEditor_dollarSign",children:"$"}),e.jsx("input",{className:"EquationEditor_inlineEditor",value:o,onChange:s,autoFocus:!0,ref:t}),e.jsx("span",{className:"EquationEditor_dollarSign",children:"$"})]}):e.jsxs("div",{className:"EquationEditor_inputBackground",children:[e.jsx("span",{className:"EquationEditor_dollarSign",children:`$$
+`}),e.jsx("textarea",{className:"EquationEditor_blockEditor",value:o,onChange:s,ref:t}),e.jsx("span",{className:"EquationEditor_dollarSign",children:`
+$$`})]})}const j=u.forwardRef(S);function h({equation:o,inline:d,nodeKey:l}){const[t]=g.useLexicalComposerContext(),s=N.useLexicalEditable(),[n,x]=u.useState(o),[c,m]=u.useState(!1),f=u.useRef(null),q=u.useCallback(a=>{m(!1),t.update(()=>{const r=i.$getNodeByKey(l);p.$isEquationNode(r)&&(r.setEquation(n),a&&r.selectNext(0,0))})},[t,n,l]);return u.useEffect(()=>{!c&&n!==o&&x(o)},[c,o,n]),u.useEffect(()=>{if(s)return c?C.mergeRegister(t.registerCommand(i.SELECTION_CHANGE_COMMAND,a=>{const r=document.activeElement;return f.current!==r&&q(),!1},i.COMMAND_PRIORITY_HIGH),t.registerCommand(i.KEY_ESCAPE_COMMAND,a=>{const r=document.activeElement;return f.current===r?(q(!0),!0):!1},i.COMMAND_PRIORITY_HIGH)):t.registerUpdateListener(({editorState:a})=>{a.read(()=>{const E=i.$getSelection();return i.$isNodeSelection(E)&&E.has(l)&&E.getNodes().length===1})&&m(!0)})},[t,l,q,c,s]),e.jsx(e.Fragment,{children:c&&s?e.jsx(j,{equation:n,setEquation:x,inline:d,ref:f}):e.jsx(_.ErrorBoundary,{onError:a=>t._onError(a),fallback:null,children:e.jsx(p.KatexRenderer,{equation:n,inline:d,onDoubleClick:()=>{s&&m(!0)}})})})}exports.default=h;

package/dist/ExcalidrawComponent-B2RIlh-t.js

@@ -0,0 +1,174 @@
+import { jsx as g, jsxs as A, Fragment as B } from "react/jsx-runtime";
+import { useLexicalComposerContext as $ } from "@lexical/react/LexicalComposerContext";
+import { useLexicalEditable as H } from "@lexical/react/useLexicalEditable";
+import { useLexicalNodeSelection as j } from "@lexical/react/useLexicalNodeSelection";
+import { mergeRegister as F } from "@lexical/utils";
+import { CLICK_COMMAND as J, isDOMNode as W, COMMAND_PRIORITY_LOW as P, $getNodeByKey as b } from "lexical";
+import { useState as M, useEffect as I, useRef as w, useCallback as E, useMemo as Y } from "react";
+import { E as q, b as D } from "./index-C0BTrOQP.js";
+import { I as G } from "./ImageResizer-wZz1Oitl.js";
+import { exportToSvg as Q } from "@excalidraw/excalidraw";
+const U = (t) => {
+  const s = t?.firstElementChild?.firstElementChild, a = t.getAttribute("viewBox");
+  if (a != null) {
+    const c = a.split(" ");
+    t.setAttribute("width", c[2]), t.setAttribute("height", c[3]);
+  }
+  s && s.tagName === "style" && s.remove();
+};
+function V({
+  elements: t,
+  files: s,
+  imageContainerRef: a,
+  appState: c,
+  rootClassName: i = null,
+  width: r = "inherit",
+  height: m = "inherit"
+}) {
+  const [u, h] = M(null);
+  I(() => {
+    (async () => {
+      const n = await Q({
+        appState: c,
+        elements: t,
+        files: s
+      });
+      U(n), n.setAttribute("width", "100%"), n.setAttribute("height", "100%"), n.setAttribute("display", "block"), h(n);
+    })();
+  }, [t, s, c]);
+  const f = {};
+  return r !== "inherit" && (f.width = `${r}px`), m !== "inherit" && (f.height = `${m}px`), /* @__PURE__ */ g(
+    "div",
+    {
+      ref: (d) => {
+        d && a && (a.current = d);
+      },
+      className: i ?? "",
+      style: f,
+      dangerouslySetInnerHTML: { __html: u?.outerHTML ?? "" }
+    }
+  );
+}
+function le({
+  nodeKey: t,
+  data: s,
+  width: a,
+  height: c
+}) {
+  const [i] = $(), r = H(), [m, u] = M(
+    s === "[]" && i.isEditable()
+  ), h = w(null), f = w(null), d = w(null), [n, N, S] = j(t), [x, v] = M(!1);
+  I(() => {
+    if (!r) {
+      n && S();
+      return;
+    }
+    return F(
+      i.registerCommand(
+        J,
+        (e) => {
+          const l = f.current, o = e.target;
+          return x ? !0 : l !== null && W(o) && l.contains(o) ? (e.shiftKey || S(), N(!n), e.detail > 1 && u(!0), !0) : !1;
+        },
+        P
+      )
+    );
+  }, [S, i, n, x, N, r]);
+  const y = E(() => (u(!1), i.update(() => {
+    const e = b(t);
+    e && e.remove();
+  })), [i, t]), L = (e, l, o) => i.update(() => {
+    const C = b(t);
+    D(C) && (e && e.length > 0 || Object.keys(o).length > 0 ? C.setData(
+      JSON.stringify({
+        appState: l,
+        elements: e,
+        files: o
+      })
+    ) : C.remove());
+  }), T = () => {
+    v(!0);
+  }, _ = (e, l) => {
+    setTimeout(() => {
+      v(!1);
+    }, 200), i.update(() => {
+      const o = b(t);
+      D(o) && (o.setWidth(e), o.setHeight(l));
+    });
+  }, k = E(() => {
+    u(!0);
+  }, []), {
+    elements: p = [],
+    files: R = {},
+    appState: O = {}
+  } = Y(() => JSON.parse(s), [s]), z = E(() => {
+    u(!1), p.length === 0 && i.update(() => {
+      const e = b(t);
+      e && e.remove();
+    });
+  }, [i, t, p.length]);
+  return /* @__PURE__ */ A(B, { children: [
+    r && m && /* @__PURE__ */ g(
+      q,
+      {
+        initialElements: p,
+        initialFiles: R,
+        initialAppState: O,
+        isShown: m,
+        onDelete: y,
+        onClose: z,
+        onSave: (e, l, o) => {
+          L(e, l, o), u(!1);
+        },
+        closeOnClickOutside: !1
+      }
+    ),
+    p.length > 0 && /* @__PURE__ */ A(
+      "button",
+      {
+        ref: f,
+        className: `excalidraw-button ${n ? "selected" : ""}`,
+        children: [
+          /* @__PURE__ */ g(
+            V,
+            {
+              imageContainerRef: h,
+              className: "image",
+              elements: p,
+              files: R,
+              appState: O,
+              width: a,
+              height: c
+            }
+          ),
+          n && r && /* @__PURE__ */ g(
+            "div",
+            {
+              className: "image-edit-button",
+              role: "button",
+              tabIndex: 0,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: k
+            }
+          ),
+          (n || x) && r && /* @__PURE__ */ g(
+            G,
+            {
+              buttonRef: d,
+              showCaption: !0,
+              setShowCaption: () => null,
+              imageRef: h,
+              editor: i,
+              onResizeStart: T,
+              onResizeEnd: _,
+              captionsEnabled: !0
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  le as default
+};

package/dist/ExcalidrawComponent-VGrNBMwa.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),D=require("@lexical/react/LexicalComposerContext"),I=require("@lexical/react/useLexicalEditable"),$=require("@lexical/react/useLexicalNodeSelection"),B=require("@lexical/utils"),g=require("lexical"),n=require("react"),R=require("./index-BF-WAqsp.cjs"),T=require("./ImageResizer-riowDF8s.cjs"),k=require("@excalidraw/excalidraw"),z=t=>{const l=t?.firstElementChild?.firstElementChild,u=t.getAttribute("viewBox");if(u!=null){const d=u.split(" ");t.setAttribute("width",d[2]),t.setAttribute("height",d[3])}l&&l.tagName==="style"&&l.remove()};function _({elements:t,files:l,imageContainerRef:u,appState:d,rootClassName:s=null,width:r="inherit",height:x="inherit"}){const[f,p]=n.useState(null);n.useEffect(()=>{(async()=>{const i=await k.exportToSvg({appState:d,elements:t,files:l});z(i),i.setAttribute("width","100%"),i.setAttribute("height","100%"),i.setAttribute("display","block"),p(i)})()},[t,l,d]);const m={};return r!=="inherit"&&(m.width=`${r}px`),x!=="inherit"&&(m.height=`${x}px`),c.jsx("div",{ref:b=>{b&&u&&(u.current=b)},className:s??"",style:m,dangerouslySetInnerHTML:{__html:f?.outerHTML??""}})}function H({nodeKey:t,data:l,width:u,height:d}){const[s]=D.useLexicalComposerContext(),r=I.useLexicalEditable(),[x,f]=n.useState(l==="[]"&&s.isEditable()),p=n.useRef(null),m=n.useRef(null),b=n.useRef(null),[i,w,S]=$.useLexicalNodeSelection(t),[C,E]=n.useState(!1);n.useEffect(()=>{if(!r){i&&S();return}return B.mergeRegister(s.registerCommand(g.CLICK_COMMAND,e=>{const a=m.current,o=e.target;return C?!0:a!==null&&g.isDOMNode(o)&&a.contains(o)?(e.shiftKey||S(),w(!i),e.detail>1&&f(!0),!0):!1},g.COMMAND_PRIORITY_LOW))},[S,s,i,C,w,r]);const v=n.useCallback(()=>(f(!1),s.update(()=>{const e=g.$getNodeByKey(t);e&&e.remove()})),[s,t]),O=(e,a,o)=>s.update(()=>{const N=g.$getNodeByKey(t);R.$isExcalidrawNode(N)&&(e&&e.length>0||Object.keys(o).length>0?N.setData(JSON.stringify({appState:a,elements:e,files:o})):N.remove())}),j=()=>{E(!0)},q=(e,a)=>{setTimeout(()=>{E(!1)},200),s.update(()=>{const o=g.$getNodeByKey(t);R.$isExcalidrawNode(o)&&(o.setWidth(e),o.setHeight(a))})},A=n.useCallback(()=>{f(!0)},[]),{elements:h=[],files:y={},appState:M={}}=n.useMemo(()=>JSON.parse(l),[l]),L=n.useCallback(()=>{f(!1),h.length===0&&s.update(()=>{const e=g.$getNodeByKey(t);e&&e.remove()})},[s,t,h.length]);return c.jsxs(c.Fragment,{children:[r&&x&&c.jsx(R.ExcalidrawModal,{initialElements:h,initialFiles:y,initialAppState:M,isShown:x,onDelete:v,onClose:L,onSave:(e,a,o)=>{O(e,a,o),f(!1)},closeOnClickOutside:!1}),h.length>0&&c.jsxs("button",{ref:m,className:`excalidraw-button ${i?"selected":""}`,children:[c.jsx(_,{imageContainerRef:p,className:"image",elements:h,files:y,appState:M,width:u,height:d}),i&&r&&c.jsx("div",{className:"image-edit-button",role:"button",tabIndex:0,onMouseDown:e=>e.preventDefault(),onClick:A}),(i||C)&&r&&c.jsx(T.ImageResizer,{buttonRef:b,showCaption:!0,setShowCaption:()=>null,imageRef:p,editor:s,onResizeStart:j,onResizeEnd:q,captionsEnabled:!0})]})]})}exports.default=H;

package/dist/ImageComponent-CFLPSAon.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),F=require("@lexical/react/LexicalCollaborationContext"),U=require("@lexical/react/LexicalCollaborationPlugin"),q=require("@lexical/react/LexicalComposerContext"),J=require("@lexical/react/LexicalErrorBoundary"),Q=require("@lexical/react/LexicalHashtagPlugin"),X=require("@lexical/react/LexicalHistoryPlugin"),Z=require("@lexical/react/LexicalNestedComposer"),ee=require("@lexical/react/LexicalRichTextPlugin"),te=require("@lexical/react/useLexicalEditable"),ne=require("@lexical/react/useLexicalNodeSelection"),y=require("@lexical/utils"),t=require("lexical"),a=require("react"),c=require("./index-BF-WAqsp.cjs"),re=require("./ImageResizer-riowDF8s.cjs"),se="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M22%203H2v18h20v-2h-2v-2h2v-2h-2v-2h2v-2h-2V9h2V7h-2V5h2V3zm-2%204v2h-2v2h2v2h-2v2h2v2h-2v2H4V5h14v2h2zm-6%202h-2v2h-2v2H8v2H6v2h2v-2h2v-2h2v-2h2v2h2v-2h-2V9zM6%207h2v2H6V7z'%20fill='%23000000'/%3e%3c/svg%3e",b=new Map,j=t.createCommand("RIGHT_CLICK_IMAGE_COMMAND");function oe({setShowCaption:l}){const[o]=q.useLexicalComposerContext();return a.useEffect(()=>o.registerCommand(t.BLUR_COMMAND,()=>(c.$isCaptionEditorEmpty()&&l(!1),!1),t.COMMAND_PRIORITY_EDITOR)),null}function ie(l){let o=b.get(l);if(o&&"error"in o&&typeof o.error=="boolean")return o;throw o||(o=new Promise(i=>{const u=new Image;u.src=l,u.onload=()=>i({error:!1,height:u.naturalHeight,width:u.naturalWidth}),u.onerror=()=>i({error:!0})}).then(i=>(b.set(l,i),i)),b.set(l,o),o)}function ae(l){return l.toLowerCase().endsWith(".svg")}function le({altText:l,className:o,imageRef:i,src:u,width:_,height:S,maxWidth:h,onError:m}){const f=ae(u),C=ie(u);if(a.useEffect(()=>{C.error&&m()},[C.error,m]),C.error)return r.jsx(G,{});const v=(()=>{if(!f)return{height:S,maxWidth:h,width:_};const x=C.width,R=C.height;let d=x,g=R;if(d>h){const N=h/d;d=h,g=Math.round(g*N)}const M=500;if(g>M){const N=M/g;g=M,d=Math.round(d*N)}return{height:g,maxWidth:h,width:d}})();return r.jsx("img",{className:o||void 0,src:u,alt:l,ref:i,style:v,onError:m,draggable:"false"})}function G(){return r.jsx("img",{src:se,style:{height:200,opacity:.2,width:200},draggable:"false",alt:"Broken image"})}function $(){}function ce({src:l,altText:o,nodeKey:i,width:u,height:_,maxWidth:S,resizable:h,showCaption:m,caption:f,captionsEnabled:C}){const I=a.useRef(null),v=a.useRef(null),[x,R,d]=ne.useLexicalNodeSelection(i),[g,M]=a.useState(!1),{isCollabActive:N}=F.useCollaborationContext(),[s]=q.useLexicalComposerContext(),A=a.useRef(null),[D,V]=a.useState(!1),k=te.useLexicalEditable(),p=a.useMemo(()=>x&&s.getEditorState().read(()=>{const e=t.$getSelection();return t.$isNodeSelection(e)&&e.has(i)}),[s,x,i]),P=a.useCallback(e=>{const n=t.$getSelection(),E=v.current;if(t.$isNodeSelection(n)&&n.has(i)&&n.getNodes().length===1){if(m)return t.$setSelection(null),e.preventDefault(),f.focus(),!0;if(E!==null&&E!==document.activeElement)return e.preventDefault(),E.focus(),!0}return!1},[f,i,m]),w=a.useCallback(e=>A.current===f||v.current===e.target?(t.$setSelection(null),s.update(()=>{R(!0);const n=s.getRootElement();n!==null&&n.focus()}),!0):!1,[f,s,R]),L=a.useCallback(e=>{const n=e;return g?!0:n.target===I.current?(n.shiftKey?R(!x):(d(),R(!0)),!0):!1},[g,x,R,d]),O=a.useCallback(e=>{s.getEditorState().read(()=>{const n=t.$getSelection();e.target.tagName==="IMG"&&t.$isRangeSelection(n)&&n.getNodes().length===1&&s.dispatchCommand(j,e)})},[s]);a.useEffect(()=>y.mergeRegister(s.registerCommand(t.SELECTION_CHANGE_COMMAND,(e,n)=>(A.current=n,!1),t.COMMAND_PRIORITY_LOW),s.registerCommand(t.DRAGSTART_COMMAND,e=>e.target===I.current?(e.preventDefault(),!0):!1,t.COMMAND_PRIORITY_LOW)),[s]),a.useEffect(()=>{let e=$;return y.mergeRegister(s.registerCommand(t.CLICK_COMMAND,L,t.COMMAND_PRIORITY_LOW),s.registerCommand(j,L,t.COMMAND_PRIORITY_LOW),s.registerCommand(t.KEY_ENTER_COMMAND,P,t.COMMAND_PRIORITY_LOW),s.registerCommand(t.KEY_ESCAPE_COMMAND,w,t.COMMAND_PRIORITY_LOW),s.registerRootListener(n=>{e(),e=$,n&&(n.addEventListener("contextmenu",O),e=()=>n.removeEventListener("contextmenu",O))}),()=>e())},[s,P,w,L,O]);const T=e=>{s.update(()=>{const n=t.$getNodeByKey(i);c.$isImageNode(n)&&(n.setShowCaption(e),e&&n.__caption.update(()=>{t.$getSelection()||t.$getRoot().selectEnd()}))})},z=(e,n)=>{setTimeout(()=>{M(!1)},200),s.update(()=>{const E=t.$getNodeByKey(i);c.$isImageNode(E)&&E.setWidthAndHeight(e,n)})},B=()=>{M(!0)},{historyState:Y}=c.useSharedHistoryContext(),{settings:{showNestedEditorTreeView:W}}=c.useSettings(),K=p&&!g,H=(x||g)&&k;return r.jsx(a.Suspense,{fallback:null,children:r.jsxs(r.Fragment,{children:[r.jsx("div",{draggable:K,children:D?r.jsx(G,{}):r.jsx(le,{className:H?`focused ${p?"draggable":""}`:null,src:l,altText:o,imageRef:I,width:u,height:_,maxWidth:S,onError:()=>V(!0)})}),m&&r.jsx("div",{className:"image-caption-container",children:r.jsxs(Z.LexicalNestedComposer,{initialEditor:f,children:[r.jsx(oe,{setShowCaption:T}),r.jsx(c.NewMentionsPlugin,{}),r.jsx(c.LinkPlugin,{}),r.jsx(c.EmojisPlugin,{}),r.jsx(Q.HashtagPlugin,{}),r.jsx(c.KeywordsPlugin,{}),N?r.jsx(U.CollaborationPlugin,{id:f.getKey(),providerFactory:c.createWebsocketProvider,shouldBootstrap:!0}):r.jsx(X.HistoryPlugin,{externalHistoryState:Y}),r.jsx(ee.RichTextPlugin,{contentEditable:r.jsx(c.LexicalContentEditable,{placeholder:"Enter a caption...",placeholderClassName:"ImageNode__placeholder",className:"ImageNode__contentEditable"}),ErrorBoundary:J.LexicalErrorBoundary}),W===!0?r.jsx(c.TreeViewPlugin,{}):null]})}),h&&p&&H&&r.jsx(re.ImageResizer,{showCaption:m,setShowCaption:T,editor:s,buttonRef:v,imageRef:I,maxWidth:S,onResizeStart:B,onResizeEnd:z,captionsEnabled:!D&&C})]})})}exports.RIGHT_CLICK_IMAGE_COMMAND=j;exports.default=ce;