import lib for composer

front/src/components/structure/message/Composer.vue

@@ -1,12 +1,54 @@
 <script setup>
 import imapAPI from "@/services/imapAPI";
 import store from "@/store/store";
-import StarterKit from "@tiptap/starter-kit";
 import { BubbleMenu, useEditor, EditorContent, FloatingMenu } from "@tiptap/vue-3";
 import { inject } from "vue";
+import Underline from "@tiptap/extension-underline";
+import Bold from "@tiptap/extension-bold";
+import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import Text from "@tiptap/extension-text";
+import Highlight from "@tiptap/extension-highlight";
+import Italic from "@tiptap/extension-italic";
+import Link from "@tiptap/extension-link";
+import Strike from "@tiptap/extension-strike";
+import History from "@tiptap/extension-history";
+import TextAlign from "@tiptap/extension-text-align";
+import OrderedList from "@tiptap/extension-ordered-list";
+import bulletList from "@tiptap/extension-bullet-list";
+import HardBreak from "@tiptap/extension-hard-break";
+import heading from "@tiptap/extension-heading";
+import Image from "@tiptap/extension-image";
+import TaskList from "@tiptap/extension-task-list";
 
+// todo style link
+// todo link and drop cursor
+// todo mentions
 const editor = useEditor({
-    extensions: [StarterKit],
+    extensions: [
+        // required
+        Document,
+        Text,
+        // auto or on shortcut onlye
+        Paragraph,
+        HardBreak,
+        History.configure({
+            depth: 10,
+        }),
+        // marks
+        Underline,
+        Link,
+        Bold,
+        Strike,
+        Italic,
+        // nodes
+        Highlight.configure({
+            multicolor: true,
+        }),
+        TextAlign.configure({
+            types: ["heading", "paragraph"],
+        }),
+    ],
     content: `
           <p>
             Try to select <em>this text</em> to see what we call the bubble menu.
@@ -32,6 +74,11 @@ const send = () => {
 };
 
 // todo subject input when dm of group...
+// Font selection: choose the font family, size, color, and style
+// Images: insert pictures and graphics into your email
+// Attachments: attach files to your email
+// Signatures: add a custom signature to the bottom of your email
+// HTML code editing: for advanced users who want to edit the HTML code of their email.
 </script>
 
 <template>
@@ -56,6 +103,18 @@ const send = () => {
                 >
                     Strike
                 </button>
+                <button
+                    @click="editor.chain().focus().toggleUnderline().run()"
+                    :class="{ 'is-active': editor.isActive('underline') }"
+                >
+                    toggleUnderline
+                </button>
+                <button
+                    @click="editor.commands.toggleHighlight({ color: '#ffcc00' })"
+                    :class="{ 'is-active': editor.isActive('highlight') }"
+                >
+                    Highlight
+                </button>
             </bubble-menu>
 
             <floating-menu class="floating-menu" :tippy-options="{ duration: 100 }" :editor="editor">
@@ -104,6 +163,9 @@ const send = () => {
     margin-right: 10px;
     border-radius: 10px;
     padding: 0 10px;
-    line-height: 0.6rem;
+}
+
+.is-active {
+    background-color: blue;
 }
 </style>