@vizel/react 0.0.1-alpha.1 → 0.0.1-alpha.6

package/dist/index14.js

@@ -1,11 +1,91 @@
-import { jsx as i } from "react/jsx-runtime";
-import { Icon as s } from "@iconify/react";
-import { vizelDefaultIconIds as I } from "@vizel/core";
-import { useVizelIconContext as m } from "./index3.js";
-function x({ name: o, customIcons: t, style: n, ...c }) {
-  const { customIcons: r } = m(), e = t?.[o] ?? r?.[o] ?? I[o];
-  return /* @__PURE__ */ i(s, { icon: e, style: { pointerEvents: "none", ...n }, ...c });
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { useState as a } from "react";
+import { useVizelState as m } from "./index36.js";
+import { VizelBubbleMenuButton as t } from "./index12.js";
+import { VizelBubbleMenuColorPicker as o } from "./index13.js";
+import { VizelIcon as l } from "./index20.js";
+import { VizelLinkEditor as h } from "./index22.js";
+import { VizelNodeSelector as k } from "./index23.js";
+function z({
+  editor: i,
+  className: r,
+  enableEmbed: n
+}) {
+  m(() => i);
+  const [s, c] = a(!1);
+  return s ? /* @__PURE__ */ e(
+    h,
+    {
+      editor: i,
+      onClose: () => c(!1),
+      ...n ? { enableEmbed: n } : {}
+    }
+  ) : /* @__PURE__ */ u("div", { className: `vizel-bubble-menu-toolbar ${r ?? ""}`, children: [
+    /* @__PURE__ */ e(k, { editor: i }),
+    /* @__PURE__ */ e(
+      t,
+      {
+        action: "bold",
+        onClick: () => i.chain().focus().toggleBold().run(),
+        isActive: i.isActive("bold"),
+        title: "Bold (Cmd+B)",
+        children: /* @__PURE__ */ e(l, { name: "bold" })
+      }
+    ),
+    /* @__PURE__ */ e(
+      t,
+      {
+        action: "italic",
+        onClick: () => i.chain().focus().toggleItalic().run(),
+        isActive: i.isActive("italic"),
+        title: "Italic (Cmd+I)",
+        children: /* @__PURE__ */ e(l, { name: "italic" })
+      }
+    ),
+    /* @__PURE__ */ e(
+      t,
+      {
+        action: "strike",
+        onClick: () => i.chain().focus().toggleStrike().run(),
+        isActive: i.isActive("strike"),
+        title: "Strikethrough",
+        children: /* @__PURE__ */ e(l, { name: "strikethrough" })
+      }
+    ),
+    /* @__PURE__ */ e(
+      t,
+      {
+        action: "underline",
+        onClick: () => i.chain().focus().toggleUnderline().run(),
+        isActive: i.isActive("underline"),
+        title: "Underline (Cmd+U)",
+        children: /* @__PURE__ */ e(l, { name: "underline" })
+      }
+    ),
+    /* @__PURE__ */ e(
+      t,
+      {
+        action: "code",
+        onClick: () => i.chain().focus().toggleCode().run(),
+        isActive: i.isActive("code"),
+        title: "Code (Cmd+E)",
+        children: /* @__PURE__ */ e(l, { name: "code" })
+      }
+    ),
+    /* @__PURE__ */ e(
+      t,
+      {
+        action: "link",
+        onClick: () => c(!0),
+        isActive: i.isActive("link"),
+        title: "Link (Cmd+K)",
+        children: /* @__PURE__ */ e(l, { name: "link" })
+      }
+    ),
+    /* @__PURE__ */ e(o, { editor: i, type: "textColor" }),
+    /* @__PURE__ */ e(o, { editor: i, type: "highlight" })
+  ] });
 }
 export {
-  x as VizelIcon
+  z as VizelBubbleMenuDefault
 };

package/dist/index15.js

@@ -1,81 +1,7 @@
-import { jsxs as a, jsx as i } from "react/jsx-runtime";
-import { detectVizelEmbedProvider as R } from "@vizel/core";
-import { useState as h, useRef as k, useMemo as v, useEffect as b, useCallback as p } from "react";
-import { VizelIcon as g } from "./index14.js";
-function P({
-  editor: e,
-  onClose: n,
-  className: E,
-  enableEmbed: m = !1
-}) {
-  const d = e.getAttributes("link").href || "", [s, z] = h(d), [l, L] = h(!1), u = k(null), f = k(null), o = v(() => m ? e.extensionManager.extensions.some((r) => r.name === "embed") : !1, [e, m]), x = v(() => s.trim() ? R(s.trim()) !== null : !1, [s]);
-  b(() => {
-    f.current?.focus();
-  }, []), b(() => {
-    const t = (c) => {
-      u.current && !u.current.contains(c.target) && n();
-    }, r = (c) => {
-      c.key === "Escape" && (c.preventDefault(), c.stopImmediatePropagation(), n());
-    }, N = setTimeout(() => {
-      document.addEventListener("mousedown", t);
-    }, 0);
-    return document.addEventListener("keydown", r, !0), () => {
-      clearTimeout(N), document.removeEventListener("mousedown", t), document.removeEventListener("keydown", r, !0);
-    };
-  }, [n]);
-  const y = p(
-    (t) => {
-      t.preventDefault();
-      const r = s.trim();
-      if (!r) {
-        e.chain().focus().unsetLink().run(), n();
-        return;
-      }
-      l && o ? e.chain().focus().unsetLink().setEmbed({ url: r }).run() : e.chain().focus().setLink({ href: r }).run(), n();
-    },
-    [e, s, l, o, n]
-  ), w = p(() => {
-    e.chain().focus().unsetLink().run(), n();
-  }, [e, n]);
-  return /* @__PURE__ */ a("form", { ref: u, onSubmit: y, className: `vizel-link-editor ${E ?? ""}`, children: [
-    /* @__PURE__ */ a("div", { className: "vizel-link-editor-row", children: [
-      /* @__PURE__ */ i(
-        "input",
-        {
-          ref: f,
-          type: "url",
-          value: s,
-          onChange: (t) => z(t.target.value),
-          placeholder: "Enter URL...",
-          className: "vizel-link-input"
-        }
-      ),
-      /* @__PURE__ */ i("button", { type: "submit", className: "vizel-link-button", title: "Apply", children: /* @__PURE__ */ i(g, { name: "check" }) }),
-      d && /* @__PURE__ */ i(
-        "button",
-        {
-          type: "button",
-          onClick: w,
-          className: "vizel-link-button vizel-link-remove",
-          title: "Remove link",
-          children: /* @__PURE__ */ i(g, { name: "x" })
-        }
-      )
-    ] }),
-    o && x && /* @__PURE__ */ a("div", { className: "vizel-link-editor-embed-toggle", children: [
-      /* @__PURE__ */ i(
-        "input",
-        {
-          type: "checkbox",
-          id: "vizel-embed-toggle",
-          checked: l,
-          onChange: (t) => L(t.target.checked)
-        }
-      ),
-      /* @__PURE__ */ i("label", { htmlFor: "vizel-embed-toggle", children: "Embed as rich content" })
-    ] })
-  ] });
+import { jsx as i } from "react/jsx-runtime";
+function n({ className: e }) {
+  return /* @__PURE__ */ i("span", { className: `vizel-bubble-menu-divider ${e ?? ""}` });
 }
 export {
-  P as VizelLinkEditor
+  n as VizelBubbleMenuDivider
 };

package/dist/index16.js

@@ -1,118 +1,179 @@
-import { jsxs as p, jsx as n } from "react/jsx-runtime";
-import { getVizelActiveNodeType as x, vizelDefaultNodeTypes as E } from "@vizel/core";
-import { useState as z, useRef as N, useEffect as w } from "react";
-import { useVizelState as y } from "./index28.js";
-import { VizelIcon as s } from "./index14.js";
-function $({
-  editor: c,
-  nodeTypes: r = E,
-  className: D
+import { jsxs as z, jsx as l } from "react/jsx-runtime";
+import { normalizeVizelHexColor as N, isVizelValidHexColor as I } from "@vizel/core";
+import { useState as K, useRef as L, useMemo as $, useEffect as y, useCallback as b } from "react";
+import { VizelIcon as w } from "./index20.js";
+const S = 4, j = ["transparent", "inherit"];
+function q({
+  colors: f,
+  value: a,
+  onChange: m,
+  label: M = "Color palette",
+  className: O,
+  allowCustomColor: U = !0,
+  recentColors: s = [],
+  showRecentColors: h = !0,
+  noneValues: g = j
 }) {
-  y(() => c);
-  const [o, l] = z(!1), [f, a] = z(0), i = N(null), d = N(null), m = x(c, r), h = m?.label ?? "Text", g = m?.icon ?? "paragraph";
-  w(() => {
-    if (!o) return;
-    const e = (t) => {
-      i.current && !i.current.contains(t.target) && l(!1);
-    };
-    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [o]), w(() => {
-    o && d.current && d.current.focus();
-  }, [o]);
-  const b = (e) => {
-    if (!o) {
-      (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), l(!0), a(0));
-      return;
-    }
-    switch (e.key) {
-      case "Escape":
-        e.preventDefault(), l(!1);
-        break;
-      case "ArrowDown":
-        e.preventDefault(), a((t) => (t + 1) % r.length);
-        break;
-      case "ArrowUp":
-        e.preventDefault(), a((t) => (t - 1 + r.length) % r.length);
-        break;
-      case "Enter":
-      case " ": {
-        e.preventDefault();
-        const t = r[f];
-        t && v(t);
-        break;
+  const [p, d] = K(""), [x, v] = K(-1), u = L([]), D = L(null), i = $(
+    () => [...h ? s : [], ...f.map((e) => e.color)],
+    [h, s, f]
+  );
+  y(() => {
+    u.current.length > i.length && (u.current.length = i.length);
+  }, [i.length]);
+  const H = h ? s.length : 0, o = b(
+    (e) => g.includes(e),
+    [g]
+  ), k = b(
+    (e) => {
+      m(e), d("");
+    },
+    [m]
+  ), V = b(() => {
+    const e = N(p);
+    I(e) && (m(e), d(""));
+  }, [p, m]), R = (e) => {
+    e.key === "Enter" && (e.preventDefault(), V());
+  }, A = b(
+    (e, r) => {
+      const t = i.length;
+      if (t === 0) return;
+      let n = r, c = !1;
+      switch (e.key) {
+        case "ArrowRight":
+          n = (r + 1) % t, c = !0;
+          break;
+        case "ArrowLeft":
+          n = (r - 1 + t) % t, c = !0;
+          break;
+        case "ArrowDown":
+          n = Math.min(r + S, t - 1), c = !0;
+          break;
+        case "ArrowUp":
+          n = Math.max(r - S, 0), c = !0;
+          break;
+        case "Home":
+          n = 0, c = !0;
+          break;
+        case "End":
+          n = t - 1, c = !0;
+          break;
+        case "Enter":
+        case " ": {
+          e.preventDefault();
+          const E = i[r];
+          E && k(E);
+          return;
+        }
       }
-      case "Home":
-        e.preventDefault(), a(0);
-        break;
-      case "End":
-        e.preventDefault(), a(r.length - 1);
-        break;
-    }
-  }, v = (e) => {
-    e.command(c), l(!1);
-  };
-  return /* @__PURE__ */ p(
+      c && (e.preventDefault(), v(n), u.current[n]?.focus());
+    },
+    [i, k]
+  );
+  y(() => {
+    a && !o(a) ? d(a) : d("");
+  }, [a, o]), y(() => {
+    const e = a ? i.indexOf(a) : -1;
+    e >= 0 ? v(e) : i.length > 0 && v(0);
+  }, [i, a]);
+  const C = I(N(p)), _ = C ? N(p) : void 0;
+  return /* @__PURE__ */ z(
     "div",
     {
-      ref: i,
-      className: `vizel-node-selector ${D ?? ""}`,
-      "data-vizel-node-selector": !0,
+      className: `vizel-color-picker-content ${O ?? ""}`,
+      role: "listbox",
+      "aria-label": M,
       children: [
-        /* @__PURE__ */ p(
-          "button",
-          {
-            type: "button",
-            className: "vizel-node-selector-trigger",
-            onClick: () => l(!o),
-            onKeyDown: b,
-            "aria-haspopup": "listbox",
-            "aria-expanded": o,
-            "aria-label": `Current block type: ${h}`,
-            title: "Change block type",
-            children: [
-              /* @__PURE__ */ n("span", { className: "vizel-node-selector-icon", children: /* @__PURE__ */ n(s, { name: g }) }),
-              /* @__PURE__ */ n("span", { className: "vizel-node-selector-label", children: h }),
-              /* @__PURE__ */ n("span", { className: "vizel-node-selector-chevron", "aria-hidden": "true", children: /* @__PURE__ */ n(s, { name: "chevronDown" }) })
-            ]
-          }
-        ),
-        o && /* @__PURE__ */ n(
-          "div",
-          {
-            ref: d,
-            className: "vizel-node-selector-dropdown",
-            role: "listbox",
-            "aria-label": "Block types",
-            "data-vizel-node-selector-dropdown": !0,
-            tabIndex: -1,
-            onKeyDown: b,
-            children: r.map((e, t) => {
-              const u = e.isActive(c), k = t === f;
-              return /* @__PURE__ */ p(
-                "button",
-                {
-                  type: "button",
-                  role: "option",
-                  "aria-selected": u,
-                  className: `vizel-node-selector-option ${u ? "is-active" : ""} ${k ? "is-focused" : ""}`,
-                  onClick: () => v(e),
-                  onMouseEnter: () => a(t),
-                  tabIndex: k ? 0 : -1,
-                  children: [
-                    /* @__PURE__ */ n("span", { className: "vizel-node-selector-option-icon", children: /* @__PURE__ */ n(s, { name: e.icon }) }),
-                    /* @__PURE__ */ n("span", { className: "vizel-node-selector-option-label", children: e.label }),
-                    u && /* @__PURE__ */ n("span", { className: "vizel-node-selector-check", "aria-hidden": "true", children: /* @__PURE__ */ n(s, { name: "check" }) })
-                  ]
-                },
-                e.name
-              );
-            })
-          }
-        )
+        h && s.length > 0 && /* @__PURE__ */ z("div", { className: "vizel-color-picker-section", children: [
+          /* @__PURE__ */ l("div", { className: "vizel-color-picker-label", children: "Recent" }),
+          /* @__PURE__ */ l("div", { className: "vizel-color-picker-recent", children: s.map((e, r) => /* @__PURE__ */ l(
+            "button",
+            {
+              ref: (t) => {
+                u.current[r] = t;
+              },
+              type: "button",
+              role: "option",
+              "aria-selected": a === e,
+              "aria-label": e,
+              tabIndex: x === r ? 0 : -1,
+              className: `vizel-color-picker-swatch ${a === e ? "is-active" : ""}`,
+              onClick: () => k(e),
+              onKeyDown: (t) => A(t, r),
+              style: {
+                backgroundColor: o(e) ? "transparent" : e
+              },
+              "data-color": e,
+              children: o(e) ? /* @__PURE__ */ l("span", { className: "vizel-color-picker-none", children: /* @__PURE__ */ l(w, { name: "x" }) }) : null
+            },
+            e
+          )) })
+        ] }),
+        /* @__PURE__ */ l("div", { className: "vizel-color-picker-section", children: /* @__PURE__ */ l("div", { className: "vizel-color-picker-grid", children: f.map((e, r) => {
+          const t = H + r;
+          return /* @__PURE__ */ l(
+            "button",
+            {
+              ref: (n) => {
+                u.current[t] = n;
+              },
+              type: "button",
+              role: "option",
+              "aria-selected": a === e.color,
+              "aria-label": e.name,
+              tabIndex: x === t ? 0 : -1,
+              className: `vizel-color-picker-swatch ${a === e.color ? "is-active" : ""}`,
+              onClick: () => k(e.color),
+              onKeyDown: (n) => A(n, t),
+              style: {
+                backgroundColor: o(e.color) ? "transparent" : e.color
+              },
+              "data-color": e.color,
+              children: o(e.color) ? /* @__PURE__ */ l("span", { className: "vizel-color-picker-none", children: /* @__PURE__ */ l(w, { name: "x" }) }) : null
+            },
+            e.color
+          );
+        }) }) }),
+        U && /* @__PURE__ */ z("div", { className: "vizel-color-picker-input-row", children: [
+          /* @__PURE__ */ l(
+            "span",
+            {
+              className: "vizel-color-picker-preview",
+              style: { backgroundColor: _ || "transparent" },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ l(
+            "input",
+            {
+              ref: D,
+              type: "text",
+              className: "vizel-color-picker-input",
+              placeholder: "#000000",
+              value: p,
+              onChange: (e) => d(e.target.value),
+              onKeyDown: R,
+              maxLength: 7,
+              "aria-label": "Custom color hex value"
+            }
+          ),
+          /* @__PURE__ */ l(
+            "button",
+            {
+              type: "button",
+              className: "vizel-color-picker-apply",
+              onClick: V,
+              disabled: !C,
+              title: "Apply",
+              "aria-label": "Apply custom color",
+              children: /* @__PURE__ */ l(w, { name: "check" })
+            }
+          )
+        ] })
       ]
     }
   );
 }
 export {
-  $ as VizelNodeSelector
+  q as VizelColorPicker
 };

package/dist/index17.js

@@ -1,38 +1,26 @@
-import { jsx as n } from "react/jsx-runtime";
-import { getVizelPortalContainer as s, VIZEL_PORTAL_Z_INDEX as f } from "@vizel/core";
-import { useState as m, useEffect as p } from "react";
-import { createPortal as u } from "react-dom";
-function d({
-  children: t,
-  layer: o = "dropdown",
-  className: e,
-  disabled: r = !1
-}) {
-  const [a, i] = m(!1);
-  if (p(() => {
-    i(!0);
-  }, []), !a || r)
-    return t;
-  const l = s();
-  return u(
-    /* @__PURE__ */ n(
-      "div",
-      {
-        "data-vizel-portal-layer": o,
-        className: e,
-        style: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          zIndex: f[o]
-        },
-        children: t
-      }
-    ),
-    l
-  );
+import { jsx as o } from "react/jsx-runtime";
+import { createContext as i, useContext as r } from "react";
+const t = i(null);
+function x({ editor: e, children: n }) {
+  return /* @__PURE__ */ o(t.Provider, { value: { editor: e }, children: n });
+}
+function z() {
+  const e = r(t);
+  if (e === null)
+    throw new Error(
+      `[Vizel] useVizelContext must be used within <VizelProvider> or <Vizel>.
+Example:
+  <VizelProvider editor={editor}>
+    <YourComponent />
+  </VizelProvider>`
+    );
+  return e;
+}
+function V() {
+  return r(t);
 }
-d.displayName = "VizelPortal";
 export {
-  d as VizelPortal
+  x as VizelInternalProvider,
+  z as useVizelContext,
+  V as useVizelContextSafe
 };

package/dist/index18.js

@@ -1,8 +1,24 @@
-import { jsx as r } from "react/jsx-runtime";
-import { VizelInternalProvider as t } from "./index2.js";
-function l({ editor: i, children: o, className: e }) {
-  return /* @__PURE__ */ r(t, { editor: i, children: /* @__PURE__ */ r("div", { className: e, "data-vizel-root": "", children: o }) });
+import { jsx as f } from "react/jsx-runtime";
+import { useRef as a, useImperativeHandle as c, useEffect as l } from "react";
+import { useVizelContextSafe as s } from "./index17.js";
+function v({ ref: i, editor: o, className: n }) {
+  const d = s(), e = o ?? d?.editor, r = a(null);
+  return c(
+    i,
+    () => ({
+      container: r.current
+    }),
+    []
+  ), l(() => {
+    const t = r.current;
+    if (e && t)
+      return t.appendChild(e.view.dom), e.view.setProps({
+        editable: () => e?.isEditable ?? !1
+      }), () => {
+        e.view.dom.parentNode === t && t.removeChild(e.view.dom);
+      };
+  }, [e]), e ? /* @__PURE__ */ f("div", { ref: r, className: n, "data-vizel-content": "" }) : null;
 }
 export {
-  l as VizelProvider
+  v as VizelEditor
 };