From b5946eaf5038ea0cc97565d2e8e08513c66c8d7f Mon Sep 17 00:00:00 2001 From: bhagwath Date: Wed, 29 May 2024 18:49:49 -0700 Subject: [PATCH] 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 --- src/html2md.js | 37 +++++++++++++---------- test/fixtures/block-with-table.md | 4 +-- test/fixtures/blocks-with-alignment.html | 38 ++++++++++++++++++++++++ test/fixtures/blocks-with-alignment.md | 31 +++++++++++++++++++ test/fixtures/blocks-with-colspan.md | 4 +-- test/fixtures/blocks.md | 24 +++++++-------- test/fixtures/breaks-in-headings.md | 4 +-- test/fixtures/codeblock.md | 2 +- test/fixtures/default-content.md | 10 +++---- test/fixtures/empty-block.md | 6 ++-- test/fixtures/icons.md | 4 +-- test/fixtures/images.md | 2 +- test/fixtures/multiple-sections.md | 8 ++--- test/fixtures/self-closing-breaks.md | 2 +- test/fixtures/simple.md | 2 +- test/html2md.test.js | 4 +++ test/post-deploy.test.js | 2 +- 17 files changed, 131 insertions(+), 53 deletions(-) create mode 100644 test/fixtures/blocks-with-alignment.html create mode 100644 test/fixtures/blocks-with-alignment.md diff --git a/src/html2md.js b/src/html2md.js index 25f411e7..27751a4c 100644 --- 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 index 34945879..6b22351d 100644 --- 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 new file mode 100644 index 00000000..502f1b80 --- /dev/null +++ b/test/fixtures/blocks-with-alignment.html @@ -0,0 +1,38 @@ + + + + Blocks with Alignment + + +
+
+

Blocks with alignment

+
+
+
+

Simple Text 1

+

Simple Text 2

+
+
+
+
+
+
+

Simple Text 1

+

Simple Text 2

+
+
+
+
+
+
+

Simple Text 1

+

Simple Text 2

+
+
+
+
+
+ + + diff --git a/test/fixtures/blocks-with-alignment.md b/test/fixtures/blocks-with-alignment.md new file mode 100644 index 00000000..ceea36ed --- /dev/null +++ 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 index a7e3595a..e9d73280 100644 --- 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 index 9e1ceaa7..a2c2b401 100644 --- 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,7 +37,7 @@ +------------------+ | Section Metadata | -+=========+========+ ++---------+--------+ | Style | dark | +---------+--------+ @@ -45,7 +45,7 @@ +------------------------------------------------------------------------------------+ | 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 index 80a65b83..6fa52d70 100644 --- a/test/fixtures/breaks-in-headings.md +++ b/test/fixtures/breaks-in-headings.md @@ -2,6 +2,6 @@ +----------------------------+ | Metadata | -+=======+====================+ ++-------+--------------------+ | title | Breaks in Headings | -+-------+--------------------+ \ No newline at end of file ++-------+--------------------+ diff --git a/test/fixtures/codeblock.md b/test/fixtures/codeblock.md index 256f1e83..b5f6843a 100644 --- 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 index a81f4222..f9139b50 100644 --- 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://-- { await test('blocks-with-colspan'); }); + it('converts a document with blocks with alignment correctly', async () => { + await test('blocks-with-alignment'); + }); + it('converts a document with multiple sections', async () => { await test('multiple-sections'); }); diff --git a/test/post-deploy.test.js b/test/post-deploy.test.js index 08c43abb..c287788e 100644 --- a/test/post-deploy.test.js +++ b/test/post-deploy.test.js @@ -24,7 +24,7 @@ And more...newcontent +-------------------------------------------------------------+ | Metadata | -+===================+=========================================+ ++-------------------+-----------------------------------------+ | title | Helix Test Content | +-------------------+-----------------------------------------+ | description | Content is: sharepoint-/main/index.docx |