RangeError coming up when trying to update font size of selected text.

akshay-developer-2021 commented 3 years ago

Expected behavior.

When user selects the text and update the font , font should get updated.

Actual behavior.

Editor throws max call stack error.

Steps to reproduce the problem.

Open editor in docs or anywhere.
Try to insert the below mentioned HTML.
Select all the text.
Try to change the font size.

JS Fiddle for the same: https://jsfiddle.net/akshaygarg_rippling/qhwv5nkf/3/

<span id="isPasted" style='color: rgb(0, 0, 0); font-family: "Times New Roman,Times,serif"; font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;'>Prefix <span contenteditable="false" data-pop="An employee's hire date, e.g. "09/21/2016"" data-pop-class="dark-pop" data-pop-id="1" data-type="rippling-var" name="startDate" style='position: relative; border: none; display: inline-flex; justify-content: center; align-items: center; text-indent: 0px; padding: 3px 5px; overflow: hidden; line-height: 1.5; margin-top: 2px; margin-right: 1px; margin-left: 1px; background-color: rgb(245, 245, 245); color: rgb(0, 0, 0); border-radius: 2px; cursor: pointer; font-family: "Times New Roman,Times,serif"; font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'> Start date  <span style='color: rgb(0, 0, 0); font-family: "Times New Roman,Times,serif"; font-size: 18px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;'> Suffix

Editor version.

4.0.4

OS.

macOS Big Sur version 11.5.2

Browser.

Chrome Version 94.0.4606.81 (Official Build) (x86_64)

Recording.

https://www.loom.com/share/ea4f97f8d08c4ebeb187734160d8b703

akshay-developer-2021 commented 3 years ago

a span with contenteditable attribute set as false , is causing the issue. If I remove contenteditable, things works.

akshay-developer-2021 commented 3 years ago

if in between the text any part have contenteditable:false , editor will go in infinite loop.

prefix qwerty suffix <--- is enough to break the editor.

Mark-Henderson commented 2 years ago

We have this problem too. And it's easily reproducible in your sample editor at https://froala.com/wysiwyg-editor/ as seen here:

https://user-images.githubusercontent.com/5743364/142976263-2b5ab791-5fe7-4154-938f-b977f5f0265b.mov

AkshayCM commented 2 years ago

Thanks for your feedback. This issue is not reproducible or have been found to be fixed on the latest Froala release v4.0.8. Can you please upgrade and check?

Mark-Henderson commented 2 years ago

Hi Akshay,

I still see the problem on the froala website.

In the demo editor, if you select the image and the header text and change the font size, you can see the RangeError in the console as seen in the enclosed image. I’m assuming froala.com is using 4.0.8.

Cheers, …Mark

On Jan 20, 2022, at 3:02 AM, AkshayCM @.***> wrote:

Thanks for your feedback. This issue is not reproducible or have been found to be fixed on the latest Froala release v4.0.8. > Can you please upgrade and check?

— Reply to this email directly, view it on GitHub https://github.com/froala/wysiwyg-editor/issues/4349#issuecomment-1017373737, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABL2GBHROFGXDXD2K2ILTDLUW7TUJANCNFSM5F7YV5OQ. You are receiving this because you commented.

froala / wysiwyg-editor