add remove image features

backstage/static/js/editor.js

@@ -32,7 +32,7 @@ axios.get(contentApiUrl).then(({ data }) => {
         blockArray[blockIndex].title = text;
         h.textContent = text;
       } else {
-        blockArray[blockIndex] = {title: text};
+        blockArray[blockIndex] = {title: text, data: []};
         h.textContent = text;
       }
     }
@@ -47,7 +47,7 @@ axios.get(contentApiUrl).then(({ data }) => {
     imgButton.onclick = function() {
       const imgDataIndex = dataIndex;
       dataIndex += 1;
-      const {img, imgInput, widthInput, heightInput, imgInputButton} = getImgElements(blockDiv);
+      const {img, imgInput, widthInput, heightInput, imgInputButton, imgRemoveButton} = getImgElements(blockDiv);
       imgInputButton.onclick = function() {
         const imgObject = {image: {src: 'img/' + imgInput.files[0].name,
                                    height: heightInput.value,
@@ -56,6 +56,10 @@ axios.get(contentApiUrl).then(({ data }) => {
                                    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);
+      }
     }
   }
 

backstage/static/js/parsers.js

@@ -1,6 +1,6 @@
 function parseMd(content) {
   var frontMatters = [];
-  var blockArray = [{title: ''}];
+  var blockArray = [{title: '', data: []}];
   var blockCount;
   var preDataIndex;
   var parseBlockDiv;
@@ -56,7 +56,7 @@ function parseMd(content) {
       }
       imgButton.onclick = function() {
         const imgDataIndex = blockArray[preBlockindex].data.length;
-        const {img, imgInput, widthInput, heightInput, imgInputButton} = getImgElements(blockDiv);
+        const {img, imgInput, widthInput, heightInput, imgInputButton, imgRemoveButton} = getImgElements(blockDiv);
         imgInputButton.onclick = function() {
           const imgObject = {image: {src: 'img/' + imgInput.files[0].name,
                                      height: heightInput.value,
@@ -65,6 +65,10 @@ function parseMd(content) {
                                      layout: 'responsive'}};
           blockArray = handleImgInputClick(img, imgObject, blockArray, preBlockindex, imgDataIndex, url);
         }
+        imgRemoveButton.onclick = function() {
+          removeImgElement(img, imgInput, widthInput, heightInput, imgInputButton, imgRemoveButton);
+          blockArray = removeImgData(blockArray, preBlockindex, imgDataIndex);
+        }
       }
     } else if (line.includes('amp-img')) {
       const preBlockindex = blockCount;
@@ -77,7 +81,7 @@ function parseMd(content) {
       const imgDataIndex = preDataIndex;
       preDataIndex += 1;
       isAmpImgRange = true;
-      const {img, imgInput, widthInput, heightInput, imgInputButton} = getImgElements(parseBlockDiv);
+      const {img, imgInput, widthInput, heightInput, imgInputButton, imgRemoveButton} = getImgElements(parseBlockDiv);
       preImg = img;
       imgInputButton.onclick = function() {
         const imgObject = {image: {src: 'img/' + imgInput.files[0].name,
@@ -87,6 +91,10 @@ function parseMd(content) {
                                    layout: 'responsive'}};
         blockArray = handleImgInputClick(img, imgObject, blockArray, preBlockindex, imgDataIndex, url);
       }
+      imgRemoveButton.onclick = function() {
+        removeImgElement(img, imgInput, widthInput, heightInput, imgInputButton, imgRemoveButton);
+        blockArray = removeImgData(blockArray, preBlockindex, imgDataIndex);
+      }
     } else {
       if (parseBlockDiv === undefined){
         // for skipping space before first title

backstage/static/js/utils.js

@@ -0,0 +1,13 @@
+function removeImgElement(img, input, widthInput, heightInput, inputButton, removeButton) {
+  img.remove();
+  input.remove();
+  widthInput.remove();
+  heightInput.remove();
+  inputButton.remove();
+  removeButton.remove();
+}
+
+function removeImgData(blockArray, blockIndex, dataIndex) {
+  blockArray[blockIndex].data.splice(dataIndex, 1);
+  return blockArray;
+}

backstage/templates/editor.html

@@ -10,6 +10,7 @@
         <button id='submit_button'>Submit</button>
         <script type="text/json" id="url">{"url": "{{ url }}"}</script>
         <script type="text/javascript" src="{{url_for('static', filename='config.js')}}"></script>
+        <script type="text/javascript" src="{{url_for('static', filename='js/utils.js')}}"></script>
         <script type="text/javascript" src="{{url_for('static', filename='js/blockElements.js')}}"></script>
         <script type="text/javascript" src="{{url_for('static', filename='js/parsers.js')}}"></script>
         <script type="text/javascript" src="{{url_for('static', filename='js/editor.js')}}"></script>