@rathkit/rte-vue 0.1.0-alpha.4 → 0.2.0-beta.0

package/README.md

@@ -1,6 +1,6 @@
 # @rathkit/rte-vue
 
-> **Alpha** (0.1.0-alpha.0). Not for production: the APIs will change between releases. Published to the `next` tag only.
+> **Beta.** Not for production yet: the APIs may still change between releases. Published to the `next` tag only.
 
 The editor for Vue: a component and composables over the headless layer. A ref changes only when the value it holds does.
 

package/dist/editor.d.ts

@@ -1,3 +1,3 @@
 import { type StandardOptions } from "@rathkit/rte-core/standard";
-export type RteOptions = Omit<StandardOptions, "element" | "html" | "readOnly">;
+export type RteOptions = Omit<StandardOptions, "element" | "html" | "readOnly" | "disabled">;
 export declare const RteEditor: unknown;

package/dist/editor.js

@@ -5,31 +5,32 @@ export const RteEditor = defineComponent({
     props: {
         defaultValue: { type: String, default: "" },
         readOnly: { type: Boolean, default: false },
+        disabled: { type: Boolean, default: false },
         label: { type: String, required: true },
         options: { type: Object, default: () => ({}) },
     },
-    emits: ["change", "ready"],
+    emits: ["change", "ready", "focus", "blur", "selection"],
     setup(props, { emit, expose }) {
         const element = shallowRef(null);
         const editor = shallowRef(undefined);
         let stop = () => undefined;
         onMounted(() => {
-            const made = createEditor({ ...props.options, element: element.value, html: props.defaultValue, readOnly: props.readOnly });
-            let last = made.getHtml();
-            const off = made.subscribe(() => {
-                const html = made.getHtml();
-                if (html === last)
-                    return;
-                last = html;
-                emit("change", html);
-            });
-            stop = () => { off(); made.destroy(); };
+            const made = createEditor({ ...props.options, element: element.value, html: props.defaultValue, readOnly: props.readOnly, disabled: props.disabled });
+            const offs = [
+                made.on("change", (html) => emit("change", html)),
+                made.on("focus", (e) => emit("focus", e)),
+                made.on("blur", (e) => emit("blur", e)),
+                made.on("selection", (selection) => emit("selection", selection)),
+            ];
+            stop = () => { for (const off of offs)
+                off(); made.destroy(); };
             editor.value = made;
             emit("ready", made);
         });
         onBeforeUnmount(() => { stop(); editor.value = undefined; });
         watch(() => props.readOnly, (readOnly) => editor.value?.setReadOnly(readOnly));
+        watch(() => props.disabled, (disabled) => editor.value?.setDisabled(disabled));
         expose({ editor });
-        return () => h("div", { ref: element, "aria-label": props.label, "data-rk-surface": "" });
+        return () => h("div", { ref: element, "aria-label": props.label, "data-rte-surface": "" });
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rathkit/rte-vue",
-  "version": "0.1.0-alpha.4",
+  "version": "0.2.0-beta.0",
   "description": "The editor for Vue: a component and composables over the headless layer, with no editor or accessibility logic of its own.",
   "keywords": [
     "rich-text",
@@ -44,8 +44,8 @@
     }
   },
   "peerDependencies": {
-    "@rathkit/rte-core": ">=0.1.0-alpha.4 <0.2.0",
-    "@rathkit/rte-headless": ">=0.1.0-alpha.4 <0.2.0",
+    "@rathkit/rte-core": ">=0.2.0-beta.0 <0.3.0",
+    "@rathkit/rte-headless": ">=0.2.0-beta.0 <0.3.0",
     "vue": ">=3.4"
   },
   "peerDependenciesMeta": {