Acceptance Criteria

  1. The user can click on any editable area of the document and start editing immediately.

  2. The user can update existing text and add new text.

  3. The user can add, replace, resize, select, or remove images or videos.

  4. The user can apply formatting such as bold, italic, underline, headings, lists, text color, highlight color, font size, and other available style options.

  5. Changes appear instantly within the document.

  6. The user can apply formatting such as bold, italic, underline, headings, lists, text color, highlight color, font size, and other available style options.

US 1

The user can apply formatting such as bold, italic, underline, headings, lists, text color, highlight color, font size, and other available style options.

Toolbar for reader Toolbar for reader
Toolbar for editorToolbar for editor

Basic Flow

  • User opens a document.

  • User clicks into a text block or content area.

  • User makes changes to the content text by clicking any option in the text dialog.

  • User continues editing anywhere else in the document.

  • User clicks Publish.

  • System publishes the updated document.

UI considerations

For color:

https://tailwindcss.com/docs/colors

  • 700 for text color (we don't need all- see selection)

  • 100 for highlight

  • We need neutral (see selection)

For highlight:

  • If select words result is underling

  • If selects a text block result is full backround

US2

The user can add, replace, resize, select, or remove images or videos.

Image select prototype

Video select prototype

Basic Flow

  • User opens a document.

  • User clicks into an image or video that will change to selected status with a blue color.

  • User can select the different options available.

  • User click again to make it bigger.

check this: Theming Prototype - For overall site styling set up by the site admin.

Do you like what you are reading?. Subscribe to receive updates.

Unsubscribe anytime