Alpine.js x-bound: Contenteditable bindings

by rameel

HTML

<div x-data="{ html: 'Some words are &lt;i>italic&lt;/i>, some are &lt;b>bold&lt;/b>' }">
  <h3>InnerHtml:</h3>
  <div &innerHtml="html" contenteditable="true"></div>

  <h3>InnerText:</h3>
  <div &innerText="html" contenteditable="true"></div>

  <h3>TextContent:</h3>
  <div &textContent="html" contenteditable="true"></div>

  <h3>Raw:</h3>
  <pre x-format>{{ html }}</pre>
</div>

<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-bound@1/alpinegear-bound.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-format@1/alpinegear-format.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>

CSS

[contenteditable] {
  width: 100%;
  min-height: 100px;
  border: 1px solid gray;
  padding: 6px;
}

pre {
  padding: 6px;
  background: #f0f0f0;
}