Problem Description

We need to create a WYSIWYG editor for React using Typescript, Chakra UI, and Tiptap.

Acceptance Criteria

• The component should be created using the libraries mentioned above. Additional libs or modifications from MIT-licensed projects are allowed (please share your sources/licenses).

• Here is the expected behaviour:

  • First editing: If the user is editing a document for the first time, the component will receive a parsed JSON as an initial object. Based on the user's interaction with the editor, the formatted responses should be saved on the DB (via debounce).

  • Secondary editing: If the user is editing a document that has been created before, we'll pass the current formatted object instead of the JSON as the starting point.

  **There is no need to create the pull/push functions from the DB. We'll provide these.

• The initial JSON will contain some arrays and their values should be correctly parsed into a template on the TipTap editor. For example, the JSON may have a field like "previousProjects: Projects[]". We expect that each project is correctly parsed into the template.

• The editor will have the "A4 page" format - i.e. 210x297. On the editor, similar to Notion, users can edit and add “blocks” on the document - such as Text, Headings, Bullets or Ordered Lists.

• Additionally, we're expecting at least these settings modifications:
  Page: page color, line height, page margin;
  Paragraph/Text Style:

  • Bold, Italics, underline, strikethrough;
  • Align text (left, center, right);
  • Add/Remove indent from a paragraph;
  • Change Font family, font size, font color;
  • Highlight text;
  • Add a link to text

• Exporting: There should be a button to export the document. There is no need to create the exporting logic.

Summary

In summary, we will provide:

• The JSON/Typescript interface;
• Template on Google Docs, Latex, or PDF:
• The pull/push DB functions;

We expect to get:

• A React component on a folder containing the functionalities described above (including the TipTap template).

Happy to walk you through an example if needed.
Thanks!