@richscripts/richtexteditor 2.14.0 → 2.15.0

package/richtexteditor/runtime/colorpicker_more_ns.htm

@@ -4,17 +4,28 @@
 	<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.1)" />
 
 	<script type="text/javascript">
+		// Call the editor directly when this frame may. Opened from disk (file://) every frame
+		// is its own origin and the direct call throws a SecurityError - which used to abort this
+		// page's load before it drew Recent, and made OK do nothing. Post a message instead; the
+		// editor's Color Picker listens for this frame's messages.
+		function callPicker(method, value) {
+			try { parent.rtecolorpicker[method](value); return; }
+			catch (e) { }
+			try { parent.postMessage({ rtecolorpicker: method, value: value }, "*"); }
+			catch (e) { }
+		}
 		function updateColor(c) {
-			parent.rtecolorpicker.update(c);
+			callPicker("update", c);
 		}
 		function selectColor(c) {
-			parent.rtecolorpicker.select(c);
+			callPicker("select", c);
 		}
 		function selectCancel() {
-			parent.rtecolorpicker.cancel();
+			callPicker("cancel");
 		}
 		function setCallback(cb) {
-			parent.rtecolorpicker.setCallback(cb);
+			try { parent.rtecolorpicker.setCallback(cb); }
+			catch (e) { }
 		}
 	</script>
 
@@ -121,12 +132,14 @@
 
 		}
 
-		if (top.dialogArguments) {
-			if (typeof (top.dialogArguments) == 'object') {
-				if (top.dialogArguments.onchange) {
-					firecolorchange = top.dialogArguments.onchange;
-					_origincolor = top.dialogArguments.color;
-					_editor = top.dialogArguments.editor;
+		var _dialogArguments = null;
+		try { _dialogArguments = top.dialogArguments; } catch (e) { }	// cross-origin from disk
+		if (_dialogArguments) {
+			if (typeof (_dialogArguments) == 'object') {
+				if (_dialogArguments.onchange) {
+					firecolorchange = _dialogArguments.onchange;
+					_origincolor = _dialogArguments.color;
+					_editor = _dialogArguments.editor;
 				}
 			}
 		}
@@ -313,7 +326,8 @@
 			msg.SelectAColor = "Select a color:";
 			msg.OKButton = "OK";
 			msg.CancelButton = "Cancel";
-			msg.Recent = "Recent";
+			msg.Recent = "Recent colors";
+			msg.RecentEmpty = "Colors you apply will appear here.";
 			msg.WebSafeWarning = "Warning: not a web safe color";
 			msg.WebSafeClick = "Click to select web safe color";
 			msg.HsbHue = "H:";
@@ -392,11 +406,17 @@
 			frm.ColorType[new Number(GetCookie("ColorMode") || 0)].checked = true;
 			ColorMode_Changed(e);
 
-			var recent = GetCookie("RecentColors") || "";
+			// The editor passes its list (every colour it applied, from anywhere); fall back to
+			// the shared storage for a page opened some other way.
+			var recent = GetQuery("Recent") || GetCookie("RecentColors") || "";
+			recent = String(recent).toUpperCase().replace(/[^0-9A-F]/g, "");
+			recent = recent.substring(0, recent.length - recent.length % 6);
 
 			var RecentTooltip = msg.RecentTooltip;
+			var recentShown = 0;
 			for (var i = 1; i < 33; i++)
-				if (recent.length / 6 >= i) {
+				if (recent.length / 6 >= i && i <= 24) {
+					recentShown++;
 					hex = recent.substr((i - 1) * 6, 6);
 					var rgb = HexToRgb(hex);
 					var title = formatString(msg.RecentTooltip, hex, rgb[0], rgb[1], rgb[2]);
@@ -410,8 +430,13 @@
 					recentColor.onkeydown = pnlRecent_KeyDown;
 				}
 				else
-					document.getElementById("pnlRecent" + i).style.border = "0px";
-			//Hide(document.all["pnlRecent" + i]);
+					document.getElementById("pnlRecent" + i).className = "recent-empty";
+			if (!recentShown) {
+				var none = document.createElement("span");
+				none.id = "pnlRecentNone";
+				none.innerText = msg.RecentEmpty;
+				document.getElementById("pnlRecent").appendChild(none);
+			}
 		}
 
 		function pnlRecent_Click(e) {
@@ -2421,6 +2446,56 @@ Elements
 			margin: 0;
 			text-align: center;
 		}
+
+		/* Recent colors: only the swatches there are, rounded, in a grid - not 32 sunken empty
+		   boxes. Up to 24 (three rows) fit the space. */
+		#colorpickerpanel #pnlRecentBorder {
+			display: none;
+		}
+
+		#colorpickerpanel #lblRecent {
+			width: 160px;
+		}
+
+		#colorpickerpanel #pnlRecent {
+			display: grid;
+			grid-template-columns: repeat(8, 16px);
+			grid-auto-rows: 16px;
+			gap: 4px;
+			align-content: start;
+			height: 72px;
+		}
+
+		#colorpickerpanel #pnlRecent DIV {
+			position: static;
+			width: 16px;
+			height: 16px;
+			box-sizing: border-box;
+			border: 1px solid rgba(0, 0, 0, .22);
+			border-radius: 3px;
+			cursor: pointer;
+			transition: transform .1s, box-shadow .1s;
+		}
+
+		#colorpickerpanel #pnlRecent DIV:hover {
+			transform: scale(1.2);
+			box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+		}
+
+		#colorpickerpanel #pnlRecent DIV:focus-visible {
+			outline: 2px solid #1a73e8;
+			outline-offset: 1px;
+		}
+
+		#colorpickerpanel #pnlRecent DIV.recent-empty {
+			display: none;
+		}
+
+		#pnlRecentNone {
+			grid-column: 1 / -1;
+			font: 11px/1.35 Arial, sans-serif;
+			color: #6b7280;
+		}
 	</style>
 	<title>CustomColor</title>
 </head>
@@ -2683,7 +2758,9 @@ Elements
 <script>
 
 	new function () {
-		var editor = parent.rtecolorpickereditor;
+		var editor = null;
+		try { editor = parent.rtecolorpickereditor; } catch (e) { }	// cross-origin from disk: keep English
+		if (!editor || !editor.getLangText) return;
 		var ns = document.getElementsByTagName("*");
 		for (var i = 0; i < ns.length; i++) {
 			var n = ns[i];

package/scripts/build-angular.mjs

@@ -0,0 +1,97 @@
+// Build a partial-Ivy ESM entry point. Never publishes or changes editor core.
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import os from 'node:os';
+import { createRequire } from 'node:module';
+import { spawnSync } from 'node:child_process';
+import { createHash } from 'node:crypto';
+const packageRoot = path.resolve(import.meta.dirname, '..');
+const repoRoot = path.dirname(packageRoot);
+const sha256 = data => createHash('sha256').update(data).digest('hex');
+// npm may repack an installed distribution. It contains validated generated
+// output, not the maintainer-only TypeScript sources/toolchain.
+try { await fs.access(path.join(packageRoot, 'angular/component.ts')); }
+catch (error) {
+  if (error.code !== 'ENOENT') throw error;
+  const manifest = JSON.parse(await fs.readFile(path.join(packageRoot, 'angular/build-manifest.json'), 'utf8'));
+  for (const [file, expected] of Object.entries(manifest.outputs)) {
+    if (sha256(await fs.readFile(path.join(packageRoot, file))) !== expected.sha256) throw new Error('Invalid prebuilt Angular output: ' + file);
+  }
+  for (const [file, expected] of Object.entries(manifest.sources)) {
+    let data;
+    try { data = await fs.readFile(path.join(packageRoot, file)); }
+    catch (readError) { if (readError.code === 'ENOENT') continue; throw readError; }
+    if (sha256(data) !== expected) throw new Error('Angular dependency changed; rebuild from the repository: ' + file);
+  }
+  console.log('Verified prebuilt Angular entry point');
+  process.exit(0);
+}
+const ownRequire = createRequire(path.join(packageRoot, 'package.json'));
+let toolRequire = ownRequire;
+try { toolRequire.resolve('@angular/compiler-cli/package.json'); }
+catch {
+  // The downloadable Angular demo already has this pinned toolchain installed
+  // in a repository checkout. Published consumers do not run this build step.
+  toolRequire = createRequire(path.join(repoRoot, 'Demos/rte-ng-ts/package.json'));
+}
+const compilerPackage = toolRequire.resolve('@angular/compiler-cli/package.json');
+const compilerInfo = JSON.parse(await fs.readFile(compilerPackage, 'utf8'));
+const compilerDir = path.dirname(compilerPackage);
+const compilerBin = path.resolve(compilerDir, compilerInfo.bin.ngc);
+const angularScope = path.dirname(path.dirname(toolRequire.resolve('@angular/core/package.json')));
+const rxjs = path.dirname(toolRequire.resolve('rxjs/package.json'));
+const stage = await fs.mkdtemp(path.join(os.tmpdir(), 'rte-angular-apf-'));
+const config = {
+  compilerOptions: {
+    target: 'ES2022', module: 'ES2022', moduleResolution: 'bundler',
+    experimentalDecorators: true, strict: true, declaration: true,
+    skipLibCheck: false, noEmitOnError: true, types: [],
+    rootDir: packageRoot, outDir: path.join(stage, 'out'), baseUrl: packageRoot,
+    paths: { '@angular/*': [path.join(angularScope, '*')], rxjs: [rxjs], 'rxjs/*': [path.join(rxjs, '*')] }
+  },
+  angularCompilerOptions: { strictTemplates: true, compilationMode: 'partial' },
+  files: [path.join(packageRoot, 'angular/index.ts')]
+};
+const configFile = path.join(stage, 'tsconfig.json');
+await fs.writeFile(configFile, JSON.stringify(config, null, 2));
+const result = spawnSync(process.execPath, [compilerBin, '-p', configFile], { cwd: packageRoot, encoding: 'utf8', windowsHide: true, timeout: 120000 });
+process.stdout.write(result.stdout || ''); process.stderr.write(result.stderr || '');
+if (result.status !== 0) throw new Error('Angular partial compilation failed; staging retained at ' + stage);
+const esbuild = toolRequire('esbuild');
+const bundled = await esbuild.build({
+  entryPoints: [path.join(stage, 'out/angular/index.js')],
+  bundle: true, write: false, format: 'esm', platform: 'browser', target: 'es2022',
+  charset: 'utf8', minifyWhitespace: true, legalComments: 'eof',
+  banner: { js: '// Generated Angular partial-Ivy entry. See package license.' },
+  external: ['@angular/*'],
+  plugins: [{ name: 'rte-shared-runtime', setup(build) {
+    build.onResolve({ filter: /^\.\.\/integrations\/shared(?:\.js)?$/ }, () => ({ path: path.join(packageRoot, 'integrations/shared.js') }));
+  } }]
+});
+let declarations = await fs.readFile(path.join(stage, 'out/angular/component.d.ts'), 'utf8');
+const indexDeclarations = await fs.readFile(path.join(stage, 'out/angular/index.d.ts'), 'utf8');
+const ts = toolRequire('typescript');
+const indexAst = ts.createSourceFile('index.d.ts', indexDeclarations, ts.ScriptTarget.Latest, true);
+const componentExport = indexAst.statements.find(s => ts.isExportDeclaration(s) && s.moduleSpecifier?.text === './component');
+if (!componentExport) throw new Error('Missing generated component export');
+declarations += '\n' + indexDeclarations.slice(0, componentExport.getFullStart()) + indexDeclarations.slice(componentExport.getEnd());
+if (!declarations.includes('ɵɵComponentDeclaration') || !bundled.outputFiles[0].text.includes('ɵɵngDeclareComponent')) throw new Error('Partial-Ivy metadata is required');
+const sources = {};
+for (const file of ['angular/component.ts', 'angular/index.ts', 'integrations/shared.js', 'integrations/shared.d.ts', 'index.d.ts', 'scripts/build-angular.mjs']) sources[file] = sha256(await fs.readFile(path.join(packageRoot, file)));
+const outputs = { 'angular/index.mjs': bundled.outputFiles[0].text, 'angular/index.d.ts': declarations };
+async function writeIfChanged(file, data) {
+  try { if (await fs.readFile(file, 'utf8') === data) return; }
+  catch (error) { if (error.code !== 'ENOENT') throw error; }
+  await fs.writeFile(file, data);
+}
+// Save the existing public declarations before first replacing them with
+// compiler-generated metadata. This is a local migration backup, not payload.
+const backup = path.join(stage, 'previous-index.d.ts');
+await fs.mkdir(path.dirname(backup), { recursive: true });
+try { await fs.copyFile(path.join(packageRoot, 'angular/index.d.ts'), backup, (await import('node:fs')).constants.COPYFILE_EXCL); }
+catch (error) { if (error.code !== 'EEXIST') throw error; }
+for (const [file, data] of Object.entries(outputs)) await writeIfChanged(path.join(packageRoot, file), data);
+const manifest = { angularCompiler: compilerInfo.version, typescript: ts.version, esbuild: esbuild.version, sources,
+  outputs: Object.fromEntries(Object.entries(outputs).map(([file, data]) => [file, { bytes: Buffer.byteLength(data), sha256: sha256(data) }])) };
+await writeIfChanged(path.join(packageRoot, 'angular/build-manifest.json'), JSON.stringify(manifest, null, 2) + '\n');
+console.log('Built Angular partial-Ivy ESM + metadata declarations', JSON.stringify(manifest.outputs));

package/svelte/index.d.ts

@@ -4,7 +4,8 @@ import type { HeadlessController, HeadlessEditorOptions, HeadlessState } from ".
 export interface SvelteEditorOptions extends HeadlessEditorOptions {
   onReady?: (editor: HeadlessController) => void;
   onUpdate?: (state: HeadlessState) => void;
-  onChange?: (...args: any[]) => void;
+  /** Called with the controller as this; may flush final native input synchronously on unmount. */
+  onChange?: (this: HeadlessController, ...args: any[]) => void;
   onError?: (error: unknown) => void;
 }
 

package/svelte/index.js

@@ -11,8 +11,10 @@
  *     let state = {};
  *   </script>
  *
- *   <button on:mousedown|preventDefault={() => editor.run("bold")}
- *           class:is-active={state.bold}>B</button>
+ *   <button type="button" disabled={!editor} aria-pressed={!!state.bold}
+ *           on:pointerdown|preventDefault
+ *           on:click={() => editor && editor.run("bold")}
+ *           class:is-active={state.bold}>Bold</button>
  *
  *   <div use:richTextEditor={{
  *          value: "<p>Hello</p>",
@@ -21,34 +23,103 @@
  *        }}></div>
  */
 var headless = require("../headless");
+var initializationScope = require("../integrations/initialization-scope");
+var nativeMounts = require("../integrations/native-mount");
 
 function richTextEditor(node, options) {
     options = options || {};
     var controller = null;
     var current = options;
+    var disposed = false;
+    var pendingScope = null;
+    var lastKnownHtml = null;
+    var mountBoundary = null;
+    var nativeMount = null;
 
-    headless.createHeadlessEditor(node, options)
+    function releaseController(ctl) {
+        if (ctl) { try { ctl.destroy(); } catch (e) { /* Continue lifecycle cleanup. */ } }
+        nativeMounts.releaseNativeMount(ctl && ctl.editor, nativeMount);
+        nativeMount = null;
+        var boundary = mountBoundary;
+        mountBoundary = null;
+        if (boundary && boundary.parentNode) boundary.parentNode.removeChild(boundary);
+    }
+
+    // Route synchronous setup errors through onError too, and avoid creating
+    // an editor when an action is destroyed before the first microtask.
+    Promise.resolve().then(function () {
+        if (disposed) return null;
+        pendingScope = initializationScope.createInitializationScope(current.signal);
+        // Keep native form-control conversion unchanged for legacy callers.
+        if (/^(INPUT|TEXTAREA)$/i.test(node.tagName || "")) {
+            return headless.createHeadlessEditor(node, Object.assign({}, current, { signal: pendingScope.signal }));
+        }
+        // The action node belongs to Svelte. Plugins may reparent their own
+        // host, so contain all generated shells in a removable private subtree.
+        mountBoundary = node.ownerDocument.createElement("div");
+        var editorMount = node.ownerDocument.createElement("div");
+        mountBoundary.appendChild(editorMount);
+        node.appendChild(mountBoundary);
+            nativeMount = nativeMounts.captureNativeMount(editorMount);
+            return headless.createHeadlessEditor(editorMount, Object.assign({}, current, { signal: pendingScope.signal }));
+    })
         .then(function (ctl) {
+            if (pendingScope) pendingScope.complete();
+            if (!ctl) return;
+            if (disposed) { releaseController(ctl); return; }
             controller = ctl;
-            if (current.onUpdate) { ctl.on("update", current.onUpdate); }
-            if (current.onChange) { ctl.on("change", current.onChange); }
-            if (current.onReady) { current.onReady(ctl); }
+            if (current.value != null && current.value !== ctl.getHTML()) ctl.setHTML(current.value);
+            lastKnownHtml = ctl.getHTML();
+            // Stable relays read the latest options. Svelte can replace event
+            // callbacks without remounting the action or leaving stale closures.
+            ctl.on("update", function () {
+                if (!disposed && typeof current.onUpdate === "function") current.onUpdate.apply(ctl, arguments);
+            });
+            ctl.on("change", function () {
+                if (!disposed && typeof current.onChange === "function") {
+                    lastKnownHtml = ctl.getHTML();
+                    current.onChange.apply(ctl, arguments);
+                }
+            });
+            if (typeof current.onReady === "function") current.onReady(ctl);
         })
         .catch(function (error) {
-            if (current.onError) { current.onError(error); }
+            if (pendingScope) pendingScope.complete();
+            var ctl = controller;
+            controller = null;
+            releaseController(ctl);
+            if (!disposed && typeof current.onError === "function") current.onError(error);
         });
 
     return {
         update: function (next) {
+            if (disposed) return;
+            var previous = current;
             current = next || {};
             // keep content in sync if the bound value changes
-            if (controller && next && next.value != null && next.value !== controller.getHTML()) {
+            if (controller && next && next.value != null && next.value !== previous.value && next.value !== controller.getHTML()) {
                 controller.setHTML(next.value);
+                lastKnownHtml = controller.getHTML();
             }
         },
         destroy: function () {
-            if (controller) { controller.destroy(); }
+            if (disposed) return;
+            disposed = true;
+            if (pendingScope) pendingScope.dispose();
+            var ctl = controller;
             controller = null;
+            try {
+                // Core change is deferred; an action can unmount in the same
+                // turn as the last native input. Deliver that value once while
+                // the controller is still readable, before destroying it.
+                if (ctl && typeof current.onChange === "function") {
+                    var finalHtml = ctl.getHTML();
+                    if (finalHtml !== lastKnownHtml) {
+                        lastKnownHtml = finalHtml;
+                        current.onChange.call(ctl, ctl.editor);
+                    }
+                }
+            } finally { releaseController(ctl); }
         }
     };
 }

package/vue/index.js

@@ -1,6 +1,8 @@
 var vue = require("vue");
 var shared = require("../integrations/shared");
 var headless = require("../headless");
+var initializationScope = require("../integrations/initialization-scope");
+var nativeMounts = require("../integrations/native-mount");
 
 function editorMethodAccessor(editorRef, name, emptyValue) {
     return function () {
@@ -24,6 +26,7 @@ var RichTextEditorVue = vue.defineComponent({
             type: Boolean,
             default: true
         },
+        changeDelay: { type: Number, default: 120 },
         config: {
             type: Object,
             default: function () {
@@ -52,8 +55,47 @@ var RichTextEditorVue = vue.defineComponent({
         var hostRef = vue.ref(null);
         var editorRef = vue.ref(null);
         var changeHandler = null;
+        var blurHandler = null;
         var emitChange = null;
         var lastEmitted;
+        var disposed = false;
+        var writingValue = false;
+        var lastKnownHtml = null;
+        var nativeMount = null;
+
+        function emitCurrentValue() {
+            var editor = editorRef.value;
+            if (!editor) return;
+            var nextValue = shared.getEditorValue(editor, props.valueFormat);
+            var html = typeof nextValue === "string" ? nextValue : (typeof nextValue.html === "string" ? nextValue.html : editor.getHTMLCode());
+            if (html === lastKnownHtml) return;
+            lastKnownHtml = html;
+            lastEmitted = nextValue;
+            context.emit("update:modelValue", nextValue);
+            if (editorRef.value === editor) context.emit("change", nextValue, editor);
+        }
+
+        function releaseEditor() {
+            if (emitChange) emitChange.cancel();
+            emitChange = null;
+            var editor = editorRef.value;
+            var handler = changeHandler;
+            editorRef.value = null;
+            changeHandler = null;
+            if (editor && blurHandler && typeof editor.detachEvent === "function") {
+                try { editor.detachEvent("blur", blurHandler); } catch (e) { /* Continue cleanup. */ }
+            }
+            blurHandler = null;
+            if (editor && handler && typeof editor.detachEvent === "function") {
+                try { editor.detachEvent("change", handler); } catch (e) { /* Continue cleanup. */ }
+            }
+            if (editor && typeof editor.destroy === "function") {
+                try { editor.destroy(); } catch (e) { /* Continue cleanup. */ }
+            }
+            nativeMounts.releaseNativeMount(editor, nativeMount);
+            nativeMount = null;
+            if (hostRef.value) hostRef.value.innerHTML = "";
+        }
 
         function syncEditor(nextValue) {
             if (!editorRef.value) {
@@ -62,11 +104,15 @@ var RichTextEditorVue = vue.defineComponent({
 
             var nextHtml = shared.normalizeStructuredContent(nextValue);
             if (editorRef.value.getHTMLCode() !== nextHtml) {
-                shared.setEditorValue(editorRef.value, nextValue, props.valueFormat);
+                writingValue = true;
+                try { shared.setEditorValue(editorRef.value, nextValue, props.valueFormat); }
+                finally { writingValue = false; }
             }
+            if (editorRef.value) lastKnownHtml = editorRef.value.getHTMLCode();
         }
 
         vue.onMounted(async function () {
+            if (disposed) return;
             try {
                 if (props.autoload === false) {
                     shared.installStructuredContentBridge();
@@ -74,34 +120,54 @@ var RichTextEditorVue = vue.defineComponent({
                     await shared.loadRichTextEditorAssets({ basePath: props.assetBasePath });
                 }
 
-                if (!hostRef.value) {
+                if (disposed || !hostRef.value) {
                     return;
                 }
 
-                var editor = shared.createEditor(hostRef.value, props.config || {});
+                var editorMount = hostRef.value;
+                // Preserve legacy native form-control conversion. Block roots
+                // stay Vue-owned while plugins wrap only a disposable child.
+                if (!/^(INPUT|TEXTAREA)$/i.test(editorMount.tagName || "")) {
+                    editorMount = hostRef.value.ownerDocument.createElement("div");
+                    hostRef.value.appendChild(editorMount);
+                }
+                nativeMount = nativeMounts.captureNativeMount(editorMount);
+                var editor = shared.createEditor(editorMount, props.config || {});
+                if (disposed) {
+                    try { editor.destroy(); } catch (e) { /* Continue cleanup. */ }
+                    nativeMounts.releaseNativeMount(editor, nativeMount);
+                    nativeMount = null;
+                    return;
+                }
                 editorRef.value = editor;
 
                 var initialValue = props.modelValue !== undefined ? props.modelValue : props.defaultValue;
                 if (initialValue !== undefined) {
                     shared.setEditorValue(editor, initialValue, props.valueFormat);
                 }
+                if (disposed) return;
+                lastKnownHtml = editor.getHTMLCode();
 
                 // Coalesce: the editor fires `change` per keystroke and
                 // getEditorValue serialises the whole document (78 ms on a
                 // 3000-paragraph document). See shared.createChangeCoalescer.
-                emitChange = shared.createChangeCoalescer(function () {
-                    var nextValue = shared.getEditorValue(editor, props.valueFormat);
-                    lastEmitted = nextValue;
-                    context.emit("update:modelValue", nextValue);
-                    context.emit("change", nextValue, editor);
-                }, props.changeDelay == null ? 120 : props.changeDelay);
+                emitChange = shared.createChangeCoalescer(emitCurrentValue, props.changeDelay == null ? 120 : props.changeDelay);
 
-                changeHandler = function () { emitChange(); };
+                changeHandler = function () { if (!disposed && !writingValue && emitChange) emitChange(); };
 
                 editor.attachEvent("change", changeHandler);
+                blurHandler = function () {
+                    if (disposed || writingValue) return;
+                    if (emitChange) emitChange.flush();
+                    emitCurrentValue();
+                };
+                editor.attachEvent("blur", blurHandler);
                 context.emit("ready", editor);
             } catch (error) {
-                context.emit("error", error);
+                if (!disposed) {
+                    releaseEditor();
+                    context.emit("error", error);
+                }
             }
         });
 
@@ -126,23 +192,14 @@ var RichTextEditorVue = vue.defineComponent({
         });
 
         vue.onBeforeUnmount(function () {
-            var ed = editorRef.value;
-            if (ed) {
-                // Flush first, or the last keystroke before teardown is lost.
-                if (emitChange) { emitChange.flush(); }
-                if (changeHandler && typeof ed.detachEvent === "function") {
-                    ed.detachEvent("change", changeHandler);
-                }
-                if (typeof ed.destroy === "function") {
-                    try { ed.destroy(); } catch (e) { /* ignore */ }
-                }
-            }
-
-            if (hostRef.value) {
-                hostRef.value.innerHTML = "";
-            }
-
-            editorRef.value = null;
+            if (disposed) return;
+            disposed = true;
+            try {
+                if (emitChange) emitChange.flush();
+                // Core itself can defer change; preserve native input even if
+                // no wrapper timer was scheduled before the view unmounted.
+                if (changeHandler) emitCurrentValue();
+            } finally { releaseEditor(); }
         });
 
         function pluginAccessor(name) {
@@ -252,25 +309,64 @@ function useRichTextEditor(options) {
     var editor = vue.shallowRef(null);
     var state = vue.ref({});
     var controller = null;
+    var disposed = false;
+    var pendingScope = null;
+    var activeHost = null;
+    var nativeMount = null;
+
+    function releaseController() {
+        var owned = controller;
+        controller = null;
+        if (editor.value === owned) editor.value = null;
+        if (owned) { try { owned.destroy(); } catch (e) { /* Continue cleanup. */ } }
+        nativeMounts.releaseNativeMount(owned && owned.editor, nativeMount);
+        nativeMount = null;
+        if (activeHost && !editor.value) activeHost.innerHTML = "";
+    }
 
     vue.onMounted(function () {
-        headless.createHeadlessEditor(mountRef.value, options)
+        activeHost = mountRef.value;
+        Promise.resolve().then(function () {
+            if (disposed) return null;
+            if (!activeHost) throw new Error("useRichTextEditor: render mountRef before initialization.");
+            pendingScope = initializationScope.createInitializationScope(options.signal);
+            var editorMount = activeHost;
+            if (!/^(INPUT|TEXTAREA)$/i.test(editorMount.tagName || "")) {
+                editorMount = activeHost.ownerDocument.createElement("div");
+                activeHost.appendChild(editorMount);
+            }
+            nativeMount = nativeMounts.captureNativeMount(editorMount);
+            return headless.createHeadlessEditor(editorMount, Object.assign({}, options, { signal: pendingScope.signal }));
+        })
             .then(function (ctl) {
+                if (pendingScope) pendingScope.complete();
+                if (!ctl) return;
+                if (disposed) { try { ctl.destroy(); } finally { nativeMounts.releaseNativeMount(ctl.editor, nativeMount); nativeMount = null; } return; }
                 controller = ctl;
                 editor.value = ctl;
+                if (options.value != null && options.value !== ctl.getHTML()) ctl.setHTML(options.value);
                 state.value = ctl.state();
-                ctl.on("update", function (snapshot) { state.value = snapshot; });
+                ctl.on("update", function (snapshot) { if (!disposed) state.value = snapshot; });
                 if (options.onReady) { options.onReady(ctl); }
             })
             .catch(function (error) {
-                if (options.onError) { options.onError(error); }
+                if (pendingScope) pendingScope.complete();
+                if (!disposed) {
+                    releaseController();
+                    if (options.onError) options.onError(error);
+                }
             });
     });
 
     vue.onBeforeUnmount(function () {
-        if (controller) { controller.destroy(); }
-        controller = null;
-        editor.value = null;
+        if (disposed) return;
+        disposed = true;
+        if (pendingScope) pendingScope.dispose();
+        releaseController();
+    });
+
+    vue.watch(function () { return options.value; }, function (value) {
+        if (!disposed && controller && value != null && value !== controller.getHTML()) controller.setHTML(value);
     });
 
     return { mountRef: mountRef, editor: editor, state: state };