https://github.com/chatterbugapp/chatterslate

:black_nib: SlateJS editor for Chatterbug's grammar topics (and more)
https://github.com/chatterbugapp/chatterslate

javascript rich-text-editor slate slatejs text-editor

Last synced: 4 months ago
JSON representation

:black_nib: SlateJS editor for Chatterbug's grammar topics (and more)

• Host: GitHub
• URL: https://github.com/chatterbugapp/chatterslate
• Owner: chatterbugapp
• License: mit
• Created: 2017-11-21T11:56:47.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T19:45:28.000Z (about 2 years ago)
• Last Synced: 2024-09-16T07:37:25.412Z (5 months ago)
• Topics: javascript, rich-text-editor, slate, slatejs, text-editor
• Language: JavaScript
• Homepage: https://chatterslate.netlify.com/
• Size: 1.36 MB
• Stars: 94
• Watchers: 7
• Forks: 6
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# ✒️ Chatterslate

SlateJS editor for [Chatterbug](https://chatterbug.com).

![Chatterslate Demo](https://raw.githubusercontent.com/chatterbugapp/chatterslate/master/images/chatterslate.gif)

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](https://raw.githubusercontent.com/chatterbugapp/chatterslate/master/images/marks.png)

### 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](https://raw.githubusercontent.com/chatterbugapp/chatterslate/master/images/voids.png)

### 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](https://raw.githubusercontent.com/chatterbugapp/chatterslate/master/images/bullets1.png)

![header](https://raw.githubusercontent.com/chatterbugapp/chatterslate/master/images/header1.png)

### Patterns

Patterns are also blocks, but these are how we teach language

concepts in a  more concise + design focused way.

* "Examples"

![examples](https://raw.githubusercontent.com/chatterbugapp/chatterslate/master/images/examples.png)

* "Conversation"

![conversation](https://raw.githubusercontent.com/chatterbugapp/chatterslate/master/images/conversation.png)

* "Watch Out" aside

![watchout](https://raw.githubusercontent.com/chatterbugapp/chatterslate/master/images/watchout.png)

* "Cultural" aside

![cultural](https://raw.githubusercontent.com/chatterbugapp/chatterslate/master/images/cultural.png)

* "Note" aside

![note](https://raw.githubusercontent.com/chatterbugapp/chatterslate/master/images/note.png)

### 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](https://raw.githubusercontent.com/chatterbugapp/chatterslate/master/images/arrow.png)

* Two Column table

![twocolumn](https://raw.githubusercontent.com/chatterbugapp/chatterslate/master/images/twocolumn.png)

* Three Column table

![threecolumn](https://raw.githubusercontent.com/chatterbugapp/chatterslate/master/images/threecolumn.png)

## Install

Run:

```sh

yarn install

```

Then:

```sh

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!

```sh

npm version patch # or minor or major; commits new version number

yarn release # pushes to github + npm publish

```

## License

MIT. Please see `LICENSE`.