Create a Balloon Editor

• Type: Epic
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: None
• Component/s: CKEditor
• Labels:
  • 7.4-ce-ga4
  • 7.4-dxp-ga1
  • fc_21_03
  • fi-s-dxp
  • team_fi_epic_category_content_authoring
• Epic/Theme:
  • FI_Platform_Evolution
• Epic Status: To Do

When we started working on AlloyEditor, 4 or 5 years ago, CKEditor had a very limited API that forced us to rebuild the editor UI entirely.

In this lapse of time, CKEditor4 has caught up and introduced many of the features that we built ourselves for AlloyEditor:

• Balloon Toolbar
• Contexts
• React Integration
• Robust Accessibility

As of today, we would likely benefit from a simpler integration leveraging CK4 new features rather than having to develop and maintain a complete editor on top.

Goal of this Epic

To create an editor based exclusively on OOTB features of CK4 that mimics AlloyEditor behaviour and functionality. With ootb features we mean use of ckeditor APIs, creation of skins, buttons and even new plugins.

Acceptance Criteria

• The module frontend-editor-ckeditor-web offers a BallonEditor that mimics the old AlloyEditor behaviour
• No dependencies with AE, no code of AE will be loaded
• IE11 will not be supported
• Editor comes in the form of a React component. See LPS-127012 for the acceptance criteria related to the toolbars
• Editor can be also used via <liferay-editor:editor> tag. See LPS-127015
• Editor visual appearence conforms to the design. See LPS-127014

Test Scenarios:

Requirements	Test Case	Covered by frontend/backend unit test? (Yes/No)	Test Priority (business impact)
LPS-121553	Given A block of text is present in CKEditor and Balloon toolbar is enabled When Highlight a text Then Assert text edit function on Balloon toolbar (bold, italic, underline, insert/remove number, insert/remove bulleted list, block styles)	no	5-critical
LPS-121553	Given A balloon toolbar from a highlighted text When Click on bold icon Then the highlighted text is bold	no	5-critical
LPS-121553	Given Text contains a hyperlink is present in CKEditor and Balloon toolbar is enabled When click on hyperlinked text Then Toolbar with hyperlink icon is present	no	4-major
LPS-121553	Given A 3x3 table is present in CKEditor and Balloon toolbar is enabled When Click on the 2x3 table Then Balloon editor contains add/Remove a row/column	no	4-major
LPS-121553	Given A 3x3 table is present in CKEditor and Balloon toolbar is enabled And Given there is a text in one of the cells When Click on the text Then Balloon editor contains Text Edit Options	no	4-major
LPS-121553	Given CKEditor toolbar is present and Balloon toolbar is enabled And Given Video element is present on CKEditor When Click on the video element Then Balloon toolbar pops up And Then video edit toolbar is included in balloon toolbars (Right justify, left justify, centered)	no	4-major
LPS-121553	Given An image is present in CKEditor and balloon toolbar is enabled When Balloon toolbar pops up by clicking on the image Then Assert appropriate items that edits image on balloon toolbar (Right justify, left justify, centered)	no	4-major
LPS-121553	Given Context is present in CKEditor When Source button is available on CKEditor toolbar Then No balloon toolbar available for source view, assert Source modal pops up	no	2-low

 Exploratory testing to consider:

Test Case	Covered by frontend/backend unit test? (Yes/No)	Test Priority (business impact)
Given Developer Tool opened to network tab When Navigate to a page with CKEditor with Balloon toolbar enabled Then frontend-editore-alloyeditor-web is not present in URL column	no	2-low
Given Editor visual appearence conforms to the design When Apply the styling to the balloon toolbars Then Toolbars have the same appearence as the ones in the figma	no	2-low
Given new Editor react component files When viewing the files Then it follows basic react patterns	no	2-low
Explore performance testing of Balloon editor: what should be an expected time for balloon to appear? To Disappear? Threshold time from clicking the balloon editor icons to when it takes effect on ckeditor?	no	2-low