256 lines
9.2 KiB
Vue
256 lines
9.2 KiB
Vue
<template>
|
|
<div class="flex flex-col h-full bg-white 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 class="flex gap-0.5 border-r border-gray-200 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().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>
|
|
</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>
|
|
</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().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>
|
|
|
|
<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>
|
|
|
|
<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().deleteTable().run()" class="toolbar-btn text-red-500 hover:bg-red-50 ml-1" title="Tabelle löschen">🗑</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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"
|
|
>
|
|
<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>
|
|
</BubbleMenu>
|
|
|
|
<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>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { watch } from 'vue'
|
|
|
|
// Tiptap Core Imports
|
|
import { useEditor, EditorContent } from '@tiptap/vue-3'
|
|
// @ts-ignore
|
|
import { BubbleMenu } 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 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'
|
|
|
|
// Table Imports (Named Imports um Vite Fehler zu vermeiden)
|
|
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 emit = defineEmits(['update:modelValue'])
|
|
|
|
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
|
|
|
|
// Task List Configuration
|
|
TaskList,
|
|
TaskItem.configure({ nested: true }),
|
|
|
|
// Table Configuration
|
|
Table.configure({ resizable: true }),
|
|
TableRow,
|
|
TableHeader,
|
|
TableCell,
|
|
],
|
|
editorProps: {
|
|
attributes: {
|
|
class: 'focus:outline-none min-h-[500px] pb-40',
|
|
},
|
|
},
|
|
onUpdate: ({ editor }) => {
|
|
emit('update:modelValue', editor.getJSON())
|
|
},
|
|
})
|
|
|
|
watch(() => props.modelValue, (val) => {
|
|
if (editor.value && JSON.stringify(val) !== JSON.stringify(editor.value.getJSON())) {
|
|
editor.value.commands.setContent(val, false)
|
|
}
|
|
})
|
|
|
|
const setLink = () => {
|
|
if (!editor.value) return
|
|
const previousUrl = editor.value.getAttributes('link').href
|
|
const url = window.prompt('URL eingeben:', previousUrl)
|
|
if (url === null) return
|
|
if (url === '') {
|
|
editor.value.chain().focus().extendMarkRange('link').unsetLink().run()
|
|
return
|
|
}
|
|
editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 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;
|
|
}
|
|
.toolbar-btn.is-active {
|
|
@apply bg-gray-200 text-black shadow-inner;
|
|
}
|
|
.bubble-btn {
|
|
@apply px-2 py-1 hover:bg-gray-700 rounded transition-colors;
|
|
}
|
|
|
|
/* WICHTIGE CSS REGELN FÜR EDITOR
|
|
Dies überschreibt die Tailwind Typography Defaults, die das Layout zerschießen.
|
|
*/
|
|
:deep(.prose) {
|
|
|
|
/* --- 1. TABELLEN (Volle Breite erzwingen) --- */
|
|
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;
|
|
}
|
|
|
|
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 (Checkbox Layout Fix) --- */
|
|
|
|
/* Liste resetten */
|
|
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;
|
|
align-items: flex-start !important;
|
|
margin-bottom: 0.25rem !important;
|
|
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 */
|
|
user-select: none;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
li[data-type="taskItem"] > label > input {
|
|
margin: 0 !important;
|
|
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 */
|
|
li[data-type="taskItem"] div > p {
|
|
margin: 0 !important;
|
|
display: block !important;
|
|
}
|
|
|
|
/* Standard Marker entfernen */
|
|
li[data-type="taskItem"]::marker,
|
|
li[data-type="taskItem"]::before {
|
|
content: none !important;
|
|
display: none !important;
|
|
}
|
|
|
|
/* --- SONSTIGES --- */
|
|
.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> |