@rathkit/rte-vue 0.0.0 → 0.1.0-alpha.3

package/README.md

@@ -1,11 +1,38 @@
 # @rathkit/rte-vue
 
-This version is an empty placeholder. It holds no code.
+> **Alpha** (0.1.0-alpha.0). Not for production: the APIs will change between releases. Published to the `next` tag only.
 
-@rathkit/rte-vue is in alpha. Install the alpha with the `next` tag:
+The editor for Vue: a component and composables over the headless layer. A ref changes only when the value it holds does.
+
+## Install
 
 ```sh
-npm install @rathkit/rte-vue@next
+npm install @rathkit/rte-vue@next @rathkit/rte-core@next @rathkit/rte-headless@next
+```
+
+This package has no dependencies of its own. It works with `@rathkit/rte-core`, `@rathkit/rte-headless`, `vue` (peer dependencies, all optional so that npm installs nothing you did not ask for), so install the ones you use alongside it; `vue` comes from your own project.
+
+## Example
+
+```vue
+<script setup>
+import { shallowRef } from "vue";
+import { RteEditor, useCommand } from "@rathkit/rte-vue";
+
+const editor = shallowRef();
+const bold = useCommand(editor, "format.bold");
+</script>
+
+<template>
+  <button :aria-pressed="bold.active" @click="editor?.commands.run('format.bold')">Bold</button>
+  <RteEditor label="Body" default-value="<p>Hello</p>" @ready="(e) => (editor = e)" @change="(html) => console.log(html)" />
+</template>
 ```
 
-About the project: https://rathkit.com
+## More
+
+Documentation: <https://rathkit.com>. Source and issues: <https://github.com/rathkit/rte>. What is checked: [SUPPORT.md](https://github.com/rathkit/rte/blob/main/docs/SUPPORT.md). Changes: [CHANGELOG.md](https://github.com/rathkit/rte/blob/main/CHANGELOG.md). How a release is verified: [VERIFY.md](https://github.com/rathkit/rte/blob/main/docs/VERIFY.md).
+
+## License
+
+[Apache-2.0](LICENSE)

package/dist/composables.d.ts

@@ -0,0 +1,9 @@
+import { type MaybeRef, type Ref } from "vue";
+import { type ExternalStore, type HeadlessEditor } from "@rathkit/rte-headless";
+import type { CommandState, EditorSnapshot } from "@rathkit/rte-core";
+/** Follows a store with a ref. The editor may be given as a ref that fills in later; the ref follows whichever editor is current. */
+export declare function useStore<T, E extends HeadlessEditor | undefined>(editor: MaybeRef<E>, make: (editor: HeadlessEditor) => ExternalStore<T>, empty: T): Readonly<Ref<T>>;
+/** One command's state: whether it can run, whether it is on, its value. Off and disabled until the editor exists. */
+export declare function useCommand(editor: MaybeRef<HeadlessEditor | undefined>, name: string): Readonly<Ref<CommandState>>;
+/** One value worked out from the editor state. The ref changes, and anything reading it re-runs, only when that value changes. */
+export declare function useSelector<T>(editor: MaybeRef<HeadlessEditor | undefined>, selector: (snapshot: EditorSnapshot) => T, equals?: (a: T, b: T) => boolean): Readonly<Ref<T | undefined>>;

package/dist/composables.js

@@ -0,0 +1,25 @@
+import { onScopeDispose, shallowRef, unref, watch } from "vue";
+import { commandStore, selectStore } from "@rathkit/rte-headless";
+const idle = Object.freeze({ enabled: false, active: false, value: undefined });
+export function useStore(editor, make, empty) {
+    const state = shallowRef(empty);
+    let unsubscribe = () => undefined;
+    const stop = watch(() => unref(editor), (current) => {
+        unsubscribe();
+        if (!current) {
+            state.value = empty;
+            return;
+        }
+        const store = make(current);
+        state.value = store.getSnapshot();
+        unsubscribe = store.subscribe(() => { state.value = store.getSnapshot(); });
+    }, { immediate: true });
+    onScopeDispose(() => { stop(); unsubscribe(); });
+    return state;
+}
+export function useCommand(editor, name) {
+    return useStore(editor, (e) => commandStore(e, name), idle);
+}
+export function useSelector(editor, selector, equals) {
+    return useStore(editor, (e) => selectStore(e, selector, equals), undefined);
+}

package/dist/editor.d.ts

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

package/dist/editor.js

@@ -0,0 +1,35 @@
+import { defineComponent, h, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import { createEditor } from "@rathkit/rte-core/standard";
+export const RteEditor = defineComponent({
+    name: "RteEditor",
+    props: {
+        defaultValue: { type: String, default: "" },
+        readOnly: { type: Boolean, default: false },
+        label: { type: String, required: true },
+        options: { type: Object, default: () => ({}) },
+    },
+    emits: ["change", "ready"],
+    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(); };
+            editor.value = made;
+            emit("ready", made);
+        });
+        onBeforeUnmount(() => { stop(); editor.value = undefined; });
+        watch(() => props.readOnly, (readOnly) => editor.value?.setReadOnly(readOnly));
+        expose({ editor });
+        return () => h("div", { ref: element, "aria-label": props.label, "data-rk-surface": "" });
+    },
+});

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { useCommand, useSelector, useStore } from "./composables.ts";
+export { RteEditor, type RteOptions } from "./editor.ts";

package/dist/index.js

@@ -0,0 +1,2 @@
+export { useCommand, useSelector, useStore } from "./composables.js";
+export { RteEditor } from "./editor.js";

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@rathkit/rte-vue",
-  "version": "0.0.0",
-  "description": "Placeholder. @rathkit/rte-vue is in alpha: install it with the next tag.",
+  "version": "0.1.0-alpha.3",
+  "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",
+    "editor",
+    "wysiwyg",
+    "contenteditable",
+    "zero-dependencies",
+    "typescript",
+    "vue",
+    "composables"
+  ],
   "license": "Apache-2.0",
   "homepage": "https://rathkit.com",
   "repository": {
@@ -12,7 +22,59 @@
   "bugs": {
     "url": "https://github.com/rathkit/rte/issues"
   },
+  "type": "module",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=22.14.0"
+  },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true,
+    "tag": "next"
+  },
+  "files": [
+    "dist",
+    "NOTICE",
+    "!dist/**/*.map"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "@rathkit/rte-core": ">=0.1.0-alpha.3 <0.2.0",
+    "@rathkit/rte-headless": ">=0.1.0-alpha.3 <0.2.0",
+    "vue": ">=3.4"
+  },
+  "peerDependenciesMeta": {
+    "@rathkit/rte-core": {
+      "optional": true
+    },
+    "@rathkit/rte-headless": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@rathkit/rte-core": "workspace:*",
+    "@rathkit/rte-headless": "workspace:*"
+  },
+  "scripts": {
+    "build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.build.json && tsc -p tsconfig.build.js.json",
+    "typecheck": "tsc -p tsconfig.json",
+    "test": "node --import ./test/register.mjs --test \"src/**/*.test.ts\""
+  },
+  "rathkit": {
+    "budgets": [
+      {
+        "name": "vue",
+        "entry": "dist/index.js",
+        "gzipKB": 2
+      }
+    ]
   }
 }