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

To help you get started, we’ve selected a few markdown-draft-js examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github birkir / prime / packages / prime-field-string / src / ui / InputComponent.tsx View on Github external
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);
github birkir / prime / packages / prime-field-string / src / ui / InputComponent.tsx View on Github external
'separator',
  'list-ul',
  'list-ol',
  'separator',
  'link',
  'emoji',
];

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

export class InputComponent extends React.PureComponent<PrimeFieldProps> {
  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);
github danielmahon / gatsby-starter-procyon / src / components / EditableMarkdown.js View on Github external
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
github danielmahon / gatsby-starter-procyon / src / components / EditableMarkdown.js View on Github external
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,
github danielmahon / gatsby-starter-procyon / src / components / EditableMarkdown.js View on Github external
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() {
github charliewilco / downwrite / reducers / editor.ts View on Github external
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
github charliewilco / downwrite / app / export-md / index.js View on Github external
const createFile = (title, content) =>
  `---
title: ${title}
---
${draftToMarkdown(content)}`
github charliewilco / downwrite / app / export-json / index.js View on Github external
const createFile = ({ title, dateModified, content }) => ({
  title: title,
  dateModified: dateModified,
  content: draftToMarkdown(content)
})
github charliewilco / downwrite / client / components / export.tsx View on Github external
const customDraft = (content: Draft.RawDraftContentState): string =>
    draftToMarkdown(content, {
      entityItems: {
        LINK: {
          open: () => {
            return "[";
          },

          close: (entity: any) => {
            return `](${entity.data.url || entity.data.href})`;
          }
        }
      }
    });
github orbiting / crowdfunding-frontend / src / utils / markdown.js View on Github external
export const convertDraftToMd = raw => draftToMarkdown(
  raw,
  {
    styleItems
  }
)

markdown-draft-js

Convert draftjs blocks to markdown using the marked library, and vice versa.

MIT
Latest version published 1 year ago

Package Health Score

62 / 100
Full package analysis