@rathkit/rte-svelte 0.1.0-alpha.4 → 0.1.0-alpha.5

package/README.md

@@ -1,6 +1,6 @@
 # @rathkit/rte-svelte
 
-> **Alpha** (0.1.0-alpha.0). Not for production: the APIs will change between releases. Published to the `next` tag only.
+> **Alpha.** Not for production: the APIs will change between releases. Published to the `next` tag only.
 
 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.
 

package/dist/action.d.ts

@@ -1,13 +1,22 @@
 import type { Editor } from "@rathkit/rte-core/dom";
+import type { Selection } from "@rathkit/rte-core";
 import { type StandardOptions } from "@rathkit/rte-core/standard";
-export interface RteActionOptions extends Omit<StandardOptions, "element" | "html" | "readOnly"> {
+export interface RteActionOptions extends Omit<StandardOptions, "element" | "html" | "readOnly" | "disabled"> {
     /** The starting HTML. */
     html?: string;
     readOnly?: boolean;
+    /** Read-only, and not focusable or in the tab order. Live: changes in `update` apply. */
+    disabled?: boolean;
     /** Called with the HTML after each change that alters it. */
     onChange?: (html: string) => void;
     /** Called once the editor exists. */
     onReady?: (editor: Editor) => void;
+    /** Called when the editor gains the focus. */
+    onFocus?: (editor: Editor) => void;
+    /** Called when the editor loses the focus. */
+    onBlur?: (editor: Editor) => void;
+    /** Called when the selection moves or changes. */
+    onSelection?: (selection: Selection) => void;
 }
 export declare function rteEditor(element: HTMLElement, options?: RteActionOptions): {
     update(next: RteActionOptions): void;

package/dist/action.js

@@ -1,21 +1,22 @@
 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 });
+    const { html, readOnly, disabled, onChange: _c, onReady: _r, onFocus: _f, onBlur: _b, onSelection: _s, ...rest } = options;
+    const editor = createEditor({ ...rest, element, html: html ?? "", readOnly: readOnly ?? false, disabled: disabled ?? 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);
-    });
+    const offs = [
+        editor.on("change", (now) => latest.onChange?.(now)),
+        editor.on("focus", (e) => latest.onFocus?.(e)),
+        editor.on("blur", (e) => latest.onBlur?.(e)),
+        editor.on("selection", (selection) => latest.onSelection?.(selection)),
+    ];
+    const stop = () => { for (const off of offs)
+        off(); };
     options.onReady?.(editor);
     return {
         update(next) {
             latest = next;
             editor.setReadOnly(next.readOnly ?? false);
+            editor.setDisabled(next.disabled ?? false);
         },
         destroy() {
             stop();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rathkit/rte-svelte",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.5",
   "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",
@@ -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.1.0-alpha.5 <0.2.0",
+    "@rathkit/rte-headless": ">=0.1.0-alpha.5 <0.2.0"
   },
   "peerDependenciesMeta": {
     "@rathkit/rte-core": {