Skip to content

Commit

Permalink
Merge pull request #93 from hygraph/anmol/ux-185-html-ast-plugin-impr…
Browse files Browse the repository at this point in the history 
…ovements-for-bandai

feat: support iframes and non-text content/tags within table cells
  • Loading branch information
@anmolarora1
anmolarora1 authored Aug 17, 2022
2 parents 24d7418 + 37b3d32 commit f3c9e30
Show file tree
Hide file tree
Showing 5 changed files with 298 additions and 28 deletions.
7 changes: 7 additions & 0 deletions .changeset/quick-lamps-check.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@graphcms/html-to-slate-ast": minor
---

- Add IFrame support
- Add bold text support to table cells
- Add nested tags support to table cells
43 changes: 30 additions & 13 deletions packages/html-to-slate-ast/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,25 @@ const ELEMENT_TAGS: Record<
};
},
PRE: () => ({ type: 'code-block' }),
IFRAME: el => {
const src = el.getAttribute('src');
if (!src) return {};
const height = el.getAttribute('height');
const width = el.getAttribute('width');
return {
type: 'iframe',
url: '//www.youtube.com/embed/ljiWOrULppk?rel=0',
// default iframe height is 150
height: Number(height || 150),
// default iframe width is 300
width: Number(width || 300),
children: [
{
text: '',
},
],
};
},
};

const TEXT_TAGS: Record<
Expand Down Expand Up @@ -215,19 +234,17 @@ function deserialize<
} else if (nodeName === 'TD' || nodeName === 'TH') {
// if TD or TH is empty, insert a paragraph to ensure selection can be placed inside
const childNodes = Array.from((el as HTMLTableCellElement).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);
if (childNodes.length === 0) {
return jsx('element', attrs, [
{
type: 'paragraph',
children: [{ text: '' }],
},
]);
} else {
const children = childNodes.map(c => deserialize(c, global)).flat();
return jsx('element', attrs, children);
}
} else if (nodeName === 'IMG') {
return jsx('element', attrs, [attrs.href]);
}
Expand Down
34 changes: 34 additions & 0 deletions packages/html-to-slate-ast/test/html_input_iframe.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<div>
<p>
<strong>SANTA CLARA, Calif., (June 20, 2017) –</strong> experience for fans and newcomers alike.
</p>
<div
style="
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
"
>
<iframe
allowfullscreen=""
frameborder="0"
height="360"
src="//www.youtube.com/embed/ljiWOrULppk?rel=0"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
width="640"
></iframe>
</div>
<p>&nbsp;</p>
<p>
<em>.hack</em> is a multimedia franchise created and developed by famed
Japanese developer CyberConnect2. Comprising of video games, anime, novels,
and manga, the world of <em>.hack</em> focuses on the mysterious events
surrounding a wildly popular in-universe massively multiplayer role-playing
game called The World. <em>.hack//G.U. </em>begins after the events of the
original <em>.hack </em>series with players assuming the role of Haseo as he
tracks down a powerful Player Killer named Tri-Edge who killed his friend’s
in-game avatar Shino, and put her into a coma in real life.
</p>
</div>
28 changes: 28 additions & 0 deletions packages/html-to-slate-ast/test/html_input_table.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<div>
<table>
<tbody>
<tr>
<td>
<p><strong>R1C1 - BOLD TEXT</strong></p>
</td>
<td>
<div>R1C2</div>
</td>
<td><p>R1C3</p></td>
</tr>
<tr>
<td>
<p>R2C1</p>
</td>
<td>
<span><i>R2C2 - ITALIC TEXT</i></span>
</td>
<td>
<p>
<strong>R2C3 - BOLD TEXT</strong>
</p>
</td>
</tr>
</tbody>
</table>
</div>
214 changes: 199 additions & 15 deletions packages/html-to-slate-ast/test/index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -491,11 +491,205 @@ test('Transforms inner spans wrapped in a div into paragraph', () => {
);
});

test('Transforms iframe correctly', async () => {
const input = fs
.readFileSync(__dirname + '/html_input_iframe.html')
.toString();

const ast = await htmlToSlateAST(input);
expect(ast).toStrictEqual([
{
type: 'paragraph',
children: [
{
text: 'SANTA CLARA, Calif., (June 20, 2017) –',
bold: true,
},
{
text: ' experience for fans and newcomers alike.\n  ',
},
],
},
{
type: 'paragraph',
children: [
{
url: '//www.youtube.com/embed/ljiWOrULppk?rel=0',
type: 'iframe',
width: 640,
height: 360,
children: [
{
text: '',
},
],
},
],
},
{
type: 'paragraph',
children: [
{
text: ' ',
},
],
},
{
type: 'paragraph',
children: [
{
text: '.hack',
italic: true,
},
{
text:
' is a multimedia franchise created and developed by famed\n Japanese developer CyberConnect2. Comprising of video games, anime, novels,\n and manga, the world of ',
},
{
text: '.hack',
italic: true,
},
{
text:
' focuses on the mysterious events\n surrounding a wildly popular in-universe massively multiplayer role-playing\n game called The World. ',
},
{
text: '.hack//G.U. ',
italic: true,
},
{
text: 'begins after the events of the\n original ',
},
{
text: '.hack ',
italic: true,
},
{
text:
'series with players assuming the role of Haseo as he\n tracks down a powerful Player Killer named Tri-Edge who killed his friend’s\n in-game avatar Shino, and put her into a coma in real life.\n  ',
},
],
},
{
text: '\n',
},
]);
});

test('Transforms tables with nested html tags as cells', async () => {
const input = fs
.readFileSync(__dirname + '/html_input_table.html')
.toString();

const ast = await htmlToSlateAST(input);
expect(ast).toStrictEqual([
{
type: 'table',
children: [
{
type: 'table_body',
children: [
{
type: 'table_row',
children: [
{
type: 'table_cell',
children: [
{
type: 'paragraph',
children: [
{
bold: true,
text: 'R1C1 - BOLD TEXT',
},
],
},
],
},
{
type: 'table_cell',
children: [
{
type: 'paragraph',
children: [
{
text: 'R1C2',
},
],
},
],
},
{
type: 'table_cell',
children: [
{
type: 'paragraph',
children: [
{
text: 'R1C3',
},
],
},
],
},
],
},
{
type: 'table_row',
children: [
{
type: 'table_cell',
children: [
{
type: 'paragraph',
children: [
{
text: 'R2C1',
},
],
},
],
},
{
type: 'table_cell',
children: [
{
italic: true,
text: 'R2C2 - ITALIC TEXT',
},
],
},
{
type: 'table_cell',
children: [
{
type: 'paragraph',
children: [
{
bold: true,
text: 'R2C3 - BOLD TEXT',
},
],
},
],
},
],
},
],
},
],
},
{
text: '\n',
},
]);
});

test('Transforms Google Docs input', () => {
const input = fs
.readFileSync(__dirname + '/google-docs_input.html')
.toString();
return htmlToSlateAST(input).then(ast =>
return htmlToSlateAST(input).then(ast => {
expect(ast).toEqual([
{
type: 'heading-one',
Expand Down Expand Up @@ -733,25 +927,15 @@ test('Transforms Google Docs input', () => {
type: 'table_cell',
children: [
{
type: 'paragraph',
children: [
{
text: '',
},
],
text: '\n',
},
],
},
{
type: 'table_cell',
children: [
{
type: 'paragraph',
children: [
{
text: '',
},
],
text: '\n',
},
],
},
Expand Down Expand Up @@ -787,8 +971,8 @@ test('Transforms Google Docs input', () => {
},
],
},
])
);
]);
});
});

test('Converts word documents', () => {
Expand Down

0 comments on commit f3c9e30

Please sign in to comment.