olmps/memo

[Collection Creation] - Rich text field component

ggirotto opened this issue · 0 comments

Summary

This component consists of a visual TextField that has a bold title and when tapped opens a rich text editor in a modal, which allows the user to create a rich text content using this editor, which exposes the stylish (bold, italic, underline, etc) actions in a toolbar above the keyboard.

This component can be reused in any context that supports a rich text field. Two examples are the description field in the New Collection Page and the Question and Answer fields when creating new Memos (See screenshots below).

New Collection Page Description

CleanShot 2021-10-27 at 17 33 07

Question and Answer fields

CleanShot 2021-10-27 at 17 33 44

Business Rules

  • This component must receive a placeholder strings and an optional rich text content. If this content is null, it must place placeholder string in the field, just like the default TextField works. If the content is not null, it must adjust its height to fit the entire content (see screenshots below)
  • It must add a code-stylish properties TabBar above the keyboard, which can be used to update the editor content style.

Screenshots

Empty field (placeholder)

CleanShot 2021-10-27 at 17 28 51

Fulfilled field

CleanShot 2021-10-27 at 17 29 03

Open editor

CleanShot 2021-10-27 at 17 28 59