@matrajs/vue 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nahim Hossain Shohan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,33 @@
+# @matrajs/vue
+
+Vue 3 bindings for Matra: `useEditor`, `useEditorState`, `useEditorFocus` and
+`EditorContent`.
+
+```bash
+npm i @matrajs/core @matrajs/vue
+```
+
+```vue
+<script setup lang="ts">
+import { starterKit } from '@matrajs/core'
+import { EditorContent, useEditor, useEditorState } from '@matrajs/vue'
+
+const editor = useEditor({ extensions: starterKit, content: '<p>Hello</p>' })
+const isBold = useEditorState(editor, (e) => e.getHTML().includes('<strong>'))
+</script>
+
+<template>
+  <button :aria-pressed="isBold" @mousedown.prevent="editor.commands.toggleBold()">
+    Bold
+  </button>
+  <EditorContent :editor="editor" />
+</template>
+```
+
+The editor is `markRaw`-ed on purpose: it is a mutable object with its own
+change events, and putting it in Vue's reactivity graph would trace every
+document node on every keystroke. Read from it with `useEditorState`.
+
+- Source: https://github.com/amrelaco/matra
+
+MIT.

package/dist/index.cjs

@@ -0,0 +1,69 @@
+'use strict';
+
+var vue = require('vue');
+var core = require('@matrajs/core');
+
+// src/editor-content.ts
+var EditorContent = vue.defineComponent({
+  name: "EditorContent",
+  props: {
+    editor: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const root = vue.ref(null);
+    vue.onMounted(() => {
+      const element = root.value;
+      if (!element || props.editor.unsafe.view) return;
+      props.editor.mount(element);
+    });
+    return () => vue.h("div", { ref: root, class: "matra-content" });
+  }
+});
+function useEditor(options) {
+  const editor = vue.markRaw(core.createEditor(options));
+  const dispose = () => editor.destroy();
+  if (vue.getCurrentInstance()) vue.onBeforeUnmount(dispose);
+  else vue.onScopeDispose(dispose);
+  return editor;
+}
+function useEditorState(editor, select) {
+  const value = vue.ref(select(editor));
+  const update = () => {
+    value.value = select(editor);
+  };
+  const offChange = editor.on("change", update);
+  const offSelection = editor.on("selectionChange", update);
+  const dispose = () => {
+    offChange();
+    offSelection();
+  };
+  if (vue.getCurrentInstance()) vue.onBeforeUnmount(dispose);
+  else vue.onScopeDispose(dispose);
+  return vue.readonly(value);
+}
+function useEditorFocus(editor) {
+  const focused = vue.ref(false);
+  const offFocus = editor.on("focus", () => {
+    focused.value = true;
+  });
+  const offBlur = editor.on("blur", () => {
+    focused.value = false;
+  });
+  const dispose = () => {
+    offFocus();
+    offBlur();
+  };
+  if (vue.getCurrentInstance()) vue.onBeforeUnmount(dispose);
+  else vue.onScopeDispose(dispose);
+  return vue.readonly(focused);
+}
+
+exports.EditorContent = EditorContent;
+exports.useEditor = useEditor;
+exports.useEditorFocus = useEditorFocus;
+exports.useEditorState = useEditorState;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/editor-content.ts","../src/use-editor.ts"],"names":["defineComponent","ref","onMounted","h","markRaw","createEditor","getCurrentInstance","onBeforeUnmount","readonly"],"mappings":";;;;;;AASO,IAAM,gBAAgBA,mBAAA,CAAgB;AAAA,EAC3C,IAAA,EAAM,eAAA;AAAA,EACN,KAAA,EAAO;AAAA,IACL,MAAA,EAAQ;AAAA,MACN,IAAA,EAAM,MAAA;AAAA,MACN,QAAA,EAAU;AAAA;AACZ,GACF;AAAA,EACA,MAAM,KAAA,EAAO;AACX,IAAA,MAAM,IAAA,GAAOC,QAAwB,IAAI,CAAA;AAEzC,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,MAAM,UAAU,IAAA,CAAK,KAAA;AACrB,MAAA,IAAI,CAAC,OAAA,IAAW,KAAA,CAAM,MAAA,CAAO,OAAO,IAAA,EAAM;AAC1C,MAAA,KAAA,CAAM,MAAA,CAAO,MAAM,OAAO,CAAA;AAAA,IAC5B,CAAC,CAAA;AAED,IAAA,OAAO,MAAMC,MAAE,KAAA,EAAO,EAAE,KAAK,IAAA,EAAM,KAAA,EAAO,iBAAiB,CAAA;AAAA,EAC7D;AACF,CAAC;ACRM,SAAS,UACd,OAAA,EACW;AACX,EAAA,MAAM,MAAA,GAASC,WAAA,CAAQC,iBAAA,CAAa,OAAO,CAAC,CAAA;AAE5C,EAAA,MAAM,OAAA,GAAU,MAAM,MAAA,CAAO,OAAA,EAAQ;AAErC,EAAA,IAAIC,sBAAA,EAAmB,EAAGC,mBAAA,CAAgB,OAAO,CAAA;AAAA,0BAC7B,OAAO,CAAA;AAE3B,EAAA,OAAO,MAAA;AACT;AASO,SAAS,cAAA,CACd,QACA,MAAA,EACkB;AAClB,EAAA,MAAM,KAAA,GAAQN,OAAAA,CAAI,MAAA,CAAO,MAAM,CAAC,CAAA;AAEhC,EAAA,MAAM,SAAS,MAAM;AACnB,IAAA,KAAA,CAAM,KAAA,GAAQ,OAAO,MAAM,CAAA;AAAA,EAC7B,CAAA;AACA,EAAA,MAAM,SAAA,GAAY,MAAA,CAAO,EAAA,CAAG,QAAA,EAAU,MAAM,CAAA;AAC5C,EAAA,MAAM,YAAA,GAAe,MAAA,CAAO,EAAA,CAAG,iBAAA,EAAmB,MAAM,CAAA;AAExD,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,SAAA,EAAU;AACV,IAAA,YAAA,EAAa;AAAA,EACf,CAAA;AACA,EAAA,IAAIK,sBAAA,EAAmB,EAAGC,mBAAA,CAAgB,OAAO,CAAA;AAAA,0BAC7B,OAAO,CAAA;AAE3B,EAAA,OAAOC,aAAS,KAAK,CAAA;AACvB;AAGO,SAAS,eACd,MAAA,EACwB;AACxB,EAAA,MAAM,OAAA,GAAUP,QAAI,KAAK,CAAA;AACzB,EAAA,MAAM,QAAA,GAAW,MAAA,CAAO,EAAA,CAAG,OAAA,EAAS,MAAM;AACxC,IAAA,OAAA,CAAQ,KAAA,GAAQ,IAAA;AAAA,EAClB,CAAC,CAAA;AACD,EAAA,MAAM,OAAA,GAAU,MAAA,CAAO,EAAA,CAAG,MAAA,EAAQ,MAAM;AACtC,IAAA,OAAA,CAAQ,KAAA,GAAQ,KAAA;AAAA,EAClB,CAAC,CAAA;AAED,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,QAAA,EAAS;AACT,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AACA,EAAA,IAAIK,sBAAA,EAAmB,EAAGC,mBAAA,CAAgB,OAAO,CAAA;AAAA,0BAC7B,OAAO,CAAA;AAE3B,EAAA,OAAOC,aAAS,OAAO,CAAA;AACzB","file":"index.cjs","sourcesContent":["import type { AnyDef, Editor } from '@matrajs/core'\nimport { type PropType, defineComponent, h, onMounted, ref } from 'vue'\n\n/**\n * The element the editor mounts into.\n *\n * The mount is guarded on `unsafe.view`, so a component remounted by a\n * `<KeepAlive>` or a hot reload does not attach a second view to one element.\n */\nexport const EditorContent = defineComponent({\n  name: 'EditorContent',\n  props: {\n    editor: {\n      type: Object as PropType<Editor<readonly AnyDef[]>>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const root = ref<HTMLElement | null>(null)\n\n    onMounted(() => {\n      const element = root.value\n      if (!element || props.editor.unsafe.view) return\n      props.editor.mount(element)\n    })\n\n    return () => h('div', { ref: root, class: 'matra-content' })\n  },\n})\n","import { createEditor } from '@matrajs/core'\nimport type { AnyDef, Editor, EditorOptions } from '@matrajs/core'\nimport {\n  type Ref,\n  getCurrentInstance,\n  markRaw,\n  onBeforeUnmount,\n  onScopeDispose,\n  readonly,\n  ref,\n} from 'vue'\n\n/**\n * Create an editor that lives as long as the component using it.\n *\n * The editor is deliberately **not** reactive: it is a mutable object with its\n * own change events, and wrapping it in a proxy would make Vue trace every\n * document node on every keystroke. `markRaw` keeps it out of the reactivity\n * graph; use `useEditorState` to read from it reactively.\n */\nexport function useEditor<const T extends readonly AnyDef[]>(\n  options: EditorOptions<T>,\n): Editor<T> {\n  const editor = markRaw(createEditor(options))\n\n  const dispose = () => editor.destroy()\n  // Works inside a component or a bare effect scope.\n  if (getCurrentInstance()) onBeforeUnmount(dispose)\n  else onScopeDispose(dispose)\n\n  return editor\n}\n\n/**\n * A reactive view of the editor.\n *\n * Toolbars need this: commands mutate the document, but Vue has no way to know\n * unless something subscribes. The selector re-runs on every change and\n * selection move.\n */\nexport function useEditorState<T extends readonly AnyDef[], S>(\n  editor: Editor<T>,\n  select: (editor: Editor<T>) => S,\n): Readonly<Ref<S>> {\n  const value = ref(select(editor)) as Ref<S>\n\n  const update = () => {\n    value.value = select(editor)\n  }\n  const offChange = editor.on('change', update)\n  const offSelection = editor.on('selectionChange', update)\n\n  const dispose = () => {\n    offChange()\n    offSelection()\n  }\n  if (getCurrentInstance()) onBeforeUnmount(dispose)\n  else onScopeDispose(dispose)\n\n  return readonly(value) as Readonly<Ref<S>>\n}\n\n/** True while the editor has DOM focus. */\nexport function useEditorFocus<T extends readonly AnyDef[]>(\n  editor: Editor<T>,\n): Readonly<Ref<boolean>> {\n  const focused = ref(false)\n  const offFocus = editor.on('focus', () => {\n    focused.value = true\n  })\n  const offBlur = editor.on('blur', () => {\n    focused.value = false\n  })\n\n  const dispose = () => {\n    offFocus()\n    offBlur()\n  }\n  if (getCurrentInstance()) onBeforeUnmount(dispose)\n  else onScopeDispose(dispose)\n\n  return readonly(focused)\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,45 @@
+import * as vue from 'vue';
+import { PropType, Ref } from 'vue';
+import { Editor, AnyDef, EditorOptions } from '@matrajs/core';
+
+/**
+ * The element the editor mounts into.
+ *
+ * The mount is guarded on `unsafe.view`, so a component remounted by a
+ * `<KeepAlive>` or a hot reload does not attach a second view to one element.
+ */
+declare const EditorContent: vue.DefineComponent<vue.ExtractPropTypes<{
+    editor: {
+        type: PropType<Editor<readonly AnyDef[]>>;
+        required: true;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    editor: {
+        type: PropType<Editor<readonly AnyDef[]>>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Create an editor that lives as long as the component using it.
+ *
+ * The editor is deliberately **not** reactive: it is a mutable object with its
+ * own change events, and wrapping it in a proxy would make Vue trace every
+ * document node on every keystroke. `markRaw` keeps it out of the reactivity
+ * graph; use `useEditorState` to read from it reactively.
+ */
+declare function useEditor<const T extends readonly AnyDef[]>(options: EditorOptions<T>): Editor<T>;
+/**
+ * A reactive view of the editor.
+ *
+ * Toolbars need this: commands mutate the document, but Vue has no way to know
+ * unless something subscribes. The selector re-runs on every change and
+ * selection move.
+ */
+declare function useEditorState<T extends readonly AnyDef[], S>(editor: Editor<T>, select: (editor: Editor<T>) => S): Readonly<Ref<S>>;
+/** True while the editor has DOM focus. */
+declare function useEditorFocus<T extends readonly AnyDef[]>(editor: Editor<T>): Readonly<Ref<boolean>>;
+
+export { EditorContent, useEditor, useEditorFocus, useEditorState };

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+import * as vue from 'vue';
+import { PropType, Ref } from 'vue';
+import { Editor, AnyDef, EditorOptions } from '@matrajs/core';
+
+/**
+ * The element the editor mounts into.
+ *
+ * The mount is guarded on `unsafe.view`, so a component remounted by a
+ * `<KeepAlive>` or a hot reload does not attach a second view to one element.
+ */
+declare const EditorContent: vue.DefineComponent<vue.ExtractPropTypes<{
+    editor: {
+        type: PropType<Editor<readonly AnyDef[]>>;
+        required: true;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    editor: {
+        type: PropType<Editor<readonly AnyDef[]>>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Create an editor that lives as long as the component using it.
+ *
+ * The editor is deliberately **not** reactive: it is a mutable object with its
+ * own change events, and wrapping it in a proxy would make Vue trace every
+ * document node on every keystroke. `markRaw` keeps it out of the reactivity
+ * graph; use `useEditorState` to read from it reactively.
+ */
+declare function useEditor<const T extends readonly AnyDef[]>(options: EditorOptions<T>): Editor<T>;
+/**
+ * A reactive view of the editor.
+ *
+ * Toolbars need this: commands mutate the document, but Vue has no way to know
+ * unless something subscribes. The selector re-runs on every change and
+ * selection move.
+ */
+declare function useEditorState<T extends readonly AnyDef[], S>(editor: Editor<T>, select: (editor: Editor<T>) => S): Readonly<Ref<S>>;
+/** True while the editor has DOM focus. */
+declare function useEditorFocus<T extends readonly AnyDef[]>(editor: Editor<T>): Readonly<Ref<boolean>>;
+
+export { EditorContent, useEditor, useEditorFocus, useEditorState };

package/dist/index.js

@@ -0,0 +1,64 @@
+import { defineComponent, ref, onMounted, h, markRaw, getCurrentInstance, onBeforeUnmount, onScopeDispose, readonly } from 'vue';
+import { createEditor } from '@matrajs/core';
+
+// src/editor-content.ts
+var EditorContent = defineComponent({
+  name: "EditorContent",
+  props: {
+    editor: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const root = ref(null);
+    onMounted(() => {
+      const element = root.value;
+      if (!element || props.editor.unsafe.view) return;
+      props.editor.mount(element);
+    });
+    return () => h("div", { ref: root, class: "matra-content" });
+  }
+});
+function useEditor(options) {
+  const editor = markRaw(createEditor(options));
+  const dispose = () => editor.destroy();
+  if (getCurrentInstance()) onBeforeUnmount(dispose);
+  else onScopeDispose(dispose);
+  return editor;
+}
+function useEditorState(editor, select) {
+  const value = ref(select(editor));
+  const update = () => {
+    value.value = select(editor);
+  };
+  const offChange = editor.on("change", update);
+  const offSelection = editor.on("selectionChange", update);
+  const dispose = () => {
+    offChange();
+    offSelection();
+  };
+  if (getCurrentInstance()) onBeforeUnmount(dispose);
+  else onScopeDispose(dispose);
+  return readonly(value);
+}
+function useEditorFocus(editor) {
+  const focused = ref(false);
+  const offFocus = editor.on("focus", () => {
+    focused.value = true;
+  });
+  const offBlur = editor.on("blur", () => {
+    focused.value = false;
+  });
+  const dispose = () => {
+    offFocus();
+    offBlur();
+  };
+  if (getCurrentInstance()) onBeforeUnmount(dispose);
+  else onScopeDispose(dispose);
+  return readonly(focused);
+}
+
+export { EditorContent, useEditor, useEditorFocus, useEditorState };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/editor-content.ts","../src/use-editor.ts"],"names":["ref"],"mappings":";;;;AASO,IAAM,gBAAgB,eAAA,CAAgB;AAAA,EAC3C,IAAA,EAAM,eAAA;AAAA,EACN,KAAA,EAAO;AAAA,IACL,MAAA,EAAQ;AAAA,MACN,IAAA,EAAM,MAAA;AAAA,MACN,QAAA,EAAU;AAAA;AACZ,GACF;AAAA,EACA,MAAM,KAAA,EAAO;AACX,IAAA,MAAM,IAAA,GAAO,IAAwB,IAAI,CAAA;AAEzC,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,MAAM,UAAU,IAAA,CAAK,KAAA;AACrB,MAAA,IAAI,CAAC,OAAA,IAAW,KAAA,CAAM,MAAA,CAAO,OAAO,IAAA,EAAM;AAC1C,MAAA,KAAA,CAAM,MAAA,CAAO,MAAM,OAAO,CAAA;AAAA,IAC5B,CAAC,CAAA;AAED,IAAA,OAAO,MAAM,EAAE,KAAA,EAAO,EAAE,KAAK,IAAA,EAAM,KAAA,EAAO,iBAAiB,CAAA;AAAA,EAC7D;AACF,CAAC;ACRM,SAAS,UACd,OAAA,EACW;AACX,EAAA,MAAM,MAAA,GAAS,OAAA,CAAQ,YAAA,CAAa,OAAO,CAAC,CAAA;AAE5C,EAAA,MAAM,OAAA,GAAU,MAAM,MAAA,CAAO,OAAA,EAAQ;AAErC,EAAA,IAAI,kBAAA,EAAmB,EAAG,eAAA,CAAgB,OAAO,CAAA;AAAA,sBAC7B,OAAO,CAAA;AAE3B,EAAA,OAAO,MAAA;AACT;AASO,SAAS,cAAA,CACd,QACA,MAAA,EACkB;AAClB,EAAA,MAAM,KAAA,GAAQA,GAAAA,CAAI,MAAA,CAAO,MAAM,CAAC,CAAA;AAEhC,EAAA,MAAM,SAAS,MAAM;AACnB,IAAA,KAAA,CAAM,KAAA,GAAQ,OAAO,MAAM,CAAA;AAAA,EAC7B,CAAA;AACA,EAAA,MAAM,SAAA,GAAY,MAAA,CAAO,EAAA,CAAG,QAAA,EAAU,MAAM,CAAA;AAC5C,EAAA,MAAM,YAAA,GAAe,MAAA,CAAO,EAAA,CAAG,iBAAA,EAAmB,MAAM,CAAA;AAExD,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,SAAA,EAAU;AACV,IAAA,YAAA,EAAa;AAAA,EACf,CAAA;AACA,EAAA,IAAI,kBAAA,EAAmB,EAAG,eAAA,CAAgB,OAAO,CAAA;AAAA,sBAC7B,OAAO,CAAA;AAE3B,EAAA,OAAO,SAAS,KAAK,CAAA;AACvB;AAGO,SAAS,eACd,MAAA,EACwB;AACxB,EAAA,MAAM,OAAA,GAAUA,IAAI,KAAK,CAAA;AACzB,EAAA,MAAM,QAAA,GAAW,MAAA,CAAO,EAAA,CAAG,OAAA,EAAS,MAAM;AACxC,IAAA,OAAA,CAAQ,KAAA,GAAQ,IAAA;AAAA,EAClB,CAAC,CAAA;AACD,EAAA,MAAM,OAAA,GAAU,MAAA,CAAO,EAAA,CAAG,MAAA,EAAQ,MAAM;AACtC,IAAA,OAAA,CAAQ,KAAA,GAAQ,KAAA;AAAA,EAClB,CAAC,CAAA;AAED,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,QAAA,EAAS;AACT,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AACA,EAAA,IAAI,kBAAA,EAAmB,EAAG,eAAA,CAAgB,OAAO,CAAA;AAAA,sBAC7B,OAAO,CAAA;AAE3B,EAAA,OAAO,SAAS,OAAO,CAAA;AACzB","file":"index.js","sourcesContent":["import type { AnyDef, Editor } from '@matrajs/core'\nimport { type PropType, defineComponent, h, onMounted, ref } from 'vue'\n\n/**\n * The element the editor mounts into.\n *\n * The mount is guarded on `unsafe.view`, so a component remounted by a\n * `<KeepAlive>` or a hot reload does not attach a second view to one element.\n */\nexport const EditorContent = defineComponent({\n  name: 'EditorContent',\n  props: {\n    editor: {\n      type: Object as PropType<Editor<readonly AnyDef[]>>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const root = ref<HTMLElement | null>(null)\n\n    onMounted(() => {\n      const element = root.value\n      if (!element || props.editor.unsafe.view) return\n      props.editor.mount(element)\n    })\n\n    return () => h('div', { ref: root, class: 'matra-content' })\n  },\n})\n","import { createEditor } from '@matrajs/core'\nimport type { AnyDef, Editor, EditorOptions } from '@matrajs/core'\nimport {\n  type Ref,\n  getCurrentInstance,\n  markRaw,\n  onBeforeUnmount,\n  onScopeDispose,\n  readonly,\n  ref,\n} from 'vue'\n\n/**\n * Create an editor that lives as long as the component using it.\n *\n * The editor is deliberately **not** reactive: it is a mutable object with its\n * own change events, and wrapping it in a proxy would make Vue trace every\n * document node on every keystroke. `markRaw` keeps it out of the reactivity\n * graph; use `useEditorState` to read from it reactively.\n */\nexport function useEditor<const T extends readonly AnyDef[]>(\n  options: EditorOptions<T>,\n): Editor<T> {\n  const editor = markRaw(createEditor(options))\n\n  const dispose = () => editor.destroy()\n  // Works inside a component or a bare effect scope.\n  if (getCurrentInstance()) onBeforeUnmount(dispose)\n  else onScopeDispose(dispose)\n\n  return editor\n}\n\n/**\n * A reactive view of the editor.\n *\n * Toolbars need this: commands mutate the document, but Vue has no way to know\n * unless something subscribes. The selector re-runs on every change and\n * selection move.\n */\nexport function useEditorState<T extends readonly AnyDef[], S>(\n  editor: Editor<T>,\n  select: (editor: Editor<T>) => S,\n): Readonly<Ref<S>> {\n  const value = ref(select(editor)) as Ref<S>\n\n  const update = () => {\n    value.value = select(editor)\n  }\n  const offChange = editor.on('change', update)\n  const offSelection = editor.on('selectionChange', update)\n\n  const dispose = () => {\n    offChange()\n    offSelection()\n  }\n  if (getCurrentInstance()) onBeforeUnmount(dispose)\n  else onScopeDispose(dispose)\n\n  return readonly(value) as Readonly<Ref<S>>\n}\n\n/** True while the editor has DOM focus. */\nexport function useEditorFocus<T extends readonly AnyDef[]>(\n  editor: Editor<T>,\n): Readonly<Ref<boolean>> {\n  const focused = ref(false)\n  const offFocus = editor.on('focus', () => {\n    focused.value = true\n  })\n  const offBlur = editor.on('blur', () => {\n    focused.value = false\n  })\n\n  const dispose = () => {\n    offFocus()\n    offBlur()\n  }\n  if (getCurrentInstance()) onBeforeUnmount(dispose)\n  else onScopeDispose(dispose)\n\n  return readonly(focused)\n}\n"]}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@matrajs/vue",
+  "version": "0.2.0",
+  "description": "Vue 3 bindings for Matra — useEditor and EditorContent.",
+  "license": "MIT",
+  "author": "Nahim Hossain Shohan",
+  "homepage": "https://matrajs.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/amrelaco/matra.git",
+    "directory": "packages/vue"
+  },
+  "bugs": {
+    "url": "https://github.com/amrelaco/matra/issues"
+  },
+  "keywords": [
+    "editor",
+    "rich-text",
+    "vue",
+    "matra"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@matrajs/core": "^0.2.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "vue": "^3.5.41"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist"
+  }
+}