add more advance composer feature

front/src/assets/css/main.css

@@ -19,3 +19,7 @@
     /* 343a46 */
 }
 /* .badge-primary { */
+
+.selected {
+    background-color: var(--selected);
+}

front/src/assets/svg/h-1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M13 20H11V13H4V20H2V4H4V11H11V4H13V20ZM21.0005 8V20H19.0005L19 10.204L17 10.74V8.67L19.5005 8H21.0005Z" fill="#000"></path></svg>

front/src/assets/svg/h-2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M4 4V11H11V4H13V20H11V13H4V20H2V4H4ZM18.5 8C20.5711 8 22.25 9.67893 22.25 11.75C22.25 12.6074 21.9623 13.3976 21.4781 14.0292L21.3302 14.2102L18.0343 18H22V20H15L14.9993 18.444L19.8207 12.8981C20.0881 12.5908 20.25 12.1893 20.25 11.75C20.25 10.7835 19.4665 10 18.5 10C17.5818 10 16.8288 10.7071 16.7558 11.6065L16.75 11.75H14.75C14.75 9.67893 16.4289 8 18.5 8Z" fill="#000"></path></svg>

front/src/assets/svg/h-3.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M22 8L21.9984 10L19.4934 12.883C21.0823 13.3184 22.25 14.7728 22.25 16.5C22.25 18.5711 20.5711 20.25 18.5 20.25C16.674 20.25 15.1528 18.9449 14.8184 17.2166L16.7821 16.8352C16.9384 17.6413 17.6481 18.25 18.5 18.25C19.4665 18.25 20.25 17.4665 20.25 16.5C20.25 15.5335 19.4665 14.75 18.5 14.75C18.214 14.75 17.944 14.8186 17.7056 14.9403L16.3992 13.3932L19.3484 10H15V8H22ZM4 4V11H11V4H13V20H11V13H4V20H2V4H4Z" fill="#000"></path></svg>

front/src/assets/svg/h-4.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M13 20H11V13H4V20H2V4H4V11H11V4H13V20ZM22 8V16H23.5V18H22V20H20V18H14.5V16.66L19.5 8H22ZM20 11.133L17.19 16H20V11.133Z" fill="#000"></path></svg>

front/src/assets/svg/h-5.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M22 8V10H17.6769L17.2126 12.6358C17.5435 12.5472 17.8912 12.5 18.25 12.5C20.4591 12.5 22.25 14.2909 22.25 16.5C22.25 18.7091 20.4591 20.5 18.25 20.5C16.4233 20.5 14.8827 19.2756 14.4039 17.6027L16.3271 17.0519C16.5667 17.8881 17.3369 18.5 18.25 18.5C19.3546 18.5 20.25 17.6046 20.25 16.5C20.25 15.3954 19.3546 14.5 18.25 14.5C17.6194 14.5 17.057 14.7918 16.6904 15.2478L14.8803 14.3439L16 8H22ZM4 4V11H11V4H13V20H11V13H4V20H2V4H4Z" fill="#000"></path></svg>

front/src/assets/svg/h-6.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M21.097 8L18.499 12.5C20.7091 12.5 22.5 14.2909 22.5 16.5C22.5 18.7091 20.7091 20.5 18.5 20.5C16.2909 20.5 14.5 18.7091 14.5 16.5C14.5 15.7636 14.699 15.0737 15.0461 14.4811L18.788 8H21.097ZM4 4V11H11V4H13V20H11V13H4V20H2V4H4ZM18.5 14.5C17.3954 14.5 16.5 15.3954 16.5 16.5C16.5 17.6046 17.3954 18.5 18.5 18.5C19.6046 18.5 20.5 17.6046 20.5 16.5C20.5 15.3954 19.6046 14.5 18.5 14.5Z" fill="#000"></path></svg>

front/src/assets/svg/heading.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M17 11V4H19V21H17V13H7V21H5V4H7V11H17Z" fill="#000"></path></svg>

front/src/assets/svg/image-add-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M21 15V18H24V20H21V23H19V20H16V18H19V15H21ZM21.0082 3C21.556 3 22 3.44495 22 3.9934V13H20V5H4V18.999L14 9L17 12V14.829L14 11.8284L6.827 19H14V21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082ZM8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7Z" fill="#000"></path></svg>

front/src/assets/svg/paint-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M19.2277 18.7321L20.9955 16.9644L22.7632 18.7321C23.7395 19.7084 23.7395 21.2914 22.7632 22.2677C21.7869 23.244 20.204 23.244 19.2277 22.2677C18.2514 21.2914 18.2514 19.7084 19.2277 18.7321ZM8.87861 1.07959L20.1923 12.3933C20.5828 12.7838 20.5828 13.417 20.1923 13.8075L11.707 22.2928C11.3165 22.6833 10.6833 22.6833 10.2928 22.2928L1.80754 13.8075C1.41702 13.417 1.41702 12.7838 1.80754 12.3933L9.58572 4.61512L7.4644 2.4938L8.87861 1.07959ZM10.9999 6.02934L3.92886 13.1004H18.071L10.9999 6.02934Z" fill="#000"></path></svg>

front/src/assets/svg/task-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M19 4H5V20H19V4ZM3 2.9918C3 2.44405 3.44749 2 3.9985 2H19.9997C20.5519 2 20.9996 2.44772 20.9997 3L21 20.9925C21 21.5489 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918ZM11.2929 13.1213L15.5355 8.87868L16.9497 10.2929L11.2929 15.9497L7.40381 12.0607L8.81802 10.6464L11.2929 13.1213Z" fill="#000"></path></svg>

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

@@ -1,27 +1,29 @@
 <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 imapAPI from "@/services/imapAPI";
-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";
 import SvgLoader from "@/components/utils/SvgLoader.vue";
 
+import { BubbleMenu, useEditor, EditorContent } from "@tiptap/vue-3";
+import Document from "@tiptap/extension-document";
+import Text from "@tiptap/extension-text";
+import Paragraph from "@tiptap/extension-paragraph";
+import HardBreak from "@tiptap/extension-hard-break";
+import History from "@tiptap/extension-history";
+import Bold from "@tiptap/extension-bold";
+import Italic from "@tiptap/extension-italic";
+import Strike from "@tiptap/extension-strike";
+import Underline from "@tiptap/extension-underline";
+import Highlight from "@tiptap/extension-highlight";
+import Link from "@tiptap/extension-link";
+import Heading from "@tiptap/extension-heading";
+import Image from "@tiptap/extension-image";
+import TextAlign from "@tiptap/extension-text-align";
+import ListItem from "@tiptap/extension-list-item";
+import OrderedList from "@tiptap/extension-ordered-list";
+import BulletList from "@tiptap/extension-bullet-list";
+
+// todo task list
 // todo style link
 // todo link and drop cursor
 // todo mentions
@@ -37,18 +39,25 @@ const editor = useEditor({
             depth: 10,
         }),
         // marks
+        Bold,
+        Italic,
+        Strike,
         Underline,
         Link,
-        Bold,
-        Strike,
-        Italic,
         // nodes
         Highlight.configure({
             multicolor: true,
         }),
+        Heading.configure({
+            level: [2, 3, 4],
+        }),
+        Image,
         TextAlign.configure({
             types: ["heading", "paragraph"],
         }),
+        ListItem,
+        OrderedList,
+        BulletList,
     ],
     content: `
           <p>
@@ -61,8 +70,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 +82,7 @@ const send = () => {
         text: textContent,
         html: htmlContent,
     });
-};
+}
 
 // todo subject input when dm of group...
 // Font selection: choose the font family, size, color, and style
@@ -83,61 +93,134 @@ const send = () => {
 </script>
 <!-- todo tooltip -->
 <template>
-    <div class="main">
+    <div v-if="editor">
-        <div v-if="editor">
+        <div id="options" v-if="showOptions">
-            <bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor">
+            <span class="category">
                 <SvgLoader
-                    svg="bold"
+                    svg="h-2"
-                    @click="editor.chain().focus().toggleBold().run()"
-                    :class="[{ 'is-active': editor.isActive('bold') }, 'editorOption']"
-                />
-                <SvgLoader
-                    svg="italic"
-                    @click="editor.chain().focus().toggleItalic().run()"
-                    :class="[{ 'is-active': editor.isActive('italic') }, 'editorOption']"
-                    v-tooltip="'Italic'"
-                />
-                <SvgLoader
-                    svg="strikethrough"
-                    @click="editor.chain().focus().toggleStrike().run()"
-                    :class="[{ 'is-active': editor.isActive('strike') }, 'editorOption']"
-                />
-                <SvgLoader
-                    svg="underline"
-                    @click="editor.chain().focus().toggleUnderline().run()"
-                    :class="[{ 'is-active': editor.isActive('underline') }, 'editorOption']"
-                />
-                <SvgLoader
-                    svg="font-color"
-                    @click="editor.commands.toggleHighlight({ color: '#ffcc00' })"
-                    :class="[{ 'is-active': editor.isActive('highlight') }, 'editorOption']"
-                />
-            </bubble-menu>
-
-            <floating-menu class="floating-menu" :tippy-options="{ duration: 100 }" :editor="editor">
-                <button
-                    @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
-                    :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
-                >
-                    H1
-                </button>
-                <button
                     @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
-                    :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+                    :class="[{ 'is-active': editor.isActive({ level: 2 }) }, 'editorOption']"
-                >
+                />
-                    H2
+                <SvgLoader
-                </button>
+                    svg="h-3"
-                <button
+                    @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
+                    :class="[{ 'is-active': editor.isActive({ level: 3 }) }, 'editorOption']"
+                />
+                <SvgLoader
+                    svg="h-4"
+                    @click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
+                    :class="[{ 'is-active': editor.isActive({ level: 4 }) }, 'editorOption']"
+                />
+            </span>
+            <!-- <SvgLoader
+                svg="link"
+                @click="editor.chain().focus().toggleBold().run()"
+                :class="[{ 'is-active': editor.isActive('bold') }, 'editorOption']"
+            /> -->
+            <span class="category">
+                <SvgLoader
+                    svg="list-ordered"
+                    @click="editor.chain().focus().toggleOrderedList().run()"
+                    :class="[{ 'is-active': editor.isActive('orderedList') }, 'editorOption']"
+                />
+                <SvgLoader
+                    svg="list-unordered"
                     @click="editor.chain().focus().toggleBulletList().run()"
-                    :class="{ 'is-active': editor.isActive('bulletList') }"
+                    :class="[{ 'is-active': editor.isActive('bulletList') }, 'editorOption']"
-                >
+                />
-                    Bullet List
+            </span>
-                </button>
+            <span class="category">
-            </floating-menu>
+                <SvgLoader
-        </div>
+                    svg="align-left"
+                    @click="editor.chain().focus().setTextAlign('left').run()"
+                    :class="[{ 'is-active': editor.isActive({ textAlign: 'left' }) }, 'editorOption']"
+                />
+                <SvgLoader
+                    svg="align-center"
+                    @click="editor.chain().focus().setTextAlign('center').run()"
+                    :class="[{ 'is-active': editor.isActive({ textAlign: 'center' }) }, 'editorOption']"
+                />
+                <SvgLoader
+                    svg="align-right"
+                    @click="editor.chain().focus().setTextAlign('right').run()"
+                    :class="[{ 'is-active': editor.isActive({ textAlign: 'right' }) }, 'editorOption']"
+                />
+                <SvgLoader
+                    svg="align-justify"
+                    @click="editor.chain().focus().setTextAlign('justify').run()"
+                    :class="[{ 'is-active': editor.isActive({ textAlign: 'justify' }) }, 'editorOption']"
+                />
+            </span>
 
+            <!-- <SvgLoader
+                svg="font-color"
+                @click="editor.chain().focus().toggleBold().run()"
+                :class="[{ 'is-active': editor.isActive('bold') }, 'editorOption']"
+            />
+            <SvgLoader
+                svg="paint-fill"
+                @click="editor.chain().focus().toggleBold().run()"
+                :class="[{ 'is-active': editor.isActive('bold') }, 'editorOption']"
+            /> -->
+            <span class="category">
+                <SvgLoader
+                    svg="indent-increase"
+                    @click="!$event.disabled ? editor.chain().focus().sinkListItem('listItem').run() : ''"
+                    :class="[{ disabled: !editor.can().sinkListItem('listItem') }, 'editorOption']"
+                    :isDisabled="!editor.can().sinkListItem('listItem')"
+                />
+                <SvgLoader
+                    svg="indent-decrease"
+                    @click="!$event.disabled ? editor.chain().focus().liftListItem('listItem').run() : ''"
+                    :class="[{ disabled: !editor.can().liftListItem('listItem') }, 'editorOption']"
+                    :isDisabled="!editor.can().liftListItem('listItem')"
+                />
+            </span>
+            <!-- <SvgLoader
+                svg="image-add-line"
+                @click="editor.chain().focus().toggleBold().run()"
+                :class="[{ 'is-active': editor.isActive('bold') }, 'editorOption']"
+            /> -->
+        </div>
+        <bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor">
+            <SvgLoader
+                svg="bold"
+                @click="editor.chain().focus().toggleBold().run()"
+                :class="[{ 'is-active': editor.isActive('bold') }, 'editorOption']"
+            />
+            <SvgLoader
+                svg="italic"
+                @click="editor.chain().focus().toggleItalic().run()"
+                :class="[{ 'is-active': editor.isActive('italic') }, 'editorOption']"
+                v-tooltip="'Italic'"
+            />
+            <SvgLoader
+                svg="strikethrough"
+                @click="editor.chain().focus().toggleStrike().run()"
+                :class="[{ 'is-active': editor.isActive('strike') }, 'editorOption']"
+            />
+            <SvgLoader
+                svg="underline"
+                @click="editor.chain().focus().toggleUnderline().run()"
+                :class="[{ 'is-active': editor.isActive('underline') }, 'editorOption']"
+            />
+            <SvgLoader
+                svg="font-color"
+                @click="editor.commands.toggleHighlight({ color: '#ffcc00' })"
+                :class="[{ 'is-active': editor.isActive('highlight') }, 'editorOption']"
+            />
+        </bubble-menu>
+    </div>
+    <div class="main">
         <editor-content class="editor" :editor="editor" aria-expanded="false" />
-        <SvgLoader class="sendMessage" svg="send-plane-line" @click="send()" />
+        <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>
 
@@ -151,43 +234,71 @@ const send = () => {
 .main {
     display: flex;
     flex-direction: row;
-    padding: 10px;
+    padding: 0 10px 10px 10px;
+    overflow: auto;
 }
+
 .editor {
     background-color: var(--secondary-background);
     flex: 1;
     margin-right: 10px;
     border-radius: 10px;
     padding: 0 10px;
+    overflow: auto;
 }
 
-.bubble-menu {
+.bubble-menu,
+#options,
+.category {
     display: flex;
     flex-direction: row;
     gap: 2px;
     background-color: var(--primary-background);
-    border: 1px solid var(--border-color);
+}
+
+#options {
+    margin: 2px 0 4px 11px;
+    gap: 6px;
+}
+
+.bubble-menu,
+.category {
+    outline: 1px solid var(--border-color);
     border-radius: 8px;
     padding: 2px;
+}
 
-    .editorOption {
+.editorOption {
-        border-radius: 6px;
+    border-radius: 6px;
-        cursor: pointer;
+    cursor: pointer;
 
-        &:hover,
+    &:hover,
-        &.is-active {
+    &.is-active {
-            background-color: var(--selected);
+        background-color: var(--selected);
-        }
-
-        ::v-deep img {
-            filter: var(--svg-primary-text);
-            padding: 1px;
-        }
     }
 }
 
+.disabled {
+    opacity: 0.5;
+}
+
+.actions {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.moreOptions,
 .sendMessage {
-    filter: var(--svg-primary-text);
+    border-radius: 6px;
-    cursor: pointer;
+
+    ::v-deep img {
+        padding: 3px;
+        cursor: pointer;
+    }
+}
+
+.moreOptions:hover {
+    background-color: var(--selected);
 }
 </style>

front/src/components/utils/SvgLoader.vue

@@ -3,15 +3,22 @@ import { defineProps } from "vue";
 
 const props = defineProps({
     svg: { type: String, required: true },
+    isDisabled: Boolean,
 });
 
 const pathSvg = () => require(`@/assets/svg/${props.svg}.svg`);
+console.log(props.isDisabled);
 </script>
 
 <template>
     <div>
-        <img class="it-has-a-tooltip" :src="pathSvg()" />
+        <img :disabled="props.isDisabled" :src="pathSvg()" />
     </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+img {
+    filter: var(--svg-primary-text);
+    padding: 1px;
+}
+</style>

front/src/views/room/RoomView.vue

@@ -60,7 +60,7 @@ provide("room", room);
                 @open-message-view="(id) => openMessageView(id)"
             />
         </div>
-        <Composer class="composer" v-if="shouldDisplayComposer()" />
+        <Composer v-if="shouldDisplayComposer()" />
         <MessageViewModal :message="message" :messageId="messageIdView" @close="() => openMessageView(-1)" />
     </div>
 </template>
@@ -78,9 +78,4 @@ provide("room", room);
 .messages {
     flex-grow: 1;
 }
-
-.composer {
-    display: flex;
-    align-items: center;
-}
 </style>

front/src/views/sidebar/rooms/Room.vue

@@ -46,10 +46,9 @@ const router = useRouter();
     cursor: pointer;
 }
 
-.room:hover,
+.room:hover {
-.selected {
-    background-color: var(--selected);
     border-radius: 8px;
+    background-color: var(--selected);
 }
 
 .content {

front/src/views/sidebar/rooms/threads/Thread.vue

@@ -32,6 +32,7 @@ const router = useRouter();
     padding: 4px;
     cursor: pointer;
     color: var(--secondary-text);
+    border-radius: 8px;
 }
 
 .badge {
@@ -44,10 +45,8 @@ const router = useRouter();
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.room:hover,
+.room:hover {
-.selected {
     background-color: var(--selected);
-    border-radius: 8px;
 }
 
 .room::before {