github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-11-22 11:50:27 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tables: Added fix to ensure proper clear formatting on cell selections

Browse Source
This commit is contained in:
Dan Brown 2024-02-15 16:29:37 +00:00
parent 3fdee6a93b
commit ed0718d3f7
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 33 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
resources/js/wysiwyg/config.js
View File

@ -13,7 +13,7 @@ import {getPlugin as getImagemanagerPlugin} from './plugins-imagemanager';
import {getPlugin as getAboutPlugin} from './plugins-about';
import {getPlugin as getDetailsPlugin} from './plugins-details';
import {getPlugin as getTasklistPlugin} from './plugins-tasklist';
import {handleEmbedAlignmentChanges} from './fixes';
import {handleClearFormattingOnTableCells, handleEmbedAlignmentChanges} from './fixes';
const styleFormats = [
{title: 'Large Header', format: 'h2', preview: 'color: blue;'},
@ -191,6 +191,7 @@ function getSetupCallback(options) {
});
handleEmbedAlignmentChanges(editor);
handleClearFormattingOnTableCells(editor);
// Custom handler hook
window.$events.emitPublic(options.containerElement, 'editor-tinymce::setup', {editor});

31
resources/js/wysiwyg/fixes.js
View File

@ -53,3 +53,34 @@ export function handleEmbedAlignmentChanges(editor) {
}
});
}
/**
* TinyMCE does not seem to do a great job on clearing styles in complex
* scenarios (like copied word content) when a range of table cells
* are selected. This tracks the selected table cells, and watches
* for clear formatting events, so some manual cleanup can be performed.
*
* The events used don't seem to be advertised by TinyMCE.
* Found at https://github.com/tinymce/tinymce/blob/6.8.3/modules/tinymce/src/models/dom/main/ts/table/api/Events.ts
* @param {Editor} editor
*/
export function handleClearFormattingOnTableCells(editor) {
/** @var {HTMLTableCellElement[]} * */
let selectedCells = [];
editor.on('TableSelectionChange', event => {
selectedCells = (event.cells || []).map(cell => cell.dom);
});
editor.on('TableSelectionClear', () => {
selectedCells = [];
});
const attrsToRemove = ['class', 'style', 'width', 'height'];
editor.on('FormatRemove', () => {
for (const cell of selectedCells) {
for (const attr of attrsToRemove) {
cell.removeAttribute(attr);
}
}
});
}