Investigate how we can reduce the amount of CSS garbage when people paste from word into ckeditor

[ThiefMaster]

We currently allow all css in the editor, because using a whitelist has the annoying side-effect of REMOVING styles that are already where or that have been manually added in source mode.

However, this also has the very annoying side-effect that pasting from Outlook, Word and similar tools (basically anything that exposes HTML/Richtext to the clipboard) has a LOT of extremely ugly CSS which we don't really want.

Maybe there's some way to apply stronger sanitization rules on pasted content in ckeditor5? Or some way to manually run code on paste where we could clean this up?

[tomasr8]

After some digging, I found that ckeditor allows hooking into the paste event and overwriting the pasted contents:

import normalizeClipboardHtml from '@ckeditor/ckeditor5-clipboard/src/utils/normalizeclipboarddata';

// create the editor instance

editor.editing.view.document.on(
  'clipboardInput',
  (ev, data) => {
    if (data.method !== 'paste' || data.content) {
      return;
    }

    const dataTransfer = data.dataTransfer;
    let contentData = '';

    if (dataTransfer.getData('text/html')) {
      contentData = normalizeClipboardHtml(dataTransfer.getData('text/html'));
      // TODO: Use a CSS whitelist to filter the HTML
      data.content = this.editor.data.htmlProcessor.toView(contentData);
    }
  },
  { priority: 'normal' }
);

normalizeClipboardHtml already does some basic sanitization but no CSS removal. I'm guessing we'll have to implement that ourselves.

Links:

• https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/clipboard.html
• https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_view_document-Document.html#event-event:clipboardInput
• https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_view_datatransfer-DataTransfer.html