How does Quill describe editor content? 2/10

#quill #delta #devui #angular

The introduction

In the last post, we introduced how the Quill module works. This time, let's talk about the data model of Quill and see how Quill describes the content in the editor.

You will be surprised by the simplicity and expressive power of the data structure of the Delta.

Quill profile

Quill is an API-driven, easily extensible, and cross-platform modern Web rich text editor. At present, the number of Star on GitHub has exceeded 25K.

Quill is also very easy to use, creating a basic editor in just a few lines of code:

<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

How does Quill describe formatted text?

Let's start with the simplest case: formatted text.

When we insert some formatted content into the editor, the traditional approach is to insert the corresponding DOM directly into the editor, and compare the DOM tree to record the changes.

There are a number of inconveniences associated with working directly with the DOM, such as the difficulty of knowing exactly what format certain characters or content are in in the editor, especially for custom rich text formats.

Quill puts a layer of abstraction on top of the DOM, using a very neat data structure to describe the contents of the editor and its changes: Delta.

Delta is a subset of JSON that contains only one ops attribute, whose value is an array of objects, each of which represents an operation on the editor (based on the initial state of the editor being null).

For example, there is "Hello World" in the editor:

Described by Delta as follows:

{
  "ops": [
    { "insert": "Hello " },
    { "insert": "World", "attributes": { "bold": true } },
    { "insert": "\n" }
  ]
}

The meaning is obvious: insert "Hello "in the empty editor, insert a bold "World" after the previous operation, and finally insert a newline "\n".

How does Quill describe changes in content?

Delta is very concise, but very expressive.

It has only three actions and one attribute, which is enough to describe any rich text content and any variation in content.

3 actions:

insert
retain
delete

1 attribute:

attributes

For example, if we change the bold "World" to the red text "World", this action is described by Delta:

{
  "ops": [
    { "retain": 6 },
    { "retain": 5, "attributes": { "color": "#ff0000" } }
  ]
}

It means: keep the first six characters of the editor, that is, leave "Hello " intact and the next five characters "World", and set "World" to the font color "#FF0000".

If you wanted to delete the word "World", I'm sure you can guess how to use Delta, and yes you can:

{
  "ops": [
    { "retain": 6 },
    { "delete": 5 }
  ]
}

How does Quill describe rich text content?

The most common type of rich text is an image. How does Quill use Delta to describe an image?

In addition to a string format that describes ordinary characters, the insert attribute can also be an object format that describes rich text content, such as an image:

{
  "ops": [
    { "insert": { "image": "https://quilljs.com/assets/images/logo.svg" } },
    { "insert": "\n" }
  ]
}

Take the formula:

{
  "ops": [
    { "insert": { "formula": "e=mc^2" } },
    { "insert": "\n" }
  ]
}

Quill offers great flexibility and extensibility to customize rich text content and formats such as slides, mind maps, and even 3D models.

If you're excited to create your own custom editor content, don't be anxious. In the future post, I'll take you through the inner workings of Quill and help you create your own custom content and custom modules.

Expect it!🎉🎉

About DevUI team

DevUI is a team with both design and engineering perspectives, serving for the DevCloud platform of Huawei Cloud and several internal middle and background systems of Huawei, serving designers and front-end engineers.

Official website: devui.design

Ng component library: ng-devui (Welcome to star🌟)

by Kagol

To be continued...