bind_content_editable() — svelte Function Reference

Architecture documentation for the bind_content_editable() function in universal.js from the svelte codebase.

Function javascript ClientRuntime Hydration calls 1

Entity Profile

ClientRuntime→ Hydration→ bind_content_editable() — svelte Function Reference

Dependency Diagram

graph TD
  e271fda1_4ebd_2418_5e01_fbf6aa3cdcc0["bind_content_editable()"]
  c3b70c5c_4392_04e8_77c1_3cef97110727["universal.js"]
  e271fda1_4ebd_2418_5e01_fbf6aa3cdcc0 -->|defined in| c3b70c5c_4392_04e8_77c1_3cef97110727
  7494b934_a3b8_689e_91b6_8435e26461c5["render_effect()"]
  e271fda1_4ebd_2418_5e01_fbf6aa3cdcc0 -->|calls| 7494b934_a3b8_689e_91b6_8435e26461c5
  style e271fda1_4ebd_2418_5e01_fbf6aa3cdcc0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/elements/bindings/universal.js lines 11–31

export function bind_content_editable(property, element, get, set = get) {
	element.addEventListener('input', () => {
		// @ts-ignore
		set(element[property]);
	});

	render_effect(() => {
		var value = get();

		if (element[property] !== value) {
			if (value == null) {
				// @ts-ignore
				var non_null_value = element[property];
				set(non_null_value);
			} else {
				// @ts-ignore
				element[property] = value + '';
			}
		}
	});
}