markdown-draft-js icon indicating copy to clipboard operation
markdown-draft-js copied to clipboard

Add Remarkable standalone blocks configuration to enable customization

Open Ynote opened this issue 5 years ago • 0 comments

Description

I noticed that Remarkable standalone blocks like fence or hr have a special case handling in src/markdown-to-draft.js#L257.

When I tried to add a custom Remarkable plugin that renders a token that looks like the fence one, it is not included correctly for Draft.js block creation except if the token type finishes with "_open" (cf. src/markdown-to-draft.js#L257). As my custom Remarkable block is a standalone block, I think it would be more readable and consistent if its name doesn't end with "_open" and can still be handled correctly by markdown-draft-js (eg. yaml_frontmatter and not yaml_frontmatter_open).

For this purpose, I added another configuration array to handle these standalone blocks. This array clarifies their specificity and enables customization.

Use case

I want Remarkable to parses this kind of block at the top of a file:

---
someMetadata: content
someOtherMetadata: content
---

and create a token that looks like this (with a plugin like this one), :

{
  type: 'yaml_frontmatter',
  content: 'someMetadata: content\nsomeOtherMetadata: content',
  level: ...,
  lines: ...,
}

Then, using markdownToDraft, I would get the following raw Draft state:

{
  blocks: {
    {
      type: 'atomic',
      content: 'someMetadata: content\nsomeOtherMetadata: content',
      entityRanges: [],
      inlineStyleRanges: [],
    }
  },
  entityMap: ...
}

The PR would enable it with the following configuration for markdownToDraft:

let rawContent = markdownToDraft(content, {
  remarkablePlugins: [remarkableYamlFrontMatterPlugin],
  blockTypes: {
    frontmatter_yaml: (item) => { // Custom method to tell markdownToDraft how to handle custom Markdown
      return {
        type: 'atomic',
        text: item.content,
        entityRanges: [],
        inlineStyleRanges: [],
      }
    },
    remarkableStandaloneBlocks: ['frontmatter_yaml'], // Here, we tell markdowntoDraft to add this case to the raw Draft state
  },
})

Ynote avatar Nov 12 '20 22:11 Ynote