Wysiwyg-editor: Miscellanous paste from Word formatting issues with new plugin

[markedmondson]

This is using the new Word Paste plugin.

Expected behavior.

Pasting from Word should look _exactly_ the same 😉

Actual behavior.

Some formatting is lost when pasting. Specifically fonts, alignment and bullets.

Steps to reproduce the problem.

Copy and paste the attachment content. Formatting.docx

• The "CENTERED ARIAL 9 RED" is incorrectly aligned
• Numbered and non-ordered bullets are lost and the replacement content is in Calibri
• A space is missing in the "Normal sentence & space missing here" text
• Bullets with links are practically all incorrect
• Centered body cells are left aligned
• Table takes 100% width

Word screenshot:

Froala screenshot:

Froala HTML output:

<table style="width: 100%;">
    <tbody>
        <tr>
            <td style="vertical-align: top;" width="50%"><strong><span style="font-size:12px;color:red;">CENTERED &nbsp;ARIAL 9 RED</span></strong>
                <br>
                <div style="text-align:center;font-size:12px;">Centered Arial 9</div>
            </td>
            <td style="vertical-align: top;" width="50%"><strong><span style="font-size:12px;color:#00B050;">CENTERED &nbsp;ARIAL 9 GREEN</span></strong>
                <br>
                <div style="text-align:center;font-size:12px;">Centered Arial 9</div>
            </td>
        </tr>
        <tr>
            <td style="vertical-align: top;" width="50%">
                <div style="font-size:15px;font-family:Calibri;"><span style="font-size:12px;">1.</span><span style="font-size:12px;font-family:Arial;">List &nbsp;item</span></div>
                <div style="font-size:15px;font-family:Calibri;"><span style="font-size:12px;">2.</span><span style="font-size:12px;font-family:Arial;">List &nbsp;item</span></div>
                <div style="font-size:15px;font-family:Calibri;"><span style="font-size:12px;">3.</span><span style="font-size:12px;font-family:Arial;">List &nbsp;item</span></div>
            </td>
            <td style="vertical-align: top;" width="50%">
                <div style="font-size:15px;font-family:Calibri;"><span style="font-size:12px;font-family:Symbol;">&middot; &nbsp; &nbsp; &nbsp;&nbsp;</span><span style="font-size:12px;font-family:Arial;">List item</span></div>
                <div style="font-size:15px;font-family:Calibri;"><span style="font-size:12px;font-family:Symbol;">&middot; &nbsp; &nbsp; &nbsp;&nbsp;</span><span style="font-size:12px;font-family:Arial;">List item</span></div>
                <div style="font-size:15px;font-family:Calibri;"><span style="font-size:12px;font-family:Symbol;">&middot; &nbsp; &nbsp; &nbsp;&nbsp;</span><span style="font-size:12px;font-family:Arial;">List item</span></div>
            </td>
        </tr>
    </tbody>
</table>

<p>
    <br>
</p>

<p>Normal sentence &amp;amp; spacemissing here</p>

<ul>
    <li><a href="https://www.google.com/"><span style="font-size:12px;font-family:Arial;">Link</span></a></li>
</ul>

<p><span style="color:blue;font-size:15px;font-family:Calibri;"><span style="font-size:12px;font-family:Symbol;color:windowtext;">&middot;</span></span><a href="https://www.google.com/"><span style="font-size:12px;font-family:Arial;">Another Link</span></a></p>

<ul>
    <li><a href="https://www.google.com/"><span style="font-size:12px;font-family:Arial;">Andanother</span></a></li>
</ul>

<p>
    <br>
</p>

<table style="width: 100%;">
    <tbody>
        <tr>
            <td style="text-align: center;background-color: rgb(255, 192, 0);" width="35.09615384615385%"><strong><span style="font-size:12px;color:black;">Centered</span></strong></td>
            <td style="text-align: center;background-color: rgb(255, 192, 0);" width="64.90384615384616%"><strong><span style="font-size:12px;color:black;">Centered</span></strong></td>
        </tr>
        <tr>
            <td width="35.09615384615385%"><span style="font-size:12px;color:black;">Centered</span></td>
            <td width="64.90384615384616%"><span style="font-size:12px;color:black;">Centered</span></td>
        </tr>
        <tr>
            <td width="35.09615384615385%"><span style="font-size:12px;color:black;">Centered</span></td>
            <td width="64.90384615384616%"><span style="font-size:12px;color:black;">Centered</span></td>
        </tr>
    </tbody>
</table>

<p>
    <br>
</p>

OS.

MacOS Sierra

Browser.

Chrome 56

[pelizza]

Hi @markedmondson ,

I'm really curious about where did you find this Word Paste plugin. It is really something I'd like to use :)

[markedmondson]

@pelizza https://github.com/froala/wysiwyg-editor/blob/master/js/plugins/word_paste.min.js

[stefanneculai]

@pelizza it's a new plugin we're planning to add in shortly and we're gathering some feedback now.

[otaviomedeiros]

@stefanneculai i'm looking forward to use this new plugin. Are you planning to release a new version in this month?

[stefanneculai]

@otaviomedeiros yes, there will be a release in couple of days.