From 2de5c1bbf8d5cec9d71bebac45013febb2e037dd Mon Sep 17 00:00:00 2001 From: Edward Jiles Date: Mon, 25 Mar 2024 19:27:48 +0800 Subject: [PATCH] Mobile, Desktop: Make tables horizontally scrollable (#10161) Co-authored-by: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com> --- .eslintignore | 1 + .gitignore | 1 + .../table_horizontally_scrollable_1.html | 20 +++++++++++++++++++ .../table_horizontally_scrollable_1.md | 4 ++++ .../table_horizontally_scrollable_2.html | 16 +++++++++++++++ .../table_horizontally_scrollable_2.md | 3 +++ packages/renderer/MdToHtml.ts | 1 + .../rules/tableHorizontallyScrollable.ts | 17 ++++++++++++++++ packages/renderer/noteStyle.ts | 5 +++++ 9 files changed, 68 insertions(+) create mode 100644 packages/app-cli/tests/md_to_html/table_horizontally_scrollable_1.html create mode 100644 packages/app-cli/tests/md_to_html/table_horizontally_scrollable_1.md create mode 100644 packages/app-cli/tests/md_to_html/table_horizontally_scrollable_2.html create mode 100644 packages/app-cli/tests/md_to_html/table_horizontally_scrollable_2.md create mode 100644 packages/renderer/MdToHtml/rules/tableHorizontallyScrollable.ts diff --git a/.eslintignore b/.eslintignore index 3e35788f4..13447f79a 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1227,6 +1227,7 @@ packages/renderer/MdToHtml/rules/link_open.js packages/renderer/MdToHtml/rules/mermaid.js packages/renderer/MdToHtml/rules/sanitize_html.js packages/renderer/MdToHtml/rules/source_map.js +packages/renderer/MdToHtml/rules/tableHorizontallyScrollable.js packages/renderer/MdToHtml/setupLinkify.js packages/renderer/MdToHtml/validateLinks.js packages/renderer/assetsToHeaders.js diff --git a/.gitignore b/.gitignore index 03c3ad65f..5a054a346 100644 --- a/.gitignore +++ b/.gitignore @@ -1207,6 +1207,7 @@ packages/renderer/MdToHtml/rules/link_open.js packages/renderer/MdToHtml/rules/mermaid.js packages/renderer/MdToHtml/rules/sanitize_html.js packages/renderer/MdToHtml/rules/source_map.js +packages/renderer/MdToHtml/rules/tableHorizontallyScrollable.js packages/renderer/MdToHtml/setupLinkify.js packages/renderer/MdToHtml/validateLinks.js packages/renderer/assetsToHeaders.js diff --git a/packages/app-cli/tests/md_to_html/table_horizontally_scrollable_1.html b/packages/app-cli/tests/md_to_html/table_horizontally_scrollable_1.html new file mode 100644 index 000000000..d58edcb3b --- /dev/null +++ b/packages/app-cli/tests/md_to_html/table_horizontally_scrollable_1.html @@ -0,0 +1,20 @@ +
+ + + + + + + + + + + + + + + + + +
Noheader
And nosurprises
+
diff --git a/packages/app-cli/tests/md_to_html/table_horizontally_scrollable_1.md b/packages/app-cli/tests/md_to_html/table_horizontally_scrollable_1.md new file mode 100644 index 000000000..501493760 --- /dev/null +++ b/packages/app-cli/tests/md_to_html/table_horizontally_scrollable_1.md @@ -0,0 +1,4 @@ +| | | +| --- | --- | +| No | header | +| And no | surprises | \ No newline at end of file diff --git a/packages/app-cli/tests/md_to_html/table_horizontally_scrollable_2.html b/packages/app-cli/tests/md_to_html/table_horizontally_scrollable_2.html new file mode 100644 index 000000000..5a8c2e459 --- /dev/null +++ b/packages/app-cli/tests/md_to_html/table_horizontally_scrollable_2.html @@ -0,0 +1,16 @@ +
+ + + + + + + + + + + + + +
Some paragraph

inside a table cell		Second column
+
diff --git a/packages/app-cli/tests/md_to_html/table_horizontally_scrollable_2.md b/packages/app-cli/tests/md_to_html/table_horizontally_scrollable_2.md new file mode 100644 index 000000000..671d2033f --- /dev/null +++ b/packages/app-cli/tests/md_to_html/table_horizontally_scrollable_2.md @@ -0,0 +1,3 @@ +| | | +| --- | --- | +| Some paragraph

inside a table cell | Second column | \ No newline at end of file diff --git a/packages/renderer/MdToHtml.ts b/packages/renderer/MdToHtml.ts index bbdd39ad0..52a5cc3f3 100644 --- a/packages/renderer/MdToHtml.ts +++ b/packages/renderer/MdToHtml.ts @@ -49,6 +49,7 @@ const rules: RendererRules = { fountain: require('./MdToHtml/rules/fountain').default, mermaid: require('./MdToHtml/rules/mermaid').default, source_map: require('./MdToHtml/rules/source_map').default, + tableHorizontallyScrollable: require('./MdToHtml/rules/tableHorizontallyScrollable').default, }; const uslug = require('@joplin/fork-uslug'); diff --git a/packages/renderer/MdToHtml/rules/tableHorizontallyScrollable.ts b/packages/renderer/MdToHtml/rules/tableHorizontallyScrollable.ts new file mode 100644 index 000000000..76ad02c1f --- /dev/null +++ b/packages/renderer/MdToHtml/rules/tableHorizontallyScrollable.ts @@ -0,0 +1,17 @@ +import * as MarkdownIt from 'markdown-it'; + +export default { + // Make table horizontally scrollable by give table a div parent, so the width of the table is limited to the screen width. + // see https://github.com/laurent22/joplin/pull/10161 + plugin: (markdownIt: MarkdownIt) => { + markdownIt.renderer.rules.table_open = function(tokens: MarkdownIt.Token[], idx: number, options: MarkdownIt.Options, _env: any, renderer: any) { + const current = renderer.renderToken(tokens, idx, options); + // joplin-table-wrapper css is set in packages/renderer/noteStyle.ts + return `
\n${current}`; + }; + markdownIt.renderer.rules.table_close = function(tokens: MarkdownIt.Token[], idx: number, options: MarkdownIt.Options, _env: any, renderer: any) { + const current = renderer.renderToken(tokens, idx, options); + return `${current}
\n`; + }; + }, +}; diff --git a/packages/renderer/noteStyle.ts b/packages/renderer/noteStyle.ts index fe8d9f237..27c6b1d8c 100644 --- a/packages/renderer/noteStyle.ts +++ b/packages/renderer/noteStyle.ts @@ -434,6 +434,11 @@ export default function(theme: any, options: Options = null) { overflow-x: auto; } + .joplin-table-wrapper{ + overflow-x: auto; + overflow-y: hidden; + } + /* =============================================== */ /* For TinyMCE */ /* =============================================== */