feat: table operations #17

gbicou · Apr 20, 2023 · ba70f90 · ba70f90
1 parent 995f3ec
commit ba70f90
Show file tree

Hide file tree

Showing 9 changed files with 139 additions and 13 deletions.
diff --git a/src/icons/delete-bin.vue b/src/icons/delete-bin.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="M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z"
+    ></path>
+  </svg>
+</template>
diff --git a/src/icons/delete-column.vue b/src/icons/delete-column.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="M12 3C12.5523 3 13 3.44772 13 4L12.9998 11.9998C13.8355 11.372 14.8743 11 16 11C18.7614 11 21 13.2386 21 16C21 18.7614 18.7614 21 16 21C14.9681 21 14.0092 20.6874 13.2129 20.1518L13 20C13 20.5523 12.5523 21 12 21H6C5.44772 21 5 20.5523 5 20V4C5 3.44772 5.44772 3 6 3H12ZM11 5H7V19H11V5ZM19 15H13V17H19V15Z"
+    ></path>
+  </svg>
+</template>
diff --git a/src/icons/delete-row.vue b/src/icons/delete-row.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 5C20.5523 5 21 5.44772 21 6V12C21 12.5523 20.5523 13 20 13C20.628 13.8355 21 14.8743 21 16C21 18.7614 18.7614 21 16 21C13.2386 21 11 18.7614 11 16C11 14.8743 11.372 13.8355 11.9998 12.9998L4 13C3.44772 13 3 12.5523 3 12V6C3 5.44772 3.44772 5 4 5H20ZM13 15V17H19V15H13ZM19 7H5V11H19V7Z"
+    ></path>
+  </svg>
+</template>
diff --git a/src/icons/insert-column-left.vue b/src/icons/insert-column-left.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 21H14C13.4477 21 13 20.5523 13 20V4C13 3.44772 13.4477 3 14 3H20ZM19 5H15V19H19V5ZM6 7C8.76142 7 11 9.23858 11 12C11 14.7614 8.76142 17 6 17C3.23858 17 1 14.7614 1 12C1 9.23858 3.23858 7 6 7ZM7 9H5V10.999L3 11V13L5 12.999V15H7V12.999L9 13V11L7 10.999V9Z"
+    ></path>
+  </svg>
+</template>
diff --git a/src/icons/insert-column-right.vue b/src/icons/insert-column-right.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="M10 3C10.5523 3 11 3.44772 11 4V20C11 20.5523 10.5523 21 10 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H10ZM9 5H5V19H9V5ZM18 7C20.7614 7 23 9.23858 23 12C23 14.7614 20.7614 17 18 17C15.2386 17 13 14.7614 13 12C13 9.23858 15.2386 7 18 7ZM19 9H17V10.999L15 11V13L17 12.999V15H19V12.999L21 13V11L19 10.999V9Z"
+    ></path>
+  </svg>
+</template>
diff --git a/src/icons/insert-row-bottom.vue b/src/icons/insert-row-bottom.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="M12 13C14.7614 13 17 15.2386 17 18C17 20.7614 14.7614 23 12 23C9.23858 23 7 20.7614 7 18C7 15.2386 9.23858 13 12 13ZM13 15H11V16.999L9 17V19L11 18.999V21H13V18.999L15 19V17L13 16.999V15ZM20 3C20.5523 3 21 3.44772 21 4V10C21 10.5523 20.5523 11 20 11H4C3.44772 11 3 10.5523 3 10V4C3 3.44772 3.44772 3 4 3H20ZM5 5V9H19V5H5Z"
+    ></path>
+  </svg>
+</template>
diff --git a/src/icons/insert-row-top.vue b/src/icons/insert-row-top.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 13C20.5523 13 21 13.4477 21 14V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V14C3 13.4477 3.44772 13 4 13H20ZM19 15H5V19H19V15ZM12 1C14.7614 1 17 3.23858 17 6C17 8.76142 14.7614 11 12 11C9.23858 11 7 8.76142 7 6C7 3.23858 9.23858 1 12 1ZM13 3H11V4.999L9 5V7L11 6.999V9H13V6.999L15 7V5L13 4.999V3Z"
+    ></path>
+  </svg>
+</template>
diff --git a/src/messages.json b/src/messages.json
@@ -7,7 +7,15 @@
       "highlight": "Highlight",
       "count_chars": "no characters | 1 character | {count} characters",
       "count_words": "no words | 1 word | {count} words",
-      "text_align": "Text align"
+      "text_align": "Text align",
+      "table_insert": "Insert table",
+      "table_delete": "Delete table",
+      "table_add_column_before": "Add column before",
+      "table_add_column_after": "Add column after",
+      "table_delete_column": "Delete column",
+      "table_add_row_before": "Add row before",
+      "table_add_row_after": "Add row after",
+      "table_delete_row": "Delete row"
     }
   },
   "fr": {
@@ -18,7 +26,15 @@
       "highlight": "Surligner",
       "count_chars": "aucun caractère | 1 caractère | {count} caractères",
       "count_words": "aucun mot | 1 mot | {count} mots",
-      "text_align": "Alignement du texte"
+      "text_align": "Alignement du texte",
+      "table_insert": "Insérer un tableau",
+      "table_delete": "Supprimer le tableau",
+      "table_add_column_before": "Ajouter une colonne avant",
+      "table_add_column_after": "Ajouter une colonne après",
+      "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"
     }
   }
 }
diff --git a/src/tiptap-editor.vue b/src/tiptap-editor.vue
@@ -225,17 +225,71 @@
         <icon-quote-text />
       </v-button>
 
-      <v-button
-        v-if="editorExtensions.includes('table')"
-        v-tooltip="t('wysiwyg_options.table')"
-        small
-        icon
-        :disabled="props.disabled"
-        :active="editor.isActive('table')"
-        @click="editor.chain().focus().insertTable().run()"
-      >
-        <icon-table />
-      </v-button>
+      <v-menu v-if="editorExtensions.includes('table')" show-arrow placement="bottom-start">
+        <template #activator="{ toggle }">
+          <v-button
+            v-tooltip="t('wysiwyg_options.table')"
+            :disabled="props.disabled"
+            small
+            icon
+            :active="editor.isActive('table')"
+            @click="toggle"
+          >
+            <icon-table />
+          </v-button>
+        </template>
+        <v-list>
+          <v-list-item clickable @click="editor.chain().focus().insertTable().run()">
+            <v-list-item-icon>
+              <icon-table />
+            </v-list-item-icon>
+            <v-list-item-content><v-text-overflow :text="t(`tiptap.table_insert`)" /></v-list-item-content>
+          </v-list-item>
+          <v-list-item clickable :disabled="!editor.isActive('table')" @click="editor.chain().focus().addColumnBefore().run()">
+            <v-list-item-icon>
+              <icon-insert-column-left />
+            </v-list-item-icon>
+            <v-list-item-content><v-text-overflow :text="t(`tiptap.table_add_column_before`)" /></v-list-item-content>
+          </v-list-item>
+          <v-list-item clickable :disabled="!editor.isActive('table')" @click="editor.chain().focus().addColumnAfter().run()">
+            <v-list-item-icon>
+              <icon-insert-column-right />
+            </v-list-item-icon>
+            <v-list-item-content><v-text-overflow :text="t(`tiptap.table_add_column_after`)" /></v-list-item-content>
+          </v-list-item>
+          <v-list-item clickable :disabled="!editor.isActive('table')" @click="editor.chain().focus().deleteColumn().run()">
+            <v-list-item-icon>
+              <icon-delete-column />
+            </v-list-item-icon>
+            <v-list-item-content><v-text-overflow :text="t(`tiptap.table_delete_column`)" /></v-list-item-content>
+          </v-list-item>
+
+          <v-list-item clickable :disabled="!editor.isActive('table')" @click="editor.chain().focus().addRowBefore().run()">
+            <v-list-item-icon>
+              <icon-insert-row-top />
+            </v-list-item-icon>
+            <v-list-item-content><v-text-overflow :text="t(`tiptap.table_add_row_before`)" /></v-list-item-content>
+          </v-list-item>
+          <v-list-item clickable :disabled="!editor.isActive('table')" @click="editor.chain().focus().addRowAfter().run()">
+            <v-list-item-icon>
+              <icon-insert-row-bottom />
+            </v-list-item-icon>
+            <v-list-item-content><v-text-overflow :text="t(`tiptap.table_add_row_after`)" /></v-list-item-content>
+          </v-list-item>
+          <v-list-item clickable :disabled="!editor.isActive('table')" @click="editor.chain().focus().deleteRow().run()">
+            <v-list-item-icon>
+              <icon-delete-row />
+            </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().deleteTable().run()">
+            <v-list-item-icon>
+              <icon-delete-bin />
+            </v-list-item-icon>
+            <v-list-item-content><v-text-overflow :text="t(`tiptap.table_delete`)" /></v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-menu>
 
       <v-button
         v-if="editorExtensions.includes('codeBlock')"
@@ -710,6 +764,13 @@ import type { TaskItemOptions } from "@tiptap/extension-task-item";
 import task from "./extensions/task";
 import type { TableOptions } from "@tiptap/extension-table";
 import table from "./extensions/table";
+import IconInsertColumnLeft from "./icons/insert-column-left.vue";
+import IconInsertColumnRight from "./icons/insert-column-right.vue";
+import IconDeleteColumn from "./icons/delete-column.vue";
+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";
 
 const { t } = useI18n({ messages });