From 5e55849716753f15523e8f02790f0486fe7e1491 Mon Sep 17 00:00:00 2001
From: Benjamin VIELLARD <bicou@bicou.com>
Date: Thu, 20 Apr 2023 20:52:19 +0200
Subject: [PATCH] feat: merge and split cells #17

---
 src/icons/merge-cells.vue |  7 +++++++
 src/icons/split-cell.vue  |  7 +++++++
 src/messages.json         |  8 ++++++--
 src/tiptap-editor.vue     | 22 ++++++++++++++++++++++
 4 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/icons/merge-cells.vue
 create mode 100644 src/icons/split-cell.vue

diff --git a/src/icons/merge-cells.vue b/src/icons/merge-cells.vue
new file mode 100644
index 0000000..e39fc3d
--- /dev/null
+++ b/src/icons/merge-cells.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path
+      d="M20 3C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H20ZM11 5H5V10.999H7V9L10 12L7 15V13H5V19H11V17H13V19H19V13H17V15L14 12L17 9V10.999H19V5H13V7H11V5ZM13 13V15H11V13H13ZM13 9V11H11V9H13Z"
+    ></path>
+  </svg>
+</template>
diff --git a/src/icons/split-cell.vue b/src/icons/split-cell.vue
new file mode 100644
index 0000000..7409305
--- /dev/null
+++ b/src/icons/split-cell.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path
+      d="M20 3C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H20ZM11 5H5V19H11V15H13V19H19V5H13V9H11V5ZM15 9L18 12L15 15V13H9V15L6 12L9 9V11H15V9Z"
+    ></path>
+  </svg>
+</template>
diff --git a/src/messages.json b/src/messages.json
index 00bca8f..ef45357 100644
--- a/src/messages.json
+++ b/src/messages.json
@@ -15,7 +15,9 @@
       "table_delete_column": "Delete column",
       "table_add_row_before": "Add row before",
       "table_add_row_after": "Add row after",
-      "table_delete_row": "Delete row"
+      "table_delete_row": "Delete row",
+      "table_merge_cells": "Merge cells",
+      "table_split_cell": "Split cell"
     }
   },
   "fr": {
@@ -34,7 +36,9 @@
       "table_delete_column": "Supprimer la colonne",
       "table_add_row_before": "Ajouter une ligne avant",
       "table_add_row_after": "Ajouter une ligne après",
-      "table_delete_row": "Supprimer la ligne"
+      "table_delete_row": "Supprimer la ligne",
+      "table_merge_cells": "Fusionner les cellules",
+      "table_split_cell": "Diviser la cellule"
     }
   }
 }
diff --git a/src/tiptap-editor.vue b/src/tiptap-editor.vue
index cdc18ff..0fad229 100644
--- a/src/tiptap-editor.vue
+++ b/src/tiptap-editor.vue
@@ -306,6 +306,26 @@
             </v-list-item-icon>
             <v-list-item-content><v-text-overflow :text="t(`tiptap.table_delete_row`)" /></v-list-item-content>
           </v-list-item>
+          <v-list-item
+            clickable
+            :disabled="!editor.isActive('table')"
+            @click="editor.chain().focus().mergeCells().run()"
+          >
+            <v-list-item-icon>
+              <icon-merge-cells />
+            </v-list-item-icon>
+            <v-list-item-content><v-text-overflow :text="t(`tiptap.table_merge_cells`)" /></v-list-item-content>
+          </v-list-item>
+          <v-list-item
+            clickable
+            :disabled="!editor.isActive('table')"
+            @click="editor.chain().focus().splitCell().run()"
+          >
+            <v-list-item-icon>
+              <icon-split-cell />
+            </v-list-item-icon>
+            <v-list-item-content><v-text-overflow :text="t(`tiptap.table_split_cell`)" /></v-list-item-content>
+          </v-list-item>
           <v-list-item
             clickable
             :disabled="!editor.isActive('table')"
@@ -813,6 +833,8 @@ import IconInsertRowTop from "./icons/insert-row-top.vue";
 import IconInsertRowBottom from "./icons/insert-row-bottom.vue";
 import IconDeleteRow from "./icons/delete-row.vue";
 import IconDeleteBin from "./icons/delete-bin.vue";
+import IconMergeCells from "./icons/merge-cells.vue";
+import IconSplitCell from "./icons/split-cell.vue";
 
 const { t } = useI18n({ messages });