From 1a0acfebf965b0cada52adc55e1481b0e812dccb Mon Sep 17 00:00:00 2001
From: Emma Hamilton <git@emmas.town>
Date: Thu, 12 Sep 2024 10:43:41 +1000
Subject: [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`

---
 .changeset/kind-carrots-double.md             |  5 +++
 .../fields/markdoc/editor/commands/misc.ts    |  6 +++-
 .../fields/markdoc/editor/popovers/index.tsx  | 36 ++++++++++---------
 .../src/form/fields/markdoc/editor/schema.tsx |  2 ++
 4 files changed, 32 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/kind-carrots-double.md

diff --git a/.changeset/kind-carrots-double.md b/.changeset/kind-carrots-double.md
new file mode 100644
index 000000000..f6551deeb
--- /dev/null
+++ 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
index 5243dbf9a..46a9045fa 100644
--- 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
index 9043f2db0..9ddeb4b74 100644
--- 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
index cf5fc8c08..96e976144 100644
--- 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);