<script setup>
const editor = useEditor({
  content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
  extensions: [TiptapStarterKit],
});
</script>

<template>


  <div>
    <InputGroup>
      <UButtonGroup>
        <UButton
            @click="editor.chain().focus().undo().run()"
            :disabled="!editor.can().chain().focus().undo().run()"
            icon="i-mdi-undo"
            class="px-3"
        />
        <UButton
            @click="editor.chain().focus().redo().run()"
            :disabled="!editor.can().chain().focus().redo().run()"
            icon="i-mdi-redo"
            class="px-3"
        />
      </UButtonGroup>

      <UButtonGroup v-if="editor">


        <UButton
            @click="editor.chain().focus().toggleBold().run()"
            :disabled="!editor.can().chain().focus().toggleBold().run()"
            :variant="editor.isActive('bold') ? 'solid' : 'outline'"
        >
          B
        </UButton>
        <UButton
            @click="editor.chain().focus().toggleItalic().run()"
            :disabled="!editor.can().chain().focus().toggleItalic().run()"
            :variant="editor.isActive('italic') ? 'solid' : 'outline'"
        >
          <span class="italic">I</span>
        </UButton>
        <UButton
            @click="editor.chain().focus().toggleStrike().run()"
            :disabled="!editor.can().chain().focus().toggleStrike().run()"
            :variant="editor.isActive('strike') ? 'solid' : 'outline'"
        >
          <span class="line-through">D</span>
        </UButton>
      </UButtonGroup>
      <UButtonGroup>
<!--        <UButton
            @click="editor.chain().focus().toggleCode().run()"
            :disabled="!editor.can().chain().focus().toggleCode().run()"
            :class="{ 'is-active': editor.isActive('code') }"
        >
          code
        </UButton>
        <UButton @click="editor.chain().focus().unsetAllMarks().run()">
          clear marks
        </UButton>
        <UButton @click="editor.chain().focus().clearNodes().run()">
          clear nodes
        </UButton>
        <UButton
            @click="editor.chain().focus().setParagraph().run()"
            :class="{ 'is-active': editor.isActive('paragraph') }"
        >
          <span>P</span>
        </UButton>-->
        <UButton
            @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
            :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
            icon="i-mdi-format-header-1"
        />
        <UButton
            @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
            :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
            icon="i-mdi-format-header-2"
        />
        <UButton
            @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
            :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
            icon="i-mdi-format-header-3"
        />
        <UButton
            @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
            :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
            icon="i-mdi-format-header-4"
        />
        <UButton
            @click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
            :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
            icon="i-mdi-format-header-5"
        />
        <UButton
            @click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
            :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
            icon="i-mdi-format-header-6"
        />
        <UButton
            @click="editor.chain().focus().toggleBulletList().run()"
            :class="{ 'is-active': editor.isActive('bulletList') }"
            icon="i-mdi-format-list-bulleted"
        />
        <UButton
            @click="editor.chain().focus().toggleOrderedList().run()"
            :class="{ 'is-active': editor.isActive('orderedList') }"
            icon="i-mdi-format-list-numbered"
        />
<!--        <UButton
            @click="editor.chain().focus().toggleCodeBlock().run()"
            :class="{ 'is-active': editor.isActive('codeBlock') }"
        >
          code block
        </UButton>
        <UButton
            @click="editor.chain().focus().toggleBlockquote().run()"
            :class="{ 'is-active': editor.isActive('blockquote') }"
        >
          blockquote
        </UButton>
        <UButton @click="editor.chain().focus().setHorizontalRule().run()">
          horizontal rule
        </UButton>
        <UButton @click="editor.chain().focus().setHardBreak().run()">
          hard break
        </UButton>-->

      </UButtonGroup>
    </InputGroup>

    <TiptapEditorContent class="mt-5" :editor="editor" />
  </div>
</template>

<style scoped>

</style>