Changes More Functions to wiki

frontend/components/wiki/WikiEditor.vue

@@ -1,28 +1,84 @@
 <template>
   <div class="flex flex-col h-full bg-white relative">
-    <div v-if="editor" class="border-b border-gray-100 px-8 py-2 flex gap-1 items-center sticky top-0 bg-white z-10 shadow-sm">
-      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'bg-gray-100 text-black': editor.isActive('bold') }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 font-bold transition-colors">B</button>
-      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'bg-gray-100 text-black': editor.isActive('italic') }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 italic transition-colors">I</button>
 
-      <div class="w-px h-4 bg-gray-200 mx-2"></div>
+    <div v-if="editor" class="border-b border-gray-100 px-4 py-2 flex flex-wrap gap-1 items-center sticky top-0 bg-white z-20 shadow-sm select-none">
 
-      <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'bg-gray-100 text-black': editor.isActive('heading', { level: 1 }) }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 font-bold text-sm">H1</button>
-      <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'bg-gray-100 text-black': editor.isActive('heading', { level: 2 }) }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 font-bold text-xs">H2</button>
+      <div class="flex gap-0.5 border-r border-gray-200 pr-2 mr-2">
+        <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }" class="toolbar-btn font-bold" title="Fett">B</button>
+        <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }" class="toolbar-btn italic" title="Kursiv">I</button>
+        <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }" class="toolbar-btn line-through" title="Durchgestrichen">S</button>
+      </div>
 
-      <div class="w-px h-4 bg-gray-200 mx-2"></div>
+      <div class="flex gap-0.5 border-r border-gray-200 pr-2 mr-2">
+        <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }" class="toolbar-btn" title="Überschrift 1">H1</button>
+        <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" class="toolbar-btn" title="Überschrift 2">H2</button>
+      </div>
 
-      <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'bg-gray-100 text-black': editor.isActive('bulletList') }" class="p-1.5 rounded hover:bg-gray-50 text-gray-600 text-sm">Liste</button>
+      <div class="flex gap-0.5 border-r border-gray-200 pr-2 mr-2">
+        <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }" class="toolbar-btn" title="Liste">• Liste</button>
+        <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }" class="toolbar-btn" title="Nummerierte Liste">1. Liste</button>
+        <button @click="editor.chain().focus().toggleTaskList().run()" :class="{ 'is-active': editor.isActive('taskList') }" class="toolbar-btn" title="Checkliste">☑ Task</button>
+      </div>
+
+      <div class="flex gap-0.5 items-center">
+        <button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()" class="toolbar-btn" title="Tabelle einfügen">▦ Tab</button>
+
+        <div v-if="editor.isActive('table')" class="flex gap-0.5 ml-2 pl-2 border-l border-gray-200 items-center">
+          <button @click="editor.chain().focus().addColumnAfter().run()" class="toolbar-btn text-xs" title="Spalte hinzufügen">+Col</button>
+          <button @click="editor.chain().focus().deleteColumn().run()" class="toolbar-btn text-xs text-red-400" title="Spalte löschen">-Col</button>
+          <button @click="editor.chain().focus().addRowAfter().run()" class="toolbar-btn text-xs" title="Zeile hinzufügen">+Row</button>
+          <button @click="editor.chain().focus().deleteRow().run()" class="toolbar-btn text-xs text-red-400" title="Zeile löschen">-Row</button>
+          <button @click="editor.chain().focus().mergeCells().run()" class="toolbar-btn text-xs" title="Zellen verbinden">Merge</button>
+          <button @click="editor.chain().focus().deleteTable().run()" class="toolbar-btn text-red-500 hover:bg-red-50 ml-1" title="Tabelle löschen">🗑</button>
+        </div>
+      </div>
     </div>
 
-    <editor-content :editor="editor" class="flex-1 overflow-y-auto px-8 py-6 prose prose-slate max-w-none focus:outline-none custom-editor-area" />
+    <BubbleMenu
+        v-if="editor"
+        :editor="editor"
+        :tippy-options="{ duration: 100 }"
+        class="bg-gray-800 text-white rounded-lg shadow-xl px-2 py-1 flex gap-1 text-sm items-center z-50"
+    >
+      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'text-primary-400': editor.isActive('bold') }" class="bubble-btn font-bold">B</button>
+      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'text-primary-400': editor.isActive('italic') }" class="bubble-btn italic">I</button>
+      <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'text-primary-400': editor.isActive('strike') }" class="bubble-btn line-through">S</button>
+      <div class="w-px h-4 bg-gray-600 mx-1"></div>
+      <button @click="setLink" :class="{ 'text-primary-400': editor.isActive('link') }" class="bubble-btn">Link</button>
+      <button v-if="editor.isActive('link')" @click="editor.chain().focus().unsetLink().run()" class="bubble-btn text-red-300">Unlink</button>
+    </BubbleMenu>
+
+    <editor-content
+        :editor="editor"
+        class="flex-1 overflow-y-auto px-8 py-6 prose prose-slate max-w-none focus:outline-none custom-editor-area"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
+import { watch } from 'vue'
+
+// Tiptap Core Imports
 import { useEditor, EditorContent } from '@tiptap/vue-3'
+// @ts-ignore
+import { BubbleMenu } from '@tiptap/vue-3/menus'
+
 import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
 
+// Extensions
+import BubbleMenuExtension from '@tiptap/extension-bubble-menu'
+import Link from '@tiptap/extension-link'
+import TaskList from '@tiptap/extension-task-list'
+import TaskItem from '@tiptap/extension-task-item'
+import Image from '@tiptap/extension-image'
+
+// Table Imports (Named Imports um Vite Fehler zu vermeiden)
+import { Table } from '@tiptap/extension-table'
+import { TableRow } from '@tiptap/extension-table-row'
+import { TableCell } from '@tiptap/extension-table-cell'
+import { TableHeader } from '@tiptap/extension-table-header'
+
 const props = defineProps<{ modelValue: any }>()
 const emit = defineEmits(['update:modelValue'])
 
@@ -30,32 +86,171 @@ const editor = useEditor({
   content: props.modelValue,
   extensions: [
     StarterKit,
-    Placeholder.configure({ placeholder: 'Schreibe etwas...' }),
+    Placeholder.configure({ placeholder: 'Tippe "/" oder schreibe los...' }),
+    BubbleMenuExtension,
+    Link.configure({ openOnClick: false, autolink: true }),
+    Image, // Für Paste Support aktiv lassen
+
+    // Task List Configuration
+    TaskList,
+    TaskItem.configure({ nested: true }),
+
+    // Table Configuration
+    Table.configure({ resizable: true }),
+    TableRow,
+    TableHeader,
+    TableCell,
   ],
   editorProps: {
-    // Tailwind Klassen für den inneren Bereich (damit man überall hinklicken kann)
-    attributes: { class: 'focus:outline-none min-h-[500px] pb-20' },
+    attributes: {
+      class: 'focus:outline-none min-h-[500px] pb-40',
+    },
   },
   onUpdate: ({ editor }) => {
     emit('update:modelValue', editor.getJSON())
   },
 })
 
-// Reactivity: Wenn Parent Daten ändert (z.B. Seitenwechsel), Editor updaten
 watch(() => props.modelValue, (val) => {
   if (editor.value && JSON.stringify(val) !== JSON.stringify(editor.value.getJSON())) {
     editor.value.commands.setContent(val, false)
   }
 })
+
+const setLink = () => {
+  if (!editor.value) return
+  const previousUrl = editor.value.getAttributes('link').href
+  const url = window.prompt('URL eingeben:', previousUrl)
+  if (url === null) return
+  if (url === '') {
+    editor.value.chain().focus().extendMarkRange('link').unsetLink().run()
+    return
+  }
+  editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+}
 </script>
 
-<style>
-/* Placeholder Grau */
-.ProseMirror p.is-editor-empty:first-child::before {
-  color: #9ca3af;
-  content: attr(data-placeholder);
-  float: left;
-  height: 0;
-  pointer-events: none;
+<style scoped>
+/* Toolbar Buttons */
+.toolbar-btn {
+  @apply p-1.5 rounded text-gray-600 hover:bg-gray-100 transition-colors text-sm font-medium min-w-[28px] h-[28px] flex items-center justify-center;
+}
+.toolbar-btn.is-active {
+  @apply bg-gray-200 text-black shadow-inner;
+}
+.bubble-btn {
+  @apply px-2 py-1 hover:bg-gray-700 rounded transition-colors;
+}
+
+/* WICHTIGE CSS REGELN FÜR EDITOR
+   Dies überschreibt die Tailwind Typography Defaults, die das Layout zerschießen.
+*/
+:deep(.prose) {
+
+  /* --- 1. TABELLEN (Volle Breite erzwingen) --- */
+  table {
+    width: 100% !important;
+    border-collapse: collapse;
+    table-layout: fixed;
+    margin: 1rem 0;
+  }
+
+  th, td {
+    border: 1px solid #d1d5db;
+    padding: 0.5rem;
+    vertical-align: top;
+    box-sizing: border-box;
+    min-width: 1em;
+  }
+
+  th {
+    background-color: #f3f4f6;
+    font-weight: 600;
+    text-align: left;
+  }
+
+  .column-resize-handle {
+    background-color: #3b82f6;
+    bottom: -2px;
+    position: absolute;
+    right: -2px;
+    pointer-events: none;
+    top: 0;
+    width: 4px;
+  }
+
+  /* --- 2. TASK LIST (Checkbox Layout Fix) --- */
+
+  /* Liste resetten */
+  ul[data-type="taskList"] {
+    list-style: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  /* Item als Flex-Zeile erzwingen */
+  li[data-type="taskItem"] {
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: flex-start !important;
+    margin-bottom: 0.25rem !important;
+    padding-left: 0 !important;
+  }
+
+  /* Checkbox Container */
+  li[data-type="taskItem"] > label {
+    display: inline-flex !important;
+    margin-right: 0.5rem !important;
+    margin-top: 0.25rem !important;     /* Feinjustierung für Ausrichtung am Text */
+    user-select: none;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+
+  li[data-type="taskItem"] > label > input {
+    margin: 0 !important;
+    cursor: pointer;
+  }
+
+  /* Inhalt Container */
+  li[data-type="taskItem"] > div {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+    display: block !important;
+  }
+
+  /* WICHTIG: Margins vom Paragraphen entfernen, sonst Umbruch */
+  li[data-type="taskItem"] div > p {
+    margin: 0 !important;
+    display: block !important;
+  }
+
+  /* Standard Marker entfernen */
+  li[data-type="taskItem"]::marker,
+  li[data-type="taskItem"]::before {
+    content: none !important;
+    display: none !important;
+  }
+
+  /* --- SONSTIGES --- */
+  .ProseMirror-selectednode {
+    outline: 2px solid #3b82f6;
+  }
+
+  p.is-editor-empty:first-child::before {
+    color: #9ca3af;
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 6px;
+    display: block;
+    margin: 1rem 0;
+  }
 }
 </style>

frontend/nuxt.config.ts

@@ -24,7 +24,7 @@ export default defineNuxtConfig({
     }],
 
     build: {
-        transpile: ['@vuepic/vue-datepicker']
+        transpile: ['@vuepic/vue-datepicker','@tiptap/vue-3']
     },
 
 
@@ -41,7 +41,7 @@ export default defineNuxtConfig({
 
     vite: {
         optimizeDeps: {
-            include: ["@editorjs/editorjs", "dayjs"],
+            include: ["@editorjs/editorjs", "dayjs",'@tiptap/vue-3'],
         },
     },
 

frontend/package.json

@@ -46,7 +46,16 @@
     "@popperjs/core": "^2.11.8",
     "@sentry/browser": "^9.11.0",
     "@sentry/integrations": "^7.114.0",
+    "@tiptap/extension-bubble-menu": "^3.17.1",
+    "@tiptap/extension-image": "^3.17.1",
+    "@tiptap/extension-link": "^3.17.1",
     "@tiptap/extension-placeholder": "^3.17.1",
+    "@tiptap/extension-table": "^3.17.1",
+    "@tiptap/extension-table-cell": "^3.17.1",
+    "@tiptap/extension-table-header": "^3.17.1",
+    "@tiptap/extension-table-row": "^3.17.1",
+    "@tiptap/extension-task-item": "^3.17.1",
+    "@tiptap/extension-task-list": "^3.17.1",
     "@tiptap/pm": "^3.17.1",
     "@tiptap/starter-kit": "^3.17.1",
     "@tiptap/vue-3": "^3.17.1",

frontend/stores/wiki.ts

@@ -1,53 +0,0 @@
-// stores/wiki.ts
-import { defineStore } from 'pinia'
-
-export const useWikiStore = defineStore('wiki', () => {
-    const flatItems = ref<any[]>([])
-    const isLoading = ref(false)
-
-    // Computed: Wandelt flatItems automatisch in Baum um, wenn sich Daten ändern
-    const tree = computed(() => buildTree(flatItems.value))
-
-    // Action: Baum laden
-    async function fetchTree(params: { entityType?: string, entityId?: number, entityUuid?: string } = {}) {
-        isLoading.value = true
-        try {
-            const { data } = await useFetch('/api/wiki/tree', {
-                query: params
-            })
-            if (data.value) {
-                flatItems.value = data.value
-            }
-        } catch (e) {
-            console.error('Wiki tree fetch error', e)
-        } finally {
-            isLoading.value = false
-        }
-    }
-
-    // Action: Eintrag verschieben (Drag & Drop im UI)
-    async function moveItem(itemId: string, newParentId: string | null, newSortOrder: number) {
-        // 1. Optimistic Update im State (damit es sich sofort schnell anfühlt)
-        const itemIndex = flatItems.value.findIndex(i => i.id === itemId)
-        if (itemIndex > -1) {
-            flatItems.value[itemIndex].parentId = newParentId
-            flatItems.value[itemIndex].sortOrder = newSortOrder
-        }
-
-        // 2. API Call im Hintergrund
-        await $fetch(`/api/wiki/${itemId}`, {
-            method: 'PATCH',
-            body: { parentId: newParentId, sortOrder: newSortOrder }
-        })
-
-        // Fallback: Wenn Error, müsste man hier den alten State wiederherstellen
-    }
-
-    return {
-        flatItems,
-        tree,
-        isLoading,
-        fetchTree,
-        moveItem
-    }
-})