Update inserting tables in fields.markdoc/fields.mdx to include a…

… table header row by default and remove button to toggle table header in `fields.mdx` (#1305)
Thinkmill · Sep 12, 2024 · 98bd2da · 98bd2da
1 parent 234d025
commit 98bd2da
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 17 deletions.
diff --git a/.changeset/kind-carrots-double.md b/.changeset/kind-carrots-double.md
@@ -0,0 +1,5 @@
+---
+'@keystatic/core': patch
+---
+
+Update inserting tables in `fields.markdoc`/`fields.mdx` to include a table header row by default and remove button to toggle table header in `fields.mdx` since header rows cannot be removed from GFM tables
diff --git a/packages/keystatic/src/form/fields/markdoc/editor/commands/misc.ts b/packages/keystatic/src/form/fields/markdoc/editor/commands/misc.ts
@@ -1,6 +1,7 @@
 import { setBlockType } from 'prosemirror-commands';
 import { NodeType } from 'prosemirror-model';
 import { Command, NodeSelection } from 'prosemirror-state';
+import { getEditorSchema } from '../schema';
 
 export function insertNode(nodeType: NodeType): Command {
   return (state, dispatch) => {
@@ -47,12 +48,15 @@ export function toggleCodeBlock(
 export function insertTable(tableType: NodeType): Command {
   const rowType = tableType.contentMatch.defaultType!;
   const cellType = rowType.contentMatch.defaultType!;
+  const headerType = getEditorSchema(tableType.schema).nodes.table_header!;
   return (state, dispatch) => {
+    const header = headerType.createAndFill()!;
     const cell = cellType.createAndFill()!;
+    const headerRow = rowType.create(undefined, [header, header, header]);
     const row = rowType.create(undefined, [cell, cell, cell]);
     dispatch?.(
       state.tr.replaceSelectionWith(
-        tableType.create(undefined, [row, row, row])
+        tableType.create(undefined, [headerRow, row, row])
       )
     );
 

diff --git a/packages/keystatic/src/form/fields/markdoc/editor/popovers/index.tsx b/packages/keystatic/src/form/fields/markdoc/editor/popovers/index.tsx
@@ -157,22 +157,26 @@ const popoverComponents: Record<
 
     return (
       <Flex gap="regular" padding="regular">
-        <TooltipTrigger>
-          <ActionButton
-            prominence="low"
-            isSelected={
-              props.node.firstChild?.firstChild?.type ===
-              schema.nodes.table_header
-            }
-            onPress={() => {
-              dispatchCommand(toggleHeader('row'));
-            }}
-          >
-            <Icon src={sheetIcon} />
-          </ActionButton>
-          <Tooltip>Header row</Tooltip>
-        </TooltipTrigger>
-        <Divider orientation="vertical" />
+        {schema.format === 'markdoc' && (
+          <>
+            <TooltipTrigger>
+              <ActionButton
+                prominence="low"
+                isSelected={
+                  props.node.firstChild?.firstChild?.type ===
+                  schema.nodes.table_header
+                }
+                onPress={() => {
+                  dispatchCommand(toggleHeader('row'));
+                }}
+              >
+                <Icon src={sheetIcon} />
+              </ActionButton>
+              <Tooltip>Header row</Tooltip>
+            </TooltipTrigger>
+            <Divider orientation="vertical" />
+          </>
+        )}
         <TooltipTrigger>
           <ActionButton
             prominence="low"

diff --git a/packages/keystatic/src/form/fields/markdoc/editor/schema.tsx b/packages/keystatic/src/form/fields/markdoc/editor/schema.tsx
@@ -529,6 +529,7 @@ export type EditorSchema = {
   config: EditorConfig;
   components: Record<string, ContentComponent>;
   insertMenuItems: InsertMenuItem[];
+  format: 'mdx' | 'markdoc';
 };
 
 export function createEditorSchema(
@@ -657,6 +658,7 @@ export function createEditorSchema(
     config,
     components,
     insertMenuItems: [],
+    format: isMDX ? 'mdx' : 'markdoc',
   };
   schemaToEditorSchema.set(schema, editorSchema);