@serlo/editor-web-component v0.0.7
Serlo Editor as a web component
This is an early version of the web component wrapping the Serlo Editor. Be aware that we are actively working on both packages and thus there will be breaking changes in minor versions before version 1 is reached. The repository serlo/block-serlo-editor-with-vue-js shows how this package can be used.
Installation and usage
yarn add @serlo/editor-web-component- Register the web component
customElements.define('serlo-editor', EditorWebComponent). - Render the web component
import { EditorWebComponent } from '@serlo/editor-web-component'
customElements.define('serlo-editor', EditorWebComponent)
// in your render function
return (
<serlo-editor></serlo-editor>
)Releasing a new version to npm
Bump the version number in the package.json and
the github workflow seen inside editor-web-component.yaml will take care of the publishing.
Local development with editor package
Go to the package.json and use "@serlo/editor": "workspace:*" instead of a fixed version. This way, you don't need to release a new version of the editor every time you make a change in the repo.
Linking for local development with integrations
In order to avoid publishing the editor to NPM or dealing with tarballs every time you need to test your changes in an integration locally, you can use yalc to link the editor web component package to your integration locally.
Prerequisites:
- Yalc:
yarn global add yalc
Initial steps:
- From this workspace -> run
yarn yalc:publish - From consumer repo -> run
yalc add @serlo/editor-web-component
After making some changes in the editor:
- From this workspace -> run
yarn yalc:publish(pushes dist, updates version and cache)
To remove the local link to Serlo Editor:
- From consumer repo -> run
yalc remove @serlo/editor-web-component