@vizel/react 0.0.1-alpha.6 → 1.0.0

package/dist/index33.js

@@ -1,32 +1,33 @@
-import { createVizelEditorInstance as l, registerVizelUploadEventHandler as m } from "@vizel/core";
-import { useState as g, useRef as s, useEffect as a } from "react";
-import { createVizelSlashMenuRenderer as E } from "./index31.js";
-function z(u = {}) {
-  const { features: r, extensions: c = [], ...d } = u, [e, f] = g(null), n = typeof r?.image == "object" ? r.image : {}, o = s(n);
-  o.current = n;
-  const p = s({
-    features: r,
-    additionalExtensions: c,
-    editorOptions: d
-  });
-  return a(() => {
-    const t = p.current, { editor: i } = l({
-      ...t.editorOptions,
-      ...t.features !== void 0 && { features: t.features },
-      extensions: t.additionalExtensions,
-      createSlashMenuRenderer: E
-    });
-    return f(i), () => {
-      i.destroy();
-    };
-  }, []), a(() => {
-    if (e)
-      return m({
-        getEditor: () => e,
-        getImageOptions: () => o.current
-      });
-  }, [e]), e;
+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
+}) {
+  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 {
-  z as useVizelEditor
+  $ as VizelToolbarDefault
 };

package/dist/index34.js

@@ -1,10 +1,7 @@
-import { getVizelEditorState as r } from "@vizel/core";
-import { useMemo as i } from "react";
-import { useVizelState as u } from "./index36.js";
-function p(t) {
-  const o = u(t), e = t() ?? null;
-  return i(() => r(e), [e, o]);
+import { jsx as i } from "react/jsx-runtime";
+function e({ className: r }) {
+  return /* @__PURE__ */ i("span", { className: `vizel-toolbar-divider ${r ?? ""}` });
 }
 export {
-  p as useVizelEditorState
+  e as VizelToolbarDivider
 };

package/dist/index35.js

@@ -1,55 +1,36 @@
-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 { 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 {
-    markdown: M,
-    setMarkdown: h,
-    isPending: p,
-    flush: P
+    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 {
-  R as useVizelMarkdown
+  z as createVizelSlashMenuRenderer
 };

package/dist/index36.js

@@ -1,14 +1,53 @@
-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);
+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();
       };
-  }), o;
+  }, [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 {
-  s as useVizelState
+  M as useVizelAutoSave
 };

package/dist/index37.js

@@ -1,17 +1,40 @@
-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 { 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;
+}
 export {
-  t as createElement,
-  t as h,
-  t as jsx,
-  t as jsxDEV,
-  t as jsxs
+  V as useVizelEditor
 };

package/dist/index38.js

@@ -1,5 +1,10 @@
-import { __require as r } from "./index39.js";
-var i = r();
+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]);
+}
 export {
-  i as c
+  p as useVizelEditorState
 };

package/dist/index39.js

@@ -1,23 +1,55 @@
-import { __module as e } from "./index40.js";
-import { __require as t } from "./index41.js";
-import { __require as i } from "./index42.js";
-var _;
-function O() {
-  if (_) return e.exports;
-  _ = 1;
-  function r() {
-    if (!(typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ > "u" || typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE != "function")) {
-      if (process.env.NODE_ENV !== "production")
-        throw new Error("^_^");
-      try {
-        __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(r);
-      } catch (o) {
-        console.error(o);
+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;
     }
-  }
-  return process.env.NODE_ENV === "production" ? (r(), e.exports = t()) : e.exports = i(), e.exports;
+  }, [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 {
-  O as __require
+  R as useVizelMarkdown
 };

package/dist/index40.js

@@ -1,4 +1,14 @@
-var e = { exports: {} };
+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;
+}
 export {
-  e as __module
+  s as useVizelState
 };