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:
parent
3e3b1764b7
commit
745849023d
@ -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>
|
@ -0,0 +1,5 @@
|
||||
| | | |
|
||||
| :--- | :---: | ---: |
|
||||
| Left | Centered | Right |
|
||||
| Left | Centered | Right |
|
||||
| Left | Centered | Right |
|
@ -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>
|
@ -0,0 +1,5 @@
|
||||
| Left-aligned Column | Center-aligned Column | Right-aligned Column |
|
||||
| :--- | :---: | ---: |
|
||||
| Left | Centered | Right |
|
||||
| Left | Centered | Right |
|
||||
| Left | Centered | Right |
|
@ -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>
|
@ -0,0 +1,3 @@
|
||||
| abc | defghi |
|
||||
| :---: | ---: |
|
||||
| bar | baz |
|
@ -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>
|
@ -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 |
|
@ -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'
|
||||
|
Loading…
Reference in New Issue
Block a user