Details

      Description

      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:

      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

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              support-lep@liferay.com SE Support
              Reporter:
              jose.balsas Chema Balsas
              Recent user:
              Magdalena Jedraszak
              Participants of an Issue:
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Packages

                  Version Package