style: improve editor menu

src/components/CardEditor.vue

@@ -1,14 +1,12 @@
 <template>
   <div>
-    <CardEditorMenu :editor="editor" />
+    <CardEditorMenu :editor="editor" :class="classes" />
     <EditorContent :editor="editor"></EditorContent>
   </div>
-  <div v-if="editor">
-    {{ editor.getJSON() }}
-  </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue";
 import { useEditor, EditorContent } from "@tiptap/vue-3";
 import lowlight from "lowlight";
 // nodes
@@ -29,8 +27,15 @@ import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 
 import CardEditorMenu from "@components/CardEditorMenu.vue";
 
+const classes = ref("hidden");
 const editor = useEditor({
-  content: "Some text from tiptap",
+  onFocus() {
+    classes.value = "block";
+  },
+  onBlur() {
+    // The editor isn’t focused anymore.
+    classes.value = "hidden";
+  },
   extensions: [
     // nodes
     Document,
@@ -72,8 +77,7 @@ const editor = useEditor({
   ],
   editorProps: {
     attributes: {
-      class:
-        "p-2 border border-teal-500 rounded focus:outline-none h-64 overflow-auto",
+      class: "p-2 border focus:outline-none h-64 overflow-auto",
       spellcheck: "false",
     },
   },

src/components/CardEditorMenu.vue

@@ -1,20 +1,25 @@
 <template>
-  <div v-if="editor" class="space-x-0.5 flex p-2">
+  <div v-if="editor" class="flex bg-gray-50 border border-gray-300">
     <CardEditorMenuButton
       v-for="(tButton, index) in markerButtons"
       :key="index"
-      :is-active="tButton.isActive()"
-      @click="tButton.onClick()"
-    >
-      {{ tButton.content }}
-    </CardEditorMenuButton>
+      :is-active="tButton.isActive"
+      :icon="tButton.icon"
+      :on-click="tButton.onClick"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, PropType } from "vue";
 import { Editor } from "@tiptap/vue-3";
 
+import BoldIcon from "@assets/icons/BoldIcon.vue";
+import ItalicIcon from "@assets/icons/ItalicIcon.vue";
+import UnderlineIcon from "@assets/icons/UnderlineIcon.vue";
+import QuoteIcon from "@assets/icons/QuoteIcon.vue";
+import InlineCodeIcon from "@assets/icons/InlineCodeIcon.vue";
+import CodeIcon from "@assets/icons/CodeIcon.vue";
 import CardEditorMenuButton from "@components/CardEditorMenuButton.vue";
 
 const props = defineProps({
@@ -26,24 +31,46 @@ const props = defineProps({
 const markerButtons = computed(() => {
   return [
     {
-      isActive: () => props.editor?.isActive("bold"),
-      onClick: () => props.editor?.chain().focus().toggleBold().run(),
-      content: "B",
+      isActive: props.editor?.isActive("bold"),
+      onClick: () => {
+        props.editor?.chain().focus().toggleBold().run();
+      },
+      icon: BoldIcon,
     },
     {
-      isActive: () => props.editor?.isActive("italic"),
-      onClick: () => props.editor?.chain().focus().toggleItalic().run(),
-      content: "I",
+      isActive: props.editor?.isActive("italic"),
+      onClick: () => {
+        props.editor?.chain().focus().toggleItalic().run();
+      },
+      icon: ItalicIcon,
     },
     {
-      isActive: () => props.editor?.isActive("underline"),
-      onClick: () => props.editor?.chain().focus().toggleUnderline().run(),
-      content: "U",
+      isActive: props.editor?.isActive("underline"),
+      onClick: () => {
+        props.editor?.chain().focus().toggleUnderline().run();
+      },
+      icon: UnderlineIcon,
     },
     {
-      isActive: () => props.editor.isActive("blockquote"),
-      onClick: () => props.editor.chain().focus().toggleBlockquote().run(),
-      content: '"',
+      isActive: props.editor.isActive("blockquote"),
+      onClick: () => {
+        props.editor.chain().focus().toggleBlockquote().run();
+      },
+      icon: QuoteIcon,
+    },
+    {
+      isActive: props.editor.isActive("code"),
+      onClick: () => {
+        props.editor.chain().focus().toggleCode().run();
+      },
+      icon: InlineCodeIcon,
+    },
+    {
+      isActive: props.editor.isActive("codeBlock"),
+      onClick: () => {
+        props.editor.chain().focus().toggleCodeBlock().run();
+      },
+      icon: CodeIcon,
     },
   ];
 });

src/components/CardEditorMenuButton.vue

@@ -1,22 +1,37 @@
 <template>
-  <button class="hover:bg-teal-900 w-8 h-8 rounded" :class="computedClasses">
-    <slot />
+  <button
+    class="flex items-center justify-center p-2 rounded-sm"
+    :class="computedClasses"
+    @click="onClick"
+  >
+    <component :is="icon" v-if="icon" class="w-5 h-5" />
+    <slot v-else />
   </button>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, PropType } from "vue";
 
 const props = defineProps({
+  /** Icon Component, to be displayed */
+  icon: {
+    type: [Function, Object],
+    required: true,
+  },
   isActive: {
     type: Boolean,
     required: true,
   },
+  onClick: {
+    type: Function as PropType<() => void>,
+    required: true,
+  },
 });
 
 const computedClasses = computed(() => {
   return {
-    "bg-teal-900 text-teal-50": props.isActive,
+    "bg-gray-400 text-gray-100": props.isActive,
+    "hover:bg-gray-200": !props.isActive,
   };
 });
 </script>