Pasting numbered list with circled numbers from MS Word loses formatting in RichTextEditor

[y okumura]

When copying and pasting content from MS Word into RichTextEditor, bullet lists using circled numbers (e.g., ①, ②, ③...) are not preserved. Instead, they are converted into regular disc-style bullet points.

I attempted to handle this using the beforePasteCleanup event, modifying the pasted content before it's inserted. However, it seems that even after updating args.value, the modifications do not reflect in the actual pasted result.

Here’s the code I used:

tsx
コピーする編集する
const beforePasteCleanup: EmitType<PasteCleanupArgs> = (args) => {
  const divElement = document.createElement("div");
  divElement.innerHTML = args.value;

  // Custom cleanup logic
  [...divElement.querySelectorAll('[class^="MsoListParagraph"]')].forEach((el) => {
    const pElement = document.createElement("p");
    // Replace the element if it's a numbered list using circled numbers
    el.replaceWith(pElement);
  });

  args.value = divElement.innerHTML; // Attempt to set new content
};

And the component setup:

tsx
コピーする編集する
<RichTextEditorComponent
  toolbarSettings={toolbarSettings}
  quickToolbarSettings={quickToolbarSettings}
  beforePasteCleanup={beforePasteCleanup}
>
  <Inject
    services={[
      HtmlEditor,
      Toolbar,
      Image,
      Link,
      QuickToolbar,
      Table,
      Video,
      Audio,
      PasteCleanup,
    ]}
  />
</RichTextEditorComponent>

My questions:

1. Is it possible to modify the pasted HTML content using beforePasteCleanup, and have those modifications actually reflected in the editor?

2. Is there any known workaround to preserve circled-number bullet points when pasting from MS Word into the RichTextEditor?

[Bhuvaneshwari Thirunavukarasu]

Hi y okumura,

Thank you for reaching out.

You can modify pasted content using the afterPasteCleanup event, which applies your changes after internal processing. Also, set keepFormat: true in pasteCleanupSettings to better preserve Word formatting like circled numbers.

<RichTextEditorComponent

  pasteCleanupSettings={{ keepFormat: true }}

  afterPasteCleanup={afterPasteCleanup}

>

  <Inject services={[HtmlEditor, Toolbar, PasteCleanup]} />

</RichTextEditorComponent>

function afterPasteCleanup(args) {

  const div = document.createElement('div');

  div.innerHTML = args.value;

  let cleanHTML = '';

  div.querySelectorAll('li').forEach(li => {

    cleanHTML += `<p>${li.textContent.trim()}</p>`;

  });

  args.value = cleanHTML;

}

Screenshot Reference:

Sample Link: H6jgmt8i (forked) - StackBlitz

Please let us know if you need any further assistance.

Thanks,
Bhuvaneshwari T

[y okumura]

Thank you for the response.

However, this approach didn’t resolve the issue.

I logged the args object in afterPasteCleanup, and it appears that the list is already converted to a <ul> with standard bullets instead of <li> elements containing circled numbers. It seems RichTextEditor’s internal processing transforms the circled-number list from Word into a regular bullet list before afterPasteCleanup is triggered.

filesData: Array[0]
name: "afterPasteCleanup"
value: "<ul level=\"1\" style=\"list-style-type: disc;\" class=\"pasteContent_RTE\"><li style=\"margin-top: 0mm; margin-right: 0mm; margin-bottom: 0mm; text-align: justify; font-size: 10.5pt; font-family: 游明朝, serif;\"><p><span><span><span lang=\"EN-US\">Second</span></span></span></p></li><li style=\"margin-top: 0mm; margin-right: 0mm; margin-bottom: 0mm; text-align: justify; font-size: 10.5pt; font-family: 游明朝, serif;\"><p><span><span lang=\"EN-US\">Third</span></span></p></li></ul>"

That’s why I was originally trying to handle the transformation in beforePasteCleanup.

For reference, I’m using a Mac with Chrome and Safari. Could the platform/browser be affecting this behavior?

[Bhuvaneshwari Thirunavukarasu]

Hi y okumura,

Thank you for your update.

Please note that changes made in the beforePasteCleanup event will not reflect in the rendered content of the Rich Text Editor, as this event is used for internal processing before the editor applies its own transformations.

To apply modifications to the pasted content, it is necessary to use the afterPasteCleanup event. This event allows you to update the processed HTML after the editor's internal cleanup is complete and before the content is inserted. Accordingly, we have implemented the changes in the afterPasteCleanup event.

Please let us know if you need any further assistance.

Thanks,
Bhuvaneshwari T