bhouse_backstage/editor.js

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, blockIndex, dataIndex) {
  if ('data' in blockArray[blockIndex]) {
    blockArray[blockIndex].data[dataIndex] = dataObject
  } else {
    blockArray[blockIndex].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 = [{title: ''}];
  var blockCount = 0;
  var preDataIndex;
  var parseBlockDiv, preBlockindex;
  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) {
      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;
      preBlockindex = blockCount;
      blockCount = blockCount + 1;
      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')) {
      if (line.includes('</amp-img>')) {
        blockArray = addDataToBlockArray(preImgObject, blockArray, preBlockindex, ownDataIndex)
        isAmpImgRange = false;
        continue;
      }
      const ownDataIndex = 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, 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, 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 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;
    }
  }
  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)
    }
  }
}
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);
}