Skip to content

✒️ SlateJS editor for Chatterbug's grammar topics (and more)

License

Notifications You must be signed in to change notification settings

chatterbugapp/chatterslate

Repository files navigation

✒️ Chatterslate

SlateJS editor for Chatterbug.

Chatterslate Demo

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:

marks

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:

voids

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:

bullets

header

Patterns

Patterns are also blocks, but these are how we teach language concepts in a more concise + design focused way.

  • "Examples"

examples

  • "Conversation"

conversation

  • "Watch Out" aside

watchout

  • "Cultural" aside

cultural

  • "Note" aside

note

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

arrow

  • Two Column table

twocolumn

  • Three Column table

threecolumn

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.