<section class="section docs-section" id="editable-string">
	<h2 class="section-title">Editable String</h2>
	<p class="docs-section-description">
		Editable String превращает обычный контейнер с текстом в inline-редактор.
		Компонент возвращает DOM-элемент с API `editableString`.
	</p>

	<div class="block">
		<div class="editable-example fs-lg">Hello world</div>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Editable String HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="editable-example"&gt;Hello world&lt;/div&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Editable String JS</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-javascript">const editor = editableString(document.querySelector(".editable-example"));

editor.editableString.onChange(component =&gt; {
  console.log(component.value);
});</code></pre>
	</div>
</section>

<script>
	document.addEventListener("DOMContentLoaded", e => {
		setTimeout(() => {
			const edstr = editableString(document.querySelector(".editable-example"));
			edstr.editableString.onSwitch(component => {
				console.log("SWITCH", component);
			});

			edstr.editableString.onChange(component => {
				console.log("onChange", component.value);
			});
		}, 100);
	});
</script>