fix(ui): HyperMD editor not properly removed

Author: mvegter

lib/public/utilities/removeElement.js

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE O2. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-o2.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+/**
+ * Removes an element by selector from the DOM.
+ *
+ * @param {*} selector A DOMString containing one or more selectors to match.
+ * @returns {undefined}
+ */
+const removeElement = (selector) => {
+    // eslint-disable-next-line no-undef
+    const element = document.querySelector(selector);
+    if (element === null) {
+        // No need to remove something that doesn't exists
+        return;
+    }
+
+    element.parentNode.removeChild(element);
+};
+
+export { removeElement };

lib/public/views/Logs/Create/index.js

@@ -20,9 +20,7 @@ import errorAlert from '../../../components/common/errorAlert.js';
  * @param {String} text The text to be set to the preview
  * @returns {vnode} returns the preview node
  */
-const mdBox = (model, text) => h('', {
-    onremove: () => model.logs.flushModel(),
-}, [
+const mdBox = (model, text) => h('', [
     h('textarea#text.form-control', {
         placeholder: 'Your message...',
         disabled: true,
@@ -52,10 +50,12 @@ const createScreen = (model) => {
 
     return h('div#create-log', [
         data.isFailure() && data.payload.map(errorAlert),
-        h('', [
+        h('', {
+            onremove: () => model.logs.flushModel(),
+        }, [
             h('h2.mv2', 'Create Log'),
             h('h3.black.line-break: auto', 'Title of the log'),
-            h('input#title', {
+            h('input#title.w-100', {
                 placeholder: 'Enter the title of the log entry...',
                 minlength: 3,
                 maxlength: 140,
@@ -72,4 +72,4 @@ const createScreen = (model) => {
     ]);
 };
 
-export default (model) => [createScreen(model)];
+export default (model) => createScreen(model);

lib/public/views/Logs/Logs.js

@@ -13,6 +13,7 @@
 
 import { Observable, RemoteData, fetchClient } from '/js/src/index.js';
 import { setMarkDownBox } from '../../components/common/markdown.js';
+import { removeElement } from '../../utilities/removeElement.js';
 
 /**
  * Model representing handlers for homePage.js
@@ -375,6 +376,9 @@ export default class Overview extends Observable {
         this.editors = [];
         this.collapsedColumns = [];
         this.isCollapsed = false;
+
+        // Remove trailing CodeMirror div(s)
+        removeElement('.CodeMirror');
     }
 
     /**