@vizel/react 1.0.0 → 1.1.1

package/dist/index24.js

@@ -1,38 +1,118 @@
-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
+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 "./index43.js";
+import { VizelIcon as s } from "./index21.js";
+function $({
+  editor: c,
+  nodeTypes: r = E,
+  className: D
 }) {
-  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
+  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;
       }
-    ),
-    l
+      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(
+    "div",
+    {
+      ref: i,
+      className: `vizel-node-selector ${D ?? ""}`,
+      "data-vizel-node-selector": !0,
+      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
+              );
+            })
+          }
+        )
+      ]
+    }
   );
 }
-d.displayName = "VizelPortal";
 export {
-  d as VizelPortal
+  $ as VizelNodeSelector
 };

package/dist/index25.js

@@ -1,8 +1,38 @@
-import { jsx as r } from "react/jsx-runtime";
-import { VizelInternalProvider as t } from "./index17.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 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
+  );
 }
+d.displayName = "VizelPortal";
 export {
-  l as VizelProvider
+  d as VizelPortal
 };

package/dist/index26.js

@@ -1,71 +1,8 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { formatVizelRelativeTime as p } from "@vizel/core";
-import { useState as h, useEffect as f } from "react";
-import { VizelIcon as i } from "./index20.js";
-function I({
-  status: r,
-  lastSaved: a,
-  showTimestamp: c = !0,
-  className: o
-}) {
-  const [n, t] = h("");
-  f(() => {
-    if (!a) {
-      t("");
-      return;
-    }
-    const s = () => {
-      t(p(a));
-    };
-    s();
-    const u = setInterval(s, 1e4);
-    return () => clearInterval(u);
-  }, [a]);
-  const l = () => {
-    switch (r) {
-      case "saved":
-        return /* @__PURE__ */ e(i, { name: "check" });
-      case "saving":
-        return /* @__PURE__ */ e("span", { className: "vizel-save-indicator-spinner", "aria-hidden": "true", children: /* @__PURE__ */ e(i, { name: "loader" }) });
-      case "unsaved":
-        return /* @__PURE__ */ e(i, { name: "circle" });
-      case "error":
-        return /* @__PURE__ */ e(i, { name: "warning" });
-      default:
-        return null;
-    }
-  }, v = () => {
-    switch (r) {
-      case "saved":
-        return "Saved";
-      case "saving":
-        return "Saving...";
-      case "unsaved":
-        return "Unsaved";
-      case "error":
-        return "Error saving";
-      default:
-        return "";
-    }
-  }, d = c && a && n && r === "saved";
-  return (
-    // biome-ignore lint/a11y/useSemanticElements: role="status" is appropriate for non-form status announcements
-    /* @__PURE__ */ m(
-      "div",
-      {
-        className: `vizel-save-indicator vizel-save-indicator--${r} ${o ?? ""}`,
-        role: "status",
-        "aria-live": "polite",
-        "data-vizel-save-indicator": !0,
-        children: [
-          /* @__PURE__ */ e("span", { className: "vizel-save-indicator-icon", "aria-hidden": "true", children: l() }),
-          /* @__PURE__ */ e("span", { className: "vizel-save-indicator-text", children: v() }),
-          d && /* @__PURE__ */ e("span", { className: "vizel-save-indicator-timestamp", children: n })
-        ]
-      }
-    )
-  );
+import { jsx as r } from "react/jsx-runtime";
+import { VizelInternalProvider as t } from "./index17.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 }) });
 }
 export {
-  I as VizelSaveIndicator
+  l as VizelProvider
 };

package/dist/index27.js

@@ -1,94 +1,71 @@
-import { jsx as u, jsxs as E } from "react/jsx-runtime";
-import { groupVizelSlashCommands as D } from "@vizel/core";
-import { useState as N, useRef as j, useMemo as b, useEffect as p, useCallback as h, useImperativeHandle as A } from "react";
-import { VizelSlashMenuEmpty as R } from "./index28.js";
-import { VizelSlashMenuItem as $ } from "./index29.js";
-function B({
-  ref: S,
-  items: m,
-  command: v,
-  className: x,
-  showGroups: z = !0,
-  renderItem: I,
-  renderEmpty: y,
-  groupOrder: k
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { formatVizelRelativeTime as p } from "@vizel/core";
+import { useState as h, useEffect as f } from "react";
+import { VizelIcon as i } from "./index21.js";
+function I({
+  status: r,
+  lastSaved: a,
+  showTimestamp: c = !0,
+  className: o
 }) {
-  const [i, f] = N(0), c = j([]), r = b(() => !z || m.length <= 5 ? [{ name: "", items: m }] : D(m, k), [m, z, k]), t = b(() => r.flatMap((e) => e.items), [r]);
-  p(() => {
-    c.current.length > t.length && (c.current.length = t.length);
-  }, [t.length]), p(() => {
-    const e = c.current[i];
-    e && e.scrollIntoView({ block: "nearest", behavior: "smooth" });
-  }, [i]);
-  const d = h(
-    (e) => {
-      const s = t[e];
-      s && v(s);
-    },
-    [t, v]
-  ), w = h(() => {
-    f((e) => (e + t.length - 1) % t.length);
-  }, [t.length]), H = h(() => {
-    f((e) => (e + 1) % t.length);
-  }, [t.length]), M = h(() => {
-    d(i);
-  }, [d, i]), V = h(() => {
-    if (r.length <= 1) return;
-    let e = 0, s = 0;
-    for (let n = 0; n < r.length; n++) {
-      const l = r[n];
-      if (l) {
-        if (i < s + l.items.length) {
-          e = n;
-          break;
-        }
-        s += l.items.length;
-      }
+  const [n, t] = h("");
+  f(() => {
+    if (!a) {
+      t("");
+      return;
+    }
+    const s = () => {
+      t(p(a));
+    };
+    s();
+    const u = setInterval(s, 1e4);
+    return () => clearInterval(u);
+  }, [a]);
+  const l = () => {
+    switch (r) {
+      case "saved":
+        return /* @__PURE__ */ e(i, { name: "check" });
+      case "saving":
+        return /* @__PURE__ */ e("span", { className: "vizel-save-indicator-spinner", "aria-hidden": "true", children: /* @__PURE__ */ e(i, { name: "loader" }) });
+      case "unsaved":
+        return /* @__PURE__ */ e(i, { name: "circle" });
+      case "error":
+        return /* @__PURE__ */ e(i, { name: "warning" });
+      default:
+        return null;
     }
-    const a = (e + 1) % r.length;
-    let o = 0;
-    for (let n = 0; n < a; n++) {
-      const l = r[n];
-      l && (o += l.items.length);
+  }, v = () => {
+    switch (r) {
+      case "saved":
+        return "Saved";
+      case "saving":
+        return "Saving...";
+      case "unsaved":
+        return "Unsaved";
+      case "error":
+        return "Error saving";
+      default:
+        return "";
     }
-    f(o);
-  }, [r, i]);
-  if (p(() => {
-    f(0);
-  }, [r]), A(S, () => ({
-    onKeyDown: ({ event: e }) => e.key === "ArrowUp" ? (w(), !0) : e.key === "ArrowDown" ? (H(), !0) : e.key === "Enter" ? (M(), !0) : e.key === "Tab" ? (e.preventDefault(), V(), !0) : !1
-  })), t.length === 0)
-    return /* @__PURE__ */ u("div", { className: `vizel-slash-menu ${x ?? ""}`, "data-vizel-slash-menu": "", children: y?.() ?? /* @__PURE__ */ u(R, {}) });
-  let C = 0;
-  return /* @__PURE__ */ u("div", { className: `vizel-slash-menu ${x ?? ""}`, "data-vizel-slash-menu": "", children: r.map((e) => {
-    const s = e.items.map((a) => {
-      const o = C++, n = o === i, l = () => d(o);
-      return I ? /* @__PURE__ */ u(
-        "div",
-        {
-          ref: (g) => {
-            c.current[o] = g;
-          },
-          children: I({ item: a, isSelected: n, onClick: l })
-        },
-        a.title
-      ) : /* @__PURE__ */ u(
-        "div",
-        {
-          ref: (g) => {
-            c.current[o] = g;
-          },
-          children: /* @__PURE__ */ u($, { item: a, isSelected: n, onClick: l })
-        },
-        a.title
-      );
-    });
-    return e.name ? /* @__PURE__ */ E("div", { className: "vizel-slash-menu-group", "data-vizel-slash-menu-group": !0, children: [
-      /* @__PURE__ */ u("div", { className: "vizel-slash-menu-group-header", children: e.name }),
-      s
-    ] }, e.name) : s;
-  }) });
+  }, d = c && a && n && r === "saved";
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: role="status" is appropriate for non-form status announcements
+    /* @__PURE__ */ m(
+      "div",
+      {
+        className: `vizel-save-indicator vizel-save-indicator--${r} ${o ?? ""}`,
+        role: "status",
+        "aria-live": "polite",
+        "data-vizel-save-indicator": !0,
+        children: [
+          /* @__PURE__ */ e("span", { className: "vizel-save-indicator-icon", "aria-hidden": "true", children: l() }),
+          /* @__PURE__ */ e("span", { className: "vizel-save-indicator-text", children: v() }),
+          d && /* @__PURE__ */ e("span", { className: "vizel-save-indicator-timestamp", children: n })
+        ]
+      }
+    )
+  );
 }
 export {
-  B as VizelSlashMenu
+  I as VizelSaveIndicator
 };

package/dist/index28.js

@@ -1,7 +1,94 @@
-import { jsx as l } from "react/jsx-runtime";
-function m({ children: e, className: s }) {
-  return /* @__PURE__ */ l("div", { className: `vizel-slash-menu-empty ${s ?? ""}`, "data-vizel-slash-menu-empty": "", children: e ?? "No results" });
+import { jsx as u, jsxs as E } from "react/jsx-runtime";
+import { groupVizelSlashCommands as D } from "@vizel/core";
+import { useState as N, useRef as j, useMemo as b, useEffect as p, useCallback as h, useImperativeHandle as A } from "react";
+import { VizelSlashMenuEmpty as R } from "./index29.js";
+import { VizelSlashMenuItem as $ } from "./index30.js";
+function B({
+  ref: S,
+  items: m,
+  command: v,
+  className: x,
+  showGroups: z = !0,
+  renderItem: I,
+  renderEmpty: y,
+  groupOrder: k
+}) {
+  const [i, f] = N(0), c = j([]), r = b(() => !z || m.length <= 5 ? [{ name: "", items: m }] : D(m, k), [m, z, k]), t = b(() => r.flatMap((e) => e.items), [r]);
+  p(() => {
+    c.current.length > t.length && (c.current.length = t.length);
+  }, [t.length]), p(() => {
+    const e = c.current[i];
+    e && e.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [i]);
+  const d = h(
+    (e) => {
+      const s = t[e];
+      s && v(s);
+    },
+    [t, v]
+  ), w = h(() => {
+    f((e) => (e + t.length - 1) % t.length);
+  }, [t.length]), H = h(() => {
+    f((e) => (e + 1) % t.length);
+  }, [t.length]), M = h(() => {
+    d(i);
+  }, [d, i]), V = h(() => {
+    if (r.length <= 1) return;
+    let e = 0, s = 0;
+    for (let n = 0; n < r.length; n++) {
+      const l = r[n];
+      if (l) {
+        if (i < s + l.items.length) {
+          e = n;
+          break;
+        }
+        s += l.items.length;
+      }
+    }
+    const a = (e + 1) % r.length;
+    let o = 0;
+    for (let n = 0; n < a; n++) {
+      const l = r[n];
+      l && (o += l.items.length);
+    }
+    f(o);
+  }, [r, i]);
+  if (p(() => {
+    f(0);
+  }, [r]), A(S, () => ({
+    onKeyDown: ({ event: e }) => e.key === "ArrowUp" ? (w(), !0) : e.key === "ArrowDown" ? (H(), !0) : e.key === "Enter" ? (M(), !0) : e.key === "Tab" ? (e.preventDefault(), V(), !0) : !1
+  })), t.length === 0)
+    return /* @__PURE__ */ u("div", { className: `vizel-slash-menu ${x ?? ""}`, "data-vizel-slash-menu": "", children: y?.() ?? /* @__PURE__ */ u(R, {}) });
+  let C = 0;
+  return /* @__PURE__ */ u("div", { className: `vizel-slash-menu ${x ?? ""}`, "data-vizel-slash-menu": "", children: r.map((e) => {
+    const s = e.items.map((a) => {
+      const o = C++, n = o === i, l = () => d(o);
+      return I ? /* @__PURE__ */ u(
+        "div",
+        {
+          ref: (g) => {
+            c.current[o] = g;
+          },
+          children: I({ item: a, isSelected: n, onClick: l })
+        },
+        a.title
+      ) : /* @__PURE__ */ u(
+        "div",
+        {
+          ref: (g) => {
+            c.current[o] = g;
+          },
+          children: /* @__PURE__ */ u($, { item: a, isSelected: n, onClick: l })
+        },
+        a.title
+      );
+    });
+    return e.name ? /* @__PURE__ */ E("div", { className: "vizel-slash-menu-group", "data-vizel-slash-menu-group": !0, children: [
+      /* @__PURE__ */ u("div", { className: "vizel-slash-menu-group-header", children: e.name }),
+      s
+    ] }, e.name) : s;
+  }) });
 }
 export {
-  m as VizelSlashMenuEmpty
+  B as VizelSlashMenu
 };

package/dist/index29.js

@@ -1,39 +1,7 @@
-import { jsxs as n, jsx as l } from "react/jsx-runtime";
-import { splitVizelTextByMatches as c } from "@vizel/core";
-import { VizelIcon as r } from "./index20.js";
-const o = (e, t) => {
-  const a = c(e, t);
-  let i = 0;
-  return a.map((s) => {
-    const h = `${i}-${s.highlight}`;
-    return i += s.text.length, s.highlight ? /* @__PURE__ */ l("mark", { className: "vizel-slash-menu-highlight", children: s.text }, h) : s.text;
-  });
-};
-function p({
-  item: e,
-  isSelected: t = !1,
-  onClick: a,
-  className: i,
-  titleMatches: s
-}) {
-  return /* @__PURE__ */ n(
-    "button",
-    {
-      type: "button",
-      className: `vizel-slash-menu-item ${t ? "is-selected" : ""} ${i ?? ""}`,
-      onClick: a,
-      "data-selected": t || void 0,
-      children: [
-        /* @__PURE__ */ l("span", { className: "vizel-slash-menu-icon", children: /* @__PURE__ */ l(r, { name: e.icon }) }),
-        /* @__PURE__ */ n("div", { className: "vizel-slash-menu-text", children: [
-          /* @__PURE__ */ l("span", { className: "vizel-slash-menu-title", children: o(e.title, s) }),
-          /* @__PURE__ */ l("span", { className: "vizel-slash-menu-description", children: e.description })
-        ] }),
-        e.shortcut && /* @__PURE__ */ l("span", { className: "vizel-slash-menu-shortcut", children: e.shortcut })
-      ]
-    }
-  );
+import { jsx as l } from "react/jsx-runtime";
+function m({ children: e, className: s }) {
+  return /* @__PURE__ */ l("div", { className: `vizel-slash-menu-empty ${s ?? ""}`, "data-vizel-slash-menu-empty": "", children: e ?? "No results" });
 }
 export {
-  p as VizelSlashMenuItem
+  m as VizelSlashMenuEmpty
 };