1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00

Desktop: Fixes #6431: Preserve Table Alignment When Editing a Note With the Rich Text Editor (#8214)

This commit is contained in:
Christopher O'Toole 2023-05-29 03:10:17 -07:00 committed by GitHub
parent 3e3b1764b7
commit 745849023d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 148 additions and 14 deletions

View File

@ -0,0 +1,19 @@
<table>
<tbody>
<tr>
<td style="text-align:left">Left</td>
<td style="text-align:center">Centered</td>
<td style="text-align:right">Right</td>
</tr>
<tr>
<td style="text-align:left">Left</td>
<td style="text-align:center">Centered</td>
<td style="text-align:right">Right</td>
</tr>
<tr>
<td style="text-align:left">Left</td>
<td style="text-align:center">Centered</td>
<td style="text-align:right">Right</td>
</tr>
</tbody>
</table>

View File

@ -0,0 +1,5 @@
| | | |
| :--- | :---: | ---: |
| Left | Centered | Right |
| Left | Centered | Right |
| Left | Centered | Right |

View File

@ -0,0 +1,26 @@
<table>
<thead>
<tr>
<th style="text-align:left">Left-aligned Column</th>
<th style="text-align:center">Center-aligned Column</th>
<th style="text-align:right">Right-aligned Column</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Left</td>
<td style="text-align:center">Centered</td>
<td style="text-align:right">Right</td>
</tr>
<tr>
<td style="text-align:left">Left</td>
<td style="text-align:center">Centered</td>
<td style="text-align:right">Right</td>
</tr>
<tr>
<td style="text-align:left">Left</td>
<td style="text-align:center">Centered</td>
<td style="text-align:right">Right</td>
</tr>
</tbody>
</table>

View File

@ -0,0 +1,5 @@
| Left-aligned Column | Center-aligned Column | Right-aligned Column |
| :--- | :---: | ---: |
| Left | Centered | Right |
| Left | Centered | Right |
| Left | Centered | Right |

View File

@ -0,0 +1,14 @@
<table>
<thead>
<tr>
<th align="center">abc</th>
<th align="right">defghi</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">bar</td>
<td align="right">baz</td>
</tr>
</tbody>
</table>

View File

@ -0,0 +1,3 @@
| abc | defghi |
| :---: | ---: |
| bar | baz |

View File

@ -0,0 +1,29 @@
<table>
<thead>
<tr>
<th style="text-align:left">Left-aligned Column</th>
<th>This header cell's text is unaligned, but a majority of the text in this column is center-aligned so the
column will be center-aligned</th>
<th style="text-align:right">Right-aligned Column</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Left</td>
<td style="text-align:center">Centered</td>
<td style="text-align:right">Right</td>
</tr>
<tr>
<td style="text-align:right">This is the only right-aligned cell in this column. This is possible if a user
edits a cell's alignment using the cell properties dialog.</td>
<td style="text-align:center">Centered</td>
<td style="text-align:right">Right</td>
</tr>
<tr>
<td style="text-align:center">This is the only center-aligned cell in this column. This is possible if a
user edits a cell's alignment using the cell properties dialog.</td>
<td style="text-align:center">Centered</td>
<td style="text-align:right">Right</td>
</tr>
</tbody>
</table>

View File

@ -0,0 +1,5 @@
| Left-aligned Column | This header cell's text is unaligned, but a majority of the text in this column is center-aligned so the column will be center-aligned | Right-aligned Column |
| :--- | :---: | ---: |
| Left | Centered | Right |
| This is the only right-aligned cell in this column. This is possible if a user edits a cell's alignment using the cell properties dialog. | Centered | Right |
| This is the only center-aligned cell in this column. This is possible if a user edits a cell's alignment using the cell properties dialog. | Centered | Right |

View File

@ -1,6 +1,40 @@
var indexOf = Array.prototype.indexOf
var every = Array.prototype.every
var rules = {}
var alignMap = { left: ':---', right: '---:', center: ':---:' };
function getAlignment(node) {
return node ? (node.getAttribute('align') || node.style.textAlign || '').toLowerCase() : '';
}
function getBorder(alignment) {
return alignment ? alignMap[alignment] : '---';
}
function getColumnAlignment(table, columnIndex) {
var votes = {
left: 0,
right: 0,
center: 0,
'': 0,
};
var align = '';
for (var i = 0; i < table.rows.length; ++i) {
var row = table.rows[i];
if (columnIndex < row.childNodes.length) {
var cellAlignment = getAlignment(row.childNodes[columnIndex]);
++votes[cellAlignment];
if (votes[cellAlignment] > votes[align]) {
align = cellAlignment;
}
}
}
return align;
}
rules.tableCell = {
filter: ['th', 'td'],
@ -17,22 +51,13 @@ rules.tableRow = {
if (tableShouldBeSkipped(parentTable)) return content;
var borderCells = ''
var alignMap = { left: ':--', right: '--:', center: ':-:' }
if (isHeadingRow(node)) {
const colCount = tableColCount(parentTable);
for (var i = 0; i < colCount; i++) {
const childNode = colCount >= node.childNodes.length ? null : node.childNodes[i];
var border = '---'
var align = childNode ? (childNode.getAttribute('align') || '').toLowerCase() : '';
if (align) border = alignMap[align] || border
if (childNode) {
borderCells += cell(border, node.childNodes[i])
} else {
borderCells += cell(border, null, i);
}
const childNode = i < node.childNodes.length ? node.childNodes[i] : null;
var border = getBorder(getColumnAlignment(parentTable, i));
borderCells += cell(border, childNode, i);
}
}
return '\n' + content + (borderCells ? '\n' + borderCells : '')
@ -55,12 +80,15 @@ rules.table = {
// If table has no heading, add an empty one so as to get a valid Markdown table
var secondLine = content.trim().split('\n');
if (secondLine.length >= 2) secondLine = secondLine[1]
var secondLineIsDivider = secondLine.indexOf('| ---') === 0
var secondLineIsDivider = /\| :?---/.test(secondLine);
var columnCount = tableColCount(node);
var emptyHeader = ''
if (columnCount && !secondLineIsDivider) {
emptyHeader = '|' + ' |'.repeat(columnCount) + '\n' + '|' + ' --- |'.repeat(columnCount)
emptyHeader = '|' + ' |'.repeat(columnCount) + '\n' + '|'
for (var columnIndex = 0; columnIndex < columnCount; ++columnIndex) {
emptyHeader += ' ' + getBorder(getColumnAlignment(node, columnIndex)) + ' |';
}
}
return '\n\n' + emptyHeader + content + '\n\n'