froala / wysiwyg-editor

The next generation Javascript WYSIWYG HTML Editor.
https://www.froala.com/wysiwyg-editor
Other
5.3k stars 675 forks source link

Untoggling a tag within a paragraph strips paragraph styles #4389

Open mhgoldman opened 2 years ago

mhgoldman commented 2 years ago
Expected behavior.

1) Insert this HTML into the editor's HTML view: <p style="text-align: center;"><strong>This is some text.</strong></p> 2) In graphical view, select the entire paragraph and click the Bold button. 3) The text should be unbolded without un-centering the text.

Actual behavior.

In step 3, the text is uncentered. Inspection of the HTML confirms that the inline styles of the paragraph tag have been removed.

The issue happens with other tags within the paragraph too, not just strong. It appears that the same thing happens when calling editor.format.remove() in JS.

Steps to reproduce the problem.

Easy to reproduce, even on the demo editor on Froala's website.

1) Access the editor at https://froala.com/wysiwyg-editor/

2) Double click the first line, which is a center-aligned paragraph, to select it.

3) Click the Bold button. The text becomes bold and it remains center-aligned.

4) Clicks the Bold button again. The text is unbolded, but the center alignment is lost, resulting in the text shifting left. Inspecting the HTML, we can see that the "text-align: center" inline style has been stripped out.

Editor version.

We use 3.2.7, but issue is reproducible with current version on Froala web site as described above.

OS.

OS X 10.15.7

Browser.

Chrome, Safari

patHyatt commented 2 years ago

removing-tag-removes-unrelated-style 0