HubSpot / draft-convert

Extensibly serialize & deserialize Draft.js ContentState with HTML.
Apache License 2.0
483 stars 94 forks source link

Custom nested block types #114

Closed eugenijusr closed 6 years ago

eugenijusr commented 6 years ago

Currently nested block types are specified as a constant:

const NESTED_BLOCK_TYPES = [
  'ordered-list-item',
  'unordered-list-item'
];

This makes it difficult to render nested HTML for custom nested block types like the https://github.com/sugarshin/draft-js-checkable-list-plugin.

Given that this nesting information is already stored in the default block mapping file:

export default {
  ...,
  'unordered-list-item': {
    element: <li />,
    nest: <ul />
  },
  'ordered-list-item': {
    element: <li />,
    nest: <ol />
  },
  ...
}

...we can get rid of the constant and allow providing custom nested block mapping like so:

export const contentStateToHtml = convertToHTML({
  blockToHTML: (block) => {
    if (block.type === 'checkable-list-item') {
      return {
        element: <li data-checked={block.data.checked || false} />,
        nest: <ul />
      }
    }
  }
}

I added a test example to illustrate the expected behavior.

benbriggs commented 6 years ago

published in 2.1.0