Added Frontend

frontend/components/Editor.client.vue

@@ -0,0 +1,141 @@
+<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>