WIP: import md feature

Author: stejul

dist/bundle.js

@@ -18,10 +18,4 @@
 <div class="ce-example__button" id="saveButton">
     editor.save()
 </div>
-<div class="ce-example__button" id="parseButton">
-  Parse Markdown
-</div>
-<form>
-    <input class="ce-example__button" type="file" id="fileUpload" name="filename">
-</form>
 </html>

index.html

@@ -3,3 +3,16 @@ export function parseDelimiterToMarkdown() {
 
   return delimiter.concat('\n');
 }
+
+export function parseMarkdownToDelimiter() {
+  let delimiterData = {};
+
+  delimiterData = {
+    data: {
+      items: [],
+    },
+    type: 'delimiter',
+  };
+
+  return delimiterData;
+}

src/BlockTypeParsers/delimiter-type-parser.js

@@ -10,3 +10,48 @@ export function parseHeaderToMarkdown(blocks) {
       break;
   }
 }
+
+export function parseMarkdownToHeader(blocks) {
+  let headerData = {};
+
+  switch (blocks.depth) {
+    case 1:
+      blocks.children.forEach((item) => {
+        headerData = {
+          data: {
+            level: 1,
+            text: item.value,
+          },
+          type: 'header',
+        };
+      });
+
+      return headerData;
+    case 2:
+      blocks.children.forEach((item) => {
+        headerData = {
+          data: {
+            level: 2,
+            text: item.value,
+          },
+          type: 'header',
+        };
+      });
+
+      return headerData;
+    case 3:
+      blocks.children.forEach((item) => {
+        headerData = {
+          data: {
+            level: 3,
+            text: item.value,
+          },
+          type: 'header',
+        };
+      });
+
+      return headerData;
+    default:
+      break;
+  }
+}

src/BlockTypeParsers/header-type-parser.js

@@ -13,3 +13,26 @@ export function parseListToMarkdown(blocks) {
       break;
   }
 }
+
+export function parseMarkdownToList(blocks) {
+  let listData = {};
+  const itemData = [];
+
+  blocks.children.forEach((items) => {
+    items.children.forEach((listItem) => {
+      listItem.children.forEach((listEntry) => {
+        itemData.push(listEntry.value);
+      });
+    });
+  });
+
+  listData = {
+    data: {
+      items: itemData,
+      style: blocks.ordered ? 'ordered' : 'unordered',
+    },
+    type: 'list',
+  };
+
+  return listData;
+}

src/BlockTypeParsers/list-type-parser.js

@@ -1,3 +1,21 @@
 export function parseParagraphToMarkdown(blocks) {
   return `${blocks.text}\n`;
 }
+
+export function parseMarkdownToParagraph(blocks) {
+  let paragraphData = {};
+
+  if (blocks.type === 'paragraph') {
+    blocks.children.forEach((item) => {
+      if (item.type === 'text') {
+        paragraphData = {
+          data: {
+            text: item.value,
+          },
+          type: 'paragraph',
+        };
+      }
+    });
+  }
+  return paragraphData;
+}

src/BlockTypeParsers/paragraph-type-parser.js

@@ -1,4 +1,10 @@
 import * as remark from 'remark';
+import { parseMarkdownToHeader } from './BlockTypeParsers/header-type-parser';
+import { parseMarkdownToParagraph } from './BlockTypeParsers/paragraph-type-parser';
+import { parseMarkdownToList } from './BlockTypeParsers/list-type-parser';
+import { parseMarkdownToDelimiter } from './BlockTypeParsers/delimiter-type-parser';
+
+export const editorData = [];
 
 export default class ImportMarkdown {
   constructor({ data, api }) {
@@ -21,8 +27,6 @@ export default class ImportMarkdown {
     doc.setAttribute('name', 'files[]');
     doc.setAttribute('onload', this.parseMarkdown());
 
-    // TODO: return import method
-
     return doc;
   }
 
@@ -32,6 +36,11 @@ export default class ImportMarkdown {
     const data = await this.api.saver.save();
     a.content = data.blocks;
 
+    //let b = [];
+    console.log('EditorJs content');
+    console.log(a.content);
+    console.log('--------------------');
+
     const fileUpload = document.getElementById('file-upload');
 
     fileUpload.onchange = (e) => {
@@ -42,11 +51,41 @@ export default class ImportMarkdown {
 
       reader.onload = (readerEvent) => {
         const content = readerEvent.target.result;
-        console.log(content);
         console.log(remark().parse(content));
+        // TODO: implement switch case block for parsing
+        // markdown to json (editorjs)
+        const parsedMarkdown = remark().parse(content);
+        
+        parsedMarkdown.children.forEach((item, index) => {
+          //console.log(item.children.forEach((item) => console.log(item)));
+          switch (item.type) {
+            case 'heading':
+              return editorData.push(parseMarkdownToHeader(item));
+            case 'paragraph':
+              return editorData.push(parseMarkdownToParagraph(item));
+            case 'list':
+              return editorData.push(parseMarkdownToList(item));
+            case 'thematicBreak':
+              return editorData.push(parseMarkdownToDelimiter());
+            default:
+              break;
+          }
+        });
+        // filter through array and remove empty objects
+        console.log(editorData.filter((value) => Object.keys(value).length !== 0));
+
+        // TODO rerender editor with new parsed Data
+        // this.api.blocks.clear();
+        // this.api.blocks.render({
+        //   time: 1550476186479,
+        //   blocks: [editorData],
+        //   version: '2.18.0',
+        // });
+
         return remark().parse(content);
       };
     };
+
     fileUpload.click();
   }
 

src/import-markdown.js

@@ -19,7 +19,6 @@ import { fileUploadHandler, parseFromMarkdown } from './file-handler';
 import { dataField } from './data';
 
 const saveButton = document.getElementById('saveButton');
-const newDataField = {};
 const editor = new EditorJS({
   autofocus: true,
 

src/index.js

@@ -60,6 +60,8 @@ export default class MarkdownParser {
           return parseCheckboxToMarkdown(item.data);
         case 'code':
           return parseCodeToMarkdown(item.data);
+        case 'checklist':
+          return parseCheckboxToMarkdown(item.data);
         default:
           break;
       }