BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/fixes.js

   1 /**
   2  * Handle alignment for embed (iframe/video) content.
   3  * TinyMCE built-in handling doesn't work well for these when classes are used for
   4  * alignment, since the editor wraps these elements in a non-editable preview span
   5  * which looses tracking and setting of alignment options.
   6  * Here we manually manage these properties and formatting events, by effectively
   7  * syncing the alignment classes to the parent preview span.
   8  * @param {Editor} editor
   9  */
  10 export function handleEmbedAlignmentChanges(editor) {
  11     function updateClassesForPreview(previewElem) {
  12         const mediaTarget = previewElem.querySelector('iframe, video');
  13         if (!mediaTarget) {
  14             return;
  15         }
  16
  17         const alignmentClasses = [...mediaTarget.classList.values()].filter(c => c.startsWith('align-'));
  18         const previewAlignClasses = [...previewElem.classList.values()].filter(c => c.startsWith('align-'));
  19         previewElem.classList.remove(...previewAlignClasses);
  20         previewElem.classList.add(...alignmentClasses);
  21     }
  22
  23     editor.on('SetContent', () => {
  24         const previewElems = editor.dom.select('span.mce-preview-object');
  25         for (const previewElem of previewElems) {
  26             updateClassesForPreview(previewElem);
  27         }
  28     });
  29
  30     editor.on('FormatApply', event => {
  31         const isAlignment = event.format.startsWith('align');
  32         if (!event.node || !event.node.matches('.mce-preview-object')) {
  33             return;
  34         }
  35
  36         const realTarget = event.node.querySelector('iframe, video');
  37         if (isAlignment && realTarget) {
  38             const className = (editor.formatter.get(event.format)[0]?.classes || [])[0];
  39             const toAdd = !realTarget.classList.contains(className);
  40
  41             const wrapperClasses = (event.node.getAttribute('data-mce-p-class') || '').split(' ');
  42             const wrapperClassesFiltered = wrapperClasses.filter(c => !c.startsWith('align-'));
  43             if (toAdd) {
  44                 wrapperClassesFiltered.push(className);
  45             }
  46
  47             const classesToApply = wrapperClassesFiltered.join(' ');
  48             event.node.setAttribute('data-mce-p-class', classesToApply);
  49
  50             realTarget.setAttribute('class', classesToApply);
  51             editor.formatter.apply(event.format, {}, realTarget);
  52             updateClassesForPreview(event.node);
  53         }
  54     });
  55 }
  56
  57 /**
  58  * TinyMCE does not seem to do a great job on clearing styles in complex
  59  * scenarios (like copied word content) when a range of table cells
  60  * are selected. This tracks the selected table cells, and watches
  61  * for clear formatting events, so some manual cleanup can be performed.
  62  *
  63  * The events used don't seem to be advertised by TinyMCE.
  64  * Found at https://github.com/tinymce/tinymce/blob/6.8.3/modules/tinymce/src/models/dom/main/ts/table/api/Events.ts
  65  * @param {Editor} editor
  66  */
  67 export function handleClearFormattingOnTableCells(editor) {
  68     /** @var {HTMLTableCellElement[]} * */
  69     let selectedCells = [];
  70
  71     editor.on('TableSelectionChange', event => {
  72         selectedCells = (event.cells || []).map(cell => cell.dom);
  73     });
  74     editor.on('TableSelectionClear', () => {
  75         selectedCells = [];
  76     });
  77
  78     const attrsToRemove = ['class', 'style', 'width', 'height'];
  79     editor.on('FormatRemove', () => {
  80         for (const cell of selectedCells) {
  81             for (const attr of attrsToRemove) {
  82                 cell.removeAttribute(attr);
  83             }
  84         }
  85     });
  86 }