@code0-tech/pictor 0.0.0-mvp.40 → 0.0.0-mvp.42

package/dist/components/editor/Editor.js

@@ -1,59 +1,59 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import m from "react";
-import { createPortal as U } from "react-dom";
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import m, { isValidElement as ce } from "react";
+import { createPortal as H } from "react-dom";
 import "../../utils/contextStore.js";
-import { mergeCode0Props as X } from "../../utils/utils.js";
-import Y, { Prec as Z, keymap as $, ViewPlugin as ee, RangeSetBuilder as re, Decoration as E, EditorView as te, WidgetType as ie } from "@uiw/react-codemirror";
-import { json as ne, jsonParseLinter as oe } from "@codemirror/lang-json";
-import { linter as se } from "../../node_modules/@codemirror/lint/dist/index.js";
-import { syntaxTree as ae } from "../../node_modules/@codemirror/language/dist/index.js";
-import le from "../../node_modules/prettier/standalone.js";
-import ce from "../../node_modules/prettier/plugins/babel.js";
-import de from "../../node_modules/prettier/plugins/estree.js";
-import { createTheme as he } from "@uiw/codemirror-themes";
-import { tags as p, getStyleTags as ue } from "../../node_modules/@lezer/highlight/dist/index.js";
-import { hashToColor as f } from "../d-flow/DFlow.util.js";
+import { mergeCode0Props as ue } from "../../utils/utils.js";
+import de, { Prec as J, keymap as K, ViewPlugin as me, RangeSetBuilder as he, Decoration as F, EditorView as fe, WidgetType as ge } from "@uiw/react-codemirror";
+import { json as pe, jsonParseLinter as ye } from "@codemirror/lang-json";
+import { syntaxTree as L } from "@codemirror/language";
+import { linter as be } from "@codemirror/lint";
+import ve from "../../node_modules/prettier/standalone.js";
+import we from "../../node_modules/prettier/plugins/babel.js";
+import Se from "../../node_modules/prettier/plugins/estree.js";
+import { createTheme as Ce } from "@uiw/codemirror-themes";
+import { tags as b, getStyleTags as Te } from "../../node_modules/@lezer/highlight/dist/index.js";
+import { hashToColor as v } from "../d-flow/DFlow.util.js";
 import '../../assets/components/editor/Editor.styles.css';/* empty css                   */
-import { Badge as g } from "../badge/Badge.js";
-import { IconExclamationCircle as me, IconAlertTriangle as ge, IconAlertSquareRounded as pe, IconInfoCircle as fe, IconSpace as ye, IconArrowBarToRight as be, IconCornerDownLeft as ve } from "@tabler/icons-react";
-import { Text as s } from "../text/Text.js";
-import { Flex as v } from "../flex/Flex.js";
-import { Tooltip as w, TooltipTrigger as x, TooltipPortal as T, TooltipContent as C, TooltipArrow as S } from "../tooltip/Tooltip.js";
-import { ScrollArea as we, ScrollAreaViewport as xe, ScrollAreaScrollbar as B, ScrollAreaThumb as M } from "../scroll-area/ScrollArea.js";
-import { autocompletion as Te, acceptCompletion as Ce } from "@codemirror/autocomplete";
-function Se(o, t, c) {
-  return (t = Ae(t)) in o ? Object.defineProperty(o, t, { value: c, enumerable: !0, configurable: !0, writable: !0 }) : o[t] = c, o;
+import { Badge as y } from "../badge/Badge.js";
+import { IconExclamationCircle as xe, IconAlertTriangle as Ae, IconAlertSquareRounded as ke, IconInfoCircle as Ee, IconSpace as ze, IconArrowBarToRight as Pe, IconCornerDownLeft as je } from "@tabler/icons-react";
+import { Text as a } from "../text/Text.js";
+import { Flex as k } from "../flex/Flex.js";
+import { Tooltip as E, TooltipTrigger as z, TooltipPortal as P, TooltipContent as j, TooltipArrow as V } from "../tooltip/Tooltip.js";
+import { ScrollArea as Ve, ScrollAreaViewport as Ne, ScrollAreaScrollbar as G, ScrollAreaThumb as Q } from "../scroll-area/ScrollArea.js";
+import { autocompletion as Ie, acceptCompletion as Re, startCompletion as N } from "@codemirror/autocomplete";
+function Be(i, r, h) {
+  return (r = Me(r)) in i ? Object.defineProperty(i, r, { value: h, enumerable: !0, configurable: !0, writable: !0 }) : i[r] = h, i;
 }
-function Ae(o) {
-  var t = ke(o, "string");
-  return typeof t == "symbol" ? t : t + "";
+function Me(i) {
+  var r = qe(i, "string");
+  return typeof r == "symbol" ? r : r + "";
 }
-function ke(o, t) {
-  if (typeof o != "object" || !o) return o;
-  var c = o[Symbol.toPrimitive];
-  if (c !== void 0) {
-    var d = c.call(o, t);
-    if (typeof d != "object") return d;
+function qe(i, r) {
+  if (typeof i != "object" || !i) return i;
+  var h = i[Symbol.toPrimitive];
+  if (h !== void 0) {
+    var g = h.call(i, r);
+    if (typeof g != "object") return g;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (t === "string" ? String : Number)(o);
+  return (r === "string" ? String : Number)(i);
 }
-class R extends ie {
-  constructor(t, c) {
-    super(), this.type = t, this.rawValue = c;
+class X extends ge {
+  constructor(r, h) {
+    super(), this.type = r, this.rawValue = h;
   }
   toDOM() {
-    const t = document.createElement("span");
-    return t.className = "cm-react-anchor", t.dataset.type = this.type, t.dataset.value = this.rawValue, t.contentEditable = "false", t.style.pointerEvents = "none", t.style.verticalAlign = "middle", t.style.display = "inline-block", t;
+    const r = document.createElement("span");
+    return r.className = "cm-react-anchor", r.dataset.type = this.type, r.dataset.value = this.rawValue, r.contentEditable = "false", r.style.pointerEvents = "none", r.style.verticalAlign = "middle", r.style.display = "inline-block", r;
   }
   ignoreEvent() {
     return !0;
   }
-  eq(t) {
-    return t.type === this.type && t.rawValue === this.rawValue;
+  eq(r) {
+    return r.type === this.type && r.rawValue === this.rawValue;
   }
 }
-const ze = he({
+const Fe = Ce({
   theme: "light",
   settings: {
     background: "transparent",
@@ -70,194 +70,269 @@ const ze = he({
     lineHighlight: "rgba(255,255,255, 0.1)"
   },
   styles: [{
-    tag: p.squareBracket,
-    color: f("squareBracket")
+    tag: b.squareBracket,
+    color: v("squareBracket")
   }, {
-    tag: p.bracket,
-    color: f("bracket")
+    tag: b.bracket,
+    color: v("bracket")
   }, {
-    tag: p.string,
-    color: f("Text")
+    tag: b.string,
+    color: v("Text")
   }, {
-    tag: p.bool,
-    color: f("Boolean")
+    tag: b.bool,
+    color: v("Boolean")
   }, {
-    tag: p.number,
-    color: f("Number")
+    tag: b.number,
+    color: v("Number")
   }]
-}), Ye = (o) => {
+}), Oe = (i) => ce(i) || typeof i == "string" || typeof i == "number" || Array.isArray(i), ct = (i) => {
   const {
-    language: t,
-    tokenizer: c,
-    tokenHighlights: d,
-    suggestions: N,
-    onChange: F,
-    extensions: V = [],
-    initialValue: A,
-    formValidation: O,
-    disabled: k,
-    readonly: q,
-    ..._
-  } = o, [W, z] = m.useState(""), [D, H] = m.useState(/* @__PURE__ */ new Map()), [a, J] = m.useState([]), j = m.useRef(null);
-  m.useEffect(() => {
+    language: r,
+    tokenizer: h,
+    tokenHighlights: g,
+    suggestions: w,
+    onChange: O,
+    extensions: W = [],
+    initialValue: S,
+    formValidation: Y,
+    disabled: I,
+    showTooltips: Z = !0,
+    showValidation: $ = !0,
+    readonly: U,
+    basicSetup: ee,
+    customSuggestionComponent: D = !1,
+    ...te
+  } = i, [re, R] = m.useState(""), B = m.useRef(null), [oe, ne] = m.useState(/* @__PURE__ */ new Map()), [c, ie] = m.useState([]), [f, p] = m.useState(null), C = m.useRef(null);
+  r === "json" && m.useEffect(() => {
     (async () => {
       try {
-        const e = await le.format(JSON.stringify(A) ?? "", {
-          parser: t,
-          plugins: [ce, de],
+        const e = await ve.format(JSON.stringify(S) ?? "", {
+          parser: r,
+          plugins: [we, Se],
           printWidth: 1
         });
-        z(e);
+        R(e);
       } catch {
-        z(JSON.stringify(A) ?? "");
+        R(JSON.stringify(S) ?? "");
       }
     })();
-  }, [A]);
-  const K = m.useMemo(() => {
-    const e = [...V];
-    N && (e.push(Te({
-      override: [N]
-    })), e.push(Z.highest($.of([{
-      key: "Tab",
-      run: Ce
-    }])))), t === "json" && (e.push(ne()), e.push(se(oe(), {
-      markerFilter: (i) => (J(i), [])
-    })));
-    const l = ee.fromClass(class {
-      constructor(i) {
-        Se(this, "decorations", void 0), this.decorations = this.build(i);
+  }, [S]);
+  const se = m.useMemo(() => {
+    const e = [...W];
+    if (w) {
+      const o = (l) => {
+        const u = w(l);
+        if (u && Oe(u)) {
+          const d = l.view?.coordsAtPos(l.pos);
+          return d && p({
+            component: u,
+            position: {
+              top: d.bottom,
+              left: d.left
+            }
+          }), null;
+        }
+        return p(null), u;
+      };
+      e.push(Ie({
+        ...D ? {
+          override: [o]
+        } : {
+          override: [w]
+        }
+      })), e.push(J.highest(K.of([{
+        key: "Tab",
+        run: Re
+      }]))), D && e.push(J.highest(K.of([{
+        key: "ArrowUp",
+        run: (l) => (f || N(l), !0)
+      }, {
+        key: "ArrowDown",
+        run: (l) => f ? (B?.current?.querySelector("[tabindex]")?.focus(), !0) : (N(l), !0)
+      }])));
+    }
+    r === "json" ? (e.push(pe()), e.push(be(ye(), {
+      markerFilter: (o) => (ie(o), [])
+    }))) : r && e.push(r);
+    const n = me.fromClass(class {
+      constructor(o) {
+        Be(this, "decorations", void 0), this.decorations = this.build(o);
       }
-      update(i) {
-        (i.docChanged || i.viewportChanged) && (this.decorations = this.build(i.view));
+      update(o) {
+        (o.docChanged || o.viewportChanged) && (this.decorations = this.build(o.view));
       }
-      build(i) {
-        const h = new re(), G = Object.keys(d || {});
-        return ae(i.state).iterate({
-          enter: (u) => {
-            const y = i.state.doc.sliceString(u.from, u.to);
-            if (y.includes(`
+      build(o) {
+        const l = new he(), u = Object.keys(g || {});
+        return L(o.state).iterate({
+          enter: (d) => {
+            const x = o.state.doc.sliceString(d.from, d.to);
+            if (x.includes(`
 `)) return;
-            const P = c?.(y), Q = ue(u)?.tags.map((b) => "name" in b ? b.name : void 0), I = G.find((b) => Q?.includes(b));
-            I && !P ? h.add(u.from, u.to, E.replace({
-              widget: new R(I, y),
+            const q = h?.(x), ae = Te(d)?.tags.map((A) => "name" in A ? A.name : void 0), _ = u.find((A) => ae?.includes(A));
+            _ && !q ? l.add(d.from, d.to, F.replace({
+              widget: new X(_, x),
               point: !0
-            })) : P && h.add(u.from, u.to, E.replace({
-              widget: new R(P, y),
+            })) : q && l.add(d.from, d.to, F.replace({
+              widget: new X(q, x),
               point: !0
             }));
           }
-        }), h.finish();
+        }), l.finish();
       }
     }, {
-      decorations: (i) => i.decorations
+      decorations: (o) => o.decorations
     });
-    return e.push(l), e.push(te.atomicRanges.of((i) => i.plugin(l)?.decorations || E.none)), e;
-  }, [t, c, d, V]), L = m.useCallback((e) => {
-    (e.docChanged || e.viewportChanged || e.selectionSet) && window.requestAnimationFrame(() => {
-      const l = j.current?.querySelectorAll(".cm-react-anchor"), i = /* @__PURE__ */ new Map();
-      l?.forEach((h) => {
-        i.set(h, {
-          type: h.dataset.type,
-          value: h.dataset.value
+    return e.push(n), e.push(fe.atomicRanges.of((o) => o.plugin(n)?.decorations || F.none)), e;
+  }, [r, h, g, W, w, B.current]), [T, le] = m.useState(null), M = m.useCallback((e) => {
+    if (e.docChanged || e.viewportChanged || e.selectionSet) {
+      if (e.view) {
+        const {
+          from: n,
+          to: o
+        } = e.state?.selection?.main ?? {
+          from: 0,
+          to: 0
+        };
+        let l = 0;
+        L(e.state).iterate({
+          from: n,
+          to: o,
+          enter: (u) => {
+            u.from >= n && u.to <= o && l++;
+          }
+        }), e.selectionSet && l < 2 ? (n === o && n !== T?.from ? p(null) : n === o && n === T?.from && n != 0 ? p((u) => u) : n === o && n === T?.from && n == 0 && p(null), N(e.view)) : e.selectionSet && l >= 2 && p(null), le({
+          from: n,
+          to: o
         });
-      }), H(i);
-    });
-  }, []);
-  return /* @__PURE__ */ n(we, { h: "100%", type: "scroll", children: [
-    /* @__PURE__ */ r("div", { className: "editor__diagnostics", children: /* @__PURE__ */ n(v, { style: {
+      } else e.selectionSet && (p(null), N(e.view));
+      window.requestAnimationFrame(() => {
+        const n = C.current?.querySelectorAll(".cm-react-anchor"), o = /* @__PURE__ */ new Map();
+        n?.forEach((l) => {
+          o.set(l, {
+            type: l.dataset.type,
+            value: l.dataset.value
+          });
+        }), ne(o);
+      });
+    }
+  }, [T]);
+  return m.useEffect(() => {
+    if (C.current) {
+      const e = window.setTimeout(() => {
+        const n = new CustomEvent("scroll");
+        C.current?.dispatchEvent(n), M({
+          docChanged: !0,
+          viewportChanged: !0,
+          selectionSet: !1
+        });
+      }, 50);
+      return () => clearTimeout(e);
+    }
+    return () => {
+    };
+  }, [M]), /* @__PURE__ */ s(Ve, { h: "100%", type: "scroll", children: [
+    $ && /* @__PURE__ */ t("div", { className: "editor__diagnostics", children: /* @__PURE__ */ s(k, { style: {
       gap: "0.35rem",
       textWrap: "nowrap"
     }, align: "center", children: [
-      a.filter((e) => e.severity == "error").length > 0 ? /* @__PURE__ */ n(w, { children: [
-        /* @__PURE__ */ r(x, { asChild: !0, children: /* @__PURE__ */ n(g, { color: "red", children: [
-          /* @__PURE__ */ r(me, { size: 13 }),
-          /* @__PURE__ */ r(s, { children: a.filter((e) => e.severity == "error").length })
+      c.filter((e) => e.severity == "error").length > 0 ? /* @__PURE__ */ s(E, { children: [
+        /* @__PURE__ */ t(z, { asChild: !0, children: /* @__PURE__ */ s(y, { color: "red", children: [
+          /* @__PURE__ */ t(xe, { size: 13 }),
+          /* @__PURE__ */ t(a, { children: c.filter((e) => e.severity == "error").length })
         ] }) }),
-        /* @__PURE__ */ r(T, { children: /* @__PURE__ */ n(C, { side: "bottom", children: [
-          /* @__PURE__ */ r(S, {}),
-          a.filter((e) => e.severity == "error").map((e) => /* @__PURE__ */ r(s, { size: "xs", children: e.message }, e.message))
+        /* @__PURE__ */ t(P, { children: /* @__PURE__ */ s(j, { side: "bottom", children: [
+          /* @__PURE__ */ t(V, {}),
+          c.filter((e) => e.severity == "error").map((e) => /* @__PURE__ */ t(a, { size: "xs", children: e.message }, e.message))
         ] }) })
       ] }) : null,
-      a.filter((e) => e.severity == "warning").length > 0 ? /* @__PURE__ */ n(w, { children: [
-        /* @__PURE__ */ r(x, { asChild: !0, children: /* @__PURE__ */ n(g, { color: "orange", children: [
-          /* @__PURE__ */ r(ge, { size: 13 }),
-          /* @__PURE__ */ r(s, { children: a.filter((e) => e.severity == "warning").length })
+      c.filter((e) => e.severity == "warning").length > 0 ? /* @__PURE__ */ s(E, { children: [
+        /* @__PURE__ */ t(z, { asChild: !0, children: /* @__PURE__ */ s(y, { color: "orange", children: [
+          /* @__PURE__ */ t(Ae, { size: 13 }),
+          /* @__PURE__ */ t(a, { children: c.filter((e) => e.severity == "warning").length })
         ] }) }),
-        /* @__PURE__ */ r(T, { children: /* @__PURE__ */ n(C, { side: "bottom", children: [
-          /* @__PURE__ */ r(S, {}),
-          a.filter((e) => e.severity == "warning").map((e) => /* @__PURE__ */ r(s, { size: "xs", children: e.message }, e.message))
+        /* @__PURE__ */ t(P, { children: /* @__PURE__ */ s(j, { side: "bottom", children: [
+          /* @__PURE__ */ t(V, {}),
+          c.filter((e) => e.severity == "warning").map((e) => /* @__PURE__ */ t(a, { size: "xs", children: e.message }, e.message))
         ] }) })
       ] }) : null,
-      a.filter((e) => e.severity == "info").length > 0 ? /* @__PURE__ */ n(w, { children: [
-        /* @__PURE__ */ r(x, { asChild: !0, children: /* @__PURE__ */ n(g, { color: "#9ca3af", children: [
-          /* @__PURE__ */ r(pe, { size: 13 }),
-          /* @__PURE__ */ r(s, { children: a.filter((e) => e.severity == "info").length })
+      c.filter((e) => e.severity == "info").length > 0 ? /* @__PURE__ */ s(E, { children: [
+        /* @__PURE__ */ t(z, { asChild: !0, children: /* @__PURE__ */ s(y, { color: "#9ca3af", children: [
+          /* @__PURE__ */ t(ke, { size: 13 }),
+          /* @__PURE__ */ t(a, { children: c.filter((e) => e.severity == "info").length })
         ] }) }),
-        /* @__PURE__ */ r(T, { children: /* @__PURE__ */ n(C, { side: "bottom", children: [
-          /* @__PURE__ */ r(S, {}),
-          a.filter((e) => e.severity == "info").map((e) => /* @__PURE__ */ r(s, { size: "xs", children: e.message }, e.message))
+        /* @__PURE__ */ t(P, { children: /* @__PURE__ */ s(j, { side: "bottom", children: [
+          /* @__PURE__ */ t(V, {}),
+          c.filter((e) => e.severity == "info").map((e) => /* @__PURE__ */ t(a, { size: "xs", children: e.message }, e.message))
         ] }) })
       ] }) : null,
-      a.filter((e) => e.severity == "hint").length > 0 ? /* @__PURE__ */ n(w, { children: [
-        /* @__PURE__ */ r(x, { asChild: !0, children: /* @__PURE__ */ n(g, { color: "#3b82f6", children: [
-          /* @__PURE__ */ r(fe, { size: 13 }),
-          /* @__PURE__ */ r(s, { children: a.filter((e) => e.severity == "hint").length })
+      c.filter((e) => e.severity == "hint").length > 0 ? /* @__PURE__ */ s(E, { children: [
+        /* @__PURE__ */ t(z, { asChild: !0, children: /* @__PURE__ */ s(y, { color: "#3b82f6", children: [
+          /* @__PURE__ */ t(Ee, { size: 13 }),
+          /* @__PURE__ */ t(a, { children: c.filter((e) => e.severity == "hint").length })
         ] }) }),
-        /* @__PURE__ */ r(T, { children: /* @__PURE__ */ n(C, { side: "bottom", children: [
-          /* @__PURE__ */ r(S, {}),
-          a.filter((e) => e.severity == "hint").map((e) => /* @__PURE__ */ r(s, { size: "xs", children: e.message }, e.message))
+        /* @__PURE__ */ t(P, { children: /* @__PURE__ */ s(j, { side: "bottom", children: [
+          /* @__PURE__ */ t(V, {}),
+          c.filter((e) => e.severity == "hint").map((e) => /* @__PURE__ */ t(a, { size: "xs", children: e.message }, e.message))
         ] }) })
       ] }) : null
     ] }) }),
-    /* @__PURE__ */ r("div", { className: "editor__tools", children: /* @__PURE__ */ n(v, { style: {
+    Z && /* @__PURE__ */ t("div", { className: "editor__tools", children: /* @__PURE__ */ s(k, { style: {
       gap: "0.35rem",
       textWrap: "nowrap"
     }, align: "center", children: [
-      /* @__PURE__ */ n(v, { style: {
+      /* @__PURE__ */ s(k, { style: {
         gap: "0.35rem"
       }, align: "center", children: [
-        /* @__PURE__ */ n(g, { color: "secondary", border: !0, children: [
-          /* @__PURE__ */ r(s, { children: navigator !== void 0 && /Mac/.test(navigator.userAgent) ? "⌃" : "strg" }),
-          /* @__PURE__ */ r(s, { children: "+" }),
-          /* @__PURE__ */ r(ye, { size: 13 })
+        /* @__PURE__ */ s(y, { color: "secondary", border: !0, children: [
+          /* @__PURE__ */ t(a, { children: navigator !== void 0 && /Mac/.test(navigator.userAgent) ? "⌃" : "strg" }),
+          /* @__PURE__ */ t(a, { children: "+" }),
+          /* @__PURE__ */ t(ze, { size: 13 })
         ] }),
-        /* @__PURE__ */ r(s, { children: "to show" })
+        /* @__PURE__ */ t(a, { children: "to show" })
       ] }),
-      /* @__PURE__ */ r(s, { children: "and" }),
-      /* @__PURE__ */ n(v, { style: {
+      /* @__PURE__ */ t(a, { children: "and" }),
+      /* @__PURE__ */ s(k, { style: {
         gap: "0.35rem"
       }, align: "center", children: [
-        /* @__PURE__ */ n(g, { color: "secondary", border: !0, children: [
-          /* @__PURE__ */ r(be, { size: 13 }),
-          /* @__PURE__ */ r(s, { children: "or" }),
-          /* @__PURE__ */ r(ve, { size: 13 })
+        /* @__PURE__ */ s(y, { color: "secondary", border: !0, children: [
+          /* @__PURE__ */ t(Pe, { size: 13 }),
+          /* @__PURE__ */ t(a, { children: "or" }),
+          /* @__PURE__ */ t(je, { size: 13 })
         ] }),
-        /* @__PURE__ */ r(s, { children: "to select" })
+        /* @__PURE__ */ t(a, { children: "to select" })
       ] }),
-      /* @__PURE__ */ r(s, { children: "suggestions" })
+      /* @__PURE__ */ t(a, { children: "suggestions" })
     ] }) }),
-    /* @__PURE__ */ r(xe, { asChild: !0, children: /* @__PURE__ */ n("div", { ref: j, ...X("editor", _), children: [
-      /* @__PURE__ */ r(Y, { width: "100%", height: "100%", value: W, theme: ze, readOnly: k || q, editable: !k, extensions: K, "aria-disabled": k, className: "editor__control", onChange: (e) => {
-        z(e);
-        try {
-          const l = JSON.parse(e);
-          F?.(l), O?.setValue(l);
-        } catch {
-        }
-      }, onUpdate: L }),
-      d && Array.from(D.entries()).map(([e, l]) => {
-        const i = d[l.type];
-        return i ? U(/* @__PURE__ */ r("div", { style: {
+    /* @__PURE__ */ t(Ne, { asChild: !0, children: /* @__PURE__ */ s("div", { ref: C, ...ue("editor", te), children: [
+      /* @__PURE__ */ t(de, { width: "100%", height: "100%", value: r === "json" ? re : S, theme: Fe, readOnly: I || U, editable: !I, extensions: se, "aria-disabled": I, className: "editor__control", onChange: (e) => {
+        if (R(e), r === "json")
+          try {
+            const n = JSON.parse(e);
+            O?.(n), Y?.setValue(n);
+          } catch {
+          }
+        else
+          O?.(e);
+      }, onUpdate: M, basicSetup: ee }),
+      g && Array.from(oe.entries()).map(([e, n]) => {
+        const o = g[n.type];
+        return o ? H(/* @__PURE__ */ t("div", { style: {
           display: "contents"
-        }, children: i({
-          content: l.value
-        }) }, e.outerHTML + l.value), e) : null;
-      })
+        }, children: o({
+          content: n.value
+        }) }, e.outerHTML + n.value), e) : null;
+      }),
+      f && H(/* @__PURE__ */ t("div", { ref: B, style: {
+        position: "fixed",
+        top: f.position.top,
+        left: f.position.left,
+        zIndex: 9999
+      }, children: f.component }, f.position.top + "-" + f.position.left), document.body)
     ] }) }),
-    /* @__PURE__ */ r(B, { orientation: "vertical", children: /* @__PURE__ */ r(M, {}) }),
-    /* @__PURE__ */ r(B, { orientation: "horizontal", children: /* @__PURE__ */ r(M, {}) })
+    /* @__PURE__ */ t(G, { orientation: "vertical", children: /* @__PURE__ */ t(Q, {}) }),
+    /* @__PURE__ */ t(G, { orientation: "horizontal", children: /* @__PURE__ */ t(Q, {}) })
   ] });
 };
 export {
-  Ye as Editor
+  ct as Editor
 };

package/dist/components/menu/Menu.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { Code0ComponentProps, Color } from '../../utils/types';
-import { DropdownMenuArrowProps, DropdownMenuContentProps, DropdownMenuGroupProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuPortalProps, DropdownMenuProps, DropdownMenuSeparatorProps, DropdownMenuSubContentProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuTriggerProps } from '@radix-ui/react-dropdown-menu';
+import { DropdownMenuArrowProps, DropdownMenuCheckboxItemProps, DropdownMenuContentProps, DropdownMenuGroupProps, DropdownMenuItemIndicatorProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuPortalProps, DropdownMenuProps, DropdownMenuSeparatorProps, DropdownMenuSubContentProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuTriggerProps } from '@radix-ui/react-dropdown-menu';
 export type MenuProps = Code0ComponentProps & DropdownMenuProps;
 export type MenuTriggerProps = Code0ComponentProps & DropdownMenuTriggerProps;
 export type MenuPortalProps = Code0ComponentProps & DropdownMenuPortalProps;
@@ -9,6 +9,8 @@ export type MenuContentProps = Code0ComponentProps & DropdownMenuContentProps &
 };
 export type MenuLabelProps = Code0ComponentProps & DropdownMenuLabelProps;
 export type MenuItemProps = Code0ComponentProps & DropdownMenuItemProps;
+export type MenuCheckboxItemProps = Code0ComponentProps & DropdownMenuCheckboxItemProps;
+export type MenuItemIndicatorProps = Code0ComponentProps & DropdownMenuItemIndicatorProps;
 export type MenuGroupProps = Code0ComponentProps & DropdownMenuGroupProps;
 export type MenuSubProps = Code0ComponentProps & DropdownMenuSubProps;
 export type MenuSubTriggerProps = Code0ComponentProps & DropdownMenuSubTriggerProps;
@@ -28,4 +30,6 @@ export declare const MenuSub: React.FC<MenuSubProps>;
 export declare const MenuSubTrigger: React.FC<MenuSubTriggerProps>;
 export declare const MenuSubContent: React.FC<MenuSubContentProps>;
 export declare const MenuSeparator: React.FC<MenuSeparatorProps>;
+export declare const MenuCheckboxItem: React.FC<MenuCheckboxItemProps>;
+export declare const MenuItemIndicator: React.FC<MenuItemIndicatorProps>;
 export declare const MenuArrow: React.FC<MenuArrowProps>;