@portabletext/block-tools 3.4.1 → 3.5.0

package/lib/rules/index.js

@@ -0,0 +1,67 @@
+import { isTextBlock } from "@portabletext/schema";
+import { isElement, tagName, flattenNestedBlocks } from "../_chunks-es/helpers.js";
+function createFlattenTableRule({
+  schema,
+  separator
+}) {
+  return {
+    deserialize: (node, next) => {
+      if (!isElement(node) || tagName(node) !== "table")
+        return;
+      const thead = node.querySelector("thead"), tbody = node.querySelector("tbody");
+      if (!thead || !tbody)
+        return;
+      const headerRow = thead.querySelector("tr");
+      if (!headerRow)
+        return;
+      const headerResults = [...headerRow.querySelectorAll("th")].map(
+        (headerCell) => next(headerCell)
+      ), rows = [], rowElements = tbody.querySelectorAll("tr");
+      for (const row of rowElements) {
+        const cells = row.querySelectorAll("td");
+        let cellIndex = 0;
+        for (const cell of cells) {
+          const result = next(cell);
+          if (!result) {
+            cellIndex++;
+            continue;
+          }
+          const headerResult = headerResults[cellIndex];
+          if (!headerResult) {
+            Array.isArray(result) ? rows.push(...result) : rows.push(result), cellIndex++;
+            continue;
+          }
+          const flattenedHeaderResult = flattenNestedBlocks(
+            { schema },
+            Array.isArray(headerResult) ? headerResult : [headerResult]
+          ), firstFlattenedHeaderResult = flattenedHeaderResult[0], flattenedResult = flattenNestedBlocks(
+            { schema },
+            Array.isArray(result) ? result : [result]
+          ), firstFlattenedResult = flattenedResult[0];
+          if (flattenedHeaderResult.length === 1 && isTextBlock({ schema }, firstFlattenedHeaderResult) && flattenedResult.length === 1 && isTextBlock({ schema }, firstFlattenedResult)) {
+            const separatorChild = separator?.(), mergedTextBlock = {
+              ...firstFlattenedHeaderResult,
+              children: [
+                ...firstFlattenedHeaderResult.children,
+                ...separatorChild ? [separatorChild] : [],
+                ...firstFlattenedResult.children
+              ],
+              markDefs: [
+                ...firstFlattenedHeaderResult.markDefs ?? [],
+                ...firstFlattenedResult.markDefs ?? []
+              ]
+            };
+            rows.push(mergedTextBlock), cellIndex++;
+            continue;
+          }
+          Array.isArray(headerResult) ? rows.push(...headerResult) : rows.push(headerResult), Array.isArray(result) ? rows.push(...result) : rows.push(result), cellIndex++;
+        }
+      }
+      return rows;
+    }
+  };
+}
+export {
+  createFlattenTableRule
+};
+//# sourceMappingURL=index.js.map

package/lib/rules/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/rules/flatten-tables.ts"],"sourcesContent":["import {\n  isTextBlock,\n  type PortableTextObject,\n  type PortableTextSpan,\n  type Schema,\n} from '@portabletext/schema'\nimport {flattenNestedBlocks} from '../HtmlDeserializer/flatten-nested-blocks'\nimport {isElement, tagName} from '../HtmlDeserializer/helpers'\nimport type {\n  ArbitraryTypedObject,\n  DeserializerRule,\n  TypedObject,\n} from '../types'\n\n/**\n * An opinionated `DeserializerRule` that flattens tables in a way that repeats\n * the header row for each cell in the row.\n *\n * @example\n * ```html\n * <table>\n *   <thead>\n *     <tr>\n *       <th>Header 1</th>\n *       <th>Header 2</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <td>Cell 1</td>\n *       <td>Cell 2</td>\n *     </tr>\n *   </tbody>\n * </table>\n * ```\n * Turns into\n * ```json\n * [\n *   {\n *     _type: 'block',\n *     children: [\n *       {\n *         _type: 'text',\n *         text: 'Header 1'\n *       },\n *       {\n *         _type: 'text',\n *         text: 'Cell 1'\n *       }\n *     ]\n *   },\n *   {\n *     _type: 'block',\n *     children: [\n *       {\n *         _type: 'text',\n *         text: 'Header 2'\n *       },\n *       {\n *         _type: 'text',\n *         text: 'Cell 2'\n *       }\n *     ]\n *   }\n * ]\n * ```\n *\n * Use the `separator` option to control if a child element should separate\n * headers and cells.\n *\n * @beta\n */\nexport function createFlattenTableRule({\n  schema,\n  separator,\n}: {\n  schema: Schema\n  separator?: () =>\n    | (Omit<PortableTextSpan, '_key'> & {_key?: string})\n    | (Omit<PortableTextObject, '_key'> & {_key?: string})\n    | undefined\n}): DeserializerRule {\n  return {\n    deserialize: (node, next) => {\n      if (!isElement(node) || tagName(node) !== 'table') {\n        return undefined\n      }\n\n      const thead = node.querySelector('thead')\n      const tbody = node.querySelector('tbody')\n\n      // Only process tables with thead and tbody\n      if (!thead || !tbody) {\n        return undefined\n      }\n\n      // Extract header labels from thead\n      const headerRow = thead.querySelector('tr')\n\n      if (!headerRow) {\n        return undefined\n      }\n\n      const headerCells = headerRow.querySelectorAll('th')\n      const headerResults = [...headerCells].map((headerCell) =>\n        next(headerCell),\n      )\n\n      // Process tbody rows and combine with headers\n      const rows: TypedObject[] = []\n      const rowElements = tbody.querySelectorAll('tr')\n\n      for (const row of rowElements) {\n        const cells = row.querySelectorAll('td')\n\n        let cellIndex = 0\n        for (const cell of cells) {\n          const result = next(cell)\n\n          if (!result) {\n            cellIndex++\n            continue\n          }\n\n          const headerResult = headerResults[cellIndex]\n\n          if (!headerResult) {\n            // If we can't find a corresponding header, then we just push\n            // the deserialized cell as is.\n            if (Array.isArray(result)) {\n              rows.push(...result)\n            } else {\n              rows.push(result)\n            }\n            cellIndex++\n            continue\n          }\n\n          const flattenedHeaderResult = flattenNestedBlocks(\n            {schema},\n            (Array.isArray(headerResult)\n              ? headerResult\n              : [headerResult]) as Array<ArbitraryTypedObject>,\n          )\n          const firstFlattenedHeaderResult = flattenedHeaderResult[0]\n          const flattenedResult = flattenNestedBlocks(\n            {schema},\n            (Array.isArray(result)\n              ? result\n              : [result]) as Array<ArbitraryTypedObject>,\n          )\n          const firstFlattenedResult = flattenedResult[0]\n\n          if (\n            flattenedHeaderResult.length === 1 &&\n            isTextBlock({schema}, firstFlattenedHeaderResult) &&\n            flattenedResult.length === 1 &&\n            isTextBlock({schema}, firstFlattenedResult)\n          ) {\n            const separatorChild = separator?.()\n            // If the header result and the cell result are text blocks then\n            //   we merge them together.\n            const mergedTextBlock = {\n              ...firstFlattenedHeaderResult,\n              children: [\n                ...firstFlattenedHeaderResult.children,\n                ...(separatorChild ? [separatorChild] : []),\n                ...firstFlattenedResult.children,\n              ],\n              markDefs: [\n                ...(firstFlattenedHeaderResult.markDefs ?? []),\n                ...(firstFlattenedResult.markDefs ?? []),\n              ],\n            }\n\n            rows.push(mergedTextBlock)\n            cellIndex++\n            continue\n          }\n\n          // Otherwise, we push the header result and the cell result as is.\n          if (Array.isArray(headerResult)) {\n            rows.push(...headerResult)\n          } else {\n            rows.push(headerResult)\n          }\n\n          if (Array.isArray(result)) {\n            rows.push(...result)\n          } else {\n            rows.push(result)\n          }\n\n          cellIndex++\n        }\n      }\n\n      // Return the processed rows as individual text blocks\n      return rows\n    },\n  }\n}\n"],"names":[],"mappings":";;AAwEO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AACF,GAMqB;AACnB,SAAO;AAAA,IACL,aAAa,CAAC,MAAM,SAAS;AAC3B,UAAI,CAAC,UAAU,IAAI,KAAK,QAAQ,IAAI,MAAM;AACxC;AAGF,YAAM,QAAQ,KAAK,cAAc,OAAO,GAClC,QAAQ,KAAK,cAAc,OAAO;AAGxC,UAAI,CAAC,SAAS,CAAC;AACb;AAIF,YAAM,YAAY,MAAM,cAAc,IAAI;AAE1C,UAAI,CAAC;AACH;AAIF,YAAM,gBAAgB,CAAC,GADH,UAAU,iBAAiB,IAAI,CACd,EAAE;AAAA,QAAI,CAAC,eAC1C,KAAK,UAAU;AAAA,MAAA,GAIX,OAAsB,CAAA,GACtB,cAAc,MAAM,iBAAiB,IAAI;AAE/C,iBAAW,OAAO,aAAa;AAC7B,cAAM,QAAQ,IAAI,iBAAiB,IAAI;AAEvC,YAAI,YAAY;AAChB,mBAAW,QAAQ,OAAO;AACxB,gBAAM,SAAS,KAAK,IAAI;AAExB,cAAI,CAAC,QAAQ;AACX;AACA;AAAA,UACF;AAEA,gBAAM,eAAe,cAAc,SAAS;AAE5C,cAAI,CAAC,cAAc;AAGb,kBAAM,QAAQ,MAAM,IACtB,KAAK,KAAK,GAAG,MAAM,IAEnB,KAAK,KAAK,MAAM,GAElB;AACA;AAAA,UACF;AAEA,gBAAM,wBAAwB;AAAA,YAC5B,EAAC,OAAA;AAAA,YACA,MAAM,QAAQ,YAAY,IACvB,eACA,CAAC,YAAY;AAAA,UAAA,GAEb,6BAA6B,sBAAsB,CAAC,GACpD,kBAAkB;AAAA,YACtB,EAAC,OAAA;AAAA,YACA,MAAM,QAAQ,MAAM,IACjB,SACA,CAAC,MAAM;AAAA,UAAA,GAEP,uBAAuB,gBAAgB,CAAC;AAE9C,cACE,sBAAsB,WAAW,KACjC,YAAY,EAAC,UAAS,0BAA0B,KAChD,gBAAgB,WAAW,KAC3B,YAAY,EAAC,OAAA,GAAS,oBAAoB,GAC1C;AACA,kBAAM,iBAAiB,YAAA,GAGjB,kBAAkB;AAAA,cACtB,GAAG;AAAA,cACH,UAAU;AAAA,gBACR,GAAG,2BAA2B;AAAA,gBAC9B,GAAI,iBAAiB,CAAC,cAAc,IAAI,CAAA;AAAA,gBACxC,GAAG,qBAAqB;AAAA,cAAA;AAAA,cAE1B,UAAU;AAAA,gBACR,GAAI,2BAA2B,YAAY,CAAA;AAAA,gBAC3C,GAAI,qBAAqB,YAAY,CAAA;AAAA,cAAC;AAAA,YACxC;AAGF,iBAAK,KAAK,eAAe,GACzB;AACA;AAAA,UACF;AAGI,gBAAM,QAAQ,YAAY,IAC5B,KAAK,KAAK,GAAG,YAAY,IAEzB,KAAK,KAAK,YAAY,GAGpB,MAAM,QAAQ,MAAM,IACtB,KAAK,KAAK,GAAG,MAAM,IAEnB,KAAK,KAAK,MAAM,GAGlB;AAAA,QACF;AAAA,MACF;AAGA,aAAO;AAAA,IACT;AAAA,EAAA;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/block-tools",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "description": "Can format HTML, Slate JSON or Sanity block array into any other format.",
   "keywords": [
     "portable-text",
@@ -26,6 +26,12 @@
       "require": "./lib/index.cjs",
       "default": "./lib/index.js"
     },
+    "./rules": {
+      "source": "./src/rules/_exports/index.ts",
+      "import": "./lib/rules/index.js",
+      "require": "./lib/rules/index.cjs",
+      "default": "./lib/rules/index.js"
+    },
     "./package.json": "./package.json"
   },
   "main": "./lib/index.cjs",
@@ -42,7 +48,7 @@
     "@portabletext/schema": "^1.2.0"
   },
   "devDependencies": {
-    "@sanity/pkg-utils": "^8.0.5",
+    "@sanity/pkg-utils": "^8.1.1",
     "@sanity/schema": "^4.6.0",
     "@sanity/types": "^4.6.0",
     "@types/jsdom": "^20.0.0",

package/src/HtmlDeserializer/flatten-nested-blocks.test.ts

@@ -5,10 +5,9 @@ import {flattenNestedBlocks} from './flatten-nested-blocks'
 
 describe(flattenNestedBlocks.name, () => {
   test('flattening text blocks', () => {
-    const keyGenerator = createTestKeyGenerator('k')
     const schema = compileSchema(defineSchema({}))
     expect(
-      flattenNestedBlocks({schema, keyGenerator}, [
+      flattenNestedBlocks({schema}, [
         {
           _type: 'block',
           children: [
@@ -40,12 +39,11 @@ describe(flattenNestedBlocks.name, () => {
   })
 
   test('flattening text blocks with block objects in schema', () => {
-    const keyGenerator = createTestKeyGenerator('k')
     const schema = compileSchema(
       defineSchema({blockObjects: [{name: 'image'}]}),
     )
     expect(
-      flattenNestedBlocks({schema, keyGenerator}, [
+      flattenNestedBlocks({schema}, [
         {
           _type: 'block',
           children: [
@@ -77,14 +75,13 @@ describe(flattenNestedBlocks.name, () => {
   })
 
   test('flattening text blocks with styles in schema', () => {
-    const keyGenerator = createTestKeyGenerator('k')
     const schema = compileSchema(
       defineSchema({
         styles: [{name: 'h1'}],
       }),
     )
     expect(
-      flattenNestedBlocks({schema, keyGenerator}, [
+      flattenNestedBlocks({schema}, [
         {
           _type: 'block',
           children: [
@@ -131,7 +128,7 @@ describe(flattenNestedBlocks.name, () => {
     const linkKey = keyGenerator()
 
     expect(
-      flattenNestedBlocks({schema, keyGenerator}, [
+      flattenNestedBlocks({schema}, [
         {
           _key: blockKey,
           _type: 'block',
@@ -198,7 +195,7 @@ describe(flattenNestedBlocks.name, () => {
     const barKey = keyGenerator()
 
     expect(
-      flattenNestedBlocks({schema, keyGenerator}, [
+      flattenNestedBlocks({schema}, [
         {
           _key: blockKey,
           _type: 'block',

package/src/HtmlDeserializer/flatten-nested-blocks.ts

@@ -17,7 +17,6 @@ import {
 export function flattenNestedBlocks(
   context: {
     schema: Schema
-    keyGenerator: () => string
   },
   blocks: Array<ArbitraryTypedObject>,
 ): TypedObject[] {

package/src/HtmlDeserializer/index.ts

@@ -78,7 +78,7 @@ export default class HtmlDeserializer {
     const blocks = trimWhitespace(
       this.schema,
       flattenNestedBlocks(
-        {schema: this.schema, keyGenerator: this.keyGenerator},
+        {schema: this.schema},
         ensureRootIsBlocks(
           this.schema,
           this.deserializeElements(children) as Array<ArbitraryTypedObject>,

package/src/rules/_exports/index.ts

@@ -0,0 +1 @@
+export * from '../index'

package/src/rules/flatten-tables.test.ts

@@ -0,0 +1,224 @@
+import {compileSchema, defineSchema} from '@portabletext/schema'
+import {getTersePt} from '@portabletext/test'
+import {JSDOM} from 'jsdom'
+import {describe, expect, test} from 'vitest'
+import {createTestKeyGenerator} from '../../test/test-key-generator'
+import {htmlToBlocks} from '../index'
+import type {ImageSchemaMatcher} from '../schema-matchers'
+import type {HtmlDeserializerOptions} from '../types'
+import {createFlattenTableRule} from './flatten-tables'
+
+describe(createFlattenTableRule.name, () => {
+  const imageMatcher: ImageSchemaMatcher = ({context, props}) => {
+    if (
+      !context.schema.blockObjects.some(
+        (blockObject) => blockObject.name === 'image',
+      )
+    ) {
+      return undefined
+    }
+
+    return {
+      _type: 'image',
+      ...(props.src ? {src: props.src} : {}),
+      ...(props.alt ? {alt: props.alt} : {}),
+    }
+  }
+
+  const inlineImageMatcher: ImageSchemaMatcher = ({context, props}) => {
+    if (
+      !context.schema.inlineObjects.some(
+        (inlineObject) => inlineObject.name === 'image',
+      )
+    ) {
+      return undefined
+    }
+
+    return {
+      _type: 'image',
+      ...(props.src ? {src: props.src} : {}),
+      ...(props.alt ? {alt: props.alt} : {}),
+    }
+  }
+
+  const schema = compileSchema(
+    defineSchema({
+      blockObjects: [{name: 'image', fields: [{name: 'src', type: 'string'}]}],
+      inlineObjects: [{name: 'image', fields: [{name: 'src', type: 'string'}]}],
+    }),
+  )
+
+  function transform(html: string, options?: HtmlDeserializerOptions) {
+    return htmlToBlocks(html, schema, {
+      parseHtml: (html) => new JSDOM(html).window.document,
+      keyGenerator: createTestKeyGenerator('k'),
+      ...options,
+    })
+  }
+
+  const flattenTableRule = createFlattenTableRule({
+    schema,
+    separator: () => ({_type: 'span', text: ' '}),
+  })
+
+  test('ordinary table', () => {
+    /**
+     * | Year | Sales    | Expenses | Profit  |
+     * | ---- | -------- | -------- | ------- |
+     * | 2022 | \$8,000  | \$5,000  | \$3,000 |
+     * | 2023 | \$10,000 | \$6,500  | \$3,500 |
+     * | 2024 | \$15,000 | \$9,000  | \$6,000 |
+     */
+    const html = [
+      '<table>',
+      '<thead>',
+      '<tr>',
+      '<th>Year</th>',
+      '<th>Sales</th>',
+      '<th>Expenses</th>',
+      '<th>Profit</th>',
+      '</tr>',
+      '</thead>',
+      '<tbody>',
+      '<tr>',
+      '<td>2022</td>',
+      '<td>$8,000</td>',
+      '<td>$5,000</td>',
+      '<td>$3,000</td>',
+      '</tr>',
+      '<tr>',
+      '<td>2023</td>',
+      '<td>$10,000</td>',
+      '<td>$6,500</td>',
+      '<td>$3,500</td>',
+      '</tr>',
+      '<tr>',
+      '<td>2024</td>',
+      '<td>$15,000</td>',
+      '<td>$9,000</td>',
+      '<td>$6,000</td>',
+      '</tr>',
+      '</tbody>',
+      '</table>',
+    ].join('')
+
+    expect(
+      getTersePt({
+        schema,
+        value: transform(html, {
+          rules: [flattenTableRule],
+        }),
+      }),
+    ).toEqual([
+      'Year, ,2022',
+      'Sales, ,$8,000',
+      'Expenses, ,$5,000',
+      'Profit, ,$3,000',
+      'Year, ,2023',
+      'Sales, ,$10,000',
+      'Expenses, ,$6,500',
+      'Profit, ,$3,500',
+      'Year, ,2024',
+      'Sales, ,$15,000',
+      'Expenses, ,$9,000',
+      'Profit, ,$6,000',
+    ])
+  })
+
+  describe('table with images', () => {
+    /**
+     * | Name       | Photo                                                          |
+     * | ---        | ---                                                            |
+     * | John Doe   | <img src="https://via.placeholder.com/150" alt="John Doe" />   |
+     * | Jane Smith | <img src="https://via.placeholder.com/150" alt="Jane Smith" /> |
+     */
+    const html = [
+      '<table>',
+      '<thead>',
+      '<tr>',
+      '<th>Name</th>',
+      '<th>Photo</th>',
+      '</tr>',
+      '</thead>',
+      '<tbody>',
+      '<tr>',
+      '<td>John Doe</td>',
+      '<td><img src="https://via.placeholder.com/150" alt="John Doe" /></td>',
+      '</tr>',
+      '<tr>',
+      '<td>Jane Smith</td>',
+      '<td><img src="https://via.placeholder.com/150" alt="Jane Smith" /></td>',
+      '</tr>',
+      '</tbody>',
+      '</table>',
+    ].join('')
+
+    test('no image matcher', () => {
+      expect(
+        getTersePt({
+          schema,
+          value: transform(html, {
+            matchers: undefined,
+            rules: [flattenTableRule],
+          }),
+        }),
+      ).toEqual(['Name, ,John Doe', 'Photo', 'Name, ,Jane Smith', 'Photo'])
+    })
+
+    test('block image matcher', () => {
+      expect(
+        getTersePt({
+          schema,
+          value: transform(html, {
+            matchers: {
+              image: imageMatcher,
+            },
+            rules: [flattenTableRule],
+          }),
+        }),
+      ).toEqual([
+        'Name, ,John Doe',
+        'Photo',
+        '{image}',
+        'Name, ,Jane Smith',
+        'Photo',
+        '{image}',
+      ])
+    })
+
+    test('block and inline image matcher', () => {
+      expect(
+        getTersePt({
+          schema,
+          value: transform(html, {
+            matchers: {
+              image: imageMatcher,
+              inlineImage: inlineImageMatcher,
+            },
+            rules: [flattenTableRule],
+          }),
+        }),
+      ).toEqual([
+        'Name, ,John Doe',
+        'Photo, ,{image}',
+        'Name, ,Jane Smith',
+        'Photo, ,{image}',
+      ])
+    })
+
+    describe('Google Docs', () => {
+      test('simple table with thead', () => {
+        const html = `<meta charset='utf-8'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-e0aa048e-7fff-f3cb-0d6d-5e68751be0e3"><div dir="ltr" style="margin-left:0pt;" align="left"><table style="border:none;border-collapse:collapse;table-layout:fixed;width:468pt"><colgroup><col /><col /></colgroup><thead><tr style="height:0pt"><th style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;" scope="col"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:12pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Header 1</span></p></th><th style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;" scope="col"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:12pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Header 2</span></p></th></tr></thead><tbody><tr style="height:0pt"><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:12pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Cell 1</span></p></td><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:12pt;font-family:Arial,sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Cell 2</span></p></td></tr></tbody></table></div></b>`
+
+        expect(
+          getTersePt({
+            schema,
+            value: transform(html, {
+              rules: [flattenTableRule],
+            }),
+          }),
+        ).toEqual(['Header 1, ,Cell 1', 'Header 2, ,Cell 2'])
+      })
+    })
+  })
+})

package/src/rules/flatten-tables.ts

@@ -0,0 +1,202 @@
+import {
+  isTextBlock,
+  type PortableTextObject,
+  type PortableTextSpan,
+  type Schema,
+} from '@portabletext/schema'
+import {flattenNestedBlocks} from '../HtmlDeserializer/flatten-nested-blocks'
+import {isElement, tagName} from '../HtmlDeserializer/helpers'
+import type {
+  ArbitraryTypedObject,
+  DeserializerRule,
+  TypedObject,
+} from '../types'
+
+/**
+ * An opinionated `DeserializerRule` that flattens tables in a way that repeats
+ * the header row for each cell in the row.
+ *
+ * @example
+ * ```html
+ * <table>
+ *   <thead>
+ *     <tr>
+ *       <th>Header 1</th>
+ *       <th>Header 2</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     <tr>
+ *       <td>Cell 1</td>
+ *       <td>Cell 2</td>
+ *     </tr>
+ *   </tbody>
+ * </table>
+ * ```
+ * Turns into
+ * ```json
+ * [
+ *   {
+ *     _type: 'block',
+ *     children: [
+ *       {
+ *         _type: 'text',
+ *         text: 'Header 1'
+ *       },
+ *       {
+ *         _type: 'text',
+ *         text: 'Cell 1'
+ *       }
+ *     ]
+ *   },
+ *   {
+ *     _type: 'block',
+ *     children: [
+ *       {
+ *         _type: 'text',
+ *         text: 'Header 2'
+ *       },
+ *       {
+ *         _type: 'text',
+ *         text: 'Cell 2'
+ *       }
+ *     ]
+ *   }
+ * ]
+ * ```
+ *
+ * Use the `separator` option to control if a child element should separate
+ * headers and cells.
+ *
+ * @beta
+ */
+export function createFlattenTableRule({
+  schema,
+  separator,
+}: {
+  schema: Schema
+  separator?: () =>
+    | (Omit<PortableTextSpan, '_key'> & {_key?: string})
+    | (Omit<PortableTextObject, '_key'> & {_key?: string})
+    | undefined
+}): DeserializerRule {
+  return {
+    deserialize: (node, next) => {
+      if (!isElement(node) || tagName(node) !== 'table') {
+        return undefined
+      }
+
+      const thead = node.querySelector('thead')
+      const tbody = node.querySelector('tbody')
+
+      // Only process tables with thead and tbody
+      if (!thead || !tbody) {
+        return undefined
+      }
+
+      // Extract header labels from thead
+      const headerRow = thead.querySelector('tr')
+
+      if (!headerRow) {
+        return undefined
+      }
+
+      const headerCells = headerRow.querySelectorAll('th')
+      const headerResults = [...headerCells].map((headerCell) =>
+        next(headerCell),
+      )
+
+      // Process tbody rows and combine with headers
+      const rows: TypedObject[] = []
+      const rowElements = tbody.querySelectorAll('tr')
+
+      for (const row of rowElements) {
+        const cells = row.querySelectorAll('td')
+
+        let cellIndex = 0
+        for (const cell of cells) {
+          const result = next(cell)
+
+          if (!result) {
+            cellIndex++
+            continue
+          }
+
+          const headerResult = headerResults[cellIndex]
+
+          if (!headerResult) {
+            // If we can't find a corresponding header, then we just push
+            // the deserialized cell as is.
+            if (Array.isArray(result)) {
+              rows.push(...result)
+            } else {
+              rows.push(result)
+            }
+            cellIndex++
+            continue
+          }
+
+          const flattenedHeaderResult = flattenNestedBlocks(
+            {schema},
+            (Array.isArray(headerResult)
+              ? headerResult
+              : [headerResult]) as Array<ArbitraryTypedObject>,
+          )
+          const firstFlattenedHeaderResult = flattenedHeaderResult[0]
+          const flattenedResult = flattenNestedBlocks(
+            {schema},
+            (Array.isArray(result)
+              ? result
+              : [result]) as Array<ArbitraryTypedObject>,
+          )
+          const firstFlattenedResult = flattenedResult[0]
+
+          if (
+            flattenedHeaderResult.length === 1 &&
+            isTextBlock({schema}, firstFlattenedHeaderResult) &&
+            flattenedResult.length === 1 &&
+            isTextBlock({schema}, firstFlattenedResult)
+          ) {
+            const separatorChild = separator?.()
+            // If the header result and the cell result are text blocks then
+            //   we merge them together.
+            const mergedTextBlock = {
+              ...firstFlattenedHeaderResult,
+              children: [
+                ...firstFlattenedHeaderResult.children,
+                ...(separatorChild ? [separatorChild] : []),
+                ...firstFlattenedResult.children,
+              ],
+              markDefs: [
+                ...(firstFlattenedHeaderResult.markDefs ?? []),
+                ...(firstFlattenedResult.markDefs ?? []),
+              ],
+            }
+
+            rows.push(mergedTextBlock)
+            cellIndex++
+            continue
+          }
+
+          // Otherwise, we push the header result and the cell result as is.
+          if (Array.isArray(headerResult)) {
+            rows.push(...headerResult)
+          } else {
+            rows.push(headerResult)
+          }
+
+          if (Array.isArray(result)) {
+            rows.push(...result)
+          } else {
+            rows.push(result)
+          }
+
+          cellIndex++
+        }
+      }
+
+      // Return the processed rows as individual text blocks
+      return rows
+    },
+  }
+}

package/src/rules/index.ts

@@ -0,0 +1 @@
+export * from './flatten-tables'