Add delete button for history entries (#90)

Author: lucasbbsdk

index.html

@@ -49,6 +49,15 @@
           data-name="displayHistory"
           data-value="true">
       </label>
+      <label>
+        Display delete button on formula history:
+        <input
+          type="checkbox"
+          class="option"
+          data-name="displayDeleteButtonOnHistory"
+          data-value="true">
+      </label>
+
     </main>
 
     <footer>

mathquill4quill.css

@@ -52,9 +52,25 @@
   overflow: auto;
 }
 
+.mathquill4quill-history-container-with-delete-button {
+  width: 318px;
+}
+
 .mathquill4quill-latex-input {
   visibility: hidden !important;
   padding: 0 !important;
   border: 0 !important;
   width: 0 !important;
 }
+
+.mathquill4quill-history-delete-button::after {
+  display: inline-block;
+  content: "\00d7";
+  padding: 7px;
+  cursor: pointer;
+}
+
+.mathquill4quill-history-inner-container {
+  display: flex;
+  justify-content: space-between;
+}

mathquill4quill.js

@@ -97,6 +97,15 @@ window.mathquill4quill = function(dependencies) {
       }
     }
 
+    function removeItemFromHistoryList(array, index) {
+      array.splice(index, 1);
+      try {
+        localStorage.setItem(historyCacheKey, JSON.stringify(array));
+      } catch (e) {
+        // eslint-disable-line no-empty
+      }
+    }
+
     function getTooltip() {
       return quill.container.getElementsByClassName("ql-tooltip")[0];
     }
@@ -277,8 +286,25 @@ window.mathquill4quill = function(dependencies) {
         button.setAttribute("class", "mathquill4quill-history-button");
       }
 
-      function applyHistoryContainerStyles(container) {
-        container.setAttribute("class", "mathquill4quill-history-container");
+      function applyHistoryInnerContainerStyles(container) {
+        container.setAttribute(
+          "class",
+          "mathquill4quill-history-inner-container"
+        );
+      }
+
+      function applyHistoryDeleteButtonStyles(button) {
+        button.setAttribute("class", "mathquill4quill-history-delete-button");
+        button.setAttribute("title", "Delete");
+        button.setAttribute("role", "button");
+      }
+
+      function applyHistoryContainerStyles(container, withDeleteButton) {
+        let className = "mathquill4quill-history-container";
+        if (withDeleteButton) {
+          className += " mathquill4quill-history-container-with-delete-button";
+        }
+        container.setAttribute("class", className);
       }
 
       function createHistoryButton(latex, mqField) {
@@ -308,15 +334,30 @@ window.mathquill4quill = function(dependencies) {
 
           historyDiv = document.createElement("div");
           let container = document.createElement("div");
-          applyHistoryContainerStyles(container);
+          applyHistoryContainerStyles(container, displayDeleteButtonOnHistory);
           let header = document.createElement("p");
           header.innerHTML = "Past formulas (max " + historySize + ")";
           historyDiv.appendChild(header);
 
           history.forEach(element => {
             const button = createHistoryButton(element, mqField);
             applyHistoryButtonStyles(button);
-            container.appendChild(button);
+            if (displayDeleteButtonOnHistory) {
+              const innerContainer = document.createElement("div");
+              applyHistoryInnerContainerStyles(innerContainer);
+              const deleteButton = document.createElement("div");
+              applyHistoryDeleteButtonStyles(deleteButton);
+              deleteButton.addEventListener("click", () => {
+                innerContainer.remove();
+                const index = history.indexOf(element);
+                removeItemFromHistoryList(history, index);
+              });
+              innerContainer.appendChild(button);
+              innerContainer.appendChild(deleteButton);
+              container.appendChild(innerContainer);
+            } else {
+              container.appendChild(button);
+            }
           });
           historyDiv.appendChild(container);
           tooltip.appendChild(historyDiv);
@@ -357,6 +398,8 @@ window.mathquill4quill = function(dependencies) {
     let historyList = fetchHistoryList(historyCacheKey);
     const historySize = options.historySize || 10;
     const displayHistory = options.displayHistory || false;
+    const displayDeleteButtonOnHistory =
+      options.displayDeleteButtonOnHistory || false;
 
     const mqInput = newMathquillInput();
     const operatorButtons = newOperatorButtons();

reactjs/src/index.js

@@ -19,16 +19,24 @@ const CUSTOM_OPERATORS = [
 function Index() {
   const [operators, setOperators] = useState([]);
   const [displayHistory, setDisplayHistory] = useState(false);
+  const [
+    displayDeleteButtonOnHistory,
+    setDisplayDeleteButtonOnHistory
+  ] = useState(false);
 
   const toggleDisplayHistory = event => {
     setDisplayHistory(event.target.checked);
   };
 
+  const toggleDisplayDeleteOnHistory = event => {
+    setDisplayDeleteButtonOnHistory(event.target.checked);
+  };
+
   const toggleOperators = event => {
     setOperators(event.target.checked ? CUSTOM_OPERATORS : []);
   };
 
-  const options = { displayHistory, operators };
+  const options = { displayHistory, operators, displayDeleteButtonOnHistory };
 
   return (
     <main className="demo-container">
@@ -47,6 +55,14 @@ function Index() {
           onChange={toggleDisplayHistory}
         />
       </label>
+      <label>
+        Display delete button on formula history:
+        <input
+          type="checkbox"
+          className="option"
+          onChange={toggleDisplayDeleteOnHistory}
+        />
+      </label>
 
       <footer>
         <a href="https://github.com/c-w/mathquill4quill">

tests/deleteButton.test.js

@@ -0,0 +1,39 @@
+/* eslint-disable no-undef */
+/* eslint-env node */
+
+module.exports = {
+  "Is the formula editor visible": function(browser) {
+    browser
+      .useXpath()
+      .url(
+        "http://localhost:8000/?&operators=true&displayHistory=true&displayDeleteButtonOnHistory=true"
+      )
+      .waitForElementVisible('//*[@id="editor"]')
+      .click('//button[@class="ql-formula"]')
+      .waitForElementVisible('//div[@data-mode="formula"]');
+  },
+  "Is delete button working": function(browser) {
+    browser
+      .useXpath()
+      .click('//button[@data-value="\\sqrt"]')
+      .waitForElementVisible('//span[@class="mq-scaled mq-sqrt-prefix"]')
+      .click('//a[@class="ql-action"]')
+      .waitForElementVisible('//span[@class="ql-formula"]')
+      .click('//button[@class="ql-formula"]')
+      .useCss()
+      .waitForElementVisible(".mathquill4quill-history-container")
+      .execute(
+        function() {
+          document
+            .querySelector(".mathquill4quill-history-delete-button")
+            .click();
+          return document.querySelector(".mathquill4quill-history-button");
+        },
+        [],
+        function(result) {
+          this.assert.equal(result.value, null);
+        }
+      )
+      .end();
+  }
+};