feat: make tables prettier

Author: 3mcd

packages/context-editor/src/commands/tables.ts

@@ -28,8 +28,8 @@ type AddTableOptions = {
 };
 
 const defaultOptions = {
-	rowCount: 2,
-	colCount: 2,
+	rowCount: 3,
+	colCount: 3,
 	withHeaderRow: true,
 	cellContent: undefined,
 };

packages/context-editor/src/plugins/structureDecorations.tsx

@@ -9,25 +9,39 @@ export default () => {
 	return new Plugin({
 		props: {
 			decorations: (state) => {
+				const counts = new Map<string, number>();
 				const decorations: Decoration[] = [];
 				state.doc.descendants((node, pos) => {
-					if (
-						node.type.name === "table_row" ||
-						node.type.name === "table_cell" ||
-						node.type.name === "table_header"
-					) {
-						// Don't add decorations to table rows or cells
+					let nodeIsDescendantOfTable = false;
+					state.doc.nodesBetween(pos, pos, (node) => {
+						if (
+							node.type.name === "table" ||
+							node.type.name === "table_row" ||
+							node.type.name === "table_cell" ||
+							node.type.name === "table_header"
+						) {
+							nodeIsDescendantOfTable = true;
+						}
+					});
+					if (nodeIsDescendantOfTable) {
 						return;
 					}
+					const count = counts.get(node.type.name) || 0;
+					counts.set(node.type.name, count + 1);
 					if (node.type.isBlock) {
-						// TODO: is there a better key we can use?
-						decorations.push(widget(pos, BlockDecoration, { key: `node-${pos}` }));
+						decorations.push(
+							widget(pos, BlockDecoration, {
+								key: `node-${node.type.name}-${count}`,
+							})
+						);
 					} else {
-						const hasMarks = !!node.marks.length;
-						const isMath = node.type.name === "math_inline";
-						if (hasMarks || isMath) {
-							/* If it's an inline node with marks OR is inline math */
-							decorations.push(widget(pos, InlineDecoration, { key: `mark-${pos}` }));
+						// If it's an inline node with marks OR is inline math
+						if (node.marks.length > 0 || node.type.name === "math_inline") {
+							decorations.push(
+								widget(pos, InlineDecoration, {
+									key: `mark-${node.type.name}-${count}`,
+								})
+							);
 						}
 					}
 				});

packages/context-editor/src/style.css

@@ -73,13 +73,21 @@
 .ProseMirror ul,
 .ProseMirror ol,
 .ProseMirror li,
-.ProseMirror section {
+.ProseMirror section,
+.ProseMirror table {
 	border-left: 1px solid #777;
 	padding-left: 5px;
 	padding-top: 5px;
 	margin-top: 16px;
 	margin-bottom: 16px;
 }
+.ProseMirror tr * {
+	border: none;
+}
+.ProseMirror tr p {
+	margin: 0;
+}
+
 .ProseMirror section {
 	margin-left: -5px;
 }
@@ -168,33 +176,53 @@
 	min-height: unset !important; /* Remove the default min-height */
 }
 
+/* Table */
 .ProseMirror table {
-	border-collapse: collapse;
-	margin: 25px 0;
+	border-spacing: 0;
+	border-collapse: separate;
 	font-size: 0.9em;
 	font-family: sans-serif;
 	min-width: 400px;
+	width: 100%;
+	table-layout: fixed;
 }
 
-.ProseMirror thead tr {
-	background-color: #009879;
-	color: #ffffff;
-	text-align: left;
+.ProseMirror table td,
+.ProseMirror table th {
+	border-top: 1px solid #ccc;
+	border-left: 1px solid #ccc;
 }
 
-.ProseMirror th,
-.ProseMirror td {
-	padding: 6px 8px;
+.ProseMirror table td:last-child,
+.ProseMirror table th:last-child {
+	border-right: 1px solid #ccc;
 }
 
-.ProseMirror tbody tr {
-	border-bottom: 1px solid #dddddd;
+.ProseMirror table tr:last-child td {
+	border-bottom: 1px solid #ccc;
 }
 
-.ProseMirror tbody tr:nth-of-type(even) {
-	background-color: #f3f3f3;
+.ProseMirror table td {
+	vertical-align: top;
+}
+
+.ProseMirror table {
+	border-left: 1px solid #777;
+}
+
+.wrap-widget + table {
+	position: relative;
+	top: -1px;
+}
+
+.wrap-widget button {
+	z-index: 10;
 }
 
-.ProseMirror tbody tr:last-of-type {
-	border-bottom: 2px solid #009879;
+.ProseMirror thead tr {
+	text-align: left;
+}
+
+.ProseMirror tbody tr:nth-of-type(even) {
+	background-color: #f3f3f3;
 }