Merge 6c807a50cc into 44a7813730

.changeset/eager-flowers-stay.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: force the first run innerText/innerHTML/textContent written for content_editable_bind

packages/svelte/src/internal/client/dom/elements/bindings/universal.js

@@ -1,4 +1,5 @@
 import { render_effect, teardown } from '../../../reactivity/effects.js';
+import { hydrating } from '../../hydration.js';
 import { listen } from './shared.js';
 
 /**
@@ -14,10 +15,12 @@ export function bind_content_editable(property, element, get, set = get) {
 		set(element[property]);
 	});
 
+	var first_run = true;
 	render_effect(() => {
 		var value = get();
 
-		if (element[property] !== value) {
+		if (element[property] !== value || (first_run && !hydrating)) {
+			first_run = false;
 			if (value == null) {
 				// @ts-ignore
 				var non_null_value = element[property];

packages/svelte/tests/runtime-runes/samples/svelte-element-contenteditable-1/_config.js

@@ -0,0 +1,20 @@
+import { flushSync } from '../../../../src/index-client';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const h1 = /** @type {HTMLDivElement} */ (target.querySelector('h1'));
+
+		assert.equal(h1.textContent, 'h');
+		// don't use h1.textContent because h1.textContent will overwrite all childNodes
+		// The childNode created by {myTextBlock.current} is the reason for duplication
+		const textNode =
+			[...h1.childNodes].findLast((n) => n.nodeType === Node.TEXT_NODE) ??
+			h1.appendChild(document.createTextNode(''));
+		textNode.nodeValue = 'he';
+		h1.dispatchEvent(new window.Event('input'));
+		flushSync();
+
+		assert.equal(h1.textContent, 'he');
+	}
+});

packages/svelte/tests/runtime-runes/samples/svelte-element-contenteditable-1/main.svelte

@@ -0,0 +1,12 @@
+<script>
+	const myTextBlock = $state({
+		current: 'h'
+	})
+
+	const renderTag = $state("h1")
+
+</script>
+
+<svelte:element this={renderTag} contenteditable="plaintext-only" class="test" bind:textContent={myTextBlock.current}>
+    {myTextBlock.current}
+</svelte:element>

packages/svelte/tests/runtime-runes/samples/svelte-element-contenteditable/_config.js

@@ -0,0 +1,19 @@
+import { flushSync } from '../../../../src/index-client';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const h1 = /** @type {HTMLDivElement} */ (target.querySelector('h1'));
+		assert.equal(h1.textContent, '');
+		// don't use h1.textContent because h1.textContent will overwrite all childNodes
+		// The childNode created by {myTextBlock.current} is the reason for duplication
+		const textNode =
+			[...h1.childNodes].findLast((n) => n.nodeType === Node.TEXT_NODE) ??
+			h1.appendChild(document.createTextNode(''));
+		textNode.nodeValue = 'h';
+		h1.dispatchEvent(new window.Event('input'));
+		flushSync();
+
+		assert.equal(h1.textContent, 'h');
+	}
+});

packages/svelte/tests/runtime-runes/samples/svelte-element-contenteditable/main.svelte

@@ -0,0 +1,12 @@
+<script>
+	const myTextBlock = $state({
+		current: ''
+	})
+
+	const renderTag = $state("h1")
+
+</script>
+
+<svelte:element this={renderTag} contenteditable="plaintext-only" class="test" bind:textContent={myTextBlock.current}>
+    {myTextBlock.current}
+</svelte:element>