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

package/README.md

@@ -1,11 +1,34 @@
 # @rathkit/rte-svelte
 
-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-svelte is in alpha. Install the alpha with the `next` tag:
+The editor for Svelte: stores and an action over the headless layer. Svelte's store contract is a plain shape, so this package needs nothing from Svelte itself.
+
+## Install
 
 ```sh
-npm install @rathkit/rte-svelte@next
+npm install @rathkit/rte-svelte@next @rathkit/rte-core@next @rathkit/rte-headless@next
 ```
 
-About the project: https://rathkit.com
+This package has no dependencies of its own. It works with `@rathkit/rte-core`, `@rathkit/rte-headless` (peer dependencies, all optional so that npm installs nothing you did not ask for), so install the ones you use alongside it.
+
+## Example
+
+```svelte
+<script>
+  import { rteEditor, command } from "@rathkit/rte-svelte";
+  let editor;
+  $: bold = editor && command(editor, "format.bold");
+</script>
+
+<button aria-pressed={$bold?.active} on:click={() => editor.commands.run("format.bold")}>Bold</button>
+<div aria-label="Body" use:rteEditor={{ html: "<p>Hello</p>", onReady: (e) => (editor = e), onChange: (html) => console.log(html) }}></div>
+```
+
+## 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/action.d.ts

@@ -0,0 +1,15 @@
+import type { Editor } from "@rathkit/rte-core/dom";
+import { type StandardOptions } from "@rathkit/rte-core/standard";
+export interface RteActionOptions extends Omit<StandardOptions, "element" | "html" | "readOnly"> {
+    /** The starting HTML. */
+    html?: string;
+    readOnly?: boolean;
+    /** Called with the HTML after each change that alters it. */
+    onChange?: (html: string) => void;
+    /** Called once the editor exists. */
+    onReady?: (editor: Editor) => void;
+}
+export declare function rteEditor(element: HTMLElement, options?: RteActionOptions): {
+    update(next: RteActionOptions): void;
+    destroy(): void;
+};

package/dist/action.js

@@ -0,0 +1,25 @@
+import { createEditor } from "@rathkit/rte-core/standard";
+export function rteEditor(element, options = {}) {
+    const { html, readOnly, onChange: _c, onReady: _r, ...rest } = options;
+    const editor = createEditor({ ...rest, element, html: html ?? "", readOnly: readOnly ?? false });
+    let latest = options;
+    let last = editor.getHtml();
+    const stop = editor.subscribe(() => {
+        const now = editor.getHtml();
+        if (now === last)
+            return;
+        last = now;
+        latest.onChange?.(now);
+    });
+    options.onReady?.(editor);
+    return {
+        update(next) {
+            latest = next;
+            editor.setReadOnly(next.readOnly ?? false);
+        },
+        destroy() {
+            stop();
+            editor.destroy();
+        },
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { command, selector } from "./stores.ts";
+export { rteEditor, type RteActionOptions } from "./action.ts";

package/dist/index.js

@@ -0,0 +1,2 @@
+export { command, selector } from "./stores.js";
+export { rteEditor } from "./action.js";

package/dist/stores.d.ts

@@ -0,0 +1,6 @@
+import { type HeadlessEditor, type Readable } from "@rathkit/rte-headless";
+import type { CommandState, EditorSnapshot } from "@rathkit/rte-core";
+/** One command's state: whether it can run, whether it is on, its value. */
+export declare function command(editor: HeadlessEditor, name: string): Readable<CommandState>;
+/** One value worked out from the editor state. Subscribers hear about it only when that value changes. */
+export declare function selector<T>(editor: HeadlessEditor, select: (snapshot: EditorSnapshot) => T, equals?: (a: T, b: T) => boolean): Readable<T>;

package/dist/stores.js

@@ -0,0 +1,7 @@
+import { commandStore, selectStore, toReadable } from "@rathkit/rte-headless";
+export function command(editor, name) {
+    return toReadable(commandStore(editor, name));
+}
+export function selector(editor, select, equals) {
+    return toReadable(selectStore(editor, select, equals));
+}

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@rathkit/rte-svelte",
-  "version": "0.0.0",
-  "description": "Placeholder. @rathkit/rte-svelte is in alpha: install it with the next tag.",
+  "version": "0.1.0-alpha.3",
+  "description": "The editor for Svelte: stores and an action over the headless layer, with no editor or accessibility logic of its own.",
+  "keywords": [
+    "rich-text",
+    "editor",
+    "wysiwyg",
+    "contenteditable",
+    "zero-dependencies",
+    "typescript",
+    "svelte",
+    "stores"
+  ],
   "license": "Apache-2.0",
   "homepage": "https://rathkit.com",
   "repository": {
@@ -12,7 +22,55 @@
   "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"
+  },
+  "peerDependenciesMeta": {
+    "@rathkit/rte-core": {
+      "optional": true
+    },
+    "@rathkit/rte-headless": {
+      "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 --test \"src/**/*.test.ts\""
+  },
+  "rathkit": {
+    "budgets": [
+      {
+        "name": "svelte",
+        "entry": "dist/index.js",
+        "gzipKB": 2
+      }
+    ]
   }
 }