Folders in Wiki

2026-01-26 20:43:35 +01:00
parent db22d47900
commit c87212d54a
5 changed files with 230 additions and 147 deletions
--- a/frontend/components/wiki/TreeItem.vue
+++ b/frontend/components/wiki/TreeItem.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="select-none text-sm text-gray-700">
+  <div class="select-none text-sm text-gray-700 relative">
+
    <div
-        class="group flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors mb-0.5"
+        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']"
        :style="{ paddingLeft: `${indent}rem` }"
        @click.stop="handleClick"
@@ -16,12 +17,42 @@
      </button>
      <span v-else class="w-4"></span>

-      <span class="text-gray-400">
+      <span class="text-gray-400 shrink-0">
        <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>
        <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>
      </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 }">
+        <button
+            @click.stop="showMenu = !showMenu"
+            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>
+      </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">
+
+        <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">
+            <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>
+            Neue Seite
+          </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">
+            <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 class="h-px bg-gray-100 my-1"></div>
+        </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">
+          <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>
+          Löschen
+        </button>
+      </div>
+
    </div>

    <div v-if="item.isFolder && isOpen">
@@ -33,19 +64,24 @@

 <script setup lang="ts">
 import type { WikiPageItem } from '~/composables/useWikiTree'
-// Expliziter Self-Import für Rekursion (wichtig in manchen Nuxt Setups)
 import TreeItem from './TreeItem.vue'
+// Simple Click Outside Directive (kannst du auch global registrieren)
+import { vOnClickOutside } from '@vueuse/components'

 const props = defineProps<{ item: WikiPageItem; depth?: number }>()
 const router = useRouter()
 const route = useRoute()

+// Composable Actions holen
+const { createItem, deleteItem } = useWikiTree()
+
 const depth = props.depth ?? 0
 const indent = computed(() => 0.5 + (depth * 0.7))
 const isOpen = ref(false)
+const showMenu = ref(false)
 const isActive = computed(() => route.params.id === props.item.id)

-// Auto-Open: Wenn wir ein Parent sind und das aktive Kind enthalten
+// Auto-Open Logic
 watch(() => route.params.id, (newId) => {
  if (props.item.isFolder && hasActiveChild(props.item, newId as string)) isOpen.value = true
 }, { immediate: true })
@@ -60,4 +96,34 @@ function handleClick() {
 }

 function toggleFolder() { isOpen.value = !isOpen.value }
+
+// --- ACTIONS ---
+
+async function createChild(isFolder: boolean) {
+  showMenu.value = false
+  // Wir öffnen den Ordner automatisch, damit man das neue Item sieht
+  isOpen.value = true
+
+  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() {
+  showMenu.value = false
+  const success = await deleteItem(props.item.id)
+
+  if (success && isActive.value) {
+    // Wenn wir die aktive Seite gelöscht haben, zurück zum Root
+    router.push('/wiki')
+  }
+}
 </script>
--- a/frontend/components/wiki/WikiEditor.vue
+++ b/frontend/components/wiki/WikiEditor.vue
@@ -7,6 +7,7 @@
        <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }" class="toolbar-btn font-bold" title="Fett">B</button>
        <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }" class="toolbar-btn italic" title="Kursiv">I</button>
        <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }" class="toolbar-btn line-through" title="Durchgestrichen">S</button>
+        <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 pr-2 mr-2">
@@ -16,7 +17,6 @@

      <div class="flex gap-0.5 border-r border-gray-200 pr-2 mr-2">
        <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }" class="toolbar-btn" title="Liste">• Liste</button>
-        <button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }" class="toolbar-btn" title="Nummerierte Liste">1. Liste</button>
        <button @click="editor.chain().focus().toggleTaskList().run()" :class="{ 'is-active': editor.isActive('taskList') }" class="toolbar-btn" title="Checkliste">☑ Task</button>
      </div>

@@ -24,11 +24,11 @@
        <button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()" class="toolbar-btn" title="Tabelle einfügen">▦ Tab</button>

        <div v-if="editor.isActive('table')" class="flex gap-0.5 ml-2 pl-2 border-l border-gray-200 items-center">
-          <button @click="editor.chain().focus().addColumnAfter().run()" class="toolbar-btn text-xs" title="Spalte hinzufügen">+Col</button>
-          <button @click="editor.chain().focus().deleteColumn().run()" class="toolbar-btn text-xs text-red-400" title="Spalte löschen">-Col</button>
-          <button @click="editor.chain().focus().addRowAfter().run()" class="toolbar-btn text-xs" title="Zeile hinzufügen">+Row</button>
-          <button @click="editor.chain().focus().deleteRow().run()" class="toolbar-btn text-xs text-red-400" title="Zeile löschen">-Row</button>
-          <button @click="editor.chain().focus().mergeCells().run()" class="toolbar-btn text-xs" title="Zellen verbinden">Merge</button>
+          <button @click="editor.chain().focus().addColumnAfter().run()" class="toolbar-btn text-xs" title="Spalte +">+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().addRowAfter().run()" class="toolbar-btn text-xs" title="Zeile +">+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().mergeCells().run()" class="toolbar-btn text-xs" title="Verbinden">Merge</button>
          <button @click="editor.chain().focus().deleteTable().run()" class="toolbar-btn text-red-500 hover:bg-red-50 ml-1" title="Tabelle löschen">🗑</button>
        </div>
      </div>
@@ -37,15 +37,29 @@
    <BubbleMenu
        v-if="editor"
        :editor="editor"
-        :tippy-options="{ duration: 100 }"
-        class="bg-gray-800 text-white rounded-lg shadow-xl px-2 py-1 flex gap-1 text-sm items-center z-50"
+        :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"
    >
-      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'text-primary-400': editor.isActive('bold') }" class="bubble-btn font-bold">B</button>
-      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'text-primary-400': editor.isActive('italic') }" class="bubble-btn italic">I</button>
-      <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'text-primary-400': editor.isActive('strike') }" class="bubble-btn line-through">S</button>
-      <div class="w-px h-4 bg-gray-600 mx-1"></div>
-      <button @click="setLink" :class="{ 'text-primary-400': editor.isActive('link') }" class="bubble-btn">Link</button>
-      <button v-if="editor.isActive('link')" @click="editor.chain().focus().unsetLink().run()" class="bubble-btn text-red-300">Unlink</button>
+      <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().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().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="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().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="flex items-center gap-0.5">
+        <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>

    <editor-content
@@ -58,10 +72,10 @@
 <script setup lang="ts">
 import { watch } from 'vue'

-// Tiptap Core Imports
+// Tiptap Core
 import { useEditor, EditorContent } from '@tiptap/vue-3'
 // @ts-ignore
-import { BubbleMenu } from '@tiptap/vue-3/menus'
+import { BubbleMenu } from '@tiptap/vue-3/menus' // Fix für Vite Import

 import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
@@ -72,8 +86,9 @@ import Link from '@tiptap/extension-link'
 import TaskList from '@tiptap/extension-task-list'
 import TaskItem from '@tiptap/extension-task-item'
 import Image from '@tiptap/extension-image'
+import Highlight from '@tiptap/extension-highlight'

-// Table Imports (Named Imports um Vite Fehler zu vermeiden)
+// Table Imports (Named Imports)
 import { Table } from '@tiptap/extension-table'
 import { TableRow } from '@tiptap/extension-table-row'
 import { TableCell } from '@tiptap/extension-table-cell'
@@ -86,16 +101,25 @@ const editor = useEditor({
  content: props.modelValue,
  extensions: [
    StarterKit,
-    Placeholder.configure({ placeholder: 'Tippe "/" oder schreibe los...' }),
-    BubbleMenuExtension,
-    Link.configure({ openOnClick: false, autolink: true }),
-    Image, // Für Paste Support aktiv lassen
+    Placeholder.configure({ placeholder: 'Tippe "/" für Befehle oder schreibe los...' }),

-    // Task List Configuration
+    // 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)
+      },
+    }),
+
+    Link.configure({ openOnClick: false, autolink: true }),
+    Image, // Für Copy-Paste Bilder aktiv lassen
+    Highlight, // Gelber Marker
+
+    // Tasks
    TaskList,
    TaskItem.configure({ nested: true }),

-    // Table Configuration
+    // Tables
    Table.configure({ resizable: true }),
    TableRow,
    TableHeader,
@@ -131,23 +155,26 @@ const setLink = () => {
 </script>

 <style scoped>
-/* Toolbar Buttons */
+/* Toolbar Button Styling */
 .toolbar-btn {
  @apply p-1.5 rounded text-gray-600 hover:bg-gray-100 transition-colors text-sm font-medium min-w-[28px] h-[28px] flex items-center justify-center;
 }
 .toolbar-btn.is-active {
  @apply bg-gray-200 text-black shadow-inner;
 }
+
+/* Bubble Menu Button Styling */
 .bubble-btn {
-  @apply px-2 py-1 hover:bg-gray-700 rounded transition-colors;
+  @apply px-2 py-1 hover:bg-gray-100 rounded transition-colors text-sm min-w-[24px] h-[24px] flex items-center justify-center;
+}
+.bubble-btn.is-active {
+  @apply bg-gray-200 text-black;
 }

-/* WICHTIGE CSS REGELN FÜR EDITOR
-   Dies überschreibt die Tailwind Typography Defaults, die das Layout zerschießen.
-*/
+/* CSS RESET & FIXES */
 :deep(.prose) {

-  /* --- 1. TABELLEN (Volle Breite erzwingen) --- */
+  /* 1. TABLE FIX */
  table {
    width: 100% !important;
    border-collapse: collapse;
@@ -179,16 +206,13 @@ const setLink = () => {
    width: 4px;
  }

-  /* --- 2. TASK LIST (Checkbox Layout Fix) --- */
-
-  /* Liste resetten */
+  /* 2. TASK LIST FIX (Flexbox) */
  ul[data-type="taskList"] {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

-  /* Item als Flex-Zeile erzwingen */
  li[data-type="taskItem"] {
    display: flex !important;
    flex-direction: row !important;
@@ -197,11 +221,10 @@ const setLink = () => {
    padding-left: 0 !important;
  }

-  /* Checkbox Container */
  li[data-type="taskItem"] > label {
    display: inline-flex !important;
    margin-right: 0.5rem !important;
-    margin-top: 0.25rem !important;     /* Feinjustierung für Ausrichtung am Text */
+    margin-top: 0.25rem !important;
    user-select: none;
    cursor: pointer;
    flex-shrink: 0;
@@ -212,27 +235,33 @@ const setLink = () => {
    cursor: pointer;
  }

-  /* Inhalt Container */
  li[data-type="taskItem"] > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
  }

-  /* WICHTIG: Margins vom Paragraphen entfernen, sonst Umbruch */
+  /* Kill Paragraph Margins inside Tasks */
  li[data-type="taskItem"] div > p {
    margin: 0 !important;
    display: block !important;
  }

-  /* Standard Marker entfernen */
+  /* Remove Markers */
  li[data-type="taskItem"]::marker,
  li[data-type="taskItem"]::before {
    content: none !important;
    display: none !important;
  }

-  /* --- SONSTIGES --- */
+  /* 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;
  }