[DEV] [HOTFIX] Markdown editor fixes and improvements

.circleci/config.yml

@@ -136,7 +136,7 @@ workflows:
             - build-dev
           filters:
             branches:
-              only: ['feature/taas-jobs-2']
+              only: ['hotfix/taas-job-editor-improvements']
 
       - deployProd:
           context : org-global

src/components/TuiEditor/TuiEditor.scss

@@ -8,11 +8,11 @@
       all: revert;
       font-size: 24px;
     }
-  } 
+  }
 
-  b, 
+  b,
   i,
-  s, 
+  s,
   hr,
   blockquote,
   ul,
@@ -33,7 +33,7 @@
     // add style for heading list in  headings selection popup, because 'all:revert' has been setted before
     .te-heading-add ul {
       list-style: none;
-    }    
+    }
 
     // hide uplodd file
     .tui-editor-popup{

src/components/TuiEditor/index.jsx

@@ -1,5 +1,5 @@
 /*
- *  TuiEditor 
+ *  TuiEditor
  *  wrap toast-ui editor with react and support react 15
  */
 
@@ -33,6 +33,12 @@ class TuiEditor extends React.Component {
         this.editorInst.off(eventName)
         this.editorInst.on(eventName, props[key])
       })
+
+    // always add `https` to the links if link was added without `http` or `https`
+    this.editorInst.on('convertorAfterHtmlToMarkdownConverted', (inputMarkdown) => {
+      const outputMarkdown = inputMarkdown.replace(/\[([^\]]*)\]\((?!https?)([^)]+)\)/g, '[$1](https://$2)')
+      return outputMarkdown
+    })
   }
 
   componentDidMount() {
@@ -47,6 +53,17 @@ class TuiEditor extends React.Component {
     this.bindEventHandlers(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)
+      })
+
+    this.editorInst.off('convertorAfterHtmlToMarkdownConverted')
+  }
+
   handleValueChange(){
     if (this.props.onChange) {
       this.props.onChange(this.getInstance().getMarkdown())
@@ -68,7 +85,11 @@ class TuiEditor extends React.Component {
     if (this.props.className !== className) {
       return true
     }
-    // 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
   }
@@ -132,7 +153,7 @@ TuiEditor.propTypes = {
   // use default htmlSanitizer
   useDefaultHTMLSanitizer: PropTypes.bool,
   // toolbar items.
-  toolbarItems: PropTypes.arrayOf(PropTypes.object),
+  toolbarItems: PropTypes.arrayOf(PropTypes.oneOfType(PropTypes.object, PropTypes.string)),
   // Array of plugins. A plugin can be either a function or an array in the form of [function, options].
   plugins: PropTypes.arrayOf(PropTypes.object),
   // Using extended Autolinks specified in GFM spec

src/projects/detail/components/DescriptionField/DescriptionField.scss

@@ -0,0 +1,18 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.description-editor {
+  :global {
+    .tui-editor-contents {
+      code {
+        background-color: transparent;
+        color: inherit;
+      }
+
+      pre {
+        background-color: transparent;
+        color: inherit;
+        padding: 0;
+      }
+    }
+  }
+}

src/projects/detail/components/DescriptionField/index.jsx

@@ -6,10 +6,30 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import TuiEditor from '../../../../components/TuiEditor'
+import './DescriptionField.scss'
 
 const DescriptionField = (props) => (
   <TuiEditor
     {...props}
+    toolbarItems={[
+      'heading',
+      'bold',
+      'italic',
+      'strike',
+      'code',
+      'divider',
+      'quote',
+      'codeblock',
+      'hr',
+      'divider',
+      'ul',
+      'ol',
+      'divider',
+      'image',
+      'link',
+    ]}
+    plugins={[]}
+    styleName="description-editor"
     previewStyle="vertical"
     height="400px"
     hideModeSwitch