@rathkit/rte-react 0.1.0-alpha.3 → 0.1.0-alpha.5

package/README.md

@@ -1,6 +1,6 @@
 # @rathkit/rte-react
 
-> **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 React: a component and hooks over the headless layer. A component re-renders only when the value it reads changes. No editor or accessibility logic lives here.
 

package/dist/editor.d.ts

@@ -1,10 +1,14 @@
 import type { Editor } from "@rathkit/rte-core/dom";
+import type { Selection } from "@rathkit/rte-core";
 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 interface RteEditorProps extends RteOptions {
     /** The starting HTML. Later changes to this prop are ignored: call `editor.setHtml` to replace the document. */
     defaultValue?: string;
+    /** No edits; the editor can still be focused, selected in and copied from. Live. */
     readOnly?: boolean;
+    /** Read-only, and not focusable or in the tab order. Live. */
+    disabled?: boolean;
     /** The name screen readers announce for the editing surface. Required: an unnamed editor is an accessibility fault. */
     label: string;
     className?: string;
@@ -12,6 +16,12 @@ export interface RteEditorProps extends RteOptions {
     onChange?: (html: string) => void;
     /** Called once the editor exists, with the editor to run commands on and subscribe to. */
     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;
 }
 /** The hook behind `RteEditor`, for those who draw their own surface: give `ref` to one element. */
 export declare function useRteEditor(props: Omit<RteEditorProps, "label" | "className">): {

package/dist/editor.js

@@ -8,16 +8,16 @@ export function useRteEditor(props) {
     useEffect(() => {
         if (!element)
             return;
-        const { defaultValue, readOnly, onChange: _c, onReady: _r, ...options } = latest.current;
-        const made = createEditor({ ...options, element, html: defaultValue ?? "", readOnly: readOnly ?? false });
-        let last = made.getHtml();
-        const stop = made.subscribe(() => {
-            const html = made.getHtml();
-            if (html === last)
-                return;
-            last = html;
-            latest.current.onChange?.(html);
-        });
+        const { defaultValue, readOnly, disabled, onChange: _c, onReady: _r, onFocus: _f, onBlur: _b, onSelection: _s, ...options } = latest.current;
+        const made = createEditor({ ...options, element, html: defaultValue ?? "", readOnly: readOnly ?? false, disabled: disabled ?? false });
+        const offs = [
+            made.on("change", (html) => latest.current.onChange?.(html)),
+            made.on("focus", (e) => latest.current.onFocus?.(e)),
+            made.on("blur", (e) => latest.current.onBlur?.(e)),
+            made.on("selection", (selection) => latest.current.onSelection?.(selection)),
+        ];
+        const stop = () => { for (const off of offs)
+            off(); };
         setEditor(made);
         latest.current.onReady?.(made);
         return () => {
@@ -27,10 +27,11 @@ export function useRteEditor(props) {
         };
     }, [element]);
     useEffect(() => { editor?.setReadOnly(props.readOnly ?? false); }, [editor, props.readOnly]);
+    useEffect(() => { editor?.setDisabled(props.disabled ?? false); }, [editor, props.disabled]);
     return { ref, editor };
 }
 export function RteEditor(props) {
     const { label, className, ...rest } = props;
     const { ref } = useRteEditor(rest);
-    return createElement("div", { ref, "aria-label": label, className, "data-rk-surface": "" });
+    return createElement("div", { ref, "aria-label": label, className, "data-rte-surface": "" });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rathkit/rte-react",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.5",
   "description": "The editor for React: a component and hooks 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.3 <0.2.0",
-    "@rathkit/rte-headless": ">=0.1.0-alpha.3 <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",
     "react": ">=18"
   },
   "peerDependenciesMeta": {