Lexical V1: Rich text template editor

[andrewleith]

Description

As a user, I need a rich text editor to be able to easily create and edit templates so that I can get to sending notifications faster.

WHY are we building?

• Create a simpler template-building experience.

  WHAT are we building?

• A WYSIWYG template editor

  VALUE created by our solution

• Easier to see in one toolbar what features our templates offer
• Visualize how notifications will look without leaving the editor

Documentation and Artifacts

https://miro.com/app/board/uXjVMgJrBHc=/ https://app.zenhub.com/workspaces/notify-planning-614b3ad91bc2030015ed22f5/issues/gh/cds-snc/notification-planning/1496 Notes from Fable QA Sessions

Acceptance Criteria

Given some context, when (X) action occurs, then (Y) outcome is achieved

Dev

• [ ] Cypress UI tests suite for all formatting features
• [ ] Feature parity with current editor
  • [ ] H1
  • [ ] H2
  • [ ] Bold
  • [ ] Italics
  • [ ] Bulleted list
  • [ ] Numbered list
  • [ ] Nested lists
  • [ ] Divider
  • [ ] Links
  • [ ] Blockquote
  • [ ] language tags
  • [ ] Variables (v2)
• [ ] Test variables in URL text
• [ ] Keyboard Shortcuts (v2)
• [ ] Accessibility: Announce that the formatting has been applied: If text is selected, say “Bold applied” or “Bold removed” If text is not selected, says “abled” “disabled”
• [ ] Button needs to be labelled properly (apply or unapply)
• [ ] Bilingual interface

Design

• [ ] 1. Alternative navigation: if using voice commands - the buttons don't work (might do an easy fix for V1 - proper label text instead of aria, and then come back to it v2 potential testing)
• [ ] 2. Design for new Lexical Interface @amazingphilippe to design Button to opt-in to new editor from current editor Button to go back to the old editor from the new editor
• [ ] 3 .Accessibility: Inscreen dialogue for link editor - @amazingphilippe to make a design
• [ ] Design to Set the default to the old editor and a toggle to move.

Growth/ PM

• [ ] Do we need to add Guidance for the new RTE? (there is a help section in the toolbar and it can be used - but doesn't have to be)
• [ ] New Feature Plan (coordinate with Growth)

Measurements and insights:

• [ ] Google Analytics
• [ ] Tickets in freshdesk
• [ ] Compare how many people use the old editor vs the new editor
• [ ] Compare how many people save a template with the old editor vs the new editor

QA Steps

• [ ] Tested in a realistic production scenario

Research findings

Some participants expected to format text by using a toolbar or by selecting a word and seeing a styling menu (e.g. Word) For these participants, it wasn't good to learn something in order to complete the task. For them, where to find help wasn't obvious, but they successfully clicked the guide links because they didn't see many other options.

Participants noted that Markdown isn't something they/their colleagues have knowledge about. However if they themselves had technical knowledge, they were happy to find markdown as the formatting language.

[jzbahrai]

Hey team! Please add your planning poker estimate with Zenhub @jzbahrai @adriannelee @amazingphilippe @andrewleith @whabanks @yaelberger-commits

[adriannelee]

We could add to the AC:

• The live preview shows the expected aspect ratio (Comment from Jimmy P from team demo)