Prose Editor

Prose Editor is a web component wrapping TipTap 2.

Demo

Demo ↗

Installation

❯ yarn add @zedix/prose-editor-element

Usage

This above global stylesheet is needed because ProseEditor must be in the light DOM (instead of the shadow tree) until these bugs are resolved:

• Firefox #1496769
• WebKit #163921

@import '@zedix/prose-editor/dist/prose-editor.css';

<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
<script type="module" src="/dist/prose-editor.js"></script>

<zx-prose-editor
  editor-class="prose min-h-[20rem] focus:outline-none"
  placeholder="Note…"
  initial-html="<p>Hello Editor</p>"
  toolbar-placement="bottom"
></zx-prose-editor>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    document
      .querySelector('zx-prose-editor')
      .addEventListener('change', function (event) {
        console.log('HTML', event.detail.html);
        console.log('JSON', event.detail.json);
      });
  });
</script>