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

Fix Cursor, Fix Task Item #87
All checks were successful
Build and Push Docker Images / build-backend (push) Successful in 16s
Details
Build and Push Docker Images / build-frontend (push) Successful in 1m5s
Details

Browse Source
This commit is contained in:
florianfederspiel
2026-01-27 13:07:40 +01:00
parent 01ef3c5a42
commit b07953fb7d
2 changed files with 110 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/components/wiki/TiptapTaskItem.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<node-view-wrapper as="li" class="flex flex-row items-start gap-2 mb-2 !p-0 !m-0 bg-transparent">
<label class="flex-none pt-[0.15rem] cursor-pointer select-none" contenteditable="false">
<input
type="checkbox"
:checked="node.attrs.checked"
@change="onChange"
class="w-4 h-4 text-primary-600 rounded border-gray-300 focus:ring-primary-500 cursor-pointer"
/>
</label>
<node-view-content class="flex-1 min-w-0 [&>p]:!m-0 [&>p]:!inline-block" />
</node-view-wrapper>
</template>
<script setup lang="ts">
import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-3'
const props = defineProps(nodeViewProps)
function onChange(event: Event) {
const target = event.target as HTMLInputElement
props.updateAttributes({
checked: target.checked,
})
}
</script>

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

@@ -1,40 +1,31 @@
<template> <template>
<div class="flex flex-col h-full bg-white relative"> <div class="flex flex-col h-full bg-white dark:bg-gray-900 relative">
<div v-if="editor" class="border-b border-gray-100 px-4 py-2 flex flex-wrap gap-1 items-center sticky top-0 bg-white z-20 shadow-sm select-none"> <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 pr-2 mr-2"> <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" title="Fett">B</button> <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().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }" class="toolbar-btn italic" title="Kursiv">I</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().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }" class="toolbar-btn line-through" title="Durchgestrichen">S</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().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }" class="toolbar-btn text-yellow-500 font-bold" title="Markieren">M</button> <button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }" class="toolbar-btn text-yellow-500 font-bold">M</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 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" title="H1">H1</button> <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: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" class="toolbar-btn" title="H2">H2</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().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }" class="toolbar-btn font-mono text-xs" title="Code Block">&lt;/&gt;</button> <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }" class="toolbar-btn font-mono text-xs">&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 dark:border-gray-700 pr-2 mr-2">
<button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }" class="toolbar-btn" title="Liste">•</button> <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }" class="toolbar-btn">•</button>
<button @click="editor.chain().focus().toggleTaskList().run()" :class="{ 'is-active': editor.isActive('taskList') }" class="toolbar-btn" title="Checkliste">☑</button> <button @click="editor.chain().focus().toggleTaskList().run()" :class="{ 'is-active': editor.isActive('taskList') }" class="toolbar-btn">☑</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">▦</button> <button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()" class="toolbar-btn">▦</button>
<button @click="addVideo" class="toolbar-btn text-red-600" title="YouTube Video"> <button @click="addVideo" class="toolbar-btn text-red-600">
<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> <UIcon name="i-heroicons-video-camera" class="w-4 h-4" />
</button> </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">+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">+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">Merge</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>
@@ -42,11 +33,10 @@
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" class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl flex items-center p-1 gap-1 z-50"
> >
<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().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 class="w-px h-4 bg-gray-200 mx-1"></div> <div class="w-px h-4 bg-gray-200 mx-1"></div>
<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>
@@ -58,40 +48,40 @@
v-if="editor" v-if="editor"
:editor="editor" :editor="editor"
:tippy-options="{ duration: 100, placement: 'right-start' }" :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" class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 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: 1 }).run()" class="bubble-btn text-xs font-bold">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().toggleHeading({ level: 2 }).run()" class="bubble-btn text-xs font-bold">H2</button>
<button @click="editor.chain().focus().toggleBulletList().run()" class="bubble-btn" title="Liste">•</button> <button @click="editor.chain().focus().toggleBulletList().run()" class="bubble-btn">•</button>
<button @click="editor.chain().focus().toggleTaskList().run()" class="bubble-btn" title="Task">☑</button> <button @click="editor.chain().focus().toggleTaskList().run()" class="bubble-btn">☑</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().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()" class="bubble-btn">▦</button>
<button @click="editor.chain().focus().toggleCodeBlock().run()" class="bubble-btn font-mono text-xs" title="Code">&lt;&gt;</button> <button @click="editor.chain().focus().toggleCodeBlock().run()" class="bubble-btn font-mono text-xs">&lt;&gt;</button>
</FloatingMenu> </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 dark:prose-invert 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"> <div v-if="editor" class="border-t border-gray-100 dark:border-gray-800 px-4 py-1 text-xs text-gray-400 flex justify-end bg-gray-50 dark:bg-gray-900/50">
{{ editor.storage.characterCount.words() }} Wörter • {{ editor.storage.characterCount.characters() }} Zeichen {{ editor.storage.characterCount.words() }} Wörter
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { watch } from 'vue' import { watch } from 'vue'
import { useEditor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-3'
// Tiptap Core
import { useEditor, EditorContent } from '@tiptap/vue-3'
// @ts-ignore // @ts-ignore
import { BubbleMenu, FloatingMenu } from '@tiptap/vue-3/menus' 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'
import CodeBlock from '@tiptap/extension-code-block'
// Extensions 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 BubbleMenuExtension from '@tiptap/extension-bubble-menu'
import FloatingMenuExtension from '@tiptap/extension-floating-menu' import FloatingMenuExtension from '@tiptap/extension-floating-menu'
import Link from '@tiptap/extension-link' import Link from '@tiptap/extension-link'
@@ -103,14 +93,8 @@ import Youtube from '@tiptap/extension-youtube'
import Typography from '@tiptap/extension-typography' import Typography from '@tiptap/extension-typography'
import CharacterCount from '@tiptap/extension-character-count' import CharacterCount from '@tiptap/extension-character-count'
// --- FIX: Standard CodeBlock statt Lowlight nutzen (Vermeidet Vite Fehler) --- // IMPORT DER NEUEN KOMPONENTE
import CodeBlock from '@tiptap/extension-code-block' import TiptapTaskItem from './TiptapTaskItem.vue'
// Table 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'
const props = defineProps<{ modelValue: any }>() const props = defineProps<{ modelValue: any }>()
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
@@ -118,41 +102,32 @@ const emit = defineEmits(['update:modelValue'])
const editor = useEditor({ const editor = useEditor({
content: props.modelValue, content: props.modelValue,
extensions: [ extensions: [
StarterKit.configure({ StarterKit.configure({ codeBlock: false }),
codeBlock: false, // Standard StarterKit Block aus, wir laden unseren eigenen
}),
Placeholder.configure({ placeholder: 'Tippe "/" oder schreibe los...' }), Placeholder.configure({ placeholder: 'Tippe "/" oder schreibe los...' }),
// UI BubbleMenuExtension.configure({ shouldShow: ({ editor, from, to }) => !editor.state.selection.empty && (to - from > 0) }),
BubbleMenuExtension.configure({
shouldShow: ({ editor, from, to }) => !editor.state.selection.empty && (to - from > 0),
}),
FloatingMenuExtension, FloatingMenuExtension,
// Basics
Link.configure({ openOnClick: false, autolink: true }), Link.configure({ openOnClick: false, autolink: true }),
Image, Image, Highlight, Typography, CharacterCount, CodeBlock,
Highlight,
Typography,
CharacterCount,
// Struktur
TaskList,
TaskItem.configure({ nested: true }),
Youtube.configure({ width: 640, height: 480 }), Youtube.configure({ width: 640, height: 480 }),
// Code (Standard Block ohne Bunte Farben, dafür stabil) Table.configure({ resizable: true }), TableRow, TableHeader, TableCell,
CodeBlock,
// Tables // TASK LIST KONFIGURATION
Table.configure({ resizable: true }), TaskList,
TableRow, TaskItem.configure({
TableHeader, nested: true,
TableCell, }).extend({
// HIER SAGEN WIR TIPTAP: BENUTZE UNSERE VUE KOMPONENTE
addNodeView() {
return VueNodeViewRenderer(TiptapTaskItem)
},
}),
], ],
editorProps: { editorProps: {
attributes: { attributes: {
class: 'focus:outline-none min-h-[500px] pb-40', class: 'min-h-[500px] pb-40',
}, },
}, },
onUpdate: ({ editor }) => { onUpdate: ({ editor }) => {
@@ -166,8 +141,6 @@ 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
@@ -181,85 +154,59 @@ const setLink = () => {
} }
const addVideo = () => { const addVideo = () => {
const url = prompt('YouTube URL eingeben:') const url = prompt('Video URL:')
if (url && editor.value) { if (url && editor.value) editor.value.commands.setYoutubeVideo({ src: url })
editor.value.commands.setYoutubeVideo({ src: url })
}
} }
</script> </script>
<style scoped> <style scoped>
/* Toolbar & Buttons */ /* 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 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-sm font-medium min-w-[28px] h-[28px] flex items-center justify-center;
} }
.toolbar-btn.is-active { .toolbar-btn.is-active {
@apply bg-gray-200 text-black shadow-inner; @apply bg-gray-200 dark:bg-gray-600 text-black dark:text-white shadow-inner;
} }
.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 dark:hover:bg-gray-700 rounded transition-colors text-sm min-w-[24px] h-[24px] flex items-center justify-center text-gray-700 dark:text-gray-200;
} }
.bubble-btn.is-active { .bubble-btn.is-active {
@apply bg-gray-200 text-black; @apply bg-gray-200 dark:bg-gray-600 text-black dark:text-white;
} }
/* EDITOR CSS RESET & STYLES */ /* EDITOR STYLES */
:deep(.prose) { :deep(.prose) {
/* Cursor Fix */
/* 1. TABLE FIX */ .ProseMirror {
table { outline: none;
width: 100% !important; caret-color: currentColor;
border-collapse: collapse;
table-layout: fixed;
margin: 1rem 0;
} }
th, td {
border: 1px solid #d1d5db;
padding: 0.5rem;
vertical-align: top;
box-sizing: border-box;
min-width: 1em;
}
th { background-color: #f3f4f6; font-weight: 600; text-align: left; }
.column-resize-handle { background-color: #3b82f6; bottom: -2px; position: absolute; right: -2px; pointer-events: none; top: 0; width: 4px; }
/* 2. TASK LIST FIX */ /* LIST RESET: Wir müssen nur die UL resetten, die LI wird von Vue gerendert */
ul[data-type="taskList"] { list-style: none !important; padding: 0 !important; margin: 0 !important; } ul[data-type="taskList"] {
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; } list-style: none;
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; }
/* 3. HIGHLIGHT */
mark { background-color: #fef08a; padding: 0.1rem 0.2rem; border-radius: 0.2rem; }
/* 4. YOUTUBE / VIDEO */
div[data-youtube-video] { cursor: move; padding-right: 1.5rem; }
iframe { border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); margin: 1rem 0; }
/* 5. CODE BLOCK (Standard Style - Dark Mode Look) */
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; padding: 0;
background: none; margin: 0;
font-size: 0.9rem;
} }
/* Placeholder & Selection */ /* Table Fixes */
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; }
th { background-color: #f3f4f6; font-weight: 600; text-align: left; }
.dark th { background-color: #1f2937; }
.column-resize-handle { background-color: #3b82f6; width: 4px; }
/* Code Block */
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 { max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 1rem 0; }
/* Misc */
mark { background-color: #fef08a; padding: 0.1rem 0.2rem; border-radius: 0.2rem; }
.ProseMirror-selectednode { outline: 2px solid #3b82f6; } .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; } 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>