From 7ba24968d8cd876e1b1e8c347dc79eccdced51aa Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 7 Sep 2025 21:07:55 +0300
Subject: [PATCH] chore(react/collections/table): bring editing cells

---
 .../src/widgets/collections/table/editing.ts  | 36 +++++++++++++-
 .../src/widgets/collections/table/index.tsx   |  8 +++-
 .../view_widgets/table_view/row_editing.ts    | 47 -------------------
 3 files changed, 40 insertions(+), 51 deletions(-)
 delete mode 100644 apps/client/src/widgets/view_widgets/table_view/row_editing.ts

diff --git a/apps/client/src/widgets/collections/table/editing.ts b/apps/client/src/widgets/collections/table/editing.ts
index c6e1114e19..e71aa7bb4d 100644
--- a/apps/client/src/widgets/collections/table/editing.ts
+++ b/apps/client/src/widgets/collections/table/editing.ts
@@ -1,10 +1,14 @@
-import { RowComponent, Tabulator } from "tabulator-tables";
+import { EventCallBackMethods, RowComponent, Tabulator } from "tabulator-tables";
 import { CommandListenerData } from "../../../components/app_context";
 import note_create, { CreateNoteOpts } from "../../../services/note_create";
 import { useLegacyImperativeHandlers } from "../../react/hooks";
 import { RefObject } from "preact";
+import { setAttribute, setLabel } from "../../../services/attributes";
+import froca from "../../../services/froca";
+import server from "../../../services/server";
 
-export default function useTableEditing(api: RefObject<Tabulator>, parentNotePath: string) {
+export default function useTableEditing(api: RefObject<Tabulator>, parentNotePath: string): Partial<EventCallBackMethods> {
+    // Adding new rows
     useLegacyImperativeHandlers({
         addNewRowCommand({ customOpts, parentNotePath: customNotePath }: CommandListenerData<"addNewRow">) {
             const notePath = customNotePath ?? parentNotePath;
@@ -25,6 +29,34 @@ export default function useTableEditing(api: RefObject<Tabulator>, parentNotePat
         }
     });
 
+    // Editing existing rows.
+    return {
+        cellEdited: async (cell) => {
+            const noteId = cell.getRow().getData().noteId;
+            const field = cell.getField();
+            let newValue = cell.getValue();
+
+            if (field === "title") {
+                server.put(`notes/${noteId}/title`, { title: newValue });
+                return;
+            }
+
+            if (field.includes(".")) {
+                const [ type, name ] = field.split(".", 2);
+                if (type === "labels") {
+                    if (typeof newValue === "boolean") {
+                        newValue = newValue ? "true" : "false";
+                    }
+                    setLabel(noteId, name, newValue);
+                } else if (type === "relations") {
+                    const note = await froca.getNote(noteId);
+                    if (note) {
+                        setAttribute(note, "relation", name, newValue);
+                    }
+                }
+            }
+        }
+    };
 }
 
 function focusOnBranch(api: Tabulator, branchId: string) {
diff --git a/apps/client/src/widgets/collections/table/index.tsx b/apps/client/src/widgets/collections/table/index.tsx
index 4b4db6da85..88c50f2f59 100644
--- a/apps/client/src/widgets/collections/table/index.tsx
+++ b/apps/client/src/widgets/collections/table/index.tsx
@@ -48,7 +48,7 @@ export default function TableView({ note, noteIds, notePath, viewConfig, saveCon
 
     const contextMenuEvents = useContextMenu(note, parentComponent, tabulatorRef);
     const persistenceProps = usePersistence(viewConfig, saveConfig);
-    useTableEditing(tabulatorRef, notePath);
+    const editingEvents = useTableEditing(tabulatorRef, notePath);
     const dataTreeProps = useMemo<Options>(() => {
         if (!hasChildren) return {};
         return {
@@ -73,12 +73,16 @@ export default function TableView({ note, noteIds, notePath, viewConfig, saveCon
                         data={rowData}
                         modules={[ SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MoveRowsModule, DataTreeModule ]}
                         footerElement={<TableFooter note={note} />}
-                        events={contextMenuEvents}
+                        events={{
+                            ...contextMenuEvents,
+                            ...editingEvents
+                        }}
                         persistence {...persistenceProps}
                         layout="fitDataFill"
                         index="branchId"
                         movableColumns
                         movableRows={movableRows}
+
                         {...dataTreeProps}
                     />
                     <TableFooter note={note} />
diff --git a/apps/client/src/widgets/view_widgets/table_view/row_editing.ts b/apps/client/src/widgets/view_widgets/table_view/row_editing.ts
deleted file mode 100644
index 99029a54f4..0000000000
--- a/apps/client/src/widgets/view_widgets/table_view/row_editing.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { RowComponent, Tabulator } from "tabulator-tables";
-import Component from "../../../components/component.js";
-import { setAttribute, setLabel } from "../../../services/attributes.js";
-import server from "../../../services/server.js";
-import froca from "../../../services/froca.js";
-import note_create, { CreateNoteOpts } from "../../../services/note_create.js";
-import { CommandListenerData } from "../../../components/app_context.js";
-
-export default class TableRowEditing extends Component {
-
-    private parentNotePath: string;
-    private api: Tabulator;
-
-    constructor(api: Tabulator, parentNotePath: string) {
-        super();
-        this.api = api;
-        this.parentNotePath = parentNotePath;
-        api.on("cellEdited", async (cell) => {
-            const noteId = cell.getRow().getData().noteId;
-            const field = cell.getField();
-            let newValue = cell.getValue();
-
-            if (field === "title") {
-                server.put(`notes/${noteId}/title`, { title: newValue });
-                return;
-            }
-
-            if (field.includes(".")) {
-                const [ type, name ] = field.split(".", 2);
-                if (type === "labels") {
-                    if (typeof newValue === "boolean") {
-                        newValue = newValue ? "true" : "false";
-                    }
-                    setLabel(noteId, name, newValue);
-                } else if (type === "relations") {
-                    const note = await froca.getNote(noteId);
-                    if (note) {
-                        setAttribute(note, "relation", name, newValue);
-                    }
-                }
-            }
-        });
-    }
-
-}
-
-