<script setup>
// Thin WYSIWYG wrapper around Nuxt UI's <UEditor> (TipTap v3, shipped inside
// @nuxt/ui — no extra dependency). Stores/edits HTML and exposes a simple
// v-model (HTML string) + `blur` event so callers can persist on blur, the same
// way the rest of the app's autonomous editors do.
//
// Image/mention extensions are disabled: this is a plain notes editor, so we
// don't want paste-image handling or an "@" mention menu. StarterKit v3 already
// provides bold/italic/underline/strike/headings/lists/undo-redo.
const model = defineModel({ type: String, default: '' })
const props = defineProps({
  readonly: { type: Boolean, default: false },
  placeholder: { type: String, default: '' }
})
const emit = defineEmits(['blur'])

// Toolbar buttons (mdi is the only installed icon set). Each item references a
// built-in editor handler via `kind` (see @nuxt/ui editor handlers).
const toolbarItems = [
  { kind: 'mark', mark: 'bold',      icon: 'i-mdi-format-bold',                 'aria-label': 'Fett',              tooltip: { text: 'Fett' } },
  { kind: 'mark', mark: 'italic',    icon: 'i-mdi-format-italic',               'aria-label': 'Kursiv',            tooltip: { text: 'Kursiv' } },
  { kind: 'mark', mark: 'underline', icon: 'i-mdi-format-underline',            'aria-label': 'Unterstrichen',     tooltip: { text: 'Unterstrichen' } },
  { kind: 'mark', mark: 'strike',    icon: 'i-mdi-format-strikethrough-variant','aria-label': 'Durchgestrichen',   tooltip: { text: 'Durchgestrichen' } },
  { kind: 'heading', level: 2,       icon: 'i-mdi-format-header-2',             'aria-label': 'Überschrift',       tooltip: { text: 'Überschrift' } },
  { kind: 'bulletList',              icon: 'i-mdi-format-list-bulleted',        'aria-label': 'Aufzählung',        tooltip: { text: 'Aufzählung' } },
  { kind: 'orderedList',             icon: 'i-mdi-format-list-numbered',        'aria-label': 'Nummerierte Liste', tooltip: { text: 'Nummerierte Liste' } },
  { kind: 'undo',                    icon: 'i-mdi-undo',                        'aria-label': 'Rückgängig',        tooltip: { text: 'Rückgängig' } },
  { kind: 'redo',                    icon: 'i-mdi-redo',                        'aria-label': 'Wiederholen',       tooltip: { text: 'Wiederholen' } }
]

const onBlur = () => emit('blur')
</script>

<template>
  <ClientOnly>
    <UEditor
      v-model="model"
      content-type="html"
      :editable="!readonly"
      :image="false"
      :mention="false"
      :placeholder="placeholder"
      class="rte"
      :class="{ 'rte--readonly': readonly }"
      :on-blur="onBlur"
    >
      <template #default="{ editor }">
        <UEditorToolbar
          v-if="!readonly"
          :editor="editor"
          :items="toolbarItems"
          size="xs"
          class="rte__toolbar"
        />
      </template>
    </UEditor>
    <template #fallback>
      <div class="rte rte--fallback" v-html="model || ''"></div>
    </template>
  </ClientOnly>
</template>

<style scoped>
.rte {
  border: 1px solid #dbdbdb;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.rte--readonly { background: #f8f9fa; }
.rte--fallback {
  min-height: 4.5rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.95rem;
}
.rte__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid #ededed;
  background: #fafafa;
}
.rte :deep([data-slot="content"]) { padding: 0.5rem 0.7rem; max-width: none; }
/* Nuxt UI's editor applies `prose`, which caps width (~65ch) and uses a large
   line-height + paragraph margins. Override so the text fills the editor width
   and the lines sit tighter together. */
.rte :deep(.ProseMirror) {
  min-height: 4.5rem;
  width: 100%;
  max-width: none !important;
  outline: none;
  font-size: 0.95rem;
  line-height: 1.35 !important;
}
.rte :deep(.ProseMirror:focus) { outline: none; }
.rte :deep(.ProseMirror p) { margin: 0 0 0.2rem !important; }
.rte :deep(.ProseMirror > :first-child) { margin-top: 0 !important; }
.rte :deep(.ProseMirror > :last-child) { margin-bottom: 0 !important; }
.rte :deep(.ProseMirror ul) { list-style: disc; padding-left: 1.4rem; margin: 0.2rem 0 !important; }
.rte :deep(.ProseMirror ol) { list-style: decimal; padding-left: 1.5rem; margin: 0.2rem 0 !important; }
.rte :deep(.ProseMirror li) { margin: 0 !important; }
.rte :deep(.ProseMirror li > p) { margin: 0 !important; }
.rte :deep(.ProseMirror h2) { font-size: 1.1rem; font-weight: 700; margin: 0.3rem 0 0.1rem !important; line-height: 1.25 !important; }
.rte :deep(.ProseMirror p.is-editor-empty:first-child::before) {
  content: attr(data-placeholder);
  color: #9aa0a6;
  float: left;
  height: 0;
  pointer-events: none;
}
</style>
