@vizel/react 0.0.1-alpha.1

package/dist/index2.js

@@ -0,0 +1,26 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useContext as r, createContext as i } from "react";
+const t = i(null);
+function x({ editor: e, children: n }) {
+  return /* @__PURE__ */ o(t.Provider, { value: { editor: e }, children: n });
+}
+function z() {
+  const e = r(t);
+  if (e === null)
+    throw new Error(
+      `[Vizel] useVizelContext must be used within <VizelProvider> or <Vizel>.
+Example:
+  <VizelProvider editor={editor}>
+    <YourComponent />
+  </VizelProvider>`
+    );
+  return e;
+}
+function V() {
+  return r(t);
+}
+export {
+  x as VizelInternalProvider,
+  z as useVizelContext,
+  V as useVizelContextSafe
+};

package/dist/index20.js

@@ -0,0 +1,94 @@
+import { jsx as u, jsxs as E } from "react/jsx-runtime";
+import { groupVizelSlashCommands as D } from "@vizel/core";
+import { useState as N, useRef as j, useMemo as b, useEffect as p, useCallback as h, useImperativeHandle as A } from "react";
+import { VizelSlashMenuEmpty as R } from "./index21.js";
+import { VizelSlashMenuItem as $ } from "./index22.js";
+function B({
+  ref: S,
+  items: m,
+  command: v,
+  className: x,
+  showGroups: z = !0,
+  renderItem: I,
+  renderEmpty: y,
+  groupOrder: k
+}) {
+  const [i, f] = N(0), c = j([]), r = b(() => !z || m.length <= 5 ? [{ name: "", items: m }] : D(m, k), [m, z, k]), t = b(() => r.flatMap((e) => e.items), [r]);
+  p(() => {
+    c.current.length > t.length && (c.current.length = t.length);
+  }, [t.length]), p(() => {
+    const e = c.current[i];
+    e && e.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [i]);
+  const d = h(
+    (e) => {
+      const s = t[e];
+      s && v(s);
+    },
+    [t, v]
+  ), w = h(() => {
+    f((e) => (e + t.length - 1) % t.length);
+  }, [t.length]), H = h(() => {
+    f((e) => (e + 1) % t.length);
+  }, [t.length]), M = h(() => {
+    d(i);
+  }, [d, i]), V = h(() => {
+    if (r.length <= 1) return;
+    let e = 0, s = 0;
+    for (let n = 0; n < r.length; n++) {
+      const l = r[n];
+      if (l) {
+        if (i < s + l.items.length) {
+          e = n;
+          break;
+        }
+        s += l.items.length;
+      }
+    }
+    const a = (e + 1) % r.length;
+    let o = 0;
+    for (let n = 0; n < a; n++) {
+      const l = r[n];
+      l && (o += l.items.length);
+    }
+    f(o);
+  }, [r, i]);
+  if (p(() => {
+    f(0);
+  }, [r]), A(S, () => ({
+    onKeyDown: ({ event: e }) => e.key === "ArrowUp" ? (w(), !0) : e.key === "ArrowDown" ? (H(), !0) : e.key === "Enter" ? (M(), !0) : e.key === "Tab" ? (e.preventDefault(), V(), !0) : !1
+  })), t.length === 0)
+    return /* @__PURE__ */ u("div", { className: `vizel-slash-menu ${x ?? ""}`, "data-vizel-slash-menu": "", children: y?.() ?? /* @__PURE__ */ u(R, {}) });
+  let C = 0;
+  return /* @__PURE__ */ u("div", { className: `vizel-slash-menu ${x ?? ""}`, "data-vizel-slash-menu": "", children: r.map((e) => {
+    const s = e.items.map((a) => {
+      const o = C++, n = o === i, l = () => d(o);
+      return I ? /* @__PURE__ */ u(
+        "div",
+        {
+          ref: (g) => {
+            c.current[o] = g;
+          },
+          children: I({ item: a, isSelected: n, onClick: l })
+        },
+        a.title
+      ) : /* @__PURE__ */ u(
+        "div",
+        {
+          ref: (g) => {
+            c.current[o] = g;
+          },
+          children: /* @__PURE__ */ u($, { item: a, isSelected: n, onClick: l })
+        },
+        a.title
+      );
+    });
+    return e.name ? /* @__PURE__ */ E("div", { className: "vizel-slash-menu-group", "data-vizel-slash-menu-group": !0, children: [
+      /* @__PURE__ */ u("div", { className: "vizel-slash-menu-group-header", children: e.name }),
+      s
+    ] }, e.name) : s;
+  }) });
+}
+export {
+  B as VizelSlashMenu
+};

package/dist/index21.js

@@ -0,0 +1,7 @@
+import { jsx as l } from "react/jsx-runtime";
+function m({ children: e, className: s }) {
+  return /* @__PURE__ */ l("div", { className: `vizel-slash-menu-empty ${s ?? ""}`, "data-vizel-slash-menu-empty": "", children: e ?? "No results" });
+}
+export {
+  m as VizelSlashMenuEmpty
+};

package/dist/index22.js

@@ -0,0 +1,39 @@
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
+import { splitVizelTextByMatches as c } from "@vizel/core";
+import { VizelIcon as r } from "./index14.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
+}) {
+  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 })
+      ]
+    }
+  );
+}
+export {
+  p as VizelSlashMenuItem
+};

package/dist/index23.js

@@ -0,0 +1,36 @@
+import { handleVizelSuggestionEscape as u, createVizelSuggestionContainer as m } from "@vizel/core";
+import { createElement as c } from "react";
+import { c as s } from "./index29.js";
+import { VizelSlashMenu as d } from "./index20.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;
+        }
+      };
+    }
+  };
+}
+export {
+  z as createVizelSlashMenuRenderer
+};

package/dist/index24.js

@@ -0,0 +1,53 @@
+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 {
+  M as useVizelAutoSave
+};

package/dist/index25.js

@@ -0,0 +1,32 @@
+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 "./index23.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;
+}
+export {
+  z as useVizelEditor
+};

package/dist/index26.js

@@ -0,0 +1,10 @@
+import { getVizelEditorState as r } from "@vizel/core";
+import { useMemo as i } from "react";
+import { useVizelState as u } from "./index28.js";
+function p(t) {
+  const o = u(t), e = t() ?? null;
+  return i(() => r(e), [e, o]);
+}
+export {
+  p as useVizelEditorState
+};

package/dist/index27.js

@@ -0,0 +1,55 @@
+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 {
+  R as useVizelMarkdown
+};

package/dist/index28.js

@@ -0,0 +1,14 @@
+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 {
+  s as useVizelState
+};

package/dist/index29.js

@@ -0,0 +1,5 @@
+import { __require as r } from "./index30.js";
+var i = r();
+export {
+  i as c
+};

package/dist/index3.js

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

package/dist/index30.js

@@ -0,0 +1,23 @@
+import { __module as e } from "./index31.js";
+import { __require as t } from "./index32.js";
+import { __require as i } from "./index33.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);
+      }
+    }
+  }
+  return process.env.NODE_ENV === "production" ? (r(), e.exports = t()) : e.exports = i(), e.exports;
+}
+export {
+  O as __require
+};

package/dist/index31.js

@@ -0,0 +1,4 @@
+var e = { exports: {} };
+export {
+  e as __module
+};