Added vuetify-pro-tiptap for html formating.

frontend/app/components/article/article.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
   import {useLabelEditorStore} from "~/store/labelEditorStore";
-  import {originToString} from "~/types/origin";
   import DeleteConfirm from "~/components/ui/deleteConfirm.vue";
   import type {Ref} from "vue";
 
@@ -150,6 +149,7 @@
                   :hint="store.settings.bio"
                   persistent-placeholder
                   persistent-hint
+                  :readonly="!edit"
               />
             </v-row>
 
@@ -160,6 +160,7 @@
                   :hint="store.settings.mhd"
                   persistent-placeholder
                   persistent-hint
+                  :readonly="!edit"
               />
             </v-row>
           </v-col>
@@ -172,24 +173,17 @@
                   :hint="store.settings.bio_info"
                   persistent-placeholder
                   persistent-hint
+                  :readonly="!edit"
               />
             </v-row>
             <v-row no-gutters>
-              <v-textarea
+              <VuetifyTiptap
-                  v-model.trim="store.articleEdit.description"
+                  v-model="store.articleEdit.description"
-                  :tile=true
                   label="Beschreibung"
-                  counter
+                  rounded
-                  :persistentCounter=true
+                  :max-height="200"
-                  rows="6"
+                  :disabled="!edit"
-                  no-resize
+              />
-                  :readonly="!edit"
-                  persistent-placeholder
-              >
-                <template v-slot:counter="{ counter }">
-                  <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
-                </template>
-              </v-textarea>
             </v-row>
           </v-col>
 
@@ -201,6 +195,7 @@
                   :hint="store.settings.allergens_text"
                   persistent-placeholder
                   persistent-hint
+                  :readonly="!edit"
               />
             </v-row>
             <v-row no-gutters>

frontend/app/plugins/vuetify.ts

@@ -3,10 +3,49 @@ import '@mdi/font/css/materialdesignicons.css'
 
 import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
+import {
+  BaseKit,
+  Bold,
+  Clear,
+  Heading,
+  History,
+  Indent,
+  Table,
+  TextAlign,
+  VuetifyTiptap,
+  createVuetifyProTipTap,
+} from 'vuetify-pro-tiptap'
+
+import 'vuetify/styles'
+import 'vuetify-pro-tiptap/styles/editor.css'
+import 'vuetify-pro-tiptap/styles/markdown.css'
+
+const vuetifyProTipTap = createVuetifyProTipTap({
+  lang: 'de',
+  markdownTheme: 'github',
+  components: {
+    VuetifyTiptap,
+  },
+  extensions: [
+    BaseKit.configure({
+      placeholder: {
+        placeholder: 'Enter some text...'
+      },
+    }),
+    Bold,
+    Heading,
+    TextAlign,
+    Clear.configure({ divider: true }),
+    Indent.configure({ divider: true }),
+    Table.configure({ divider: true }),
+    History.configure({ divider: true }),
+  ]
+})
 
 export default defineNuxtPlugin((app) => {
   const vuetify = createVuetify({
     // ... your configuration
   })
   app.vueApp.use(vuetify)
+  app.vueApp.use(vuetifyProTipTap)
 })

frontend/app/store/labelEditorStore.ts

@@ -273,8 +273,6 @@ export const useLabelEditorStore = defineStore('label_editor_store', {
 
     async updateArticle(article: Article) {
       if (this.article != null) {
-        console.log(article);
-
         try {
           let updatedArticle = await $fetch<Article>(this.config.public.url + '/article/' + article.id, {
             method: 'POST',

frontend/package.json

@@ -16,7 +16,8 @@
     "nuxt": "4.3.0",
     "pinia": "3.0.4",
     "vue": "3.5.27",
-    "vue-router": "5.0.2"
+    "vue-router": "5.0.2",
+    "vuetify-pro-tiptap": "2.8.2"
   },
   "devDependencies": {
     "vite-plugin-vuetify": "2.1.3",