Added Entity Wiki

backend/src/routes/wiki.ts

@@ -1,17 +1,66 @@
 import { FastifyInstance } from "fastify"
-import { and, eq, isNull, asc, desc } from "drizzle-orm"
+import { and, eq, isNull, asc, inArray } from "drizzle-orm"
-import { wikiPages, authUsers } from "../../db/schema/"
+// WICHTIG: Hier müssen die Schemas der Entitäten importiert werden!
+import {
+    wikiPages,
+    authUsers,
+    // Bereits vorhanden
+    customers,
+    projects,
+    plants,
+    products,
+    inventoryitems,
+    // NEU HINZUGEFÜGT (Basierend auf deinem DataStore)
+    tasks,
+    contacts,
+    contracts,
+    vehicles,
+    vendors,
+    spaces,
+    inventoryitemgroups,
+    services,
+    hourrates,
+    events,
+    productcategories,
+    servicecategories,
+    ownaccounts
+} from "../../db/schema/"
 
-// Types für Request Body & Query (statt Zod)
+// Konfiguration: Welche Entitäten sollen im Wiki auftauchen?
+const ENTITY_CONFIG: Record<string, { table: any, labelField: any, rootLabel: string, idField: 'id' | 'uuid' }> = {
+    // --- BEREITS VORHANDEN ---
+    'customers': { table: customers, labelField: customers.name, rootLabel: 'Kunden', idField: 'id' },
+    'projects': { table: projects, labelField: projects.name, rootLabel: 'Projekte', idField: 'id' },
+    'plants': { table: plants, labelField: plants.name, rootLabel: 'Objekte', idField: 'id' },
+    'products': { table: products, labelField: products.name, rootLabel: 'Artikel', idField: 'id' },
+    'inventoryitems': { table: inventoryitems, labelField: inventoryitems.name, rootLabel: 'Inventarartikel', idField: 'id' },
+
+    // --- NEU BASIEREND AUF DATASTORE ---
+    'tasks': { table: tasks, labelField: tasks.name, rootLabel: 'Aufgaben', idField: 'id' },
+    'contacts': { table: contacts, labelField: contacts.fullName, rootLabel: 'Kontakte', idField: 'id' },
+    'contracts': { table: contracts, labelField: contracts.name, rootLabel: 'Verträge', idField: 'id' },
+    'vehicles': { table: vehicles, labelField: vehicles.license_plate, rootLabel: 'Fahrzeuge', idField: 'id' },
+    'vendors': { table: vendors, labelField: vendors.name, rootLabel: 'Lieferanten', idField: 'id' },
+    'spaces': { table: spaces, labelField: spaces.name, rootLabel: 'Lagerplätze', idField: 'id' },
+    'inventoryitemgroups': { table: inventoryitemgroups, labelField: inventoryitemgroups.name, rootLabel: 'Inventarartikelgruppen', idField: 'id' },
+    'services': { table: services, labelField: services.name, rootLabel: 'Leistungen', idField: 'id' },
+    'hourrates': { table: hourrates, labelField: hourrates.name, rootLabel: 'Stundensätze', idField: 'id' },
+    'events': { table: events, labelField: events.name, rootLabel: 'Termine', idField: 'id' },
+    'productcategories': { table: productcategories, labelField: productcategories.name, rootLabel: 'Artikelkategorien', idField: 'id' },
+    'servicecategories': { table: servicecategories, labelField: servicecategories.name, rootLabel: 'Leistungskategorien', idField: 'id' },
+    'ownaccounts': { table: ownaccounts, labelField: ownaccounts.name, rootLabel: 'Zusätzliche Buchungskonten', idField: 'id' },
+}
+
+// Types
 interface WikiTreeQuery {
     entityType?: string
-    entityId?: number    // Kommt als string oder number an, je nach parser
+    entityId?: number
     entityUuid?: string
 }
 
 interface WikiCreateBody {
     title: string
-    parentId?: string    // UUID
+    parentId?: string
     isFolder?: boolean
     entityType?: string
     entityId?: number
@@ -20,42 +69,34 @@ interface WikiCreateBody {
 
 interface WikiUpdateBody {
     title?: string
-    content?: any        // Das Tiptap JSON Object
+    content?: any
     parentId?: string | null
     sortOrder?: number
     isFolder?: boolean
 }
 
-export default async function wikiRoutes (server: FastifyInstance) {
+export default async function wikiRoutes(server: FastifyInstance) {
 
     // ---------------------------------------------------------
     // 1. GET /wiki/tree
-    // Lädt die Struktur für die Sidebar (OHNE Content -> Schnell)
+    // Lädt Struktur: Entweder gefiltert (Widget) oder Global (mit virtuellen Ordnern)
     // ---------------------------------------------------------
     server.get<{ Querystring: WikiTreeQuery }>("/wiki/tree", async (req, reply) => {
         const user = req.user
         const { entityType, entityId, entityUuid } = req.query
 
-        // Basis-Filter: Tenant Sicherheit
+        // FALL A: WIDGET-ANSICHT (Spezifische Entität)
-        const filters = [eq(wikiPages.tenantId, user.tenant_id)]
+        // Wenn wir spezifisch filtern, wollen wir nur die echten Seiten ohne virtuelle Ordner
+        if (entityType && (entityId || entityUuid)) {
+            const filters = [
+                eq(wikiPages.tenantId, user.tenant_id),
+                eq(wikiPages.entityType, entityType)
+            ]
 
-        // Logik: Laden wir "Allgemein" oder "Entitäts-Spezifisch"?
+            if (entityId) filters.push(eq(wikiPages.entityId, Number(entityId)))
-        if (entityType) {
+            else if (entityUuid) filters.push(eq(wikiPages.entityUuid, entityUuid))
-            // Spezifisch (z.B. Kunde)
-            filters.push(eq(wikiPages.entityType, entityType))
 
-            if (entityId) {
+            return server.db
-                filters.push(eq(wikiPages.entityId, Number(entityId)))
-            } else if (entityUuid) {
-                filters.push(eq(wikiPages.entityUuid, entityUuid))
-            }
-        } else {
-            // Allgemein (alles wo entityType NULL ist)
-            filters.push(isNull(wikiPages.entityType))
-        }
-
-        // Performance: Nur Metadaten laden, kein riesiges JSON-Content
-        const pages = await server.db
                 .select({
                     id: wikiPages.id,
                     parentId: wikiPages.parentId,
@@ -68,19 +109,129 @@ export default async function wikiRoutes (server: FastifyInstance) {
                 .from(wikiPages)
                 .where(and(...filters))
                 .orderBy(asc(wikiPages.sortOrder), asc(wikiPages.title))
+        }
 
-        return pages
+        // FALL B: GLOBALE ANSICHT (Haupt-Wiki)
+        // Wir laden ALLES und bauen virtuelle Ordner für die Entitäten
+
+        // 1. Alle Wiki-Seiten des Tenants laden
+        const allPages = await server.db
+            .select({
+                id: wikiPages.id,
+                parentId: wikiPages.parentId,
+                title: wikiPages.title,
+                isFolder: wikiPages.isFolder,
+                sortOrder: wikiPages.sortOrder,
+                entityType: wikiPages.entityType,
+                entityId: wikiPages.entityId,     // Wichtig für Zuordnung
+                entityUuid: wikiPages.entityUuid, // Wichtig für Zuordnung
+                updatedAt: wikiPages.updatedAt,
+            })
+            .from(wikiPages)
+            .where(eq(wikiPages.tenantId, user.tenant_id))
+            .orderBy(asc(wikiPages.sortOrder), asc(wikiPages.title))
+
+        // Trennen in Standard-Seiten und Entity-Seiten
+        const standardPages = allPages.filter(p => !p.entityType)
+        const entityPages = allPages.filter(p => p.entityType)
+
+        const virtualNodes: any[] = []
+
+        // 2. Virtuelle Ordner generieren
+        // Wir iterieren durch unsere Config (Kunden, Projekte...)
+        await Promise.all(Object.entries(ENTITY_CONFIG).map(async ([typeKey, config]) => {
+
+            // Haben wir überhaupt Notizen für diesen Typ?
+            const pagesForType = entityPages.filter(p => p.entityType === typeKey)
+            if (pagesForType.length === 0) return
+
+            // IDs sammeln, um Namen aus der DB zu holen
+            // Wir unterscheiden zwischen ID (int) und UUID
+            let entities: any[] = []
+
+            if (config.idField === 'id') {
+                const ids = [...new Set(pagesForType.map(p => p.entityId).filter((id): id is number => id !== null))]
+                if (ids.length > 0) {
+                    //@ts-ignore - Drizzle Typisierung bei dynamischen Tables ist tricky
+                    entities = await server.db.select({ id: config.table.id, label: config.labelField })
+                        .from(config.table)
+                        //@ts-ignore
+                        .where(inArray(config.table.id, ids))
+                }
+            } else {
+                // Falls UUID genutzt wird (z.B. IoT Devices)
+                const uuids = [...new Set(pagesForType.map(p => p.entityUuid).filter((uuid): uuid is string => uuid !== null))]
+                if (uuids.length > 0) {
+                    //@ts-ignore
+                    entities = await server.db.select({ id: config.table.id, label: config.labelField })
+                        .from(config.table)
+                        //@ts-ignore
+                        .where(inArray(config.table.id, uuids))
+                }
+            }
+
+            if (entities.length === 0) return
+
+            // 3. Virtuellen Root Ordner erstellen (z.B. "Kunden")
+            const rootId = `virtual-root-${typeKey}`
+            virtualNodes.push({
+                id: rootId,
+                parentId: null, // Ganz oben im Baum
+                title: config.rootLabel,
+                isFolder: true,
+                isVirtual: true, // Flag fürs Frontend (read-only Folder)
+                sortOrder: 1000  // Ganz unten anzeigen
+            })
+
+            // 4. Virtuelle Entity Ordner erstellen (z.B. "Müller GmbH")
+            entities.forEach(entity => {
+                const entityNodeId = `virtual-entity-${typeKey}-${entity.id}`
+
+                virtualNodes.push({
+                    id: entityNodeId,
+                    parentId: rootId,
+                    title: entity.label || 'Unbekannt',
+                    isFolder: true,
+                    isVirtual: true,
+                    sortOrder: 0
+                })
+
+                // 5. Die echten Notizen verschieben
+                // Wir suchen alle Notizen, die zu dieser Entity gehören
+                const myPages = pagesForType.filter(p =>
+                    (config.idField === 'id' && p.entityId === entity.id) ||
+                    (config.idField === 'uuid' && p.entityUuid === entity.id)
+                )
+
+                myPages.forEach(page => {
+                    // Nur Root-Notizen der Entity verschieben.
+                    // Sub-Pages bleiben wo sie sind (parentId zeigt ja schon auf die richtige Seite)
+                    if (!page.parentId) {
+                        // Wir modifizieren das Objekt für die Response (nicht in der DB!)
+                        // Wir müssen es clonen, sonst ändern wir es für alle Referenzen
+                        const pageClone = { ...page }
+                        pageClone.parentId = entityNodeId
+                        virtualNodes.push(pageClone)
+                    } else {
+                        // Sub-Pages einfach so hinzufügen
+                        virtualNodes.push(page)
+                    }
+                })
+            })
+        }))
+
+        // Ergebnis: Normale Seiten + Virtuelle Struktur
+        return [...standardPages, ...virtualNodes]
     })
 
     // ---------------------------------------------------------
     // 2. GET /wiki/:id
-    // Lädt EINEN Eintrag komplett MIT Content (für den Editor)
+    // Lädt EINEN Eintrag komplett MIT Content
     // ---------------------------------------------------------
     server.get<{ Params: { id: string } }>("/wiki/:id", async (req, reply) => {
         const user = req.user
         const { id } = req.params
 
-        // Drizzle Query API nutzen für Relation (optional Author laden)
         const page = await server.db.query.wikiPages.findFirst({
             where: and(
                 eq(wikiPages.id, id),
@@ -88,18 +239,12 @@ export default async function wikiRoutes (server: FastifyInstance) {
             ),
             with: {
                 author: {
-                    columns: {
+                    columns: { id: true } // Name falls vorhanden
-                        id: true,
-                        // name: true, // Falls im authUsers schema vorhanden
-                    }
                 }
             }
         })
 
-        if (!page) {
+        if (!page) return reply.code(404).send({ error: "Page not found" })
-            return reply.code(404).send({ error: "Page not found" })
-        }
-
         return page
     })
 
@@ -111,10 +256,8 @@ export default async function wikiRoutes (server: FastifyInstance) {
         const user = req.user
         const body = req.body
 
-        // Simple Validierung
         if (!body.title) return reply.code(400).send({ error: "Title required" })
 
-        // Split Logik für Polymorphie
         const hasEntity = !!body.entityType
 
         const [newPage] = await server.db
@@ -122,10 +265,8 @@ export default async function wikiRoutes (server: FastifyInstance) {
             .values({
                 tenantId: user.tenant_id,
                 title: body.title,
-                parentId: body.parentId || null, // undefined abfangen
+                parentId: body.parentId || null,
                 isFolder: body.isFolder ?? false,
-
-                // Polymorphe Zuweisung
                 entityType: hasEntity ? body.entityType : null,
                 entityId: hasEntity && body.entityId ? body.entityId : null,
                 entityUuid: hasEntity && body.entityUuid ? body.entityUuid : null,
@@ -141,7 +282,7 @@ export default async function wikiRoutes (server: FastifyInstance) {
 
     // ---------------------------------------------------------
     // 4. PATCH /wiki/:id
-    // Universal-Update (Inhalt, Titel, Verschieben, Sortieren)
+    // Universal-Update
     // ---------------------------------------------------------
     server.patch<{ Params: { id: string }; Body: WikiUpdateBody }>(
         "/wiki/:id",
@@ -150,21 +291,19 @@ export default async function wikiRoutes (server: FastifyInstance) {
             const { id } = req.params
             const body = req.body
 
-            // 1. Prüfen ob Eintrag existiert & Tenant gehört
             const existing = await server.db.query.wikiPages.findFirst({
                 where: and(eq(wikiPages.id, id), eq(wikiPages.tenantId, user.tenant_id)),
                 columns: { id: true }
             })
 
-            if(!existing) return reply.code(404).send({ error: "Not found" })
+            if (!existing) return reply.code(404).send({ error: "Not found" })
 
-            // 2. Update durchführen
             const [updatedPage] = await server.db
                 .update(wikiPages)
                 .set({
-                    title: body.title,       // update title if defined
+                    title: body.title,
-                    content: body.content,   // update content if defined
+                    content: body.content,
-                    parentId: body.parentId, // update parent (move) if defined
+                    parentId: body.parentId,
                     sortOrder: body.sortOrder,
                     isFolder: body.isFolder,
                     updatedAt: new Date(),
@@ -180,7 +319,7 @@ export default async function wikiRoutes (server: FastifyInstance) {
 
     // ---------------------------------------------------------
     // 5. DELETE /wiki/:id
-    // Löscht Eintrag (DB Cascade erledigt die Kinder)
+    // Löscht Eintrag
     // ---------------------------------------------------------
     server.delete<{ Params: { id: string } }>("/wiki/:id", async (req, reply) => {
         const user = req.user
@@ -190,13 +329,11 @@ export default async function wikiRoutes (server: FastifyInstance) {
             .delete(wikiPages)
             .where(and(
                 eq(wikiPages.id, id),
-                eq(wikiPages.tenantId, user.tenant_id) // WICHTIG: Security
+                eq(wikiPages.tenantId, user.tenant_id)
             ))
             .returning({ id: wikiPages.id })
 
-        if (result.length === 0) {
+        if (result.length === 0) return reply.code(404).send({ error: "Not found" })
-            return reply.code(404).send({ error: "Not found or not authorized" })
-        }
 
         return { success: true, deletedId: result[0].id }
     })

frontend/components/EntityShow.vue

@@ -1,6 +1,7 @@
 <script setup>
 
 import EntityShowSubTimes from "~/components/EntityShowSubTimes.vue";
+import WikiEntityWidget from "~/components/wiki/WikiEntityWidget.vue";
 
 const props = defineProps({
   type: {
@@ -288,6 +289,13 @@ const changePinned = async () => {
           v-else-if="tab.label === 'Zeiten'"
           :platform="platform"
       />
+      <div v-else-if="tab.label === 'Wiki'" class="h-[600px] w-full overflow-hidden">
+        <WikiEntityWidget
+            :entity-type="type"
+            :entity-id="typeof props.item.id === 'number' ? props.item.id : undefined"
+            :entity-uuid="typeof props.item.id === 'string' ? props.item.id : undefined"
+        />
+      </div>
       <EntityShowSub
           :item="props.item"
           :query-string-data="getAvailableQueryStringData()"

frontend/components/wiki/TreeItem.vue

@@ -3,7 +3,10 @@
 
     <div
         class="group flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors mb-0.5 relative pr-8"
-        :class="[isActive ? 'bg-primary-50 dark:bg-primary-900/10 text-primary-600 dark:text-primary-400 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-800']"
+        :class="[
+            isActive ? 'bg-primary-50 dark:bg-primary-900/10 text-primary-600 dark:text-primary-400 font-medium' : 'hover:bg-gray-100 dark:hover:bg-gray-800',
+            item.isVirtual ? 'opacity-90' : ''
+        ]"
         :style="{ paddingLeft: `${indent}rem` }"
         @click.stop="handleClick"
     >
@@ -17,20 +20,42 @@
       </button>
       <span v-else class="w-4"></span>
 
-      <span class="text-gray-400 shrink-0 flex items-center">
+      <span class="shrink-0 flex items-center">
-        <UIcon v-if="item.isFolder" name="i-heroicons-folder-solid" class="w-4 h-4 text-yellow-400" />
+        <UIcon
-        <UIcon v-else name="i-heroicons-document-text" class="w-4 h-4" />
+            v-if="item.isFolder && item.isVirtual"
+            name="i-heroicons-folder"
+            class="w-4 h-4 text-primary-500 dark:text-primary-400"
+        />
+        <UIcon
+            v-else-if="item.isFolder"
+            name="i-heroicons-folder-solid"
+            class="w-4 h-4 text-yellow-400"
+        />
+        <UIcon
+            v-else
+            name="i-heroicons-document-text"
+            class="w-4 h-4 text-gray-400"
+        />
       </span>
 
-      <span class="truncate flex-1">{{ item.title }}</span>
+      <span class="truncate flex-1" :class="{'italic text-gray-500': item.isVirtual && !item.parentId}">
+        {{ item.title }}
+      </span>
 
-      <div class="absolute right-1 top-1 opacity-0 group-hover:opacity-100 transition-opacity" :class="{ '!opacity-100': showMenu }">
+      <div v-if="!item.isVirtual" class="absolute right-1 top-1 opacity-0 group-hover:opacity-100 transition-opacity" :class="{ '!opacity-100': showMenu }">
         <button @click.stop="showMenu = !showMenu" class="p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-500">
           <UIcon name="i-heroicons-ellipsis-horizontal" class="w-4 h-4" />
         </button>
       </div>
 
+      <div v-else class="absolute right-1 top-1 opacity-0 group-hover:opacity-50 transition-opacity flex items-center justify-center pt-0.5 pr-0.5">
+        <UTooltip text="Automatisch generiert">
+          <UIcon name="i-heroicons-lock-closed" class="w-3 h-3 text-gray-300" />
+        </UTooltip>
+      </div>
+
       <div v-if="showMenu" v-on-click-outside="() => showMenu = false" class="absolute right-0 top-8 z-50 w-40 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-100 dark:border-gray-700 py-1 text-xs text-gray-700 dark:text-gray-200 animate-in fade-in slide-in-from-top-1 duration-100">
+
         <template v-if="item.isFolder">
           <button @click.stop="triggerCreate(false)" class="w-full text-left px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-2">
             <UIcon name="i-heroicons-plus" class="w-3 h-3" /> Neue Seite
@@ -40,6 +65,7 @@
           </button>
           <div class="h-px bg-gray-100 dark:bg-gray-700 my-1"></div>
         </template>
+
         <button @click.stop="triggerDelete" class="w-full text-left px-3 py-1.5 hover:bg-red-50 dark:hover:bg-red-900/30 text-red-600 flex items-center gap-2">
           <UIcon name="i-heroicons-trash" class="w-3 h-3" /> Löschen
         </button>
@@ -60,7 +86,6 @@ import type { WikiPageItem } from '~/composables/useWikiTree'
 const props = defineProps<{ item: WikiPageItem; depth?: number }>()
 const router = useRouter()
 const route = useRoute()
-// NEU: searchQuery importieren für Auto-Expand
 const { searchQuery } = useWikiTree()
 
 const openWikiAction = inject('openWikiAction') as (action: 'create' | 'delete', contextItem: WikiPageItem | null, isFolder?: boolean) => void
@@ -71,12 +96,12 @@ const isOpen = ref(false)
 const showMenu = ref(false)
 const isActive = computed(() => route.params.id === props.item.id)
 
-// Auto-Open Logic 1: Aktive Seite
+// Auto-Open: Active Page
 watch(() => route.params.id, (newId) => {
   if (props.item.isFolder && hasActiveChild(props.item, newId as string)) isOpen.value = true
 }, { immediate: true })
 
-// NEU: Auto-Open Logic 2: Suche aktiv -> Alles aufklappen
+// Auto-Open: Search
 watch(searchQuery, (newVal) => {
   if (newVal.trim().length > 0 && props.item.isFolder) {
     isOpen.value = true
@@ -89,15 +114,30 @@ function hasActiveChild(node: WikiPageItem, targetId: string): boolean {
 }
 
 function handleClick() {
-  props.item.isFolder ? (isOpen.value = !isOpen.value) : router.push(`/wiki/${props.item.id}`)
+  if (props.item.isFolder) {
+    isOpen.value = !isOpen.value
+  } else {
+    // Falls es eine virtuelle Seite ist (Read only Entity View?), leiten wir trotzdem weiter
+    // oder verhindern es, je nach Wunsch. Aktuell erlauben wir Navigation:
+    router.push(`/wiki/${props.item.id}`)
+  }
 }
+
 function toggleFolder() { isOpen.value = !isOpen.value }
+
 function triggerCreate(isFolder: boolean) {
+  // Sicherheitscheck: Virtuelle Ordner dürfen nichts erstellen
+  if (props.item.isVirtual) return
+
   showMenu.value = false
   isOpen.value = true
   openWikiAction('create', props.item, isFolder)
 }
+
 function triggerDelete() {
+  // Sicherheitscheck
+  if (props.item.isVirtual) return
+
   showMenu.value = false
   openWikiAction('delete', props.item)
 }

frontend/components/wiki/WikiEditor.vue

@@ -4,26 +4,26 @@
     <div v-if="editor" class="border-b border-gray-100 dark:border-gray-800 px-4 py-2 flex flex-wrap gap-1 items-center sticky top-0 bg-white dark:bg-gray-900 z-20 shadow-sm select-none">
 
       <div class="flex gap-0.5 border-r border-gray-200 dark:border-gray-700 pr-2 mr-2">
-        <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }" class="toolbar-btn font-bold">B</button>
+        <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">I</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">S</button>
+        <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }" class="toolbar-btn line-through" title="Durchgestrichen">S</button>
-        <button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }" class="toolbar-btn text-yellow-500 font-bold">M</button>
+        <button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }" class="toolbar-btn text-yellow-500 font-bold" title="Markieren">M</button>
       </div>
 
       <div class="flex gap-0.5 border-r border-gray-200 dark:border-gray-700 pr-2 mr-2">
-        <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }" class="toolbar-btn">H1</button>
+        <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">H2</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>
-        <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }" class="toolbar-btn font-mono text-xs">&lt;/&gt;</button>
+        <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }" class="toolbar-btn font-mono text-xs" title="Code Block">&lt;/&gt;</button>
       </div>
 
       <div class="flex gap-0.5 border-r border-gray-200 dark:border-gray-700 pr-2 mr-2">
-        <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }" class="toolbar-btn">•</button>
+        <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }" class="toolbar-btn" title="Liste">•</button>
-        <button @click="editor.chain().focus().toggleTaskList().run()" :class="{ 'is-active': editor.isActive('taskList') }" class="toolbar-btn">☑</button>
+        <button @click="editor.chain().focus().toggleTaskList().run()" :class="{ 'is-active': editor.isActive('taskList') }" class="toolbar-btn" title="Aufgabenliste">☑</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">▦</button>
+        <button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()" class="toolbar-btn" title="Tabelle">▦</button>
-        <button @click="addVideo" class="toolbar-btn text-red-600">
+        <button @click="addVideo" class="toolbar-btn text-red-600" title="YouTube Video">
           <UIcon name="i-heroicons-video-camera" class="w-4 h-4" />
         </button>
       </div>
@@ -71,19 +71,14 @@
 
 <script setup lang="ts">
 import { watch } from 'vue'
+import { useRouter } from '#app'
 import { useEditor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-3'
 // @ts-ignore
 import { BubbleMenu, FloatingMenu } from '@tiptap/vue-3/menus'
 
+// Tiptap Extensions
 import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
-import CodeBlock from '@tiptap/extension-code-block'
-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'
-import BubbleMenuExtension from '@tiptap/extension-bubble-menu'
-import FloatingMenuExtension from '@tiptap/extension-floating-menu'
 import Link from '@tiptap/extension-link'
 import TaskList from '@tiptap/extension-task-list'
 import TaskItem from '@tiptap/extension-task-item'
@@ -92,18 +87,39 @@ import Highlight from '@tiptap/extension-highlight'
 import Youtube from '@tiptap/extension-youtube'
 import Typography from '@tiptap/extension-typography'
 import CharacterCount from '@tiptap/extension-character-count'
+import CodeBlock from '@tiptap/extension-code-block'
+
+// -----------------------------------------------------------
+// WICHTIGE ÄNDERUNG: NUR Table, KEINE Row/Cell/Header Imports
+// -----------------------------------------------------------
+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'
+
+import BubbleMenuExtension from '@tiptap/extension-bubble-menu'
+import FloatingMenuExtension from '@tiptap/extension-floating-menu'
+import Mention from '@tiptap/extension-mention'
 
-// IMPORT DER NEUEN KOMPONENTE
 import TiptapTaskItem from './TiptapTaskItem.vue'
+import wikiSuggestion from '~/composables/useWikiSuggestion'
 
 const props = defineProps<{ modelValue: any }>()
 const emit = defineEmits(['update:modelValue'])
+const router = useRouter()
+
+// Damit wir TaskItem nicht ständig neu initialisieren
+const CustomTaskItem = TaskItem.extend({
+  addNodeView() {
+    return VueNodeViewRenderer(TiptapTaskItem)
+  },
+})
 
 const editor = useEditor({
   content: props.modelValue,
   extensions: [
     StarterKit.configure({ codeBlock: false }),
-    Placeholder.configure({ placeholder: 'Tippe "/" oder schreibe los...' }),
+    Placeholder.configure({ placeholder: 'Tippe "/" für Befehle oder "#" für Seiten...' }),
 
     BubbleMenuExtension.configure({ shouldShow: ({ editor, from, to }) => !editor.state.selection.empty && (to - from > 0) }),
     FloatingMenuExtension,
@@ -112,35 +128,63 @@ const editor = useEditor({
     Image, Highlight, Typography, CharacterCount, CodeBlock,
     Youtube.configure({ width: 640, height: 480 }),
 
-    Table.configure({ resizable: true }), TableRow, TableHeader, TableCell,
+    // -----------------------------------------------------------
+    // WICHTIGE ÄNDERUNG: Nur Table.configure()
+    // TableRow, TableHeader, TableCell wurden HIER ENTFERNT
+    // -----------------------------------------------------------
+    Table.configure({ resizable: true }),
+    TableRow,
+    TableHeader,
+    TableCell,
 
-    // TASK LIST KONFIGURATION
+    // TASK LIST
     TaskList,
-    TaskItem.configure({
+    CustomTaskItem.configure({
       nested: true,
-    }).extend({
+    }),
-      // HIER SAGEN WIR TIPTAP: BENUTZE UNSERE VUE KOMPONENTE
+
-      addNodeView() {
+    // INTERNAL LINKING
-        return VueNodeViewRenderer(TiptapTaskItem)
+    Mention.configure({
+      HTMLAttributes: {
+        class: 'wiki-mention',
       },
+      suggestion: {
+        ...wikiSuggestion,
+        char: '#'
+      },
+
     }),
   ],
   editorProps: {
     attributes: {
       class: 'min-h-[500px] pb-40',
     },
+    handleClick: (view, pos, event) => {
+      const target = event.target as HTMLElement
+      if (target.closest('.wiki-mention')) {
+        const id = target.getAttribute('data-id')
+        if (id) {
+          router.push(`/wiki/${id}`)
+          return true
+        }
+      }
+      return false
+    }
   },
   onUpdate: ({ editor }) => {
     emit('update:modelValue', editor.getJSON())
   },
 })
 
+// Sync Model -> Editor
 watch(() => props.modelValue, (val) => {
   if (editor.value && JSON.stringify(val) !== JSON.stringify(editor.value.getJSON())) {
+    //@ts-ignore
     editor.value.commands.setContent(val, false)
   }
 })
 
+// ACTIONS
 const setLink = () => {
   if (!editor.value) return
   const previousUrl = editor.value.getAttributes('link').href
@@ -174,22 +218,38 @@ const addVideo = () => {
   @apply bg-gray-200 dark:bg-gray-600 text-black dark:text-white;
 }
 
-/* EDITOR STYLES */
+/* GLOBAL EDITOR STYLES */
 :deep(.prose) {
-  /* Cursor Fix */
   .ProseMirror {
     outline: none;
     caret-color: currentColor;
   }
 
-  /* LIST RESET: Wir müssen nur die UL resetten, die LI wird von Vue gerendert */
+  /* LIST RESET */
   ul[data-type="taskList"] {
     list-style: none;
     padding: 0;
     margin: 0;
   }
 
-  /* Table Fixes */
+  /* MENTION */
+  .wiki-mention {
+    /* Pill-Shape, grau/neutral statt knallig blau */
+    @apply bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 px-1.5 py-0.5 rounded-md text-sm font-medium no-underline inline-block mx-0.5 align-middle border border-gray-200 dark:border-gray-700;
+
+    box-decoration-break: clone;
+  }
+
+  .wiki-mention::before {
+    @apply text-gray-400 dark:text-gray-500 mr-0.5;
+  }
+
+  .wiki-mention:hover {
+    @apply bg-primary-50 dark:bg-primary-900/30 border-primary-200 dark:border-primary-800 text-primary-700 dark:text-primary-400;
+    cursor: pointer;
+  }
+
+  /* TABLE */
   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; }
   .dark th, .dark td { border-color: #374151; }
@@ -197,16 +257,16 @@ const addVideo = () => {
   .dark th { background-color: #1f2937; }
   .column-resize-handle { background-color: #3b82f6; width: 4px; }
 
-  /* Code Block */
+  /* CODE */
   pre { background: #0d1117; color: #c9d1d9; font-family: 'JetBrains Mono', monospace; padding: 0.75rem 1rem; border-radius: 0.5rem; margin: 1rem 0; overflow-x: auto; }
   code { color: inherit; padding: 0; background: none; font-size: 0.9rem; }
 
-  /* Images */
+  /* IMG */
   img { max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 1rem 0; }
 
-  /* Misc */
+  /* MISC */
+  p.is-editor-empty:first-child::before { color: #9ca3af; content: attr(data-placeholder); float: left; height: 0; pointer-events: none; }
   mark { background-color: #fef08a; padding: 0.1rem 0.2rem; border-radius: 0.2rem; }
   .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; }
 }
 </style>

frontend/components/wiki/WikiEntityWidget.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="flex h-full w-full min-h-[500px] border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900 shadow-sm relative isolate overflow-hidden">
+
+    <div
+        class="flex flex-col border-r border-gray-200 dark:border-gray-800 bg-gray-50/80 dark:bg-gray-900/50 transition-all duration-300"
+        :class="selectedPage ? 'w-64 hidden md:flex shrink-0' : 'w-full'"
+    >
+      <div class="flex items-center justify-between px-3 py-3 border-b border-gray-200 dark:border-gray-800 shrink-0">
+        <span class="text-xs font-bold text-gray-500 uppercase tracking-wider flex items-center gap-1">
+          <UIcon name="i-heroicons-list-bullet" class="w-3 h-3" />
+          Inhalte
+        </span>
+        <UTooltip text="Neue Notiz erstellen">
+          <UButton size="2xs" color="primary" variant="ghost" icon="i-heroicons-plus" @click="isCreateModalOpen = true" />
+        </UTooltip>
+      </div>
+
+      <div class="flex-1 overflow-y-auto p-2 space-y-1 custom-scrollbar">
+        <div v-if="loadingList" class="space-y-2 pt-2">
+          <USkeleton class="h-8 w-full" />
+          <USkeleton class="h-8 w-full" />
+        </div>
+
+        <template v-else-if="pages.length">
+          <div
+              v-for="page in pages"
+              :key="page.id"
+              class="flex items-center gap-2 px-2.5 py-2 rounded-md cursor-pointer text-sm transition-all border border-transparent"
+              :class="selectedPage?.id === page.id ? 'bg-white dark:bg-gray-800 text-primary-600 shadow-sm border-gray-200 dark:border-gray-700 font-medium' : 'text-gray-600 hover:bg-white dark:hover:bg-gray-800 hover:shadow-sm'"
+              @click="selectPage(page.id)"
+          >
+            <UIcon :name="page.isFolder ? 'i-heroicons-folder' : 'i-heroicons-document-text'" class="w-4 h-4 shrink-0" />
+            <span class="truncate flex-1">{{ page.title }}</span>
+          </div>
+        </template>
+
+        <div v-else class="flex flex-col items-center justify-center py-12 px-4 text-center">
+          <p class="text-xs text-gray-500">Keine Notizen vorhanden.</p>
+          <UButton variant="link" size="xs" color="primary" @click="isCreateModalOpen = true" class="mt-1">Erstellen</UButton>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex-1 flex flex-col bg-white dark:bg-gray-900 h-full relative min-w-0 w-full overflow-hidden">
+
+      <div v-if="selectedPage" class="flex flex-col h-full w-full">
+        <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100 dark:border-gray-800 z-10 shrink-0 bg-white dark:bg-gray-900">
+          <div class="flex items-center gap-2 flex-1 min-w-0">
+            <UButton icon="i-heroicons-arrow-left" variant="ghost" color="gray" class="md:hidden shrink-0" @click="selectedPage = null" />
+            <input
+                v-model="selectedPage.title"
+                @input="onInputTitle"
+                class="bg-transparent font-semibold text-gray-900 dark:text-white focus:outline-none w-full truncate"
+                placeholder="Titel..."
+            />
+          </div>
+          <div class="flex items-center gap-2 text-xs text-gray-400 shrink-0 ml-2">
+            <span class="hidden sm:inline">{{ isSaving ? 'Speichert...' : 'Gespeichert' }}</span>
+            <UButton icon="i-heroicons-trash" color="gray" variant="ghost" size="xs" @click="deleteCurrentPage"/>
+          </div>
+        </div>
+
+        <div class="flex-1 overflow-hidden relative w-full">
+          <div v-if="loadingContent" class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-900/80 z-20">
+            <UIcon name="i-heroicons-arrow-path" class="w-8 h-8 animate-spin text-primary-500" />
+          </div>
+
+          <WikiEditor
+              v-model="selectedPage.content"
+              class="h-full w-full"
+              :page-id="selectedPage.id"
+          />
+        </div>
+      </div>
+
+      <div v-else class="hidden md:flex flex-1 flex-col items-center justify-center w-full h-full bg-gray-50/30 dark:bg-gray-900 p-6 text-center">
+
+        <div class="bg-white dark:bg-gray-800 p-4 rounded-full shadow-sm ring-1 ring-gray-100 dark:ring-gray-700 mb-4">
+          <UIcon name="i-heroicons-book-open" class="w-10 h-10 text-primary-200 dark:text-primary-800" />
+        </div>
+
+        <h3 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
+          Wiki & Dokumentation
+        </h3>
+
+        <p class="text-sm text-gray-500 dark:text-gray-400 max-w-xs mx-auto mb-6">
+          Wähle links eine Notiz aus oder erstelle einen neuen Eintrag für diesen Datensatz.
+        </p>
+
+        <UButton
+            icon="i-heroicons-plus"
+            color="primary"
+            @click="isCreateModalOpen = true"
+        >
+          Neue Seite erstellen
+        </UButton>
+
+      </div>
+    </div>
+
+    <UModal v-model="isCreateModalOpen">
+      <div class="p-5">
+        <h3 class="font-bold mb-4">Neue Seite</h3>
+        <form @submit.prevent="createPage">
+          <UInput v-model="newTitle" placeholder="Titel..." autofocus />
+          <div class="mt-4 flex justify-end gap-2">
+            <UButton color="gray" variant="ghost" @click="isCreateModalOpen = false">Abbrechen</UButton>
+            <UButton type="submit" color="primary" :loading="isCreating">Erstellen</UButton>
+          </div>
+        </form>
+      </div>
+    </UModal>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import WikiEditor from '~/components/wiki/WikiEditor.vue'
+
+const props = defineProps<{
+  entityType: string
+  entityId?: number | null
+  entityUuid?: string | null
+}>()
+
+const { $api } = useNuxtApp()
+const toast = useToast()
+
+const loadingList = ref(false)
+const loadingContent = ref(false)
+const isCreateModalOpen = ref(false)
+const isCreating = ref(false)
+const isSaving = ref(false)
+const pages = ref<any[]>([])
+const selectedPage = ref<any>(null)
+const newTitle = ref('')
+let saveTimeout: any = null
+
+const getParams = () => {
+  const p: any = { entityType: props.entityType }
+  if (props.entityId) p.entityId = props.entityId
+  else if (props.entityUuid) p.entityUuid = props.entityUuid
+  return p
+}
+
+async function fetchList() {
+  loadingList.value = true
+  try {
+    const data = await $api('/api/wiki/tree', { method: 'GET', params: getParams() })
+    pages.value = data
+  } catch (e) {
+    console.error("Fetch Error:", e)
+  } finally {
+    loadingList.value = false
+  }
+}
+
+async function selectPage(id: string) {
+  if (selectedPage.value?.id === id) return
+  loadingContent.value = true
+  try {
+    const data = await $api(`/api/wiki/${id}`, { method: 'GET' })
+    selectedPage.value = data
+  } catch (e) {
+    toast.add({ title: 'Fehler beim Laden', color: 'red' })
+  } finally {
+    loadingContent.value = false
+  }
+}
+
+function triggerSave() {
+  if (saveTimeout) clearTimeout(saveTimeout)
+  isSaving.value = true
+  saveTimeout = setTimeout(async () => {
+    if (!selectedPage.value) return
+    try {
+      await $api(`/api/wiki/${selectedPage.value.id}`, {
+        method: 'PATCH',
+        body: {
+          title: selectedPage.value.title,
+          content: selectedPage.value.content
+        }
+      })
+      const item = pages.value.find(p => p.id === selectedPage.value.id)
+      if (item) item.title = selectedPage.value.title
+    } catch (e) {
+      console.error(e)
+    } finally {
+      isSaving.value = false
+    }
+  }, 1000)
+}
+
+function onInputTitle() {
+  triggerSave()
+}
+
+watch(() => selectedPage.value?.content, (newVal, oldVal) => {
+  if (newVal && oldVal && !loadingContent.value) triggerSave()
+}, { deep: true })
+
+async function createPage() {
+  if (!newTitle.value) return
+  isCreating.value = true
+  try {
+    const res = await $api('/api/wiki', {
+      method: 'POST',
+      body: { title: newTitle.value, parentId: null, isFolder: false, ...getParams() }
+    })
+    await fetchList()
+    newTitle.value = ''
+    isCreateModalOpen.value = false
+    await selectPage(res.id)
+  } catch (e) {
+    console.error(e)
+  } finally {
+    isCreating.value = false
+  }
+}
+
+async function deleteCurrentPage() {
+  if(!confirm('Löschen?')) return
+  await $api(`/api/wiki/${selectedPage.value.id}`, { method: 'DELETE' })
+  selectedPage.value = null
+  fetchList()
+}
+
+onMounted(fetchList)
+watch(() => [props.entityId, props.entityUuid], fetchList)
+</script>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar { width: 4px; }
+.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 4px; }
+</style>

frontend/components/wiki/WikiPageList.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl overflow-hidden min-w-[12rem] flex flex-col p-1 gap-0.5">
+    <template v-if="items.length">
+      <button
+          v-for="(item, index) in items"
+          :key="item.id"
+          class="flex items-center gap-2 px-2 py-1.5 text-sm rounded text-left transition-colors w-full"
+          :class="{ 'bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-400': index === selectedIndex, 'hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200': index !== selectedIndex }"
+          @click="selectItem(index)"
+      >
+        <UIcon :name="item.isFolder ? 'i-heroicons-folder' : 'i-heroicons-document-text'" class="w-4 h-4 text-gray-400" />
+        <span class="truncate">{{ item.title }}</span>
+      </button>
+    </template>
+    <div v-else class="px-3 py-2 text-xs text-gray-400 text-center">
+      Keine Seite gefunden
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  items: { type: Array, required: true },
+  command: { type: Function, required: true },
+})
+
+const selectedIndex = ref(0)
+
+// Wenn sich die Liste ändert, Reset Selection
+watch(() => props.items, () => { selectedIndex.value = 0 })
+
+function selectItem(index: number) {
+  const item = props.items[index]
+  if (item) props.command({ id: item.id, label: item.title })
+}
+
+function onKeyDown({ event }: { event: KeyboardEvent }) {
+  if (event.key === 'ArrowUp') {
+    selectedIndex.value = (selectedIndex.value + props.items.length - 1) % props.items.length
+    return true
+  }
+  if (event.key === 'ArrowDown') {
+    selectedIndex.value = (selectedIndex.value + 1) % props.items.length
+    return true
+  }
+  if (event.key === 'Enter') {
+    selectItem(selectedIndex.value)
+    return true
+  }
+  return false
+}
+
+// Expose für Tiptap Render Logic
+defineExpose({ onKeyDown })
+</script>

frontend/composables/useWikiSuggestion.ts

@@ -0,0 +1,65 @@
+import { VueRenderer } from '@tiptap/vue-3'
+import tippy from 'tippy.js'
+import WikiPageList from '~/components/wiki/WikiPageList.vue'
+
+// Wir brauchen Zugriff auf die rohen Items aus useWikiTree
+// Da wir hier ausserhalb von setup() sind, müssen wir den State direkt holen oder übergeben.
+// Einfacher: Wir nutzen useNuxtApp() oder übergeben die Items in der Config.
+
+export default {
+    items: ({ query }: { query: string }) => {
+        // 1. Zugriff auf unsere Wiki Items
+        const { items } = useWikiTree()
+
+        // 2. Filtern
+        const allItems = items.value || []
+        return allItems
+            .filter(item => item.title.toLowerCase().includes(query.toLowerCase()))
+            .slice(0, 10) // Max 10 Vorschläge
+    },
+
+    render: () => {
+        let component: any
+        let popup: any
+
+        return {
+            onStart: (props: any) => {
+                component = new VueRenderer(WikiPageList, {
+                    props,
+                    editor: props.editor,
+                })
+
+                if (!props.clientRect) return
+
+                popup = tippy('body', {
+                    getReferenceClientRect: props.clientRect,
+                    appendTo: () => document.body,
+                    content: component.element,
+                    showOnCreate: true,
+                    interactive: true,
+                    trigger: 'manual',
+                    placement: 'bottom-start',
+                })
+            },
+
+            onUpdate(props: any) {
+                component.updateProps(props)
+                if (!props.clientRect) return
+                popup[0].setProps({ getReferenceClientRect: props.clientRect })
+            },
+
+            onKeyDown(props: any) {
+                if (props.event.key === 'Escape') {
+                    popup[0].hide()
+                    return true
+                }
+                return component.ref?.onKeyDown(props)
+            },
+
+            onExit() {
+                popup[0].destroy()
+                component.destroy()
+            },
+        }
+    },
+}

frontend/nuxt.config.ts

@@ -7,7 +7,7 @@ export default defineNuxtConfig({
         }
     },
 
-    modules: ['@pinia/nuxt', '@nuxt/ui', '@nuxtjs/supabase', "nuxt-editorjs", '@nuxtjs/fontaine', 'nuxt-viewport', 'nuxt-tiptap-editor', '@nuxtjs/leaflet', '@vueuse/nuxt'],
+    modules: ['@pinia/nuxt', '@nuxt/ui', '@nuxtjs/supabase', "nuxt-editorjs", '@nuxtjs/fontaine', 'nuxt-viewport', '@nuxtjs/leaflet', '@vueuse/nuxt'],
 
     ssr: false,
 
@@ -41,9 +41,42 @@ export default defineNuxtConfig({
     },
 
     vite: {
+        resolve: {
+            dedupe: [
+                'vue',
+                '@tiptap/vue-3',
+                'prosemirror-model',
+                'prosemirror-view',
+                'prosemirror-state',
+                'prosemirror-commands',
+                'prosemirror-schema-list',
+                'prosemirror-transform',
+                'prosemirror-history',
+                'prosemirror-gapcursor',
+                'prosemirror-dropcursor',
+                'prosemirror-tables'
+            ]
+        },
         optimizeDeps: {
-            include: ["@editorjs/editorjs", "dayjs",'@tiptap/vue-3','@tiptap/extension-code-block-lowlight',
+            include: [
-                'lowlight',],
+                "@editorjs/editorjs",
+                "dayjs",
+                '@tiptap/vue-3',
+                '@tiptap/extension-code-block-lowlight',
+                'lowlight',
+                'vue',
+                '@tiptap/extension-task-item',
+                '@tiptap/extension-task-list',
+                '@tiptap/extension-table',
+                '@tiptap/extension-mention',
+                'prosemirror-model',
+                'prosemirror-view',
+                'prosemirror-state',
+                'prosemirror-commands',
+                'prosemirror-transform',
+                'tippy.js',
+                'prosemirror-tables',
+            ],
         },
     },
 
@@ -55,11 +88,6 @@ export default defineNuxtConfig({
         preference: 'system'
     },
 
-
-    tiptap: {
-        prefix: "Tiptap"
-    },
-
     runtimeConfig: {
 
         public: {

frontend/package.json

@@ -16,7 +16,6 @@
     "@vueuse/core": "^14.1.0",
     "@vueuse/nuxt": "^14.1.0",
     "nuxt": "^3.14.1592",
-    "nuxt-tiptap-editor": "^1.2.0",
     "vue": "^3.5.13",
     "vue-router": "^4.2.5"
   },
@@ -53,6 +52,7 @@
     "@tiptap/extension-highlight": "^3.17.1",
     "@tiptap/extension-image": "^3.17.1",
     "@tiptap/extension-link": "^3.17.1",
+    "@tiptap/extension-mention": "^3.17.1",
     "@tiptap/extension-placeholder": "^3.17.1",
     "@tiptap/extension-table": "^3.17.1",
     "@tiptap/extension-table-cell": "^3.17.1",
@@ -95,6 +95,7 @@
     "sass": "^1.69.7",
     "socket.io-client": "^4.7.2",
     "tailwindcss-safe-area-capacitor": "^0.5.1",
+    "tippy.js": "^6.3.7",
     "uuid": "^11.0.3",
     "uuidv4": "^6.2.13",
     "v-calendar": "^3.1.2",

frontend/stores/data.js

@@ -155,7 +155,7 @@ export const useDataStore = defineStore('data', () => {
                 "Allgemeines",
                 "Zuweisungen"
             ],
-            showTabs: [{label: 'Informationen'}]
+            showTabs: [{label: 'Informationen'},{label: 'Wiki'}]
         },
         customers: {
             isArchivable: true,
@@ -417,7 +417,7 @@ export const useDataStore = defineStore('data', () => {
                     inputColumn: "Allgemeines"
                 },*/
             ],
-            showTabs: [{label: 'Informationen'},{label: 'Ansprechpartner'},{label: 'Dateien'},{label: 'Ausgangsbelege'},{label: 'Projekte'},{label: 'Objekte'},{label: 'Termine'},{label: 'Verträge'}]
+            showTabs: [{label: 'Informationen'},{label: 'Ansprechpartner'},{label: 'Dateien'},{label: 'Ausgangsbelege'},{label: 'Projekte'},{label: 'Objekte'},{label: 'Termine'},{label: 'Verträge'},{label: 'Wiki'}]
         },
         contacts: {
             isArchivable: true,
@@ -539,6 +539,8 @@ export const useDataStore = defineStore('data', () => {
             showTabs:[
                 {
                     label: 'Informationen',
+                },{
+                    label: 'Wiki',
                 }
             ]
         },
@@ -710,7 +712,7 @@ export const useDataStore = defineStore('data', () => {
                     inputType: "textarea",
                 }
             ],
-            showTabs: [{label: 'Informationen'},{label: 'Dateien'}]
+            showTabs: [{label: 'Informationen'},{label: 'Dateien'},{label: 'Wiki'}]
         },
         absencerequests: {
             isArchivable: true,
@@ -857,6 +859,8 @@ export const useDataStore = defineStore('data', () => {
                 label: "Aufgaben"
             },{
                 label: "Dateien"
+            },{
+                label: "Wiki"
             }]
         },
         products: {
@@ -975,7 +979,9 @@ export const useDataStore = defineStore('data', () => {
             ],
             showTabs: [
                 {
-                    label: "Informationen"
+                    label: "Informationen",
+                },{
+                    label: "Wiki",
                 }
             ]
         },
@@ -1107,6 +1113,8 @@ export const useDataStore = defineStore('data', () => {
                     label: "Ausgangsbelege"
                 },{
                     label: "Termine"
+                },{
+                    label: "Wiki"
                 }/*,{
                     key: "timetracking",
                     label: "Zeiterfassung"
@@ -1219,6 +1227,8 @@ export const useDataStore = defineStore('data', () => {
                     label: 'Dateien',
                 }, {
                     label: 'Überprüfungen',
+                }, {
+                    label: 'Wiki',
                 }
             ]
         },
@@ -1368,6 +1378,8 @@ export const useDataStore = defineStore('data', () => {
                     label: 'Ansprechpartner',
                 }, {
                     label: 'Dateien',
+                }, {
+                    label: 'Wiki',
                 }
             ]
         },
@@ -1502,7 +1514,7 @@ export const useDataStore = defineStore('data', () => {
                     label: 'Informationen',
                 }, {
                     label: 'Dateien',
-                },{label: 'Inventarartikel'}
+                },{label: 'Inventarartikel'},{label: 'Wiki'}
             ]
         },
         users: {
@@ -1763,6 +1775,8 @@ export const useDataStore = defineStore('data', () => {
                     label: 'Informationen',
                 }, {
                     label: 'Dateien',
+                }, {
+                    label: 'Wiki',
                 }
             ]
         },
@@ -1830,6 +1844,8 @@ export const useDataStore = defineStore('data', () => {
             showTabs: [
                 {
                     label: 'Informationen',
+                },{
+                    label: 'Wiki',
                 }
             ]
         },
@@ -2028,6 +2044,8 @@ export const useDataStore = defineStore('data', () => {
             showTabs: [
                 {
                     label: 'Informationen',
+                },{
+                    label: 'Wiki',
                 }
             ]
         },
@@ -2077,6 +2095,8 @@ export const useDataStore = defineStore('data', () => {
             showTabs: [
                 {
                     label: 'Informationen',
+                },{
+                    label: 'Wiki',
                 }
             ]
         },
@@ -2200,7 +2220,8 @@ export const useDataStore = defineStore('data', () => {
             ],
             showTabs: [
                 {
-                    label: 'Informationen',}
+                    label: 'Informationen',},{
+                    label: 'Wiki',}
             ]
         },
         profiles: {
@@ -2268,6 +2289,8 @@ export const useDataStore = defineStore('data', () => {
             showTabs: [
                 {
                     label: 'Informationen',
+                },{
+                    label: 'Wiki',
                 }
             ]
         },
@@ -2308,6 +2331,8 @@ export const useDataStore = defineStore('data', () => {
             showTabs: [
                 {
                     label: 'Informationen',
+                },{
+                    label: 'Wiki',
                 }
             ]
         },
@@ -2536,7 +2561,9 @@ export const useDataStore = defineStore('data', () => {
                     inputColumn: "Allgemeines"
                 },*/
             ],
-            showTabs: [{label: 'Informationen'},{label: 'Buchungen'}]
+            showTabs: [{label: 'Informationen'},{label: 'Buchungen'},{
+                label: 'Wiki',
+            }]
         },
         bankaccounts: {
             label: "Bankkonten",