@richscripts/richtexteditor 2.6.3 → 2.6.4

package/angular/component.ts

@@ -60,6 +60,9 @@ export class RichTextEditorAngularComponent implements AfterViewInit, OnChanges,
   @Input() config: Record<string, unknown> = {};
   @Input() value?: RichTextEditorStructuredInput;
   @Input() valueFormat: RichTextEditorValueFormat = "html";
+  // Quiet period before the document is serialised and `change` is emitted.
+  // 0 restores the pre-2.6 behaviour of emitting on every keystroke.
+  @Input() changeDelay = 120;
 
   @Output() change = new EventEmitter<RichTextEditorAngularChangeEvent>();
   @Output() error = new EventEmitter<Error>();
@@ -68,6 +71,8 @@ export class RichTextEditorAngularComponent implements AfterViewInit, OnChanges,
   @ViewChild("host", { static: true }) hostRef!: ElementRef<HTMLDivElement>;
 
   private changeHandler: (() => void) | null = null;
+  private emitChange: ((() => void) & { flush(): void; cancel(): void }) | null = null;
+  private lastEmitted: unknown;
   private editor: RichTextEditorInstance | null = null;
 
   async ngAfterViewInit(): Promise<void> {
@@ -84,16 +89,22 @@ export class RichTextEditorAngularComponent implements AfterViewInit, OnChanges,
         this.syncEditor(this.value);
       }
 
-      this.changeHandler = () => {
+      // Coalesce: the editor fires `change` per keystroke and getEditorValue
+      // serialises the whole document (78 ms on a 3000-paragraph document).
+      // See shared.createChangeCoalescer.
+      this.emitChange = shared.createChangeCoalescer(() => {
         if (!this.editor) {
           return;
         }
 
+        this.lastEmitted = shared.getEditorValue(this.editor, this.valueFormat);
         this.change.emit({
           editor: this.editor,
-          value: shared.getEditorValue(this.editor, this.valueFormat)
+          value: this.lastEmitted
         });
-      };
+      }, this.changeDelay == null ? 120 : this.changeDelay);
+
+      this.changeHandler = () => { this.emitChange(); };
 
       this.editor.attachEvent("change", this.changeHandler);
       this.ready.emit(this.editor);
@@ -114,6 +125,8 @@ export class RichTextEditorAngularComponent implements AfterViewInit, OnChanges,
 
   ngOnDestroy(): void {
     if (this.editor) {
+      // Flush first, or the last keystroke before teardown is lost.
+      if (this.emitChange) { this.emitChange.flush(); }
       if (this.changeHandler && typeof this.editor.detachEvent === "function") {
         this.editor.detachEvent("change", this.changeHandler);
       }

package/integrations/shared.js

@@ -5141,6 +5141,32 @@ function getEditorValue(editor, format) {
     return format === "json" ? editor.getJSON() : editor.getHTMLCode();
 }
 
+// Coalesce the editor's `change` bursts before serialising the document.
+//
+// The editor fires `change` once per keystroke, and every wrapper responded by
+// calling getHTMLCode() -- serialising the WHOLE document. Measured on a
+// 3000-paragraph (134 KB) document that is 78 ms per keypress, and in controlled
+// mode it happens twice per keystroke (once to emit, once for the value-sync
+// comparison), so typing falls behind the keyboard.
+//
+// setTimeout, not requestAnimationFrame: rAF stops firing in a background tab,
+// which would strand the last edit unsent.
+function createChangeCoalescer(emit, delay) {
+    var timer = null;
+    var wrapped = function () {
+        if (timer) { clearTimeout(timer); }
+        timer = setTimeout(function () { timer = null; emit(); }, delay);
+    };
+    // Callers MUST flush on teardown, or the final keystroke before unmount is lost.
+    wrapped.flush = function () {
+        if (timer) { clearTimeout(timer); timer = null; emit(); }
+    };
+    wrapped.cancel = function () {
+        if (timer) { clearTimeout(timer); timer = null; }
+    };
+    return wrapped;
+}
+
 function setEditorValue(editor, value, format) {
     if (format === "json") {
         editor.setJSON(value);
@@ -5176,6 +5202,7 @@ module.exports = {
     serializeStructuredContent: serializeStructuredContent,
     setDocumentPageSetup: setDocumentPageSetup,
     setEditorValue: setEditorValue,
+    createChangeCoalescer: createChangeCoalescer,
     syncTableOfContents: syncTableOfContents,
     toMarkdown: toMarkdown,
     validateStructuredContent: validateStructuredContent

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.6.3",
+  "version": "2.6.4",
   "description": "A full-featured JavaScript rich text editor (WYSIWYG) with toolbar, plugins, i18n support, a built-in AI Toolkit (Ask AI, AI Chat, AI Review drawer, BYOK resolver), structured content APIs (JSON/Markdown), and an optional collaboration / review stack: slash commands, @mentions, human-author Track Changes, threaded comments, revision history, and Yjs-backed presence. Ships first-class React, Vue, Angular and Svelte bindings, a headless \"bring your own UI\" core, and server-safe conversion helpers.",
   "main": "./richtexteditor/rte.js",
   "bin": {

package/react/index.d.ts

@@ -73,6 +73,13 @@ export interface RichTextEditorReactProps
   onReady?: (editor: RichTextEditorInstance) => void;
   value?: RichTextEditorStructuredInput;
   valueFormat?: RichTextEditorValueFormat;
+  /**
+   * Quiet period in ms before the document is serialised and `onChange` fires.
+   * The editor emits `change` on every keystroke and serialising a large
+   * document is not free, so changes are coalesced. Defaults to 120.
+   * Set to 0 to emit synchronously on every change.
+   */
+  changeDelay?: number;
 }
 
 export const RichTextEditorReact: React.ForwardRefExoticComponent<

package/react/index.js

@@ -112,6 +112,10 @@ var RichTextEditorReact = React.forwardRef(function RichTextEditorReact(props, f
     var hostRef = React.useRef(null);
     var editorRef = React.useRef(null);
     var onChangeRef = React.useRef(props.onChange);
+    var lastEmittedRef = React.useRef(undefined);
+    // 0 disables coalescing and restores the pre-2.6 behaviour of emitting
+    // synchronously on every change.
+    var changeDelayRef = React.useRef(props.changeDelay == null ? 120 : props.changeDelay);
     var onReadyRef = React.useRef(props.onReady);
     var onErrorRef = React.useRef(props.onError);
     var formatRef = React.useRef(props.valueFormat || "html");
@@ -132,6 +136,7 @@ var RichTextEditorReact = React.forwardRef(function RichTextEditorReact(props, f
     React.useEffect(function () {
         var disposed = false;
         var changeHandler = null;
+        var emitChange = null;
         var activeHost = hostRef.current;
 
         var readyPromise = props.autoload === false
@@ -154,11 +159,19 @@ var RichTextEditorReact = React.forwardRef(function RichTextEditorReact(props, f
                     shared.setEditorValue(editor, initialValue, formatRef.current);
                 }
 
-                changeHandler = function () {
+                // Serialise at most once per quiet period rather than once per
+                // keystroke. lastEmittedRef lets the value-sync effect below skip a
+                // SECOND full serialisation when the parent hands back exactly what
+                // we just emitted, which is the common controlled-component case.
+                emitChange = shared.createChangeCoalescer(function () {
+                    var value = shared.getEditorValue(editor, formatRef.current);
+                    lastEmittedRef.current = value;
                     if (onChangeRef.current) {
-                        onChangeRef.current(shared.getEditorValue(editor, formatRef.current), editor);
+                        onChangeRef.current(value, editor);
                     }
-                };
+                }, changeDelayRef.current);
+
+                changeHandler = function () { emitChange(); };
 
                 editor.attachEvent("change", changeHandler);
 
@@ -174,6 +187,8 @@ var RichTextEditorReact = React.forwardRef(function RichTextEditorReact(props, f
 
         return function () {
             disposed = true;
+            // Flush before teardown or the last keystroke never reaches onChange.
+            if (emitChange) { emitChange.flush(); }
             var ed = editorRef.current;
             if (ed) {
                 if (changeHandler && typeof ed.detachEvent === "function") {
@@ -198,6 +213,13 @@ var RichTextEditorReact = React.forwardRef(function RichTextEditorReact(props, f
         }
 
         var nextHtml = shared.normalizeStructuredContent(props.value);
+        // Fast path: the parent handed back exactly what we last emitted, which is
+        // what a controlled component does on every keystroke. Comparing against the
+        // remembered string avoids a second full getHTMLCode() of the document.
+        if (lastEmittedRef.current !== undefined &&
+            shared.normalizeStructuredContent(lastEmittedRef.current) === nextHtml) {
+            return;
+        }
         if (editorRef.current.getHTMLCode() !== nextHtml) {
             shared.setEditorValue(editorRef.current, props.value, props.valueFormat || "html");
         }

package/richtexteditor/CHANGELOG.md

@@ -1,5 +1,92 @@
 # RichTextEditor Changelog
 
+## Version 2.6.4 — core 2.5.7: undo, IME, sanitizer, collaboration and accessibility fixes
+
+> Core bumped to 2.5.7. The earlier build of this work was labelled 2.5.6, which is
+> already published (protected rte.js 564,563). Two different builds must not share a
+> version number, least of all on npm and NuGet where a version cannot be reused or
+> corrected after the fact.
+>
+> npm was the last channel to receive this build. The website, the customer download
+> zips and NuGet (RichTextBox 1.0.8) were already serving core 2.5.7 / protected
+> rte.js 565,112 while npm was still on 2.6.3 / core 2.5.6 — so npm users did not have
+> the undo fix below, which looks exactly like data loss. Verified byte-identical to
+> the live site before publishing.
+
+### One Ctrl+Z after loading a document blanked it
+`setHTMLCode()` did not seed the undo baseline, so the history baseline stayed the *empty* document and the last available undo discarded the loaded content instead of returning to it. Every framework wrapper was affected, because React, Vue and Angular all load through `setEditorValue()` -> `setHTMLCode()`. Load a document, type one character, press Ctrl+Z, and the document went blank. Redo recovered it, but it looked exactly like data loss on the most common keystroke in an editor. Typing granularity is unchanged; with two typing bursts the first undo always behaved correctly, which is why the bug hid behind however many edits you happened to make. (core rte.js)
+
+### IME composition fired a change event per phonetic keystroke
+There was no `compositionstart`/`compositionend` handling anywhere — not in the core, not in any wrapper. Composing 你好 produced 4 change events instead of 1, and intermediate phonetic buffers could become undo steps. Every `change` makes the framework wrappers serialise the whole document, and a controlled component that writes the value back mid-composition tears down the IME buffer. Now 0 events while composing and 1 on commit. (core rte.js)
+
+### Framework wrappers serialised the whole document on every keystroke
+React, Vue and Angular each called `getEditorValue()` — a full `getHTMLCode()` — inside the `change` handler with no coalescing, and in controlled mode a second time for the value comparison. Measured on a 3,000-paragraph (134 KB) document, typing 19 characters cost 19 serialisations and 1,735 ms; it now costs 1 and 90 ms. New optional `changeDelay` prop (default 120 ms; 0 restores the old synchronous behaviour).
+
+### Unquoted attribute values had their first character duplicated
+The paste/import parser passed the value's *first character* as the quote and the *rest* as the value, then wrapped the value in that "quote": `class=hello` became `class="helloh"`, `title=abc` became `title="abca"` (visibly wrong tooltip text), and single-character values vanished — `cellpadding=0` was dropped entirely. Unquoted attributes are legal HTML and are what Word emits, which is also why Word's `class=MsoNormal` survived the Mso filter as `MsoNormalM` and leaked into saved content. (core rte.js)
+
+### HTML comments are preserved
+`sanitizer.js` deleted every comment, justified only by the remark "comments can hide markup". That is false — serialise `<!--<script>alert(1)</script>-->`, re-parse it, and the script is inert. What is genuinely unsafe is a small enumerable set of comment *data* that cannot survive serialisation (containing `-->` or `--!>`, or starting with `>` or `->`), which breaks out on re-parse; only those are dropped now. This restores CMS marker round-tripping and Outlook conditional comments, the mechanism `emailtoolkit.js` needs. The live-DOM MutationObserver had to change too: it skipped every non-element node, which was safe only while comments were being deleted unconditionally.
+
+### Tag and attribute allowlists accept patterns
+`sanitizerAllowTags` / `sanitizerAllowAttributes` now take `"x-*"` wildcards and RegExp, not just exact names — the difference between a usable General-HTML-Support equivalent and one that requires an integrator to enumerate every element a CMS might emit. Wildcards are matched by hand rather than compiled to a RegExp, so a config value can never be a regex-injection vector. A pattern widens what is kept, never what executes.
+
+### Split-button dropdown arrows failed WCAG 2.2 target size
+The dropdown half of a split button was 14x24 CSS px, failing SC 2.5.8 Target Size (Minimum), Level AA, which requires 24x24; the spacing exception cannot apply because the two halves are adjacent by construction. Both the arrow and its container were widened (42 -> 52 px), because widening the arrow alone made it worse — the fixed-width flex row shrank both halves to 19 px. Split buttons are now 48 px wide instead of 38 px. SC 2.5.5 (44 px, Level AAA) is unchanged and not claimed.
+
+Found by running features end-to-end on the source build; every item has a regression test in RTEJSWeb/_tests.
+
+### 16 slash commands were unreachable
+Plugins that sort before slashcommand.js registered their slash entries before the registry existed and were silently dropped (`/import document`, `/readability stats`), and slashcommand.js evaluated its own feature gates once at init, before later-sorting plugins defined their APIs (sort table asc/desc, RTL/LTR/auto direction, watermark, table of contents, typewriter, focus mode). Defaults are now refreshed after all plugins initialise and when the menu opens; entries for cross-reference, restricted editing and dictation (opt-in) were added. Menu: 68 -> 82.
+
+### The slash menu is now localizable
+Every entry (title, description, section) resolves through the language packs with an English fallback. zh-Hans, zh-Hant and de packs ship the keys (titles, sections, descriptions for Chinese); the plugin toolbar tooltips that stayed English (accessibility checker, comments, minimap, outline, AI assist, text-part language) are covered too.
+
+### Ctrl+F opened a different Find dialog than the toolbar button
+Ctrl+F and `editor.openFindDialog()` now open the same localized Find & Replace panel as the toolbar command; the hard-coded-English dialog remains only as a fallback. (core rte.js — ships with the next protected build)
+
+### Shadow DOM: an inline theme stylesheet was not adopted
+A theme injected as an inline `<style>` (Vite / webpack style-loader) left a shadow-root editor unstyled (39,726 px toolbar). Inline styles are now recognised by content.
+
+### `<rich-text-editor>` child markup
+Markup written between the tags becomes the initial value when no `value` attribute is set (like `<textarea>`) and is consumed either way instead of rendering beside the editor.
+
+### Real-time collaboration: text sync through a relay was broken on the documented path
+With `collabTextSync: "crdt"`, a `Y.Doc` built by your own Yjs (npm / esm `yjs` + `y-websocket`, exactly as the docs show) could not receive the engine's nodes — presence worked and the status reported `crdt`, but text never reached other peers. The plugin now bridges such a doc into the engine's Yjs and relays updates both ways; pass your module as `attach({ Y })` (the docs' snippets do). Without it the plugin fails loudly with a `fallbackReason` instead of silently claiming to sync. Regression test: `_tests/collab-relay-sync.test.js` (two real browser pages through a WebSocket relay).
+
+### CRDT engine: comment anchors, mentions and tracked changes now travel to peers
+In `crdt` text-sync mode, inline elements that are not formatting (comment anchors, @mention chips, tracked-change spans, footnote references) folded into plain text inside the Yjs document, so collaborators never received them and any re-render dropped them locally. The engine now carries such elements as a passthrough mark (tag + attributes) and renders them back as one element with formatting nested inside.
+
+### CRDT engine: a local edit could be wiped by a same-tick document update
+The engine re-rendered from Yjs on any non-local update and discarded not-yet-flushed local DOM mutations; writing a comment's ledger entry right after inserting its anchor erased the anchor. Pending local mutations are now committed before a re-render, and the plugin's own ledger writes no longer trigger one.
+
+### comments.add accepts a DOM Range
+`editor.comments.add({ text, anchor: range })` now highlights the range; previously only an anchor object with a `text` field did, so a plain Range silently produced a comment without a highlight.
+
+### CRDT engine: concurrent edits to one paragraph no longer duplicate it
+Two collaborators typing in the same paragraph at the same time used to converge to both versions of the paragraph body. The engine now applies minimal text edits (common prefix/suffix) so concurrent typing merges character by character.
+
+### Undo in collaborative sessions is now scoped to your own edits
+With `collabTextSync: "crdt"`, Ctrl+Z ran the editor's snapshot undo and could revert other people's changes on every peer. Undo/redo now use the engine's per-author undo manager while collaboration is active.
+
+### insertcode: storage access guarded
+`sessionStorage` reads/writes are wrapped, so the command no longer throws in sandboxed or opaque-origin embeds.
+
+## Version 2.6.3 — Markdown task lists + escaped-character fixes (core 2.5.6)
+
+More markdown round-trip completeness (core rte.js 2.5.5→2.5.6):
+- GFM task lists now round-trip: a todo item (rte-task-item / data-checked) exports as "- [x]"/"- [ ]" and imports back to the same checkbox markup (nested tasks included). A normal list stays a normal list.
+- Backslash-escaped markdown characters (* _ [ ) imported wrong — they were parsed as formatting and leaked NUL bytes into the output. They now import as the literal character.
+- A literal < or > in text round-tripped as &lt; ; the exporter no longer backslash-escapes angle brackets (the importer already escapes them safely).
+
+## Version 2.6.2 — Markdown and .docx round-trip fixes (core 2.5.5)
+
+Round-trip fixes found by dogfooding export→import (core rte.js 2.5.4→2.5.5):
+- Markdown import threw on any link (URL sanitizer out of scope) — fixed.
+- Markdown GFM tables + indented nested lists did not import (became paragraphs) — now parsed (table header → <th>; nested via an indentation stack).
+- Inline code was double-escaped — fixed.
+- .docx table headers (<w:tblHeader/>) and blockquotes (Quote style) dropped on import — now <th>/<blockquote>.
+
 ## Version 2.6.0 — Layout tables, crash recovery, shadow DOM, web component (Pass 69)
 
 > `rte.js` is unchanged from 2.5.4 — every item below is a plugin or a companion