Narrating Prophetic Monks

npm

Need private packages and team management tools?Check out npm Orgs. »

draftjs-md-converter-support-video

1.0.27 • Public • Published

npm version

Draft.js to Markdown to Draft.js converter

Converts rich text content between Draft.js blocks and Markdown forked from draftjs-md-converter to support video embed from youtube and vimeo (at the moment).

npm i draftjs-md-converter-support-video

Support

The following inline styles are supported:

  • bold
  • italic
  • H1 - H6

The following block styles are supported:

  • ordered list
  • unordered list
  • block quote

The following media types are supported:

  • images
  • videos (youtube and vimeo embed urls)

Usage

Converting from Markdown to Draft.js

mdToDraftjs(markdown: String): RawDraftContentState

Use convertToRaw from the draft-js library to convert the resulting RawDraftContentState into a draft-js ContentState.

Converting from Draft.js to Markdown

draftjsToMd(rawData: RawDraftContentState): String

Use convertFromRaw from the draft-js library to get the raw RawDraftContentState to then pass into the converter.

Custom dictionaries

The default Markdown dictionary is

{
  BOLD: '__',
  ITALIC: '*'
};

The inline styles can be extended or overridden by passing a custom dictionary object as a second optional argument to draftjsToMd, e.g.

const myMdDict = {
  BOLD: '**',
  STRIKETHROUGH: '~~'
};
const markdown = draftjsToMd(blocks, myMdDict);

NOTE: at this point you cannot override block styles!

Example

[---]
 
import { mdToDraftjs, draftjsToMd } from 'draftjs-md-converter';
import { EditorState, ContentState, convertToRaw, convertFromRaw } from 'draft-js';
 
[---]
 
constructor(props) {
  super(props);
 
  // some default value in markdown
  const defaultValue = this.props.defaultValue;
  const rawData = mdToDraftjs(defaultValue);
  const contentState = convertFromRaw(rawData);
  const newEditorState = EditorState.createWithContent(contentState);
 
  this.state = {
    editorState: newEditorState,
  };
  this.onChange = (editorState) => {
    this.props.onChange(this.getMarkdown());
    this.setState({ editorState });
  };
}
 
[---]
 
getMarkdown() {
  const content = this.state.editorState.getCurrentContent();
  return draftjsToMd(convertToRaw(content));
}
 
[---]

Run tests

npm test

Run tests with a watcher

npm run test-dev

Lint

npm run lint

install

npm i draftjs-md-converter-support-video

Downloadsweekly downloads

0

version

1.0.27

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability