extract geting blockElemtents to blockElements and extract parsing data to parsers

blockElements.js

@@ -0,0 +1,57 @@
+function getBlockElements(contentDiv) {
+  const blockDiv = document.createElement("div");
+  const descButton = document.createElement('button');
+  descButton.textContent = 'Add Description';
+  const imgButton = document.createElement('button');
+  imgButton.textContent = 'Add Image';
+  const h = document.createElement("H2");
+  const input = document.createElement("INPUT");
+  input.setAttribute("type", "text");
+  const inputButton = document.createElement('button');
+  inputButton.textContent = 'Title新增/修改';
+  contentDiv.appendChild(blockDiv);
+  blockDiv.append(h, input, inputButton, descButton, imgButton);
+  return {
+    blockDiv: blockDiv,
+    h: h,
+    titleInput: input,
+    inputButton: inputButton,
+    descButton: descButton,
+    imgButton: imgButton
+  };
+}
+
+function getdescElements(blockDiv) {
+  const descDiv = document.createElement("div");
+  const p = document.createElement("p");
+  const descTextArea = document.createElement("TEXTAREA");
+  descTextArea.setAttribute("type", "text");
+  const descInputButton = document.createElement('button');
+  descInputButton.textContent = 'Description新增/修改';
+  blockDiv.appendChild(descDiv);
+  descDiv.append(p, descTextArea, descInputButton);
+  return {
+    p: p,
+    descTextArea: descTextArea,
+    descInputButton: descInputButton
+  };
+}
+
+function getImgElements(blockDiv) {
+  const imgDiv = document.createElement("div");
+  const img = document.createElement("img");
+  const imgInput = document.createElement("INPUT");
+  const widthInput = document.createElement("INPUT");
+  const heightInput = document.createElement("INPUT");
+  const imgInputButton = document.createElement('button');
+  imgInputButton.textContent = 'Image新增/修改';
+  blockDiv.appendChild(imgDiv);
+  imgDiv.append(img, imgInput, widthInput, heightInput, imgInputButton);
+  return {
+    img: img,
+    imgInput: imgInput,
+    widthInput: widthInput,
+    heightInput: heightInput,
+    imgInputButton: imgInputButton
+  };
+}

editor.js

@@ -1,61 +1,3 @@
-function getBlockElements() {
-  const blockDiv = document.createElement("div");
-  const descButton = document.createElement('button');
-  descButton.textContent = 'Add Description';
-  const imgButton = document.createElement('button');
-  imgButton.textContent = 'Add Image';
-  const h = document.createElement("H2");
-  const input = document.createElement("INPUT");
-  input.setAttribute("type", "text");
-  const inputButton = document.createElement('button')
-  inputButton.textContent = 'Title新增/修改';
-  contentDiv.appendChild(blockDiv);
-  blockDiv.append(h, input, inputButton, descButton, imgButton);
-  return {
-    blockDiv: blockDiv,
-    h: h,
-    titleInput: input,
-    inputButton: inputButton,
-    descButton: descButton,
-    imgButton: imgButton
-  };
-}
-
-function getdescElements(blockDiv) {
-  const descDiv = document.createElement("div");
-  const p = document.createElement("p");
-  const descTextArea = document.createElement("TEXTAREA");
-  descTextArea.setAttribute("type", "text");
-  const descInputButton = document.createElement('button')
-  descInputButton.textContent = 'Description新增/修改';
-  blockDiv.appendChild(descDiv);
-  descDiv.append(p, descTextArea, descInputButton);
-  return {
-    p: p,
-    descTextArea: descTextArea,
-    descInputButton: descInputButton
-  };
-}
-
-function getImgElements(blockDiv) {
-  const imgDiv = document.createElement("div");
-  const img = document.createElement("img");
-  const imgInput = document.createElement("INPUT");
-  const widthInput = document.createElement("INPUT");
-  const heightInput = document.createElement("INPUT");
-  const imgInputButton = document.createElement('button');
-  imgInputButton.textContent = 'Image新增/修改';
-  blockDiv.appendChild(imgDiv);
-  imgDiv.append(img, imgInput, widthInput, heightInput, imgInputButton);
-  return {
-    img: img,
-    imgInput: imgInput,
-    widthInput: widthInput,
-    heightInput: heightInput,
-    imgInputButton: imgInputButton
-  };
-}
-
 function addDataToBlockArray(dataObject, blockArray, blockIndex, dataIndex) {
   if ('data' in blockArray[blockIndex]) {
     blockArray[blockIndex].data[dataIndex] = dataObject
@@ -65,111 +7,8 @@ function addDataToBlockArray(dataObject, blockArray, blockIndex, dataIndex) {
   return blockArray;
 }
 
-function parseMd(content) {
-  const parseTitle = line => {
-    var title = '';
-    title = line.replace('## **', '');
-    title = title.replace('**', '');
-    return title;
-  };
-  
-  const parseAmpImg = line => {
-    if (line.includes('alt')) {
-      const altParameter = line.replace(/alt=|"/g, '');
-      return {alt: altParameter};
-    } else if (line.includes('src')) {
-      const srcParameter = line.replace(/src=|"/g, '');
-      return {src: srcParameter};
-    } else if (line.includes('height')) {
-      const heightParameter = line.replace(/height=|"/g, '');
-      return {height: heightParameter};
-    } else if (line.includes('width')) {
-      const widthParameter = line.replace(/width=|"/g, '');
-      return {width: widthParameter};
-    } else if (line.includes('layout')) {
-      const layoutParameter = line.replace(/layout=|"|>/g, '');                             
-    }
-  }
-
-  var blockArray = [{title: ''}];
-  var blockCount;
-  var preDataIndex, imgDataIndex;
-  var parseBlockDiv;
-  var preImg, preImgObject;
-  var preImgObject = {'image': {}}
-  var isNotFrontMatterCount = 0;
-  var isAmpImgRange = false;
-  for (const line of content.split('\n')) {
-    if (isNotFrontMatterCount < 2) {
-        if (line.includes('---')) {
-        isNotFrontMatterCount += 1;
-      }
-      continue;
-    }
-
-    if (isAmpImgRange === true && !(line.includes('</amp-img>'))) {
-      imgParamObject = parseAmpImg(line);
-      preImgObject.image = {...preImgObject.image, ...imgParamObject};
-      const key = _.get(_.keys(imgParamObject), 0);
-      preImg.setAttribute(key, _.get(imgParamObject, `${key}`));
-      continue;
-    }
-
-    if (line.includes('##')) {
-      var preDataIndex = 0;
-      blockCount = blockCount + 1 | 0;
-      const preBlockindex = blockCount;
-      const {blockDiv, h, titleInput, inputButton, descButton, imgButton} = getBlockElements();
-      parseBlockDiv = blockDiv;
-      const title = parseTitle(line);
-      const text = title;
-      blockArray[preBlockindex] = {title: text};
-      h.textContent = text;
-      inputButton.onclick = function() {
-        const text = titleInput.value;
-        blockArray[preBlockindex].title = text;
-        h.textContent = text;
-      }
-    } else if (line.includes('amp-img')) {
-      const preBlockindex = blockCount;
-      if (line.includes('</amp-img>')) {
-        blockArray = addDataToBlockArray(preImgObject, blockArray, preBlockindex, imgDataIndex)
-        isAmpImgRange = false;
-        continue;
-      }
-      imgDataIndex = preDataIndex;
-      preDataIndex += 1;
-      isAmpImgRange = true;
-      const {img, imgInput, widthInput, heightInput, imgInputButton} = getImgElements(parseBlockDiv);
-      preImg = img;
-      imgInputButton.onclick = function() {
-        preImg.setAttribute('src', imgInput.value);
-        preImg.setAttribute('width', widthInput.value);
-        preImg.setAttribute('height', heightInput.value);
-        preImg.setAttribute('alt', 'image field');
-        const imgObject = {image: {src: imgInput.value,
-                                   height: heightInput.value,
-                                   width: widthInput.value,
-                                   alt: 'image field',
-                                   layout: 'responsive'}};
-        blockArray = addDataToBlockArray(imgObject, blockArray, preBlockindex, imgDataIndex)
-      }
-    } else {
-      const preBlockindex = blockCount;
-      const ownDataIndex = preDataIndex;
-      preDataIndex += 1;
-      const {p, descTextArea, descInputButton} = getdescElements(parseBlockDiv);
-      const text = line;
-      p.textContent = text;
-      blockArray = addDataToBlockArray({description: {text: text}}, blockArray, preBlockindex, ownDataIndex)
-      descInputButton.onclick = function () {
-        const text = descTextArea.value;
-        p.textContent = text;
-        addDataToBlockArray({description: {text: text}}, blockArray, preBlockindex, ownDataIndex)
-      }
-    }
-  }
-  return {blockArray: blockArray, blockCount: blockCount}
+function isIndexExistInBlockArray(blockIndex, length) {
+  return blockIndex < length;
 }
 
 
@@ -184,10 +23,10 @@ axios.get('/公仔與爵士鼓.md').then(function(response) {
     dataIndex = 0;
     const blockIndex = blockCount;
     blockCount = blockCount + 1;
-    const {blockDiv, h, titleInput, inputButton, descButton, imgButton} = getBlockElements();
+    const {blockDiv, h, titleInput, inputButton, descButton, imgButton} = getBlockElements(contentDiv);
     inputButton.onclick = function() {
       const text = titleInput.value;
-      if (blockIndex < blockArray.length) {
+      if (isIndexExistInBlockArray(blockIndex, blockArray.length)) {
         blockArray[blockIndex].title = text;
         h.textContent = text;
       } else {
@@ -246,5 +85,4 @@ axios.get('/公仔與爵士鼓.md').then(function(response) {
     console.log(mdContent);
     console.log(blockArray);
   }
-
 });

parsers.js

@@ -0,0 +1,106 @@
+function parseMd(content) {
+  var blockArray = [{title: ''}];
+  var blockCount;
+  var preDataIndex, imgDataIndex;
+  var parseBlockDiv;
+  var preImg, preImgObject;
+  var preImgObject = {'image': {}}
+  var isNotFrontMatterCount = 0;
+  var isAmpImgRange = false;
+  for (const line of content.split('\n')) {
+    if (isNotFrontMatterCount < 2) {
+        if (line.includes('---')) {
+        isNotFrontMatterCount += 1;
+      }
+      continue;
+    }
+
+    if (isAmpImgRange === true && !(line.includes('</amp-img>'))) {
+      imgParamObject = parseAmpImg(line);
+      preImgObject.image = {...preImgObject.image, ...imgParamObject};
+      const key = _.get(_.keys(imgParamObject), 0);
+      preImg.setAttribute(key, _.get(imgParamObject, `${key}`));
+      continue;
+    }
+
+    if (line.includes('##')) {
+      var preDataIndex = 0;
+      blockCount = blockCount + 1 | 0;
+      const preBlockindex = blockCount;
+      const {blockDiv, h, titleInput, inputButton, descButton, imgButton} = getBlockElements(contentDiv);
+      parseBlockDiv = blockDiv;
+      const title = parseTitle(line);
+      const text = title;
+      blockArray[preBlockindex] = {title: text};
+      h.textContent = text;
+      inputButton.onclick = function() {
+        const text = titleInput.value;
+        blockArray[preBlockindex].title = text;
+        h.textContent = text;
+      }
+    } else if (line.includes('amp-img')) {
+      const preBlockindex = blockCount;
+      if (line.includes('</amp-img>')) {
+        blockArray = addDataToBlockArray(preImgObject, blockArray, preBlockindex, imgDataIndex)
+        isAmpImgRange = false;
+        continue;
+      }
+      imgDataIndex = preDataIndex;
+      preDataIndex += 1;
+      isAmpImgRange = true;
+      const {img, imgInput, widthInput, heightInput, imgInputButton} = getImgElements(parseBlockDiv);
+      preImg = img;
+      imgInputButton.onclick = function() {
+        preImg.setAttribute('src', imgInput.value);
+        preImg.setAttribute('width', widthInput.value);
+        preImg.setAttribute('height', heightInput.value);
+        preImg.setAttribute('alt', 'image field');
+        const imgObject = {image: {src: imgInput.value,
+                                   height: heightInput.value,
+                                   width: widthInput.value,
+                                   alt: 'image field',
+                                   layout: 'responsive'}};
+        blockArray = addDataToBlockArray(imgObject, blockArray, preBlockindex, imgDataIndex)
+      }
+    } else {
+      const preBlockindex = blockCount;
+      const ownDataIndex = preDataIndex;
+      preDataIndex += 1;
+      const {p, descTextArea, descInputButton} = getdescElements(parseBlockDiv);
+      const text = line;
+      p.textContent = text;
+      blockArray = addDataToBlockArray({description: {text: text}}, blockArray, preBlockindex, ownDataIndex)
+      descInputButton.onclick = function () {
+        const text = descTextArea.value;
+        p.textContent = text;
+        addDataToBlockArray({description: {text: text}}, blockArray, preBlockindex, ownDataIndex)
+      }
+    }
+  }
+  return {blockArray: blockArray, blockCount: blockCount}
+}
+
+const parseTitle = line => {
+  var title = '';
+  title = line.replace('## **', '');
+  title = title.replace('**', '');
+  return title;
+};
+
+const parseAmpImg = line => {
+  if (line.includes('alt')) {
+    const altParameter = line.replace(/alt=|"/g, '');
+    return {alt: altParameter};
+  } else if (line.includes('src')) {
+    const srcParameter = line.replace(/src=|"/g, '');
+    return {src: srcParameter};
+  } else if (line.includes('height')) {
+    const heightParameter = line.replace(/height=|"/g, '');
+    return {height: heightParameter};
+  } else if (line.includes('width')) {
+    const widthParameter = line.replace(/width=|"/g, '');
+    return {width: widthParameter};
+  } else if (line.includes('layout')) {
+    const layoutParameter = line.replace(/layout=|"|>/g, '');                             
+  }
+}