📝 Page Editing

Jump to bottom

Yonatan Magier edited this page Mar 17, 2023 · 3 revisions

`Grid`

Mathberet's grid is created with react-grid-layout, a drag-n-drop + resize grid component for react. View their docs and demos for reference!

Blocks

To edit Mathberet pages, we use different types of block components, each suffixed with Content and located in src\renderer\components\Page\Grid\Blocks:

`TextBlockContent`

Powered by slate
TextBlock.tsx's code is a modified version of slate's example of a markdown shortcuts editor (source code). Shortcuts are defined in the SHORTCUTS const, and are switched in the Element function to return their respective slate element.

`MathBlockContent`

Powered by MathLive
🚧

`GraphBlockContent`

Powered by Mafs
🚧

`DrawBlockContent`

Powered by tldraw
🚧

`ToolsPanel`

🚧