@blockslides/vue-3 0.2.0

package/dist/index.js

@@ -0,0 +1,718 @@
+import { Editor as D, MarkView as A, NodeView as R } from "@blockslides/core";
+export * from "@blockslides/core";
+import { markRaw as j, customRef as F, defineComponent as p, h as m, ref as M, getCurrentInstance as I, watchEffect as U, nextTick as T, unref as c, onBeforeUnmount as O, shallowRef as W, onMounted as B, computed as S, watch as V, openBlock as w, createElementBlock as L, normalizeStyle as z, normalizeClass as H, createElementVNode as $, createVNode as J, createBlock as K, mergeProps as G, createCommentVNode as _, reactive as Q, render as P, toRaw as X, provide as k } from "vue";
+import { templatesV1 as Y } from "@blockslides/ai-context";
+import { ExtensionKit as Z } from "@blockslides/extension-kit";
+import { _ as ee } from "./FloatingMenu-BKkixozS.js";
+import { B as ke, F as Ne } from "./FloatingMenu-BKkixozS.js";
+function N(r) {
+  return F((e, t) => ({
+    get() {
+      return e(), r;
+    },
+    set(o) {
+      r = o, requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          t();
+        });
+      });
+    }
+  }));
+}
+class te extends D {
+  constructor(e = {}) {
+    return super(e), this.contentComponent = null, this.appContext = null, this.reactiveState = N(this.view.state), this.reactiveExtensionStorage = N(this.extensionStorage), this.on("beforeTransaction", ({ nextState: t }) => {
+      this.reactiveState.value = t, this.reactiveExtensionStorage.value = this.extensionStorage;
+    }), j(this);
+  }
+  get state() {
+    return this.reactiveState ? this.reactiveState.value : this.view.state;
+  }
+  get storage() {
+    return this.reactiveExtensionStorage ? this.reactiveExtensionStorage.value : super.storage;
+  }
+  /**
+   * Register a ProseMirror plugin.
+   */
+  registerPlugin(e, t) {
+    const o = super.registerPlugin(e, t);
+    return this.reactiveState && (this.reactiveState.value = o), o;
+  }
+  /**
+   * Unregister a ProseMirror plugin.
+   */
+  unregisterPlugin(e) {
+    const t = super.unregisterPlugin(e);
+    return this.reactiveState && t && (this.reactiveState.value = t), t;
+  }
+}
+const oe = p({
+  name: "EditorContent",
+  props: {
+    editor: {
+      default: null,
+      type: Object
+    }
+  },
+  setup(r) {
+    const e = M(), t = I();
+    return U(() => {
+      const o = r.editor;
+      o && o.options.element && e.value && T(() => {
+        var i;
+        if (!e.value || !((i = o.view.dom) != null && i.parentNode))
+          return;
+        const n = c(e.value);
+        e.value.append(...o.view.dom.parentNode.childNodes), o.contentComponent = t.ctx._, t && (o.appContext = {
+          ...t.appContext,
+          // Vue internally uses prototype chain to forward/shadow injects across the entire component chain
+          // so don't use object spread operator or 'Object.assign' and just set `provides` as is on editor's appContext
+          // @ts-expect-error forward instance's 'provides' into appContext
+          provides: t.provides
+        }), o.setOptions({
+          element: n
+        }), o.createNodeViews();
+      });
+    }), O(() => {
+      const o = r.editor;
+      o && (o.contentComponent = null, o.appContext = null);
+    }), { rootEl: e };
+  },
+  render() {
+    return m("div", {
+      ref: (r) => {
+        this.rootEl = r;
+      }
+    });
+  }
+}), fe = p({
+  name: "NodeViewContent",
+  props: {
+    as: {
+      type: String,
+      default: "div"
+    }
+  },
+  render() {
+    return m(this.as, {
+      style: {
+        whiteSpace: "pre-wrap"
+      },
+      "data-node-view-content": ""
+    });
+  }
+}), Se = p({
+  name: "NodeViewWrapper",
+  props: {
+    as: {
+      type: String,
+      default: "div"
+    }
+  },
+  inject: ["onDragStart", "decorationClasses"],
+  render() {
+    var r, e;
+    return m(
+      this.as,
+      {
+        // @ts-ignore
+        class: this.decorationClasses,
+        style: {
+          whiteSpace: "normal"
+        },
+        "data-node-view-wrapper": "",
+        // @ts-ignore (https://github.com/vuejs/vue-next/issues/3031)
+        onDragstart: this.onDragStart
+      },
+      (e = (r = this.$slots).default) == null ? void 0 : e.call(r)
+    );
+  }
+}), ne = (r = {}) => {
+  console.log("[useEditor] THE OPTIONS ARE:", r), console.log("[useEditor] Creating editor with options:", r), console.log("[useEditor] options.enableCoreExtensions:", r.enableCoreExtensions), console.log("[useEditor] options.injectCSS:", r.injectCSS);
+  const e = W();
+  return B(() => {
+    var t;
+    console.log("[useEditor] onMounted - Creating Editor instance"), console.log("[useEditor] onMounted - options:", r), console.log("[useEditor] onMounted - options.enableCoreExtensions:", r.enableCoreExtensions), e.value = new te(r), console.log("[useEditor] Editor instance created:", e.value), console.log("[useEditor] Editor view:", (t = e.value) == null ? void 0 : t.view);
+  }), O(() => {
+    var n, i, s, l;
+    console.log("[useEditor] onBeforeUnmount - Cleaning up editor");
+    const t = (i = (n = e.value) == null ? void 0 : n.view.dom) == null ? void 0 : i.parentNode, o = t == null ? void 0 : t.cloneNode(!0);
+    (s = t == null ? void 0 : t.parentNode) == null || s.replaceChild(o, t), (l = e.value) == null || l.destroy();
+  }), e;
+}, re = () => ({
+  /**
+   * Placeholder slide if no content is provided.
+   */
+  type: "doc",
+  content: [
+    {
+      type: "slide",
+      attrs: {
+        size: "16x9",
+        className: "",
+        id: "slide-1",
+        backgroundMode: "none",
+        backgroundColor: null,
+        backgroundImage: null,
+        backgroundOverlayColor: null,
+        backgroundOverlayOpacity: null
+      },
+      content: [
+        {
+          type: "column",
+          attrs: {
+            align: "center",
+            padding: "lg",
+            margin: null,
+            gap: "md",
+            backgroundColor: "#ffffff",
+            backgroundImage: null,
+            borderRadius: null,
+            border: null,
+            fill: !0,
+            width: null,
+            height: null,
+            justify: "center"
+          },
+          content: [
+            {
+              type: "heading",
+              attrs: {
+                align: null,
+                padding: null,
+                margin: null,
+                gap: null,
+                backgroundColor: null,
+                backgroundImage: null,
+                borderRadius: null,
+                border: null,
+                fill: null,
+                width: null,
+                height: null,
+                justify: null,
+                id: "1fc4664c-333d-4203-a3f1-3ad27a54c535",
+                "data-toc-id": "1fc4664c-333d-4203-a3f1-3ad27a54c535",
+                level: 1
+              },
+              content: [
+                {
+                  type: "text",
+                  text: "Lorem ipsum dolor sit amet"
+                }
+              ]
+            },
+            {
+              type: "paragraph",
+              attrs: {
+                align: null,
+                padding: null,
+                margin: null,
+                gap: null,
+                backgroundColor: null,
+                backgroundImage: null,
+                borderRadius: null,
+                border: null,
+                fill: null,
+                width: null,
+                height: null,
+                justify: null
+              },
+              content: [
+                {
+                  type: "text",
+                  text: "Consectetur adipiscing elit. Sed do eiusmod tempor incididunt. "
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}), ie = (r) => ({
+  showPresets: !0,
+  presets: r,
+  presetBackground: "#0f172a",
+  presetForeground: "#e5e7eb"
+}), se = {
+  renderMode: "dynamic",
+  hoverOutline: { color: "#3b82f6", width: "1.5px", offset: "4px" },
+  hoverOutlineCascade: !1
+}, de = (r = {}) => {
+  console.log("[useSlideEditor] Called with props:", r);
+  const {
+    content: e,
+    onChange: t,
+    extensions: o,
+    extensionKitOptions: n,
+    presetTemplates: i,
+    onEditorReady: s,
+    theme: l = "light",
+    editorProps: a,
+    onUpdate: u,
+    ...g
+  } = r;
+  console.log("[useSlideEditor] editorOptions:", g), console.log("[useSlideEditor] editorOptions.enableCoreExtensions:", g.enableCoreExtensions), console.log("[useSlideEditor] editorOptions.injectCSS:", g.injectCSS), console.log("[useSlideEditor] Content:", e), console.log("[useSlideEditor] ExtensionKitOptions:", n);
+  const E = S(
+    () => i ?? Y.listPresetTemplates()
+  ), v = S(() => {
+    const d = (n == null ? void 0 : n.addSlideButton) === !1 ? !1 : {
+      ...ie(E.value),
+      ...(n == null ? void 0 : n.addSlideButton) ?? {}
+    }, h = (n == null ? void 0 : n.slide) === !1 ? !1 : {
+      ...se,
+      ...(n == null ? void 0 : n.slide) ?? {}
+    }, y = {
+      ...n,
+      addSlideButton: d,
+      slide: h
+    };
+    return console.log("[useSlideEditor] mergedExtensionKitOptions:", y), console.log("[useSlideEditor] addSlideButton config:", y.addSlideButton), console.log("[useSlideEditor] presets:", E.value), y;
+  }), C = S(() => {
+    console.log("[useSlideEditor] Configuring ExtensionKit with options:", v.value);
+    const d = Z.configure(v.value);
+    console.log("[useSlideEditor] ExtensionKit configured:", d), console.log("[useSlideEditor] ExtensionKit name:", d.name);
+    const h = o ? [d, ...o] : [d];
+    return console.log("[useSlideEditor] Final extensions array:", h), h;
+  }), x = e ?? re();
+  console.log("[useSlideEditor] Initial content resolved:", x), console.log("[useSlideEditor] Resolved extensions:", C.value);
+  const f = {
+    content: x,
+    extensions: C.value,
+    theme: l,
+    editorProps: {
+      attributes: {
+        autocomplete: "off",
+        autocorrect: "off",
+        autocapitalize: "off",
+        class: "min-h-full min-w-full",
+        ...(a == null ? void 0 : a.attributes) ?? {}
+      },
+      ...a
+    },
+    ...g,
+    onUpdate: (d) => {
+      console.log("[useSlideEditor] onUpdate called");
+      const h = d.editor.getJSON();
+      t == null || t(h, d.editor), u == null || u(d);
+    }
+  };
+  console.log("[useSlideEditor] Final editor config:", f), console.log("[useSlideEditor] Final editor config enableCoreExtensions:", f.enableCoreExtensions), console.log("[useSlideEditor] Final editor config injectCSS:", f.injectCSS);
+  const b = ne(f);
+  return console.log("[useSlideEditor] Editor ref created:", b), V(
+    b,
+    (d) => {
+      console.log("[useSlideEditor] Editor watch triggered, newEditor:", d), d && !d.isDestroyed ? (console.log("[useSlideEditor] ✅ Calling onEditorReady"), s == null || s(d)) : console.log("[useSlideEditor] ❌ Editor not ready or destroyed");
+    },
+    { immediate: !0 }
+  ), { editor: b, presets: E };
+}, le = { class: "bs-viewport" }, Ee = /* @__PURE__ */ p({
+  __name: "SlideEditor",
+  props: {
+    bubbleMenuPreset: { type: [Boolean, Object], default: !0 },
+    className: {},
+    style: {},
+    content: {},
+    onChange: {},
+    extensions: {},
+    extensionKitOptions: {},
+    presetTemplates: {},
+    onEditorReady: {},
+    element: {},
+    theme: {},
+    injectCSS: { type: Boolean },
+    injectNonce: {},
+    autofocus: { type: [String, Number, Boolean, null] },
+    editable: { type: Boolean },
+    editorProps: {},
+    parseOptions: {},
+    coreExtensionOptions: {},
+    enableInputRules: { type: [Array, Boolean] },
+    enablePasteRules: { type: [Array, Boolean] },
+    enableCoreExtensions: { type: [Boolean, Object] },
+    enableContentCheck: { type: Boolean },
+    emitContentError: { type: Boolean },
+    onBeforeCreate: {},
+    onCreate: {},
+    onMount: {},
+    onUnmount: {},
+    onContentError: {},
+    onUpdate: {},
+    onSelectionUpdate: {},
+    onTransaction: {},
+    onFocus: {},
+    onBlur: {},
+    onDestroy: {},
+    onPaste: {},
+    onDrop: {},
+    onDelete: {}
+  },
+  setup(r) {
+    console.log("[SlideEditor.vue] Component loading");
+    const e = r;
+    console.log("[SlideEditor.vue] Props:", e), console.log("[SlideEditor.vue] Props.enableCoreExtensions:", e.enableCoreExtensions), console.log("[SlideEditor.vue] Props.injectCSS:", e.injectCSS);
+    const {
+      bubbleMenuPreset: t,
+      className: o,
+      style: n,
+      ...i
+    } = e;
+    console.log("[SlideEditor.vue] Hook props:", i), console.log("[SlideEditor.vue] hookProps.enableCoreExtensions:", i.enableCoreExtensions), console.log("[SlideEditor.vue] hookProps.injectCSS:", i.injectCSS);
+    const { editor: s, presets: l } = de(i);
+    console.log("[SlideEditor.vue] Editor from useSlideEditor:", s);
+    const a = S(() => e.bubbleMenuPreset === !1 ? null : e.bubbleMenuPreset === !0 ? {} : e.bubbleMenuPreset);
+    return V(s, (u) => {
+      console.log("[SlideEditor.vue] Editor watch - newEditor:", u), console.log("[SlideEditor.vue] Editor exists:", !!u);
+    }, { immediate: !0 }), B(() => {
+      console.log("[SlideEditor.vue] Component mounted"), console.log("[SlideEditor.vue] Editor value:", s.value);
+    }), (u, g) => c(s) ? (w(), L("div", {
+      key: 0,
+      class: H(c(o)),
+      style: z(c(n))
+    }, [
+      $("div", le, [
+        J(c(oe), { editor: c(s) }, null, 8, ["editor"]),
+        a.value ? (w(), K(ee, G({
+          key: 0,
+          editor: c(s)
+        }, a.value), null, 16, ["editor"])) : _("", !0)
+      ])
+    ], 6)) : _("", !0);
+  }
+});
+class q {
+  constructor(e, { props: t = {}, editor: o }) {
+    this.destroyed = !1, this.editor = o, this.component = j(e), this.el = document.createElement("div"), this.props = Q(t), this.renderedComponent = this.renderComponent();
+  }
+  get element() {
+    return this.renderedComponent.el;
+  }
+  get ref() {
+    var e, t, o, n;
+    return (t = (e = this.renderedComponent.vNode) == null ? void 0 : e.component) != null && t.exposed ? this.renderedComponent.vNode.component.exposed : (n = (o = this.renderedComponent.vNode) == null ? void 0 : o.component) == null ? void 0 : n.proxy;
+  }
+  renderComponent() {
+    if (this.destroyed)
+      return this.renderedComponent;
+    let e = m(this.component, this.props);
+    return this.editor.appContext && (e.appContext = this.editor.appContext), typeof document < "u" && this.el && P(e, this.el), { vNode: e, destroy: () => {
+      this.el && P(null, this.el), this.el = null, e = null;
+    }, el: this.el ? this.el.firstElementChild : null };
+  }
+  updateProps(e = {}) {
+    this.destroyed || (Object.entries(e).forEach(([t, o]) => {
+      this.props[t] = o;
+    }), this.renderComponent());
+  }
+  destroy() {
+    this.destroyed || (this.destroyed = !0, this.renderedComponent.destroy());
+  }
+}
+const be = {
+  editor: {
+    type: Object,
+    required: !0
+  },
+  mark: {
+    type: Object,
+    required: !0
+  },
+  extension: {
+    type: Object,
+    required: !0
+  },
+  inline: {
+    type: Boolean,
+    required: !0
+  },
+  view: {
+    type: Object,
+    required: !0
+  },
+  updateAttributes: {
+    type: Function,
+    required: !0
+  },
+  HTMLAttributes: {
+    type: Object,
+    required: !0
+  }
+}, ye = p({
+  name: "MarkViewContent",
+  props: {
+    as: {
+      type: String,
+      default: "span"
+    }
+  },
+  render() {
+    return m(this.as, {
+      style: {
+        whiteSpace: "inherit"
+      },
+      "data-mark-view-content": ""
+    });
+  }
+});
+class ae extends A {
+  constructor(e, t, o) {
+    super(e, t, o);
+    const n = { ...t, updateAttributes: this.updateAttributes.bind(this) }, i = p({
+      extends: { ...e },
+      props: Object.keys(n),
+      template: this.component.template,
+      setup: (s) => {
+        var l;
+        return (l = e.setup) == null ? void 0 : l.call(e, s, {
+          expose: () => {
+          }
+        });
+      },
+      // Add support for scoped styles
+      __scopeId: e.__scopeId,
+      __cssModules: e.__cssModules,
+      __name: e.__name,
+      __file: e.__file
+    });
+    this.renderer = new q(i, {
+      editor: this.editor,
+      props: n
+    });
+  }
+  get dom() {
+    return this.renderer.element;
+  }
+  get contentDOM() {
+    return this.dom.querySelector("[data-mark-view-content]");
+  }
+  updateAttributes(e) {
+    const t = X(this.mark);
+    super.updateAttributes(e, t);
+  }
+  destroy() {
+    this.renderer.destroy();
+  }
+}
+function ve(r, e = {}) {
+  return (t) => t.editor.contentComponent ? new ae(r, t, e) : {};
+}
+const Ce = {
+  editor: {
+    type: Object,
+    required: !0
+  },
+  node: {
+    type: Object,
+    required: !0
+  },
+  decorations: {
+    type: Object,
+    required: !0
+  },
+  selected: {
+    type: Boolean,
+    required: !0
+  },
+  extension: {
+    type: Object,
+    required: !0
+  },
+  getPos: {
+    type: Function,
+    required: !0
+  },
+  updateAttributes: {
+    type: Function,
+    required: !0
+  },
+  deleteNode: {
+    type: Function,
+    required: !0
+  },
+  view: {
+    type: Object,
+    required: !0
+  },
+  innerDecorations: {
+    type: Object,
+    required: !0
+  },
+  HTMLAttributes: {
+    type: Object,
+    required: !0
+  }
+};
+class ue extends R {
+  constructor() {
+    super(...arguments), this.cachedExtensionWithSyncedStorage = null;
+  }
+  /**
+   * Returns a proxy of the extension that redirects storage access to the editor's mutable storage.
+   * This preserves the original prototype chain (instanceof checks, methods like configure/extend work).
+   * Cached to avoid proxy creation on every update.
+   */
+  get extensionWithSyncedStorage() {
+    if (!this.cachedExtensionWithSyncedStorage) {
+      const e = this.editor, t = this.extension;
+      this.cachedExtensionWithSyncedStorage = new Proxy(t, {
+        get(o, n, i) {
+          return n === "storage" ? e.storage[t.name] ?? {} : Reflect.get(o, n, i);
+        }
+      });
+    }
+    return this.cachedExtensionWithSyncedStorage;
+  }
+  mount() {
+    const e = {
+      editor: this.editor,
+      node: this.node,
+      decorations: this.decorations,
+      innerDecorations: this.innerDecorations,
+      view: this.view,
+      selected: !1,
+      extension: this.extensionWithSyncedStorage,
+      HTMLAttributes: this.HTMLAttributes,
+      getPos: () => this.getPos(),
+      updateAttributes: (n = {}) => this.updateAttributes(n),
+      deleteNode: () => this.deleteNode()
+    }, t = this.onDragStart.bind(this);
+    this.decorationClasses = M(this.getDecorationClasses());
+    const o = p({
+      extends: { ...this.component },
+      props: Object.keys(e),
+      template: this.component.template,
+      setup: (n) => {
+        var i, s;
+        return k("onDragStart", t), k("decorationClasses", this.decorationClasses), (s = (i = this.component).setup) == null ? void 0 : s.call(i, n, {
+          expose: () => {
+          }
+        });
+      },
+      // add support for scoped styles
+      // @ts-ignore
+      // eslint-disable-next-line
+      __scopeId: this.component.__scopeId,
+      // add support for CSS Modules
+      // @ts-ignore
+      // eslint-disable-next-line
+      __cssModules: this.component.__cssModules,
+      // add support for vue devtools
+      // @ts-ignore
+      // eslint-disable-next-line
+      __name: this.component.__name,
+      // @ts-ignore
+      // eslint-disable-next-line
+      __file: this.component.__file
+    });
+    this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this), this.editor.on("selectionUpdate", this.handleSelectionUpdate), this.renderer = new q(o, {
+      editor: this.editor,
+      props: e
+    });
+  }
+  /**
+   * Return the DOM element.
+   * This is the element that will be used to display the node view.
+   */
+  get dom() {
+    if (!this.renderer.element || !this.renderer.element.hasAttribute("data-node-view-wrapper"))
+      throw Error("Please use the NodeViewWrapper component for your node view.");
+    return this.renderer.element;
+  }
+  /**
+   * Return the content DOM element.
+   * This is the element that will be used to display the rich-text content of the node.
+   */
+  get contentDOM() {
+    return this.node.isLeaf ? null : this.dom.querySelector("[data-node-view-content]");
+  }
+  /**
+   * On editor selection update, check if the node is selected.
+   * If it is, call `selectNode`, otherwise call `deselectNode`.
+   */
+  handleSelectionUpdate() {
+    const { from: e, to: t } = this.editor.state.selection, o = this.getPos();
+    if (typeof o == "number")
+      if (e <= o && t >= o + this.node.nodeSize) {
+        if (this.renderer.props.selected)
+          return;
+        this.selectNode();
+      } else {
+        if (!this.renderer.props.selected)
+          return;
+        this.deselectNode();
+      }
+  }
+  /**
+   * On update, update the Vue component.
+   * To prevent unnecessary updates, the `update` option can be used.
+   */
+  update(e, t, o) {
+    const n = (i) => {
+      this.decorationClasses.value = this.getDecorationClasses(), this.renderer.updateProps(i);
+    };
+    if (typeof this.options.update == "function") {
+      const i = this.node, s = this.decorations, l = this.innerDecorations;
+      return this.node = e, this.decorations = t, this.innerDecorations = o, this.options.update({
+        oldNode: i,
+        oldDecorations: s,
+        newNode: e,
+        newDecorations: t,
+        oldInnerDecorations: l,
+        innerDecorations: o,
+        updateProps: () => n({ node: e, decorations: t, innerDecorations: o, extension: this.extensionWithSyncedStorage })
+      });
+    }
+    return e.type !== this.node.type ? !1 : (e === this.node && this.decorations === t && this.innerDecorations === o || (this.node = e, this.decorations = t, this.innerDecorations = o, n({ node: e, decorations: t, innerDecorations: o, extension: this.extensionWithSyncedStorage })), !0);
+  }
+  /**
+   * Select the node.
+   * Add the `selected` prop and the `ProseMirror-selectednode` class.
+   */
+  selectNode() {
+    this.renderer.updateProps({
+      selected: !0
+    }), this.renderer.element && this.renderer.element.classList.add("ProseMirror-selectednode");
+  }
+  /**
+   * Deselect the node.
+   * Remove the `selected` prop and the `ProseMirror-selectednode` class.
+   */
+  deselectNode() {
+    this.renderer.updateProps({
+      selected: !1
+    }), this.renderer.element && this.renderer.element.classList.remove("ProseMirror-selectednode");
+  }
+  getDecorationClasses() {
+    return this.decorations.flatMap((e) => e.type.attrs.class).join(" ");
+  }
+  destroy() {
+    this.renderer.destroy(), this.editor.off("selectionUpdate", this.handleSelectionUpdate);
+  }
+}
+function xe(r, e) {
+  return (t) => {
+    if (!t.editor.contentComponent)
+      return {};
+    const o = typeof r == "function" && "__vccOpts" in r ? r.__vccOpts : r;
+    return new ue(o, t, e);
+  };
+}
+export {
+  ke as BubbleMenu,
+  ee as BubbleMenuPreset,
+  te as Editor,
+  oe as EditorContent,
+  Ne as FloatingMenu,
+  ye as MarkViewContent,
+  fe as NodeViewContent,
+  Se as NodeViewWrapper,
+  Ee as SlideEditor,
+  ae as VueMarkView,
+  ve as VueMarkViewRenderer,
+  xe as VueNodeViewRenderer,
+  q as VueRenderer,
+  be as markViewProps,
+  Ce as nodeViewProps,
+  ne as useEditor,
+  de as useSlideEditor
+};