@vizel/react 1.0.0 → 1.1.1

package/dist/index30.js

@@ -1,56 +1,39 @@
-import { jsx as d } from "react/jsx-runtime";
-import { getStoredVizelTheme as v, VIZEL_DEFAULT_THEME_STORAGE_KEY as x, VIZEL_DEFAULT_THEME as S, getVizelSystemTheme as _, resolveVizelTheme as L, applyVizelTheme as P, createVizelSystemThemeListener as C, storeVizelTheme as y } from "@vizel/core";
-import { createContext as A, useContext as V, useState as T, useMemo as h, useEffect as c, useCallback as M } from "react";
-const s = A(null);
-function H({
-  children: t,
-  defaultTheme: z = S,
-  storageKey: n = x,
-  targetSelector: i,
-  disableTransitionOnChange: l = !1
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
+import { splitVizelTextByMatches as c } from "@vizel/core";
+import { VizelIcon as r } from "./index21.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
 }) {
-  const [r, E] = T(() => {
-    const e = v(n);
-    return e || z;
-  }), [o, f] = T(() => _()), m = h(() => L(r, o), [r, o]);
-  c(() => {
-    P(m, i, l);
-  }, [m, i, l]), c(() => C((a) => {
-    f(a);
-  }), []);
-  const u = M(
-    (e) => {
-      E(e), y(n, e);
-    },
-    [n]
-  ), p = h(
-    () => ({
-      theme: r,
-      resolvedTheme: m,
-      systemTheme: o,
-      setTheme: u
-    }),
-    [r, m, o, u]
+  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 })
+      ]
+    }
   );
-  return /* @__PURE__ */ d(s.Provider, { value: p, children: t });
-}
-function I() {
-  const t = V(s);
-  if (!t)
-    throw new Error(
-      `[Vizel] useVizelTheme must be used within a VizelThemeProvider.
-Example:
-  <VizelThemeProvider>
-    <YourComponent />
-  </VizelThemeProvider>`
-    );
-  return t;
-}
-function U() {
-  return V(s);
 }
 export {
-  H as VizelThemeProvider,
-  I as useVizelTheme,
-  U as useVizelThemeSafe
+  p as VizelSlashMenuItem
 };

package/dist/index31.js

@@ -1,15 +1,56 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useVizelContextSafe as n } from "./index17.js";
-import { VizelToolbarDefault as m } from "./index33.js";
-function s({
-  editor: t,
-  className: e,
-  showDefaultToolbar: l = !0,
-  children: i
+import { jsx as d } from "react/jsx-runtime";
+import { getStoredVizelTheme as v, VIZEL_DEFAULT_THEME_STORAGE_KEY as x, VIZEL_DEFAULT_THEME as S, getVizelSystemTheme as _, resolveVizelTheme as L, applyVizelTheme as P, createVizelSystemThemeListener as C, storeVizelTheme as y } from "@vizel/core";
+import { createContext as A, useContext as V, useState as T, useMemo as h, useEffect as c, useCallback as M } from "react";
+const s = A(null);
+function H({
+  children: t,
+  defaultTheme: z = S,
+  storageKey: n = x,
+  targetSelector: i,
+  disableTransitionOnChange: l = !1
 }) {
-  const a = n(), o = t ?? a?.editor ?? null;
-  return o ? /* @__PURE__ */ r("div", { className: `vizel-toolbar ${e ?? ""}`, role: "toolbar", "aria-label": "Formatting", children: i ?? (l && /* @__PURE__ */ r(m, { editor: o })) }) : null;
+  const [r, E] = T(() => {
+    const e = v(n);
+    return e || z;
+  }), [o, f] = T(() => _()), m = h(() => L(r, o), [r, o]);
+  c(() => {
+    P(m, i, l);
+  }, [m, i, l]), c(() => C((a) => {
+    f(a);
+  }), []);
+  const u = M(
+    (e) => {
+      E(e), y(n, e);
+    },
+    [n]
+  ), p = h(
+    () => ({
+      theme: r,
+      resolvedTheme: m,
+      systemTheme: o,
+      setTheme: u
+    }),
+    [r, m, o, u]
+  );
+  return /* @__PURE__ */ d(s.Provider, { value: p, children: t });
+}
+function I() {
+  const t = V(s);
+  if (!t)
+    throw new Error(
+      `[Vizel] useVizelTheme must be used within a VizelThemeProvider.
+Example:
+  <VizelThemeProvider>
+    <YourComponent />
+  </VizelThemeProvider>`
+    );
+  return t;
+}
+function U() {
+  return V(s);
 }
 export {
-  s as VizelToolbar
+  H as VizelThemeProvider,
+  I as useVizelTheme,
+  U as useVizelThemeSafe
 };

package/dist/index32.js

@@ -1,28 +1,15 @@
-import { jsx as i } from "react/jsx-runtime";
-function u({
-  onClick: a,
-  isActive: t = !1,
-  disabled: o = !1,
-  children: e,
-  title: r,
-  className: n,
-  action: l
+import { jsx as r } from "react/jsx-runtime";
+import { useVizelContextSafe as n } from "./index17.js";
+import { VizelToolbarDefault as m } from "./index34.js";
+function s({
+  editor: t,
+  className: e,
+  showDefaultToolbar: l = !0,
+  children: i
 }) {
-  return /* @__PURE__ */ i(
-    "button",
-    {
-      type: "button",
-      onClick: a,
-      disabled: o,
-      "aria-pressed": t,
-      className: `vizel-toolbar-button ${t ? "is-active" : ""} ${n ?? ""}`,
-      title: r,
-      "data-active": t || void 0,
-      "data-action": l,
-      children: e
-    }
-  );
+  const a = n(), o = t ?? a?.editor ?? null;
+  return o ? /* @__PURE__ */ r("div", { className: `vizel-toolbar ${e ?? ""}`, role: "toolbar", "aria-label": "Formatting", children: i ?? (l && /* @__PURE__ */ r(m, { editor: o })) }) : null;
 }
 export {
-  u as VizelToolbarButton
+  s as VizelToolbar
 };

package/dist/index33.js

@@ -1,33 +1,28 @@
-import { jsx as r, jsxs as a } from "react/jsx-runtime";
-import { groupVizelToolbarActions as b, vizelDefaultToolbarActions as p } from "@vizel/core";
-import { Fragment as f } from "react";
-import { useVizelState as n } from "./index40.js";
-import { VizelIcon as u } from "./index20.js";
-import { VizelToolbarButton as z } from "./index32.js";
-import { VizelToolbarDivider as c } from "./index34.js";
-function $({
-  editor: o,
-  className: t,
-  actions: m = p
+import { jsx as i } from "react/jsx-runtime";
+function u({
+  onClick: a,
+  isActive: t = !1,
+  disabled: o = !1,
+  children: e,
+  title: r,
+  className: n,
+  action: l
 }) {
-  n(() => o);
-  const s = b(m);
-  return /* @__PURE__ */ r("div", { className: `vizel-toolbar-content ${t ?? ""}`, "data-vizel-toolbar": "", children: s.map((e, i) => /* @__PURE__ */ a(f, { children: [
-    i > 0 && /* @__PURE__ */ r(c, {}),
-    e.map((l) => /* @__PURE__ */ r(
-      z,
-      {
-        action: l.id,
-        onClick: () => l.run(o),
-        isActive: l.isActive(o),
-        disabled: !l.isEnabled(o),
-        title: l.shortcut ? `${l.label} (${l.shortcut})` : l.label,
-        children: /* @__PURE__ */ r(u, { name: l.icon })
-      },
-      l.id
-    ))
-  ] }, e[0]?.group ?? i)) });
+  return /* @__PURE__ */ i(
+    "button",
+    {
+      type: "button",
+      onClick: a,
+      disabled: o,
+      "aria-pressed": t,
+      className: `vizel-toolbar-button ${t ? "is-active" : ""} ${n ?? ""}`,
+      title: r,
+      "data-active": t || void 0,
+      "data-action": l,
+      children: e
+    }
+  );
 }
 export {
-  $ as VizelToolbarDefault
+  u as VizelToolbarButton
 };

package/dist/index34.js

@@ -1,7 +1,33 @@
-import { jsx as i } from "react/jsx-runtime";
-function e({ className: r }) {
-  return /* @__PURE__ */ i("span", { className: `vizel-toolbar-divider ${r ?? ""}` });
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { groupVizelToolbarActions as b, vizelDefaultToolbarActions as p } from "@vizel/core";
+import { Fragment as f } from "react";
+import { useVizelState as n } from "./index43.js";
+import { VizelIcon as u } from "./index21.js";
+import { VizelToolbarButton as z } from "./index33.js";
+import { VizelToolbarDivider as c } from "./index35.js";
+function $({
+  editor: o,
+  className: t,
+  actions: m = p
+}) {
+  n(() => o);
+  const s = b(m);
+  return /* @__PURE__ */ r("div", { className: `vizel-toolbar-content ${t ?? ""}`, "data-vizel-toolbar": "", children: s.map((e, i) => /* @__PURE__ */ a(f, { children: [
+    i > 0 && /* @__PURE__ */ r(c, {}),
+    e.map((l) => /* @__PURE__ */ r(
+      z,
+      {
+        action: l.id,
+        onClick: () => l.run(o),
+        isActive: l.isActive(o),
+        disabled: !l.isEnabled(o),
+        title: l.shortcut ? `${l.label} (${l.shortcut})` : l.label,
+        children: /* @__PURE__ */ r(u, { name: l.icon })
+      },
+      l.id
+    ))
+  ] }, e[0]?.group ?? i)) });
 }
 export {
-  e as VizelToolbarDivider
+  $ as VizelToolbarDefault
 };

package/dist/index35.js

@@ -1,36 +1,7 @@
-import { handleVizelSuggestionEscape as u, createVizelSuggestionContainer as m } from "@vizel/core";
-import { createElement as c } from "react";
-import { c as s } from "./index42.js";
-import { VizelSlashMenu as d } from "./index27.js";
-function z(l = {}) {
-  return {
-    render: () => {
-      let t = null, n = null, o = [], r = null;
-      const i = { current: null }, a = () => {
-        t && r && t.render(
-          c(d, {
-            items: o,
-            command: r,
-            ...l.className !== void 0 && { className: l.className },
-            ref: i
-          })
-        );
-      };
-      return {
-        onStart: (e) => {
-          o = e.items, r = e.command, n = m(), t = s.createRoot(n.menuContainer), a(), n.updatePosition(e.clientRect);
-        },
-        onUpdate: (e) => {
-          o = e.items, r = e.command, a(), n?.updatePosition(e.clientRect);
-        },
-        onKeyDown: (e) => u(e.event) ? !0 : i.current?.onKeyDown(e) ?? !1,
-        onExit: () => {
-          t?.unmount(), n?.destroy(), t = null, n = null;
-        }
-      };
-    }
-  };
+import { jsx as i } from "react/jsx-runtime";
+function e({ className: r }) {
+  return /* @__PURE__ */ i("span", { className: `vizel-toolbar-divider ${r ?? ""}` });
 }
 export {
-  z as createVizelSlashMenuRenderer
+  e as VizelToolbarDivider
 };

package/dist/index36.js

@@ -1,53 +1,36 @@
-import { VIZEL_DEFAULT_AUTO_SAVE_OPTIONS as c, createVizelAutoSaveHandlers as y } from "@vizel/core";
-import { useRef as h, useState as A, useCallback as u, useMemo as C, useEffect as R } from "react";
-function M(s, t = {}) {
-  const r = h(t);
-  r.current = t;
-  const n = t.enabled ?? c.enabled, d = t.debounceMs ?? c.debounceMs, l = t.storage ?? c.storage, v = t.key ?? c.key, [o, b] = A({
-    status: "saved",
-    hasUnsavedChanges: !1,
-    lastSaved: null,
-    error: null
-  }), f = h(s);
-  f.current = s;
-  const S = u((e) => {
-    b((m) => ({ ...m, ...e }));
-  }, []), a = C(
-    () => y(
-      () => f.current(),
-      {
-        enabled: n,
-        debounceMs: d,
-        storage: l,
-        key: v,
-        // Access callbacks through ref to avoid dependency on them
-        onSave: (e) => r.current.onSave?.(e),
-        onError: (e) => r.current.onError?.(e),
-        onRestore: (e) => r.current.onRestore?.(e)
-      },
-      S
-    ),
-    [n, d, l, v, S]
-  );
-  R(() => {
-    const e = s();
-    if (e && n)
-      return e.on("update", a.handleUpdate), () => {
-        e.off("update", a.handleUpdate), a.cancel();
-      };
-  }, [s, n, a]);
-  const U = u(async () => {
-    await a.saveNow();
-  }, [a]), g = u(async () => await a.restore(), [a]);
+import { handleVizelSuggestionEscape as u, createVizelSuggestionContainer as m } from "@vizel/core";
+import { createElement as c } from "react";
+import { c as s } from "./index46.js";
+import { VizelSlashMenu as d } from "./index28.js";
+function z(l = {}) {
   return {
-    status: o.status,
-    hasUnsavedChanges: o.hasUnsavedChanges,
-    lastSaved: o.lastSaved,
-    error: o.error,
-    save: U,
-    restore: g
+    render: () => {
+      let t = null, n = null, o = [], r = null;
+      const i = { current: null }, a = () => {
+        t && r && t.render(
+          c(d, {
+            items: o,
+            command: r,
+            ...l.className !== void 0 && { className: l.className },
+            ref: i
+          })
+        );
+      };
+      return {
+        onStart: (e) => {
+          o = e.items, r = e.command, n = m(), t = s.createRoot(n.menuContainer), a(), n.updatePosition(e.clientRect);
+        },
+        onUpdate: (e) => {
+          o = e.items, r = e.command, a(), n?.updatePosition(e.clientRect);
+        },
+        onKeyDown: (e) => u(e.event) ? !0 : i.current?.onKeyDown(e) ?? !1,
+        onExit: () => {
+          t?.unmount(), n?.destroy(), t = null, n = null;
+        }
+      };
+    }
   };
 }
 export {
-  M as useVizelAutoSave
+  z as createVizelSlashMenuRenderer
 };

package/dist/index37.js

@@ -1,40 +1,53 @@
-import { createVizelEditorInstance as g, registerVizelUploadEventHandler as E } from "@vizel/core";
-import { useState as x, useRef as d, useEffect as u } from "react";
-import { createVizelSlashMenuRenderer as O } from "./index35.js";
-function V(c = {}) {
-  const { features: r, extensions: l = [], ...f } = c, [e, p] = x(null), n = typeof r?.image == "object" ? r.image : {}, i = d(n);
-  i.current = n;
-  const m = d({
-    features: r,
-    additionalExtensions: l,
-    editorOptions: f
-  });
-  return u(() => {
-    const t = m.current;
-    let s = !0, a = null;
-    return (async () => {
-      const o = await g({
-        ...t.editorOptions,
-        ...t.features !== void 0 && { features: t.features },
-        extensions: t.additionalExtensions,
-        createSlashMenuRenderer: O
-      });
-      if (!s) {
-        o.editor.destroy();
-        return;
-      }
-      a = o.editor, p(o.editor);
-    })(), () => {
-      s = !1, a?.destroy();
-    };
-  }, []), u(() => {
-    if (e)
-      return E({
-        getEditor: () => e,
-        getImageOptions: () => i.current
-      });
-  }, [e]), e;
+import { VIZEL_DEFAULT_AUTO_SAVE_OPTIONS as c, createVizelAutoSaveHandlers as y } from "@vizel/core";
+import { useRef as h, useState as A, useCallback as u, useMemo as C, useEffect as R } from "react";
+function M(s, t = {}) {
+  const r = h(t);
+  r.current = t;
+  const n = t.enabled ?? c.enabled, d = t.debounceMs ?? c.debounceMs, l = t.storage ?? c.storage, v = t.key ?? c.key, [o, b] = A({
+    status: "saved",
+    hasUnsavedChanges: !1,
+    lastSaved: null,
+    error: null
+  }), f = h(s);
+  f.current = s;
+  const S = u((e) => {
+    b((m) => ({ ...m, ...e }));
+  }, []), a = C(
+    () => y(
+      () => f.current(),
+      {
+        enabled: n,
+        debounceMs: d,
+        storage: l,
+        key: v,
+        // Access callbacks through ref to avoid dependency on them
+        onSave: (e) => r.current.onSave?.(e),
+        onError: (e) => r.current.onError?.(e),
+        onRestore: (e) => r.current.onRestore?.(e)
+      },
+      S
+    ),
+    [n, d, l, v, S]
+  );
+  R(() => {
+    const e = s();
+    if (e && n)
+      return e.on("update", a.handleUpdate), () => {
+        e.off("update", a.handleUpdate), a.cancel();
+      };
+  }, [s, n, a]);
+  const U = u(async () => {
+    await a.saveNow();
+  }, [a]), g = u(async () => await a.restore(), [a]);
+  return {
+    status: o.status,
+    hasUnsavedChanges: o.hasUnsavedChanges,
+    lastSaved: o.lastSaved,
+    error: o.error,
+    save: U,
+    restore: g
+  };
 }
 export {
-  V as useVizelEditor
+  M as useVizelAutoSave
 };

package/dist/index38.js

@@ -1,10 +1,51 @@
-import { getVizelEditorState as r } from "@vizel/core";
-import { useMemo as i } from "react";
-import { useVizelState as u } from "./index40.js";
-function p(t) {
-  const o = u(t), e = t() ?? null;
-  return i(() => r(e), [e, o]);
+import { VIZEL_DEFAULT_COLLABORATION_OPTIONS as m, createVizelCollaborationHandlers as p } from "@vizel/core";
+import { useRef as d, useState as y, useCallback as u, useMemo as h, useEffect as E } from "react";
+function L(t, o = { user: { name: "Anonymous", color: "#6366f1" } }) {
+  const r = d(o);
+  r.current = o;
+  const c = o.enabled ?? m.enabled, [s, i] = y({
+    isConnected: !1,
+    isSynced: !1,
+    peerCount: 0,
+    error: null
+  }), a = d(t);
+  a.current = t;
+  const l = u((n) => {
+    i((b) => ({ ...b, ...n }));
+  }, []), e = h(
+    () => p(
+      () => a.current(),
+      {
+        enabled: c,
+        user: o.user,
+        onConnect: () => r.current.onConnect?.(),
+        onDisconnect: () => r.current.onDisconnect?.(),
+        onSynced: () => r.current.onSynced?.(),
+        onError: (n) => r.current.onError?.(n),
+        onPeersChange: (n) => r.current.onPeersChange?.(n)
+      },
+      l
+    ),
+    [c, o.user, l]
+  );
+  E(() => {
+    if (t() && c)
+      return e.subscribe();
+  }, [t, c, e]);
+  const C = u(() => e.connect(), [e]), f = u(() => e.disconnect(), [e]), S = u(
+    (n) => e.updateUser(n),
+    [e]
+  );
+  return {
+    isConnected: s.isConnected,
+    isSynced: s.isSynced,
+    peerCount: s.peerCount,
+    error: s.error,
+    connect: C,
+    disconnect: f,
+    updateUser: S
+  };
 }
 export {
-  p as useVizelEditorState
+  L as useVizelCollaboration
 };