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.