sp-dev-docs icon indicating copy to clipboard operation
sp-dev-docs copied to clipboard

[SPFx][roosterjs-react] - The enter key (on keyboard) not work anymore after inserting link

Open rgcircum opened this issue 2 years ago • 3 comments

What type of issue is this?

Question

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Target SharePoint environment

SharePoint Online

What browser(s) / client(s) have you tested

  • [X] 💥 Internet Explorer
  • [X] 💥 Microsoft Edge
  • [X] 💥 Google Chrome
  • [X] 💥 FireFox
  • [X] 💥 Safari
  • [ ] mobile (iOS/iPadOS)
  • [ ] mobile (Android)
  • [ ] not applicable
  • [ ] other (enter in the "Additional environment details" area below)

Additional environment details

  • browser version : Latest for all
  • SPFx version : 1.18.2
  • Node.js version : 18
  • RoosterJs React : 8.54.0

Issue description

I tried to use Rooster JS React in SharePoint with the SPFx Framework.

it's working, but i have a big problem.

On RichText editor, if i add a link, the enter key on keybord do not work anymore (shift+enter working)

After remove link the enter key work

I do not reproduce the bug on codeSandbox or another external solution, the bug occur only in SharePoint.

I don't understand, if you have any idea for debug this, i would be happy :D

repos of my test : https://github.com/rgcircum/spfx-rooster-js-react

@AJIXuMuK : Is it for similar bug if SharePoint uses CKEditor instead of RoosterJS for the RichText SharePoint native webpart?

rgcircum avatar Jan 05 '24 15:01 rgcircum

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

ghost avatar Jan 05 '24 15:01 ghost

Can confirm the bug at least since SPFx 18.0 with ckeditor 5. After inserting link "enter" doesn't work anymore. After inserting a table "enter" moves focus to the first cell inside the table. Takes place on both site page and the workbench. It doesn't occur in pure React, only in SPFx. Same code used to work in older SPFx (14).

Min repro

  • install SPFx
  • package.json dependencies:
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^41.2.0",
    "@ckeditor/ckeditor5-react": "^6.2.0",
    "@fluentui/react": "^8.106.4",
    "@microsoft/sp-component-base": "1.18.2",
    "@microsoft/sp-core-library": "1.18.2",
    "@microsoft/sp-lodash-subset": "1.18.2",
    "@microsoft/sp-office-ui-fabric-core": "1.18.2",
    "@microsoft/sp-property-pane": "1.18.2",
    "@microsoft/sp-webpart-base": "1.18.2",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "tslib": "2.3.1"
  },
  • root component:
export default class WebpartName extends React.Component<IWebpartNameProps, {}> {
  public render(): React.ReactElement<IWebpartNameProps> {
    return <CKEditor editor={ClassicEditor} />;
  }
}

Parceti avatar Mar 15 '24 09:03 Parceti

@Parceti , Thank you for the feedback ! I not alone anymore.

@VesaJuvonen @AJIXuMuK or someone else can help us, the bug has been open since January.

rgcircum avatar Mar 15 '24 14:03 rgcircum