@serlo/editor-plugin-highlight-renderer v0.5.1
Editor Plugins
This is a monorepo for all plugins for the Splish Editor created for the E-Learning Website www.serlo.org.
Run the storybook
To run the storybook, run the following commands:
yarn
yarn start
After that open http://localhost:9009 in your browser.
Adding a new plugin
To create a new plugin bar
, you can run the plop generator:
yarn
yarn generate bar
After the generator is done add stories for your plugins in demo/__stories__/bar.tsx
What does the plop generator do?
- Create
plugins/bar-renderer
(the plugin renderer) - Create
plugins/bar
with dependency on the renderer (the plugin editing) - Add an entry in
paths
intsconfig.json
for@serlo/editor-plugin-bar
- Add an entry in
paths
intsconfig.json
for@serlo/editor-plugin-bar-renderer
- Add an entry in
alias
indemo/.storybook/webpack.config.js
for@serlo/editor-plugin-bar
- Add an entry in
alias
indemo/.storybook/webpack.config.js
for@serlo/editor-plugin-bar-renderer
- Add plugin name to
editor-plugins-registry/src/index.ts
- Add plugin to
editor-plugins/src/index.ts
- Add plugin to
editor-plugins-renderer/src/index.ts
- Run
yarn
(so that the two packages get symlinked) - Run
yarn format
FAQ
What does Lerna do?
Lerna is a tool to manage multiple packages in one repository. (In our case the multiple packages are yarn workspaces defined in the package.json
). We want to be able to import every plugin on its own, so we need a tool which links the different packages together.
This is where Lerna comes into play. It automatically resolves local packages in the dependencies and and links them correctly, so they can be imported and handled like any published npm package (e.g without knowledge about the file structure).
Lerna also provides the possibility to run a script in all packages, so lerna run build:watch
executes the build:watch
script in every package, so you don't have to call them all by yourself.