Support Tabels

packages/frontend/package.json

@@ -11,6 +11,10 @@
     "@tiptap/extension-image": "^2.12.0",
     "@tiptap/extension-mention": "^2.12.0",
     "@tiptap/extension-placeholder": "^2.12.0",
+    "@tiptap/extension-table": "^2.27.1",
+    "@tiptap/extension-table-cell": "^2.27.1",
+    "@tiptap/extension-table-header": "^2.27.1",
+    "@tiptap/extension-table-row": "^2.27.1",
     "@tiptap/pm": "^2.12.0",
     "@tiptap/starter-kit": "^2.12.0",
     "@tiptap/vue-3": "^2.12.0",

packages/frontend/src/components/content/editor/NoteEditor.vue

@@ -7,12 +7,17 @@
       autocapitalize="off"
       class="editor-wrapper"
     />
+    <TableMenu v-if="editor" :editor="editor" />
     <SearchUI v-if="editor" :editor="editor" />
   </div>
 </template>
 <script setup lang="ts">
 import { Image as ImageExtension } from "@tiptap/extension-image";
 import { Placeholder } from "@tiptap/extension-placeholder";
+import Table from "@tiptap/extension-table";
+import TableCell from "@tiptap/extension-table-cell";
+import TableHeader from "@tiptap/extension-table-header";
+import TableRow from "@tiptap/extension-table-row";
 import { type Slice } from "@tiptap/pm/model";
 import { type EditorView } from "@tiptap/pm/view";
 import { StarterKit } from "@tiptap/starter-kit";
@@ -29,6 +34,8 @@
 import createSuggestion from "./extensions/mentions/suggestion";
 import { Search } from "./extensions/search";
 import SearchUI from "./extensions/search/SearchUI.vue";
+import { SlashCommands } from "./extensions/slash-commands";
+import TableMenu from "./TableMenu.vue";
 
 import { useSDK } from "@/plugins/sdk";
 import { useNotesStore } from "@/stores/notes";
@@ -169,6 +176,16 @@
         class: "caido-image",
       },
     }),
+    Table.configure({
+      resizable: true,
+      HTMLAttributes: {
+        class: "notes-table",
+      },
+    }),
+    TableRow,
+    TableHeader,
+    TableCell,
+    SlashCommands,
   ],
   editorProps: {
     attributes: {

packages/frontend/src/components/content/editor/TableMenu.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { BubbleMenu, type Editor } from "@tiptap/vue-3";
+
+const props = defineProps<{
+  editor: Editor;
+}>();
+
+const shouldShowMenu = () => {
+  if (!props.editor.isActive("table")) return false;
+  return (
+    props.editor.isActive("tableCell") || props.editor.isActive("tableHeader")
+  );
+};
+
+const addColumnBefore = () => {
+  props.editor.chain().focus().addColumnBefore().run();
+};
+
+const addColumnAfter = () => {
+  props.editor.chain().focus().addColumnAfter().run();
+};
+
+const deleteColumn = () => {
+  props.editor.chain().focus().deleteColumn().run();
+};
+
+const addRowBefore = () => {
+  props.editor.chain().focus().addRowBefore().run();
+};
+
+const addRowAfter = () => {
+  props.editor.chain().focus().addRowAfter().run();
+};
+
+const deleteRow = () => {
+  props.editor.chain().focus().deleteRow().run();
+};
+
+const deleteTable = () => {
+  props.editor.chain().focus().deleteTable().run();
+};
+</script>
+
+<template>
+  <BubbleMenu
+    :editor="editor"
+    :tippy-options="{ duration: 100, placement: 'top' }"
+    :should-show="shouldShowMenu"
+    class="table-menu"
+  >
+    <button title="Add column left" @click="addColumnBefore">+Col</button>
+    <button title="Add column right" @click="addColumnAfter">Col+</button>
+    <button title="Delete column" class="del" @click="deleteColumn">−Col</button>
+    <span class="sep"></span>
+    <button title="Add row above" @click="addRowBefore">+Row</button>
+    <button title="Add row below" @click="addRowAfter">Row+</button>
+    <button title="Delete row" class="del" @click="deleteRow">−Row</button>
+    <span class="sep"></span>
+    <button title="Delete table" class="del" @click="deleteTable">
+      <i class="fas fa-trash"></i>
+    </button>
+  </BubbleMenu>
+</template>
+
+<style scoped>
+.table-menu {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background: #27272a;
+  border: 1px solid #52525b;
+  border-radius: 6px;
+  padding: 4px 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.sep {
+  width: 1px;
+  height: 16px;
+  background: #52525b;
+  margin: 0 4px;
+}
+
+button {
+  padding: 3px 6px;
+  background: transparent;
+  border: none;
+  border-radius: 3px;
+  color: #a1a1aa;
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+button:hover {
+  background: #3f3f46;
+  color: #e5e5e5;
+}
+
+button.del {
+  color: #f87171;
+}
+
+button.del:hover {
+  background: rgba(248, 113, 113, 0.15);
+}
+
+button i {
+  font-size: 12px;
+}
+</style>

packages/frontend/src/components/content/editor/editor.css

@@ -103,3 +103,70 @@
   background-color: rgba(99, 102, 241, 0.5);
   outline: 1px solid rgba(99, 102, 241, 0.8);
 }
+
+.tiptap table,
+.notes-table {
+  border-collapse: collapse;
+  margin: 1rem 0;
+  width: 100%;
+  table-layout: fixed;
+}
+
+.tiptap table td,
+.tiptap table th,
+.notes-table td,
+.notes-table th {
+  border: 1px solid #52525b;
+  padding: 0.5rem 0.75rem;
+  position: relative;
+  vertical-align: top;
+  box-sizing: border-box;
+}
+
+.tiptap table th,
+.notes-table th {
+  background-color: #27272a;
+  font-weight: 600;
+  text-align: left;
+}
+
+.tiptap table td,
+.notes-table td {
+  background-color: #18181b;
+}
+
+.tiptap table .selectedCell,
+.notes-table .selectedCell {
+  background-color: rgba(99, 102, 241, 0.2);
+}
+
+.tiptap table .selectedCell::after,
+.notes-table .selectedCell::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border: 2px solid rgba(99, 102, 241, 0.6);
+}
+
+.tiptap .column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: 0;
+  bottom: -2px;
+  width: 4px;
+  background-color: #6366f1;
+  pointer-events: none;
+}
+
+.tiptap table p,
+.notes-table p {
+  margin: 0;
+}
+
+.tiptap .tableWrapper {
+  overflow-x: auto;
+  margin: 1rem 0;
+  width: 100%;
+  max-width: 100%;
+}