📝 Table of Contents

• About
• Getting Started
• Usage
• Paragraphs
• Markers
• Deployment
• Built Using

🧐 About

This is an own rich text editor made by letrus! The goal here is to replace the needs of external rich text libraries (such as Draft.js), and also implement it with a better API, features and maintainability.

🏁 Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

We use Yarn as package manager and, as specified in package.json, the app requires node >= v16.14.x.

We suggest to use VSCode as the main editor, to take advantage of code completion and other useful extensions. This template is provided with a complete VSCode configuration, including recommended extensions to install in your editor.

Installing

To provisioning all the dependencies of the project, simply run

yarn

To use all the project features, don't forget to install all recommended VSCode extensions. You can see the list of recommended extensions using

{cmd|ctrl} + shift + p -> Show Recommended Extensions

which sets the @recommended filter. The extension recommendations for the project are labeled as Workspace Recommendations.

🔧 Running the tests

To start the tests suite in watching mode, run

yarn test

To get the complete coverage run

yarn test:coverage

Once the coverage is complete, you can open the results in your browser, starting from /coverage/lcov-report/index.html

🎈 Usage

To start the system with the hot reloading feature run

yarn start

and then navigate to localhost:3000

Supported Language Features

This project supports a superset of the latest JavaScript standard. In addition to ES6 syntax features, it also supports:

Exponentiation Operator (ES2016). Async/await (ES2017). Object Rest/Spread Properties (ES2018). Dynamic import (stage 4 proposal) Nullish Coalescing (stage 4 proposal) Optional Chaining

The Typescript version used is 4.1+ and supports all these features out of the box

The formatting is managed by Prettier, configured with two plugins to order imports and also format package.json file. When files are staged, Eslint runs with the fix option, also running Prettier in the while.

Absolute Imports

The project is configured with the src folder as baseUrl, so it is possible to import a file located in src/types/text.ts using:

import {TextState} from 'types/text';

📄 Paragraphs

This editor works by separating blocks of contents, know as paragraphs, a paragraphs contains a text and also markers over the text, the data structure of a paragraph is like this:

paragraphs: {
  0: {
    text: 's-senpai 😳',
    markers: [],
  },
}

as you can see, it's a dictionary which uses the paragraph id as a key.

Editing a paragraph

When trying to add a paragraph or writing over it, different browsers will perform different behaviors, to avoid that, the editor remove this behavior and add the following standard over it:

• When a new or empty paragraph is created, the editor will put a br tag inside to ensure that the browsers will jump to the next line even if there is no content in the paragraph
• If the paragraph already contains text, it will remove the br tag to not jump lines where it shouldn't (note: that br tags can't be used to separate lines)
• Remove all divs and br tags (for br tags it'll remove only the ones that doesn't belong to an empty paragraph), different browsers try to use different separators, so we need to ensure that the separator is the same (currently it's a p tag)

📑 Markers

Markers can be added over a paragraph and is a way to mark part of a text inside it.

To define a marker, you need use a pointer over parts of the text, example:

paragraphs: {
  0: {
    text: 'pai tá on, chama 😎',
    markers: [
      {id: 1, start: 0, end: 3}, // mark the "pai" word
    ],
  },
}

Child Markers

There is case when a marker contains another one inside it, for an example, when you have a mark over pai ta on and another one over ta, when this happens, we can say that the second one is a child of the first one.

Overlap In Markers

A overlap between markers happens when there is a intersection between two markers, for an example, there is a marker pai ta and a marker ta on, when this happens, it means that both markers are "disputing" ta, currently the first marker (in ascending order) will always have a bigger priority over the other ones, so the second marker will mark only on, givening the the disputed word to the first marker.

Limitations

• Currently the editor doesn't support overlap in child markers
• If there is a overlap of more than one marker in the same part of the text, it'll not support it
• More levels of child markers supported partially, if you try to add a child marker that also has a child marker, it should work, but weird behaviors could happen depending on how you're structuring it and if there is an overlap between markers

🚀 Deployment

Work In Progress

⛏️ Built Using

• Typescript - JS typed superset
• ReactJS - Main framework
• Styled Components - CSS stuff
• Jest - Testing framework
• Testing Library - Testing utilities