Skip to content

Commit

Permalink
Add a text node to empty children array (#31)
Browse files Browse the repository at this point in the history
  • Loading branch information
@oddtinker
oddtinker authored Aug 18, 2021
1 parent 3d96e02 commit 8e2a3a4
Show file tree
Hide file tree
Showing 4 changed files with 149 additions and 30 deletions.
5 changes: 5 additions & 0 deletions .changeset/lazy-walls-run.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@graphcms/html-to-slate-ast': minor
---

Populate empty children array with text node
56 changes: 48 additions & 8 deletions packages/html-to-slate-ast/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,15 @@ function deserialize(el: Node) {
) {
parent = el.childNodes[0];
}
const children = Array.from(parent.childNodes)
let children = Array.from(parent.childNodes)
.map(deserialize)
.flat() as ChildNode[];

if (children.length === 0) {
if (!['COLGROUP', 'COL', 'CAPTION', 'TFOOT'].includes(nodeName))
// @ts-expect-error
children = [{ text: '' }];
}
if (el.nodeName === 'BODY') {
return jsx('fragment', {}, children);
}
Expand Down Expand Up @@ -137,14 +142,51 @@ function deserialize(el: Node) {
return jsx('element', attrs, listItemChildren);
} else if (
nodeName === 'TABLE' &&
!children.find((node: ChildNode) => node.nodeName === 'THEAD')
!Array.from((el as HTMLTableElement).childNodes).find(
(node: ChildNode) => node.nodeName === 'THEAD'
)
) {
// tables must have thead, otherwise field crashes
const thead = {
type: 'table_head',
children: [],
};
return jsx('element', attrs, [thead, ...children]);
} else if (nodeName === 'TR') {
// if TR is empty, insert a cell with a paragraph to ensure selection can be placed inside
const modifiedChildren =
(el as HTMLTableRowElement).cells.length === 0
? [
{
type: 'table_cell',
children: [
{
type: 'paragraph',
children: [{ text: el.textContent ? el.textContent : '' }],
},
],
},
]
: children;
return jsx('element', attrs, modifiedChildren);
} else if (nodeName === 'TD') {
// if TD is empty, insert a a paragraph to ensure selection can be placed inside
const childNodes = Array.from(
(el as HTMLTableDataCellElement).childNodes
);
const modifiedChildren =
childNodes.length === 0
? [
{
type: 'paragraph',
children: [{ text: '' }],
},
]
: childNodes.map((child) => ({
type: 'paragraph',
children: [{ text: child.textContent ? child.textContent : '' }],
}));
return jsx('element', attrs, modifiedChildren);
} else if (nodeName === 'IMG') {
return jsx('element', attrs, [attrs.href]);
}
Expand All @@ -153,12 +195,10 @@ function deserialize(el: Node) {

if (nodeName === 'DIV') {
const childNodes = Array.from(el.childNodes);
const isParagraph =
childNodes.length &&
childNodes.every(
(child) =>
(isElementNode(child) && isInlineElement(child)) || isTextNode(child)
);
const isParagraph = childNodes.every(
(child) =>
(isElementNode(child) && isInlineElement(child)) || isTextNode(child)
);
if (isParagraph) {
return jsx('element', { type: 'paragraph' }, children);
}
Expand Down
1 change: 1 addition & 0 deletions packages/html-to-slate-ast/test/google-docs_input.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<meta charset='utf-8'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-e761974a-7fff-ad9a-4bc3-a13570a7dd95"><h1 dir="ltr" style="line-height:1.38;margin-top:20pt;margin-bottom:6pt;"><span style="font-size:20pt;font-family:Arial;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;">Heading 1</span></h1><h2 dir="ltr" style="line-height:1.38;margin-top:18pt;margin-bottom:6pt;"><span style="font-size:16pt;font-family:Arial;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;">Heading 2</span></h2><h3 dir="ltr" style="line-height:1.38;margin-top:16pt;margin-bottom:4pt;"><span style="font-size:13.999999999999998pt;font-family:Arial;color:#434343;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;">Heading 3</span></h3><h4 dir="ltr" style="line-height:1.38;margin-top:14pt;margin-bottom:4pt;"><span style="font-size:12pt;font-family:Arial;color:#666666;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;">Heading 4</span></h4><h5 dir="ltr" style="line-height:1.38;margin-top:12pt;margin-bottom:4pt;"><span style="font-size:11pt;font-family:Arial;color:#666666;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;">Heading 5</span></h5><h6 dir="ltr" style="line-height:1.38;margin-top:12pt;margin-bottom:4pt;"><span style="font-size:11pt;font-family:Arial;color:#666666;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;">Heading 6</span></h6><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><a href="https://github.com/GraphCMS/next-webapp/pull/1034" style="text-decoration:none;"><span style="font-size:11pt;font-family:Arial;color:#0563c1;background-color:#ffffff;font-weight:700;font-style:normal;font-variant:normal;text-decoration:underline;-webkit-text-decoration-skip:none;text-decoration-skip-ink:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Link to GH</span></a><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:#ffffff;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">&nbsp;</span></p><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;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;">Unordered list:</span></p><ul style="margin-top:0;margin-bottom:0;padding-inline-start:48px;"><li dir="ltr" style="list-style-type:disc;font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;" aria-level="1"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;" role="presentation"><span style="font-size:11pt;font-family:Arial;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;">One</span></p></li><li dir="ltr" style="list-style-type:disc;font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;" aria-level="1"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;" role="presentation"><span style="font-size:11pt;font-family:Arial;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;">Two</span></p></li><li dir="ltr" style="list-style-type:disc;font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;" aria-level="1"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;" role="presentation"><span style="font-size:11pt;font-family:Arial;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;">Three</span></p></li></ul><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;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;">Ordered list:</span></p><ol style="margin-top:0;margin-bottom:0;padding-inline-start:48px;"><li dir="ltr" style="list-style-type:decimal;font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;" aria-level="1"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;" role="presentation"><span style="font-size:11pt;font-family:Arial;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;">One</span></p></li><li dir="ltr" style="list-style-type:decimal;font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;" aria-level="1"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;" role="presentation"><span style="font-size:11pt;font-family:Arial;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;">Two</span></p></li></ol><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;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;">Table:</span></p><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><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:11pt;font-family:Arial;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 one</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:11pt;font-family:Arial;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 two</span></p></td></tr><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;"><br /></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;"><br /></td></tr></tbody></table></div></b>
Loading

0 comments on commit 8e2a3a4

Please sign in to comment.