Nonstop Perpetual Motion

    @beakyn/draft-js-utils

    1.3.2 • Public • Published

    npm version

    Draft.js to Markdown to Draft.js converter

    Converts rich text content between Draft.js blocks and Markdown.

    Reasoning and background

    This library exists because I needed a highly customisable rich text editor which posts to an external API in Markdown. Draft.js to the rescue! It provides the editor state but, alas, doesn't ship with any sort of conversion to or from markdown. So, I've written my own.

    Installation

    npm install draftjs-md-converter
    

    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 (with draft-js-video-plugin, parsing can be done using remark-shortcodes)

    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 @beakyn/draft-js-utils

    DownloadsWeekly Downloads

    4

    Version

    1.3.2

    License

    MIT

    Unpacked Size

    45.9 kB

    Total Files

    14

    Last publish

    Collaborators

    • nelsoneldoro
    • jpbeakyn
    • juanpujol
    • abraaoalves
    • falcaoaugustos
    • brunolazarus
    • hileomsi
    • murilopaixao