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.appendChild(blockDiv);
  blockDiv.append(h, input, inputButton, descButton, 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新增/修改';
  blockDiv.appendChild(descDiv);
  descDiv.append(p, descTextArea, descInputButton);
  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新增/修改';
  blockDiv.appendChild(imgDiv);
  imgDiv.append(img, imgInput, widthInput, heightInput, imgInputButton);
  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;
  var preDataIndex, imgDataIndex;
  var parseBlockDiv;
  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 && !(line.includes('</amp-img>'))) {
      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;
      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};
      h.textContent = text;
      inputButton.onclick = function() {
        const text = titleInput.value;
        blockArray[preBlockindex].title = text;
        h.textContent = text;
      }
    } else if (line.includes('amp-img')) {
      const preBlockindex = blockCount;
      if (line.includes('</amp-img>')) {
        blockArray = addDataToBlockArray(preImgObject, blockArray, preBlockindex, imgDataIndex)
        isAmpImgRange = false;
        continue;
      }
      imgDataIndex = 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, imgDataIndex)
      }
    } else {
      const preBlockindex = blockCount;
      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 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();
    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);
  }

});