make editor can modify all content

editor.js

@@ -66,11 +66,11 @@ function getImgElements(blockDiv) {
   };
 }
 
-function addDataToBlockArray(dataObject, blockArray, index) {
-  if ('data' in blockArray[index]) {
-    blockArray[index].data.push(dataObject)
+function addDataToBlockArray(dataObject, blockArray, blockIndex, dataIndex) {
+  if ('data' in blockArray[blockIndex]) {
+    blockArray[blockIndex].data[dataIndex] = dataObject
   } else {
-    blockArray[index].data = [dataObject];
+    blockArray[blockIndex].data = [dataObject];
   }
   return blockArray;
 }
@@ -101,10 +101,12 @@ function parseMd(content) {
     }
   }
 
-  var blockArray = [];
+  var blockArray = [{title: ''}];
   var blockCount = 0;
-  var parseBlockDiv, index;
-  var pre_img, pre_imgObject;
+  var preDataIndex;
+  var parseBlockDiv, preBlockindex;
+  var preImg, preImgObject;
+  var preImgObject = {'image': {}}
   var isNotFrontMatterCount = 0;
   var isAmpImgRange = false;
   for (const line of content.split('\n')) {
@@ -114,60 +116,71 @@ function parseMd(content) {
       }
       continue;
     }
+
+    if (isAmpImgRange === true) {
+      imgParamObject = parseAmpImg(line);
+      preImgObject.image = {...preImgObject.image, ...imgParamObject};
+      const key = _.get(_.keys(imgParamObject), 0);
+      preImg.setAttribute(key, _.get(imgParamObject, `${key}`));
+      continue;
+    }
+
     if (line.includes('##')) {
-      index = blockCount;
+      var preDataIndex = 0;
+      preBlockindex = blockCount;
       blockCount = blockCount + 1;
       const {blockDiv, h, titleInput, inputButton, descButton, imgButton} = getBlockElements();
       parseBlockDiv = blockDiv;
       const title = parseTitle(line);
       const text = title;
-      blockArray[index] = {'title': text};
+      blockArray[preBlockindex].title = text;
       h.textContent = text;
       inputButton.onclick = function() {
         const text = titleInput.value;
-        blockArray[index] = {'title': text};
+        blockArray[preBlockindex].title = text;
         h.textContent = text;
       }
-    } else if (isAmpImgRange === true) {
+    } else if (line.includes('<amp-img')) {
       if (line.includes('</amp-img>')) {
-        blockArray = addDataToBlockArray({'image': pre_imgObject}, blockArray, index)
+        blockArray = addDataToBlockArray(preImgObject, blockArray, preBlockindex, ownDataIndex)
         isAmpImgRange = false;
-      } else {
-        imgParamObject = parseAmpImg(line);
-        const key = _.get(_.keys(imgParamObject), 0);
-        pre_img.setAttribute(key, _.get(imgParamObject, `${key}`));
+        continue;
       }
-    } else if (line.includes('<amp-img')) {
+      const ownDataIndex = preDataIndex;
+      preDataIndex += 1;
       isAmpImgRange = true;
       const {img, imgInput, widthInput, heightInput, imgInputButton} = getImgElements(parseBlockDiv);
-      pre_img = img;
+      preImg = img;
       imgInputButton.onclick = function() {
-        pre_img.setAttribute('src', imgInput.value);
-        pre_img.setAttribute('width', widthInput.value);
-        pre_img.setAttribute('height', heightInput.value);
-        pre_img.setAttribute('alt', 'image field');
+        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, index)
+        blockArray = addDataToBlockArray(imgObject, blockArray, preBlockindex, ownDataIndex)
       }
     } else {
+      const ownDataIndex = preDataIndex;
+      preDataIndex += 1;
       const {p, descTextArea, descInputButton} = getdescElements(parseBlockDiv);
       const text = line;
       p.textContent = text;
-      blockArray = addDataToBlockArray({description: {text: text}}, blockArray, index)
+      blockArray = addDataToBlockArray({description: {text: text}}, blockArray, preBlockindex, ownDataIndex)
       descInputButton.onclick = function () {
         const text = descTextArea.value;
         p.textContent = text;
-        addDataToBlockArray({description: {text: text}}, blockArray, index)
+        addDataToBlockArray({description: {text: text}}, blockArray, preBlockindex, ownDataIndex)
       }
     }
   }
   return {blockArray: blockArray, blockCount: blockCount}
 }
 
+
 const content = `---
 title: "公仔與爵士鼓"
 date: 2021-02-23T13:18:22+08:00
@@ -192,24 +205,35 @@ const contentDiv = document.getElementsByClassName('ui segment')[0];
 const titleButton = document.getElementById('title_button');
 const submitButton = document.getElementById('submit_button');
 var {blockArray, blockCount} = parseMd(content);
+var dataIndex;
 titleButton.onclick = function() {
-  const index = blockCount;
+  dataIndex = 0;
+  const blockIndex = blockCount;
   blockCount = blockCount + 1;
   const {blockDiv, h, titleInput, inputButton, descButton, imgButton} = getBlockElements();
   inputButton.onclick = function() {
     const text = titleInput.value;
-    blockArray[index] = {'title': text};
-    h.textContent = text;
+    if (blockIndex < blockArray.length) {
+      blockArray[blockIndex].title = text;
+      h.textContent = text;
+    } else {
+      blockArray[blockIndex] = {title: text};
+      h.textContent = text;
+    }
   }
   descButton.onclick = function() {
+    const ownDataIndex = dataIndex;
+    dataIndex += 1;
     const {p, descTextArea, descInputButton} = getdescElements(blockDiv);
     descInputButton.onclick = function() {
       const text = descTextArea.value;
       p.textContent = text;
-      addDataToBlockArray({description: {text: text}}, blockArray, index)
+      addDataToBlockArray({description: {text: text}}, blockArray, blockIndex, ownDataIndex)
     }
   }
   imgButton.onclick = function() {
+    const ownDataIndex = dataIndex;
+    dataIndex += 1;
     const {img, imgInput, widthInput, heightInput, imgInputButton} = getImgElements(blockDiv);
     imgInputButton.onclick = function() {
       img.setAttribute('src', imgInput.value);
@@ -221,7 +245,7 @@ titleButton.onclick = function() {
                                  width: widthInput.value,
                                  alt: 'image field',
                                  layout: 'responsive'}};
-      blockArray = addDataToBlockArray(imgObject, blockArray, index)
+      blockArray = addDataToBlockArray(imgObject, blockArray, blockIndex, ownDataIndex)
     }
   }
 }