diff --git a/packages/draft-js-export-html/src/__tests__/stateToHTML-test.js b/packages/draft-js-export-html/src/__tests__/stateToHTML-test.js index 36fb0ac3..a1feefba 100644 --- a/packages/draft-js-export-html/src/__tests__/stateToHTML-test.js +++ b/packages/draft-js-export-html/src/__tests__/stateToHTML-test.js @@ -279,4 +279,32 @@ describe('stateToHTML', () => { 'a', ); }); + + it('should support custom block tags map', () => { + let contentState = convertFromRaw( + { + entityMap: {}, + blocks: [{ + key: '33nh8', + text: 'text', + type: 'unstyled', + depth: 0, + inlineStyleRange: [], + entityRanges: [], + }], + }, + ); + + expect(stateToHTML(contentState)).toBe( + '

text

', + ); + + expect(stateToHTML(contentState, { + blockTagsMap: { + unstyled: 'h1', + }, + })).toBe( + '

text

', + ); + }); }); diff --git a/packages/draft-js-export-html/src/stateToHTML.js b/packages/draft-js-export-html/src/stateToHTML.js index d90b7fac..c184acb7 100644 --- a/packages/draft-js-export-html/src/stateToHTML.js +++ b/packages/draft-js-export-html/src/stateToHTML.js @@ -30,6 +30,9 @@ type RenderConfig = { style?: StyleDescr; }; +type HTMLTag = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'figure' | 'blockquote' | 'pre' | 'code' | 'li' | 'div'; + +type BlockTagsMap = {[blockType: string]: HTMLTag}; type BlockRenderer = (block: ContentBlock) => ?string; type BlockRendererMap = {[blockType: string]: BlockRenderer}; @@ -42,6 +45,7 @@ type InlineStyleFn = (style: DraftInlineStyle) => ?RenderConfig; type Options = { inlineStyles?: StyleMap; inlineStyleFn?: InlineStyleFn; + blockTagsMap?: BlockTagsMap; blockRenderers?: BlockRendererMap; blockStyleFn?: BlockStyleFn; entityStyleFn?: EntityStyleFn; @@ -125,7 +129,11 @@ const DATA_TO_ATTR = { // The reason this returns an array is because a single block might get wrapped // in two tags. -function getTags(blockType: string, defaultBlockTag): Array { +function getTags(blockType: string, defaultBlockTag, blockTagsMap?: BlockTagsMap): Array { + let customTag = blockTagsMap ? blockTagsMap[blockType] : null; + if (customTag) { + return [customTag]; + } switch (blockType) { case BLOCK_TYPE.HEADER_ONE: return ['h1']; @@ -281,7 +289,7 @@ class MarkupGenerator { } writeStartTag(block, defaultBlockTag) { - let tags = getTags(block.getType(), defaultBlockTag); + let tags = getTags(block.getType(), defaultBlockTag, this.options.blockTagsMap); let attrString; if (this.options.blockStyleFn) { @@ -306,7 +314,7 @@ class MarkupGenerator { } writeEndTag(block, defaultBlockTag) { - let tags = getTags(block.getType(), defaultBlockTag); + let tags = getTags(block.getType(), defaultBlockTag, this.options.blockTagsMap); if (tags.length === 1) { this.output.push(`\n`); } else {