more options on composer inside editor

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

@@ -1,8 +1,8 @@
 <script setup>
-import imapAPI from "@/services/imapAPI";
+import { inject, ref } from "vue";
 import store from "@/store/store";
 import { BubbleMenu, useEditor, EditorContent, FloatingMenu } from "@tiptap/vue-3";
-import { inject } from "vue";
+import imapAPI from "@/services/imapAPI";
 import Underline from "@tiptap/extension-underline";
 import Bold from "@tiptap/extension-bold";
 import Document from "@tiptap/extension-document";
@@ -61,8 +61,9 @@ const editor = useEditor({
 });
 
 const room = inject("room");
+const showOptions = ref(true);
 
-const send = () => {
+function sendMessage() {
     const htmlContent = editor.value.getHTML();
     const textContent = editor.value.getText();
     const accountUser = store.getters.accountOfRoom(room.value.id);
@@ -72,7 +73,7 @@ const send = () => {
         text: textContent,
         html: htmlContent,
     });
-};
+}
 
 // todo subject input when dm of group...
 // Font selection: choose the font family, size, color, and style
@@ -136,14 +137,30 @@ const send = () => {
             </floating-menu>
         </div>
 
-        <editor-content class="editor" :editor="editor" aria-expanded="false" />
-        <SvgLoader class="sendMessage" svg="send-plane-line" @click="send()" />
+        <div class="editor">
+            <div class="options" v-if="showOptions">heruipaghruie</div>
+            <editor-content class="editorContent" :editor="editor" aria-expanded="false" />
+        </div>
+        <div class="actions">
+            <SvgLoader class="sendMessage" svg="send-plane-line" @click="sendMessage()" />
+            <SvgLoader
+                :class="[{ selected: showOptions }, 'moreOptions']"
+                svg="menu-add-line"
+                @click="showOptions = !showOptions"
+            />
+        </div>
     </div>
 </template>
 
-<style>
-.ProseMirror:focus {
-    outline: none;
+<style lang="scss">
+.ProseMirror {
+    &:focus {
+        outline: none;
+    }
+
+    p {
+        margin: 0;
+    }
 }
 </style>
 
@@ -153,10 +170,21 @@ const send = () => {
     flex-direction: row;
     padding: 10px;
 }
+
 .editor {
-    background-color: var(--secondary-background);
+    display: flex;
+    flex-direction: column;
     flex: 1;
     margin-right: 10px;
+}
+
+.options {
+    background-color: blue;
+}
+
+.editorContent {
+    flex: 1;
+    background-color: var(--secondary-background);
     border-radius: 10px;
     padding: 0 10px;
 }
@@ -186,8 +214,24 @@ const send = () => {
     }
 }
 
+.actions {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.moreOptions,
 .sendMessage {
-    filter: var(--svg-primary-text);
-    cursor: pointer;
+    border-radius: 6px;
+
+    ::v-deep img {
+        filter: var(--svg-primary-text);
+        padding: 3px;
+        cursor: pointer;
+    }
+}
+
+.moreOptions:hover {
+    background-color: var(--selected);
 }
 </style>