<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="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></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="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></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>