Grid Table Fixes - block name row, alignment info

- Treat block name row like a regular row instead of header - updated all test mds to reflect same. - Extract align and valign info from html and ensure it is present in md. Added tests specific to it. Resolves: #474 and #475
adobe · May 30, 2024 · b5946ea · b5946ea
1 parent 3ded984
commit b5946ea
Show file tree

Hide file tree

Showing 17 changed files with 131 additions and 53 deletions.
diff --git a/src/html2md.js b/src/html2md.js
@@ -28,7 +28,7 @@ import remarkGridTable from '@adobe/remark-gridtables';
 import { processImages } from './mdast-process-images.js';
 import { processIcons } from './hast-process-icons.js';
 import {
-  TYPE_GRID_TABLE, TYPE_GT_BODY, TYPE_GT_CELL, TYPE_GT_HEADER, TYPE_GT_ROW, handleTableAsGridTable,
+  TYPE_GRID_TABLE, TYPE_GT_BODY, TYPE_GT_CELL, TYPE_GT_ROW, handleTableAsGridTable,
 } from './mdast-table-handler.js';
 import formatPlugin from './markdownFormatPlugin.js';
 
@@ -59,20 +59,19 @@ const HELIX_META = new Set(Array.from([
 
 function toGridTable(title, data) {
   return m(TYPE_GRID_TABLE, [
-    m(TYPE_GT_HEADER, [
-      m(TYPE_GT_ROW, [
+    m(
+      TYPE_GT_BODY,
+      [m(TYPE_GT_ROW, [
         m(TYPE_GT_CELL, [
           text(title),
         ], { colSpan: data[0].length }),
-      ])]),
-    m(
-      TYPE_GT_BODY,
-      data.map((row) => m(
+      ]),
+      ...(data.map((row) => m(
         TYPE_GT_ROW,
         row.map((cell) => m(TYPE_GT_CELL, [
           cell,
         ])),
-      )),
+      )))],
     ),
   ]);
 }
@@ -205,30 +204,36 @@ function handleBlockAsGridTable(state, node) {
   const rows = state.all(node);
 
   const { type, numCols } = node.data;
-  for (const row of rows) {
+  const blockRows = node.children;
+  for (let rowIdx = 0; rowIdx < rows.length; rowIdx += 1) {
+    const row = rows[rowIdx];
     row.type = TYPE_GT_ROW;
     const cells = row.children;
+    const blockCells = blockRows[rowIdx].children;
     const noOfCells = cells.length;
     for (let idx = 0; idx < noOfCells; idx += 1) {
+      const blockCell = blockCells[idx];
       const cell = cells[idx];
       cell.type = TYPE_GT_CELL;
       if (idx === noOfCells - 1 && noOfCells < numCols) {
         cell.colSpan = numCols - idx;
       }
+      const blockProperties = blockCell?.properties;
+      if (blockProperties) {
+        cell.align = blockProperties?.dataAlign;
+        cell.valign = blockProperties?.dataValign;
+      }
     }
   }
 
-  // add header row
-  const th = m(TYPE_GT_CELL, [text(type)]);
+  // add block name row
+  const tr = m(TYPE_GT_CELL, [text(type)]);
   if (numCols > 1) {
-    th.colSpan = numCols;
+    tr.colSpan = numCols;
   }
 
   // create table header and body
-  const children = [
-    m(TYPE_GT_HEADER, [m(TYPE_GT_ROW, [th])]),
-    m(TYPE_GT_BODY, rows),
-  ];
+  const children = [m(TYPE_GT_BODY, [m(TYPE_GT_ROW, [tr]), ...rows])];
   return m(TYPE_GRID_TABLE, children);
 }
 

diff --git a/test/fixtures/block-with-table.md b/test/fixtures/block-with-table.md
@@ -2,7 +2,7 @@ index
 
 +----------------------------------------------------------------------------+
 | Block1                                                                     |
-+=====================+======================================================+
++---------------------+------------------------------------------------------+
 | Custom block cell 1 | Custom block cell 2                                  |
 +---------------------+------------------------------------------------------+
 | Custom block cell 3 | Custom block cell 4                                  |
@@ -31,7 +31,7 @@ index
 
 +---------------------------------------------+
 | Block2                                      |
-+=====================+=======================+
++---------------------+-----------------------+
 | Custom block cell 1 | Custom block cell 2   |
 +---------------------+-----------------------+
 | Custom block cell 3 | ## table with no rows |

diff --git a/test/fixtures/blocks-with-alignment.html b/test/fixtures/blocks-with-alignment.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Blocks with Alignment</title>
+</head>
+<body>
+<main>
+    <div>
+        <h2 id="blocks-with-alignment">Blocks with alignment</h2>
+        <div class="block-with-align-and-valign">
+            <div>
+                <div data-align="center" data-valign="middle">
+                    <p>Simple Text 1</p>
+                    <p>Simple Text 2</p>
+                </div>
+            </div>
+        </div>
+        <div class="block-with-align">
+            <div>
+                <div data-align="left">
+                    <p>Simple Text 1</p>
+                    <p>Simple Text 2</p>
+                </div>
+            </div>
+        </div>
+        <div class="block-with-valign">
+            <div>
+                <div data-valign="bottom">
+                    <p>Simple Text 1</p>
+                    <p>Simple Text 2</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
+<footer></footer>
+</body>
+</html>
diff --git a/test/fixtures/blocks-with-alignment.md b/test/fixtures/blocks-with-alignment.md
@@ -0,0 +1,31 @@
+## Blocks with alignment
+
++-----------------------------+
+| Block With Align And Valign |
++:-------------x-------------:+
+| Simple Text 1               |
+|                             |
+| Simple Text 2               |
++-----------------------------+
+
++------------------+
+| Block With Align |
++:-----------------+
+| Simple Text 1    |
+|                  |
+| Simple Text 2    |
++------------------+
+
++-------------------+
+| Block With Valign |
++---------v---------+
+| Simple Text 1     |
+|                   |
+| Simple Text 2     |
++-------------------+
+
++-------------------------------+
+| Metadata                      |
++-------+-----------------------+
+| title | Blocks with Alignment |
++-------+-----------------------+
diff --git a/test/fixtures/blocks-with-colspan.md b/test/fixtures/blocks-with-colspan.md
@@ -2,7 +2,7 @@
 
 +---------------------------------------------+
 | Block With Colspan                          |
-+=============================================+
++---------------------------------------------+
 | Single Column                               |
 +--------------+------------------------------+
 | First Column | Second Column                |
@@ -14,6 +14,6 @@
 
 +-----------------------------+
 | Metadata                    |
-+=======+=====================+
++-------+---------------------+
 | title | Blocks with colspan |
 +-------+---------------------+
diff --git a/test/fixtures/blocks.md b/test/fixtures/blocks.md
@@ -1,6 +1,6 @@
 +--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
 | Columns (bleed)                                                                                                                                                                                                    |
-+======================================================================================================================================================================================================+=============+
++------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+-------------+
 | _Helix is a new and exciting feature of Adobe Experience Manager_                                                                                                                                    | ![][image0] |
 |                                                                                                                                                                                                      |             |
 | # Faster. Better. Period.                                                                                                                                                                            |             |
@@ -12,7 +12,7 @@
 
 +---------------------+
 | Section Metadata    |
-+=========+===========+
++---------+-----------+
 | Style   | highlight |
 +---------+-----------+
 
@@ -22,7 +22,7 @@
 
 +--------------------------------------------------------------------------------------------------------------------+
 | Cards                                                                                                              |
-+=======================================+======================================+=====================================+
++---------------------------------------+--------------------------------------+-------------------------------------+
 | ![][image1]                           | ![][image2]                          | ![][image3]                         |
 |                                       |                                      |                                     |
 | ### Launch faster                     | ### Fastest Pages on the Web         | ### Faster Publishing               |
@@ -37,15 +37,15 @@
 
 +------------------+
 | Section Metadata |
-+=========+========+
++---------+--------+
 | Style   | dark   |
 +---------+--------+
 
 ---
 
 +------------------------------------------------------------------------------------+
 | Columns (bleed)                                                                    |
-+======================================================================+=============+
++----------------------------------------------------------------------+-------------+
 | ### It’s about time to lose patience with slow sites                 | ![][image4] |
 |                                                                      |             |
 | - Half a second delay in page load time leads to 20% increase in     |             |
@@ -73,7 +73,7 @@
 
 +---------------------------------------------------------------------------------------------------------------------------+
 | Cards                                                                                                                     |
-+=============================+=============================+=================================+=============================+
++-----------------------------+-----------------------------+---------------------------------+-----------------------------+
 | **Unmatched speed**         | **Content at scale**        | **Uncertainty eliminated**      | **Widen the talent pool**   |
 |                             |                             |                                 |                             |
 | Helix is the fastest way to | Helix allows you to publish | Preview content at 100%         | Authors on Helix use        |
@@ -94,7 +94,7 @@
 
 +------------------+
 | Section Metadata |
-+=========+========+
++---------+--------+
 | Style   | light  |
 +---------+--------+
 
@@ -104,7 +104,7 @@
 
 +------------------------------------------------------------------------------------------------------------------+
 | Columns (bleed)                                                                                                  |
-+=======================================================+==========================================================+
++-------------------------------------------------------+----------------------------------------------------------+
 | ![][image5]                                           | ### Create content in Microsoft Word or Google Docs.     |
 |                                                       |                                                          |
 |                                                       | Create a new folder in Google Drive or Microsoft         |
@@ -125,7 +125,7 @@
 
 +------------------+
 | Section Metadata |
-+=========+========+
++---------+--------+
 | Style   | dark   |
 +---------+--------+
 
@@ -139,7 +139,7 @@ Helix lets frontend devs develop and deploy the design and functionality of thei
 
 +------------------+
 | Section Metadata |
-+=========+========+
++---------+--------+
 | Style   | light  |
 +---------+--------+
 
@@ -151,13 +151,13 @@ Helix lets frontend devs develop and deploy the design and functionality of thei
 
 +---------------------+
 | Section Metadata    |
-+=========+===========+
++---------+-----------+
 | Style   | highlight |
 +---------+-----------+
 
 +----------------------------------------------------------------------+
 | Metadata                                                             |
-+=============+========================================================+
++-------------+--------------------------------------------------------+
 | title       | Project Helix by Adobe                                 |
 +-------------+--------------------------------------------------------+
 | description | Frictionless experience management: Build blazing fast |

diff --git a/test/fixtures/breaks-in-headings.md b/test/fixtures/breaks-in-headings.md
@@ -2,6 +2,6 @@
 
 +----------------------------+
 | Metadata                   |
-+=======+====================+
++-------+--------------------+
 | title | Breaks in Headings |
-+-------+--------------------+
++-------+--------------------+
diff --git a/test/fixtures/codeblock.md b/test/fixtures/codeblock.md
@@ -2,7 +2,7 @@
 
 +--------------------------------------------------------------------------------------------------------------------------------------------------+
 | Procedure                                                                                                                                        |
-+==================================================================================================================================================+
++--------------------------------------------------------------------------------------------------------------------------------------------------+
 | 1. Log in to Azure with the Azure CLI.                                                                                                           |
 |                                                                                                                                                  |
 | 2. Query Azure for your tenant and subscription IDs. .                                                                                           |

diff --git a/test/fixtures/default-content.md b/test/fixtures/default-content.md
@@ -16,7 +16,7 @@ Of course you can use a different operating system, browser and code editor, but
 
 +-----------------------------------------------------------------------------------------------------------------------------------------------------------+
 | Video                                                                                                                                                     |
-+===========================================================================================================================================================+
++-----------------------------------------------------------------------------------------------------------------------------------------------------------+
 | [https://main--helix-website--adobe.hlx.page/media\_1d6e3d8e0e465fb2c43cdcb4c6ba8123693c86117.mp4](./media_1d6e3d8e0e465fb2c43cdcb4c6ba8123693c86117.mp4) |
 +-----------------------------------------------------------------------------------------------------------------------------------------------------------+
 
@@ -47,7 +47,7 @@ Congrats you are done, and have a new website running on `https://<branch>--<rep
 
 +-----------------------------------------------------------------------------------------------------------------------------------------------------------+
 | Video                                                                                                                                                     |
-+===========================================================================================================================================================+
++-----------------------------------------------------------------------------------------------------------------------------------------------------------+
 | [https://main--helix-website--adobe.hlx.page/media\_1b16be8d758ce2d392315a7c306767a62516fa831.mp4](./media_1b16be8d758ce2d392315a7c306767a62516fa831.mp4) |
 +-----------------------------------------------------------------------------------------------------------------------------------------------------------+
 
@@ -80,7 +80,7 @@ Commit your changes, and you have completed the steps needed to hook up your own
 
 +-----------------------------------------------------------------------------------------------------------------------------------------------------------+
 | Video                                                                                                                                                     |
-+===========================================================================================================================================================+
++-----------------------------------------------------------------------------------------------------------------------------------------------------------+
 | [https://main--helix-website--adobe.hlx.page/media\_1d7b6d38cd4f0ad9b661887e3a24b44a72f7c945e.mp4](./media_1d7b6d38cd4f0ad9b661887e3a24b44a72f7c945e.mp4) |
 +-----------------------------------------------------------------------------------------------------------------------------------------------------------+
 
@@ -122,7 +122,7 @@ To complete the content of your site go through the same process with the `nav`
 
 +-----------------------------------------------------------------------------------------------------------------------------------------------------------+
 | Video                                                                                                                                                     |
-+===========================================================================================================================================================+
++-----------------------------------------------------------------------------------------------------------------------------------------------------------+
 | [https://main--helix-website--adobe.hlx.page/media\_141a9484b704e5113383b6ee92e09dd0ac352944a.mp4](./media_141a9484b704e5113383b6ee92e09dd0ac352944a.mp4) |
 +-----------------------------------------------------------------------------------------------------------------------------------------------------------+
 
@@ -149,7 +149,7 @@ Once you are are ready to push your changes, simply git add, commit and push and
 
 +----------------------------------------------------------------------+
 | Metadata                                                             |
-+=============+========================================================+
++-------------+--------------------------------------------------------+
 | title       | Getting started with Helix - Developer Tutorial        |
 +-------------+--------------------------------------------------------+
 | description | This tutorial should have you up and running with your |

diff --git a/test/fixtures/empty-block.md b/test/fixtures/empty-block.md
@@ -1,11 +1,11 @@
 +------------------+
 | Product Category |
-+==================+
++------------------+
 |                  |
 +------------------+
 
 +---------------+
 | Stock Locator |
-+===============+
++---------------+
 |               |
-+---------------+
++---------------+
diff --git a/test/fixtures/icons.md b/test/fixtures/icons.md
@@ -4,6 +4,6 @@ Hello :inline: World!
 
 +------------------------------------+
 | Metadata                           |
-+=======+============================+
++-------+----------------------------+
 | title | Simple Document with Icons |
-+-------+----------------------------+
++-------+----------------------------+
diff --git a/test/fixtures/images.md b/test/fixtures/images.md
@@ -18,7 +18,7 @@
 
 +-----------------------------------------+
 | Metadata                                |
-+===========+=============================+
++-----------+-----------------------------+
 | title     | Simple Document with Images |
 +-----------+-----------------------------+
 | image     | ![][image4]                 |