Online collaborative editing products are all the more popular these days, and their advantage is that they can efficiently and accurately manage shared documents and data when multiple people are working together in a team.

(I write this article in a reluctant tone mainly because I think this thing is a little strange to me, but I am a little interested in it. I want to communicate with you while helping me sort out the knowledge points.)

CRDT (Conflict-Free Replicated Data Type)

The first thing you have to know is the term.

The four Spaces between the words are intended to give you a pure English understanding of the concept of a conflict-free copy-free data type.

Conflict-free replication data types. Combined with the multiplayer online collaboration mentioned at the beginning, this is roughly the type of data that is copied from computer to computer without causing conflict. And then think about what is the data type again? String, object, etc., but this data type is definitely not a simple data type.

But the first thing to remember is that CRDT is a data type that can be replicated by multiple terminals without conflict.

For more on this topic, go to Wikipedia: CRDT

All right, let’s take a sip and move on to the next point.

Yjs

About the introduction of Yjs, I went to read the official document:



I really don’t understand… Modular building blocks?? !!!!! bulls***

It doesn’t matter, first put the relevant things down, run, the console print more print.

Attached is the official document of Yjs: Click me

1. Yjs – demo download

Portal: yJS-demo

Then rush to readme.md!!

2. Run

The NPM install took quite a long time, wait.

And then NPM start comes out with this. Well, the interface is ugly. Anyway, maybe this team doesn’t live by their faces.

Select ProseMirror Binding (mirror is a rich text editor, mirror is a mirror).

A rich text editor comes out.

Since it’s a multiplayer editor, open another session and test it out. Sure enough, collaboration can work.

Okay, go to the second ProseMirror Binding with Version History. Anyway, this is the historical version.)

Okay, look at number three

Yjs + Dat Protocol Demo (with offline support and p2p sync using Dat)

Yjs + data protocol demo (offline support and direct synchronization using data). Personally, P2P is better translated as “direct”.

The fourth

ProseMirror-Atlaskit Binding ProseMirror-Atlaskit Binding

As if the Chinese translation is the same as the third one? But rich text editors have a lot more functionality. And the interface is more mature and good-looking.



Then there is a button in the upper right corner of the page that controls the connect and disconnect buttons. When I clicked disconnect, I noticed that the content in the editor would no longer sync.



(Han smiles)

The fifth

Quill Binding (check, Quill is also a well-known editor)

The fifth is about the same as the fourth

Oh, I understand now, these links should be made with Yjs framework editor. And I found the disconnect button on all the links except the third and eighth one.

The sixth

Monaco Binding



Yeah, it’s a big black one. It’s kind of cool. My gut tells me this is a code editor collaboration tool??

Anyway, go down the seventh

CodeMirror Binding (code…. mirror… Presumably also code collaboration class

)

Last one!!

TipTap Binding (this name is….. It’s kind of imperious, it translates like “supreme editor” or something…) Okay, so let’s take a look at the supreme editor.

Awesome, this editor toolbar is actually text instead of small ICONS………

Good capricious… Minimalist style?? !!!!!

Tiptap portal found ~

Ok, link click done

So… What is this demo I downloaded??

Let’s just stick with a few different editors using Yjs.

Back to modular building blocks ****modular building blocks………

Modular building blocks

As mentioned earlier, it is essentially a data type. It should be a data type related to blocks. Then there are those who follow a mathematical constraint with a pattern and formula (I guess, don’t get too involved).

Further: in common block-based editors, it is generally accepted that a complete unit of data is the most fine-grained: a div mapped to a DOM tree, for example. So in the editor, the block is a line or a character?

Suddenly, a flash of inspiration, I think it is the brick when building a house 🧱

All right, next point.

Editor application/editor framework

While most rich text editors (especially older ones) are based on editor application ideas, ProseMirror is designed to target the editor framework, not the editor application.

The editor framework means that we can build our own rich text editor applications on top of it. Among them, the most core ideas are: MVC layered and application architecture Flux based on one-way data flow.

1. Flux Architecture primer

Am I

2. Flux One-way data flow

In Flux, there are four elements:

  1. Action – Action message
  2. View – External interaction
  3. Store – Data storage/action processing
  4. Dispatcher – Forwards messages