Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Grid Table Fixes - block name row, alignment info #480

Merged
merged 1 commit into from
May 30, 2024
Merged

Grid Table Fixes - block name row, alignment info #480

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 21 additions & 16 deletions src/html2md.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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,
])),
)),
)))],
),
]);
}
Expand Down Expand Up @@ -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);
}

Expand Down
4 changes: 2 additions & 2 deletions test/fixtures/block-with-table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ index

+----------------------------------------------------------------------------+
| Block1 |
+=====================+======================================================+
+---------------------+------------------------------------------------------+
| Custom block cell 1 | Custom block cell 2 |
+---------------------+------------------------------------------------------+
| Custom block cell 3 | Custom block cell 4 |
Expand Down Expand Up @@ -31,7 +31,7 @@ index

+---------------------------------------------+
| Block2 |
+=====================+=======================+
+---------------------+-----------------------+
| Custom block cell 1 | Custom block cell 2 |
+---------------------+-----------------------+
| Custom block cell 3 | ## table with no rows |
Expand Down
38 changes: 38 additions & 0 deletions test/fixtures/blocks-with-alignment.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
31 changes: 31 additions & 0 deletions test/fixtures/blocks-with-alignment.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 |
+-------+-----------------------+
4 changes: 2 additions & 2 deletions test/fixtures/blocks-with-colspan.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

+---------------------------------------------+
| Block With Colspan |
+=============================================+
+---------------------------------------------+
| Single Column |
+--------------+------------------------------+
| First Column | Second Column |
Expand All @@ -14,6 +14,6 @@

+-----------------------------+
| Metadata |
+=======+=====================+
+-------+---------------------+
| title | Blocks with colspan |
+-------+---------------------+
24 changes: 12 additions & 12 deletions test/fixtures/blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Columns (bleed) |
+======================================================================================================================================================================================================+=============+
+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+-------------+
| _Helix is a new and exciting feature of Adobe Experience Manager_ | ![][image0] |
| | |
| # Faster. Better. Period. | |
Expand All @@ -12,7 +12,7 @@

+---------------------+
| Section Metadata |
+=========+===========+
+---------+-----------+
| Style | highlight |
+---------+-----------+

Expand All @@ -22,7 +22,7 @@

+--------------------------------------------------------------------------------------------------------------------+
| Cards |
+=======================================+======================================+=====================================+
+---------------------------------------+--------------------------------------+-------------------------------------+
| ![][image1] | ![][image2] | ![][image3] |
| | | |
| ### Launch faster | ### Fastest Pages on the Web | ### Faster Publishing |
Expand All @@ -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 | |
Expand Down Expand Up @@ -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 |
Expand All @@ -94,7 +94,7 @@

+------------------+
| Section Metadata |
+=========+========+
+---------+--------+
| Style | light |
+---------+--------+

Expand All @@ -104,7 +104,7 @@

+------------------------------------------------------------------------------------------------------------------+
| Columns (bleed) |
+=======================================================+==========================================================+
+-------------------------------------------------------+----------------------------------------------------------+
| ![][image5] | ### Create content in Microsoft Word or Google Docs. |
| | |
| | Create a new folder in Google Drive or Microsoft |
Expand All @@ -125,7 +125,7 @@

+------------------+
| Section Metadata |
+=========+========+
+---------+--------+
| Style | dark |
+---------+--------+

Expand All @@ -139,7 +139,7 @@ Helix lets frontend devs develop and deploy the design and functionality of thei

+------------------+
| Section Metadata |
+=========+========+
+---------+--------+
| Style | light |
+---------+--------+

Expand All @@ -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 |
Expand Down
4 changes: 2 additions & 2 deletions test/fixtures/breaks-in-headings.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@

+----------------------------+
| Metadata |
+=======+====================+
+-------+--------------------+
| title | Breaks in Headings |
+-------+--------------------+
+-------+--------------------+
2 changes: 1 addition & 1 deletion test/fixtures/codeblock.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

+--------------------------------------------------------------------------------------------------------------------------------------------------+
| Procedure |
+==================================================================================================================================================+
+--------------------------------------------------------------------------------------------------------------------------------------------------+
| 1. Log in to Azure with the Azure CLI. |
| |
| 2. Query Azure for your tenant and subscription IDs. . |
Expand Down
10 changes: 5 additions & 5 deletions test/fixtures/default-content.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) |
+-----------------------------------------------------------------------------------------------------------------------------------------------------------+

Expand Down Expand Up @@ -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) |
+-----------------------------------------------------------------------------------------------------------------------------------------------------------+

Expand Down Expand Up @@ -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) |
+-----------------------------------------------------------------------------------------------------------------------------------------------------------+

Expand Down Expand Up @@ -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) |
+-----------------------------------------------------------------------------------------------------------------------------------------------------------+

Expand All @@ -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 |
Expand Down
6 changes: 3 additions & 3 deletions test/fixtures/empty-block.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
+------------------+
| Product Category |
+==================+
+------------------+
| |
+------------------+

+---------------+
| Stock Locator |
+===============+
+---------------+
| |
+---------------+
+---------------+
4 changes: 2 additions & 2 deletions test/fixtures/icons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@ Hello :inline: World!

+------------------------------------+
| Metadata |
+=======+============================+
+-------+----------------------------+
| title | Simple Document with Icons |
+-------+----------------------------+
+-------+----------------------------+
2 changes: 1 addition & 1 deletion test/fixtures/images.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

+-----------------------------------------+
| Metadata |
+===========+=============================+
+-----------+-----------------------------+
| title | Simple Document with Images |
+-----------+-----------------------------+
| image | ![][image4] |
Expand Down
Loading
Loading