Skip to content
/ edytor Public

Collaborative performant and extensible general purpose rich text editor

Notifications You must be signed in to change notification settings

beynar/edytor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

86 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Sublime's custom image

Warning this a work in progress wich is absolutly not ready for production

Datastructure

<editor>
  <node>
    <leaf>text</leaf>
    <node>
      <leaf>text</leaf>
    </node>
  </node>
  <node>
    <leaf>text</leaf>
  </node>
</editor>
[
 {
   "type": "paragraph",
   "content": [
     {
       "text": "text"
     }
   ],
   "children": [
     {
       "type": "paragraph",
       "content": [
         {
           "bold": true,
           "text": "text"
         }
       ],
       "children": []
     }
   ]
 },
 {
   "type": "paragraph",
   "content": [
     {
       "text": "text"
     }
   ],
   "children": []
 }
];


Why another editor ?

There is tons of js libraries or frameworks for rich content editing. None of them has been built, from the ground up to be collaborative. Moreover some are very good at text editing (prosemirror, quill) and some are good at building things like website (grapejs, slate in a way).

Edytor is a general purpose collaborative editor, it's good out of the box at realtime text editing and can be easily extend with your own logic and components to become a website editor or simply a more features rich editor.

In short Edytor wants to provide the same core functionalities as the Notion's editor :

  • realtime collaboration
  • offline editing
  • drag and drop
  • nested children
  • presence indicator
  • shared history undo redo
  • custom text formatting
  • blocks extensibility
  • clean json output

How does it works ?

Edytor is using Yjs to store and update the tree data. Thanks to this amazing library it can provide offline and online realtime edition and automatic conflict resolution. No need to build a complex server to handle an O^n operations conflicts possibilities.

Performances

Edytor takes inspiration in the amazing Slate.js framework. Yet builded for React, Slate performances and implementation are hazardous and full of gotchas.

We think that throwing away the VDOM and building an editor for frameworks like Solid or Svelte is the way toward a very performant editor.

YJS listener combine with reactives framework allow us to perform true leaf level incremental updates which is for performances.

Beside that we try to make the api as simple, maintainable, and performant as possible so Edytor can handle thousand of nodes without lagging.

Roadmap

✅ YJS datastructure

✅ insert text

✅ delete text forward and backward

✅ split nodes with enter

✅ nest nodes with tab

⚽ merge nodes on delete at start/end

✅ un-nest nodes on delete when needed

✅ extensive selection listener

✅ demo in solid

✅ cursor positioning and repositioning

✅ web-socket server example

✅ realtime demo example

⚽ realtime cursor repositioning

✅ realtime awareness indicator

⚽ demo in svelte

✅ format text

✅ move nodes

✅ dnd

Releases

No releases published

Packages

No packages published