slate-editor-icons
icons (quill-icons) for slate editors
Installation
$ npm install --save slate-editor-icons
Icons support
Blocks
- Icons.blocks.Blockquote (blockquote)
- icon:
Blockquote
- default slate type:
blockquote
- icon:
- Icons.blocks.Heading (heading, <h1/>, <h2/> ..., this is a dropdown menu)
- icon:
Header
- default slate type: h1 -
heading1
, h2 -heading2
, h3 -heading3
, h4 -heading4
.
- icon:
- Icons.blocks.OlList (<ol/> list)
- icon:
ListOrdered
- default slate type:
list-ol
- icon:
- Icons.blocks.UlList (<ul/> list)
- icon:
ListBullet
- default slate type:
list-ul
- icon:
Inlines
- Icons.inlines.Link (link <a/>)
- icon:
Link
- default slate type:
link
- icon:
Marks
- Icons.marks.Bold (<b/>)
- icon:
Bold
- default slate type:
bold
- icon:
- Icons.marks.Code (<code/>)
- icon:
Code
- default slate type:
code
- icon:
- Icons.marks.Italic (<i/>)
- icon:
Italic
- default slate type:
italic
- icon:
- Icons.marks.StrikeThrough (<s/>)
- icon:
Strike
- default slate type:
strikethrough
- icon:
- Icons.marks.Underline (<u/>)
- icon:
Underline
- default slate type:
underline
- icon:
Usage
Every icons in Icons support are React element, you can use it any where you like in your React component as below.
;;;; const initialState = Raw; const icons = // load marks icons IconsmarksBold IconsmarksItalic IconsmarksUnderline IconsmarksCode IconsmarksStrikeThrough // load inlines icons IconsinlinesLink // load blocks icons IconsblocksHeading IconsblocksBlockquote IconsblocksOlList IconsblocksUlList; Component // Set the initial state when the app is first constructed. state = state: initialState { const state = thisstate; const onChange = this; return <div style=margin: '50px'> icons <Editor state=state onChange=onChange /> </div> ; } ReactDOM;
example: https://github.com/Canner/slate-editor-icons/blob/master/docs/index.js
Props
props | type | required | default | description |
---|---|---|---|---|
state | object | true | null | slate state |
onChange | func | true | null | onChange function usually state => this.setState({state}) to update slate state |
icon | string | false | every items have it's own icon see icons support | the icon |
type | string | false | every items have it's own type see icons support | slate block, inline, mark type. |
Start example server
node devServer.js
Maintainer
License
MIT © Canner