start on repond to message (basic input and builder for dm)

2023-04-14 18:37:33 +02:00
parent 5b62fce48a
commit 7ad22e55c1
14 changed files with 2389 additions and 61 deletions
--- a/front/src/components/structure/message/Composer.vue
+++ b/front/src/components/structure/message/Composer.vue
@@ -0,0 +1,152 @@
+<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, onBeforeUnmount } from "vue";
+
+const editor = useEditor({
+    extensions: [StarterKit],
+    content: `
+          <p>
+            Try to select <em>this text</em> to see what we call the bubble menu.
+          </p>
+          <p>
+            Neat, isn't it? Add an empty paragraph to see the floating menu.
+          </p>
+        `,
+});
+
+const room = inject("room");
+
+const send = () => {
+    const htmlContent = editor.value.getHTML();
+    const textContent = editor.value.getText();
+    const accountUser = store.getters.accountOfRoom(room.value.id);
+    imapAPI.reponseEmail({
+        user: accountUser,
+        roomId: room.value.id,
+        text: textContent,
+        html: htmlContent,
+    });
+};
+</script>
+
+<template>
+    <div v-if="editor">
+        <bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor">
+            <button
+                @click="editor.chain().focus().toggleBold().run()"
+                :class="{ 'is-active': editor.isActive('bold') }"
+            >
+                Bold
+            </button>
+            <button
+                @click="editor.chain().focus().toggleItalic().run()"
+                :class="{ 'is-active': editor.isActive('italic') }"
+            >
+                Italic
+            </button>
+            <button
+                @click="editor.chain().focus().toggleStrike().run()"
+                :class="{ 'is-active': editor.isActive('strike') }"
+            >
+                Strike
+            </button>
+        </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 }) }"
+            >
+                H2
+            </button>
+            <button
+                @click="editor.chain().focus().toggleBulletList().run()"
+                :class="{ 'is-active': editor.isActive('bulletList') }"
+            >
+                Bullet List
+            </button>
+        </floating-menu>
+    </div>
+
+    <editor-content class="editor" :editor="editor" />
+
+    <div class="send" @click="send()">SEND</div>
+</template>
+
+<style lang="scss">
+.send:hover {
+    background-color: var(--selected);
+}
+/* Basic editor styles */
+.editor {
+    background-color: var(--secondary-background);
+}
+
+.ProseMirror {
+    > * + * {
+        margin-top: 0.75em;
+    }
+
+    ul,
+    ol {
+        padding: 0 1rem;
+    }
+
+    blockquote {
+        padding-left: 1rem;
+        border-left: 2px solid rgba(#0d0d0d, 0.1);
+    }
+}
+
+.bubble-menu {
+    display: flex;
+    background-color: #0d0d0d;
+    padding: 0.2rem;
+    border-radius: 0.5rem;
+
+    button {
+        border: none;
+        background: none;
+        color: #fff;
+        font-size: 0.85rem;
+        font-weight: 500;
+        padding: 0 0.2rem;
+        opacity: 0.6;
+
+        &:hover,
+        &.is-active {
+            opacity: 1;
+        }
+    }
+}
+
+.floating-menu {
+    display: flex;
+    background-color: #0d0d0d10;
+    padding: 0.2rem;
+    border-radius: 0.5rem;
+
+    button {
+        border: none;
+        background: none;
+        font-size: 0.85rem;
+        font-weight: 500;
+        padding: 0 0.2rem;
+        opacity: 0.6;
+
+        &:hover,
+        &.is-active {
+            opacity: 1;
+        }
+    }
+}
+</style>