From 83846312638a9efc8982b78ad24394aa23d69056 Mon Sep 17 00:00:00 2001 From: Thomas Lackemann Date: Mon, 5 Feb 2018 16:34:49 -0500 Subject: [PATCH] add image support --- src/draft-to-markdown.js | 9 +++++++++ src/markdown-to-draft.js | 19 ++++++++++++++++++- test/draft-to-markdown.spec.js | 8 ++++++++ test/markdown-to-draft.spec.js | 22 ++++++++++++++++++++++ 4 files changed, 57 insertions(+), 1 deletion(-) diff --git a/src/draft-to-markdown.js b/src/draft-to-markdown.js index 7042a41..a5899af 100644 --- a/src/draft-to-markdown.js +++ b/src/draft-to-markdown.js @@ -162,6 +162,15 @@ const EntityItems = { close: function (entity) { return `](${entity.data.url})`; } + }, + image: { + open: function (entity) { + return ''; + }, + + close: function (entity) { + return `![](${entity.data.src})`; + } } } diff --git a/src/markdown-to-draft.js b/src/markdown-to-draft.js index 7a88798..7ecfacf 100644 --- a/src/markdown-to-draft.js +++ b/src/markdown-to-draft.js @@ -85,6 +85,15 @@ const DefaultBlockEntities = { url: item.href } }; + }, + image: function (item) { + return { + type: 'image', + mutability: 'IMMUTABLE', + data: { + src: item.src, + }, + } } }; @@ -147,7 +156,7 @@ function parseInline(inlineItem, BlockEntities, BlockStyles) { blockEntityRanges.push({ offset: strlen(content) || 0, - length: 0, + length: 1, key: key }); } else if (child.type.indexOf('_close') !== -1 && BlockEntities[child.type.replace('_close', '_open')]) { @@ -214,7 +223,15 @@ function markdownToDraft(string, options = {}) { // which is where the inline content will belong. var {content, blockEntities, blockEntityRanges, blockInlineStyleRanges} = parseInline(item, BlockEntities, BlockStyles); var blockToModify = blocks[blocks.length - 1]; + blockToModify.text = content; + + // No content, we have an image? + if (content === '') { + blockToModify.type = 'atomic' + blockToModify.text = ' ' // need a blank space? + } + blockToModify.inlineStyleRanges = blockInlineStyleRanges; blockToModify.entityRanges = blockEntityRanges; diff --git a/test/draft-to-markdown.spec.js b/test/draft-to-markdown.spec.js index 2dc43cc..9d1c109 100644 --- a/test/draft-to-markdown.spec.js +++ b/test/draft-to-markdown.spec.js @@ -52,6 +52,14 @@ describe('draftToMarkdown', function () { expect(markdown).toEqual('This is a test of [a link](https://google.com)\n\nAnd [perhaps](https://facebook.github.io/draft-js/) we should test once more.'); }); + it('renders images correctly', function () { + /* eslint-disable */ + var rawObject = {"entityMap":{"0":{"type":"image","mutability":"IMMUTABLE","data":{"src":"https://placekitten.com/300/300"}},"1":{"type":"image","mutability":"IMMUTABLE","data":{"src":"https://placekitten.com/500/500"}}},"blocks":[{"key":"58spd","text":" ","type":"atomic","depth":0,"inlineStyleRanges":[],"entityRanges":[{"offset":0,"length":1,"key":0}],"data":{}},{"key":"9ln6g","text":"This is an example image","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}, {"key":"58spd","text":" ","type":"atomic","depth":0,"inlineStyleRanges":[],"entityRanges":[{"offset":0,"length":1,"key":1}],"data":{}}, {"key":"3euar","text":"And perhaps we should test once more.","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}]}; + /* eslint-enable */ + var markdown = draftToMarkdown(rawObject); + expect(markdown).toEqual(' ![](https://placekitten.com/300/300)\n\nThis is an example image\n\n ![](https://placekitten.com/500/500)\n\nAnd perhaps we should test once more.'); + }); + it('renders "the kitchen sink" correctly', function () { /* eslint-disable */ var rawObject = {"entityMap":{},"blocks":[{"key":"2uvch","text":"Hello!","type":"header-one","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"gcip","text":"My name is Rose :) \nToday, I'm here to talk to you about how great markdown is!\n","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":11,"length":4,"style":"BOLD"}],"entityRanges":[],"data":{}},{"key":"eu8ak","text":"First, here's a few bullet points:","type":"header-two","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"fiti6","text":"One","type":"unordered-list-item","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"d8amu","text":"Two","type":"unordered-list-item","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"7r62d","text":"Three","type":"unordered-list-item","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"3n7hc","text":"A codeblock","type":"code-block","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"9o0hn","text":"And then... some monospace text?\nOr... italics?","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":12,"length":19,"style":"CODE"},{"offset":39,"length":8,"style":"ITALIC"}],"entityRanges":[],"data":{}}]}; diff --git a/test/markdown-to-draft.spec.js b/test/markdown-to-draft.spec.js index 5f8594b..3978395 100644 --- a/test/markdown-to-draft.spec.js +++ b/test/markdown-to-draft.spec.js @@ -65,6 +65,28 @@ describe('markdownToDraft', function () { expect(conversionResult.entityMap[blockTwoKey].data.url).toEqual('https://facebook.github.io/draft-js/'); }); + it('renders images correctly', function () { + var markdown = ' ![](https://placekitten.com/300/300)\n\nThis is an example image\n\n ![](https://placekitten.com/500/500)\n\nAnd perhaps we should test once more.'; + var conversionResult = markdownToDraft(markdown); + expect(conversionResult.blocks[0].text).toEqual(' '); + expect(conversionResult.blocks[0].type).toEqual('atomic'); + expect(conversionResult.blocks[0].inlineStyleRanges).toEqual([]); + expect(conversionResult.blocks[0].entityRanges[0].offset).toEqual(0); + expect(conversionResult.blocks[0].entityRanges[0].length).toEqual(1); + var blockOneKey = conversionResult.blocks[0].entityRanges[0].key; + expect(conversionResult.entityMap[blockOneKey].type).toEqual('image'); + expect(conversionResult.entityMap[blockOneKey].data.src).toEqual('https://placekitten.com/300/300'); + + expect(conversionResult.blocks[2].text).toEqual(' '); + expect(conversionResult.blocks[2].type).toEqual('atomic'); + expect(conversionResult.blocks[2].inlineStyleRanges).toEqual([]); + expect(conversionResult.blocks[2].entityRanges[0].offset).toEqual(0); + expect(conversionResult.blocks[2].entityRanges[0].length).toEqual(1); + var blockTwoKey = conversionResult.blocks[2].entityRanges[0].key; + expect(conversionResult.entityMap[blockTwoKey].type).toEqual('image'); + expect(conversionResult.entityMap[blockTwoKey].data.src).toEqual('https://placekitten.com/500/500'); + }); + it('renders "the kitchen sink" correctly', function () { var markdown = '# Hello!\n\nMy name is **Rose** :) \nToday, I\'m here to talk to you about how great markdown is!\n\n## First, here\'s a few bullet points:\n\n- One\n- Two\n- Three\n\n```\nA codeblock\n```\n\nAnd then... `some monospace text`?\nOr... _italics?_'; var conversionResult = markdownToDraft(markdown);