# tuya-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.

Latest version **0.0.1-alpha7** (published 2022-04-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install tuya-alioth
pnpm add tuya-alioth
yarn add tuya-alioth
bun add tuya-alioth
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1-alpha7 |
| Published | 2022-04-25 |
| First published | 2022-04-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 29 |
| Unpacked size | 979.2 KB |
| Known vulnerabilities | 0 (+16 in 3 direct dependencies) |
| Install scripts | no |
| Maintainers | djwxfdt |

## Links

- npm: https://www.npmjs.com/package/tuya-alioth
- npm.io page: https://npm.io/package/tuya-alioth

## Dependencies (29)

- [husky](https://npm.io/package/husky.md) ^0.14.3
- [immer](https://npm.io/package/immer.md) ^9.0.6
- [katex](https://npm.io/package/katex.md) ^0.15.1
- [ramda](https://npm.io/package/ramda.md) ^0.27.1
- [ahooks](https://npm.io/package/ahooks.md) ^2.10.11
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [mermaid](https://npm.io/package/mermaid.md) ^8.13.4
- [rc-menu](https://npm.io/package/rc-menu.md) ^9.5.3
- [shortid](https://npm.io/package/shortid.md) ^2.2.16
- [filesize](https://npm.io/package/filesize.md) ^8.0.6
- [is-hotkey](https://npm.io/package/is-hotkey.md) ^0.2.0
- [rc-motion](https://npm.io/package/rc-motion.md) ^2.4.4
- [codemirror](https://npm.io/package/codemirror.md) ^5.64.0
- [rc-animate](https://npm.io/package/rc-animate.md) ^3.1.1
- [rc-tooltip](https://npm.io/package/rc-tooltip.md) ^5.1.1
- [@types/node](https://npm.io/package/@types/node.md) ^13.9.5
- [lint-staged](https://npm.io/package/lint-staged.md) ^7.2.0
- [localforage](https://npm.io/package/localforage.md) ^1.10.0
- [markdown-it](https://npm.io/package/markdown-it.md) ^12.2.0
- [rc-checkbox](https://npm.io/package/rc-checkbox.md) ^2.3.2
- [rc-dropdown](https://npm.io/package/rc-dropdown.md) ^3.4.0
- [react-color](https://npm.io/package/react-color.md) ^2.19.3
- [@types/react](https://npm.io/package/@types/react.md) ^17.0.2
- [highlight.js](https://npm.io/package/highlight.js.md) ^11.3.1
- [module-alias](https://npm.io/package/module-alias.md) ^2.2.2
- [react-viewer](https://npm.io/package/react-viewer.md) ^3.2.2
- [eventemitter3](https://npm.io/package/eventemitter3.md) ^4.0.7
- [react-codemirror](https://npm.io/package/react-codemirror.md) ^1.0.0
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1

## Recent versions

- 0.0.1-alpha7 (latest) — 2022-04-25
- 0.0.1-alpha8 (beta) — 2022-04-27
- 0.0.1-alpha.6 — 2022-04-25
- 0.0.1-alpha.5 — 2022-04-22
- 0.0.1-alpha.4 — 2022-04-22
- 0.0.1-alpha.3 — 2022-04-22
- 0.0.1-alpha.2 — 2022-04-22
- 0.0.1-alpha.1 — 2022-04-22
- 0.0.1-alpha.0 — 2022-04-22

## README

# 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](https://djwxfdt.github.io/alioth-example/)

![alt demo](./example/demo.png)

# 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
```shell
  yarn add tuya-alioth
```

2. Import
```js
import Alioth from 'tuya-alioth'

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

```

## License
For more information about licenses, see [MIT](./LICENSE).

---
_Source: https://npm.io/package/tuya-alioth · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._