Markdown Editor

<zn-markdown-editor
  label="Content"
  name="content"
  help-text="Supports GitHub-flavored markdown"
  value="# Hello

Write some **markdown** on the left — use the toolbar to switch to split or preview."
></zn-markdown-editor>

<zn-markdown-editor
  label="Article"
  name="article"
  value="## Release notes

- New payments dashboard
- Faster settlement reporting"
></zn-markdown-editor>

<zn-markdown-editor name="content" label="Terms">
# Terms of Service

This copy was rendered from a server-side template and picked up automatically.
</zn-markdown-editor>

<zn-markdown-editor
  name="content"
  label="Split by default"
  view-mode="split"
  value="## Split view

See both at once."
></zn-markdown-editor>

<br />

<zn-markdown-editor
  name="content"
  label="Preview by default"
  view-mode="preview"
  value="## Preview view

Toggle to the editor to edit."
></zn-markdown-editor>

<zn-markdown-editor
  name="email_template"
  label="Email template"
  storage-key="email-template-view"
></zn-markdown-editor>

<zn-markdown-editor
  label="Release notes"
  name="notes"
  help-text="Use headings, lists, and code fences for emphasis."
></zn-markdown-editor>

<br />

<zn-markdown-editor label="Release notes" name="notes">
  <div slot="help-text">
    See the <a href="https://commonmark.org/help/">CommonMark cheatsheet</a>
    for a full syntax reference.
  </div>
</zn-markdown-editor>

<zn-markdown-editor label="Short editor" rows="6"></zn-markdown-editor>

<zn-markdown-editor label="Required" name="content" required></zn-markdown-editor>

<br />

<zn-markdown-editor
  label="Readonly"
  name="content"
  readonly
  value="## Read-only content

Visible but not editable."
></zn-markdown-editor>

<br />

<zn-markdown-editor
  label="Disabled"
  name="content"
  disabled
  value="Disabled editor."
></zn-markdown-editor>

<form class="markdown-editor-form">
  <zn-markdown-editor
    name="content"
    label="Document"
    required
    value="## Getting started

Write your content here."
  ></zn-markdown-editor>
  <br />
  <zn-button type="submit" color="success">Submit</zn-button>
  <zn-button type="reset" color="secondary">Reset</zn-button>
</form>

<script type="module">
  const form = document.querySelector('.markdown-editor-form');

  await customElements.whenDefined('zn-button');
  await customElements.whenDefined('zn-markdown-editor');

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(form));
    alert('Submitted!\n\n' + JSON.stringify(data, null, 2));
  });
</script>

<zn-markdown-editor
  id="event-editor"
  name="content"
  label="Event demo"
  value="Type here..."
></zn-markdown-editor>

<div id="event-log" style="margin-top: 1rem; padding: 1rem; background: var(--zn-color-neutral-100); border-radius: 4px; font-family: monospace; font-size: 0.875rem; max-height: 200px; overflow-y: auto;">
  Events will appear here...
</div>

<script type="module">
  const editor = document.getElementById('event-editor');
  const log = document.getElementById('event-log');

  await customElements.whenDefined('zn-markdown-editor');

  function push(name, detail = '') {
    const t = new Date().toLocaleTimeString();
    log.innerHTML = `[${t}] ${name}${detail ? ': ' + detail : ''}<br>` + log.innerHTML;
  }

  editor.addEventListener('zn-input', () => push('zn-input', `length=${editor.value.length}`));
  editor.addEventListener('zn-change', () => push('zn-change'));
  editor.addEventListener('zn-view-mode-change', (e) => push('zn-view-mode-change', e.detail.mode));
</script>

<zn-markdown-editor
  id="control-editor"
  name="content"
  label="Controlled editor"
  value="## Controlled"
></zn-markdown-editor>
<br />
<zn-button id="editor-focus">Focus</zn-button>
<zn-button id="editor-blur">Blur</zn-button>
<zn-button id="editor-split">Switch to split</zn-button>
<zn-button id="editor-preview">Switch to preview</zn-button>
<zn-button id="editor-clear" color="error">Clear</zn-button>

<script type="module">
  const editor = document.getElementById('control-editor');

  await customElements.whenDefined('zn-button');
  await customElements.whenDefined('zn-markdown-editor');

  document.getElementById('editor-focus').addEventListener('click', () => editor.focus());
  document.getElementById('editor-blur').addEventListener('click', () => editor.blur());
  document.getElementById('editor-split').addEventListener('click', () => { editor.viewMode = 'split'; });
  document.getElementById('editor-preview').addEventListener('click', () => { editor.viewMode = 'preview'; });
  document.getElementById('editor-clear').addEventListener('click', () => { editor.value = ''; });
</script>