flfeders/FEDEO
2
1
Fork 0
Code Issues 63 Pull Requests Actions Packages Projects 21 Releases Wiki Activity

Added more text functions

Browse Source
This commit is contained in:
florianfederspiel
2026-01-26 21:11:16 +01:00
parent c87212d54a
commit ca2020b9c6
7 changed files with 335 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/components/MainNav.vue
View File

@@ -50,6 +50,11 @@ const links = computed(() => {
to: "/standardEntity/tasks", to: "/standardEntity/tasks",
icon: "i-heroicons-rectangle-stack" icon: "i-heroicons-rectangle-stack"
}] : [], }] : [],
...true ? [{
label: "Wiki",
to: "/wiki",
icon: "i-heroicons-book-open"
}] : [],
] ]
}, },
{ {

84
frontend/components/wiki/TreeItem.vue
View File

@@ -1,79 +1,74 @@
<template> <template>
<div class="select-none text-sm text-gray-700 relative"> <div class="select-none text-sm text-gray-700 dark:text-gray-200 relative">
<div <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="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 text-primary-700 font-medium' : 'hover:bg-gray-100']" :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']"
:style="{ paddingLeft: `${indent}rem` }" :style="{ paddingLeft: `${indent}rem` }"
@click.stop="handleClick" @click.stop="handleClick"
> >
<button <button
v-if="item.isFolder" v-if="item.isFolder"
class="h-4 w-4 flex items-center justify-center text-gray-400 hover:text-gray-600 transition-transform duration-200" class="h-4 w-4 flex items-center justify-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-transform duration-200"
:class="{ 'rotate-90': isOpen }" :class="{ 'rotate-90': isOpen }"
@click.stop="toggleFolder" @click.stop="toggleFolder"
> >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3 h-3"><path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /></svg> <UIcon name="i-heroicons-chevron-right-20-solid" class="w-3 h-3" />
</button> </button>
<span v-else class="w-4"></span> <span v-else class="w-4"></span>
<span class="text-gray-400 shrink-0"> <span class="text-gray-400 shrink-0 flex items-center">
<svg v-if="item.isFolder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 text-yellow-400"><path d="M3.75 3A1.75 1.75 0 002 4.75v3.26a3.235 3.235 0 011.75-.51h12.5c.644 0 1.245.188 1.75.51V6.75A1.75 1.75 0 0016.25 5h-4.836a.25.25 0 01-.177-.073L9.823 3.513A1.75 1.75 0 008.586 3H3.75zM3.75 9A1.75 1.75 0 002 10.75v4.5c0 .966.784 1.75 1.75 1.75h12.5A1.75 1.75 0 0018 15.25v-4.5A1.75 1.75 0 0016.25 9H3.75z" /></svg> <UIcon v-if="item.isFolder" name="i-heroicons-folder-solid" class="w-4 h-4 text-yellow-400" />
<svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M4.5 2A1.5 1.5 0 003 3.5v13A1.5 1.5 0 004.5 18h11a1.5 1.5 0 001.5-1.5V7.621a1.5 1.5 0 00-.44-1.06l-4.12-4.122A1.5 1.5 0 0011.378 2H4.5zm2.25 8.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5zm0 3a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z" clip-rule="evenodd" /></svg> <UIcon v-else name="i-heroicons-document-text" class="w-4 h-4" />
</span> </span>
<span class="truncate flex-1">{{ item.title }}</span> <span class="truncate flex-1">{{ item.title }}</span>
<div class="absolute right-1 top-1 opacity-0 group-hover:opacity-100 transition-opacity" :class="{ '!opacity-100': showMenu }"> <div class="absolute right-1 top-1 opacity-0 group-hover:opacity-100 transition-opacity" :class="{ '!opacity-100': showMenu }">
<button <button @click.stop="showMenu = !showMenu" class="p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-500">
@click.stop="showMenu = !showMenu" <UIcon name="i-heroicons-ellipsis-horizontal" class="w-4 h-4" />
class="p-0.5 rounded hover:bg-gray-200 text-gray-500"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4"><path d="M3 10a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM8.5 10a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM15.5 8.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" /></svg>
</button> </button>
</div> </div>
<div v-if="showMenu" v-on-click-outside="() => showMenu = false" class="absolute right-0 top-8 z-50 w-40 bg-white rounded-md shadow-lg border border-gray-100 py-1 text-xs text-gray-700 animate-in fade-in slide-in-from-top-1 duration-100"> <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"> <template v-if="item.isFolder">
<button @click.stop="createChild(false)" class="w-full text-left px-3 py-1.5 hover:bg-gray-50 flex items-center gap-2"> <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">
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg> <UIcon name="i-heroicons-plus" class="w-3 h-3" /> Neue Seite
Neue Seite
</button> </button>
<button @click.stop="createChild(true)" class="w-full text-left px-3 py-1.5 hover:bg-gray-50 flex items-center gap-2"> <button @click.stop="triggerCreate(true)" class="w-full text-left px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-2">
<svg class="w-3 h-3 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg> <UIcon name="i-heroicons-folder-plus" class="w-3 h-3 text-yellow-500" /> Neuer Ordner
Neuer Ordner
</button> </button>
<div class="h-px bg-gray-100 my-1"></div> <div class="h-px bg-gray-100 dark:bg-gray-700 my-1"></div>
</template> </template>
<button @click.stop="handleDelete" class="w-full text-left px-3 py-1.5 hover:bg-red-50 text-red-600 flex items-center gap-2"> <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">
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg> <UIcon name="i-heroicons-trash" class="w-3 h-3" /> Löschen
Löschen
</button> </button>
</div> </div>
</div> </div>
<div v-if="item.isFolder && isOpen"> <div v-if="item.isFolder && isOpen">
<TreeItem v-for="child in item.children" :key="child.id" :item="child" :depth="depth + 1" /> <WikiTreeItem v-for="child in item.children" :key="child.id" :item="child" :depth="depth + 1" />
<div v-if="!item.children?.length" class="text-xs text-gray-400 py-1 italic" :style="{ paddingLeft: `${indent + 1.8}rem` }">Leer</div> <div v-if="!item.children?.length" class="text-xs text-gray-400 py-1 italic" :style="{ paddingLeft: `${indent + 1.8}rem` }">Leer</div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { WikiPageItem } from '~/composables/useWikiTree'
import TreeItem from './TreeItem.vue'
// Simple Click Outside Directive (kannst du auch global registrieren)
import { vOnClickOutside } from '@vueuse/components' import { vOnClickOutside } from '@vueuse/components'
import type { WikiPageItem } from '~/composables/useWikiTree'
// Rekursiver Component Name (wichtig für Nuxt Auto-Import, oft automatisch 'WikiTreeItem')
// Falls Recursion Issues auftreten: defineOptions({ name: 'WikiTreeItem' })
const props = defineProps<{ item: WikiPageItem; depth?: number }>() const props = defineProps<{ item: WikiPageItem; depth?: number }>()
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
// Composable Actions holen // --- INJECT ---
const { createItem, deleteItem } = useWikiTree() // Wir holen uns die Funktion zum Öffnen des Modals von der Hauptseite
const openWikiAction = inject('openWikiAction') as (action: 'create' | 'delete', contextItem: WikiPageItem | null, isFolder?: boolean) => void
const depth = props.depth ?? 0 const depth = props.depth ?? 0
const indent = computed(() => 0.5 + (depth * 0.7)) const indent = computed(() => 0.5 + (depth * 0.7))
@@ -81,7 +76,7 @@ const isOpen = ref(false)
const showMenu = ref(false) const showMenu = ref(false)
const isActive = computed(() => route.params.id === props.item.id) const isActive = computed(() => route.params.id === props.item.id)
// Auto-Open Logic // Auto-Open Logic (Ordner öffnen, wenn Kind aktiv ist)
watch(() => route.params.id, (newId) => { watch(() => route.params.id, (newId) => {
if (props.item.isFolder && hasActiveChild(props.item, newId as string)) isOpen.value = true if (props.item.isFolder && hasActiveChild(props.item, newId as string)) isOpen.value = true
}, { immediate: true }) }, { immediate: true })
@@ -99,31 +94,14 @@ function toggleFolder() { isOpen.value = !isOpen.value }
// --- ACTIONS --- // --- ACTIONS ---
async function createChild(isFolder: boolean) { function triggerCreate(isFolder: boolean) {
showMenu.value = false showMenu.value = false
// Wir öffnen den Ordner automatisch, damit man das neue Item sieht isOpen.value = true // Ordner aufklappen
isOpen.value = true openWikiAction('create', props.item, isFolder)
const type = isFolder ? "Ordner" : "Seite"
const title = prompt(`Name für ${type}:`)
if (!title) return
const newItem = await createItem(title, props.item.id, isFolder)
// Wenn es eine Seite ist, direkt hin navigieren
if (newItem && !isFolder) {
// @ts-ignore
router.push(`/wiki/${newItem.id}`)
}
} }
async function handleDelete() { function triggerDelete() {
showMenu.value = false showMenu.value = false
const success = await deleteItem(props.item.id) openWikiAction('delete', props.item)
if (success && isActive.value) {
// Wenn wir die aktive Seite gelöscht haben, zurück zum Root
router.push('/wiki')
}
} }
</script> </script>

236
frontend/components/wiki/WikiEditor.vue
View File

@@ -11,25 +11,29 @@
</div> </div>
<div class="flex gap-0.5 border-r border-gray-200 pr-2 mr-2"> <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: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }" class="toolbar-btn" title="H1">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> <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" class="toolbar-btn" title="H2">H2</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>
<div class="flex gap-0.5 border-r border-gray-200 pr-2 mr-2"> <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().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" title="Checkliste">☑ Task</button> <button @click="editor.chain().focus().toggleTaskList().run()" :class="{ 'is-active': editor.isActive('taskList') }" class="toolbar-btn" title="Checkliste">☑</button>
</div> </div>
<div class="flex gap-0.5 items-center"> <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> <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" title="YouTube Video">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" /></svg>
</button>
<div v-if="editor.isActive('table')" class="flex gap-0.5 ml-2 pl-2 border-l border-gray-200 items-center"> <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 +">+Col</button> <button @click="editor.chain().focus().addColumnAfter().run()" class="toolbar-btn text-xs">+Col</button>
<button @click="editor.chain().focus().deleteColumn().run()" class="toolbar-btn text-xs text-red-400" title="Spalte -">-Col</button> <button @click="editor.chain().focus().deleteColumn().run()" class="toolbar-btn text-xs text-red-400">-Col</button>
<button @click="editor.chain().focus().addRowAfter().run()" class="toolbar-btn text-xs" title="Zeile +">+Row</button> <button @click="editor.chain().focus().addRowAfter().run()" class="toolbar-btn text-xs">+Row</button>
<button @click="editor.chain().focus().deleteRow().run()" class="toolbar-btn text-xs text-red-400" title="Zeile -">-Row</button> <button @click="editor.chain().focus().deleteRow().run()" class="toolbar-btn text-xs text-red-400">-Row</button>
<button @click="editor.chain().focus().mergeCells().run()" class="toolbar-btn text-xs" title="Verbinden">Merge</button> <button @click="editor.chain().focus().mergeCells().run()" class="toolbar-btn text-xs">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> <button @click="editor.chain().focus().deleteTable().run()" class="toolbar-btn text-red-500 hover:bg-red-50 ml-1">🗑</button>
</div> </div>
</div> </div>
</div> </div>
@@ -38,34 +42,41 @@
v-if="editor" v-if="editor"
:editor="editor" :editor="editor"
:tippy-options="{ duration: 200, placement: 'top-start', animation: 'scale' }" :tippy-options="{ duration: 200, placement: 'top-start', animation: 'scale' }"
class="bg-white border border-gray-200 text-gray-700 rounded-lg shadow-xl flex items-center p-1 gap-1 z-50 overflow-hidden" class="bg-white border border-gray-200 text-gray-700 rounded-lg shadow-xl flex items-center p-1 gap-1 z-50"
> >
<div class="flex items-center gap-0.5">
<button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }" class="bubble-btn font-bold">B</button> <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }" class="bubble-btn font-bold">B</button>
<button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }" class="bubble-btn italic">I</button> <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }" class="bubble-btn italic">I</button>
<button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }" class="bubble-btn line-through">S</button> <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }" class="bubble-btn line-through">S</button>
<button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }" class="bubble-btn text-yellow-500 font-bold">M</button> <button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }" class="bubble-btn text-yellow-500 font-bold">M</button>
</div>
<div class="w-px h-4 bg-gray-200 mx-1"></div> <div class="w-px h-4 bg-gray-200 mx-1"></div>
<div class="flex items-center gap-0.5">
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" class="bubble-btn font-bold text-sm">H2</button> <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" class="bubble-btn font-bold text-sm">H2</button>
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }" class="bubble-btn text-lg leading-none">•</button>
</div>
<div class="w-px h-4 bg-gray-200 mx-1"></div> <div class="w-px h-4 bg-gray-200 mx-1"></div>
<div class="flex items-center gap-0.5">
<button @click="setLink" :class="{ 'is-active': editor.isActive('link') }" class="bubble-btn text-sm">Link</button> <button @click="setLink" :class="{ 'is-active': editor.isActive('link') }" class="bubble-btn text-sm">Link</button>
<button v-if="editor.isActive('link')" @click="editor.chain().focus().unsetLink().run()" class="bubble-btn text-red-500 hover:text-red-700">✕</button>
</div>
</BubbleMenu> </BubbleMenu>
<FloatingMenu
v-if="editor"
:editor="editor"
:tippy-options="{ duration: 100, placement: 'right-start' }"
class="bg-white border border-gray-200 text-gray-600 rounded-lg shadow-lg flex items-center p-1 gap-1 -ml-4"
>
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" class="bubble-btn text-xs font-bold" title="H1">H1</button>
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" class="bubble-btn text-xs font-bold" title="H2">H2</button>
<button @click="editor.chain().focus().toggleBulletList().run()" class="bubble-btn" title="Liste">•</button>
<button @click="editor.chain().focus().toggleTaskList().run()" class="bubble-btn" title="Task">☑</button>
<button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()" class="bubble-btn" title="Tabelle">▦</button>
<button @click="editor.chain().focus().toggleCodeBlock().run()" class="bubble-btn font-mono text-xs" title="Code">&lt;&gt;</button>
</FloatingMenu>
<editor-content <editor-content
:editor="editor" :editor="editor"
class="flex-1 overflow-y-auto px-8 py-6 prose prose-slate max-w-none focus:outline-none custom-editor-area" class="flex-1 overflow-y-auto px-8 py-6 prose prose-slate max-w-none focus:outline-none custom-editor-area"
/> />
<div v-if="editor" class="border-t border-gray-100 px-4 py-1 text-xs text-gray-400 flex justify-end bg-gray-50">
{{ editor.storage.characterCount.words() }} Wörter • {{ editor.storage.characterCount.characters() }} Zeichen
</div>
</div> </div>
</template> </template>
@@ -75,20 +86,27 @@ import { watch } from 'vue'
// Tiptap Core // Tiptap Core
import { useEditor, EditorContent } from '@tiptap/vue-3' import { useEditor, EditorContent } from '@tiptap/vue-3'
// @ts-ignore // @ts-ignore
import { BubbleMenu } from '@tiptap/vue-3/menus' // Fix für Vite Import import { BubbleMenu, FloatingMenu } from '@tiptap/vue-3/menus'
import StarterKit from '@tiptap/starter-kit' import StarterKit from '@tiptap/starter-kit'
import Placeholder from '@tiptap/extension-placeholder' import Placeholder from '@tiptap/extension-placeholder'
// Extensions // Extensions
import BubbleMenuExtension from '@tiptap/extension-bubble-menu' import BubbleMenuExtension from '@tiptap/extension-bubble-menu'
import FloatingMenuExtension from '@tiptap/extension-floating-menu'
import Link from '@tiptap/extension-link' import Link from '@tiptap/extension-link'
import TaskList from '@tiptap/extension-task-list' import TaskList from '@tiptap/extension-task-list'
import TaskItem from '@tiptap/extension-task-item' import TaskItem from '@tiptap/extension-task-item'
import Image from '@tiptap/extension-image' import Image from '@tiptap/extension-image'
import Highlight from '@tiptap/extension-highlight' 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'
// Table Imports (Named Imports) // --- FIX: Standard CodeBlock statt Lowlight nutzen (Vermeidet Vite Fehler) ---
import CodeBlock from '@tiptap/extension-code-block'
// Table Imports
import { Table } from '@tiptap/extension-table' import { Table } from '@tiptap/extension-table'
import { TableRow } from '@tiptap/extension-table-row' import { TableRow } from '@tiptap/extension-table-row'
import { TableCell } from '@tiptap/extension-table-cell' import { TableCell } from '@tiptap/extension-table-cell'
@@ -100,24 +118,31 @@ const emit = defineEmits(['update:modelValue'])
const editor = useEditor({ const editor = useEditor({
content: props.modelValue, content: props.modelValue,
extensions: [ extensions: [
StarterKit, StarterKit.configure({
Placeholder.configure({ placeholder: 'Tippe "/" für Befehle oder schreibe los...' }), codeBlock: false, // Standard StarterKit Block aus, wir laden unseren eigenen
// Bubble Menu Logik: Zeigt sich nur bei Text-Auswahl
BubbleMenuExtension.configure({
shouldShow: ({ editor, from, to }) => {
// Nur anzeigen, wenn Text markiert ist und Dokument nicht leer
return !editor.state.selection.empty && (to - from > 0)
},
}), }),
Placeholder.configure({ placeholder: 'Tippe "/" oder schreibe los...' }),
// UI
BubbleMenuExtension.configure({
shouldShow: ({ editor, from, to }) => !editor.state.selection.empty && (to - from > 0),
}),
FloatingMenuExtension,
// Basics
Link.configure({ openOnClick: false, autolink: true }), Link.configure({ openOnClick: false, autolink: true }),
Image, // Für Copy-Paste Bilder aktiv lassen Image,
Highlight, // Gelber Marker Highlight,
Typography,
CharacterCount,
// Tasks // Struktur
TaskList, TaskList,
TaskItem.configure({ nested: true }), TaskItem.configure({ nested: true }),
Youtube.configure({ width: 640, height: 480 }),
// Code (Standard Block ohne Bunte Farben, dafür stabil)
CodeBlock,
// Tables // Tables
Table.configure({ resizable: true }), Table.configure({ resizable: true }),
@@ -141,6 +166,8 @@ watch(() => props.modelValue, (val) => {
} }
}) })
// --- ACTIONS ---
const setLink = () => { const setLink = () => {
if (!editor.value) return if (!editor.value) return
const previousUrl = editor.value.getAttributes('link').href const previousUrl = editor.value.getAttributes('link').href
@@ -152,10 +179,17 @@ const setLink = () => {
} }
editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).run() editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
} }
const addVideo = () => {
const url = prompt('YouTube URL eingeben:')
if (url && editor.value) {
editor.value.commands.setYoutubeVideo({ src: url })
}
}
</script> </script>
<style scoped> <style scoped>
/* Toolbar Button Styling */ /* Toolbar & Buttons */
.toolbar-btn { .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; @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;
} }
@@ -163,7 +197,6 @@ const setLink = () => {
@apply bg-gray-200 text-black shadow-inner; @apply bg-gray-200 text-black shadow-inner;
} }
/* Bubble Menu Button Styling */
.bubble-btn { .bubble-btn {
@apply px-2 py-1 hover:bg-gray-100 rounded transition-colors text-sm min-w-[24px] h-[24px] flex items-center justify-center; @apply px-2 py-1 hover:bg-gray-100 rounded transition-colors text-sm min-w-[24px] h-[24px] flex items-center justify-center;
} }
@@ -171,7 +204,7 @@ const setLink = () => {
@apply bg-gray-200 text-black; @apply bg-gray-200 text-black;
} }
/* CSS RESET & FIXES */ /* EDITOR CSS RESET & STYLES */
:deep(.prose) { :deep(.prose) {
/* 1. TABLE FIX */ /* 1. TABLE FIX */
@@ -181,7 +214,6 @@ const setLink = () => {
table-layout: fixed; table-layout: fixed;
margin: 1rem 0; margin: 1rem 0;
} }
th, td { th, td {
border: 1px solid #d1d5db; border: 1px solid #d1d5db;
padding: 0.5rem; padding: 0.5rem;
@@ -189,97 +221,45 @@ const setLink = () => {
box-sizing: border-box; box-sizing: border-box;
min-width: 1em; 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; }
th { /* 2. TASK LIST FIX */
background-color: #f3f4f6; ul[data-type="taskList"] { list-style: none !important; padding: 0 !important; margin: 0 !important; }
font-weight: 600; 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; }
text-align: left; li[data-type="taskItem"] > label { display: inline-flex !important; margin-right: 0.5rem !important; margin-top: 0.25rem !important; user-select: none; cursor: pointer; flex-shrink: 0; }
} li[data-type="taskItem"] > label > input { margin: 0 !important; cursor: pointer; }
li[data-type="taskItem"] > div { flex: 1 1 auto !important; min-width: 0 !important; display: block !important; }
li[data-type="taskItem"] div > p { margin: 0 !important; display: block !important; }
li[data-type="taskItem"]::marker, li[data-type="taskItem"]::before { content: none !important; display: none !important; }
.column-resize-handle { /* 3. HIGHLIGHT */
background-color: #3b82f6; mark { background-color: #fef08a; padding: 0.1rem 0.2rem; border-radius: 0.2rem; }
bottom: -2px;
position: absolute;
right: -2px;
pointer-events: none;
top: 0;
width: 4px;
}
/* 2. TASK LIST FIX (Flexbox) */ /* 4. YOUTUBE / VIDEO */
ul[data-type="taskList"] { div[data-youtube-video] { cursor: move; padding-right: 1.5rem; }
list-style: none !important; iframe { border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); margin: 1rem 0; }
padding: 0 !important;
margin: 0 !important;
}
li[data-type="taskItem"] { /* 5. CODE BLOCK (Standard Style - Dark Mode Look) */
display: flex !important; pre {
flex-direction: row !important; background: #0d1117;
align-items: flex-start !important; color: #c9d1d9;
margin-bottom: 0.25rem !important; font-family: 'JetBrains Mono', monospace;
padding-left: 0 !important; padding: 0.75rem 1rem;
} border-radius: 0.5rem;
li[data-type="taskItem"] > label {
display: inline-flex !important;
margin-right: 0.5rem !important;
margin-top: 0.25rem !important;
user-select: none;
cursor: pointer;
flex-shrink: 0;
}
li[data-type="taskItem"] > label > input {
margin: 0 !important;
cursor: pointer;
}
li[data-type="taskItem"] > div {
flex: 1 1 auto !important;
min-width: 0 !important;
display: block !important;
}
/* Kill Paragraph Margins inside Tasks */
li[data-type="taskItem"] div > p {
margin: 0 !important;
display: block !important;
}
/* Remove Markers */
li[data-type="taskItem"]::marker,
li[data-type="taskItem"]::before {
content: none !important;
display: none !important;
}
/* 3. HIGHLIGHT STYLE */
mark {
background-color: #fef08a; /* Yellow-200 */
padding: 0.1rem 0.2rem;
border-radius: 0.2rem;
}
/* 4. SELECTION STYLE */
.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; margin: 1rem 0;
overflow-x: auto;
} }
code {
color: inherit;
padding: 0;
background: none;
font-size: 0.9rem;
}
/* Placeholder & Selection */
.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> </style>

42
frontend/composables/useWikiTree.ts
View File

@@ -1,4 +1,3 @@
// composables/useWikiTree.ts
export interface WikiPageItem { export interface WikiPageItem {
id: string id: string
parentId: string | null parentId: string | null
@@ -12,12 +11,12 @@ export interface WikiPageItem {
export const useWikiTree = () => { export const useWikiTree = () => {
const { $api } = useNuxtApp() const { $api } = useNuxtApp()
// State // STATE
const items = useState<WikiPageItem[]>('wiki-items', () => []) const items = useState<WikiPageItem[]>('wiki-items', () => [])
const isLoading = useState<boolean>('wiki-loading', () => false) const isLoading = useState<boolean>('wiki-loading', () => false)
const isSidebarOpen = useState<boolean>('wiki-sidebar-open', () => true) const isSidebarOpen = useState<boolean>('wiki-sidebar-open', () => true)
// --- Computed: Tree Logic --- // COMPUTED TREE
const tree = computed(() => { const tree = computed(() => {
const rawItems = items.value || [] const rawItems = items.value || []
if (!rawItems.length) return [] if (!rawItems.length) return []
@@ -25,12 +24,12 @@ export const useWikiTree = () => {
const roots: WikiPageItem[] = [] const roots: WikiPageItem[] = []
const lookup: Record<string, WikiPageItem> = {} const lookup: Record<string, WikiPageItem> = {}
// Clone & Init // Init Lookup
rawItems.forEach(item => { rawItems.forEach(item => {
lookup[item.id] = { ...item, children: [] } lookup[item.id] = { ...item, children: [] }
}) })
// Build Tree // Build Hierarchy
rawItems.forEach(item => { rawItems.forEach(item => {
const node = lookup[item.id] const node = lookup[item.id]
if (item.parentId && lookup[item.parentId]) { if (item.parentId && lookup[item.parentId]) {
@@ -40,7 +39,7 @@ export const useWikiTree = () => {
} }
}) })
// Sort: Folders first, then Alphabet // Sort: Folders first, then Alphabetical
const sortNodes = (nodes: WikiPageItem[]) => { const sortNodes = (nodes: WikiPageItem[]) => {
nodes.sort((a, b) => { nodes.sort((a, b) => {
if (a.isFolder !== b.isFolder) return a.isFolder ? -1 : 1 if (a.isFolder !== b.isFolder) return a.isFolder ? -1 : 1
@@ -55,47 +54,52 @@ export const useWikiTree = () => {
return roots return roots
}) })
// --- Actions --- // ACTIONS
const loadTree = async () => { const loadTree = async () => {
isLoading.value = true isLoading.value = true
try { try {
const data = await $api<WikiPageItem[]>('/api/wiki/tree', { method: 'GET' }) const data = await $api<WikiPageItem[]>('/api/wiki/tree', { method: 'GET' })
items.value = data items.value = data
} catch (e) { console.error(e) } } catch (e) {
finally { isLoading.value = false } console.error('Wiki Tree Load Error', e)
} finally {
isLoading.value = false
}
} }
// Zentralisierte Erstellen-Funktion // Rein API-basierte Funktion ohne UI-Logik
const createItem = async (title: string, parentId: string | null, isFolder: boolean) => { const createItem = async (title: string, parentId: string | null, isFolder: boolean) => {
try { try {
const newItem = await $api('/api/wiki', { const newItem = await $api('/api/wiki', {
method: 'POST', method: 'POST',
body: { title, parentId, isFolder } body: { title, parentId, isFolder }
}) })
await loadTree() // Neu laden await loadTree()
return newItem return newItem
} catch (e) { } catch (e) {
alert('Fehler beim Erstellen') throw e // Fehler weiterwerfen, damit UI reagieren kann
return null
} }
} }
// Löschen Funktion // Rein API-basierte Funktion ohne UI-Logik
const deleteItem = async (id: string) => { const deleteItem = async (id: string) => {
if (!confirm('Wirklich löschen? Alle Unterseiten werden ebenfalls gelöscht.')) return
try { try {
await $api(`/api/wiki/${id}`, { method: 'DELETE' }) await $api(`/api/wiki/${id}`, { method: 'DELETE' })
await loadTree() await loadTree()
return true return true
} catch (e) { } catch (e) {
alert('Fehler beim Löschen') throw e
return false
} }
} }
return { return {
tree, items, isLoading, isSidebarOpen, tree,
loadTree, createItem, deleteItem items,
isLoading,
isSidebarOpen,
loadTree,
createItem,
deleteItem
} }
} }

6
frontend/nuxt.config.ts
View File

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

5
frontend/package.json
View File

@@ -47,6 +47,9 @@
"@sentry/browser": "^9.11.0", "@sentry/browser": "^9.11.0",
"@sentry/integrations": "^7.114.0", "@sentry/integrations": "^7.114.0",
"@tiptap/extension-bubble-menu": "^3.17.1", "@tiptap/extension-bubble-menu": "^3.17.1",
"@tiptap/extension-character-count": "^3.17.1",
"@tiptap/extension-code-block": "^3.17.1",
"@tiptap/extension-floating-menu": "^3.17.1",
"@tiptap/extension-highlight": "^3.17.1", "@tiptap/extension-highlight": "^3.17.1",
"@tiptap/extension-image": "^3.17.1", "@tiptap/extension-image": "^3.17.1",
"@tiptap/extension-link": "^3.17.1", "@tiptap/extension-link": "^3.17.1",
@@ -57,6 +60,8 @@
"@tiptap/extension-table-row": "^3.17.1", "@tiptap/extension-table-row": "^3.17.1",
"@tiptap/extension-task-item": "^3.17.1", "@tiptap/extension-task-item": "^3.17.1",
"@tiptap/extension-task-list": "^3.17.1", "@tiptap/extension-task-list": "^3.17.1",
"@tiptap/extension-typography": "^3.17.1",
"@tiptap/extension-youtube": "^3.17.1",
"@tiptap/pm": "^3.17.1", "@tiptap/pm": "^3.17.1",
"@tiptap/starter-kit": "^3.17.1", "@tiptap/starter-kit": "^3.17.1",
"@tiptap/vue-3": "^3.17.1", "@tiptap/vue-3": "^3.17.1",

227
frontend/pages/wiki/[[id]].vue
View File

@@ -1,86 +1,60 @@
<template> <template>
<div class="flex h-full w-full bg-white overflow-hidden relative"> <div class="flex h-full w-full bg-white dark:bg-gray-900 overflow-hidden relative">
<aside <aside
class="flex flex-col border-r border-gray-200 bg-gray-50/50 transition-all duration-300 ease-in-out overflow-hidden whitespace-nowrap h-full" class="flex flex-col border-r border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-900/50 transition-all duration-300 ease-in-out overflow-hidden whitespace-nowrap h-full"
:class="[isSidebarOpen ? 'w-80 min-w-[20rem] translate-x-0' : 'w-0 min-w-0 -translate-x-full opacity-0 border-none']" :class="[isSidebarOpen ? 'w-80 min-w-[20rem] translate-x-0' : 'w-0 min-w-0 -translate-x-full opacity-0 border-none']"
> >
<div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-800 px-4 py-3 bg-white dark:bg-gray-900 h-14 shrink-0 relative z-20">
<div class="flex items-center justify-between border-b border-gray-200 px-4 py-3 bg-white h-14 shrink-0 relative z-20"> <h2 class="font-semibold text-gray-800 dark:text-gray-100 flex items-center gap-2">
<h2 class="font-semibold text-gray-800 flex items-center gap-2">
<span class="text-primary-600">📚</span> Wiki <span class="text-primary-600">📚</span> Wiki
</h2> </h2>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<UDropdown :items="rootMenuItems" :popper="{ placement: 'bottom-end' }">
<UButton color="gray" variant="ghost" icon="i-heroicons-plus" size="sm" />
</UDropdown>
<div class="relative"> <UButton @click="isSidebarOpen = false" color="gray" variant="ghost" icon="i-heroicons-chevron-double-left" size="sm" />
<button
@click.stop="showRootMenu = !showRootMenu"
class="p-1.5 text-gray-500 hover:text-primary-600 rounded hover:bg-gray-100 transition-colors"
:class="{ 'bg-gray-100 text-primary-600': showRootMenu }"
title="Neu..."
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"><path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" /></svg>
</button>
<div v-if="showRootMenu" v-on-click-outside="() => showRootMenu = false" class="absolute right-0 top-full mt-1 w-40 bg-white rounded-md shadow-lg border border-gray-100 py-1 text-xs text-gray-700 animate-in fade-in slide-in-from-top-1 duration-100 origin-top-right">
<button @click="createRootItem(false)" class="w-full text-left px-3 py-2 hover:bg-gray-50 flex items-center gap-2">
<svg class="w-3 h-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
Neue Seite
</button>
<button @click="createRootItem(true)" class="w-full text-left px-3 py-2 hover:bg-gray-50 flex items-center gap-2">
<svg class="w-3 h-3 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
Neuer Ordner
</button>
</div>
</div>
<button
@click="isSidebarOpen = false"
class="p-1.5 text-gray-400 hover:text-gray-700 rounded hover:bg-gray-100 transition-colors ml-1"
title="Sidebar einklappen"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"><path fill-rule="evenodd" d="M15.79 14.77a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L11.832 10l3.938 3.71a.75.75 0 01.02 1.06zm-6 0a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L5.832 10l3.938 3.71a.75.75 0 01.02 1.06z" clip-rule="evenodd" /></svg>
</button>
</div> </div>
</div> </div>
<div class="flex-1 overflow-y-auto px-2 py-3 custom-scrollbar"> <div class="flex-1 overflow-y-auto px-2 py-3 custom-scrollbar">
<div v-if="isLoadingTree && !tree.length" class="space-y-2 px-2 mt-2"> <div v-if="isLoadingTree && !tree.length" class="space-y-2 px-2 mt-2">
<div class="h-4 w-3/4 bg-gray-200 animate-pulse rounded"></div> <USkeleton class="h-4 w-3/4" />
<div class="h-4 w-1/2 bg-gray-200 animate-pulse rounded"></div> <USkeleton class="h-4 w-1/2" />
</div> </div>
<div v-else> <div v-else>
<WikiTreeItem v-for="node in tree" :key="node.id" :item="node" /> <WikiTreeItem v-for="node in tree" :key="node.id" :item="node" />
<div v-if="!tree.length" class="text-center text-sm text-gray-400 mt-10 px-4"> <div v-if="!tree.length" class="text-center text-sm text-gray-400 mt-10 px-4">
Keine Seiten.<br>Erstelle den ersten Ordner oben rechts! Keine Seiten vorhanden.<br>Erstelle den ersten Eintrag oben rechts.
</div> </div>
</div> </div>
</div> </div>
</aside> </aside>
<main class="flex-1 overflow-hidden relative bg-white dark:bg-gray-900 h-full flex flex-col min-w-0">
<main class="flex-1 overflow-hidden relative bg-white h-full flex flex-col min-w-0">
<div v-if="pageId && page" class="flex flex-col h-full"> <div v-if="pageId && page" class="flex flex-col h-full">
<header class="px-8 pt-8 pb-4 flex flex-col gap-2 shrink-0"> <header class="px-8 pt-8 pb-4 flex flex-col gap-2 shrink-0">
<div class="flex items-center gap-3 w-full"> <div class="flex items-center gap-3 w-full">
<button
<UButton
v-show="!isSidebarOpen" v-show="!isSidebarOpen"
@click="isSidebarOpen = true" @click="isSidebarOpen = true"
class="p-2 -ml-2 text-gray-400 hover:text-primary-600 hover:bg-gray-100 rounded transition-colors shrink-0" icon="i-heroicons-bars-3"
title="Sidebar öffnen" color="gray"
> variant="ghost"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5A.75.75 0 014 10z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M4 6a.75.75 0 01.75-.75h11.5a.75.75 0 010 1.5H4.75A.75.75 0 014 6z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M4 14a.75.75 0 01.75-.75h11.5a.75.75 0 010 1.5H4.75A.75.75 0 014 14z" clip-rule="evenodd" /></svg> class="-ml-2 shrink-0"
</button> />
<input <input
v-model="page.title" v-model="page.title"
@blur="saveTitle" @blur="saveTitle"
@keydown.enter="($event.target as HTMLInputElement).blur()" @keydown.enter="($event.target as HTMLInputElement).blur()"
class="text-4xl font-bold text-gray-900 w-full outline-none placeholder-gray-300 bg-transparent min-w-0" class="text-4xl font-bold text-gray-900 dark:text-white w-full outline-none placeholder-gray-300 bg-transparent min-w-0"
placeholder="Unbenannte Seite" placeholder="Unbenannte Seite"
/> />
</div> </div>
@@ -89,65 +63,98 @@
<span>{{ new Date(page.createdAt).toLocaleDateString() }}</span> <span>{{ new Date(page.createdAt).toLocaleDateString() }}</span>
<transition name="fade"> <transition name="fade">
<span v-if="isSaving" class="text-primary-600 flex items-center gap-1"> <span v-if="isSaving" class="text-primary-600 flex items-center gap-1">
<svg class="animate-spin h-3 w-3" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg> <UIcon name="i-heroicons-arrow-path" class="w-3 h-3 animate-spin" /> Speichert...
Speichert...
</span> </span>
<span v-else-if="lastSaved" class="text-green-600">Gespeichert</span> <span v-else-if="lastSaved" class="text-green-600">Gespeichert</span>
</transition> </transition>
</div> </div>
</header> </header>
<div class="flex-1 overflow-hidden border-t border-gray-100"> <div class="flex-1 overflow-hidden border-t border-gray-100 dark:border-gray-800">
<WikiEditor v-model="contentBuffer" @update:modelValue="handleContentChange" /> <WikiEditor v-model="contentBuffer" @update:modelValue="handleContentChange" />
</div> </div>
</div> </div>
<div v-else-if="pageId && pendingPage" class="flex h-full items-center justify-center text-gray-400"> <div v-else-if="pageId && pendingPage" class="flex h-full items-center justify-center text-gray-400">
<div class="flex flex-col items-center gap-2"> <div class="flex flex-col items-center gap-2">
<svg class="animate-spin h-8 w-8 text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg> <UIcon name="i-heroicons-arrow-path" class="w-8 h-8 animate-spin text-gray-300" />
<span>Lade Seite...</span> <span>Lade Seite...</span>
</div> </div>
</div> </div>
<div v-else class="flex h-full flex-col items-center justify-center text-gray-400 bg-gray-50/30"> <div v-else class="flex h-full flex-col items-center justify-center text-gray-400 bg-gray-50/30 dark:bg-gray-800/30">
<button <UButton v-if="!isSidebarOpen" @click="isSidebarOpen = true" icon="i-heroicons-bars-3" color="white" class="absolute left-4 top-4" />
v-if="!isSidebarOpen"
@click="isSidebarOpen = true"
class="absolute left-4 top-4 p-2 bg-white border shadow-sm rounded-md hover:bg-gray-50"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"><path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5A.75.75 0 014 10z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M4 6a.75.75 0 01.75-.75h11.5a.75.75 0 010 1.5H4.75A.75.75 0 014 6z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M4 14a.75.75 0 01.75-.75h11.5a.75.75 0 010 1.5H4.75A.75.75 0 014 14z" clip-rule="evenodd" /></svg>
</button>
<div class="bg-gray-100 p-6 rounded-full mb-4"> <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-full mb-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-gray-400"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" /></svg> <UIcon name="i-heroicons-document" class="w-12 h-12 text-gray-400" />
</div> </div>
<p class="text-lg font-medium text-gray-600">Keine Seite ausgewählt</p> <p class="text-lg font-medium text-gray-600 dark:text-gray-300">Keine Seite ausgewählt</p>
<p class="text-sm mt-1">Wähle eine Notiz aus der Navigation.</p> <p class="text-sm mt-1">Wähle eine Notiz aus der Navigation.</p>
</div> </div>
</main> </main>
<UModal v-model="isModalOpen">
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
{{ modalTitle }}
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isModalOpen = false" />
</div>
</template>
<div v-if="modalState.type === 'create'" class="space-y-4">
<UFormGroup label="Titel" name="title">
<UInput v-model="modalState.inputValue" autofocus placeholder="z.B. Meeting Notes" @keyup.enter="handleModalConfirm" />
</UFormGroup>
</div>
<div v-else-if="modalState.type === 'delete'">
<p class="text-sm text-gray-500 dark:text-gray-300">
Möchtest du <strong>"{{ modalState.targetItem?.title }}"</strong> wirklich löschen?
<br><span v-if="modalState.targetItem?.isFolder" class="text-red-500 font-medium">Alle Unterseiten werden ebenfalls gelöscht.</span>
</p>
</div>
<template #footer>
<div class="flex justify-end gap-2">
<UButton color="gray" variant="ghost" @click="isModalOpen = false">Abbrechen</UButton>
<UButton
:color="modalState.type === 'delete' ? 'red' : 'primary'"
:loading="modalLoading"
@click="handleModalConfirm"
>
{{ modalState.type === 'delete' ? 'Löschen' : 'Erstellen' }}
</UButton>
</div>
</template>
</UCard>
</UModal>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { vOnClickOutside } from '@vueuse/components' // Import für Click-Outside
import WikiTreeItem from '~/components/wiki/TreeItem.vue' import WikiTreeItem from '~/components/wiki/TreeItem.vue'
import WikiEditor from '~/components/wiki/WikiEditor.vue' import WikiEditor from '~/components/wiki/WikiEditor.vue'
import type { WikiPageItem } from '~/composables/useWikiTree'
// --- SETUP ---
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
const { $api } = useNuxtApp() const { $api } = useNuxtApp()
const { tree, isLoading: isLoadingTree, loadTree, isSidebarOpen, createItem } = useWikiTree() const { tree, isLoading: isLoadingTree, loadTree, isSidebarOpen, createItem, deleteItem } = useWikiTree()
// --- EDITOR LOGIC ---
const pageId = computed(() => route.params.id as string | undefined) const pageId = computed(() => route.params.id as string | undefined)
// UI States
const showRootMenu = ref(false)
const isSaving = ref(false) const isSaving = ref(false)
const lastSaved = ref(false) const lastSaved = ref(false)
const saveTimeout = ref<any>(null) const saveTimeout = ref<any>(null)
const contentBuffer = ref(null) const contentBuffer = ref(null)
// Init Load
onMounted(() => loadTree()) onMounted(() => loadTree())
watch(pageId, () => { watch(pageId, () => {
@@ -167,24 +174,91 @@ const { data: page, pending: pendingPage } = await useAsyncData(
{ watch: [pageId], immediate: true } { watch: [pageId], immediate: true }
) )
// --- ACTIONS --- // --- MODAL LOGIC (Zentralisiert) ---
async function createRootItem(isFolder: boolean) { const isModalOpen = ref(false)
showRootMenu.value = false // Menü schließen const modalLoading = ref(false)
const type = isFolder ? "Ordner" : "Seite"
const title = prompt(`Name für neuen Root-${type}:`, `Neuer ${type}`)
if (!title) return
const newItem = await createItem(title, null, isFolder) const modalState = reactive({
type: 'create' as 'create' | 'delete',
targetItem: null as WikiPageItem | null, // Bei Create: Parent. Bei Delete: Das Item selbst.
isFolderCreation: false,
inputValue: ''
})
// Nur bei Seiten navigieren wir, Ordner bleiben in der Struktur const modalTitle = computed(() => {
// @ts-ignore if (modalState.type === 'delete') return 'Eintrag löschen'
if (newItem && !isFolder) { return modalState.isFolderCreation ? 'Neuen Ordner erstellen' : 'Neue Seite erstellen'
})
// Diese Funktion wird an Kinder via Inject weitergegeben
function openWikiAction(type: 'create' | 'delete', contextItem: WikiPageItem | null, isFolder = false) {
modalState.type = type
modalState.targetItem = contextItem
modalState.isFolderCreation = isFolder
modalState.inputValue = '' // Reset
if (type === 'create') {
// Optional: Prefix generieren
}
isModalOpen.value = true
}
// Bereitstellen für TreeItems
provide('openWikiAction', openWikiAction)
async function handleModalConfirm() {
modalLoading.value = true
try {
if (modalState.type === 'create') {
if (!modalState.inputValue.trim()) return
const parentId = modalState.targetItem ? modalState.targetItem.id : null
const newItem = await createItem(modalState.inputValue, parentId, modalState.isFolderCreation)
// Wenn Seite erstellt wurde -> hin navigieren
if (newItem && !modalState.isFolderCreation) {
// @ts-ignore // @ts-ignore
router.push(`/wiki/${newItem.id}`) router.push(`/wiki/${newItem.id}`)
} }
}
else if (modalState.type === 'delete' && modalState.targetItem) {
const success = await deleteItem(modalState.targetItem.id)
// Falls wir die aktuelle Seite löschen, ab zum Root
if (success && pageId.value === modalState.targetItem.id) {
router.push('/wiki')
}
}
isModalOpen.value = false
} catch (e) {
console.error(e)
// Hier könnte man einen UNotification Toast anzeigen
} finally {
modalLoading.value = false
}
} }
// --- ROOT MENU ---
// Konfiguration für UDropdown
const rootMenuItems = [
[{
label: 'Neue Seite',
icon: 'i-heroicons-document-plus',
click: () => openWikiAction('create', null, false)
}],
[{
label: 'Neuer Ordner',
icon: 'i-heroicons-folder-plus',
click: () => openWikiAction('create', null, true)
}]
]
// --- EDITOR ACTIONS ---
async function saveTitle() { async function saveTitle() {
if (!page.value || !pageId.value) return if (!page.value || !pageId.value) return
isSaving.value = true isSaving.value = true
@@ -219,6 +293,7 @@ function showSavedFeedback() {
.custom-scrollbar::-webkit-scrollbar { width: 4px; } .custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #e5e7eb; border-radius: 10px; } .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #e5e7eb; border-radius: 10px; }
:deep(.dark) .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #374151; }
.fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; }
.fade-enter-from, .fade-leave-to { opacity: 0; } .fade-enter-from, .fade-leave-to { opacity: 0; }