Editor: Changing the header on one editor will change the header on another editor

[xqses]

Describe the bug
If we have two widgets with editors in the same homepage, changing the header format in the second widget will change the header format in the first widget.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://main-enterprise.demo.design.infor.com/components/editor/test-several-on-page.html
2. Select text in the first editor and change to Header 1
3. Do not press inside the text area of the second editor, only select Header 2 from the dropdown
4. The text from the first editor will change to Header 2

Expected behavior
The text in the header of the first widget should have Header 1

Additional context
Video
Code for reproduction

[tmcconechy]

I cant seem to reproduce this on this example https://main-enterprise.demo.design.infor.com/components/editor/test-several-on-page.html but lets check that its not an angular only issue. Or maybe each editor needs an ID.

[xqses]

Interesting, I can reproduce in that example. But it seems like the toolbar has an ID so it makes sense if the editor itself has an ID. https://imgur.com/a/ulyIiDA
However, this bug occurs when we change the header format without clicking inside the text area of the second editor. So to reproduce in that example:

1. Select text in the first editor and change to Header 1
2. Do not press inside the text area of the second editor, only select Header 2 from the dropdown
3. The text from the first editor will change to Header 2

I am not sure exactly how to setup the enterprise repo as an environment where I could play around myself, but glancing at the the editor.js source code I think maybe we can't rely on which editor element is currently selected. Since in this case I assume that the selected element would be editor 1 (where we clicked in the textarea and edited text) rather than element 2 (where we didn't click in the textarea but only used the toolbar)

I might be wrong about that though, but hopefully the repro instructions help.

[tmcconechy]

Yep that helps - its working on the selected text... But not checking its within the same editor. But FYI if you want to set up the demo repo..

cd some-folder
git clone git@github.com:infor-design/enterprise.git .
// Make sure node 14 is installed (can use https://github.com/coreybutler/nvm-windows)
npm i
npm run start

[jbrcna]

QA Passed
v4.62.0-dev
https://main-enterprise.demo.design.infor.com/components/editor/test-several-on-page.html