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

package/README.md

@@ -1,8 +1,8 @@
 # @rathkit/rte-jquery
 
-> **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 jQuery: `$(el).rkEditor(options)` over the custom element, with `rk:change` events. Works with jQuery 3 and 4.
+The editor for jQuery: `$(el).rteEditor(options)` over the custom element, with `rte:change` events. Works with jQuery 3 and 4.
 
 ## Install
 
@@ -21,9 +21,9 @@ import { install } from "@rathkit/rte-jquery";
 
 install($);
 // in a page with <div id="editor"></div>
-$("#editor").rkEditor({ label: "Body", html: "<p>Hello</p>" });
-$("#editor").on("rk:change", (event, html) => console.log(html));
-$("#editor").rkEditor("html");               // read it; rkEditor("html", "<p>x</p>") replaces it
+$("#editor").rteEditor({ label: "Body", html: "<p>Hello</p>" });
+$("#editor").on("rte:change", (event, html) => console.log(html));
+$("#editor").rteEditor("html");               // read it; rteEditor("html", "<p>x</p>") replaces it
 ```
 
 ## More

package/dist/index.d.ts

@@ -1,8 +1,10 @@
-import type { RkEditorOptions } from "@rathkit/rte-element";
-export interface RkJqueryOptions extends RkEditorOptions {
+import type { RteElementOptions } from "@rathkit/rte-element";
+export interface RteJqueryOptions extends RteElementOptions {
     /** The starting HTML. */
     html?: string;
     readOnly?: boolean;
+    /** Read-only, and not focusable or in the tab order. */
+    disabled?: boolean;
     /** The name screen readers announce for the editing surface. */
     label: string;
 }
@@ -13,12 +15,12 @@ interface JQueryLike {
     };
 }
 /**
- * Adds `.rkEditor()` to jQuery:
- * - `$(el).rkEditor({ label, html, ... })` turns the element into an editor, once;
- * - `$(el).rkEditor("html")` reads the HTML of the first element, `$(el).rkEditor("html", "<p>x</p>")` replaces it;
- * - `$(el).rkEditor("editor")` gives the editor of the first element (a promise, because it is built when the element connects);
- * - `$(el).rkEditor("destroy")` removes it.
- * Changes arrive as `rk:change` events with the HTML as the second argument to the handler.
+ * Adds `.rteEditor()` to jQuery:
+ * - `$(el).rteEditor({ label, html, ... })` turns the element into an editor, once;
+ * - `$(el).rteEditor("html")` reads the HTML of the first element, `$(el).rteEditor("html", "<p>x</p>")` replaces it;
+ * - `$(el).rteEditor("editor")` gives the editor of the first element (a promise, because it is built when the element connects);
+ * - `$(el).rteEditor("destroy")` removes it.
+ * Changes arrive as `rte:change` events with the HTML as the second argument to the handler.
  */
 export declare function install($?: JQueryLike): void;
 export {};

package/dist/index.js

@@ -1,5 +1,5 @@
-const KEY = "rkEditor";
-const editorOf = (host) => host?.__rk ?? host;
+const KEY = "rteEditor";
+const editorOf = (host) => host?.__rte ?? host;
 export function install($ = globalThis.jQuery) {
     $.fn[KEY] = function (arg, value) {
         if (typeof arg === "string") {
@@ -14,33 +14,38 @@ export function install($ = globalThis.jQuery) {
                 case "editor":
                     return first?.whenReady();
                 case "destroy":
-                    this.each(function () { this.__rk?.remove(); delete this.__rk; });
+                    this.each(function () { this.__rte?.remove(); delete this.__rte; });
                     return this;
                 default:
-                    throw new Error(`rkEditor: unknown method "${arg}"`);
+                    throw new Error(`rteEditor: unknown method "${arg}"`);
             }
         }
         const options = arg;
         return this.each(function () {
             const host = this;
-            if (host.__rk)
+            if (host.__rte)
                 return;
-            const { html, readOnly, label, ...rest } = options;
-            const el = document.createElement("rk-editor");
+            const { html, readOnly, disabled, label, ...rest } = options;
+            const el = document.createElement("rte-editor");
             el.setAttribute("label", label);
             if (html !== undefined)
                 el.setAttribute("value", html);
             if (readOnly)
                 el.setAttribute("readonly", "");
+            if (disabled)
+                el.setAttribute("disabled", "");
             el.options = rest;
-            el.addEventListener("rk-change", (event) => {
-                const detail = event.detail;
-                if (typeof $ === "function")
-                    $(host).trigger("rk:change", [detail.html]);
-                else
-                    host.dispatchEvent(new CustomEvent("rk:change", { bubbles: true, detail }));
-            });
-            host.__rk = el;
+            for (const name of ["change", "ready", "focus", "blur", "selection"]) {
+                el.addEventListener(`rte-${name}`, (event) => {
+                    const detail = event.detail;
+                    const payload = name === "change" ? detail.html : name === "selection" ? detail.selection : (host.__rte?.editor ?? detail.editor);
+                    if (typeof $ === "function")
+                        $(host).trigger(`rte:${name}`, [payload]);
+                    else
+                        host.dispatchEvent(new CustomEvent(`rte:${name}`, { bubbles: true, detail }));
+                });
+            }
+            host.__rte = el;
             host.appendChild(el);
         });
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rathkit/rte-jquery",
-  "version": "0.1.0-alpha.4",
-  "description": "The editor for jQuery: $(el).rkEditor(options) over the custom element, with rk:change events.",
+  "version": "0.1.0-alpha.5",
+  "description": "The editor for jQuery: $(el).rteEditor(options) over the custom element, with rte:change events.",
   "keywords": [
     "rich-text",
     "editor",
@@ -44,8 +44,8 @@
     }
   },
   "peerDependencies": {
-    "@rathkit/rte-core": ">=0.1.0-alpha.4 <0.2.0",
-    "@rathkit/rte-element": ">=0.1.0-alpha.4 <0.2.0"
+    "@rathkit/rte-core": ">=0.1.0-alpha.5 <0.2.0",
+    "@rathkit/rte-element": ">=0.1.0-alpha.5 <0.2.0"
   },
   "peerDependenciesMeta": {
     "@rathkit/rte-core": {