How to use markdown-draft-js - 10 common examples

public setMarkdownValue = debounce(() => {
    try {
      const { form, path } = this.props;
      this.state.value.toRAW();
      form.setFieldsValue({
        [path]: draftToMarkdown(
          JSON.parse(this.state.value.toRAW().toString()),
          markdownConfig
        ).replace(/\n\n/g, '\n \n'),
      });
    } catch (err) {
      console.error('Error converting rich text to markdown'); // tslint:disable-line no-console
    }
  }, 330);

'separator',
  'list-ul',
  'list-ol',
  'separator',
  'link',
  'emoji',
];

const markdownConfig = {
  preserveNewlines: true,
  remarkablePreset: 'full',
};

export class InputComponent extends React.PureComponent {
  public state = {
    value: BraftEditor.createEditorState(markdownToDraft(this.props.initialValue, markdownConfig)),
  };

  public setMarkdownValue = debounce(() => {
    try {
      const { form, path } = this.props;
      this.state.value.toRAW();
      form.setFieldsValue({
        [path]: draftToMarkdown(
          JSON.parse(this.state.value.toRAW().toString()),
          markdownConfig
        ).replace(/\n\n/g, '\n \n'),
      });
    } catch (err) {
      console.error('Error converting rich text to markdown'); // tslint:disable-line no-console
    }
  }, 330);

client.query({ query: GET_NODES }).then(({ data: { nodes } }) => {
      const localNode = _.find(nodes, { id: node.id });
      if (localNode) {
        markdown = localNode.content;
        rawObject = markdownToDraft(markdown);
      }
      const editorState = createEditorState(rawObject);
      // If user logged in then show editor
      if (user) {
        this.setState({
          user,
          nodes,
          source: markdown,
          editorState,
          originalEditorState: editorState,
        });
      } else {
        // If user not logged in source regular text
        this.setState({ source: markdown });
      }
      // Login handlers

componentDidMount() {
    const { source, client, node = {} } = this.props;
    const user = netlifyIdentity.currentUser();
    let markdown = source;
    let rawObject = markdownToDraft(markdown);
    // See if we have a locally saved node
    // Saving triggers a server rebuild so we store data locally
    // to account for the delay
    client.query({ query: GET_NODES }).then(({ data: { nodes } }) => {
      const localNode = _.find(nodes, { id: node.id });
      if (localNode) {
        markdown = localNode.content;
        rawObject = markdownToDraft(markdown);
      }
      const editorState = createEditorState(rawObject);
      // If user logged in then show editor
      if (user) {
        this.setState({
          user,
          nodes,
          source: markdown,

handleSave = ({ updateNode }) => () => {
    const { editorState } = this.state;
    const { node = {} } = this.props;
    const markdown = draftToMarkdown(
      convertToRaw(editorState.getCurrentContent())
    );
    this.setState({ source: markdown, originalEditorState: editorState });
    updateNode({ variables: { id: node.id, content: markdown } });
    console.log('Synced to GraphCMS');
  };
  render() {

export function initializer(initialData: { entry: Entry }): IEditorState {
  console.log("EDITOR_INITIALIZER", initialData);

  if (initialData) {
    const draft = markdownToDraft(initialData.entry.content);
    const editorState = Draft.EditorState.createWithContent(
      Draft.convertFromRaw(draft)
    );

    return {
      editorState,
      title: initialData.entry.title,
      publicStatus: initialData.entry.public,
      initialFocus: false
    };
  } else {
    return {
      editorState: null,
      title: null,
      publicStatus: null,
      initialFocus: false

const createFile = (title, content) =>
  `---
title: ${title}
---
${draftToMarkdown(content)}`

const createFile = ({ title, dateModified, content }) => ({
  title: title,
  dateModified: dateModified,
  content: draftToMarkdown(content)
})

const customDraft = (content: Draft.RawDraftContentState): string =>
    draftToMarkdown(content, {
      entityItems: {
        LINK: {
          open: () => {
            return "[";
          },

          close: (entity: any) => {
            return `](${entity.data.url || entity.data.href})`;
          }
        }
      }
    });

export const convertDraftToMd = raw => draftToMarkdown(
  raw,
  {
    styleItems
  }
)