Introduction to the Serlo Editor

Introduction

The Serlo editor is a tool to create content with different content types, such as an article with images and exercises. Within the Serlo environment it is embedded in the frontend and communicates through the API with the database where the content is stored. The editor consists of stand-alone plugins for the different content types and a store to implement the undo-redo logic and to keep the editor state. The editor is built using TypeScript and React. The text plugin relies on the rich-text library SlateJS. For the store redux and redux-saga is used.

Reading Material

For introductory material for TypeScript and React, consult our documentation.

Redux and redux-saga

We use the redux library to save the state of the editor. Redux allows us to create a store for this purpose and dispatch actions to the store when changes arise in the editor. However, the limitation of redux is that it can implement pure actions, i.e. actions with no side effects. Application side effects like changes in a database cannot be implemented using Redux. This is why we use redux-saga which can also handle impure actions. We recommend to start the topic of state storage by reading through the redux documentation and then moving on to redux-saga and particularly the concepts of generators and put, call etc. For a more high-level introduction to the saga pattern, have a look at this talk.

Slate

SlateJS is a library for rich-text editing which is key to the text plugin of the editor. To get a first idea, we recommend the walkthroughs in their documentation. To see how we use slate in the Serlo editor, have a look at these slides.

Yarn / Setup / Dev server

See the Frontend Readme for setting up your local environment.

Serlo infrastructure

Within the Serlo infrastructure, the editor is embedded in the frontend. To learn more about the Serlo infrastructure, have a look at this documentation.

Redux-devtools

Redux-devtools is a tool that allows developers to trace all the actions dispatched to the store, inspect the payload, undo and redo the actions to get a better understanding of the redux process. To set it up, replace composeEnhancers here by

window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

Additionally, switch the trace function on to select an action in the history and see the callstack that triggered it:

window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
     trace: true,
     traceLimit: 25,
   }) || compose

Furthermore, install the browser extension (for Firefox). When you then open the storybook using yarn start, you can open the Redux Devtools panel by right-clicking and selecting Redux Devtools -> Open in a panel. Now any change you make in the storybook will be traced in the panel.