self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-21 09:38:01 +02:00
Code Issues Releases Activity

Mobile, Desktop: Make tables horizontally scrollable (#10161)

Browse Source 
Co-authored-by: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
This commit is contained in:
Edward Jiles 2024-03-25 19:27:48 +08:00 committed by GitHub
parent 20edc63785
commit 2de5c1bbf8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 68 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -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

1
.gitignore vendored
View File

@ -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

20
packages/app-cli/tests/md_to_html/table_horizontally_scrollable_1.html Normal file
View File

@ -0,0 +1,20 @@
<div class="joplin-table-wrapper">
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>No</td>
<td>header</td>
</tr>
<tr>
<td>And no</td>
<td>surprises</td>
</tr>
</tbody>
</table>
</div>

4
packages/app-cli/tests/md_to_html/table_horizontally_scrollable_1.md Normal file
View File

@ -0,0 +1,4 @@
| | |
| --- | --- |
| No | header |
| And no | surprises |

16
packages/app-cli/tests/md_to_html/table_horizontally_scrollable_2.html Normal file
View File

@ -0,0 +1,16 @@
<div class="joplin-table-wrapper">
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Some paragraph<br class="jop-noMdConv"/><br class="jop-noMdConv"/>inside a table cell</td>
<td>Second column</td>
</tr>
</tbody>
</table>
</div>

3
packages/app-cli/tests/md_to_html/table_horizontally_scrollable_2.md Normal file
View File

@ -0,0 +1,3 @@
| | |
| --- | --- |
| Some paragraph<br><br>inside a table cell | Second column |

1
packages/renderer/MdToHtml.ts
View File

@ -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');

17
packages/renderer/MdToHtml/rules/tableHorizontallyScrollable.ts Normal file
View File

@ -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 `<div class="joplin-table-wrapper">\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}</div>\n`;
};
},
};

5
packages/renderer/noteStyle.ts
View File

@ -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 */
/* =============================================== */