fix(admin): address PR review feedback for table support

- Replace hard-coded colors with Kumo design tokens
- Move TipTap table extensions to catalog dependencies
- Use existing convertPTMarks for table cell mark conversion
- Fix markDefs handling in both PT↔PM conversion directions
- Add unit tests for table conversion (7 tests)

Author: tohaitrieu

packages/admin/package.json

@@ -43,6 +43,10 @@
     "@tiptap/extension-placeholder": "catalog:",
     "@tiptap/extension-text-align": "catalog:",
     "@tiptap/extension-typography": "catalog:",
+    "@tiptap/extension-table": "catalog:",
+    "@tiptap/extension-table-cell": "catalog:",
+    "@tiptap/extension-table-header": "catalog:",
+    "@tiptap/extension-table-row": "catalog:",
     "@tiptap/extension-underline": "catalog:",
     "@tiptap/pm": "catalog:",
     "@tiptap/react": "catalog:",
@@ -61,10 +65,6 @@
     "@tailwindcss/cli": "^4.1.10",
     "@tailwindcss/typography": "^0.5.19",
     "@testing-library/react": "^16.3.0",
-    "@tiptap/extension-table": "^3.22.1",
-    "@tiptap/extension-table-cell": "^3.22.1",
-    "@tiptap/extension-table-header": "^3.22.1",
-    "@tiptap/extension-table-row": "^3.22.1",
     "@tiptap/suggestion": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",

packages/admin/src/components/PortableTextEditor.tsx

@@ -299,6 +299,7 @@ function convertPMNode(node: {
 				}>;
 			}>;
 
+			const tableMarkDefs: PortableTextMarkDef[] = [];
 			const rows = tableContent
 				.filter((row) => row.type === "tableRow")
 				.map((row, rowIndex) => {
@@ -309,16 +310,15 @@ function convertPMNode(node: {
 							content?: unknown[];
 						}>;
 
-						// Extract text from paragraphs inside the cell
 						const contentSpans: PortableTextSpan[] = [];
 						for (const para of cellContent) {
 							if (para.type === "paragraph") {
-								const { children } = convertInlineContent(para.content || []);
+								const { children, markDefs } = convertInlineContent(para.content || []);
 								contentSpans.push(...children);
+								tableMarkDefs.push(...markDefs);
 							}
 						}
 
-						// Ensure at least one span
 						if (contentSpans.length === 0) {
 							contentSpans.push({
 								_type: "span",
@@ -347,6 +347,7 @@ function convertPMNode(node: {
 				_key: tableKey,
 				rows,
 				hasHeaderRow: rows[0]?.cells.some((c) => c.isHeader) ?? false,
+				markDefs: tableMarkDefs.length > 0 ? tableMarkDefs : undefined,
 			};
 		}
 
@@ -626,36 +627,30 @@ function convertPTBlock(block: PortableTextBlock): unknown {
 						_key: string;
 						content: PortableTextSpan[];
 						isHeader?: boolean;
+						markDefs?: PortableTextMarkDef[];
 					}>;
 				}>;
 				hasHeaderRow?: boolean;
+				markDefs?: PortableTextMarkDef[];
 			};
 
+			const tableMarkDefs = tableBlock.markDefs || [];
+			const tableMarkDefsMap = new Map(tableMarkDefs.map((md) => [md._key, md]));
+
 			const rows = (tableBlock.rows || []).map((row, rowIndex) => {
 				const cells = row.cells.map((cell) => {
 					const cellType =
 						cell.isHeader || (tableBlock.hasHeaderRow && rowIndex === 0)
 							? "tableHeader"
 							: "tableCell";
 
-					// Map PortableText marks to ProseMirror marks
-					const markNameMap: Record<string, string> = {
-						strong: "bold",
-						em: "italic",
-						underline: "underline",
-						"strike-through": "strike",
-						code: "code",
-					};
-					const pmContent = cell.content.map((span) => ({
-						type: "text",
-						text: span.text || "",
-						marks:
-							span.marks
-								?.map((mark) => ({
-									type: markNameMap[mark] || mark,
-								}))
-								.filter((m) => m.type) || [],
-					}));
+					const cellMarkDefs = cell.markDefs || [];
+					const markDefsMap = new Map([
+						...tableMarkDefsMap,
+						...cellMarkDefs.map((md) => [md._key, md] as const),
+					]);
+
+					const pmContent = convertPTSpans(cell.content, [...markDefsMap.values()]);
 
 					return {
 						type: cellType,

packages/admin/src/styles.css

@@ -213,20 +213,20 @@ body {
 
 .ProseMirror td,
 .ProseMirror th {
-	border: 1px solid #d1d5db;
+	border: 1px solid var(--color-kumo-line);
 	padding: 0.5rem 0.75rem;
 	vertical-align: top;
 	position: relative;
 	min-width: 80px;
 }
 
 .ProseMirror th {
-	background-color: #f3f4f6;
+	background-color: var(--color-kumo-tint);
 	font-weight: 600;
 }
 
 .ProseMirror .selectedCell {
-	background-color: #dbeafe;
+	background-color: var(--color-kumo-info-tint);
 }
 
 .ProseMirror .column-resize-handle {
@@ -235,28 +235,14 @@ body {
 	top: 0;
 	bottom: -2px;
 	width: 4px;
-	background-color: #3b82f6;
+	background-color: var(--color-kumo-brand);
 	pointer-events: none;
 }
 
 .ProseMirror.resize-cursor {
 	cursor: col-resize;
 }
 
-/* Dark mode table styles */
-.dark .ProseMirror td,
-.dark .ProseMirror th {
-	border-color: #4b5563;
-}
-
-.dark .ProseMirror th {
-	background-color: #374151;
-}
-
-.dark .ProseMirror .selectedCell {
-	background-color: #1e3a5f;
-}
-
 /**
  * Isolate the admin root's stacking context.
  */