Added more text functions
This commit is contained in:
@@ -1,79 +1,74 @@
|
||||
<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
|
||||
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` }"
|
||||
@click.stop="handleClick"
|
||||
>
|
||||
<button
|
||||
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 }"
|
||||
@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>
|
||||
<span v-else class="w-4"></span>
|
||||
|
||||
<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 class="text-gray-400 shrink-0 flex items-center">
|
||||
<UIcon v-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" />
|
||||
</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 @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-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">
|
||||
<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 @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
|
||||
</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 @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">
|
||||
<UIcon name="i-heroicons-folder-plus" class="w-3 h-3 text-yellow-500" /> Neuer Ordner
|
||||
</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>
|
||||
|
||||
<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 @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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 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 router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
// Composable Actions holen
|
||||
const { createItem, deleteItem } = useWikiTree()
|
||||
// --- INJECT ---
|
||||
// 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 indent = computed(() => 0.5 + (depth * 0.7))
|
||||
@@ -81,7 +76,7 @@ const isOpen = ref(false)
|
||||
const showMenu = ref(false)
|
||||
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) => {
|
||||
if (props.item.isFolder && hasActiveChild(props.item, newId as string)) isOpen.value = true
|
||||
}, { immediate: true })
|
||||
@@ -99,31 +94,14 @@ function toggleFolder() { isOpen.value = !isOpen.value }
|
||||
|
||||
// --- ACTIONS ---
|
||||
|
||||
async function createChild(isFolder: boolean) {
|
||||
function triggerCreate(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}`)
|
||||
}
|
||||
isOpen.value = true // Ordner aufklappen
|
||||
openWikiAction('create', props.item, isFolder)
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
function triggerDelete() {
|
||||
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')
|
||||
}
|
||||
openWikiAction('delete', props.item)
|
||||
}
|
||||
</script>
|
||||
@@ -11,25 +11,29 @@
|
||||
</div>
|
||||
|
||||
<div class="flex gap-0.5 border-r border-gray-200 pr-2 mr-2">
|
||||
<button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }" class="toolbar-btn" title="Überschrift 1">H1</button>
|
||||
<button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" class="toolbar-btn" title="Überschrift 2">H2</button>
|
||||
<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="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"></></button>
|
||||
</div>
|
||||
|
||||
<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().toggleTaskList().run()" :class="{ 'is-active': editor.isActive('taskList') }" class="toolbar-btn" title="Checkliste">☑ Task</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">☑</button>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-0.5 items-center">
|
||||
<button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()" class="toolbar-btn" title="Tabelle einfügen">▦ Tab</button>
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
@@ -38,34 +42,41 @@
|
||||
v-if="editor"
|
||||
:editor="editor"
|
||||
: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().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>
|
||||
|
||||
<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 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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<button @click="setLink" :class="{ 'is-active': editor.isActive('link') }" class="bubble-btn text-sm">Link</button>
|
||||
</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"><></button>
|
||||
</FloatingMenu>
|
||||
|
||||
<editor-content
|
||||
:editor="editor"
|
||||
class="flex-1 overflow-y-auto px-8 py-6 prose prose-slate max-w-none focus:outline-none custom-editor-area"
|
||||
/>
|
||||
|
||||
<div 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>
|
||||
</template>
|
||||
|
||||
@@ -75,20 +86,27 @@ import { watch } from 'vue'
|
||||
// Tiptap Core
|
||||
import { useEditor, EditorContent } from '@tiptap/vue-3'
|
||||
// @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 Placeholder from '@tiptap/extension-placeholder'
|
||||
|
||||
// Extensions
|
||||
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'
|
||||
import Image from '@tiptap/extension-image'
|
||||
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 { TableRow } from '@tiptap/extension-table-row'
|
||||
import { TableCell } from '@tiptap/extension-table-cell'
|
||||
@@ -100,24 +118,31 @@ const emit = defineEmits(['update:modelValue'])
|
||||
const editor = useEditor({
|
||||
content: props.modelValue,
|
||||
extensions: [
|
||||
StarterKit,
|
||||
Placeholder.configure({ placeholder: 'Tippe "/" für Befehle oder schreibe los...' }),
|
||||
|
||||
// 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)
|
||||
},
|
||||
StarterKit.configure({
|
||||
codeBlock: false, // Standard StarterKit Block aus, wir laden unseren eigenen
|
||||
}),
|
||||
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 }),
|
||||
Image, // Für Copy-Paste Bilder aktiv lassen
|
||||
Highlight, // Gelber Marker
|
||||
Image,
|
||||
Highlight,
|
||||
Typography,
|
||||
CharacterCount,
|
||||
|
||||
// Tasks
|
||||
// Struktur
|
||||
TaskList,
|
||||
TaskItem.configure({ nested: true }),
|
||||
Youtube.configure({ width: 640, height: 480 }),
|
||||
|
||||
// Code (Standard Block ohne Bunte Farben, dafür stabil)
|
||||
CodeBlock,
|
||||
|
||||
// Tables
|
||||
Table.configure({ resizable: true }),
|
||||
@@ -141,6 +166,8 @@ watch(() => props.modelValue, (val) => {
|
||||
}
|
||||
})
|
||||
|
||||
// --- ACTIONS ---
|
||||
|
||||
const setLink = () => {
|
||||
if (!editor.value) return
|
||||
const previousUrl = editor.value.getAttributes('link').href
|
||||
@@ -152,10 +179,17 @@ const setLink = () => {
|
||||
}
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
/* Toolbar Button Styling */
|
||||
/* Toolbar & Buttons */
|
||||
.toolbar-btn {
|
||||
@apply p-1.5 rounded text-gray-600 hover:bg-gray-100 transition-colors text-sm font-medium min-w-[28px] h-[28px] flex items-center justify-center;
|
||||
}
|
||||
@@ -163,7 +197,6 @@ const setLink = () => {
|
||||
@apply bg-gray-200 text-black shadow-inner;
|
||||
}
|
||||
|
||||
/* Bubble Menu Button Styling */
|
||||
.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;
|
||||
}
|
||||
@@ -171,7 +204,7 @@ const setLink = () => {
|
||||
@apply bg-gray-200 text-black;
|
||||
}
|
||||
|
||||
/* CSS RESET & FIXES */
|
||||
/* EDITOR CSS RESET & STYLES */
|
||||
:deep(.prose) {
|
||||
|
||||
/* 1. TABLE FIX */
|
||||
@@ -181,7 +214,6 @@ const setLink = () => {
|
||||
table-layout: fixed;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid #d1d5db;
|
||||
padding: 0.5rem;
|
||||
@@ -189,97 +221,45 @@ const setLink = () => {
|
||||
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; }
|
||||
|
||||
th {
|
||||
background-color: #f3f4f6;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
}
|
||||
/* 2. TASK LIST FIX */
|
||||
ul[data-type="taskList"] { list-style: none !important; padding: 0 !important; margin: 0 !important; }
|
||||
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; }
|
||||
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 {
|
||||
background-color: #3b82f6;
|
||||
bottom: -2px;
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
}
|
||||
/* 3. HIGHLIGHT */
|
||||
mark { background-color: #fef08a; padding: 0.1rem 0.2rem; border-radius: 0.2rem; }
|
||||
|
||||
/* 2. TASK LIST FIX (Flexbox) */
|
||||
ul[data-type="taskList"] {
|
||||
list-style: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
/* 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; }
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
/* 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;
|
||||
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>
|
||||
Reference in New Issue
Block a user