diff --git a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/__tests__/__snapshots__/parser.spec.js.snap b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/__tests__/__snapshots__/parser.spec.js.snap index 74a86aab..7d772fb1 100644 --- a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/__tests__/__snapshots__/parser.spec.js.snap +++ b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/__tests__/__snapshots__/parser.spec.js.snap @@ -2,1124 +2,1297 @@ exports[`Compile markdown to Prosemirror document structure should compile a markdown ordered list 1`] = ` Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "attrs": Object { - "level": 1, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "H1", - "type": "text", }, ], - "type": "heading", + "type": "heading-one", }, Object { - "attrs": Object { - "order": 1, - "tight": true, + "data": Object { + "start": 1, }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "yo", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "list_item", + "type": "list-item", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "bro", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "list_item", + "type": "list-item", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "fro", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "list_item", + "type": "list-item", }, ], - "type": "ordered_list", + "type": "numbered-list", }, ], - "type": "doc", + "type": "root", } `; exports[`Compile markdown to Prosemirror document structure should compile bulleted lists 1`] = ` Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "attrs": Object { - "level": 1, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "H1", - "type": "text", }, ], - "type": "heading", + "type": "heading-one", }, Object { - "attrs": Object { - "tight": true, + "data": Object { + "start": null, }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "yo", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "list_item", + "type": "list-item", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "bro", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "list_item", + "type": "list-item", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "fro", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "list_item", + "type": "list-item", }, ], - "type": "bullet_list", + "type": "bulleted-list", }, ], - "type": "doc", + "type": "root", } `; exports[`Compile markdown to Prosemirror document structure should compile code blocks 1`] = ` Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "attrs": Object { - "params": "javascript", + "data": Object { + "lang": "javascript", }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "var a = 1;", - "type": "text", }, ], - "type": "code_block", + "type": "code", }, ], - "type": "doc", + "type": "root", } `; exports[`Compile markdown to Prosemirror document structure should compile hard breaks (double space) 1`] = ` Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "text": "blue moonfootballs", - "type": "text", + "data": undefined, + "kind": "text", + "text": "blue moon +footballs", }, ], "type": "paragraph", }, ], - "type": "doc", + "type": "root", } `; exports[`Compile markdown to Prosemirror document structure should compile horizontal rules 1`] = ` Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "attrs": Object { - "level": 1, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "H1", - "type": "text", }, ], - "type": "heading", + "type": "heading-one", }, Object { - "type": "horizontal_rule", + "isVoid": true, + "kind": "block", + "nodes": undefined, + "type": "thematic-break", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "blue moon", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "doc", + "type": "root", } `; exports[`Compile markdown to Prosemirror document structure should compile horizontal rules 2`] = ` Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "attrs": Object { - "level": 1, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "H1", - "type": "text", }, ], - "type": "heading", + "type": "heading-one", }, Object { - "type": "horizontal_rule", + "isVoid": true, + "kind": "block", + "nodes": undefined, + "type": "thematic-break", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "blue moon", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "doc", + "type": "root", } `; exports[`Compile markdown to Prosemirror document structure should compile images 1`] = ` Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "kind": "block", + "nodes": Array [ + Object { + "data": undefined, + "kind": "text", + "text": "![super](duper.jpg)", + }, + ], "type": "paragraph", }, ], - "type": "doc", + "type": "root", } `; exports[`Compile markdown to Prosemirror document structure should compile inline code 1`] = ` Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "attrs": Object { - "level": 1, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Word", - "type": "text", }, ], - "type": "heading", + "type": "heading-one", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "This is some sweet ", - "type": "text", }, Object { - "marks": Array [ + "data": undefined, + "kind": "text", + "ranges": Array [ Object { - "type": "code", + "marks": Array [ + Object { + "type": "code", + }, + ], + "text": "inline code", }, ], - "text": "inline code", - "type": "text", }, Object { + "data": undefined, + "kind": "text", "text": " yo!", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "doc", + "type": "root", } `; exports[`Compile markdown to Prosemirror document structure should compile kitchen sink example 1`] = ` Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "attrs": Object { - "level": 1, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "An exhibit of Markdown", - "type": "text", }, ], - "type": "heading", + "type": "heading-one", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "This note demonstrates some of what Markdown is capable of doing.", - "type": "text", }, ], "type": "paragraph", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "marks": Array [ + "data": undefined, + "kind": "text", + "ranges": Array [ Object { - "type": "em", + "marks": Array [ + Object { + "type": "italic", + }, + ], + "text": "Note: Feel free to play with this page. Unlike regular notes, this doesn't +automatically save itself.", }, ], - "text": "Note: Feel free to play with this page. Unlike regular notes, this doesn't -automatically save itself.", - "type": "text", }, ], "type": "paragraph", }, Object { - "attrs": Object { - "level": 2, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Basic formatting", - "type": "text", }, ], - "type": "heading", + "type": "heading-two", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.", - "type": "text", }, ], "type": "paragraph", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Paragraphs must be separated by a blank line. Basic formatting of ", - "type": "text", }, Object { - "marks": Array [ + "data": undefined, + "kind": "text", + "ranges": Array [ Object { - "type": "em", + "marks": Array [ + Object { + "type": "italic", + }, + ], + "text": "italics", }, ], - "text": "italics", - "type": "text", }, Object { + "data": undefined, + "kind": "text", "text": " and ", - "type": "text", }, Object { - "marks": Array [ + "data": undefined, + "kind": "text", + "ranges": Array [ Object { - "type": "strong", + "marks": Array [ + Object { + "type": "bold", + }, + ], + "text": "bold", }, ], - "text": "bold", - "type": "text", }, Object { - "text": " is supported. This ", - "type": "text", + "data": undefined, + "kind": "text", + "text": " is supported. This *can be ", }, Object { - "marks": Array [ + "data": undefined, + "kind": "text", + "ranges": Array [ Object { - "type": "em", + "marks": Array [ + Object { + "type": "bold", + }, + ], + "text": "nested", }, ], - "text": "can be ", - "type": "text", }, Object { - "marks": Array [ - Object { - "type": "em", - }, - Object { - "type": "strong", - }, - ], - "text": "nested", - "type": "text", - }, - Object { - "marks": Array [ - Object { - "type": "em", - }, - ], - "text": " like", - "type": "text", - }, - Object { - "text": " so.", - "type": "text", + "data": undefined, + "kind": "text", + "text": " like* so.", }, ], "type": "paragraph", }, Object { - "attrs": Object { - "level": 2, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Lists", - "type": "text", }, ], - "type": "heading", + "type": "heading-two", }, Object { - "attrs": Object { - "level": 3, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Ordered list", - "type": "text", }, ], - "type": "heading", + "type": "heading-three", }, Object { - "attrs": Object { - "order": 1, - "tight": true, + "data": Object { + "start": 1, }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Item 1 2. A second item 3. Number 3 4. Ⅳ", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "list_item", + "type": "list-item", }, ], - "type": "ordered_list", + "type": "numbered-list", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "marks": Array [ + "data": undefined, + "kind": "text", + "ranges": Array [ Object { - "type": "em", + "marks": Array [ + Object { + "type": "italic", + }, + ], + "text": "Note: the fourth item uses the Unicode character for Roman numeral four.", }, ], - "text": "Note: the fourth item uses the Unicode character for Roman numeral four.", - "type": "text", }, ], "type": "paragraph", }, Object { - "attrs": Object { - "level": 3, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Unordered list", - "type": "text", }, ], - "type": "heading", + "type": "heading-three", }, Object { - "attrs": Object { - "tight": true, + "data": Object { + "start": null, }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "An item Another item Yet another item And there's more...", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "list_item", + "type": "list-item", }, ], - "type": "bullet_list", + "type": "bulleted-list", }, Object { - "attrs": Object { - "level": 2, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Paragraph modifiers", - "type": "text", }, ], - "type": "heading", + "type": "heading-two", }, Object { - "attrs": Object { - "level": 3, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Code block", - "type": "text", }, ], - "type": "heading", + "type": "heading-three", }, Object { - "attrs": Object { - "params": "", + "data": Object { + "lang": null, }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Code blocks are very useful for developers and other people who look at code or other things that are written in plain text. As you can see, it uses a fixed-width font.", - "type": "text", }, ], - "type": "code_block", + "type": "code", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "You can also make ", - "type": "text", }, Object { - "marks": Array [ + "data": undefined, + "kind": "text", + "ranges": Array [ Object { - "type": "code", + "marks": Array [ + Object { + "type": "code", + }, + ], + "text": "inline code", }, ], - "text": "inline code", - "type": "text", }, Object { + "data": undefined, + "kind": "text", "text": " to add code into other things.", - "type": "text", }, ], "type": "paragraph", }, Object { - "attrs": Object { - "level": 3, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Quote", - "type": "text", }, ], - "type": "heading", + "type": "heading-three", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Here is a quote. What this is should be self explanatory. Quotes are automatically indented when they are used.", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "blockquote", + "type": "quote", }, Object { - "attrs": Object { - "level": 2, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Headings", - "type": "text", }, ], - "type": "heading", + "type": "heading-two", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "There are six levels of headings. They correspond with the six levels of HTML headings. You've probably noticed them already in the page. Each level down uses one more hash character.", - "type": "text", }, ], "type": "paragraph", }, Object { - "attrs": Object { - "level": 3, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Headings ", - "type": "text", }, Object { - "marks": Array [ + "data": undefined, + "kind": "text", + "ranges": Array [ Object { - "type": "em", + "marks": Array [ + Object { + "type": "italic", + }, + ], + "text": "can", }, ], - "text": "can", - "type": "text", }, Object { + "data": undefined, + "kind": "text", "text": " also contain ", - "type": "text", }, Object { - "marks": Array [ + "data": undefined, + "kind": "text", + "ranges": Array [ Object { - "type": "strong", + "marks": Array [ + Object { + "type": "bold", + }, + ], + "text": "formatting", }, ], - "text": "formatting", - "type": "text", }, ], - "type": "heading", + "type": "heading-three", }, Object { - "attrs": Object { - "level": 3, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "They can even contain ", - "type": "text", }, Object { - "marks": Array [ + "data": undefined, + "kind": "text", + "ranges": Array [ Object { - "type": "code", + "marks": Array [ + Object { + "type": "code", + }, + ], + "text": "inline code", }, ], - "text": "inline code", - "type": "text", }, ], - "type": "heading", + "type": "heading-three", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Of course, demonstrating what headings look like messes up the structure of the page.", - "type": "text", }, ], "type": "paragraph", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "I don't recommend using more than three or four levels of headings here, because, when you're smallest heading isn't too small, and you're largest heading isn't too big, and you want each size up to look noticeably larger and more important, there there are only so many sizes that you can use.", - "type": "text", }, ], "type": "paragraph", }, Object { - "attrs": Object { - "level": 2, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "URLs", - "type": "text", }, ], - "type": "heading", + "type": "heading-two", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "URLs can be made in a handful of ways:", - "type": "text", }, ], "type": "paragraph", }, Object { - "attrs": Object { - "tight": true, + "data": Object { + "start": null, }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "A named link to MarkItDown. The easiest way to do these is to select what you", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "list_item", + "type": "list-item", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "want to make a link and hit ", - "type": "text", }, Object { - "marks": Array [ + "data": undefined, + "kind": "text", + "ranges": Array [ Object { - "type": "code", + "marks": Array [ + Object { + "type": "code", + }, + ], + "text": "Ctrl+L", }, ], - "text": "Ctrl+L", - "type": "text", }, Object { + "data": undefined, + "kind": "text", "text": ". Another named link to", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "list_item", + "type": "list-item", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "marks": Array [ + "data": Object { + "title": null, + "url": "http://www.markitdown.net/", + }, + "kind": "inline", + "nodes": Array [ Object { - "type": "strong", + "data": undefined, + "kind": "text", + "text": "MarkItDown", }, ], - "text": "MarkItDown", - "type": "text", + "type": "link", }, Object { + "data": undefined, + "kind": "text", "text": " Sometimes you just want a URL like", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "list_item", + "type": "list-item", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "marks": Array [ + "data": Object { + "title": null, + "url": "http://www.markitdown.net/", + }, + "kind": "inline", + "nodes": Array [ Object { - "type": "strong", + "data": undefined, + "kind": "text", + "text": "http://www.markitdown.net/", }, ], - "text": "http://www.markitdown.net/", - "type": "text", + "type": "link", }, Object { + "data": undefined, + "kind": "text", "text": ".", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "list_item", + "type": "list-item", }, ], - "type": "bullet_list", + "type": "bulleted-list", }, Object { - "attrs": Object { - "level": 2, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Horizontal rule", - "type": "text", }, ], - "type": "heading", + "type": "heading-two", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "A horizontal rule is a line that goes across the middle of the page.", - "type": "text", }, ], "type": "paragraph", }, Object { - "type": "horizontal_rule", + "isVoid": true, + "kind": "block", + "nodes": undefined, + "type": "thematic-break", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "It's sometimes handy for breaking things up.", - "type": "text", }, ], "type": "paragraph", }, Object { - "attrs": Object { - "level": 2, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Images", - "type": "text", }, ], - "type": "heading", + "type": "heading-two", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Markdown can also contain images. I'll need to add something here sometime.", - "type": "text", }, ], "type": "paragraph", }, Object { - "attrs": Object { - "level": 2, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Finally", - "type": "text", }, ], - "type": "heading", + "type": "heading-two", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "There's actually a lot more to Markdown than this. See the official introduction and syntax for more information. However, be aware that this is not using the official implementation, and this might work subtly differently in some of the little things.", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "doc", + "type": "root", } `; exports[`Compile markdown to Prosemirror document structure should compile links 1`] = ` Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "attrs": Object { - "level": 1, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Word", - "type": "text", }, ], - "type": "heading", + "type": "heading-one", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "How far is it to ", - "type": "text", }, Object { - "marks": Array [ + "data": Object { + "title": null, + "url": "https://google.com", + }, + "kind": "inline", + "nodes": Array [ Object { - "type": "strong", + "data": undefined, + "kind": "text", + "text": "Google", }, ], - "text": "Google", - "type": "text", + "type": "link", }, Object { + "data": undefined, + "kind": "text", "text": " land?", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "doc", + "type": "root", } `; exports[`Compile markdown to Prosemirror document structure should compile multiple header levels 1`] = ` Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "attrs": Object { - "level": 1, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "H1", - "type": "text", }, ], - "type": "heading", + "type": "heading-one", }, Object { - "attrs": Object { - "level": 2, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "H2", - "type": "text", }, ], - "type": "heading", + "type": "heading-two", }, Object { - "attrs": Object { - "level": 3, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "H3", - "type": "text", }, ], - "type": "heading", + "type": "heading-three", }, ], - "type": "doc", + "type": "root", } `; exports[`Compile markdown to Prosemirror document structure should compile nested inline markup 1`] = ` Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "attrs": Object { - "level": 1, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "Word", - "type": "text", }, ], - "type": "heading", + "type": "heading-one", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "This is ", - "type": "text", }, Object { - "marks": Array [ + "data": undefined, + "kind": "text", + "ranges": Array [ Object { - "type": "strong", + "marks": Array [ + Object { + "type": "bold", + }, + ], + "text": "some ", + }, + Object { + "marks": Array [ + Object { + "type": "bold", + }, + Object { + "type": "italic", + }, + ], + "text": "hot", + }, + Object { + "marks": Array [ + Object { + "type": "bold", + }, + ], + "text": " content", }, ], - "text": "some ", - "type": "text", - }, - Object { - "marks": Array [ - Object { - "type": "em", - }, - Object { - "type": "strong", - }, - ], - "text": "hot", - "type": "text", - }, - Object { - "marks": Array [ - Object { - "type": "strong", - }, - ], - "text": " content", - "type": "text", }, ], "type": "paragraph", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "perhaps ", - "type": "text", }, Object { - "marks": Array [ + "data": undefined, + "kind": "text", + "ranges": Array [ Object { - "type": "strong", + "marks": Array [ + Object { + "type": "bold", + }, + ], + "text": "scalding", }, ], - "text": "scalding", - "type": "text", }, Object { + "data": undefined, + "kind": "text", "text": " even", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "doc", + "type": "root", } `; exports[`Compile markdown to Prosemirror document structure should compile plugins 1`] = ` Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "kind": "block", + "nodes": Array [ + Object { + "data": undefined, + "kind": "text", + "text": "![test](test.png)", + }, + ], "type": "paragraph", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "{{< test >}}", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "doc", + "type": "root", } `; exports[`Compile markdown to Prosemirror document structure should compile simple markdown 1`] = ` Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { - "attrs": Object { - "level": 1, - }, - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "H1", - "type": "text", }, ], - "type": "heading", + "type": "heading-one", }, Object { - "content": Array [ + "kind": "block", + "nodes": Array [ Object { + "data": undefined, + "kind": "text", "text": "sweet body", - "type": "text", }, ], "type": "paragraph", }, ], - "type": "doc", + "type": "root", } `; diff --git a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/__tests__/parser.spec.js b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/__tests__/parser.spec.js index 5d35d45d..9006c9ff 100644 --- a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/__tests__/parser.spec.js +++ b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/__tests__/parser.spec.js @@ -1,12 +1,5 @@ import { fromJS } from 'immutable'; -import { Schema } from "prosemirror-model"; -import { schema } from "prosemirror-markdown"; -import makeParser from '../parser'; - -const testSchema = new Schema({ - nodes: schema.spec.nodes, - marks: schema.spec.marks, -}); +import { markdownToRemark, remarkToSlate } from '../../../serializers'; // Temporary plugins test, uses preloaded plugins from ../parser // TODO: make the parser more testable @@ -51,7 +44,7 @@ const testPlugins = fromJS([ }, ]); -const parser = makeParser(testSchema, testPlugins); +const parser = markdown => remarkToSlate(markdownToRemark(markdown)); describe("Compile markdown to Prosemirror document structure", () => { it("should compile simple markdown", () => { diff --git a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/components.js b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/components.js index ad8945d8..2f19dcc7 100644 --- a/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/components.js +++ b/src/components/Widgets/Markdown/MarkdownControl/VisualEditor/components.js @@ -16,30 +16,30 @@ export const MARK_COMPONENTS = { }; export const NODE_COMPONENTS = { - paragraph: props =>

{props.children}

, + 'paragraph': props =>

{props.children}

, 'list-item': props =>
  • {props.children}
    • , - 'bulleted-list': props => , - 'numbered-list': props => -
      {props.children}
    , - quote: props =>
    {props.children}
    , - code: props => 
    {props.children}
    , + 'quote': props =>
    {props.children}
    , + 'code': props => 
    {props.children}
    , 'heading-one': props =>

    {props.children}

    , 'heading-two': props =>

    {props.children}

    , 'heading-three': props =>

    {props.children}

    , 'heading-four': props =>

    {props.children}

    , 'heading-five': props =>
    {props.children}
    , 'heading-six': props =>
    {props.children}
    , - table: props => {props.children}
    , + 'table': props => {props.children}
    , 'table-row': props => {props.children}, 'table-cell': props => {props.children}, 'thematic-break': props =>
    , - link: props => { + 'bulleted-list': props => , + 'numbered-list': props => +
      {props.children}
    , + 'link': props => { const data = props.node.get('data'); const url = data.get('url'); const title = data.get('title'); return {props.children}; }, - shortcode: props => { + 'shortcode': props => { const { attributes, node, state: editorState } = props; const isSelected = editorState.selection.hasFocusIn(node); const className = cn(styles.shortcode, { [styles.shortcodeSelected]: isSelected }); diff --git a/src/components/Widgets/Markdown/MarkdownPreview/__tests__/__snapshots__/MarkupItReactRenderer.spec.js.snap b/src/components/Widgets/Markdown/MarkdownPreview/__tests__/__snapshots__/MarkupItReactRenderer.spec.js.snap deleted file mode 100644 index b51ff97e..00000000 --- a/src/components/Widgets/Markdown/MarkdownPreview/__tests__/__snapshots__/MarkupItReactRenderer.spec.js.snap +++ /dev/null @@ -1,78 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`MarkitupReactRenderer HTML rendering should render HTML 1`] = `"

    Paragraph with inline element

    "`; - -exports[`MarkitupReactRenderer Markdown rendering Code should render code 1`] = `"

    Use the printf() function.

    "`; - -exports[`MarkitupReactRenderer Markdown rendering Code should render code 2 1`] = `"

    There is a literal backtick (\`) here.

    "`; - -exports[`MarkitupReactRenderer Markdown rendering General should render markdown 1`] = ` -"

    H1

    -

    Text with bold & em elements

    -

    H2

    - -

    H3

    -
      -
    1. ol item 1
      2. -
    2. ol item 2
      3. -
    3. ol item 3
      4. -
    -

    H4

    -

    link title

    -
    H5
    -

    \\"alt

    -
    H6
    " -`; - -exports[`MarkitupReactRenderer Markdown rendering HTML should render HTML as is when using Markdown 1`] = ` -"

    Title

    -
    - -
    -
    Test HTML content
    -
    Testing HTML in Markdown
    -
    -
    -

    Test

    " -`; - -exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 1 1`] = `"

    Title

    "`; - -exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 2 1`] = `"

    Title

    "`; - -exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 3 1`] = `"

    Title

    "`; - -exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 4 1`] = `"

    Title

    "`; - -exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 5 1`] = `"
    Title
    "`; - -exports[`MarkitupReactRenderer Markdown rendering Headings should render Heading 6 1`] = `"
    Title
    "`; - -exports[`MarkitupReactRenderer Markdown rendering Links should render links 1`] = `"

    I get 10 times more traffic from Google than from Yahoo or MSN.

    "`; - -exports[`MarkitupReactRenderer Markdown rendering Lists should render lists 1`] = ` -"
      -
    1. ol item 1
      2. -
    2. ol item 2
      3. -
    - -
      -
    1. ol item 3
      2. -
    " -`; diff --git a/src/components/Widgets/Markdown/MarkdownPreview/__tests__/__snapshots__/renderer.spec.js.snap b/src/components/Widgets/Markdown/MarkdownPreview/__tests__/__snapshots__/renderer.spec.js.snap new file mode 100644 index 00000000..2d901185 --- /dev/null +++ b/src/components/Widgets/Markdown/MarkdownPreview/__tests__/__snapshots__/renderer.spec.js.snap @@ -0,0 +1,78 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Markdown Preview renderer HTML rendering should render HTML 1`] = `"

    Paragraph with inline element

    "`; + +exports[`Markdown Preview renderer Markdown rendering Code should render code 1`] = `"

    Use the printf() function.

    "`; + +exports[`Markdown Preview renderer Markdown rendering Code should render code 2 1`] = `"

    There is a literal backtick (\`) here.

    "`; + +exports[`Markdown Preview renderer Markdown rendering General should render markdown 1`] = ` +"

    H1

    +

    Text with bold & em elements

    +

    H2

    + +

    H3

    +
      +
    1. ol item 1
      2. +
    2. ol item 2
      3. +
    3. ol item 3
      4. +
    +

    H4

    +

    link title

    +
    H5
    +

    ![alt text](https://pbs.twimg.com/profile_images/678903331176214528/TQTdqGwD.jpg)

    +
    H6
    " +`; + +exports[`Markdown Preview renderer Markdown rendering HTML should render HTML as is when using Markdown 1`] = ` +"

    Title

    +
    + +
    +
    Test HTML content
    +
    Testing HTML in Markdown
    +
    +
    +

    Test

    " +`; + +exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 1 1`] = `"

    Title

    "`; + +exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 2 1`] = `"

    Title

    "`; + +exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 3 1`] = `"

    Title

    "`; + +exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 4 1`] = `"

    Title

    "`; + +exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 5 1`] = `"
    Title
    "`; + +exports[`Markdown Preview renderer Markdown rendering Headings should render Heading 6 1`] = `"
    Title
    "`; + +exports[`Markdown Preview renderer Markdown rendering Links should render links 1`] = `"

    I get 10 times more traffic from Google than from Yahoo or MSN.

    "`; + +exports[`Markdown Preview renderer Markdown rendering Lists should render lists 1`] = ` +"
      +
    1. ol item 1
      2. +
    2. +

      ol item 2

      +
        +
      • Sublist 1
        • +
      • Sublist 2
        • +
      • +

        Sublist 3

        +
          +
        1. Sub-Sublist 1
          2. +
        2. Sub-Sublist 2
          3. +
        3. Sub-Sublist 3
          4. +
        +
        • +
      +
      3. +
    3. ol item 3
      4. +
    " +`; diff --git a/src/components/Widgets/Markdown/MarkdownPreview/__tests__/MarkupItReactRenderer.spec.js b/src/components/Widgets/Markdown/MarkdownPreview/__tests__/renderer.spec.js similarity index 77% rename from src/components/Widgets/Markdown/MarkdownPreview/__tests__/MarkupItReactRenderer.spec.js rename to src/components/Widgets/Markdown/MarkdownPreview/__tests__/renderer.spec.js index e8859a2a..02bb94c2 100644 --- a/src/components/Widgets/Markdown/MarkdownPreview/__tests__/MarkupItReactRenderer.spec.js +++ b/src/components/Widgets/Markdown/MarkdownPreview/__tests__/renderer.spec.js @@ -4,8 +4,9 @@ import React from 'react'; import { shallow } from 'enzyme'; import { padStart } from 'lodash'; import MarkdownPreview from '../index'; +import { markdownToRemark } from '../../serializers'; -describe('MarkitupReactRenderer', () => { +describe('Markdown Preview renderer', () => { describe('Markdown rendering', () => { describe('General', () => { it('should render markdown', () => { @@ -35,7 +36,7 @@ Text with **bold** & _em_ elements ###### H6 `; - const component = shallow(); + const component = shallow(); expect(component.html()).toMatchSnapshot(); }); }); @@ -44,7 +45,7 @@ Text with **bold** & _em_ elements for (const heading of [...Array(6).keys()]) { it(`should render Heading ${ heading + 1 }`, () => { const value = padStart(' Title', heading + 7, '#'); - const component = shallow(); + const component = shallow(); expect(component.html()).toMatchSnapshot(); }); } @@ -63,7 +64,7 @@ Text with **bold** & _em_ elements 1. Sub-Sublist 3 1. ol item 3 `; - const component = shallow(); + const component = shallow(); expect(component.html()).toMatchSnapshot(); }); }); @@ -77,7 +78,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3] [2]: http://search.yahoo.com/ "Yahoo Search" [3]: http://search.msn.com/ "MSN Search" `; - const component = shallow(); + const component = shallow(); expect(component.html()).toMatchSnapshot(); }); }); @@ -85,13 +86,13 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3] describe('Code', () => { it('should render code', () => { const value = 'Use the `printf()` function.'; - const component = shallow(); + const component = shallow(); expect(component.html()).toMatchSnapshot(); }); it('should render code 2', () => { const value = '``There is a literal backtick (`) here.``'; - const component = shallow(); + const component = shallow(); expect(component.html()).toMatchSnapshot(); }); }); @@ -113,7 +114,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3]

    Test

    `; - const component = shallow(); + const component = shallow(); expect(component.html()).toMatchSnapshot(); }); }); @@ -122,7 +123,7 @@ I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3] describe('HTML rendering', () => { it('should render HTML', () => { const value = '

    Paragraph with inline element

    '; - const component = shallow(); + const component = shallow(); expect(component.html()).toMatchSnapshot(); }); });