refactor: extract handling button action and loading markdown to loadDataToBlock

backstage/static/js/editor.js

@@ -1,71 +1,17 @@
-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.getElementById('editor_block');
 const titleButton = document.getElementById('title_button');
 const submitButton = document.getElementById('submit_button');
 const contentApiUrl = `${PORTAL_SERVER}contents?url=${(JSON.parse(document.getElementById('url').textContent)).url}`
 axios.get(contentApiUrl).then(({ data }) => {
   const content = _.get(data, '0.content', '');
-  const url = 'http://localhost:1313' + (JSON.parse(document.getElementById('url').textContent)).url + '/';
-  var {frontMatters, blockArray, blockCount} = parseMd(content)
-  var dataIndex;
+  var blockArray = [{title: '', data: []}];
+  var blockCount = 0;
+  const {frontMatters, preBlockArray}  = parseMd(content);
+  for (var blockData of preBlockArray) {
+    blockCount = loadDataToBlock(blockArray, blockCount, blockData);
+  }
   titleButton.onclick = function() {
-    dataIndex = 0;
-    blockCount = blockCount + 1 | 0;
-    const blockIndex = blockCount;
-    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, data: []};
-        h.textContent = text;
-      }
-    }
-    descButton.onclick = function() {
-      const ownDataIndex = dataIndex;
-      dataIndex += 1;
-      const {p, descTextArea, descInputButton, descRemoveButton} = getdescElements(blockDiv);
-      descInputButton.onclick = function() {
-        blockArray = handleDescInputClick(p, descTextArea.value, blockArray, blockIndex, ownDataIndex);
-      }
-      descRemoveButton.onclick = function() {
-        removeDescElement(p, descTextArea, descInputButton, descRemoveButton);
-        removeDescData(blockArray, blockIndex, ownDataIndex);
-      }
-    }
-    imgButton.onclick = function() {
-      const imgDataIndex = dataIndex;
-      dataIndex += 1;
-      const {img, imgInput, widthInput, heightInput, imgInputButton, imgRemoveButton} = getImgElements(blockDiv);
-      imgInputButton.onclick = function() {
-        const imgObject = {image: {src: 'img/' + imgInput.files[0].name,
-                                   height: heightInput.value,
-                                   width: widthInput.value,
-                                   alt: 'image field',
-                                   layout: 'responsive'}};
-        blockArray = handleImgInputClick(img, imgObject, blockArray, blockIndex, imgDataIndex, url);
-      }
-      imgRemoveButton.onclick = function() {
-        removeImgElement(img, imgInput, widthInput, heightInput, imgInputButton, imgRemoveButton);
-        blockArray = removeImgData(
-          blockArray, blockIndex, imgDataIndex, (JSON.parse(document.getElementById('url').textContent)).url);
-      }
-    }
+    blockCount = loadDataToBlock(blockArray, blockCount);
   }
 
   submitButton.onclick = function() {