README
Slate Markdown Decorations
Parses strings as markdown and returns decorations for inline styles.
The package size is 3.7KB
minified. However, it has peer dependencies on remark-parse
and unified
, which may increase the bundle size.
Installation
npm i slate-md-decorations
# for yarn
yarn add slate-md-decorations
Also make sure to install required peer dependencies
.
npm i remark-parse unified
Usage
import decorations from 'slate-md-decorations'
class App extends React.Component {
decorateNode = (node) => {
return decorations(node)
}
render () {
return <Editor
decorateNode = { this.decorateNode }
/>
}
}
How it works?
The library takes the node as an input and then parses it's text using remark. Remark returns an AST, which is further used to create Slate ranges with Marks.
The entire process is pretty simple and performant due to the usage of remark.
Mark types
Following is the list of mark types returned for different Markdown styles.
strong
The text wrapped inside ** **
will have mark of type strong
.
// Hello **world**
[{
anchorKey: '2',
anchorOffset: 6,
focusKey: '2',
focusOffset: 15,
marks: [{ type: 'strong' }]
}]
emphasis
// Hello *world*
[{
anchorKey: '2',
anchorOffset: 6,
focusKey: '2',
focusOffset: 13,
marks: [{ type: 'emphasis' }]
}]
inlineCode
// Hello `world`
[{
anchorKey: '2',
anchorOffset: 6,
focusKey: '2',
focusOffset: 13,
marks: [{ type: 'inlineCode' }]
}]
strike
// Hello ~~world~~
[{
anchorKey: '2',
anchorOffset: 6,
focusKey: '2',
focusOffset: 15,
marks: [{ type: 'strike' }]
}]
link
// Visit [Google](https://google.com)
[
{
anchorKey: '2',
anchorOffset: 6,
focusKey: '2',
focusOffset: 14,
marks: [{ type: 'linkText' }]
},
{
anchorKey: '2',
anchorOffset: 15,
focusKey: '2',
focusOffset: 34,
marks: [{ type: 'linkUrl' }]
}
]
link with title
// Visit [Google](https://google.com "Google")
[
{
anchorKey: '2',
anchorOffset: 6,
focusKey: '2',
focusOffset: 14,
marks: [{ type: 'linkText' }]
},
{
anchorKey: '2',
anchorOffset: 15,
focusKey: '2',
focusOffset: 33,
marks: [{ type: 'linkUrl' }]
},
{
anchorKey: '2',
anchorOffset: 34,
focusKey: '2',
focusOffset: 43,
marks: [{ type: 'linkTitle' }]
}
]
definitions
// [1]: google.com
[
{
anchorKey: '2',
anchorOffset: 0,
focusKey: '2',
focusOffset: 4,
marks: [{ type: 'definitionText' }]
},
{
anchorKey: '2',
anchorOffset: 5,
focusKey: '2',
focusOffset: 15,
marks: [{ type: 'definitionUrl' }]
}
]
linkReference
// Visit [Google][google]
[
{
anchorKey: '2',
anchorOffset: 6,
focusKey: '2',
focusOffset: 14,
marks: [{ type: 'linkReferenceText' }]
},
{
anchorKey: '2',
anchorOffset: 15,
focusKey: '2',
focusOffset: 22,
marks: [{ type: 'linkReferenceUrl' }]
}
]
Headings
You can ignore headings for the most part. I wanted to some uniques in the way I show hashes ##
, So I created a mark for this one too.
// ## Hello world
assert.deepEqual(decorations, [
{
anchorKey: '2',
anchorOffset: 0,
focusKey: '2',
focusOffset: 2,
marks: [{ type: 'headingHash' }]
},
{
anchorKey: '2',
anchorOffset: 3,
focusKey: '2',
focusOffset: 14,
marks: [{ type: 'headingText' }]
}
])
Change log
The change log can be found in the CHANGELOG.md file.
Contributing
Everyone is welcome to contribute. Please take a moment to review the contributing guidelines.
Authors & License
dimerapp and contributors.
MIT License, see the included MIT file.