feat: added markdown preview in the detail view

Author: john-ghatas

lib/public/components/Post/index.js

@@ -69,24 +69,34 @@ const replyButton = (model, post) => h('a.btn.btn-primary', {
  * @param {Boolean} highlight indicator if this post should be highlighted
  * @return {vnode} Returns a post
  */
-const entry = (model, post, index, highlight) => h(`.w-100.flex-row.shadow-level1${highlight ? '.bg-success' : ''}`, {
-    id: `post${index}`,
-    style: {
-        margin: '5px',
-    },
-}, [
-    h('.w-20.shadow-level', { style: { padding: '10px' } }, [
-        h('table', [
-            h('tbody', Object.entries(ACTIVE_FIELDS).map(([key, { name, format, visible }]) => visible && h('tr', [
-                h('td', { style: { 'text-align': 'right', 'font-weight': 'bold' } }, `${name}:`),
-                h('td', post[key] ? format ? format(post[key]) : post[key] : 'None'),
-            ]))),
+const entry = (model, post, index, highlight) =>
+    h('.w-100.flex-row.shadow-level1', {
+        id: `post${index}`,
+        style: {
+            margin: '5px',
+        },
+    }, [
+        h(`.w-20.shadow-level1${highlight && '.bg-gray-light'}`, {
+            style: { padding: '10px' },
+        }, [
+            h('table', [
+                h('tbody', Object.entries(ACTIVE_FIELDS).map(([key, { name, format, visible }]) => visible && h('tr', [
+                    h('td', { style: { 'text-align': 'right', 'font-weight': 'bold' } }, `${name}:`),
+                    h('td', post[key] && format ? format(post[key]) : post[key] || 'None'),
+                ]))),
+            ]),
+        ]),
+        h('.w-80.shadow-level1', { style: { padding: '10px' } }, [
+            h('h4', post.title, replyButton(model, post)),
+            h(`textarea.w-100#post-content${index}`, {
+                oninit: () => {
+                    const eventHandler = { location: '', name: '' };
+                    const readOnlyProps = { isReadOnly: true, textValue: post.text };
+                    model.logs.clearSingleEditor();
+                    model.logs.setMarkdownBox(`post-content${index}`, eventHandler, readOnlyProps, true);
+                },
+            }, post.text),
         ]),
-    ]),
-    h('.w-80.shadow-level1', { style: { padding: '10px' } }, [
-        h('h4', post.title, replyButton(model, post)),
-        h('.w-100#post-content', post.text),
-    ]),
-]);
+    ]);
 
 export default entry;

lib/public/components/common/markdown.js

@@ -1,5 +1,3 @@
-const defaultSize = { width: '80rem', height: '40rem' };
-
 /**
  * A function to switch to HyperMD
  * @param {String} textAreaId The Id for the text area
@@ -10,21 +8,24 @@ const defaultSize = { width: '80rem', height: '40rem' };
  * @returns {vnode} The converted editor
  */
 const setMarkDownBox = (textAreaId, model,
-    changeHandler = { location: '', name: '' }, readOnly = false, size = { ...defaultSize }) => {
+    changeHandler = { location: '', name: '' }, readOnly, size) => {
     const { HyperMD } = model;
     const { location, name } = changeHandler;
     // eslint-disable-next-line no-undef
     const textArea = document.getElementById(textAreaId);
-    const editor = HyperMD.fromTextArea(textArea, {
-        hmdModeLoader: '../../assets/SmartEditor/codemirror',
-        readOnly: readOnly,
-    });
-    editor.setSize(size.width, size.height);
-    if (name && location) {
-        editor.on('change', (cm) =>
-            model[location][name](cm.getValue()));
+    if (textArea) {
+        const editor = HyperMD.fromTextArea(textArea, {
+            hmdModeLoader: '../../assets/SmartEditor/codemirror',
+            readOnly: readOnly,
+            lineNumbers: !readOnly,
+        });
+        editor.setSize(size.width, size.height);
+        if (name && location) {
+            editor.on('change', (cm) =>
+                model[location][name](cm.getValue()));
+        }
+        return editor;
     }
-    return editor;
 };
 
 export { setMarkDownBox };

lib/public/utilities/scrollTo.js

@@ -11,20 +11,33 @@
  * or submit itself to any jurisdiction.
  */
 
+/**
+ * Scroll to the position in the window
+ * @param {Number} x The x value
+ * @param {Number} y The y value
+ * @returns {undefined}
+ */
+const scrollToPosition = (x, y) => {
+    // eslint-disable-next-line no-undef
+    window.scrollTo(x, y);
+};
+
 /**
  * Scrolls to a particular selector in the document.
  *
  * @param {*} selector A DOMString containing one or more selectors to match.
+ * @param {Number} timeout The timeout for the function to execute
  * @returns {undefined}
  */
-const scrollTo = (selector) => {
+const scrollTo = (selector, timeout = 0) => {
     // eslint-disable-next-line no-undef
     const element = document.querySelector(selector);
     const x = 0;
     const y = element === null || isNaN(element.offsetTop) ? 0 : element.offsetTop;
 
-    // eslint-disable-next-line no-undef
-    window.scrollTo(x, y);
+    setTimeout(() => {
+        scrollToPosition(x, y);
+    }, timeout);
 };
 
 export default scrollTo;

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

@@ -19,13 +19,15 @@ import { h } from '/js/src/index.js';
  * @returns {vnode} returns the preview node
  */
 const mdBox = (model, text) => h('', {
-    onremove: () => model.logs.clearEditor(),
+    onremove: () => model.logs.flushModel(),
 }, [
     h('textarea#text.w-75.form-control', {
         placeholder: 'Your message...',
         disabled: true,
         onchange: (e) => model.logs.setText(e.target.value),
-        onload: () => model.logs.setMarkdownBox('text', { location: 'logs', name: 'setText' }),
+        oninit: () => {
+            model.logs.setMarkdownBox('text', { location: 'logs', name: 'setText' }, { isReadOnly: false });
+        },
     }, text),
 ]);
 

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

@@ -49,10 +49,15 @@ const logDetailScreen = (model) => {
         };
 
         return h('', [
-            h('h2.mv2', { onremove: () => model.logs.clearLogs() }, 'Log Tree'),
+            h('h2.mv2', {
+                onremove: () => {
+                    model.logs.clearLogs(),
+                    model.logs.flushModel();
+                },
+            }, 'Log Tree'),
             h('.w-100.flex-column', {
-                oncreate: () => scrollTo(`#post${id}`),
-                onupdate: () => scrollTo(`#post${id}`),
+                oncreate: () => scrollTo(`#post${id}`, 100),
+                onupdate: () => scrollTo(`#post${id}`, 100),
             }, tree(data.payload[0])),
         ]);
     } else if (data.isFailure()) {

lib/public/views/Logs/Logs.js

@@ -33,6 +33,7 @@ export default class Overview extends Observable {
         this.text = '';
 
         this.isPreviewActive = false;
+        this.editors = [];
     }
 
     /**
@@ -353,28 +354,50 @@ export default class Overview extends Observable {
     }
 
     /**
-     * Clear the active editor in the window
-     * Clear the active editor
+     * Clear the single editor in the model
      * @returns {undefined}
      */
-    clearEditor() {
+    clearSingleEditor() {
+        this.editor = null;
+        this.isPreviewActive = false;
+    }
+
+    /**
+     * Clear the model variables to prevent memory leaks
+     * @returns {undefined}
+     */
+    flushModel() {
+        this.rootLogId = -1;
         this.parentLogId = -1;
         this.isPreviewActive = false;
         this.text = '';
         this.title = '';
         this.editor = null;
+        this.editors = [];
     }
 
     /**
      * Convert the textarea of the preview to a Markdown box
      * @param {String} textAreaId The id of the preview box
      * @param {Object} changeHandler The optional changehandler with 2 keys: locaiton and name to get the setter method
+     * @param {Object} readOnlyProperties Properties of the readOnlyBox
      * @returns {undefined}
      */
-    setMarkdownBox(textAreaId, changeHandler) {
+    setMarkdownBox(textAreaId, changeHandler = { location: '', name: '' },
+        readOnlyProperties = { isReadOnly: false, textValue: '' }) {
+        const { isReadOnly, textValue } = readOnlyProperties;
+        const shouldRenderReadOnly = textValue && isReadOnly;
+        const mdBoxStyling = shouldRenderReadOnly ?
+            { width: 'auto', height: 'auto' } : { width: '80rem', height: '40rem' };
+
         !this.isPreviewActive && setTimeout(() => {
-            this.editor = setMarkDownBox(textAreaId, this.model, changeHandler);
+            this.editor = setMarkDownBox(textAreaId, this.model, changeHandler, isReadOnly, mdBoxStyling);
         }, 40);
+
+        !this.editor && setTimeout(() => {
+            this.editor !== undefined && this.editors.push(this.editor);
+        }, 50);
+
         this.isPreviewActive = !this.isPreviewActive;
         this.notify();
     }

test/public/logs/overview.test.js

@@ -266,11 +266,11 @@ module.exports = () => {
         // Create the new log
         const buttonSend = await page.$('button#send');
         await buttonSend.evaluate((button) => button.click());
-        await page.waitFor(100);
+        await page.waitFor(150);
 
         // Verify that the text from the first matches with the text posted and correct working of the redirect
-        const firstPost = await page.$('#post-content');
-        const doesContentMatch = JSON.stringify(await page.evaluate((element) => element.innerText, firstPost))
+        // eslint-disable-next-line no-undef
+        const doesContentMatch = JSON.stringify(await page.evaluate(() => model.logs.editors[0].getValue()))
             .includes(text);
 
         // Verify that the first post is equal to the title provided as input when creating the log