@dojo-ng/rich-text 0.1.0 → 0.1.2

package/README.md

@@ -6,7 +6,7 @@ Part of [Dojo NG](../../README.md), a framework-agnostic web component library b
 
 A form-associated WYSIWYG editor built on the Lexical core. The editable region renders in LIGHT DOM (Lexical's selection handling is not reliable inside a shadow root yet), so this component overrides `createRenderRoot`; theming still works because `--dj-*` tokens cascade in light DOM. The editor is a PLUGIN HOST: bold/italic/underline and undo/redo ship as the default plugin set (`default-plugins.ts`) and flow through the same {@link RichTextPlugin} API third-party plugins use. Foundational behavior (`registerRichText`, value sync, root-element setup) stays as core. Toolbar controls, node registration, and output formats all come from plugins. Constraint: Lexical needs node classes at creation, so a `plugins` change after creation rebuilds the editor (serialize → recreate → deserialize). Value is HTML by default; the `format` property selects an alternate serializer contributed by a plugin. Event: `dj-change`.
 
-> Pasted HTML is sanitized against an allowlist by default (scripts, styles, event handlers, inline styles, and unsafe `javascript:`/`data:` URLs are stripped; unknown tags are unwrapped, keeping their text) — a security and consistency hook, not a nicety. Set `sanitizePaste = false` in JS to turn it off, or supply your own `pasteSanitizer(html) => html`. Plain-text pastes bypass it. The exported `sanitizeHtml(html)` is the default and can be reused. Formatting, headings/lists/links, and other node types come from plugins; setting `plugins` replaces the default set, so spread `...defaultPlugins` to keep the basics.
+> Pasted HTML is sanitized against an allowlist by default (scripts, styles, event handlers, inline styles, and unsafe `javascript:`/`data:` URLs are stripped; unknown tags are unwrapped, keeping their text) — a security and consistency hook, not a nicety. Set `sanitizePaste = false` in JS to turn it off, or supply your own `pasteSanitizer(html) => html`. Plain-text pastes bypass it. The exported `sanitizeHtml(html)` is the default and can be reused. Formatting, headings/lists/links, and other node types come from plugins; setting `plugins` replaces the default set, so spread `...defaultPlugins` to keep the basics. `value` is readable and writable at any time, not just at construction: assigning it replaces the whole document (discarding the selection and undo history) and emits no `dj-change`, the same as setting a native input's `value`.
 
 ## Install
 
@@ -58,4 +58,4 @@ Follows the project's WCAG 2.2 AA and localization conventions.
 
 ## More
 
-Live, interactive examples are in the playground (`playground/index.html`). For the full API reference, theming, accessibility, and localization guides, see the [Dojo NG documentation](../../README.md).
+Live, interactive examples are at [play.dojo-ng.com](https://play.dojo-ng.com). For the full API reference, theming, accessibility, and localization guides, see the [Dojo NG documentation](../../README.md).

package/dist/dj-rich-text.d.ts

@@ -26,6 +26,10 @@ export declare class DjRichText extends DjRichText_base implements Partial<DojoF
     static formAssociated: boolean;
     protected createRenderRoot(): this;
     private editable;
+    /** The document, serialized through the active `format` (HTML by default). Readable and writable
+     *  at any time, not just at construction: assigning after the editor is built replaces the whole
+     *  document, discarding the selection and undo history, and emits no `dj-change` — the same as
+     *  setting a native input's `value`. */
     value: string;
     name?: string;
     label?: string;

package/dist/dj-rich-text.js

@@ -15,7 +15,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _DjRichText_instances, _DjRichText_internals, _DjRichText_editor, _DjRichText_applyingValue, _DjRichText_built, _DjRichText_disposers, _DjRichText_active, _DjRichText_selectionSubs, _DjRichText_serializers, _DjRichText_plugins, _DjRichText_ctx, _DjRichText_resolvePlugins, _DjRichText_currentFormat, _DjRichText_buildEditor, _DjRichText_teardown, _DjRichText_serialize, _DjRichText_syncValue, _DjRichText_applyValue, _DjRichText_icon, _DjRichText_renderItem, _DjRichText_toolbarItems;
+var _DjRichText_instances, _DjRichText_internals, _DjRichText_editor, _DjRichText_applyingValue, _DjRichText_appliedValue, _DjRichText_built, _DjRichText_disposers, _DjRichText_active, _DjRichText_selectionSubs, _DjRichText_serializers, _DjRichText_plugins, _DjRichText_ctx, _DjRichText_resolvePlugins, _DjRichText_currentFormat, _DjRichText_buildEditor, _DjRichText_teardown, _DjRichText_serialize, _DjRichText_syncValue, _DjRichText_applyValue, _DjRichText_icon, _DjRichText_renderItem, _DjRichText_toolbarItems;
 import { html, nothing } from "lit";
 import { property, state, query } from "lit/decorators.js";
 import DojoElement, { FormControl } from "@dojo-ng/dojo-element";
@@ -66,6 +66,10 @@ export class DjRichText extends FormControl(DojoElement) {
         _DjRichText_internals.set(this, void 0);
         _DjRichText_editor.set(this, void 0);
         _DjRichText_applyingValue.set(this, false);
+        /** The value the editor last LOADED or last serialized OUT. `#syncValue()` writes `this.value` on
+         *  every editor change, so `value` is in the changed-properties map on every keystroke; comparing
+         *  against this is what tells an outside assignment apart from the editor's own echo. */
+        _DjRichText_appliedValue.set(this, "");
         _DjRichText_built.set(this, false);
         _DjRichText_disposers.set(this, []);
         _DjRichText_active.set(this, new Set());
@@ -73,6 +77,10 @@ export class DjRichText extends FormControl(DojoElement) {
         _DjRichText_serializers.set(this, { html: HTML_FORMAT });
         _DjRichText_plugins.set(this, []);
         _DjRichText_ctx.set(this, void 0);
+        /** The document, serialized through the active `format` (HTML by default). Readable and writable
+         *  at any time, not just at construction: assigning after the editor is built replaces the whole
+         *  document, discarding the selection and undo history, and emits no `dj-change` — the same as
+         *  setting a native input's `value`. */
         this.value = "";
         this.placeholder = "";
         this.disabled = false;
@@ -121,6 +129,7 @@ export class DjRichText extends FormControl(DojoElement) {
         __classPrivateFieldSet(this, _DjRichText_built, false, "f");
     }
     updated(c) {
+        let appliedValue = false;
         if (!__classPrivateFieldGet(this, _DjRichText_editor, "f")) {
             __classPrivateFieldGet(this, _DjRichText_instances, "m", _DjRichText_buildEditor).call(this);
         }
@@ -130,12 +139,21 @@ export class DjRichText extends FormControl(DojoElement) {
             __classPrivateFieldGet(this, _DjRichText_instances, "m", _DjRichText_teardown).call(this);
             __classPrivateFieldGet(this, _DjRichText_instances, "m", _DjRichText_buildEditor).call(this);
         }
+        else if (c.has("value") && this.value !== __classPrivateFieldGet(this, _DjRichText_appliedValue, "f")) {
+            // A value set from OUTSIDE the editor. An equal value here is the editor's own echo and
+            // must not be re-deserialized: doing so would rebuild the document under the caret on
+            // every character typed.
+            __classPrivateFieldGet(this, _DjRichText_instances, "m", _DjRichText_applyValue).call(this, this.value, __classPrivateFieldGet(this, _DjRichText_instances, "m", _DjRichText_currentFormat).call(this));
+            appliedValue = true;
+        }
         if (c.has("disabled")) {
             __classPrivateFieldGet(this, _DjRichText_editor, "f")?.setEditable(!this.isDisabled);
             if (this.editable)
                 this.editable.contentEditable = this.isDisabled ? "false" : "true";
         }
-        if (c.has("format") && !c.has("plugins") && __classPrivateFieldGet(this, _DjRichText_built, "f"))
+        // Skipped when the value branch just ran: that already loaded the document through the new
+        // format, and serializing straight back out would emit a spurious dj-change.
+        if (c.has("format") && !c.has("plugins") && !appliedValue && __classPrivateFieldGet(this, _DjRichText_built, "f"))
             __classPrivateFieldGet(this, _DjRichText_instances, "m", _DjRichText_syncValue).call(this);
     }
     /** Replace the document with the given HTML (regardless of the active `format`). */
@@ -154,7 +172,7 @@ export class DjRichText extends FormControl(DojoElement) {
         return html `
 			<style>
 				dj-rich-text { display: block; font-family: var(--dj-font-family, inherit); }
-				dj-rich-text .dj-rt-toolbar { display: flex; align-items: center; gap: .15rem; padding: .25rem; border: 1px solid var(--dj-color-border, #d1d5db); border-bottom: none; border-radius: var(--dj-input-border-radius-medium, .25rem) var(--dj-input-border-radius-medium, .25rem) 0 0; background: var(--dj-color-neutral-50, #f9fafb); }
+				dj-rich-text .dj-rt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; padding: .25rem; border: 1px solid var(--dj-color-border, #d1d5db); border-bottom: none; border-radius: var(--dj-input-border-radius-medium, .25rem) var(--dj-input-border-radius-medium, .25rem) 0 0; background: var(--dj-color-neutral-50, #f9fafb); }
 				dj-rich-text .dj-rt-sep { align-self: stretch; width: 1px; margin: .15rem .25rem; background: var(--dj-color-border, #d1d5db); }
 				dj-rich-text .dj-rt-editable { min-height: 8rem; padding: var(--dj-spacing-small, .75rem); border: 1px solid var(--dj-color-border, #d1d5db); border-radius: 0 0 var(--dj-input-border-radius-medium, .25rem) var(--dj-input-border-radius-medium, .25rem); outline: none; background: var(--dj-color-background, #fff); color: var(--dj-color-text, #1f2937); }
 				dj-rich-text .dj-rt-editable:focus { border-color: var(--dj-color-primary-600, #2563eb); box-shadow: 0 0 0 1px var(--dj-color-primary-600, #2563eb); }
@@ -171,7 +189,7 @@ export class DjRichText extends FormControl(DojoElement) {
 		`;
     }
 }
-_DjRichText_internals = new WeakMap(), _DjRichText_editor = new WeakMap(), _DjRichText_applyingValue = new WeakMap(), _DjRichText_built = new WeakMap(), _DjRichText_disposers = new WeakMap(), _DjRichText_active = new WeakMap(), _DjRichText_selectionSubs = new WeakMap(), _DjRichText_serializers = new WeakMap(), _DjRichText_plugins = new WeakMap(), _DjRichText_ctx = new WeakMap(), _DjRichText_instances = new WeakSet(), _DjRichText_resolvePlugins = function _DjRichText_resolvePlugins() {
+_DjRichText_internals = new WeakMap(), _DjRichText_editor = new WeakMap(), _DjRichText_applyingValue = new WeakMap(), _DjRichText_appliedValue = new WeakMap(), _DjRichText_built = new WeakMap(), _DjRichText_disposers = new WeakMap(), _DjRichText_active = new WeakMap(), _DjRichText_selectionSubs = new WeakMap(), _DjRichText_serializers = new WeakMap(), _DjRichText_plugins = new WeakMap(), _DjRichText_ctx = new WeakMap(), _DjRichText_instances = new WeakSet(), _DjRichText_resolvePlugins = function _DjRichText_resolvePlugins() {
     return this.plugins.length ? this.plugins : defaultPlugins;
 }, _DjRichText_currentFormat = function _DjRichText_currentFormat() {
     return __classPrivateFieldGet(this, _DjRichText_serializers, "f")[this.format] ?? HTML_FORMAT;
@@ -261,6 +279,7 @@ _DjRichText_internals = new WeakMap(), _DjRichText_editor = new WeakMap(), _DjRi
     }
     __classPrivateFieldSet(this, _DjRichText_built, true, "f");
     this.ready = true; // re-render so the toolbar shows now that ctx.editor is live
+    __classPrivateFieldSet(this, _DjRichText_appliedValue, this.value, "f");
     if (this.value)
         __classPrivateFieldGet(this, _DjRichText_instances, "m", _DjRichText_applyValue).call(this, this.value, __classPrivateFieldGet(this, _DjRichText_instances, "m", _DjRichText_currentFormat).call(this));
 }, _DjRichText_teardown = function _DjRichText_teardown() {
@@ -277,12 +296,14 @@ _DjRichText_internals = new WeakMap(), _DjRichText_editor = new WeakMap(), _DjRi
     return editor.getEditorState().read(() => fmt.serialize(editor));
 }, _DjRichText_syncValue = function _DjRichText_syncValue() {
     const out = __classPrivateFieldGet(this, _DjRichText_instances, "m", _DjRichText_serialize).call(this);
+    __classPrivateFieldSet(this, _DjRichText_appliedValue, out, "f");
     if (out !== this.value) {
         this.value = out;
         __classPrivateFieldGet(this, _DjRichText_internals, "f").setFormValue(out);
         this.emit("dj-change");
     }
 }, _DjRichText_applyValue = function _DjRichText_applyValue(data, fmt) {
+    __classPrivateFieldSet(this, _DjRichText_appliedValue, data, "f");
     const editor = __classPrivateFieldGet(this, _DjRichText_editor, "f");
     if (!editor) {
         this.value = data;
@@ -322,7 +343,7 @@ _DjRichText_internals = new WeakMap(), _DjRichText_editor = new WeakMap(), _DjRi
     }
     return items;
 };
-DjRichText.version = "0.1.0";
+DjRichText.version = "0.1.2";
 DjRichText.focusable = true;
 DjRichText.formAssociated = true;
 __decorate([

package/package.json

@@ -1,5 +1,29 @@
-{ "name": "@dojo-ng/rich-text", "version": "0.1.0", "license": "BSD-3-Clause", "description": "Dojo NG rich-text (WYSIWYG) web component on Lexical", "type": "module",
-  "main": "./dist/index.js", "module": "./dist/index.js", "types": "./dist/index.d.ts",
-  "files": ["dist"],
-  "scripts": { "build": "tsc -p tsconfig.json", "clean": "rm -rf dist" },
-  "dependencies": { "@dojo-ng/dojo-element": "^0.1.0", "@dojo-ng/button": "^0.1.0", "lexical": "^0.21.0", "@lexical/rich-text": "^0.21.0", "@lexical/history": "^0.21.0", "@lexical/html": "^0.21.0", "@lexical/clipboard": "^0.21.0", "@lexical/utils": "^0.21.0", "lit": "^3.3.0" } }
+{
+  "name": "@dojo-ng/rich-text",
+  "version": "0.1.2",
+  "license": "BSD-3-Clause",
+  "description": "Dojo NG rich-text (WYSIWYG) web component on Lexical",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "!dist/**/*.map"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@dojo-ng/dojo-element": "^0.1.0",
+    "@dojo-ng/button": "^0.1.1",
+    "lexical": "^0.21.0",
+    "@lexical/rich-text": "^0.21.0",
+    "@lexical/history": "^0.21.0",
+    "@lexical/html": "^0.21.0",
+    "@lexical/clipboard": "^0.21.0",
+    "@lexical/utils": "^0.21.0",
+    "lit": "^3.3.0"
+  }
+}