Added UI tests for all HTML operations

src/core/operations/FrequencyDistribution.mjs

@@ -91,7 +91,7 @@ Number of bytes not represented: ${256 - freq.bytesRepresented}
 
 <script>
     var canvas = document.getElementById("chart-area"),
-        parentRect = canvas.parentNode.getBoundingClientRect(),
+        parentRect = canvas.closest(".cm-scroller").getBoundingClientRect(),
         scores = ${JSON.stringify(freq.percentages)};
 
     canvas.width = parentRect.width * 0.95;

src/core/operations/ShowOnMap.mjs

@@ -90,7 +90,20 @@ class ShowOnMap extends Operation {
             leafletUrl = "https://unpkg.com/leaflet@1.5.0/dist/leaflet.js",
             leafletCssUrl = "https://unpkg.com/leaflet@1.5.0/dist/leaflet.css";
         return `<link rel="stylesheet" href="${leafletCssUrl}" crossorigin=""/>
-<style>#output-html { white-space: normal; padding: 0; }</style>
+<style>
+    #output-text .cm-content,
+    #output-text .cm-line,
+    #output-html {
+        display: block;
+        white-space: normal;
+        padding: 0;
+        height: 100%;
+    }
+    #output-text .cm-line .cm-widgetBuffer,
+    #output-text .cm-line br {
+        display: none;
+    }
+</style>
 <div id="presentedMap" style="width: 100%; height: 100%;"></div>
 <script type="text/javascript">
 var mapscript = document.createElement('script');

src/core/operations/TranslateDateTimeFormat.mjs

@@ -24,7 +24,7 @@ class TranslateDateTimeFormat extends Operation {
         this.description = "Parses a datetime string in one format and re-writes it in another.<br><br>Run with no input to see the relevant format string examples.";
         this.infoURL = "https://momentjs.com/docs/#/parsing/string-format/";
         this.inputType = "string";
-        this.outputType = "string";
+        this.outputType = "html";
         this.args = [
             {
                 "name": "Built in formats",
@@ -58,7 +58,7 @@ class TranslateDateTimeFormat extends Operation {
     /**
      * @param {string} input
      * @param {Object[]} args
-     * @returns {string}
+     * @returns {html}
      */
     run(input, args) {
         const [inputFormat, inputTimezone, outputFormat, outputTimezone] = args.slice(1);
@@ -71,7 +71,7 @@ class TranslateDateTimeFormat extends Operation {
             return `Invalid format.\n\n${FORMAT_EXAMPLES}`;
         }
 
-        return date.tz(outputTimezone).format(outputFormat);
+        return date.tz(outputTimezone).format(outputFormat.replace(/[<>]/g, ""));
     }
 
 }

src/web/stylesheets/layout/_io.css

@@ -14,6 +14,11 @@
     margin: 0;
     background-color: transparent;
     overflow: hidden;
+    user-select: auto;
+}
+
+#output-html {
+    user-select: auto;
 }
 
 .cm-editor {