https://github.com/devlzl/blockit

Block-based collaborative rich text editor with whiteboard, developed from scratch in just 3 weeks.
https://github.com/devlzl/blockit

Last synced: 7 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/devlzl/blockit
• Owner: devlzl
• Created: 2023-08-10T05:58:39.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-19T14:29:17.000Z (9 months ago)
• Last Synced: 2024-04-14T12:28:16.863Z (7 months ago)
• Language: JavaScript
• Homepage: https://devlzl.github.io/Blockit/
• Size: 104 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Blockit

Block-based collaborative rich text editor with whiteboard.

[Try Blockit online](https://devlzl.github.io/Blockit/) 

## Features

- [x] Text editing

  - [x] Inline style

  - [x] Format Bar

- [x] Block operation

  - [x] Cross-block selection and format

  - [x] API for add / update / delete block

- [x] Whiteboard

  - [x] Pen element

  - [x] Shape element

  - [x] NoteBlock for blending document mode

  - [x] Selection, Move, Resize

- [x] collaborative

  - [x] CRDT(Yjs) data structure

  - [x] 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

```