component WysiwygEditor {
  outputs {
    input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
    change(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
    focus(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
    blur(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
  }

  props {
    size: string = "default"
    color: string = "primary"
    title: string = "Wysiwyg Editor"
    description: string = ""
    items: unknown[] = []
    variant: string = "default"
    value: string = ""
    readonly: boolean = false
    placeholder: string = "Write something…"
    class: string = ""
  }
  functions {
    client function format(command, sourceEvent, root, editor) {
      sourceEvent.preventDefault()
      root = sourceEvent.currentTarget.closest(".wrn-editor")
      editor = root.querySelector("[contenteditable]")
      editor.focus()
      document.execCommand(command, false, null)
      output.input({ value: editor.innerHTML, text: editor.textContent })
      output.change({ value: editor.innerHTML, text: editor.textContent })
    }
    client function edit(sourceEvent) { output.input({ value: sourceEvent.currentTarget.innerHTML, text: sourceEvent.currentTarget.textContent }) }
    client function finish(sourceEvent) { output.change({ value: sourceEvent.currentTarget.innerHTML, text: sourceEvent.currentTarget.textContent }); output.blur({ sourceEvent: sourceEvent }) }
  }
  view {
    <section {...attrs} class="wrn-editor {class}" data-wrn-owner="WysiwygEditor" data-wrn-part="root" data-wrn-component="WysiwygEditor" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
      {#if title}<strong>{title}</strong>{/if}{#if description}<p>{description}</p>{/if}
      <div class="wrn-editor__surface" data-wrn-owner="WysiwygEditor" data-wrn-part="surface" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
        <div role="toolbar" aria-label="Text formatting" class="wrn-editor__toolbar" data-wrn-owner="WysiwygEditor" data-wrn-part="toolbar" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">
          <button type="button" disabled="{readonly}" aria-label="Bold" @mousedown="event.preventDefault()" @click="format('bold', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><strong>B</strong></button>
          <button type="button" disabled="{readonly}" aria-label="Italic" @mousedown="event.preventDefault()" @click="format('italic', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><em>I</em></button>
          <button type="button" disabled="{readonly}" aria-label="Underline" @mousedown="event.preventDefault()" @click="format('underline', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><u>U</u></button>
          <button type="button" disabled="{readonly}" aria-label="Bulleted list" @mousedown="event.preventDefault()" @click="format('insertUnorderedList', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span class="icon-[lucide--list]" aria-hidden="true"></span></button>
          <button type="button" disabled="{readonly}" aria-label="Undo" @mousedown="event.preventDefault()" @click="format('undo', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}"><span class="icon-[lucide--undo-2]" aria-hidden="true"></span></button>
<button type="button" disabled="{readonly}" aria-label="Strike through" @mousedown="event.preventDefault()" @click="format('strikeThrough', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">S̶</button><button type="button" disabled="{readonly}" aria-label="Numbered list" @mousedown="event.preventDefault()" @click="format('insertOrderedList', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">1.</button><button type="button" disabled="{readonly}" aria-label="Align left" @mousedown="event.preventDefault()" @click="format('justifyLeft', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">⇤</button><button type="button" disabled="{readonly}" aria-label="Align center" @mousedown="event.preventDefault()" @click="format('justifyCenter', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">↔</button><button type="button" disabled="{readonly}" aria-label="Align right" @mousedown="event.preventDefault()" @click="format('justifyRight', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">⇥</button><button type="button" disabled="{readonly}" aria-label="Indent" @mousedown="event.preventDefault()" @click="format('indent', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">→</button><button type="button" disabled="{readonly}" aria-label="Outdent" @mousedown="event.preventDefault()" @click="format('outdent', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">←</button><button type="button" disabled="{readonly}" aria-label="Remove formatting" @mousedown="event.preventDefault()" @click="format('removeFormat', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">Tx</button><button type="button" disabled="{readonly}" aria-label="Redo" @mousedown="event.preventDefault()" @click="format('redo', event)" data-wrn-owner="WysiwygEditor" data-wrn-part="button" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">↻</button>        </div>
        <div contenteditable="{readonly ? 'false' : 'true'}" role="textbox" aria-label="{title || 'Rich text editor'}" aria-multiline="true" aria-readonly="{readonly}" data-placeholder="{placeholder}" class="wrn-editor__content" @input="edit(event)" @blur="finish(event)" @focus="output.focus({ sourceEvent: event })" data-wrn-owner="WysiwygEditor" data-wrn-part="content" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}">{value}</div>
      </div><slot />
    </section>
  }
  style {
    .wrn-editor { display:grid; gap:.65rem; color:var(--wrn-color-text); }
    .wrn-editor > p { margin:0; color:var(--wrn-color-muted); font-size:.875rem; }
    .wrn-editor__surface { border:1px solid var(--wrn-color-border); border-radius:var(--wrn-radius-md); overflow:hidden; background:var(--wrn-color-surface); }
    .wrn-editor__toolbar { display:flex; flex-wrap:wrap; gap:.25rem; padding:.4rem; border-bottom:1px solid var(--wrn-color-border); }
    .wrn-editor button { display:grid; place-items:center; width:2rem; height:2rem; border:0; border-radius:4px; background:transparent; color:inherit; cursor:pointer; }
    .wrn-editor button:hover { background:var(--wrn-color-surface-2); }
    .wrn-editor button span { width:1rem; height:1rem; }
    .wrn-editor__content { min-height:10rem; padding:1rem; outline-offset:-2px; font-size:.875rem; line-height:1.65; }
    .wrn-editor__content:empty::before { content:attr(data-placeholder); color:var(--wrn-color-muted); pointer-events:none; }
  }
}