You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and dots ('.'), can be up to 35 characters long. Letters must be lowercase.
339 lines
12 KiB
339 lines
12 KiB
<script setup> |
|
import { reactive, ref } from 'vue'; |
|
import { BubbleMenu } from '@tiptap/vue-3' |
|
const props = defineProps({ |
|
editor: { |
|
type: Object, |
|
required: true, |
|
} |
|
}); |
|
const editor = reactive(props.editor); |
|
|
|
const commonColors = [ |
|
'#000000', '#343a40', '#495057', '#6c757d', '#adb5bd', '#ced4da', '#dee2e6', '#e9ecef', '#f8f9fa', '#ffffff', |
|
'#c92a2a', '#a61e4d', '#862e9c', '#5f3dc4', '#364fc7', '#1864ab', '#0b7285', '#087f5b', '#2b8a3e', '#5c940d', |
|
'#e67700', '#d9480f' |
|
] |
|
|
|
const addTable = () => { |
|
editor |
|
.chain() |
|
.focus() |
|
.insertTable({ rows: 3, cols: 3, withHeaderRow: true }) |
|
.run() |
|
} |
|
|
|
const isTableActive = () => { |
|
return editor && ( |
|
editor.isActive('table') || |
|
editor.isActive('tableRow') || |
|
editor.isActive('tableCell') || |
|
editor.isActive('tableHeader') |
|
) |
|
} |
|
|
|
// Table operations |
|
const addColumnBefore = () => { |
|
editor.chain().focus().addColumnBefore().run() |
|
} |
|
|
|
const addColumnAfter = () => { |
|
editor.chain().focus().addColumnAfter().run() |
|
} |
|
|
|
const deleteColumn = () => { |
|
editor.chain().focus().deleteColumn().run() |
|
} |
|
|
|
const addRowBefore = () => { |
|
editor.chain().focus().addRowBefore().run() |
|
} |
|
|
|
const addRowAfter = () => { |
|
editor.chain().focus().addRowAfter().run() |
|
} |
|
|
|
const deleteRow = () => { |
|
editor.chain().focus().deleteRow().run() |
|
} |
|
|
|
const deleteTable = () => { |
|
editor.chain().focus().deleteTable().run() |
|
} |
|
|
|
const toggleHeaderColumn = () => { |
|
editor.chain().focus().toggleHeaderColumn().run() |
|
} |
|
|
|
const toggleHeaderRow = () => { |
|
editor.chain().focus().toggleHeaderRow().run() |
|
} |
|
|
|
const mergeCells = () => { |
|
editor.chain().focus().mergeCells().run() |
|
} |
|
|
|
const splitCell = () => { |
|
editor.chain().focus().splitCell().run() |
|
} |
|
</script> |
|
<template> |
|
<!-- Bubble Menu for Inline Formatting --> |
|
<bubble-menu |
|
v-if="editor" |
|
:editor="editor" |
|
:tippy-options="{ duration: 100, placement: 'bottom' }" |
|
class="z-50 bg-white border border-gray-200 rounded-lg shadow-lg p-2 flex space-x-2 flex-wrap" |
|
> |
|
<div class="flex items-center space-x-1 p-1"> |
|
<!-- Text Formatting Buttons --> |
|
<button |
|
@click="editor.chain().focus().toggleBold().run()" |
|
class="p-1.5 rounded hover:bg-gray-100" |
|
:class="{ 'bg-gray-200': editor.isActive('bold') }" |
|
title="Bold" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<path d="M6 12h8a4 4 0 0 0 0-8H6v8z"></path> |
|
<path d="M6 12h9a4 4 0 0 1 0 8H6v-8z"></path> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="editor.chain().focus().toggleItalic().run()" |
|
class="p-1.5 rounded hover:bg-gray-100" |
|
:class="{ 'bg-gray-200': editor.isActive('italic') }" |
|
title="Italic" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<line x1="19" y1="4" x2="10" y2="4"></line> |
|
<line x1="14" y1="20" x2="5" y2="20"></line> |
|
<line x1="15" y1="4" x2="9" y2="20"></line> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="editor.chain().focus().toggleUnderline().run()" |
|
class="p-1.5 rounded hover:bg-gray-100" |
|
:class="{ 'bg-gray-200': editor.isActive('underline') }" |
|
title="Underline" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<path d="M6 4v6a6 6 0 0 0 6 6 6 6 0 0 0 6-6V4"></path> |
|
<line x1="4" y1="20" x2="20" y2="20"></line> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="editor.chain().focus().toggleStrike().run()" |
|
class="p-1.5 rounded hover:bg-gray-100" |
|
:class="{ 'bg-gray-200': editor.isActive('strike') }" |
|
title="Strikethrough" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<line x1="5" y1="12" x2="19" y2="12"></line> |
|
<path d="M16 6l-4 4-4-4"></path> |
|
<path d="M8 18l4-4 4 4"></path> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="editor.chain().focus().toggleHighlight().run()" |
|
class="p-1.5 rounded hover:bg-gray-100" |
|
:class="{ 'bg-gray-200': editor.isActive('highlight') }" |
|
title="Highlight" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<rect x="4" y="4" width="16" height="16" rx="2"></rect> |
|
<rect x="9" y="9" width="6" height="6" fill="currentColor"></rect> |
|
</svg> |
|
</button> |
|
|
|
<div class="h-5 w-px bg-gray-300 mx-1"></div> |
|
|
|
<!-- Link Buttons --> |
|
<button |
|
v-if="!editor.isActive('link')" |
|
@click="setLink" |
|
class="p-1.5 rounded hover:bg-gray-100" |
|
title="Add Link" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path> |
|
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> |
|
</svg> |
|
</button> |
|
|
|
<div v-if="editor.isActive('link')" class="flex space-x-1"> |
|
<button |
|
@click="setLink" |
|
class="p-1.5 rounded hover:bg-gray-100 bg-gray-200" |
|
title="Edit Link" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path> |
|
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> |
|
</svg> |
|
</button> |
|
<button |
|
@click="removeLink" |
|
class="p-1.5 rounded hover:bg-gray-100" |
|
title="Remove Link" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path> |
|
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> |
|
<line x1="2" y1="2" x2="22" y2="22"></line> |
|
</svg> |
|
</button> |
|
</div> |
|
|
|
<div class="h-5 w-px bg-gray-300 mx-1"></div> |
|
|
|
<!-- Color Dropdown --> |
|
<div class="relative group"> |
|
<button |
|
class="p-1.5 rounded hover:bg-gray-100 flex items-center" |
|
title="Text Color" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<path d="M12 2L18 11H6L12 2Z" fill="currentColor"></path> |
|
<line x1="5" y1="19" x2="19" y2="19"></line> |
|
</svg> |
|
</button> |
|
<div class="absolute hidden group-hover:grid grid-cols-6 gap-1 p-2 bg-white rounded-lg shadow-lg border border-gray-200 z-50 w-48 top-full left-0 mt-1"> |
|
<button |
|
v-for="color in commonColors" |
|
:key="color" |
|
@click="setColor(color)" |
|
class="w-6 h-6 rounded-full border border-gray-300" |
|
:style="{ backgroundColor: color }" |
|
:title="color" |
|
></button> |
|
</div> |
|
</div> |
|
|
|
<div class="h-5 w-px bg-gray-300 mx-1"></div> |
|
|
|
<!-- Clear formatting --> |
|
<button |
|
@click="editor.chain().focus().unsetAllMarks().run()" |
|
class="p-1.5 rounded hover:bg-gray-100" |
|
title="Clear Formatting" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<path d="M12 19l-7-7 7-7"></path> |
|
<path d="M19 19V5"></path> |
|
</svg> |
|
</button> |
|
</div> |
|
|
|
<!-- Show table menu if table is active --> |
|
<div v-if="isTableActive()" class="flex items-center space-x-1 border-l border-gray-300 pl-2"> |
|
<button |
|
@click="addColumnBefore" |
|
class="p-1.5 rounded hover:bg-gray-100" |
|
title="Add Column Before" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect> |
|
<line x1="9" y1="3" x2="9" y2="21"></line> |
|
<path d="M6 12h6"></path> |
|
<path d="M9 9v6"></path> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="addColumnAfter" |
|
class="p-1.5 rounded hover:bg-gray-100" |
|
title="Add Column After" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect> |
|
<line x1="15" y1="3" x2="15" y2="21"></line> |
|
<path d="M12 12h6"></path> |
|
<path d="M15 9v6"></path> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="addRowBefore" |
|
class="p-1.5 rounded hover:bg-gray-100" |
|
title="Add Row Before" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect> |
|
<line x1="3" y1="9" x2="21" y2="9"></line> |
|
<path d="M12 6v6"></path> |
|
<path d="M9 9h6"></path> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="addRowAfter" |
|
class="p-1.5 rounded hover:bg-gray-100" |
|
title="Add Row After" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect> |
|
<line x1="3" y1="15" x2="21" y2="15"></line> |
|
<path d="M12 12v6"></path> |
|
<path d="M9 15h6"></path> |
|
</svg> |
|
</button> |
|
|
|
<div class="h-5 w-px bg-gray-300 mx-1"></div> |
|
|
|
<button |
|
@click="deleteRow" |
|
class="p-1.5 rounded hover:bg-gray-100" |
|
title="Delete Row" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect> |
|
<line x1="3" y1="9" x2="21" y2="9"></line> |
|
<line x1="9" y1="15" x2="15" y2="15"></line> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="deleteColumn" |
|
class="p-1.5 rounded hover:bg-gray-100" |
|
title="Delete Column" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect> |
|
<line x1="9" y1="3" x2="9" y2="21"></line> |
|
<line x1="15" y1="9" x2="15" y2="15"></line> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="mergeCells" |
|
class="p-1.5 rounded hover:bg-gray-100" |
|
title="Merge Cells" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect> |
|
<path d="M9 3v18"></path> |
|
<path d="M15 3v18"></path> |
|
<path d="M3 9h18"></path> |
|
<path d="M3 15h18"></path> |
|
<rect x="9" y="9" width="6" height="6" fill="currentColor" opacity="0.2"></rect> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="splitCell" |
|
class="p-1.5 rounded hover:bg-gray-100" |
|
title="Split Cell" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect> |
|
<path d="M12 3v18"></path> |
|
<path d="M3 12h18"></path> |
|
</svg> |
|
</button> |
|
</div> |
|
</bubble-menu> |
|
</template> |