After inserting a link, A Enter key stop working. As soon link removed from the UI. Enter key working again

[ejazhussain]

Describe the bug
Entering a link in the editor causes the Enter key to stop functioning. The Enter key works normally until a link is inserted using the insertLink function. After inserting a link, pressing Enter has no effect. Removing the link restores normal Enter key functionality.

This issue prevents the creation of new lines and other standard Enter key behaviors within the editor. Any assistance in resolving this would be greatly appreciated.

To Reproduce
Steps to reproduce the behavior:

1. Type "Google"
2. Select "Google" text.
3. Use the insertLink function (or equivalent editor functionality) to insert a link on the selected "Google" text. (e.g., "https://www.google.com")
   4.0 Press Enter key. (Observe that a new line is not created).
   5.0 Delete the link by deleting the "Google" linked text.
   6.0 Press Enter key. (Observe that a new line is created, and the Enter key functions as expected).

Expected behavior
Pressing Enter within the editor should create a new line, regardless of whether a link is present.

Screenshots

Device Information

• OS: [e.g. Window 11]
• Browser [Edge Chromium]

Additional context

I am using insertLink method under roosterjs-content-model-api

Any help or direction would be appreciated

[JiuqingSong]

I just tried but I can't repro. Are you able to repro in the demo site https://microsoft.github.io/roosterjs/index.html?

[ejazhussain]

@JiuqingSong Thank you for getting back to me.

It's not on the demo site. I am building an SPFx (SharePoint Framework) web part based on React typescript. All other methods and functions, such as bold, italic, underline, etc., are working as expected.

see how I am initializing the editor and see if any advice or pointer or I am missing something

Initializing the roosters

Getting the Editor Core method as this is protect

insertLink(editor, 'https://www.google.com', 'https://www.google.com', 'Google', '_blank');

Using the following versions.

"roosterjs": "9.18.0",
"roosterjs-content-model-core": "9.18.0",
"roosterjs-content-model-dom": "9.18.0",
"roosterjs-content-model-types": "9.18.0",
"roosterjs-content-model-api": "9.18.0"

[ejazhussain]

Shift + Enter works but Enter key alone does not work

[JiuqingSong]

Sorry we can't identify the issue without a local repro. If you have an environment that we can test, or a minimum repro, please share it so we can debug.

[ejazhussain]

@JiuqingSong

I did more digging into this issue. With the vanilla React app, it's working as expected. The problem seems to be happening in the SPFx web part only.

I have created SPFx webpart project for testing. see below URL

Repo URL

https://github.com/ejazhussain/spfx-rooster-playground.git

Component

https://github.com/ejazhussain/spfx-rooster-playground/blob/main/src/webparts/roosterEditor/components/RoosterEditor.tsx

Node version

v18.20.6

Thanks in advance

[JiuqingSong]

how to run this test?

[ejazhussain]

@JiuqingSong

1. Install node version

v18.20.6

2. Install gulp globally

npm install gulp-cli --global

3. Navigate to the repo in the command prompt

4. run npm i to install the packages

5. Run the following command to server the solution locally

npm run serve

6. Once the above command is up and running, navigate to any SharePoint Online page. For example, rooster.aspx and append the following query string to the URL and reload the page

?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js

7. Add the RoosterEditor web part on to the page.

In case you get any issue related to certificate then run the following command

gulp trust-dev-cert

[JiuqingSong]

I suggest to build an easier local repro instead of taking too much dependency. Roosterjs is a pure client side library, so in theory it should work with just some html and .js files locally, server side is not needed at all.

And from your test, since the issue does not repro on a simple demo, the issue should be caused by some conflict thing from your code or dependencies. I suggest to go through all the event handlers instead editor especially for keydown and keypress event, try remove them one by one, see if it can finally work. And the last removed one should be the root cause.

[ejazhussain]

Hi @JiuqingSong Thank you for the directions. I was able to fix the issue by handling the keydown and keypress event via custom plugin.

Thank you