refactor parsemd: extract setting markdown value and elements

backstage/static/js/parsers.js

@@ -1,14 +1,14 @@
 function parseMd(content) {
   var frontMatters = [];
-  var blockArray = [{title: '', data: []}];
   var blockCount;
   var preDataIndex;
   var parseBlockDiv;
   var url, contentUr;
-  var preImg, preImgObject;
-  var preImgObject = {'image': {}}
+  var preImgObject = {'image': {}};
   var isNotFrontMatterCount = 0;
   var isAmpImgRange = false;
+  var result = [{title: '', data: []}];
+
   for (const line of content.split('\n')) {
     if (isNotFrontMatterCount < 2) {
       frontMatters.push(line)
@@ -25,83 +25,27 @@ function parseMd(content) {
     if (isAmpImgRange === true && !(line.includes('</amp-img>'))) {
       imgParamObject = parseAmpImg(line, url);
       preImgObject.image = {...preImgObject.image, ...imgParamObject};
-      const key = _.get(_.keys(imgParamObject), 0);
-      if (key === 'src') {
-        preImg.setAttribute(key, url + _.get(imgParamObject, `${key}`));
-      } else {
-        preImg.setAttribute(key, _.get(imgParamObject, `${key}`));
-      }
       continue;
     }
 
     if (line.includes('##')) {
+      parseBlockDiv = true;
       preDataIndex = 0;
       blockCount = blockCount + 1 | 0;
       const preBlockindex = blockCount;
-      const {blockDiv, h, titleInput, inputButton, descButton, imgButton} = getBlockElements(contentDiv);
-      parseBlockDiv = blockDiv;
       const title = parseTitle(line);
-      blockArray[preBlockindex] = {title: title};
-      h.textContent = title;
-      inputButton.onclick = function() {
-        const title = titleInput.value;
-        blockArray[preBlockindex].title = title;
-        h.textContent = title;
-      }
-      descButton.onclick = function() {
-        blockArray[preBlockindex].data.length = blockArray[preBlockindex].data.length + 1
-        const ownDataIndex = blockArray[preBlockindex].data.length;
-        const {p, descTextArea, descInputButton, descRemoveButton} = getdescElements(blockDiv);
-        descInputButton.onclick = function() {
-          blockArray = handleDescInputClick(p, descTextArea.value, blockArray, preBlockindex, ownDataIndex);
-        }
-        descRemoveButton.onclick = function() {
-          removeDescElement(p, descTextArea, descInputButton, descRemoveButton);
-          removeDescData(blockArray, preBlockindex, ownDataIndex);
-        }
-      }
-      imgButton.onclick = function() {
-        blockArray[preBlockindex].data.length = blockArray[preBlockindex].data.length + 1
-        const imgDataIndex = blockArray[preBlockindex].data.length;
-        const {img, imgInput, widthInput, heightInput, imgInputButton, imgRemoveButton} = getImgElements(blockDiv);
-        imgInputButton.onclick = function() {
-          const imgObject = {image: {src: 'img/' + imgInput.files[0].name,
-                                     height: heightInput.value,
-                                     width: widthInput.value,
-                                     alt: 'image field',
-                                     layout: 'responsive'}};
-          blockArray = handleImgInputClick(img, imgObject, blockArray, preBlockindex, imgDataIndex, url);
-        }
-        imgRemoveButton.onclick = function() {
-          removeImgElement(img, imgInput, widthInput, heightInput, imgInputButton, imgRemoveButton);
-          blockArray = removeImgData(blockArray, preBlockindex, imgDataIndex, contentUr);
-        }
-      }
+      result[preBlockindex]  = {title: title};
+
     } else if (line.includes('amp-img')) {
       const preBlockindex = blockCount;
       if (line.includes('</amp-img>')) {
-        blockArray = addDataToBlockArray(preImgObject, blockArray, preBlockindex, preDataIndex - 1);
+        addDataToBlockArray(preImgObject, result, preBlockindex, preDataIndex);
         isAmpImgRange = false;
         preImgObject = {'image': {}}
+        preDataIndex += 1;
         continue;
       }
-      const imgDataIndex = preDataIndex;
-      preDataIndex += 1;
       isAmpImgRange = true;
-      const {img, imgInput, widthInput, heightInput, imgInputButton, imgRemoveButton} = getImgElements(parseBlockDiv);
-      preImg = img;
-      imgInputButton.onclick = function() {
-        const imgObject = {image: {src: 'img/' + imgInput.files[0].name,
-                                   height: heightInput.value,
-                                   width: widthInput.value,
-                                   alt: 'image field',
-                                   layout: 'responsive'}};
-        blockArray = handleImgInputClick(img, imgObject, blockArray, preBlockindex, imgDataIndex, url);
-      }
-      imgRemoveButton.onclick = function() {
-        removeImgElement(img, imgInput, widthInput, heightInput, imgInputButton, imgRemoveButton);
-        blockArray = removeImgData(blockArray, preBlockindex, imgDataIndex, contentUr);
-      }
     } else {
       if (parseBlockDiv === undefined){
         // for skipping space before first title
@@ -110,20 +54,10 @@ function parseMd(content) {
       const preBlockindex = blockCount;
       const ownDataIndex = preDataIndex;
       preDataIndex += 1;
-      const {p, descTextArea, descInputButton, descRemoveButton} = getdescElements(parseBlockDiv);
-      const text = line;
-      p.textContent = text;
-      blockArray = addDataToBlockArray({description: {text: text}}, blockArray, preBlockindex, ownDataIndex);
-      descInputButton.onclick = function() {
-        blockArray = handleDescInputClick(p, descTextArea.value, blockArray, preBlockindex, ownDataIndex);
-      }
-      descRemoveButton.onclick = function() {
-        removeDescElement(p, descTextArea, descInputButton, descRemoveButton);
-        removeDescData(blockArray, preBlockindex, ownDataIndex);
-      }
+      addDataToBlockArray({description: {text: line}}, result, preBlockindex, ownDataIndex);
     }
   }
-  return {frontMatters: frontMatters, blockArray: blockArray, blockCount: blockCount}
+  return {frontMatters: frontMatters, preBlockArray: result}
 }
 
 const parseTitle = line => {
@@ -150,16 +84,3 @@ const parseAmpImg = line => {
     const layoutParameter = line.replace(/ |layout=|"|>/g, '');                             
   }
 }
-
-function handleDescInputClick(p, desc, blockArray, blockIndex, ownDataIndex) {
-  p.textContent = desc;
-  return addDataToBlockArray({description: {text: desc + '\n'}}, blockArray, blockIndex, ownDataIndex)
-}
-
-function handleImgInputClick(img, imgObject, blockArray, blockIndex, ownDataIndex, url) {
-  img.setAttribute('src', url + _.get(imgObject, 'image.src'));
-  img.setAttribute('width', _.get(imgObject, 'image.width'));
-  img.setAttribute('height', _.get(imgObject, 'image.height'));
-  img.setAttribute('alt', _.get(imgObject, 'image.alt'));
-  return addDataToBlockArray(imgObject, blockArray, blockIndex, ownDataIndex)
-}