From 043791fc910910ee25d42a98b51087d584eeaea3 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 9 Sep 2025 20:35:57 +0300
Subject: [PATCH] chore(react/collections/table): port note ID formatter

---
 .../table/{columns.ts => columns.tsx}         | 20 ++++++++++++++++---
 .../widgets/collections/table/formatters.ts   |  4 ----
 apps/client/src/widgets/react/react_utils.tsx |  4 ++--
 3 files changed, 19 insertions(+), 9 deletions(-)
 rename apps/client/src/widgets/collections/table/{columns.ts => columns.tsx} (85%)

diff --git a/apps/client/src/widgets/collections/table/columns.ts b/apps/client/src/widgets/collections/table/columns.tsx
similarity index 85%
rename from apps/client/src/widgets/collections/table/columns.ts
rename to apps/client/src/widgets/collections/table/columns.tsx
index 294d1f2c1..197ccba54 100644
--- a/apps/client/src/widgets/collections/table/columns.ts
+++ b/apps/client/src/widgets/collections/table/columns.tsx
@@ -1,7 +1,9 @@
-import { MonospaceFormatter, NoteFormatter, NoteTitleFormatter, RowNumberFormatter } from "./formatters.js";
-import type { ColumnDefinition } from "tabulator-tables";
+import { NoteFormatter, NoteTitleFormatter, RowNumberFormatter } from "./formatters.js";
+import type { CellComponent, ColumnDefinition, EmptyCallback } from "tabulator-tables";
 import { LabelType } from "../../../services/promoted_attribute_definition_parser.js";
 import { RelationEditor } from "./relation_editor.js";
+import { JSX } from "preact";
+import { renderReactWidget } from "../../react/react_utils.jsx";
 
 type ColumnType = LabelType | "relation";
 
@@ -73,7 +75,7 @@ export function buildColumnDefinitions({ info, movableRows, existingColumnData,
         {
             field: "noteId",
             title: "Note ID",
-            formatter: MonospaceFormatter,
+            formatter: wrapFormatter(({ cell }) => <code>{cell.getValue()}</code>),
             visible: false
         },
         {
@@ -154,3 +156,15 @@ function calculateIndexColumnWidth(rowNumberHint: number, movableRows: boolean):
     }
     return columnWidth;
 }
+
+interface FormatterOpts {
+    cell: CellComponent
+}
+
+function wrapFormatter(Component: (opts: FormatterOpts) => JSX.Element): ((cell: CellComponent, formatterParams: {}, onRendered: EmptyCallback) => string | HTMLElement) {
+    return (cell, formatterParams, onRendered) => {
+        const elWithParams = <Component cell={cell} />;
+        return renderReactWidget(null, elWithParams)[0];
+    };
+}
+
diff --git a/apps/client/src/widgets/collections/table/formatters.ts b/apps/client/src/widgets/collections/table/formatters.ts
index a333742e9..85aee6025 100644
--- a/apps/client/src/widgets/collections/table/formatters.ts
+++ b/apps/client/src/widgets/collections/table/formatters.ts
@@ -71,10 +71,6 @@ export function RowNumberFormatter(draggableRows: boolean) {
     };
 }
 
-export function MonospaceFormatter(cell: CellComponent) {
-    return `<code>${cell.getValue()}</code>`;
-}
-
 function buildNoteLink(noteId: string, title: string, iconClass: string, colorClass?: string) {
     const $noteRef = $("<span>");
     const href = `#root/${noteId}`;
diff --git a/apps/client/src/widgets/react/react_utils.tsx b/apps/client/src/widgets/react/react_utils.tsx
index 5e436bf14..d752662f5 100644
--- a/apps/client/src/widgets/react/react_utils.tsx
+++ b/apps/client/src/widgets/react/react_utils.tsx
@@ -24,11 +24,11 @@ export function refToJQuerySelector<T extends HTMLElement>(ref: RefObject<T> | n
  * @param el the JSX element to render.
  * @returns the rendered wrapped DOM element.
  */
-export function renderReactWidget(parentComponent: Component, el: JSX.Element) {
+export function renderReactWidget(parentComponent: Component | null, el: JSX.Element) {
     return renderReactWidgetAtElement(parentComponent, el, new DocumentFragment()).children();
 }
 
-export function renderReactWidgetAtElement(parentComponent: Component, el: JSX.Element, container: Element | DocumentFragment) {
+export function renderReactWidgetAtElement(parentComponent: Component | null, el: JSX.Element, container: Element | DocumentFragment) {
     render((
         <ParentComponent.Provider value={parentComponent}>
             {el}