scout-baslac.ch/resources/js/Components/Editor/Tabs/TableTab.vue

<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-1 flex-wrap text-sm text-gray-800">
  <button 
    @click="addTable" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    title="Insert Table"
  >
    nouv. table
  </button>
  
  <button 
    @click="addColumnBefore" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    title="Add Column Before"
  >
    column avant
  </button>
  
  <button 
    @click="addColumnAfter" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    title="Add Column After"
  >
    column après
  </button>
  
  <button 
    @click="deleteColumn" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    title="Delete Column"
  >
    retirer column
  </button>
  
  <button 
    @click="addRowBefore" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    title="Add Row Before"
  >
    ligne avant
  </button>
  
  <button 
    @click="addRowAfter" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    title="Add Row After"
  >
    ligne après
  </button>
  
  <button 
    @click="deleteRow" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    title="Delete Row"
  >
    retirer ligne
  </button>
  
  <button 
    @click="toggleHeaderRow" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    title="Toggle Header Row"
  >
    entête de ligne
  </button>
  
  <button 
    @click="toggleHeaderColumn" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    title="Toggle Header Column"
  >
    entête de column
  </button>
  
  <button 
    @click="mergeCells" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    title="Merge Cells"
  >
    fusionner
  </button>
  
  <button 
    @click="splitCell" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    title="Split Cell"
  >
    séparer
  </button>
  
  <button 
    @click="deleteTable" 
    class="px-2 py-0.5 rounded-lg hover:bg-red-600 bg-red-500 my-0.5 text-white"
    title="Delete Table"
  >
    supprimer la table
  </button>
</div>
</template>