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.
241 lines
7.1 KiB
241 lines
7.1 KiB
<script setup> |
|
import { reactive, ref } from 'vue'; |
|
const props = defineProps({ |
|
editor: { |
|
type: Object, |
|
required: true, |
|
} |
|
}); |
|
const editor = reactive(props.editor); |
|
|
|
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> |
|
<!-- Tables Tab --> |
|
<div class="flex items-center space-x-2 flex-wrap"> |
|
<button |
|
@click="addTable" |
|
class="p-1 rounded hover:bg-gray-100 flex items-center" |
|
title="Insert Table" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> |
|
<line x1="3" y1="9" x2="21" y2="9"></line> |
|
<line x1="3" y1="15" x2="21" y2="15"></line> |
|
<line x1="9" y1="3" x2="9" y2="21"></line> |
|
<line x1="15" y1="3" x2="15" y2="21"></line> |
|
</svg> |
|
<span class="ml-1 text-sm">New Table</span> |
|
</button> |
|
|
|
<div class="border-r border-gray-300 h-6 mx-1"></div> |
|
|
|
<button |
|
@click="addColumnBefore" |
|
class="p-1 rounded hover:bg-gray-100" |
|
title="Add Column Before" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect> |
|
<line x1="9" y1="3" x2="9" y2="21"></line> |
|
<line x1="6" y1="12" x2="12" y2="12"></line> |
|
<line x1="9" y1="9" x2="9" y2="15"></line> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="addColumnAfter" |
|
class="p-1 rounded hover:bg-gray-100" |
|
title="Add Column After" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect> |
|
<line x1="15" y1="3" x2="15" y2="21"></line> |
|
<line x1="12" y1="12" x2="18" y2="12"></line> |
|
<line x1="15" y1="9" x2="15" y2="15"></line> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="deleteColumn" |
|
class="p-1 rounded hover:bg-gray-100" |
|
title="Delete Column" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect> |
|
<line x1="15" y1="3" x2="15" y2="21"></line> |
|
<line x1="9" y1="3" x2="9" y2="21"></line> |
|
<line x1="12" y1="9" x2="12" y2="15"></line> |
|
</svg> |
|
</button> |
|
|
|
<div class="border-r border-gray-300 h-6 mx-1"></div> |
|
|
|
<button |
|
@click="addRowBefore" |
|
class="p-1 rounded hover:bg-gray-100" |
|
title="Add Row Before" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect> |
|
<line x1="3" y1="9" x2="21" y2="9"></line> |
|
<line x1="12" y1="6" x2="12" y2="12"></line> |
|
<line x1="9" y1="9" x2="15" y2="9"></line> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="addRowAfter" |
|
class="p-1 rounded hover:bg-gray-100" |
|
title="Add Row After" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect> |
|
<line x1="3" y1="15" x2="21" y2="15"></line> |
|
<line x1="12" y1="12" x2="12" y2="18"></line> |
|
<line x1="9" y1="15" x2="15" y2="15"></line> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="deleteRow" |
|
class="p-1 rounded hover:bg-gray-100" |
|
title="Delete Row" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect> |
|
<line x1="3" y1="15" x2="21" y2="15"></line> |
|
<line x1="3" y1="9" x2="21" y2="9"></line> |
|
<line x1="12" y1="12" x2="12" y2="12"></line> |
|
</svg> |
|
</button> |
|
|
|
<div class="border-r border-gray-300 h-6 mx-1"></div> |
|
|
|
<button |
|
@click="toggleHeaderRow" |
|
class="p-1 rounded hover:bg-gray-100" |
|
title="Toggle Header Row" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect> |
|
<line x1="3" y1="9" x2="21" y2="9"></line> |
|
<path d="M6 6h12"></path> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="toggleHeaderColumn" |
|
class="p-1 rounded hover:bg-gray-100" |
|
title="Toggle Header Column" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<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 6v12"></path> |
|
</svg> |
|
</button> |
|
|
|
<div class="border-r border-gray-300 h-6 mx-1"></div> |
|
|
|
<button |
|
@click="mergeCells" |
|
class="p-1 rounded hover:bg-gray-100" |
|
title="Merge Cells" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect> |
|
<line x1="9" y1="3" x2="9" y2="21" stroke-dasharray="4"></line> |
|
</svg> |
|
</button> |
|
|
|
<button |
|
@click="splitCell" |
|
class="p-1 rounded hover:bg-gray-100" |
|
title="Split Cell" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
<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="3" x2="15" y2="21"></line> |
|
</svg> |
|
</button> |
|
|
|
<div class="border-r border-gray-300 h-6 mx-1"></div> |
|
|
|
<button |
|
@click="deleteTable" |
|
class="p-1 rounded hover:bg-gray-100" |
|
title="Delete Table" |
|
> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
<path d="M3 6h18"></path> |
|
<path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6"></path> |
|
<path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"></path> |
|
<line x1="10" y1="11" x2="10" y2="17"></line> |
|
<line x1="14" y1="11" x2="14" y2="17"></line> |
|
</svg> |
|
</button> |
|
</div> |
|
</template> |