add editor js with parsing markdown content normally and adding new title, description, image

editor.html

@@ -23,7 +23,6 @@
         <button id='title_button'>Title</button>
       </div>
       <div class="ui segment">
-
       </div>
       <button id='submit_button'>Submit</button>
     </div>

editor.js

@@ -0,0 +1,249 @@
+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.append(blockDiv);
+  blockDiv.appendChild(h);
+  blockDiv.appendChild(input);
+  blockDiv.appendChild(inputButton);
+  blockDiv.appendChild(descButton);
+  blockDiv.appendChild(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新增/修改';
+  descDiv.appendChild(p);
+  descDiv.appendChild(descTextArea);
+  descDiv.appendChild(descInputButton);
+  blockDiv.appendChild(descDiv);
+  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新增/修改';
+  imgDiv.appendChild(img);
+  imgDiv.appendChild(imgInput);
+  imgDiv.appendChild(widthInput);
+  imgDiv.appendChild(heightInput);
+  imgDiv.appendChild(imgInputButton);
+  blockDiv.appendChild(imgDiv);
+  return {
+    img: img,
+    imgInput: imgInput,
+    widthInput: widthInput,
+    heightInput: heightInput,
+    imgInputButton: imgInputButton
+  };
+}
+
+function addDataToBlockArray(dataObject, blockArray, index) {
+  if ('data' in blockArray[index]) {
+    blockArray[index].data.push(dataObject)
+  } else {
+    blockArray[index].data = [dataObject];
+  }
+  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 = [];
+  var blockCount = 0;
+  var parseBlockDiv, index;
+  var pre_img, pre_imgObject;
+  var isNotFrontMatterCount = 0;
+  var isAmpImgRange = false;
+  for (const line of content.split('\n')) {
+    if (isNotFrontMatterCount < 2) {
+        if (line.includes('---')) {
+        isNotFrontMatterCount += 1;
+      }
+      continue;
+    }
+    if (line.includes('##')) {
+      index = 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};
+      h.textContent = text;
+      inputButton.onclick = function() {
+        const text = titleInput.value;
+        blockArray[index] = {'title': text};
+        h.textContent = text;
+      }
+    } else if (isAmpImgRange === true) {
+      if (line.includes('</amp-img>')) {
+        blockArray = addDataToBlockArray({'image': pre_imgObject}, blockArray, index)
+        isAmpImgRange = false;
+      } else {
+        imgParamObject = parseAmpImg(line);
+        const key = _.get(_.keys(imgParamObject), 0);
+        pre_img.setAttribute(key, _.get(imgParamObject, `${key}`));
+      }
+    } else if (line.includes('<amp-img')) {
+      isAmpImgRange = true;
+      const {img, imgInput, widthInput, heightInput, imgInputButton} = getImgElements(parseBlockDiv);
+      pre_img = 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');
+        const imgObject = {image: {src: imgInput.value,
+                                   height: heightInput.value,
+                                   width: widthInput.value,
+                                   alt: 'image field',
+                                   layout: 'responsive'}};
+        blockArray = addDataToBlockArray(imgObject, blockArray, index)
+      }
+    } else {
+      const {p, descTextArea, descInputButton} = getdescElements(parseBlockDiv);
+      const text = line;
+      p.textContent = text;
+      blockArray = addDataToBlockArray({description: {text: text}}, blockArray, index)
+      descInputButton.onclick = function () {
+        const text = descTextArea.value;
+        p.textContent = text;
+        addDataToBlockArray({description: {text: text}}, blockArray, index)
+      }
+    }
+  }
+  return {blockArray: blockArray, blockCount: blockCount}
+}
+
+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);
+titleButton.onclick = function() {
+  const index = 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;
+  }
+  descButton.onclick = function() {
+    const {p, descTextArea, descInputButton} = getdescElements(blockDiv);
+    descInputButton.onclick = function() {
+      const text = descTextArea.value;
+      p.textContent = text;
+      addDataToBlockArray({description: {text: text}}, blockArray, index)
+    }
+  }
+  imgButton.onclick = function() {
+    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, index)
+    }
+  }
+}
+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);
+}