reactjs-tiptap-editor 0.4.2 → 1.0.1

package/lib/bubble-extra.js

@@ -1,631 +0,0 @@
-import { jsxs as p, jsx as t, Fragment as v } from "react/jsx-runtime";
-import { useState as y, useRef as O, useCallback as w, useEffect as k, useMemo as D, Fragment as G } from "react";
-import { t as Z, u as J, A as S, v as Q, w as X, x as Y, B as R, y as ee, K as W, aj as ae, ak as P, al as te, am as U, an as se, ao as le } from "./RichTextEditor-DGcKEUGr.js";
-import { Mermaid as j } from "./Mermaid.js";
-import { s as re, i as ne } from "./shortId-WJVkrvml.js";
-import { T as ie } from "./textarea-aPtytkDx.js";
-import { u as z } from "./index-LmrOdnen.js";
-import { E as N, t as de } from "./Excalidraw-CVWz2Vyn.js";
-import { T as K, F as he } from "./Twitter-BFULyqdR.js";
-import ue from "katex";
-import { HelpCircle as me, Pencil as xe, Trash2 as fe } from "lucide-react";
-import { Katex as A } from "./Katex.js";
-import { C as ge, D as _ } from "./Drawer-CaAfmqNo.js";
-import { Editor as be, makeDropdownToolbar as pe } from "easydrawer";
-const q = `graph TB
-a-->b`, we = ({ editor: e, attrs: a, extension: o }) => {
-  const { alt: s, align: n } = a, [r, i] = y(decodeURIComponent(s ?? q)), [l, h] = y(""), [m, x] = y(!1), g = O(null), [f, M] = y(null), T = o == null ? void 0 : o.options.upload, L = w(
-    (b) => {
-      b && import("mermaid").then((B) => {
-        M(B.default);
-      });
-    },
-    []
-  ), I = async (b) => {
-    try {
-      const { svg: B } = await f.render("mermaid-svg", b);
-      h(B);
-    } catch {
-      h("");
-    }
-  }, $ = () => {
-    f.initialize({
-      darkMode: !1,
-      startOnLoad: !1,
-      // fontFamily:'',
-      fontSize: 12,
-      theme: "base"
-    }), I(r);
-  };
-  return k(() => {
-    f && m && $();
-  }, [f, m]), k(() => {
-    f && m && I(r);
-  }, [f, r]), /* @__PURE__ */ p(
-    Z,
-    {
-      onOpenChange: x,
-      open: m,
-      children: [
-        /* @__PURE__ */ t(J, { asChild: !0, children: /* @__PURE__ */ t(
-          S,
-          {
-            action: () => x(!0),
-            icon: "Pencil",
-            tooltip: "Edit Mermaid"
-          }
-        ) }),
-        /* @__PURE__ */ p(Q, { className: "richtext-z-[99999] !richtext-max-w-[1300px]", children: [
-          /* @__PURE__ */ t(X, { children: "Edit Mermaid" }),
-          /* @__PURE__ */ t(
-            "div",
-            {
-              ref: L,
-              style: { height: "100%", border: "1px solid hsl(var(--border))" },
-              children: /* @__PURE__ */ p("div", { className: "richtext-flex richtext-gap-[10px] richtext-rounded-[10px] richtext-p-[10px]", children: [
-                /* @__PURE__ */ t(
-                  ie,
-                  {
-                    autoFocus: !0,
-                    className: "richtext-flex-1",
-                    defaultValue: q,
-                    onChange: (b) => i(b.target.value),
-                    placeholder: "Text",
-                    required: !0,
-                    rows: 10,
-                    value: r,
-                    style: {
-                      color: "hsl(var(--richtext-foreground))"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ t(
-                  "div",
-                  {
-                    className: "richtext-flex richtext-flex-1 richtext-items-center richtext-justify-center richtext-rounded-[10px] richtext-p-[10px]",
-                    dangerouslySetInnerHTML: { __html: l },
-                    ref: g,
-                    style: { height: "100%", border: "1px solid hsl(var(--border))", minHeight: 500, background: "#fff" }
-                  }
-                )
-              ] })
-            }
-          ),
-          /* @__PURE__ */ t(Y, { children: /* @__PURE__ */ t(
-            R,
-            {
-              onClick: async () => {
-                if (r !== "") {
-                  if (r) {
-                    const b = g.current.querySelector("svg"), { width: B, height: V } = b.getBoundingClientRect(), u = `mermaid-${re()}.svg`;
-                    let c = ne(b.outerHTML);
-                    if (T) {
-                      const d = ee(c, u);
-                      c = await T(d);
-                    }
-                    e == null || e.chain().focus().setMermaid(
-                      {
-                        type: "mermaid",
-                        src: c,
-                        alt: encodeURIComponent(r),
-                        width: B,
-                        height: V
-                      },
-                      !!r
-                    ).run(), e == null || e.commands.setAlignImageMermaid(n);
-                  }
-                  x(!1);
-                }
-              },
-              type: "button",
-              children: "Save changes"
-            }
-          ) })
-        ] })
-      ]
-    }
-  );
-};
-function oe(e, a) {
-  const [o, s] = y(void 0);
-  return k(() => {
-    const n = () => {
-      const r = e.extensionManager.extensions.find((i) => i.name === a);
-      r && s(r);
-    };
-    return e.on("selectionUpdate", n), e.on("transaction", n), () => {
-      e.off("selectionUpdate", n), e.off("transaction", n);
-    };
-  }, [e, a]), o;
-}
-function ve({ item: e, disabled: a, editor: o }) {
-  var n;
-  const s = e.component;
-  return s ? /* @__PURE__ */ t(G, { children: e.type === "divider" ? /* @__PURE__ */ t(
-    te,
-    {
-      className: "!richtext-mx-1 !richtext-my-2 !richtext-h-[16px]",
-      orientation: "vertical"
-    }
-  ) : /* @__PURE__ */ t(
-    s,
-    {
-      ...e.componentProps,
-      disabled: a || ((n = e == null ? void 0 : e.componentProps) == null ? void 0 : n.disabled),
-      editor: o
-    }
-  ) }) : /* @__PURE__ */ t(v, {});
-}
-function ye(e) {
-  return e.type.name === "mermaid";
-}
-function Re(e) {
-  const { lang: a } = z(), o = W(e.editor, j.name), s = oe(e.editor, j.name), n = ({ editor: i }) => {
-    const { selection: l } = i.view.state, { $from: h, to: m } = l;
-    let x = !1;
-    return i.view.state.doc.nodesBetween(h.pos, m, (g) => {
-      if (ye(g))
-        return x = !0, !1;
-    }), x;
-  }, r = D(() => e.disabled ? [] : ae(e.editor), [e.disabled, e.editor, a]);
-  return /* @__PURE__ */ t(v, { children: /* @__PURE__ */ t(
-    P,
-    {
-      editor: e == null ? void 0 : e.editor,
-      shouldShow: n,
-      children: r != null && r.length ? /* @__PURE__ */ t("div", { className: "richtext-pointer-events-auto richtext-w-auto richtext-select-none richtext-rounded-sm !richtext-border richtext-border-neutral-200 richtext-bg-background richtext-px-3 richtext-py-2 richtext-shadow-sm richtext-transition-all dark:richtext-border-neutral-800", children: /* @__PURE__ */ t("div", { className: "richtext-relative richtext-flex richtext-h-[26px] richtext-flex-nowrap richtext-items-center richtext-justify-start richtext-whitespace-nowrap", children: r == null ? void 0 : r.map((i, l) => i.type === "edit" && (o != null && o.src) ? /* @__PURE__ */ t(
-        we,
-        {
-          attrs: o,
-          editor: e.editor,
-          extension: s
-        },
-        `bubbleMenu-mermaid-${l}`
-      ) : /* @__PURE__ */ t(
-        ve,
-        {
-          disabled: e.disabled,
-          editor: e.editor,
-          item: i
-        },
-        `bubbleMenu-mermaid-${l}`
-      )) }) }) : /* @__PURE__ */ t(v, {})
-    }
-  ) });
-}
-const C = /* @__PURE__ */ new Map();
-function Se(e) {
-  const a = e.options.element;
-  C.has("width") || C.set("width", a.clientWidth), C.has("width") && C.get("width") <= 0 && C.set("width", a.clientWidth);
-  const o = { attributes: !0, childList: !0, subtree: !0 }, s = function() {
-    C.set("width", a.clientWidth);
-  }, n = new MutationObserver(s);
-  return n.observe(a, o), e.on("destroy", () => {
-    n.disconnect();
-  }), { width: C.get("width") };
-}
-function Ue({ editor: e }) {
-  const { t: a } = z(), { width: o } = Se(e), s = W(e, N.name, {
-    defaultShowPicker: !1,
-    createUser: "",
-    width: 0,
-    height: 0
-  }), { defaultShowPicker: n, createUser: r, width: i, height: l } = s, h = w(
-    (f) => {
-      e.chain().updateAttributes(N.name, f).setNodeSelection(e.state.selection.from).focus().run();
-    },
-    [e]
-  ), m = w(() => {
-    de({ ...s, editor: e });
-  }, [e, s]), x = w(() => e.isActive(N.name), [e]), g = w(() => U(N.name, e), [e]);
-  return k(() => {
-    n && (m(), e.chain().updateAttributes(N.name, { defaultShowPicker: !1 }).focus().run());
-  }, [r, n, e, m]), /* @__PURE__ */ t(
-    P,
-    {
-      className: "bubble-menu",
-      editor: e,
-      pluginKey: "excalidraw-bubble-menu",
-      shouldShow: x,
-      options: {
-        // popperOptions: {
-        //   modifiers: [{ name: 'flip', enabled: false }],
-        // },
-        // offset: [-2, 16],
-        placement: "bottom-start",
-        offset: {
-          alignmentAxis: 6,
-          crossAxis: 6
-        }
-        // zIndex: 9999,
-        // onHidden: () => {
-        //   toggleVisible(false)
-        // },
-      },
-      children: /* @__PURE__ */ p("div", { className: "richtext-pointer-events-auto richtext-w-auto richtext-select-none richtext-rounded-sm !richtext-border richtext-border-neutral-200 richtext-bg-background richtext-px-3 richtext-py-2 richtext-shadow-sm richtext-transition-all dark:richtext-border-neutral-800", children: [
-        /* @__PURE__ */ t(
-          S,
-          {
-            action: m,
-            icon: "Pencil",
-            tooltip: a("editor.edit")
-          }
-        ),
-        /* @__PURE__ */ t(
-          se,
-          {
-            height: l,
-            maxWidth: o,
-            onOk: h,
-            width: i,
-            children: /* @__PURE__ */ t(
-              S,
-              {
-                icon: "Settings",
-                tooltip: a("editor.settings")
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ t(
-          S,
-          {
-            action: g,
-            icon: "Trash2",
-            tooltip: a("editor.delete")
-          }
-        )
-      ] })
-    }
-  );
-}
-function He({ editor: e, disabled: a }) {
-  const [o, s] = y(!1), { t: n } = z(), r = w(({ editor: h }) => h.isActive(K.name), []), i = (h) => {
-    e.commands.updateTweet({ src: h }), s(!1);
-  }, l = w(() => U(K.name, e), [e]);
-  return /* @__PURE__ */ t(v, { children: /* @__PURE__ */ t(
-    P,
-    {
-      editor: e,
-      shouldShow: r,
-      options: {
-        // popperOptions: {
-        //   modifiers: [{ name: 'flip', enabled: false }],
-        // },
-        // placement: 'bottom-start',
-        // offset: [-2, 16],
-        // zIndex: 9999,
-        // onHidden: () => {
-        //   setShowEdit(false);
-        // },
-        placement: "bottom-start",
-        offset: {
-          alignmentAxis: 6,
-          crossAxis: 6
-        }
-      },
-      children: a ? /* @__PURE__ */ t(v, {}) : /* @__PURE__ */ t(v, { children: o ? /* @__PURE__ */ t(
-        he,
-        {
-          editor: e,
-          onSetLink: i
-        }
-      ) : /* @__PURE__ */ t("div", { className: "richtext-flex richtext-items-center richtext-gap-2 richtext-rounded-lg !richtext-border richtext-border-neutral-200 richtext-bg-white richtext-p-2 richtext-shadow-sm dark:richtext-border-neutral-800 dark:richtext-bg-black", children: /* @__PURE__ */ p("div", { className: "richtext-flex richtext-flex-nowrap", children: [
-        /* @__PURE__ */ t(
-          S,
-          {
-            icon: "Pencil",
-            tooltip: n("editor.link.edit.tooltip"),
-            tooltipOptions: { sideOffset: 15 },
-            action: () => {
-              s(!0);
-            }
-          }
-        ),
-        /* @__PURE__ */ t(
-          S,
-          {
-            action: l,
-            icon: "Trash",
-            tooltip: n("editor.delete"),
-            tooltipOptions: { sideOffset: 15 }
-          }
-        )
-      ] }) }) })
-    }
-  ) });
-}
-function Ve({ editor: e, ...a }) {
-  const o = W(e, A.name, {
-    text: "",
-    defaultShowPicker: !1
-  }), { text: s, defaultShowPicker: n } = o, [r, i] = y(""), [l, h] = y(!1), m = w(() => e.isActive(A.name), [e]), x = w(() => U(A.name, e), [e]), g = w(() => {
-    e.chain().focus().setKatex({ text: r }).run(), h(!1);
-  }, [e, r]);
-  k(() => {
-    n && (h(!0), e.chain().updateAttributes(A.name, { defaultShowPicker: !1 }).focus().run());
-  }, [e, n, h]), k(() => {
-    l && i(s || "");
-  }, [l]);
-  const f = D(() => {
-    try {
-      return ue.renderToString(`${r}`);
-    } catch {
-      return r;
-    }
-  }, [r]), M = D(
-    () => `${r}`.trim() ? /* @__PURE__ */ t(
-      "span",
-      {
-        contentEditable: !1,
-        dangerouslySetInnerHTML: { __html: f || "" }
-      }
-    ) : null,
-    [r, f]
-  );
-  return /* @__PURE__ */ t(
-    P,
-    {
-      editor: e,
-      pluginKey: "Katex-bubble-menu",
-      shouldShow: m,
-      options: {
-        // popperOptions: {
-        //   modifiers: [{ name: 'flip', enabled: false }],
-        // },
-        // placement: 'bottom-start',
-        // offset: [-2, 16],
-        // zIndex: 9999,
-        // onHidden: () => {
-        //   toggleVisible(false);
-        // },
-        placement: "bottom-start",
-        offset: {
-          alignmentAxis: 6,
-          crossAxis: 6
-        }
-      },
-      children: a != null && a.disabled ? /* @__PURE__ */ t(v, {}) : /* @__PURE__ */ t("div", { className: "richtext-rounded-lg !richtext-border richtext-border-neutral-200 richtext-bg-white richtext-p-2 richtext-shadow-sm dark:richtext-border-neutral-800 dark:richtext-bg-black", children: l ? /* @__PURE__ */ p(v, { children: [
-        /* @__PURE__ */ t(
-          ie,
-          {
-            autoFocus: !0,
-            defaultValue: s,
-            onChange: (T) => i(T.target.value),
-            placeholder: "Formula text",
-            rows: 3,
-            style: { marginBottom: 8 },
-            value: r
-          }
-        ),
-        M && /* @__PURE__ */ t("div", { className: "richtext-my-[10px] richtext-overflow-auto richtext-whitespace-nowrap richtext-rounded-[6px] !richtext-border richtext-p-[10px]", children: M }),
-        /* @__PURE__ */ p("div", { className: "richtext-flex richtext-items-center richtext-justify-between richtext-gap-[6px]", children: [
-          /* @__PURE__ */ t(
-            R,
-            {
-              className: "richtext-flex-1",
-              onClick: g,
-              children: "Submit"
-            }
-          ),
-          /* @__PURE__ */ t(
-            "a",
-            {
-              href: "https://katex.org/docs/supported",
-              rel: "noreferrer noopener",
-              target: "_blank",
-              children: /* @__PURE__ */ t(me, { size: 16 })
-            }
-          )
-        ] })
-      ] }) : /* @__PURE__ */ p("div", { className: "richtext-flex richtext-items-center richtext-justify-center richtext-gap-[6px]", children: [
-        /* @__PURE__ */ t(
-          S,
-          {
-            action: () => h(!l),
-            tooltip: "Edit",
-            children: /* @__PURE__ */ t(xe, { size: 16 })
-          }
-        ),
-        /* @__PURE__ */ t(
-          S,
-          {
-            action: x,
-            tooltip: "Delete",
-            children: /* @__PURE__ */ t(fe, { size: 16 })
-          }
-        )
-      ] }) })
-    }
-  );
-}
-let E = !1;
-function Ce({ editor: e, attrs: a, extension: o }) {
-  const [s, n] = y(!1), r = O(null), i = O(null), { alt: l, align: h } = a, m = o == null ? void 0 : o.options.upload, x = () => {
-    (async () => {
-      const c = document.querySelector("#easydrawer");
-      c && (r.current = new be(c, {
-        wheelEventsEnabled: !1,
-        disableZoom: !0
-      }), i.current = pe(r.current), i.current.addDefaultToolWidgets(), r.current.loadFromSVG(decodeURIComponent(l)));
-    })();
-  };
-  k(() => {
-    s && setTimeout(() => {
-      x();
-    }, 200);
-  }, [s]);
-  const g = async () => {
-    if (r.current) {
-      const u = r.current.toSVG(), c = u.outerHTML, d = `drawer-${re()}.svg`;
-      let F = ne(u.outerHTML);
-      if (m) {
-        const ce = ee(F, d);
-        F = await m(ce);
-      }
-      e == null || e.chain().focus().setDrawer(
-        {
-          type: "drawer",
-          src: F,
-          alt: encodeURIComponent(c),
-          width: 426,
-          height: 212
-        },
-        !!c
-      ).run(), e == null || e.commands.setAlignImageDrawer(h);
-    }
-    n(!1);
-  }, f = (u) => {
-    const c = r.current.toolController.getPrimaryTools()[2], d = i.current.getWidgetById("pen-1");
-    c && d && (c.setColor(u), d.serializeState());
-  }, M = (u) => {
-    const c = r.current.toolController.getPrimaryTools()[2], d = i.current.getWidgetById("pen-1");
-    c && d && (c.setThickness(u), d.serializeState());
-  }, T = (u) => {
-    const c = r.current.toolController.getPrimaryTools()[3], d = i.current.getWidgetById("pen-2");
-    c && d && (c.setColor(u), d.serializeState());
-  }, L = (u) => {
-    const c = i.current.getWidgetById("shape");
-    c && c.setShapeType(u);
-  }, I = (u) => {
-    const c = r.current.toolController.getPrimaryTools()[5], d = i.current.getWidgetById("shape");
-    c && d && (c.setColor(u), d.serializeState());
-  }, $ = (u) => {
-    const c = r.current.toolController.getPrimaryTools()[5], d = i.current.getWidgetById("shape");
-    c && d && (c.setThickness(u), d.serializeState());
-  }, H = (u) => {
-    const c = r.current.toolController.getPrimaryTools()[5], d = i.current.getWidgetById("shape");
-    c && d && (c.setBorderColor(u), d.serializeState());
-  }, b = () => {
-    if (E) {
-      for (; r.current.history.redoStackSize > 0; )
-        r.current.history.redo();
-      E = !1;
-      return;
-    }
-    r.current.history.undo();
-  };
-  return /* @__PURE__ */ p(
-    Z,
-    {
-      onOpenChange: n,
-      open: s,
-      children: [
-        /* @__PURE__ */ t(J, { asChild: !0, children: /* @__PURE__ */ t(
-          S,
-          {
-            action: () => n(!0),
-            icon: "Pencil",
-            tooltip: "Edit Drawer"
-          }
-        ) }),
-        /* @__PURE__ */ p(Q, { className: "richtext-z-[99999] !richtext-max-w-[1300px]", children: [
-          /* @__PURE__ */ t(X, { children: "Edit Drawer" }),
-          /* @__PURE__ */ p("div", { style: { height: "100%", borderWidth: 1, background: "white", position: "relative" }, children: [
-            /* @__PURE__ */ t(
-              "div",
-              {
-                className: "richtext-size-full",
-                id: "easydrawer"
-              }
-            ),
-            /* @__PURE__ */ t(
-              ge,
-              {
-                changeBorderColorShape: H,
-                changeColorShape: I,
-                changeShape: L,
-                onClear: () => {
-                  if (!E) {
-                    for (; r.current.history.undoStackSize > 0; )
-                      b();
-                    E = !0;
-                  }
-                },
-                onRedo: () => {
-                  E || r.current.history.redo();
-                },
-                onThicknessChange: $,
-                onUndo: b,
-                refEditor: r,
-                setColorHighlight: T,
-                setColorPen: f,
-                setThicknessPen: M
-              }
-            )
-          ] }),
-          /* @__PURE__ */ t(Y, { children: /* @__PURE__ */ t(
-            R,
-            {
-              onClick: g,
-              type: "button",
-              children: "Save changes"
-            }
-          ) })
-        ] })
-      ]
-    }
-  );
-}
-function ke({ item: e, disabled: a, editor: o }) {
-  var n;
-  const s = e.component;
-  return s ? /* @__PURE__ */ t(G, { children: e.type === "divider" ? /* @__PURE__ */ t(
-    te,
-    {
-      className: "!richtext-mx-1 !richtext-my-2 !richtext-h-[16px]",
-      orientation: "vertical"
-    }
-  ) : /* @__PURE__ */ t(
-    s,
-    {
-      ...e.componentProps,
-      disabled: a || ((n = e == null ? void 0 : e.componentProps) == null ? void 0 : n.disabled),
-      editor: o
-    }
-  ) }) : /* @__PURE__ */ t(v, {});
-}
-function Me(e) {
-  return e.type.name === "drawer";
-}
-function je(e) {
-  const { lang: a } = z(), o = W(e.editor, _.name), s = oe(e.editor, _.name), n = ({ editor: i }) => {
-    const { selection: l } = i.view.state, { $from: h, to: m } = l;
-    let x = !1;
-    return i.view.state.doc.nodesBetween(h.pos, m, (g) => {
-      if (Me(g))
-        return x = !0, !1;
-    }), x;
-  }, r = D(() => e.disabled ? [] : le(e.editor), [e.disabled, e.editor, a]);
-  return /* @__PURE__ */ t(
-    P,
-    {
-      editor: e == null ? void 0 : e.editor,
-      shouldShow: n,
-      children: r != null && r.length ? /* @__PURE__ */ t("div", { className: "richtext-pointer-events-auto richtext-w-auto richtext-select-none richtext-rounded-sm !richtext-border richtext-border-neutral-200 richtext-bg-background richtext-px-3 richtext-py-2 richtext-shadow-sm richtext-transition-all dark:richtext-border-neutral-800", children: /* @__PURE__ */ t("div", { className: "richtext-relative richtext-flex richtext-h-[26px] richtext-flex-nowrap richtext-items-center richtext-justify-start richtext-whitespace-nowrap", children: r == null ? void 0 : r.map((i, l) => i.type === "edit" && (o != null && o.src) ? /* @__PURE__ */ t(
-        Ce,
-        {
-          attrs: o,
-          editor: e.editor,
-          extension: s
-        },
-        `bubbleMenu-drawer-${l}`
-      ) : /* @__PURE__ */ t(
-        ke,
-        {
-          disabled: e.disabled,
-          editor: e.editor,
-          item: i
-        },
-        `bubbleMenu-drawer-${l}`
-      )) }) }) : /* @__PURE__ */ t(v, {})
-    }
-  );
-}
-export {
-  je as BubbleMenuDrawer,
-  Ue as BubbleMenuExcalidraw,
-  Ve as BubbleMenuKatex,
-  Re as BubbleMenuMermaid,
-  He as BubbleMenuTwitter
-};