Image not aligned properly with text in web content with AlloyEditor

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.0.X EE, Master
• Fix Version/s: 7.0.0 DXP FP22, 7.0.0 DXP SP4, 7.0.X EE, 7.0.4 CE GA5, 7.1.X, Master
• Component/s: Alloy Editor
• Labels:
  • liferay-digital-enterprise-70-sp4
  • liferay-fixpack-de-22-7010
• Branch Version/s:
  7.0.x
• Backported to Branch:
  Committed
• Story Points: 1
• Fix Priority: 3
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/49744

Description

When using alloy editor (editor.wysiwyg.portal-impl.portlet.ddm.text_html.ftl=alloyeditor) the styling of the image tag through ae_imagealignment https://github.com/liferay/alloy-editor/blob/master/src/plugins/imagealignment.js doesn't occur.

Steps to reproduce

1) Start up Liferay with default properties.
2) Create a web content article with a paragraph or two of text.
3) Insert an image through the plus button into the middle of the text.
4) Change the alignment of the image to be left aligned.

Results of Testing

Expected Result: The text wraps around the image with alignment.
Actual Results: The image distorts the spacing of text when aligning. Only one line of text is displayed next to it with the rest of the vertical space taken up by whitespace.

editor.wysiwyg.portal-impl.portlet.ddm.text_html.ftl=ckeditor has proper behavior
editor.wysiwyg.portal-impl.portlet.ddm.text_html.ftl=alloyeditor has improper behavior

Errors/Logs

No errors

Master

Reproduced
37cc85673fd99d837563e367f91ca81e7c470e9a

Branch

Reproduced
8cf06b1e24b2c69f78ecd51b033564008fb04a286666