fixing modify input for editor.js

editor.js

@@ -9,12 +9,8 @@ function getBlockElements() {
   input.setAttribute("type", "text");
   const inputButton = document.createElement('button')
   inputButton.textContent = 'Title新增/修改';
-  contentDiv.append(blockDiv);
-  blockDiv.appendChild(h);
-  blockDiv.appendChild(input);
-  blockDiv.appendChild(inputButton);
-  blockDiv.appendChild(descButton);
-  blockDiv.appendChild(imgButton);
+  contentDiv.appendChild(blockDiv);
+  blockDiv.append(h, input, inputButton, descButton, imgButton);
   return {
     blockDiv: blockDiv,
     h: h,
@@ -25,17 +21,15 @@ function getBlockElements() {
   };
 }
 
-function getdescElements(blockDiv){
+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新增/修改';
-  descDiv.appendChild(p);
-  descDiv.appendChild(descTextArea);
-  descDiv.appendChild(descInputButton);
   blockDiv.appendChild(descDiv);
+  descDiv.append(p, descTextArea, descInputButton);
   return {
     p: p,
     descTextArea: descTextArea,
@@ -51,12 +45,8 @@ function getImgElements(blockDiv) {
   const heightInput = document.createElement("INPUT");
   const imgInputButton = document.createElement('button');
   imgInputButton.textContent = 'Image新增/修改';
-  imgDiv.appendChild(img);
-  imgDiv.appendChild(imgInput);
-  imgDiv.appendChild(widthInput);
-  imgDiv.appendChild(heightInput);
-  imgDiv.appendChild(imgInputButton);
   blockDiv.appendChild(imgDiv);
+  imgDiv.append(img, imgInput, widthInput, heightInput, imgInputButton);
   return {
     img: img,
     imgInput: imgInput,
@@ -102,9 +92,9 @@ function parseMd(content) {
   }
 
   var blockArray = [{title: ''}];
-  var blockCount = 0;
-  var preDataIndex;
-  var parseBlockDiv, preBlockindex;
+  var blockCount;
+  var preDataIndex, imgDataIndex;
+  var parseBlockDiv;
   var preImg, preImgObject;
   var preImgObject = {'image': {}}
   var isNotFrontMatterCount = 0;
@@ -117,7 +107,7 @@ function parseMd(content) {
       continue;
     }
 
-    if (isAmpImgRange === true) {
+    if (isAmpImgRange === true && !(line.includes('</amp-img>'))) {
       imgParamObject = parseAmpImg(line);
       preImgObject.image = {...preImgObject.image, ...imgParamObject};
       const key = _.get(_.keys(imgParamObject), 0);
@@ -127,26 +117,27 @@ function parseMd(content) {
 
     if (line.includes('##')) {
       var preDataIndex = 0;
-      preBlockindex = blockCount;
-      blockCount = blockCount + 1;
+      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;
+      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')) {
+    } else if (line.includes('amp-img')) {
+      const preBlockindex = blockCount;
       if (line.includes('</amp-img>')) {
-        blockArray = addDataToBlockArray(preImgObject, blockArray, preBlockindex, ownDataIndex)
+        blockArray = addDataToBlockArray(preImgObject, blockArray, preBlockindex, imgDataIndex)
         isAmpImgRange = false;
         continue;
       }
-      const ownDataIndex = preDataIndex;
+      imgDataIndex = preDataIndex;
       preDataIndex += 1;
       isAmpImgRange = true;
       const {img, imgInput, widthInput, heightInput, imgInputButton} = getImgElements(parseBlockDiv);
@@ -161,9 +152,10 @@ function parseMd(content) {
                                    width: widthInput.value,
                                    alt: 'image field',
                                    layout: 'responsive'}};
-        blockArray = addDataToBlockArray(imgObject, blockArray, preBlockindex, ownDataIndex)
+        blockArray = addDataToBlockArray(imgObject, blockArray, preBlockindex, imgDataIndex)
       }
     } else {
+      const preBlockindex = blockCount;
       const ownDataIndex = preDataIndex;
       preDataIndex += 1;
       const {p, descTextArea, descInputButton} = getdescElements(parseBlockDiv);
@@ -181,93 +173,78 @@ function parseMd(content) {
 }
 
 
-const content = `---
-title: "公仔與爵士鼓"
-date: 2021-02-23T13:18:22+08:00
-draft: false
-type: "collection"
-url: "/collection/doll_and_drum_set"
-image: "https://image-cdn-flare.qdm.cloud/q57568769580e2/image/data/2020/11/09/7f6087c94211080bfe2edfb0180891a7.jpg"
-description: "很喜歡現代風格居家設計，利用大理石紋路牆面作為客廳的......"
----
-## **空間主人｜公仔控 \- 陳氏夫妻檔**\n\
-\n\
-初次見到陳先生，其實在心裡偷偷覺得，他好像有點嚴肅、不太笑，跟我們打個招呼後，就趕著出門上課了，但實際上多相處後才發現，「外冷內熱」比較貼近真實的他。
-<amp-img
-alt="小寶優居"
-src="https://image-cdn-flare.qdm.cloud/q57568769580e2/image/data/2020/11/10/7200f7c668635a2ef399723c5410ca90.jpg"
-height="340"
-width="604"
-layout="responsive">
-</amp-img>
-`
 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() {
-  dataIndex = 0;
-  const blockIndex = blockCount;
-  blockCount = blockCount + 1;
-  const {blockDiv, h, titleInput, inputButton, descButton, imgButton} = getBlockElements();
-  inputButton.onclick = function() {
-    const text = titleInput.value;
-    if (blockIndex < blockArray.length) {
-      blockArray[blockIndex].title = text;
-      h.textContent = text;
-    } else {
-      blockArray[blockIndex] = {title: text};
-      h.textContent = text;
+axios.get('/公仔與爵士鼓.md').then(function(response) {
+  const content = response.data;
+  var {blockArray, blockCount} = parseMd(content);
+  var dataIndex;
+  titleButton.onclick = function() {
+    dataIndex = 0;
+    const blockIndex = blockCount;
+    blockCount = blockCount + 1;
+    const {blockDiv, h, titleInput, inputButton, descButton, imgButton} = getBlockElements();
+    inputButton.onclick = function() {
+      const text = titleInput.value;
+      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, blockIndex, ownDataIndex)
+    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, 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);
-      img.setAttribute('width', widthInput.value);
-      img.setAttribute('height', heightInput.value);
-      img.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, 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);
+        img.setAttribute('width', widthInput.value);
+        img.setAttribute('height', heightInput.value);
+        img.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, blockIndex, ownDataIndex)
+      }
     }
   }
-}
-submitButton.onclick = function() {
-  var mdContent = '';
-  for (var idx=0; idx<blockArray.length; idx++) {
-    mdContent += `## **${_.get(blockArray[idx], 'title', '')}**\n`
-    for (var data of _.get(blockArray[idx], 'data', [])) {
-      if (_.get(_.keys(data), 0) === 'description') {
-        mdContent += _.get(data, 'description.text', '') + '\n';
-      } else if (_.get(_.keys(data), 0) === 'image') {
-        ampImgForm = `<amp-img\
-        \n  alt="${_.get(data, 'image.alt', '小寶優居')}"\
-        \n  src="${_.get(data, 'image.src', '')}"\
-        \n  height="${_.get(data, 'image.height', 300)}"\
-        \n  width="${_.get(data, 'image.width', 400)}"\
-        \n  layout="${_.get(data, 'image.layout', 'responsive')}>"\
-        \n</amp-img>`;
-        mdContent += ampImgForm;
-      }
-    } 
+
+  submitButton.onclick = function() {
+    var mdContent = '';
+    for (var idx=0; idx<blockArray.length; idx++) {
+      mdContent += `## **${_.get(blockArray[idx], 'title', '')}**\n`
+      for (var data of _.get(blockArray[idx], 'data', [])) {
+        if (_.get(_.keys(data), 0) === 'description') {
+          mdContent += _.get(data, 'description.text', '') + '\n';
+        } else if (_.get(_.keys(data), 0) === 'image') {
+          ampImgForm = `<amp-img\
+          \n  alt="${_.get(data, 'image.alt', '小寶優居')}"\
+          \n  src="${_.get(data, 'image.src', '')}"\
+          \n  height="${_.get(data, 'image.height', 300)}"\
+          \n  width="${_.get(data, 'image.width', 400)}"\
+          \n  layout="${_.get(data, 'image.layout', 'responsive')}>"\
+          \n</amp-img>`;
+          mdContent += ampImgForm;
+        }
+      } 
+    }
+    console.log(mdContent);
+    console.log(blockArray);
   }
-  console.log(mdContent);
-  console.log(blockArray);
-}
+
+});