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

package/README.md

@@ -1,11 +1,35 @@
 # @rathkit/rte-jquery
 
-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-jquery is in alpha. Install the alpha with the `next` tag:
+The editor for jQuery: `$(el).rkEditor(options)` over the custom element, with `rk:change` events. Works with jQuery 3 and 4.
+
+## Install
 
 ```sh
-npm install @rathkit/rte-jquery@next
+npm install @rathkit/rte-jquery@next @rathkit/rte-core@next @rathkit/rte-element@next
 ```
 
-About the project: https://rathkit.com
+This package has no dependencies of its own. It works with `@rathkit/rte-core`, `@rathkit/rte-element` (peer dependencies, all optional so that npm installs nothing you did not ask for), so install the ones you use alongside it.
+
+## Example
+
+```js
+import $ from "jquery";
+import "@rathkit/rte-element/define";
+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
+```
+
+## 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/index.d.ts

@@ -0,0 +1,24 @@
+import type { RkEditorOptions } from "@rathkit/rte-element";
+export interface RkJqueryOptions extends RkEditorOptions {
+    /** The starting HTML. */
+    html?: string;
+    readOnly?: boolean;
+    /** The name screen readers announce for the editing surface. */
+    label: string;
+}
+interface JQueryLike {
+    fn: Record<string, unknown>;
+    (element: Element): {
+        trigger(name: string, data: unknown[]): void;
+    };
+}
+/**
+ * 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.
+ */
+export declare function install($?: JQueryLike): void;
+export {};

package/dist/index.js

@@ -0,0 +1,47 @@
+const KEY = "rkEditor";
+const editorOf = (host) => host?.__rk ?? host;
+export function install($ = globalThis.jQuery) {
+    $.fn[KEY] = function (arg, value) {
+        if (typeof arg === "string") {
+            const first = editorOf(this[0]);
+            switch (arg) {
+                case "html":
+                    if (value === undefined)
+                        return first?.value;
+                    this.each(function () { const el = editorOf(this); if (el)
+                        el.value = value; });
+                    return this;
+                case "editor":
+                    return first?.whenReady();
+                case "destroy":
+                    this.each(function () { this.__rk?.remove(); delete this.__rk; });
+                    return this;
+                default:
+                    throw new Error(`rkEditor: unknown method "${arg}"`);
+            }
+        }
+        const options = arg;
+        return this.each(function () {
+            const host = this;
+            if (host.__rk)
+                return;
+            const { html, readOnly, label, ...rest } = options;
+            const el = document.createElement("rk-editor");
+            el.setAttribute("label", label);
+            if (html !== undefined)
+                el.setAttribute("value", html);
+            if (readOnly)
+                el.setAttribute("readonly", "");
+            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;
+            host.appendChild(el);
+        });
+    };
+}

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@rathkit/rte-jquery",
-  "version": "0.0.0",
-  "description": "Placeholder. @rathkit/rte-jquery is in alpha: install it with the next tag.",
+  "version": "0.1.0-alpha.3",
+  "description": "The editor for jQuery: $(el).rkEditor(options) over the custom element, with rk:change events.",
+  "keywords": [
+    "rich-text",
+    "editor",
+    "wysiwyg",
+    "contenteditable",
+    "zero-dependencies",
+    "typescript",
+    "jquery",
+    "plugin"
+  ],
   "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-element": ">=0.1.0-alpha.3 <0.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@rathkit/rte-core": {
+      "optional": true
+    },
+    "@rathkit/rte-element": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@rathkit/rte-core": "workspace:*",
+    "@rathkit/rte-element": "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": "jquery",
+        "entry": "dist/index.js",
+        "gzipKB": 2
+      }
+    ]
   }
 }