FEDEO/frontend/components/Tiptap.vue

<template>
  <div class="p-3 editor">
    <div v-if="editor">
      <InputGroup class="mb-3">
        <UButton
            @click="editor.chain().focus().toggleBold().run()"
            :disabled="!editor.can().chain().focus().toggleBold().run()"
            :class="{ 'is-active': editor.isActive('bold') }"
            icon="i-heroicons-bold"
            variant="outline"
        />
        <UButton
            @click="editor.chain().focus().toggleItalic().run()"
            :disabled="!editor.can().chain().focus().toggleItalic().run()"
            :class="{ 'is-active': editor.isActive('italic') }"
            icon="i-heroicons-italic"
            variant="outline"
        />
        <UButton
            @click="editor.chain().focus().toggleStrike().run()"
            :disabled="!editor.can().chain().focus().toggleStrike().run()"
            :class="{ 'is-active': editor.isActive('strike') }"
            icon="i-mdi-format-strikethrough"
            variant="outline"
        />
        <!--<UButton
            @click="editor.chain().focus().toggleCode().run()"
            :disabled="!editor.can().chain().focus().toggleCode().run()"
            :class="{ 'is-active': editor.isActive('code') }"
            icon="i-heroicons-code-bracket"
            variant="outline"
        />
              <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') }"
            variant="outline"
        >
          paragraph
        </UButton>-->
        <UButton
            @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
            :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
            variant="outline"
        >h1</UButton>
        <UButton
            @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
            :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
            variant="outline"
        >h2</UButton>
        <UButton
            @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
            :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
            variant="outline"
        >
          h3
        </UButton>
        <UButton
            @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
            :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
            variant="outline"
        >
          h4
        </UButton>
        <UButton
            @click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
            :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
            variant="outline"
        >
          h5
        </UButton>
        <UButton
            @click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
            :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
            variant="outline"
        >
          h6
        </UButton>
        <UButton
            @click="editor.chain().focus().toggleBulletList().run()"
            :class="{ 'is-active': editor.isActive('bulletList') }"
            icon="i-heroicons-list-bullet"
            variant="outline"
        />
        <UButton
            @click="editor.chain().focus().toggleOrderedList().run()"
            :class="{ 'is-active': editor.isActive('orderedList') }"
            icon="i-mdi-format-list-numbered"
            variant="outline"
        />
        <!--      <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>
              <UButton
                  @click="editor.chain().focus().undo().run()"
                  :disabled="!editor.can().chain().focus().undo().run()"
              >
                undo
              </UButton>
              <UButton
                  @click="editor.chain().focus().redo().run()"
                  :disabled="!editor.can().chain().focus().redo().run()"
              >
                redo
              </UButton>-->
      </InputGroup>

    </div>

    <TiptapEditorContent :editor="editor" />

  </div>
</template>

<script setup>
const emit = defineEmits(['updateContent'])

const props = defineProps({
  preloadedContent: {
    type: String,
    required:false
  }
})

const {preloadedContent} = props

const editor = useEditor({
  content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
  extensions: [TiptapStarterKit],
  onUpdate({editor}) {
    //console.log(editor.getJSON())
    //console.log(editor.getHTML())
    //console.log(editor.getText())
    emit('updateContent',{json: editor.getJSON(),html: editor.getHTML(), text: editor.getText()})
  },
  onCreate({editor}) {
    editor.commands.setContent(preloadedContent)
    emit('updateContent',{json: editor.getJSON(),html: editor.getHTML(), text: editor.getText()})
  }
});

onBeforeUnmount(() => {
  unref(editor).destroy();
});
</script>

<style scoped>
.editor {
  border: 1px solid #69c350;
  border-radius: 10px;
}
</style>