✒️ Chatterslate
SlateJS editor for Chatterbug.
We use this editor at Chatterbug for our "Topic Explanations", which are mini-blog posts that teach our curriculum to students.
Features
The editor shown above uses lots of goodies from SlateJS, including the slate-edit-table plugin.
Marks
These are "inline" edits. Chatterslate supports:
- Bold
- Italic
- Underline
- Strikethrough
- Language (highlights text with the language we are teaching)
- Color (with a few that are preselected)
Examples of these:
Voids
"Void" blocks in Chatterslate are just easy ways to insert chars into the editor. Chatterslate comes with:
- Several kinds of arrows
- Easy access to different quote styles
- Underscore lines to denote a fill-in-the-blank
- Horizontal rule
Examples of these:
Blocks
Blocks are usually multiple-line content chunks. Chatterslate includes:
- Left/Center/Right aligned Blocks
- Bulleted list
- Numbered list
- Header one
- Header two
Examples of these:
Patterns
Patterns are also blocks, but these are how we teach language concepts in a more concise + design focused way.
- "Examples"
- "Conversation"
- "Watch Out" aside
- "Cultural" aside
- "Note" aside
Tables
We do have a few tables as well as these are also useful. The editor allows adding/removing rows from the table or the entire table if necessary. Tables included are:
- Arrow table
- Two Column table
- Three Column table
Install
Run:
yarn install
Then:
yarn start
Now open http://localhost:8080
in your browser, and if you have
the LiveReload plugin installed, it'll automatically refresh for
any changes in the examples/ or src/ directories!
Publishing to NPM
You'll need to be signed in via NPM first!
npm version patch # or minor or major; commits new version number
yarn release # pushes to github + npm publish
License
MIT. Please see LICENSE
.