ct-rich-text-editor 1.0.8 → 1.0.9

package/dist/index-9ce51b54.js

@@ -0,0 +1,632 @@
+import { u as q, L as F, c as ae, j as i, a as he, b as be, $ as Y, R as Ce, C as xe, d as _e, O as ye, H as ve, e as Ee, i as we } from "./index-988ead1c.js";
+import { CodeNode as Me } from "@lexical/code";
+import { LinkNode as Ne } from "@lexical/link";
+import { useEffect as A, createContext as ce, useContext as B, useRef as $, useMemo as ue, useState as G, useCallback as I, Suspense as Se } from "react";
+import { calculateZoomLevel as J, mergeRegister as De } from "@lexical/utils";
+import { $getSelection as K, $isNodeSelection as k, $setSelection as Q, $isRangeSelection as Pe, SELECTION_CHANGE_COMMAND as je, COMMAND_PRIORITY_LOW as L, CLICK_COMMAND as Re, DRAGSTART_COMMAND as Oe, KEY_DELETE_COMMAND as ze, KEY_BACKSPACE_COMMAND as Le, KEY_ENTER_COMMAND as $e, KEY_ESCAPE_COMMAND as Ae, RootNode as Te, TextNode as We, LineBreakNode as Ie, ParagraphNode as ke, createCommand as He, $getNodeByKey as ee } from "lexical";
+import "@emotion/styled";
+import "react-dom";
+import "@lexical/table";
+import "axios";
+import "@emotion/react";
+import "emoji-picker-react";
+function Ke({
+  defaultSelection: e
+}) {
+  const [n] = q();
+  return A(() => {
+    n.focus(() => {
+      const o = document.activeElement, h = n.getRootElement();
+      h !== null && (o === null || !h.contains(o)) && h.focus({
+        preventScroll: !0
+      });
+    }, {
+      defaultSelection: e
+    });
+  }, [e, n]), null;
+}
+const Fe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  AutoFocusPlugin: Ke
+}, Symbol.toStringTag, { value: "Module" }));
+function Be({ defaultSelection: e }) {
+  const [n] = q();
+  return A(() => {
+    n.focus(() => {
+      const o = document.activeElement, h = n.getRootElement();
+      h === null || o !== null && h.contains(o) || h.focus({ preventScroll: !0 });
+    }, { defaultSelection: e });
+  }, [e, n]), null;
+}
+const Ye = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  AutoFocusPlugin: Be
+}, Symbol.toStringTag, { value: "Module" })), Ge = process.env.NODE_ENV !== "production" ? Fe : Ye, Xe = Ge.AutoFocusPlugin, te = [["Cat", "rgb(125, 50, 0)"], ["Dog", "rgb(100, 0, 0)"], ["Rabbit", "rgb(150, 0, 0)"], ["Frog", "rgb(200, 0, 0)"], ["Fox", "rgb(200, 75, 0)"], ["Hedgehog", "rgb(0, 75, 0)"], ["Pigeon", "rgb(0, 125, 0)"], ["Squirrel", "rgb(75, 100, 0)"], ["Bear", "rgb(125, 100, 0)"], ["Tiger", "rgb(0, 0, 150)"], ["Leopard", "rgb(0, 0, 200)"], ["Zebra", "rgb(0, 0, 250)"], ["Wolf", "rgb(0, 100, 150)"], ["Owl", "rgb(0, 100, 100)"], ["Gull", "rgb(100, 0, 100)"], ["Squid", "rgb(150, 0, 150)"]], oe = te[Math.floor(Math.random() * te.length)], de = /* @__PURE__ */ ce({
+  clientID: 0,
+  color: oe[1],
+  isCollabActive: !1,
+  name: oe[0],
+  yjsDocMap: /* @__PURE__ */ new Map()
+});
+function Ve(e, n) {
+  const o = B(de);
+  return e != null && (o.name = e), n != null && (o.color = n), o;
+}
+const qe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  CollaborationContext: de,
+  useCollaborationContext: Ve
+}, Symbol.toStringTag, { value: "Module" })), ne = [["Cat", "rgb(125, 50, 0)"], ["Dog", "rgb(100, 0, 0)"], ["Rabbit", "rgb(150, 0, 0)"], ["Frog", "rgb(200, 0, 0)"], ["Fox", "rgb(200, 75, 0)"], ["Hedgehog", "rgb(0, 75, 0)"], ["Pigeon", "rgb(0, 125, 0)"], ["Squirrel", "rgb(75, 100, 0)"], ["Bear", "rgb(125, 100, 0)"], ["Tiger", "rgb(0, 0, 150)"], ["Leopard", "rgb(0, 0, 200)"], ["Zebra", "rgb(0, 0, 250)"], ["Wolf", "rgb(0, 100, 150)"], ["Owl", "rgb(0, 100, 100)"], ["Gull", "rgb(100, 0, 100)"], ["Squid", "rgb(150, 0, 150)"]], re = ne[Math.floor(Math.random() * ne.length)], ge = ce({ clientID: 0, color: re[1], isCollabActive: !1, name: re[0], yjsDocMap: /* @__PURE__ */ new Map() });
+function Ue(e, n) {
+  const o = B(ge);
+  return e != null && (o.name = e), n != null && (o.color = n), o;
+}
+const Ze = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  CollaborationContext: ge,
+  useCollaborationContext: Ue
+}, Symbol.toStringTag, { value: "Module" })), Je = process.env.NODE_ENV !== "production" ? qe : Ze, U = Je.useCollaborationContext;
+function se(e) {
+  const n = e.transform();
+  return n !== null ? /* @__PURE__ */ new Set([n]) : /* @__PURE__ */ new Set();
+}
+function Qe({
+  initialEditor: e,
+  children: n,
+  initialNodes: o,
+  initialTheme: h,
+  skipCollabChecks: P
+}) {
+  const v = $(!1), _ = B(F);
+  if (_ == null)
+    throw Error("Unexpected parent context null on a nested composer");
+  const [g, {
+    getTheme: M
+  }] = _, R = ue(
+    () => {
+      const m = h || M() || void 0, O = ae(_, m);
+      if (m !== void 0 && (e._config.theme = m), e._parentEditor = g, o)
+        for (let l of o) {
+          let y = null, t = null;
+          if (typeof l != "function") {
+            const C = l;
+            l = C.replace, y = C.with, t = C.withKlass || null;
+          }
+          const S = e._nodes.get(l.getType());
+          e._nodes.set(l.getType(), {
+            exportDOM: S ? S.exportDOM : void 0,
+            klass: l,
+            replace: y,
+            replaceWithKlass: t,
+            transforms: se(l)
+          });
+        }
+      else {
+        const l = e._nodes = new Map(g._nodes);
+        for (const [y, t] of l)
+          e._nodes.set(y, {
+            exportDOM: t.exportDOM,
+            klass: t.klass,
+            replace: t.replace,
+            replaceWithKlass: t.replaceWithKlass,
+            transforms: se(t.klass)
+          });
+      }
+      return e._config.namespace = g._config.namespace, e._editable = g._editable, [e, O];
+    },
+    // We only do this for init
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  ), {
+    isCollabActive: E,
+    yjsDocMap: N
+  } = U(), c = P || v.current || N.has(e.getKey());
+  return A(() => {
+    c && (v.current = !0);
+  }, [c]), A(() => g.registerEditableListener((m) => {
+    e.setEditable(m);
+  }), [e, g]), /* @__PURE__ */ i.jsx(F.Provider, {
+    value: R,
+    children: !E || c ? n : null
+  });
+}
+const et = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  LexicalNestedComposer: Qe
+}, Symbol.toStringTag, { value: "Module" }));
+function tt(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+var ot = tt(function(e) {
+  const n = new URLSearchParams();
+  n.append("code", e);
+  for (let o = 1; o < arguments.length; o++)
+    n.append("v", arguments[o]);
+  throw Error(`Minified Lexical error #${e}; visit https://lexical.dev/docs/error?${n} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`);
+});
+function ie(e) {
+  const n = e.transform();
+  return n !== null ? /* @__PURE__ */ new Set([n]) : /* @__PURE__ */ new Set();
+}
+function nt({ initialEditor: e, children: n, initialNodes: o, initialTheme: h, skipCollabChecks: P }) {
+  const v = $(!1), _ = B(F);
+  _ == null && ot(9);
+  const [g, { getTheme: M }] = _, R = ue(() => {
+    const m = h || M() || void 0, O = ae(_, m);
+    if (m !== void 0 && (e._config.theme = m), e._parentEditor = g, o)
+      for (let l of o) {
+        let y = null, t = null;
+        if (typeof l != "function") {
+          const C = l;
+          l = C.replace, y = C.with, t = C.withKlass || null;
+        }
+        const S = e._nodes.get(l.getType());
+        e._nodes.set(l.getType(), { exportDOM: S ? S.exportDOM : void 0, klass: l, replace: y, replaceWithKlass: t, transforms: ie(l) });
+      }
+    else {
+      const l = e._nodes = new Map(g._nodes);
+      for (const [y, t] of l)
+        e._nodes.set(y, { exportDOM: t.exportDOM, klass: t.klass, replace: t.replace, replaceWithKlass: t.replaceWithKlass, transforms: ie(t.klass) });
+    }
+    return e._config.namespace = g._config.namespace, e._editable = g._editable, [e, O];
+  }, []), { isCollabActive: E, yjsDocMap: N } = U(), c = P || v.current || N.has(e.getKey());
+  return A(() => {
+    c && (v.current = !0);
+  }, [c]), A(() => g.registerEditableListener((m) => {
+    e.setEditable(m);
+  }), [e, g]), i.jsx(F.Provider, { value: R, children: !E || c ? n : null });
+}
+const rt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  LexicalNestedComposer: nt
+}, Symbol.toStringTag, { value: "Module" })), st = process.env.NODE_ENV !== "production" ? et : rt, it = st.LexicalNestedComposer;
+function X(e, n, o) {
+  return Math.min(Math.max(e, n), o);
+}
+const a = {
+  east: 1,
+  north: 8,
+  south: 2,
+  west: 4
+};
+function lt({
+  onResizeStart: e,
+  onResizeEnd: n,
+  buttonRef: o,
+  imageRef: h,
+  maxWidth: P,
+  editor: v,
+  showCaption: _,
+  setShowCaption: g,
+  captionsEnabled: M
+}) {
+  const R = $(null), E = $({
+    priority: "",
+    value: "default"
+  }), N = $({
+    currentHeight: 0,
+    currentWidth: 0,
+    direction: 0,
+    isResizing: !1,
+    ratio: 0,
+    startHeight: 0,
+    startWidth: 0,
+    startX: 0,
+    startY: 0
+  }), c = v.getRootElement(), m = P || (c !== null ? c.getBoundingClientRect().width - 20 : 100), O = c !== null ? c.getBoundingClientRect().height - 20 : 100, l = 100, y = 100, t = (r) => {
+    const u = r === a.east || r === a.west, s = r === a.north || r === a.south, D = r & a.north && r & a.west || r & a.south && r & a.east, x = u ? "ew" : s ? "ns" : D ? "nwse" : "nesw";
+    c !== null && c.style.setProperty(
+      "cursor",
+      `${x}-resize`,
+      "important"
+    ), document.body !== null && (document.body.style.setProperty(
+      "cursor",
+      `${x}-resize`,
+      "important"
+    ), E.current.value = document.body.style.getPropertyValue(
+      "-webkit-user-select"
+    ), E.current.priority = document.body.style.getPropertyPriority(
+      "-webkit-user-select"
+    ), document.body.style.setProperty(
+      "-webkit-user-select",
+      "none",
+      "important"
+    ));
+  }, S = () => {
+    c !== null && c.style.setProperty("cursor", "text"), document.body !== null && (document.body.style.setProperty("cursor", "default"), document.body.style.setProperty(
+      "-webkit-user-select",
+      E.current.value,
+      E.current.priority
+    ));
+  }, C = (r, u) => {
+    if (!v.isEditable())
+      return;
+    const s = h.current, D = R.current;
+    if (s !== null && D !== null) {
+      r.preventDefault();
+      const { width: x, height: w } = s.getBoundingClientRect(), p = J(s), f = N.current;
+      f.startWidth = x, f.startHeight = w, f.ratio = x / w, f.currentWidth = x, f.currentHeight = w, f.startX = r.clientX / p, f.startY = r.clientY / p, f.isResizing = !0, f.direction = u, t(u), e(), D.classList.add("image-control-wrapper--resizing"), s.style.height = `${w}px`, s.style.width = `${x}px`, document.addEventListener("pointermove", T), document.addEventListener("pointerup", W);
+    }
+  }, T = (r) => {
+    const u = h.current, s = N.current, D = s.direction & (a.east | a.west), x = s.direction & (a.south | a.north);
+    if (u !== null && s.isResizing) {
+      const w = J(u);
+      if (D && x) {
+        let p = Math.floor(s.startX - r.clientX / w);
+        p = s.direction & a.east ? -p : p;
+        const f = X(
+          s.startWidth + p,
+          l,
+          m
+        ), H = f / s.ratio;
+        u.style.width = `${f}px`, u.style.height = `${H}px`, s.currentHeight = H, s.currentWidth = f;
+      } else if (x) {
+        let p = Math.floor(s.startY - r.clientY / w);
+        p = s.direction & a.south ? -p : p;
+        const f = X(
+          s.startHeight + p,
+          y,
+          O
+        );
+        u.style.height = `${f}px`, s.currentHeight = f;
+      } else {
+        let p = Math.floor(s.startX - r.clientX / w);
+        p = s.direction & a.east ? -p : p;
+        const f = X(
+          s.startWidth + p,
+          l,
+          m
+        );
+        u.style.width = `${f}px`, s.currentWidth = f;
+      }
+    }
+  }, W = () => {
+    const r = h.current, u = N.current, s = R.current;
+    if (r !== null && s !== null && u.isResizing) {
+      const D = u.currentWidth, x = u.currentHeight;
+      u.startWidth = 0, u.startHeight = 0, u.ratio = 0, u.startX = 0, u.startY = 0, u.currentWidth = 0, u.currentHeight = 0, u.isResizing = !1, s.classList.remove("image-control-wrapper--resizing"), S(), n(D, x), document.removeEventListener("pointermove", T), document.removeEventListener("pointerup", W);
+    }
+  };
+  return /* @__PURE__ */ i.jsxs("div", { ref: R, children: [
+    !_ && M && /* @__PURE__ */ i.jsx(
+      "button",
+      {
+        className: "image-caption-button",
+        ref: o,
+        onClick: () => {
+          g(!_);
+        },
+        children: "Add Caption"
+      }
+    ),
+    /* @__PURE__ */ i.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-n",
+        onPointerDown: (r) => {
+          C(r, a.north);
+        }
+      }
+    ),
+    /* @__PURE__ */ i.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-ne",
+        onPointerDown: (r) => {
+          C(r, a.north | a.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ i.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-e",
+        onPointerDown: (r) => {
+          C(r, a.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ i.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-se",
+        onPointerDown: (r) => {
+          C(r, a.south | a.east);
+        }
+      }
+    ),
+    /* @__PURE__ */ i.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-s",
+        onPointerDown: (r) => {
+          C(r, a.south);
+        }
+      }
+    ),
+    /* @__PURE__ */ i.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-sw",
+        onPointerDown: (r) => {
+          C(r, a.south | a.west);
+        }
+      }
+    ),
+    /* @__PURE__ */ i.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-w",
+        onPointerDown: (r) => {
+          C(r, a.west);
+        }
+      }
+    ),
+    /* @__PURE__ */ i.jsx(
+      "div",
+      {
+        className: "image-resizer image-resizer-nw",
+        onPointerDown: (r) => {
+          C(r, a.north | a.west);
+        }
+      }
+    )
+  ] });
+}
+const V = /* @__PURE__ */ new Set(), le = He("RIGHT_CLICK_IMAGE_COMMAND");
+function at(e) {
+  if (!V.has(e))
+    throw new Promise((n) => {
+      const o = new Image();
+      o.src = e, o.onload = () => {
+        V.add(e), n(null);
+      }, o.onerror = () => {
+        V.add(e);
+      };
+    });
+}
+function ct({
+  altText: e,
+  className: n,
+  imageRef: o,
+  src: h,
+  width: P,
+  height: v,
+  maxWidth: _,
+  onError: g
+}) {
+  return at(h), /* @__PURE__ */ i.jsx(
+    "img",
+    {
+      className: n || void 0,
+      src: h,
+      alt: e,
+      ref: o,
+      style: {
+        height: v,
+        maxWidth: _,
+        width: P
+      },
+      onError: g,
+      draggable: "false"
+    }
+  );
+}
+function ut() {
+  return /* @__PURE__ */ i.jsx(
+    "img",
+    {
+      src: "",
+      style: {
+        height: 200,
+        opacity: 0.2,
+        width: 200
+      },
+      draggable: "false"
+    }
+  );
+}
+function Et({
+  src: e,
+  altText: n,
+  nodeKey: o,
+  width: h,
+  height: P,
+  maxWidth: v,
+  resizable: _,
+  showCaption: g,
+  caption: M,
+  captionsEnabled: R
+}) {
+  const E = $(null), N = $(null), [c, m, O] = he(o), [l, y] = G(!1);
+  U();
+  const [t] = q(), [S, C] = G(null), T = $(null), [W, r] = G(!1), u = be(), s = I(
+    (b) => {
+      const d = K();
+      return c && k(d) && (b.preventDefault(), t.update(() => {
+        d.getNodes().forEach((z) => {
+          Y(z) && z.remove();
+        });
+      })), !1;
+    },
+    [t, c]
+  ), D = I(
+    (b) => {
+      const d = K(), j = N.current;
+      if (c && k(d) && d.getNodes().length === 1) {
+        if (g)
+          return Q(null), b.preventDefault(), M.focus(), !0;
+        if (j !== null && j !== document.activeElement)
+          return b.preventDefault(), j.focus(), !0;
+      }
+      return !1;
+    },
+    [M, c, g]
+  ), x = I(
+    (b) => T.current === M || N.current === b.target ? (Q(null), t.update(() => {
+      m(!0);
+      const d = t.getRootElement();
+      d !== null && d.focus();
+    }), !0) : !1,
+    [M, t, m]
+  ), w = I(
+    (b) => {
+      const d = b;
+      return l ? !0 : d.target === E.current ? (d.shiftKey ? m(!c) : (O(), m(!0)), !0) : !1;
+    },
+    [l, c, m, O]
+  ), p = I(
+    (b) => {
+      t.getEditorState().read(() => {
+        const d = K();
+        b.target.tagName === "IMG" && Pe(d) && d.getNodes().length === 1 && t.dispatchCommand(
+          le,
+          b
+        );
+      });
+    },
+    [t]
+  );
+  A(() => {
+    let b = !0;
+    const d = t.getRootElement(), j = De(
+      t.registerUpdateListener(({ editorState: z }) => {
+        b && C(z.read(() => K()));
+      }),
+      t.registerCommand(
+        je,
+        (z, fe) => (T.current = fe, !1),
+        L
+      ),
+      t.registerCommand(
+        Re,
+        w,
+        L
+      ),
+      t.registerCommand(
+        le,
+        w,
+        L
+      ),
+      t.registerCommand(
+        Oe,
+        (z) => z.target === E.current ? (alert("s"), z.preventDefault(), !0) : !1,
+        L
+      ),
+      t.registerCommand(
+        ze,
+        s,
+        L
+      ),
+      t.registerCommand(
+        Le,
+        s,
+        L
+      ),
+      t.registerCommand($e, D, L),
+      t.registerCommand(
+        Ae,
+        x,
+        L
+      )
+    );
+    return d == null || d.addEventListener("contextmenu", p), () => {
+      b = !1, j(), d == null || d.removeEventListener("contextmenu", p);
+    };
+  }, [
+    O,
+    t,
+    l,
+    c,
+    o,
+    s,
+    D,
+    x,
+    w,
+    p,
+    m
+  ]);
+  const f = () => {
+    t.update(() => {
+      const b = ee(o);
+      Y(b) && b.setShowCaption(!0);
+    });
+  }, H = (b, d) => {
+    setTimeout(() => {
+      y(!1);
+    }, 200), t.update(() => {
+      const j = ee(o);
+      Y(j) && j.setWidthAndHeight(b, d);
+    });
+  }, me = () => {
+    y(!0);
+  }, pe = c && k(S) && !l, Z = (c || l) && u;
+  return /* @__PURE__ */ i.jsx(Se, { fallback: null, children: /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+    /* @__PURE__ */ i.jsx("div", { draggable: pe, children: W ? /* @__PURE__ */ i.jsx(ut, {}) : /* @__PURE__ */ i.jsx(
+      ct,
+      {
+        className: Z ? `focused ${k(S) ? "draggable" : ""}` : null,
+        src: e,
+        altText: n,
+        imageRef: E,
+        width: h,
+        height: P,
+        maxWidth: v,
+        onError: () => r(!0)
+      }
+    ) }),
+    g && /* @__PURE__ */ i.jsx("div", { className: "image-caption-container", children: /* @__PURE__ */ i.jsxs(
+      it,
+      {
+        initialEditor: M,
+        initialNodes: [
+          Te,
+          We,
+          Ie,
+          ke,
+          Ne,
+          Me
+        ],
+        children: [
+          /* @__PURE__ */ i.jsx(Xe, {}),
+          /* @__PURE__ */ i.jsx(
+            Ce,
+            {
+              contentEditable: /* @__PURE__ */ i.jsx(
+                xe,
+                {
+                  "aria-placeholder": "Enter a caption...",
+                  placeholder: () => /* @__PURE__ */ i.jsx("span", { children: "Enter a caption..." }),
+                  className: "ImageNode__contentEditable"
+                }
+              ),
+              ErrorBoundary: _e
+            }
+          ),
+          /* @__PURE__ */ i.jsx(ye, { onChange: (b) => console.log("e") }),
+          /* @__PURE__ */ i.jsx(ve, {}),
+          /* @__PURE__ */ i.jsx(Ee, { namespace: we.namespace })
+        ]
+      }
+    ) }),
+    _ && k(S) && Z && /* @__PURE__ */ i.jsx(
+      lt,
+      {
+        showCaption: g,
+        setShowCaption: f,
+        editor: t,
+        buttonRef: N,
+        imageRef: E,
+        maxWidth: v,
+        onResizeStart: me,
+        onResizeEnd: H,
+        captionsEnabled: !W && R
+      }
+    )
+  ] }) });
+}
+export {
+  le as RIGHT_CLICK_IMAGE_COMMAND,
+  Et as default
+};
+//# sourceMappingURL=index-9ce51b54.js.map