⁠ added automatically in the editor

[johnkhor0216]

I'm trying to replace the keywords found in the editor into tag. But for some unknown reasons, there are multiple ⁠ added to the end of my content, making my cursor to move to the next line where I have to press on backspace twice to delete a character and a lot more issues that extend from here. It's a plugin in Strapi but i think the problem originated from ckeditor.

<div class="ck ck-editor__main" role="presentation">
  <div class="ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-focused"
  lang="en" dir="ltr" role="textbox" aria-label="Editor editing area: main. Press ⌥0 for help."
  contenteditable="true">
    <h1>
      Test
    </h1>
    <p>
      here we go
      <br>
      <br data-cke-filler="true">
    </p>
    &NoBreak;&NoBreak;&NoBreak;&NoBreak;&NoBreak;&NoBreak;&NoBreak;
  </div>
</div>

The code below is how I'm replacing the content:

const replaceKeywords = (text) => {
    const fileKeyword = {
        "Google": "https://www.google.com",
        "Youtube": "https://www.youtube.com"
    };

    let replacedText = text.replace(/(\bGoogle\b|\bYoutube\b)(?![^<]*>)/g, (match) => {
        const link = fileKeyword[match];
        return `<a href="${link}" target="_blank">${match}</a>`;
    });

    return replacedText;
};

onChange={(event, editor) => {
            const data = editor.getData();
            const modifiedContent = replaceKeywords(data);

            editor.focus();
            editor.model.change(writer => {
              writer.setSelection(writer.createPositionAt(editor.model.document.getRoot(), "end"));
            });

            onChange({ target: { name, value: modifiedContent } });

            const wordCountPlugin = editor.plugins.get('WordCount');
            const numberOfCharacters = wordCountPlugin.characters;

            if (numberOfCharacters > maxLength) {
              console.log('Too long');
            }
          }}

Hi, @johnkhor0216! Those ⁠ characters are called a block filler which is inserted automatically to the editable to make the selection more manageable. 

However, I think that your issue is related to the fact that you set the content in the custom field using the onChange function. All changes in the editor content should be made directly on the model, so first, try to modify the model using Writer, then call onChange to update the field. This way you should synchronize changes between the editor and the field in Strapi.