bhouse_backstage/editor.js

function addDataToBlockArray(dataObject, blockArray, blockIndex, dataIndex) {
  if ('data' in blockArray[blockIndex]) {
    blockArray[blockIndex].data[dataIndex] = dataObject
  } else {
    blockArray[blockIndex].data = [dataObject];
  }
  return blockArray;
}

function isIndexExistInBlockArray(blockIndex, length) {
  return blockIndex < length;
}


const contentDiv = document.getElementsByClassName('ui segment')[0];
const titleButton = document.getElementById('title_button');
const submitButton = document.getElementById('submit_button');
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(contentDiv);
    inputButton.onclick = function() {
      const text = titleInput.value;
      if (isIndexExistInBlockArray(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);
  }
});