@vizel/react 0.0.1-alpha.6 → 1.1.0

package/dist/index10.js

@@ -1,57 +1,64 @@
-import { jsxs as g, jsx as o } from "react/jsx-runtime";
-import { useImperativeHandle as h } from "react";
-import { useVizelEditor as q } from "./index33.js";
-import { VizelBubbleMenu as j } from "./index11.js";
-import { VizelEditor as u } from "./index18.js";
-function O({
+import { jsxs as G, jsx as r } from "react/jsx-runtime";
+import { useImperativeHandle as J } from "react";
+import { useVizelEditor as K } from "./index40.js";
+import { VizelBubbleMenu as N } from "./index11.js";
+import { VizelEditor as L } from "./index18.js";
+import { VizelToolbar as $ } from "./index32.js";
+function X({
   ref: e,
-  initialContent: v,
-  initialMarkdown: d,
-  transformDiagramsOnImport: E = !0,
-  placeholder: m,
-  editable: H = !0,
-  autofocus: I = !1,
-  features: f,
-  className: N,
-  showBubbleMenu: s = !0,
-  enableEmbed: z = !1,
-  bubbleMenuContent: r,
-  children: $,
-  onUpdate: t,
-  onCreate: p,
-  onDestroy: V,
-  onSelectionUpdate: l,
-  onFocus: x,
-  onBlur: c
+  initialContent: m,
+  initialMarkdown: o,
+  transformDiagramsOnImport: g = !0,
+  placeholder: f,
+  editable: h = !0,
+  autofocus: q = !1,
+  features: z,
+  extensions: p,
+  className: u,
+  showToolbar: V = !1,
+  toolbarContent: d,
+  showBubbleMenu: l = !0,
+  enableEmbed: s = !1,
+  bubbleMenuContent: v,
+  children: A,
+  onUpdate: c,
+  onCreate: j,
+  onDestroy: x,
+  onSelectionUpdate: E,
+  onFocus: H,
+  onBlur: I
 }) {
-  const i = q({
-    ...v !== void 0 && { initialContent: v },
-    ...d !== void 0 && { initialMarkdown: d },
-    transformDiagramsOnImport: E,
-    ...m !== void 0 && { placeholder: m },
-    editable: H,
-    autofocus: I,
-    ...f !== void 0 && { features: f },
-    ...t !== void 0 && { onUpdate: t },
-    ...p !== void 0 && { onCreate: p },
-    ...V !== void 0 && { onDestroy: V },
-    ...l !== void 0 && { onSelectionUpdate: l },
-    ...x !== void 0 && { onFocus: x },
-    ...c !== void 0 && { onBlur: c }
+  const i = K({
+    ...m !== void 0 && { initialContent: m },
+    ...o !== void 0 && { initialMarkdown: o },
+    transformDiagramsOnImport: g,
+    ...f !== void 0 && { placeholder: f },
+    editable: h,
+    autofocus: q,
+    ...z !== void 0 && { features: z },
+    ...p !== void 0 && { extensions: p },
+    ...c !== void 0 && { onUpdate: c },
+    ...j !== void 0 && { onCreate: j },
+    ...x !== void 0 && { onDestroy: x },
+    ...E !== void 0 && { onSelectionUpdate: E },
+    ...H !== void 0 && { onFocus: H },
+    ...I !== void 0 && { onBlur: I }
   });
-  return h(
+  return J(
     e,
     () => ({
       editor: i
     }),
     [i]
-  ), /* @__PURE__ */ g("div", { className: `vizel-root ${N ?? ""}`, "data-vizel-root": "", children: [
-    /* @__PURE__ */ o(u, { editor: i }),
-    s && i && r && /* @__PURE__ */ o(j, { editor: i, enableEmbed: z, children: r }),
-    s && i && !r && /* @__PURE__ */ o(j, { editor: i, enableEmbed: z }),
-    $
+  ), /* @__PURE__ */ G("div", { className: `vizel-root ${u ?? ""}`, "data-vizel-root": "", children: [
+    V && i && d && /* @__PURE__ */ r($, { editor: i, children: d }),
+    V && i && !d && /* @__PURE__ */ r($, { editor: i }),
+    /* @__PURE__ */ r(L, { editor: i }),
+    l && i && v && /* @__PURE__ */ r(N, { editor: i, enableEmbed: s, children: v }),
+    l && i && !v && /* @__PURE__ */ r(N, { editor: i, enableEmbed: s }),
+    A
   ] });
 }
 export {
-  O as Vizel
+  X as Vizel
 };

package/dist/index13.js

@@ -2,7 +2,7 @@ import { jsxs as V, jsx as l } from "react/jsx-runtime";
 import { getVizelRecentColors as H, addVizelRecentColor as u, VIZEL_TEXT_COLORS as L, VIZEL_HIGHLIGHT_COLORS as O } from "@vizel/core";
 import { useState as h, useRef as E, useEffect as g, useCallback as I } from "react";
 import { VizelColorPicker as T } from "./index16.js";
-import { VizelIcon as C } from "./index20.js";
+import { VizelIcon as C } from "./index21.js";
 function A({
   editor: o,
   type: e,

package/dist/index14.js

@@ -1,91 +1,95 @@
-import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { jsx as i, jsxs as m } 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
+import { useVizelState as h } from "./index43.js";
+import { VizelBubbleMenuButton as l } from "./index12.js";
+import { VizelBubbleMenuColorPicker as r } from "./index13.js";
+import { VizelBubbleMenuDivider as n } from "./index15.js";
+import { VizelIcon as t } from "./index21.js";
+import { VizelLinkEditor as f } from "./index23.js";
+import { VizelNodeSelector as k } from "./index24.js";
+function V({
+  editor: e,
+  className: s,
+  enableEmbed: o
 }) {
-  m(() => i);
-  const [s, c] = a(!1);
-  return s ? /* @__PURE__ */ e(
-    h,
+  h(() => e);
+  const [u, c] = a(!1);
+  return u ? /* @__PURE__ */ i(
+    f,
     {
-      editor: i,
+      editor: e,
       onClose: () => c(!1),
-      ...n ? { enableEmbed: n } : {}
+      ...o ? { enableEmbed: o } : {}
     }
-  ) : /* @__PURE__ */ u("div", { className: `vizel-bubble-menu-toolbar ${r ?? ""}`, children: [
-    /* @__PURE__ */ e(k, { editor: i }),
-    /* @__PURE__ */ e(
-      t,
+  ) : /* @__PURE__ */ m("div", { className: `vizel-bubble-menu-toolbar ${s ?? ""}`, children: [
+    /* @__PURE__ */ i(k, { editor: e }),
+    /* @__PURE__ */ i(n, {}),
+    /* @__PURE__ */ i(
+      l,
       {
         action: "bold",
-        onClick: () => i.chain().focus().toggleBold().run(),
-        isActive: i.isActive("bold"),
+        onClick: () => e.chain().focus().toggleBold().run(),
+        isActive: e.isActive("bold"),
         title: "Bold (Cmd+B)",
-        children: /* @__PURE__ */ e(l, { name: "bold" })
+        children: /* @__PURE__ */ i(t, { name: "bold" })
       }
     ),
-    /* @__PURE__ */ e(
-      t,
+    /* @__PURE__ */ i(
+      l,
       {
         action: "italic",
-        onClick: () => i.chain().focus().toggleItalic().run(),
-        isActive: i.isActive("italic"),
+        onClick: () => e.chain().focus().toggleItalic().run(),
+        isActive: e.isActive("italic"),
         title: "Italic (Cmd+I)",
-        children: /* @__PURE__ */ e(l, { name: "italic" })
+        children: /* @__PURE__ */ i(t, { name: "italic" })
       }
     ),
-    /* @__PURE__ */ e(
-      t,
+    /* @__PURE__ */ i(
+      l,
       {
         action: "strike",
-        onClick: () => i.chain().focus().toggleStrike().run(),
-        isActive: i.isActive("strike"),
+        onClick: () => e.chain().focus().toggleStrike().run(),
+        isActive: e.isActive("strike"),
         title: "Strikethrough",
-        children: /* @__PURE__ */ e(l, { name: "strikethrough" })
+        children: /* @__PURE__ */ i(t, { name: "strikethrough" })
       }
     ),
-    /* @__PURE__ */ e(
-      t,
+    /* @__PURE__ */ i(
+      l,
       {
         action: "underline",
-        onClick: () => i.chain().focus().toggleUnderline().run(),
-        isActive: i.isActive("underline"),
+        onClick: () => e.chain().focus().toggleUnderline().run(),
+        isActive: e.isActive("underline"),
         title: "Underline (Cmd+U)",
-        children: /* @__PURE__ */ e(l, { name: "underline" })
+        children: /* @__PURE__ */ i(t, { name: "underline" })
       }
     ),
-    /* @__PURE__ */ e(
-      t,
+    /* @__PURE__ */ i(
+      l,
       {
         action: "code",
-        onClick: () => i.chain().focus().toggleCode().run(),
-        isActive: i.isActive("code"),
+        onClick: () => e.chain().focus().toggleCode().run(),
+        isActive: e.isActive("code"),
         title: "Code (Cmd+E)",
-        children: /* @__PURE__ */ e(l, { name: "code" })
+        children: /* @__PURE__ */ i(t, { name: "code" })
       }
     ),
-    /* @__PURE__ */ e(
-      t,
+    /* @__PURE__ */ i(n, {}),
+    /* @__PURE__ */ i(
+      l,
       {
         action: "link",
         onClick: () => c(!0),
-        isActive: i.isActive("link"),
+        isActive: e.isActive("link"),
         title: "Link (Cmd+K)",
-        children: /* @__PURE__ */ e(l, { name: "link" })
+        children: /* @__PURE__ */ i(t, { name: "link" })
       }
     ),
-    /* @__PURE__ */ e(o, { editor: i, type: "textColor" }),
-    /* @__PURE__ */ e(o, { editor: i, type: "highlight" })
+    /* @__PURE__ */ i(n, {}),
+    /* @__PURE__ */ i(r, { editor: e, type: "textColor" }),
+    /* @__PURE__ */ i(r, { editor: e, type: "highlight" })
   ] });
 }
 export {
-  z as VizelBubbleMenuDefault
+  V as VizelBubbleMenuDefault
 };

package/dist/index16.js

@@ -1,7 +1,7 @@
 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";
+import { VizelIcon as w } from "./index21.js";
 const S = 4, j = ["transparent", "inherit"];
 function q({
   colors: f,

package/dist/index19.js

@@ -1,6 +1,6 @@
 import { jsx as i, jsxs as s } from "react/jsx-runtime";
 import { useRef as a, useEffect as v } from "react";
-import { VizelIcon as p } from "./index20.js";
+import { VizelIcon as p } from "./index21.js";
 const b = (r, e, n) => `vizel-embed ${r ? "is-loading" : ""} ${e ? "ProseMirror-selectednode" : ""} ${n ?? ""}`, h = (r, e) => /* @__PURE__ */ i("div", { className: r, "data-embed-type": "loading", "data-embed-provider": e, children: /* @__PURE__ */ s("div", { className: "vizel-embed-loading", children: [
   /* @__PURE__ */ i("div", { className: "vizel-embed-loading-spinner" }),
   /* @__PURE__ */ i("span", { children: "Loading embed..." })

package/dist/index2.js

@@ -1,5 +1,5 @@
 import { Mark as a, markPasteRule as r, markInputRule as s, mergeAttributes as o } from "@tiptap/core";
-import { createElement as n } from "./index37.js";
+import { createElement as n } from "./index45.js";
 var d = /(?:^|\s)(\*\*(?!\s+\*\*)((?:[^*]+))\*\*(?!\s+\*\*))$/, i = /(?:^|\s)(\*\*(?!\s+\*\*)((?:[^*]+))\*\*(?!\s+\*\*))/g, l = /(?:^|\s)(__(?!\s+__)((?:[^_]+))__(?!\s+__))$/, u = /(?:^|\s)(__(?!\s+__)((?:[^_]+))__(?!\s+__))/g;
 a.create({
   name: "bold",

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