Text copied from Word keeps its font

[gblondet117]

Describe the Bug

Hello,

one user of my company has experienced a little "bug". She copied a text from a Word document and paste to a page. But, the copied text kept its original font, which is different from the default font used by Bookstack. I don't know exactly how the copy/paste mechanism works, but the page's source code embedded font information only on the copied/pasted text.

A workaround consists in pasting the text to a more simple text editor (like SublimeText) before pasting it into Bookstack's page. I imagine it leads to purge the html content of the Word text.

I found a potential related issue : #3849

Steps to Reproduce

1. Write a paragraph in a Word document.
2. Copy/paste to a Bookstack page.
3. See the different front from text directly written in the page, and the source code view (tag font-family)

Expected Behaviour

I would be better to automatically purge non-standard font and style from external software to get a uniform rendering.

Screenshots or Additional Context

I don't know if this issue is still present in latest Bookstack version. We planned to update Bookstack next week.

Browser Details

No response

Exact BookStack Version

v23.08.2

[chris-devel0per]

Hi gblondet117,

It seems to me that this behavior is actually expected. If the text in Word is the same and the user doesn't want that, they can paste the text into the WYSIWYG using the default "paste without formatting" option from the OS. On Windows, it's "Ctrl + Shift + V."

Try that out if that is the fix to the problem!

[gblondet117]

Hi, It works (at least on Ubuntu, I have not tested on Windows but it will certainly work also). Thank you ! Should it be relevant to add to the editor a function to clean a whole page from external different fonts and styles ?

While it is easy to just past without formatting for one user, our pages can be edited by more than 30 peoples, who could forgot to copy like this. The resulting page could be a bit messy. I do not know if a "Ctrl+a" + "Ctrl+c" + "Ctrl+Shift+v" on the page is the good solution in this case.

[chris-devel0per]

Hi there,

Great to hear it's working for you on Ubuntu! I've devised a little workaround for the potential formatting issues when multiple users edit a page. Keep in mind that this is more of a personal hack and not officially supported by BookStack, so proceed with caution.

I've taken inspiration from @ssddanbrown's custom WYSIWYG buttons hack, which you can find here.

If you want to know how to apply the hack, check this out this would be the Head HTML.

Now, for the code snippet:

<script>
    // Listen to the BookStack pre-init TinyMCE editor event to tweak the TinyMCE config.
    window.addEventListener('editor-tinymce::pre-init', event => {
        // Gain a reference to the config object that will be used for TinyMCE.
        const mceConfig = event.detail.config;

        // Here we tweak the main toolbar, which is a long string of toolbar buttons or groups.
        // In this example, we add a custom dropdown section as defined below.
        mceConfig.toolbar += ' custom-actions'
    });

    // Listen to the BookStack setup TinyMCE editor event to run custom actions against the editor instance.
    window.addEventListener('editor-tinymce::setup', event => {
        // Gain a reference to the TinyMCE editor instance.
        const editor = event.detail.editor;

        // Define our custom button
        editor.ui.registry.addButton('removeFontFamily', {
            tooltip: 'Remove Font Family',
            icon: 'removeFontFamilyIcon',
            onAction() {
                // The action to run when clicked.
                // Here we remove the "font-family" property from the CSS styles.
        	const content = editor.getContent();
        	const updatedContent = content.replace(/font-family[^;]*/g, '');
        	editor.setContent(updatedContent);
            }
        });

        // Define a custom button group, which is used for dropdowns containing more buttons.
        editor.ui.registry.addGroupToolbarButton('custom-actions', {
            icon: 'more-drawer',
            tooltip: 'More',
            items: 'removeFontFamily', // Space-separated list of buttons to show in this group.
        });

        // "Remove FontFamily" Icon from https://fontawesome.com/icons/text-slash?f=classic&s=solid
        editor.ui.registry.addIcon('removeFontFamilyIcon',`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L355.7 253.5 400.2 96H503L497 120.2c-4.3 17.1 6.1 34.5 23.3 38.8s34.5-6.1 38.8-23.3l11-44.1C577.6 61.3 554.7 32 523.5 32H376.1h-.3H204.5c-22 0-41.2 15-46.6 36.4l-6.3 25.2L38.8 5.1zm168 131.7c.1-.3 .2-.7 .3-1L217 96H333.7L301.3 210.8l-94.5-74.1zM327.3 353.9L272.9 311 243.3 416H192c-17.7 0-32 14.3-32 32s14.3 32 32 32H352c17.7 0 32-14.3 32-32s-14.3-32-32-32H309.8l17.6-62.1z"/></svg>`);
  });
</script>

And also check for the licence of fontawesome(The Icon)! I got it from https://fontawesome.com/icons/text-slash?f=classic&s=solid.

Feel free to give it a try and let me know how it goes. If there are any concerns or issues, we can loop in @ssddanbrown for guidance.

Cheers!