Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for images #49

Closed
wants to merge 1 commit into from
Closed

Add support for images #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/draft-to-markdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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})`;
}
}
}

Expand Down
19 changes: 18 additions & 1 deletion src/markdown-to-draft.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,15 @@ const DefaultBlockEntities = {
url: item.href
}
};
},
image: function (item) {
return {
type: 'image',
mutability: 'IMMUTABLE',
data: {
src: item.src,
},
}
}
};

Expand Down Expand Up @@ -147,7 +156,7 @@ function parseInline(inlineItem, BlockEntities, BlockStyles) {

blockEntityRanges.push({
offset: strlen(content) || 0,
length: 0,
length: 1,
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello! Sorry for the delay in review and unfortunately I can't guarantee that I'll reply to your response in a timely manner, things have been very very busy for me with the baby, much busier than I expected!

Anyway...

I am wondering about the change here and the change at /~https://github.com/Rosey/markdown-draft-js/pull/49/files#diff-6ed54c3ce52b221b0eb0f7b22578bfe4R232

If I revert this back to 0 and the other line back to '' the tests still pass (provided I update the tests as well), so I was curious if you could provide an explanation for why we need the change to length/content? I haven't used images at all in draftjs so I'm not familiar with the details 😄

key: key
});
} else if (child.type.indexOf('_close') !== -1 && BlockEntities[child.type.replace('_close', '_open')]) {
Expand Down Expand Up @@ -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;

Expand Down
8 changes: 8 additions & 0 deletions test/draft-to-markdown.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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":{}}]};
Expand Down
22 changes: 22 additions & 0 deletions test/markdown-to-draft.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down