feat: implement format toggle

Signed-off-by: Sebastian <krupinski01@gmail.com>

src/components/composer/ComposerEditor.vue

@@ -9,6 +9,14 @@ defineProps({
     type: Object as PropType<Editor | null>,
     default: null,
   },
+  format: {
+    type: String as PropType<'rich' | 'plain'>,
+    required: true,
+  },
+  text: {
+    type: String,
+    default: '',
+  },
   isBoldActive: {
     type: Boolean,
     required: true,
@@ -42,6 +50,8 @@ const emit = defineEmits<{
   bulletList: []
   orderedList: []
   link: []
+  toggleFormat: []
+  'update:text': [value: string]
   attachFromDevice: [files: File[]]
   attachFromDocuments: []
 }>()
@@ -66,68 +76,84 @@ function handleFileChange(event: Event) {
 
 <template>
   <v-toolbar density="compact" elevation="0" class="editor-toolbar">
-    <v-btn
-      icon
-      size="small"
-      :class="{ 'v-btn--active': isBoldActive }"
-      @click="$emit('bold')"
-    >
-      <v-icon>mdi-format-bold</v-icon>
-      <v-tooltip activator="parent" location="bottom">Bold</v-tooltip>
-    </v-btn>
+    <template v-if="format === 'rich'">
+      <v-btn
+        icon
+        size="small"
+        :class="{ 'v-btn--active': isBoldActive }"
+        @click="$emit('bold')"
+      >
+        <v-icon>mdi-format-bold</v-icon>
+        <v-tooltip activator="parent" location="bottom">Bold</v-tooltip>
+      </v-btn>
+
+      <v-btn
+        icon
+        size="small"
+        :class="{ 'v-btn--active': isItalicActive }"
+        @click="$emit('italic')"
+      >
+        <v-icon>mdi-format-italic</v-icon>
+        <v-tooltip activator="parent" location="bottom">Italic</v-tooltip>
+      </v-btn>
+
+      <v-btn
+        icon
+        size="small"
+        :class="{ 'v-btn--active': isUnderlineActive }"
+        @click="$emit('underline')"
+      >
+        <v-icon>mdi-format-underline</v-icon>
+        <v-tooltip activator="parent" location="bottom">Underline</v-tooltip>
+      </v-btn>
+
+      <v-divider vertical class="mx-2" />
+
+      <v-btn
+        icon
+        size="small"
+        :class="{ 'v-btn--active': isBulletListActive }"
+        @click="$emit('bulletList')"
+      >
+        <v-icon>mdi-format-list-bulleted</v-icon>
+        <v-tooltip activator="parent" location="bottom">Bullet List</v-tooltip>
+      </v-btn>
+
+      <v-btn
+        icon
+        size="small"
+        :class="{ 'v-btn--active': isOrderedListActive }"
+        @click="$emit('orderedList')"
+      >
+        <v-icon>mdi-format-list-numbered</v-icon>
+        <v-tooltip activator="parent" location="bottom">Numbered List</v-tooltip>
+      </v-btn>
+
+      <v-divider vertical class="mx-2" />
+
+      <v-btn
+        icon
+        size="small"
+        :class="{ 'v-btn--active': isLinkActive }"
+        @click="$emit('link')"
+      >
+        <v-icon>mdi-link</v-icon>
+        <v-tooltip activator="parent" location="bottom">Link</v-tooltip>
+      </v-btn>
+
+      <v-divider vertical class="mx-2" />
+    </template>
 
     <v-btn
       icon
       size="small"
-      :class="{ 'v-btn--active': isItalicActive }"
-      @click="$emit('italic')"
+      :class="{ 'v-btn--active': format === 'plain' }"
+      @click="$emit('toggleFormat')"
     >
-      <v-icon>mdi-format-italic</v-icon>
-      <v-tooltip activator="parent" location="bottom">Italic</v-tooltip>
-    </v-btn>
-
-    <v-btn
-      icon
-      size="small"
-      :class="{ 'v-btn--active': isUnderlineActive }"
-      @click="$emit('underline')"
-    >
-      <v-icon>mdi-format-underline</v-icon>
-      <v-tooltip activator="parent" location="bottom">Underline</v-tooltip>
-    </v-btn>
-
-    <v-divider vertical class="mx-2" />
-
-    <v-btn
-      icon
-      size="small"
-      :class="{ 'v-btn--active': isBulletListActive }"
-      @click="$emit('bulletList')"
-    >
-      <v-icon>mdi-format-list-bulleted</v-icon>
-      <v-tooltip activator="parent" location="bottom">Bullet List</v-tooltip>
-    </v-btn>
-
-    <v-btn
-      icon
-      size="small"
-      :class="{ 'v-btn--active': isOrderedListActive }"
-      @click="$emit('orderedList')"
-    >
-      <v-icon>mdi-format-list-numbered</v-icon>
-      <v-tooltip activator="parent" location="bottom">Numbered List</v-tooltip>
-    </v-btn>
-
-    <v-divider vertical class="mx-2" />
-
-    <v-btn
-      icon
-      size="small"
-      :class="{ 'v-btn--active': isLinkActive }"
-      @click="$emit('link')"
-    >
-      <v-icon>mdi-link</v-icon>
-      <v-tooltip activator="parent" location="bottom">Link</v-tooltip>
+      <v-icon>{{ format === 'plain' ? 'mdi-format-text' : 'mdi-code-tags' }}</v-icon>
+      <v-tooltip activator="parent" location="bottom">
+        {{ format === 'plain' ? 'Rich Text' : 'Plain Text' }}
+      </v-tooltip>
     </v-btn>
 
     <v-spacer />
@@ -154,7 +180,17 @@ function handleFileChange(event: Event) {
   <v-divider />
 
   <div class="editor-container">
-    <EditorContent :editor="editor ?? undefined" />
+    <EditorContent v-if="format === 'rich'" :editor="editor ?? undefined" />
+    <v-textarea
+      v-else
+      :model-value="text"
+      variant="plain"
+      auto-grow
+      hide-details
+      placeholder="Write your message..."
+      class="text-editor pa-4"
+      @update:model-value="$emit('update:text', $event)"
+    />
   </div>
 </template>
 
@@ -179,6 +215,11 @@ function handleFileChange(event: Event) {
   color: rgb(var(--v-theme-primary));
 }
 
+.text-editor :deep(textarea) {
+  min-height: 300px;
+  font-family: inherit;
+}
+
 :deep(.tiptap-editor) {
   outline: none;
   min-height: 300px;