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.
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
import decorations from 'slate-md-decorations'
class App extends React.Component {
decorateNode = (node) => {
return decorations(node)
}
render () {
return <Editor
decorateNode = { this.decorateNode }
/>
}
}
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.
Following is the list of mark types returned for different Markdown styles.
The text wrapped inside ** **
will have mark of type strong
.
// Hello **world**
[{
anchorKey: '2',
anchorOffset: 6,
focusKey: '2',
focusOffset: 15,
marks: [{ type: 'strong' }]
}]
// Hello *world*
[{
anchorKey: '2',
anchorOffset: 6,
focusKey: '2',
focusOffset: 13,
marks: [{ type: 'emphasis' }]
}]
// Hello `world`
[{
anchorKey: '2',
anchorOffset: 6,
focusKey: '2',
focusOffset: 13,
marks: [{ type: 'inlineCode' }]
}]
// Hello ~~world~~
[{
anchorKey: '2',
anchorOffset: 6,
focusKey: '2',
focusOffset: 15,
marks: [{ type: 'strike' }]
}]
// 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' }]
}
]
// 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' }]
}
]
// [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' }]
}
]
// 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' }]
}
]
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' }]
}
])
The change log can be found in the CHANGELOG.md file.
Everyone is welcome to contribute. Please take a moment to review the contributing guidelines.
dimerapp and contributors.
MIT License, see the included MIT file.