@vizel/react 1.0.0 → 1.1.0

package/dist/index20.js

@@ -1,11 +1,155 @@
-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 "./index21.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 { jsxs as o, jsx as a } from "react/jsx-runtime";
+import { getVizelFindReplaceState as D } from "@vizel/core";
+import { useState as d, useRef as I, useEffect as C, useCallback as l } from "react";
+function O({ editor: e, className: N, onClose: h }) {
+  const [p, v] = d(""), [s, b] = d(""), [R, z] = d(!1), [t, F] = d(null), r = I(null);
+  C(() => {
+    if (!e) return;
+    const n = () => {
+      const c = D(e.state);
+      F(c);
+    };
+    return n(), e.on("transaction", n), () => {
+      e.off("transaction", n);
+    };
+  }, [e]), C(() => {
+    t?.isOpen && (r.current?.focus(), r.current?.select());
+  }, [t?.isOpen]);
+  const y = l(
+    (n) => {
+      const c = n.target.value;
+      v(c), e && e.commands.find(c);
+    },
+    [e]
+  ), u = l(() => {
+    e?.commands.findNext();
+  }, [e]), f = l(() => {
+    e?.commands.findPrevious();
+  }, [e]), k = l(() => {
+    e && (e.commands.replace(s), e.commands.findNext());
+  }, [e, s]), g = l(() => {
+    e && e.commands.replaceAll(s);
+  }, [e, s]), m = l(() => {
+    e && (e.commands.clearFind(), e.commands.closeFindReplace()), v(""), b(""), h?.();
+  }, [e, h]), S = l(
+    (n) => {
+      const c = n.target.checked;
+      z(c), e?.commands.setFindCaseSensitive(c), p && e?.commands.find(p);
+    },
+    [e, p]
+  ), x = l(
+    (n) => {
+      n.key === "Enter" ? (n.preventDefault(), n.shiftKey ? f() : u()) : n.key === "Escape" && (n.preventDefault(), m());
+    },
+    [u, f, m]
+  );
+  if (!t?.isOpen)
+    return null;
+  const i = t.matches.length, w = t.activeIndex >= 0 ? t.activeIndex + 1 : 0, E = t.mode === "replace";
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: `vizel-find-replace-panel ${N || ""}`,
+      role: "dialog",
+      "aria-label": "Find and Replace",
+      children: [
+        /* @__PURE__ */ o("div", { className: "vizel-find-replace-row", children: [
+          /* @__PURE__ */ a(
+            "input",
+            {
+              ref: r,
+              type: "text",
+              className: "vizel-find-replace-input",
+              placeholder: "Find...",
+              value: p,
+              onChange: y,
+              onKeyDown: x,
+              "aria-label": "Find text"
+            }
+          ),
+          /* @__PURE__ */ a("span", { className: "vizel-find-replace-count", children: i > 0 ? `${w}/${i}` : "No results" }),
+          /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              className: "vizel-find-replace-button",
+              onClick: f,
+              disabled: i === 0,
+              "aria-label": "Find previous",
+              title: "Find previous (Shift+Enter)",
+              children: "↑"
+            }
+          ),
+          /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              className: "vizel-find-replace-button",
+              onClick: u,
+              disabled: i === 0,
+              "aria-label": "Find next",
+              title: "Find next (Enter)",
+              children: "↓"
+            }
+          ),
+          /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              className: "vizel-find-replace-button",
+              onClick: m,
+              "aria-label": "Close",
+              title: "Close (Escape)",
+              children: "✕"
+            }
+          )
+        ] }),
+        E && /* @__PURE__ */ o("div", { className: "vizel-find-replace-row", children: [
+          /* @__PURE__ */ a(
+            "input",
+            {
+              type: "text",
+              className: "vizel-find-replace-input",
+              placeholder: "Replace with...",
+              value: s,
+              onChange: (n) => b(n.target.value),
+              onKeyDown: x,
+              "aria-label": "Replace text"
+            }
+          ),
+          /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              className: "vizel-find-replace-button",
+              onClick: k,
+              disabled: i === 0,
+              "aria-label": "Replace",
+              title: "Replace current match",
+              children: "Replace"
+            }
+          ),
+          /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              className: "vizel-find-replace-button vizel-find-replace-button--primary",
+              onClick: g,
+              disabled: i === 0,
+              "aria-label": "Replace all",
+              title: "Replace all matches",
+              children: "All"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a("div", { className: "vizel-find-replace-options", children: /* @__PURE__ */ o("label", { className: "vizel-find-replace-checkbox", children: [
+          /* @__PURE__ */ a("input", { type: "checkbox", checked: R, onChange: S }),
+          "Case sensitive"
+        ] }) })
+      ]
+    }
+  );
 }
 export {
-  x as VizelIcon
+  O as VizelFindReplace
 };

package/dist/index21.js

@@ -1,13 +1,11 @@
-import { jsx as n } from "react/jsx-runtime";
-import { createContext as r, useContext as c } from "react";
-const o = r({});
-function s({ icons: t, children: e }) {
-  return /* @__PURE__ */ n(o.Provider, { value: { customIcons: t }, children: e });
-}
-function x() {
-  return c(o);
+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 "./index22.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 });
 }
 export {
-  s as VizelIconProvider,
-  x as useVizelIconContext
+  x as VizelIcon
 };

package/dist/index22.js

@@ -1,81 +1,13 @@
-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 "./index20.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 n } from "react/jsx-runtime";
+import { createContext as r, useContext as c } from "react";
+const o = r({});
+function s({ icons: t, children: e }) {
+  return /* @__PURE__ */ n(o.Provider, { value: { customIcons: t }, children: e });
+}
+function x() {
+  return c(o);
 }
 export {
-  P as VizelLinkEditor
+  s as VizelIconProvider,
+  x as useVizelIconContext
 };

package/dist/index23.js

@@ -1,118 +1,81 @@
-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 "./index40.js";
-import { VizelIcon as s } from "./index20.js";
-function $({
-  editor: c,
-  nodeTypes: r = E,
-  className: D
+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 "./index21.js";
+function P({
+  editor: e,
+  onClose: n,
+  className: E,
+  enableEmbed: m = !1
 }) {
-  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);
+  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);
     };
-    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;
+  }, [n]);
+  const y = p(
+    (t) => {
+      t.preventDefault();
+      const r = s.trim();
+      if (!r) {
+        e.chain().focus().unsetLink().run(), n();
+        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(
-    "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
-              );
-            })
-          }
-        )
-      ]
-    }
-  );
+      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" })
+    ] })
+  ] });
 }
 export {
-  $ as VizelNodeSelector
+  P as VizelLinkEditor
 };

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
 };