Packages of the Serlo Editor

Packages

packages/
├── plugins/
├── private/
├── public/

On the first level, the repository separates plugins from everything else, e.g. shared type definitions or the store logic. Due to circular dependencies, some type definitions are first defined in the private directory and then imported into the public directory, for instance the public/default-document-editor imports from the private/document-editor/.

├── plugins/
│   ├── anchor/
│   ├── blockquote/
│   ├── files/
│   └── geogebra/
│   └── highlight/
│   └── image/
│   └── input-exercise/
│   └── multimedia-explanation/
│   └── rows/
│   └── sc-mc-exercise/
│   └── serlo-injection/
│   └── spoiler/
│   └── table/
│   └── text/
│   └── video/

Let’s step through the different plugins available:

• anchor allows the user to jump to a specific section of the document
• blockquote is an outdated plugin to create a block quote
• files is an outdated plugin developed to share files in the schulcloud
• geogebra embeds a geogebra applet in the document
• highlight allows the user to write code snippets for different programming languages
• image lets the user upload or use an online image and insert it
• input-exercise creates the solution to an input exercise (linking to task description is done by separate plugin)
• multimedia-explanation allows the user to illustrate content using multimedia and text
• rows aggregates different plugins and adds a menu where you can e.g. set the document description visible for search engines
• sc-mc-exercise creates the solution to a single-choice-multiple-choice exercise (linking to task description is done by separate plugin)
• serlo-injection embeds a different document via its id into the current document
• spoiler creates a box which folds out to suggest further courses to the user
• table is an outdated plugin to create a table
• text configures rich-text editing using SlateJS (link to introduction/Slate)
• video lets the user embed a video in the document

├── private/
│   ├── bundle-size/
│   └── demo/
│   └── dev-expression/
│   └── document-editor/
│   └── fixtures/
│   └── plugin/
│   └── plugin-state/
│   └── plugin-toolbar/

• bundle-size is a package that can be run to determine the bundle size of the editor
• demo is the package that creates and configures the storybook to test out the editor locally (link to introduction/storybook)
• dev-expression is used to display warning messages
• document-editor contains the type definitions for the editor container (-> public/default-document-editor or public/document-editor)
• fixtures exports list of plugins used in the storybook
• plugin contains the shared type definitions for the plugins (-> public/plugin)
• plugin-state contains the type definitions for the different state types (-> public/plugin)
• plugin-toolbar contains the type definitions for the plugin toolbar (-> public/plugin-toolbar)

└── public/
│   └── core/
│   └── default-document-editor/
│   └── default-plugin-toolbar/
│   └── document-editor/
│   └── editor-ui/
│   └── math/
│   └── plugin/
│   └── plugin-toolbar/
│   └── renderer/
│   └── renderer-ssr/
│   └── renderer-ui/
│   └── store/
│   └── store-devtools/
│   └── ui/

• core instantiates the editor with respective context. There are two variants for that: either one editor component or an editor provider with multiple documents where each document has a clear scope (see core concepts)
• default-document-editor renders the default toolbar and the default editor container for the plugins
• default-plugin-toolbar implements the interface from public/plugin-toolbar to provide the default plugin toolbar
• document-editor imports the types from private/document-editor
• editor-ui covers configuration of buttons, checkboxes and the bottom toolbar on the editor level
• math is a package that covers the editing and rendering of math formulas
• plugin imports generic type definitions from private/plugin-state and implements state types (scalar, list etc.)
• plugin-toolbar imports the types from private/plugin-toolbar
• renderer is responsible for the rendering of the editor
• renderer-ssr sets the styles of the renderer
• renderer-ui includes feedback on exercises or submit buttons, particular for the render view
• store contains the redux store logic, including sagas, actions and reducers
• store-devtools sets up redux dev tools to trace redux actions (for set-up go to the introduction)
• ui sets the editor theme