@vizel/react 1.0.0 → 1.1.0

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

package/dist/index39.js

@@ -1,55 +1,74 @@
-import { createVizelMarkdownSyncHandlers as S, getVizelMarkdown as V } from "@vizel/core";
-import { useState as l, useRef as d, useEffect as c, useCallback as k } from "react";
-function R(r, m = {}) {
-  const { initialValue: s, ...w } = m, [M, a] = l(() => s ?? ""), [p, o] = l(!1), t = d(null);
-  t.current || (t.current = S(w));
-  const u = d(!1);
-  c(() => {
-    const e = r();
-    if (!(!e || u.current)) {
-      if (s !== void 0)
-        t.current?.setMarkdown(e, s), a(s);
-      else {
-        const n = V(e);
-        a(n);
-      }
-      u.current = !0;
-    }
-  }, [r, s]), c(() => {
-    const e = r();
-    if (!e) return;
-    const n = t.current;
-    if (!n) return;
-    const i = () => {
-      n.handleUpdate(e), o(n.isPending());
-      const f = () => {
-        n.isPending() ? requestAnimationFrame(f) : (a(n.getMarkdown()), o(!1));
-      };
-      requestAnimationFrame(f);
-    };
-    return e.on("update", i), () => {
-      e.off("update", i);
-    };
-  }, [r]), c(() => () => {
-    t.current?.destroy();
-  }, []);
-  const h = k(
-    (e) => {
-      const n = r();
-      n && (t.current?.setMarkdown(n, e), a(e), o(!1));
-    },
-    [r]
-  ), P = k(() => {
-    const e = r();
-    e && (t.current?.flush(e), a(t.current?.getMarkdown() ?? ""), o(!1));
-  }, [r]);
+import { VIZEL_DEFAULT_COMMENT_OPTIONS as d, createVizelCommentHandlers as k } from "@vizel/core";
+import { useRef as v, useState as E, useCallback as n, useMemo as S, useEffect as h } from "react";
+function V(s, m = {}) {
+  const t = v(m);
+  t.current = m;
+  const c = m.enabled ?? d.enabled, C = m.storage ?? d.storage, l = m.key ?? d.key, [a, f] = E({
+    comments: [],
+    activeCommentId: null,
+    isLoading: !1,
+    error: null
+  }), u = v(s);
+  u.current = s;
+  const i = n((e) => {
+    f((r) => ({ ...r, ...e }));
+  }, []), o = S(
+    () => k(
+      () => u.current(),
+      {
+        enabled: c,
+        storage: C,
+        key: l,
+        onAdd: (e) => t.current.onAdd?.(e),
+        onRemove: (e) => t.current.onRemove?.(e),
+        onResolve: (e) => t.current.onResolve?.(e),
+        onReopen: (e) => t.current.onReopen?.(e),
+        onError: (e) => t.current.onError?.(e)
+      },
+      i
+    ),
+    [c, C, l, i]
+  );
+  h(() => {
+    s() && c && o.loadComments();
+  }, [s, c, o]);
+  const R = n(
+    (e, r) => o.addComment(e, r),
+    [o]
+  ), g = n(
+    (e) => o.removeComment(e),
+    [o]
+  ), y = n(
+    (e) => o.resolveComment(e),
+    [o]
+  ), I = n(
+    (e) => o.reopenComment(e),
+    [o]
+  ), p = n(
+    (e, r, b) => o.replyToComment(e, r, b),
+    [o]
+  ), A = n(
+    (e) => o.setActiveComment(e),
+    [o]
+  ), L = n(() => o.loadComments(), [o]), T = n(
+    (e) => o.getCommentById(e),
+    [o]
+  );
   return {
-    markdown: M,
-    setMarkdown: h,
-    isPending: p,
-    flush: P
+    comments: a.comments,
+    activeCommentId: a.activeCommentId,
+    isLoading: a.isLoading,
+    error: a.error,
+    addComment: R,
+    removeComment: g,
+    resolveComment: y,
+    reopenComment: I,
+    replyToComment: p,
+    setActiveComment: A,
+    loadComments: L,
+    getCommentById: T
   };
 }
 export {
-  R as useVizelMarkdown
+  V as useVizelComment
 };

package/dist/index40.js

@@ -1,14 +1,48 @@
-import { useReducer as u, useRef as c, useEffect as f } from "react";
-function s(n) {
-  const [o, r] = u((t) => t + 1, 0), e = c(null);
-  return f(() => {
-    const t = n() ?? null;
-    if (e.current && e.current !== t && e.current.off("transaction", r), e.current = t, !!t)
-      return t.on("transaction", r), () => {
-        t.off("transaction", r);
-      };
-  }), o;
+import { createVizelEditorInstance as g, wrapAsVizelError as z, registerVizelUploadEventHandler as I } from "@vizel/core";
+import { useState as O, useRef as c, useEffect as u } from "react";
+import { createVizelSlashMenuRenderer as x } from "./index36.js";
+function h(l = {}) {
+  const { features: o, extensions: f = [], ...p } = l, [r, E] = O(null), i = typeof o?.image == "object" ? o.image : {}, n = c(i);
+  n.current = i;
+  const m = c({
+    features: o,
+    additionalExtensions: f,
+    editorOptions: p
+  });
+  return u(() => {
+    const e = m.current;
+    let s = !0, a = null;
+    return (async () => {
+      try {
+        const t = await g({
+          ...e.editorOptions,
+          ...e.features !== void 0 && { features: e.features },
+          extensions: e.additionalExtensions,
+          createSlashMenuRenderer: x
+        });
+        if (!s) {
+          t.editor.destroy();
+          return;
+        }
+        a = t.editor, E(t.editor);
+      } catch (t) {
+        const d = z(t, {
+          context: "Editor initialization failed",
+          code: "EDITOR_INIT_FAILED"
+        });
+        throw e.editorOptions.onError?.(d), d;
+      }
+    })(), () => {
+      s = !1, a?.destroy();
+    };
+  }, []), u(() => {
+    if (r)
+      return I({
+        getEditor: () => r,
+        getImageOptions: () => n.current
+      });
+  }, [r]), r;
 }
 export {
-  s as useVizelState
+  h as useVizelEditor
 };

package/dist/index41.js

@@ -1,17 +1,10 @@
-var t = (e, n) => {
-  if (e === "slot")
-    return 0;
-  if (e instanceof Function)
-    return e(n);
-  const { children: r, ...s } = n ?? {};
-  if (e === "svg")
-    throw new Error("SVG elements are not supported in the JSX syntax, use the array syntax instead");
-  return [e, s, r];
-};
+import { getVizelEditorState as r } from "@vizel/core";
+import { useMemo as i } from "react";
+import { useVizelState as u } from "./index43.js";
+function p(t) {
+  const o = u(t), e = t() ?? null;
+  return i(() => r(e), [e, o]);
+}
 export {
-  t as createElement,
-  t as h,
-  t as jsx,
-  t as jsxDEV,
-  t as jsxs
+  p as useVizelEditorState
 };

package/dist/index42.js

@@ -1,5 +1,55 @@
-import { __require as r } from "./index43.js";
-var i = r();
+import { createVizelMarkdownSyncHandlers as S, getVizelMarkdown as V } from "@vizel/core";
+import { useState as l, useRef as d, useEffect as c, useCallback as k } from "react";
+function R(r, m = {}) {
+  const { initialValue: s, ...w } = m, [M, a] = l(() => s ?? ""), [p, o] = l(!1), t = d(null);
+  t.current || (t.current = S(w));
+  const u = d(!1);
+  c(() => {
+    const e = r();
+    if (!(!e || u.current)) {
+      if (s !== void 0)
+        t.current?.setMarkdown(e, s), a(s);
+      else {
+        const n = V(e);
+        a(n);
+      }
+      u.current = !0;
+    }
+  }, [r, s]), c(() => {
+    const e = r();
+    if (!e) return;
+    const n = t.current;
+    if (!n) return;
+    const i = () => {
+      n.handleUpdate(e), o(n.isPending());
+      const f = () => {
+        n.isPending() ? requestAnimationFrame(f) : (a(n.getMarkdown()), o(!1));
+      };
+      requestAnimationFrame(f);
+    };
+    return e.on("update", i), () => {
+      e.off("update", i);
+    };
+  }, [r]), c(() => () => {
+    t.current?.destroy();
+  }, []);
+  const h = k(
+    (e) => {
+      const n = r();
+      n && (t.current?.setMarkdown(n, e), a(e), o(!1));
+    },
+    [r]
+  ), P = k(() => {
+    const e = r();
+    e && (t.current?.flush(e), a(t.current?.getMarkdown() ?? ""), o(!1));
+  }, [r]);
+  return {
+    markdown: M,
+    setMarkdown: h,
+    isPending: p,
+    flush: P
+  };
+}
 export {
-  i as c
+  R as useVizelMarkdown
 };