ckeditor 5 cut paste from Word formatting

Created on 21 August 2023, over 1 year ago
Updated 27 June 2024, 6 months ago

I'm not sure where this issue lies if it is the administrative theme Claro or W3CSS so I appreciate any help.

I submitted the following to drupal core:
-------------
A major issue preventing us from using CKEditor 5 in Drupal 9 and 10. Attached is our test file to replicate this issue.

Using Admin theme of Claro and dw3css theme no lists are formatted correctly. Sample file includes bullet, numbered and alphabetic all fail with a conversion insert which is not in Word file of text-indent:-.25in which causes text to be offset on top of the item identifier in the list.

<ul style="list-style-type:disc;">
    <li class="MsoListParagraphCxSpFirst" style="mso-list:l0 level1 lfo1;<strong>text-indent:-.25in;</strong>">
        Item 1<o:p></o:p>
    </li>
    <li class="MsoListParagraphCxSpMiddle" style="mso-list:l0 level1 lfo1;<strong>text-indent:-.25in;</strong>">
        Item 2
        <br>
        more about item 2<o:p></o:p>
    </li>
    <li class="MsoListParagraphCxSpLast" style="mso-list:l0 level1 lfo1;<strong>text-indent:-.25in;</strong>">
        Item 3<o:p></o:p>
    </li>
</ul>
<p class="MsoNormal">
    End of bullet list.<o:p></o:p>

When will this module be ready for prime time and in sync with copy/paste from Word and Office?
-------------

Thank you Alaa for any insight you can provide.

πŸ’¬ Support request
Status

Closed: outdated

Version

2.0

Component

Miscellaneous

Created by

πŸ‡ΊπŸ‡ΈUnited States markfien

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @markfien
  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX

    Hello Mark,
    I tested the word document and I see the some extra html tags and some missing styles.
    To remove all extra tags and clean up the html, I found CKEditor 5 Paste Filter β†’ module. I enabled it and I updated the default settings as the screenshot. I unchecked only one.

    To style the content as the word document I added the below css to the theme. You can add it to the sub-theme.

    .field--type-text p,
    .field--type-text-long p,
    .field--type-text-with-summary p {
      margin: 16px 0 0 0;
    }
    
    .field--type-text ol,
    .field--type-text ul,
    .field--type-text-long ol,
    .field--type-text-long ul,
    .field--type-text-with-summary ol,
    .field--type-text-with-summary ul {
      padding-left: 50px;
      margin: 0;
    }
    
    .field--type-text li:before,
    .field--type-text-long li:before,
    .field--type-text-with-summary li:before {
      content: "";
      display: inline-block;
      width: 16px;
    }
    
    
    

    With the ckeditor 5 module and some css you can have good results.

    This is the final look I have on the website:

    Here is the html:

    <h2>Test of Word cut/paste (heading 2)</h2><p>Content from Word should be converted properly and these two paragraphs use shift-enter for the spacing which should be one line<br><br>This second paragraph should only be one line below the first and uses a paragraph break for the next section.</p><p>This third section is separated by 2 paragraph breaks.</p><p>This is a bullet list:</p><ul style="list-style-type:disc;" class="ul-0"><li style="mso-list:l0 level1 lfo1;" class="li-0">Item 1</li><li style="mso-list:l0 level1 lfo1;" class="li-0">Item 2<br>more about item 2</li><li style="mso-list:l0 level1 lfo1;" class="li-0">Item 3</li></ul><p>End of bullet list.</p><p>This is a numbered list:</p><ol><li style="mso-list:l1 level1 lfo2;">Item 1</li><li style="mso-list:l1 level1 lfo2;">Item 2<br>more about Item 2</li><li style="mso-list:l1 level1 lfo2;">Item 3</li></ol><p>End of numbered list</p><p>This is an alphabetic list:</p><ol style="list-style-type:lower-alpha;"><li style="mso-list:l2 level1 lfo3;">Item a</li><li style="mso-list:l2 level1 lfo3;">Item b<br>more about item b</li><li style="mso-list:l2 level1 lfo3;">Item c</li></ol><p>End of alphabetic list</p><p>This is the end of the test document.</p>
    

    Best wishes,
    Alaa

  • πŸ‡ΊπŸ‡ΈUnited States markfien

    Aala,

    Thank you for the detailed information. I have made the identical changes (I had paste filter turned off .. duh) and turned off the style in paste filter. I am still getting the text-indent:-.25in; when pasting and not getting the result you show so all lists are not formatted correctly. I added your style content to our sub-theme css file.

    When pasting from Word, source in CKEditor 5 shows:

    <ul style="list-style-type:disc;">
        <li style="mso-list:l0 level1 lfo1;text-indent:-.25in;">
            Item 1
        </li>
        <li style="mso-list:l0 level1 lfo1;text-indent:-.25in;">
            Item 2
            <br>
            more about item 2
        </li>
        <li style="mso-list:l0 level1 lfo1;text-indent:-.25in;">
            Item 3
        </li>
    </ul>
    <p>
        End of bullet list.
    </p>
    <p>
        This is a numbered list:
    </p>
    <ol>
        <li style="mso-list:l1 level1 lfo2;text-indent:-.25in;">
            Item 1
        </li>
        <li style="mso-list:l1 level1 lfo2;text-indent:-.25in;">
            Item 2
            <br>
            more about Item 2
        </li>

    Any insight you can provide is much appreciated. Thank you.

  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX

    Hello,

    The results you had is expected. The style property was unchecked, so any style will be copied from MS.
    The workaround for this issue is to override the style don't want in the sub-theme.
    Example:

    .field--type-text li,
    .field--type-text-long li,
    .field--type-text-with-summary li {
      text-indent: 0!Important;
    }
    

    Or in the module configuration check the style properties to be on. I only unchecked it for the alphabetic list, so you will not copy any style from MS.

    Best wishes,
    Alaa

  • Status changed to Closed: outdated about 1 year ago
  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX
  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX
Production build 0.71.5 2024