fix: markdown editor styles and code improvements

ref issue #100

Author: maxceem

src/components/DataItem/index.jsx

@@ -13,7 +13,13 @@ const DataItem = ({ icon, title, children }) => {
       {icon}
       <div styleName="data">
         <div styleName="title">{title}</div>
-        <div styleName="value">{children}</div>
+        {/* if `children` is pure text, then we apply styling to it
+            but otherwise with don't apply styling */}
+        {_.isString(children) ? (
+          <div styleName="value">{children}</div>
+        ) : (
+          <div styleName="value-component">{children}</div>
+        )}
       </div>
     </div>
   );

src/components/DataItem/styles.module.scss

@@ -32,3 +32,7 @@
   text-align: left;
   word-break: break-all;
 }
+
+.value-component {
+  margin-top: 2px;
+}

src/components/MarkdownEditor/index.jsx

@@ -2,7 +2,7 @@
  * MarkdownEditor
  */
 
-import React, { useState, useCallback, useRef } from "react";
+import React, { useCallback, useRef } from "react";
 import PropTypes from "prop-types";
 import cn from "classnames";
 import TuiEditor from "../TuiEditor";
@@ -12,9 +12,9 @@ const MarkdownEditor = (props) => {
   const editorElement = useRef(null);
 
   const onChange = useCallback(() => {
-    const mk = editorElement.current.editorInst.getMarkdown();
-    props.onChange(mk);
-  }, []);
+    const markdown = editorElement.current.editorInst.getMarkdown();
+    props.onChange(markdown);
+  }, [props.onChange]);
 
   return (
     <div className={cn(styles["editor-container"], props.className)}>

src/components/MarkdownEditor/styles.module.scss

@@ -10,7 +10,13 @@
         font-weight: revert;
         line-height: revert;
       }
-    }    
+    }
+
+    .tui-editor-contents {
+      b {
+        font-weight: bold;
+      }
+    }
 
     // reset border color
     .tui-editor-defaultUI {

src/components/MarkdownEditorViewer/index.jsx

@@ -2,7 +2,7 @@
  * MarkdownViewer
  */
 
-import React, { useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import TuiEditorViewer from "../TuiEditorViewer";
 

src/components/TuiEditor/index.jsx

@@ -28,7 +28,7 @@ class TuiEditor extends React.Component {
         const eventName = key[2].toLowerCase() + key.slice(3);
         // off function has issue
         // when add `onFocus` function, the headings popup will not hide automatically
-        // this.editorInst.off(eventName, props[key]);
+        // this.editorInst.off(eventName);
         this.editorInst.on(eventName, props[key]);
       });
   }
@@ -42,6 +42,15 @@ class TuiEditor extends React.Component {
     this.bindEventHandlers(this.props);
   }
 
+  componentWillUnmount() {
+    Object.keys(this.props)
+    .filter((key) => /^on[A-Z][a-zA-Z]+/.test(key))
+    .forEach((key) => {
+      const eventName = key[2].toLowerCase() + key.slice(3);
+      this.editorInst.off(eventName);
+    });
+  }
+
   shouldComponentUpdate(nextProps) {
     const instance = this.getInstance();
     const { height, previewStyle } = nextProps;
@@ -54,7 +63,10 @@ class TuiEditor extends React.Component {
       instance.changePreviewStyle(previewStyle);
     }
 
-    this.bindEventHandlers(nextProps, this.props);
+    // this looks like a bed idea to re-subscribe all the event on each re-render
+    // also, note, that we had to disable this.editorInst.off(eventName);
+    // otherwise popup for choosing Headings never closes
+    // this.bindEventHandlers(nextProps, this.props);
 
     return false;
   }

src/components/TuiEditorViewer/index.jsx

@@ -41,8 +41,20 @@ class TuiViewer extends React.Component {
     this.bindEventHandlers(this.props);
   }
 
+  componentWillUnmount() {
+    Object.keys(this.props)
+    .filter((key) => /^on[A-Z][a-zA-Z]+/.test(key))
+    .forEach((key) => {
+      const eventName = key[2].toLowerCase() + key.slice(3);
+      this.editorInst.off(eventName);
+    });
+  }
+
   shouldComponentUpdate(nextProps) {
-    this.bindEventHandlers(nextProps, this.props);
+    // this looks like a bed idea to re-subscribe all the event on each re-render
+    // also, note, that we had to disable this.editorInst.off(eventName);
+    // otherwise popup for choosing Headings never closes
+    // this.bindEventHandlers(nextProps, this.props);
 
     return false;
   }