devlzl/blockit

Block-based collaborative rich text editor with whiteboard, developed from scratch in just 3 weeks.

Blockit

Block-based collaborative rich text editor with whiteboard.

Try Blockit online

Features

• Text editing
  • Inline style
  • Format Bar
• Block operation
  • Cross-block selection and format
  • API for add / update / delete block
• Whiteboard
  • Pen element
  • Shape element
  • NoteBlock for blending document mode
  • Selection, Move, Resize
• collaborative
  • CRDT(Yjs) data structure
  • undo / redo

Source Code Structure

├── blocks                # built-in blocks
  ├── page-block          # top-level container
      ├── docs
      └── whiteboard
  ├── note-block          # for blending docs and whiteboard
  └── text-block          # plain text and heading
├── editor
  └── Editor.vue          # out-of-the-box editor
├── kernel
    ├── Kernel.js         # rich-text editing kernel, natively CRDT
    ├── RichText.vue      # minimized rich text editing component
    └── service
        ├── EventService  # handle various input event
        └── RangeService  # handle selection and range
├── store
    ├── Block             # block model stored as Y.Map
    ├── EventEmitter      # simplified event emitter
    └── Page              # highest level container, provides a set of APIs for operating block
├── visual
    ├── SurfaceManager    # manage visual elements
    ├── Renderer          # canvas renderer
    ├── GridManager       # manage elements by grid coordinate
    └── elements          # element model stored as Y.Map