tuya-alioth v0.0.1-alpha7

Alioth

Alioth is a rich-text editor based on the 3rd generation editing tech(Use the same solution as Google Docs), and lets you build powerful editor just like Google Docs/Git Books.

It can do this because it abandons the built-in contenteditable, which is difficult to control and has a lot of compatitable problems, and makes it's own render engine, cursor system and VDOM tree. Demo

What Is 3rd Generation Editing Technology

The technical solutions of the rich text editor can be divided into three types:

Based Entirely On Contenteditable

The earliest rich text editor solution uses contenteditable, and all text inputs、deletions and other operations are completely controlled by browser. Display effects such as bold, italic, etc. are marked by document.execCommand. Representative works such as: UEditor, WangEditor (old version).

Mixed With VDOM and Contenteditable

This is the currently widely used rich-text solution. It hijacks events such as input or keydown in a contenteditable element, transforms the contents to it's own structure and linked to a VDOM, and then put this VDOM tree to the browser. Representative works such as: Slate.js, Quill.js, Draft.js, WangEditor (new version).

No Contenteditable

This is a solution without the use of contenteditable.

1. It monitors the input events by inserting hidden textarea/input or other input sources in the browser, and generates VDOM in memory.
2. Draw a custom cursor or selection through events such as mouse clicks and mouse-moves.
3. Monitor key operations such as up, down, left, and right, delete, etc., and dynamically calculate the cursor and the final display content.

Representative works such as：Google Docs、iCloud Pages、WPS、Office、Alioth

Why

At present, most popular open source editor solutions are developed based on the first and second generation editor technology. The use of contenteditable particularly depends on the browser's compatibility with this feature, and different browsers will have some differences in their implementation. This could generate a lot of code in the implementation to consider the compatibility of the browser.

At the same time, since the current open source rich-text editor component is relatively simple and multifunctional, it is only suitable for use as a rich text, and cannot be used as a document editor. And due to various limitations of the browser, we are prone to encounter various strange problems when developing custom components for the editor.

Therefore, based on the third-generation editor solution, we are committed to creating a powerful and highly compatible document editor.

Feature

1. High-Compatibility. Alioth only takes a small part of the advanced features of the browser. Rendering, input, and cursor are all completely controlled by itself, which makes Alioth naturally do not have too high requirements on the browser.

2. Clean-Input-Output. Since Alioth's input system is completely controlled by itself, copy, paste, etc. will be filtered by Alioth before being displayed on the page. This prevents the page content from being contaminated by external input sources and causing style confusion.

3. High-Performance. Alioth uses a buffer tree as the data model, and each data node has its own buffer node. Changes in node data will cause the buffer node to replace its own node, and than buffer node would bubbled to up and handed by react framework.

4. Full-Document-Plugins。Alioth is not just a rich-text editor, but a full-document software for the purpose of online Office, and will integrate more practical functions inside the editor, which is convenient out of the box.

How To Use

1. Install

  yarn add tuya-alioth

2. Import

import Alioth from 'tuya-alioth'

const App = () => {
  return <Alioth />
}

License

For more information about licenses, see MIT.