Add failing test for getting the language from fenced code blocks (#167)

* Add failing test for getting language from fenced code blocks

* Correctly extract language from markdown code blocks

* Workaround Flow error in node_modules

Author: mxstbr

.flowconfig

@@ -1,4 +1,5 @@
 [ignore]
+.*/node_modules/@lerna/.*
 
 [include]
 

packages/draft-js-import-element/src/stateFromElement.js

@@ -294,6 +294,12 @@ class ContentGenerator {
       isCustomType = false;
       type = this.getBlockTypeFromTagName(tagName);
     }
+    if (type === BLOCK_TYPE.CODE) {
+      let language = element.getAttribute('data-language');
+      if (language) {
+        data = {...data, language};
+      }
+    }
     let hasDepth = canHaveDepth(type);
     let allowRender = !SPECIAL_ELEMENTS.hasOwnProperty(tagName);
     if (!isCustomType && !hasSemanticMeaning(type)) {

packages/draft-js-import-markdown/src/MarkdownParser.js

@@ -594,12 +594,14 @@ function Renderer(options) {
 }
 
 Renderer.prototype.code = function(text, lang) {
-  var attributes = [];
+  var codeAttrs = [];
+  var preAttrs = [];
   if (lang) {
-    attributes.push({name: 'class', value: this.options.langPrefix + lang});
+    codeAttrs.push({name: 'class', value: this.options.langPrefix + lang});
+    preAttrs.push({name: 'data-language', value: lang});
   }
-  var codeNode = new ElementNode('code', attributes, [new TextNode(text)]);
-  return new ElementNode('pre', [], [codeNode]);
+  var codeNode = new ElementNode('code', codeAttrs, [new TextNode(text)]);
+  return new ElementNode('pre', preAttrs, [codeNode]);
 };
 
 Renderer.prototype.blockquote = function(childNode) {

packages/draft-js-import-markdown/src/__tests__/stateFromMarkdown-test.js

@@ -43,6 +43,30 @@ describe('stateFromMarkdown', () => {
       },
     ]);
   });
+  it('should correctly handle code blocks with languages', () => {
+    let markdown = "```javascript\nconst a = 'b'\n```";
+    let contentState = stateFromMarkdown(markdown);
+    let rawContentState = convertToRaw(contentState);
+    let blocks = removeKeys(rawContentState.blocks);
+    expect(blocks).toEqual([
+      {
+        text: "const a = 'b'",
+        type: 'code-block',
+        data: {
+          language: 'javascript',
+        },
+        depth: 0,
+        inlineStyleRanges: [
+          {
+            length: 13,
+            offset: 0,
+            style: 'CODE',
+          },
+        ],
+        entityRanges: [],
+      },
+    ]);
+  });
   it('should correctly handle linebreaks option', () => {
     let markdown = 'Hello\nWorld';
     let contentState = stateFromMarkdown(markdown, {