From 83b1917902b2766db3717fa86d7c8d263e1cfc5d Mon Sep 17 00:00:00 2001 From: Anmol Arora Date: Wed, 10 Aug 2022 16:09:41 +0200 Subject: [PATCH 1/6] feat: add tests for supporting iframes (UX-185) --- .../test/html_input_iframe.html | 34 ++++++++ packages/html-to-slate-ast/test/index.test.ts | 85 +++++++++++++++++++ 2 files changed, 119 insertions(+) create mode 100644 packages/html-to-slate-ast/test/html_input_iframe.html diff --git a/packages/html-to-slate-ast/test/html_input_iframe.html b/packages/html-to-slate-ast/test/html_input_iframe.html new file mode 100644 index 0000000..d4e64db --- /dev/null +++ b/packages/html-to-slate-ast/test/html_input_iframe.html @@ -0,0 +1,34 @@ +
+

+ SANTA CLARA, Calif., (June 20, 2017) – experience for fans and newcomers alike. +

+
+ +
+

 

+

+ .hack is a multimedia franchise created and developed by famed + Japanese developer CyberConnect2. Comprising of video games, anime, novels, + and manga, the world of .hack focuses on the mysterious events + surrounding a wildly popular in-universe massively multiplayer role-playing + game called The World. .hack//G.U. begins after the events of the + original .hack 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. +

+
diff --git a/packages/html-to-slate-ast/test/index.test.ts b/packages/html-to-slate-ast/test/index.test.ts index 6ec711c..9b6d1e1 100644 --- a/packages/html-to-slate-ast/test/index.test.ts +++ b/packages/html-to-slate-ast/test/index.test.ts @@ -491,6 +491,91 @@ 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 Google Docs input', () => { const input = fs .readFileSync(__dirname + '/google-docs_input.html') From e33498fb5267aa2d60145514cec1cf98bc260878 Mon Sep 17 00:00:00 2001 From: Anmol Arora Date: Wed, 10 Aug 2022 16:10:08 +0200 Subject: [PATCH 2/6] feat: add iframe support (UX-185) --- packages/html-to-slate-ast/src/index.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/html-to-slate-ast/src/index.ts b/packages/html-to-slate-ast/src/index.ts index 41c6b74..c72acc2 100644 --- a/packages/html-to-slate-ast/src/index.ts +++ b/packages/html-to-slate-ast/src/index.ts @@ -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< From 62441dcefb37db86e6c5557a5759c2c32890ff35 Mon Sep 17 00:00:00 2001 From: Anmol Arora Date: Tue, 16 Aug 2022 16:55:49 +0530 Subject: [PATCH 3/6] test: add bold text support to table cells (UX-185) --- .../test/html_input_table.html | 28 +++++ packages/html-to-slate-ast/test/index.test.ts | 109 ++++++++++++++++++ 2 files changed, 137 insertions(+) create mode 100644 packages/html-to-slate-ast/test/html_input_table.html diff --git a/packages/html-to-slate-ast/test/html_input_table.html b/packages/html-to-slate-ast/test/html_input_table.html new file mode 100644 index 0000000..bcfa0ac --- /dev/null +++ b/packages/html-to-slate-ast/test/html_input_table.html @@ -0,0 +1,28 @@ +
+ + + + + + + + + + + + + +
+

R1C1 - BOLD TEXT

+ 		+
R1C2
+

R1C3

+

R2C1

+ 		+ R2C2 - ITALIC TEXT + +

+ R2C3 - BOLD TEXT +

+
+
diff --git a/packages/html-to-slate-ast/test/index.test.ts b/packages/html-to-slate-ast/test/index.test.ts index 9b6d1e1..124a8b1 100644 --- a/packages/html-to-slate-ast/test/index.test.ts +++ b/packages/html-to-slate-ast/test/index.test.ts @@ -576,6 +576,115 @@ test('Transforms iframe correctly', async () => { ]); }); +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') From 34f9065e9f912660fa0ee6173820eec57ba56627 Mon Sep 17 00:00:00 2001 From: Anmol Arora Date: Tue, 16 Aug 2022 17:01:20 +0530 Subject: [PATCH 4/6] feat: add nested tags support to table cells (UX-185) --- packages/html-to-slate-ast/src/index.ts | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/packages/html-to-slate-ast/src/index.ts b/packages/html-to-slate-ast/src/index.ts index c72acc2..1b1abdd 100644 --- a/packages/html-to-slate-ast/src/index.ts +++ b/packages/html-to-slate-ast/src/index.ts @@ -234,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]); } From 10fb5416c19be657dc845516b4a90df44c2d609c Mon Sep 17 00:00:00 2001 From: Anmol Arora Date: Tue, 16 Aug 2022 17:08:44 +0530 Subject: [PATCH 5/6] fix: test transforms_google_docs_input (UX-185) --- packages/html-to-slate-ast/test/index.test.ts | 20 +++++-------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/packages/html-to-slate-ast/test/index.test.ts b/packages/html-to-slate-ast/test/index.test.ts index 124a8b1..f45e520 100644 --- a/packages/html-to-slate-ast/test/index.test.ts +++ b/packages/html-to-slate-ast/test/index.test.ts @@ -689,7 +689,7 @@ 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', @@ -927,12 +927,7 @@ test('Transforms Google Docs input', () => { type: 'table_cell', children: [ { - type: 'paragraph', - children: [ - { - text: '', - }, - ], + text: '\n', }, ], }, @@ -940,12 +935,7 @@ test('Transforms Google Docs input', () => { type: 'table_cell', children: [ { - type: 'paragraph', - children: [ - { - text: '', - }, - ], + text: '\n', }, ], }, @@ -981,8 +971,8 @@ test('Transforms Google Docs input', () => { }, ], }, - ]) - ); + ]); + }); }); test('Converts word documents', () => { From 37b3d3292b4c7b31dd388e32c6ba9619571cc352 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Pedro=20Schmitz?= Date: Tue, 16 Aug 2022 11:00:05 -0300 Subject: [PATCH 6/6] chore: add changeset --- .changeset/quick-lamps-check.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/quick-lamps-check.md diff --git a/.changeset/quick-lamps-check.md b/.changeset/quick-lamps-check.md new file mode 100644 index 0000000..562ce27 --- /dev/null +++ b/.changeset/quick-lamps-check.md @@ -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