fixed eslint error & integrated with prettier as well as formatted the whole codebase (#3450)

browser/components/MarkdownPreview.js

@@ -26,7 +26,8 @@ import i18n from 'browser/lib/i18n'
 
 const { remote, shell } = require('electron')
 const attachmentManagement = require('../main/lib/dataApi/attachmentManagement')
-const buildMarkdownPreviewContextMenu = require('browser/lib/contextMenuBuilder').buildMarkdownPreviewContextMenu
+const buildMarkdownPreviewContextMenu = require('browser/lib/contextMenuBuilder')
+  .buildMarkdownPreviewContextMenu
 
 const { app } = remote
 const path = require('path')
@@ -56,7 +57,7 @@ const CSS_FILES = [
  * @param {String} [opts.customCSS] Will be added to bottom, only if `opts.allowCustomCSS` is truthy
  * @returns {String}
  */
-function buildStyle (opts) {
+function buildStyle(opts) {
   const {
     fontFamily,
     fontSize,
@@ -104,11 +105,14 @@ body {
   font-family: '${fontFamily.join("','")}';
   font-size: ${fontSize}px;
 
-  ${scrollPastEnd ? `
+  ${
+    scrollPastEnd
+      ? `
     padding-bottom: 90vh;
     box-sizing: border-box;
     `
-    : ''}
+      : ''
+  }
   ${RTL ? 'direction: rtl;' : ''}
   ${RTL ? 'text-align: right;' : ''}
 }
@@ -225,7 +229,7 @@ const defaultCodeBlockFontFamily = [
 
 // return the line number of the line that used to generate the specified element
 // return -1 if the line is not found
-function getSourceLineNumberByElement (element) {
+function getSourceLineNumberByElement(element) {
   let isHasLineNumber = element.dataset.line !== undefined
   let parent = element
   while (!isHasLineNumber && parent.parentElement !== null) {
@@ -236,7 +240,7 @@ function getSourceLineNumberByElement (element) {
 }
 
 export default class MarkdownPreview extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
 
     this.contextMenuHandler = e => this.handleContextMenu(e)
@@ -260,7 +264,7 @@ export default class MarkdownPreview extends React.Component {
     this.initMarkdown()
   }
 
-  initMarkdown () {
+  initMarkdown() {
     const { smartQuotes, sanitize, breaks } = this.props
     this.markdown = new Markdown({
       typographer: smartQuotes,
@@ -269,17 +273,17 @@ export default class MarkdownPreview extends React.Component {
     })
   }
 
-  handleCheckboxClick (e) {
+  handleCheckboxClick(e) {
     this.props.onCheckboxClick(e)
   }
 
-  handleScroll (e) {
+  handleScroll(e) {
     if (this.props.onScroll) {
       this.props.onScroll(e)
     }
   }
 
-  handleContextMenu (event) {
+  handleContextMenu(event) {
     const menu = buildMarkdownPreviewContextMenu(this, event)
     const switchPreview = ConfigManager.get().editor.switchPreview
     if (menu != null && switchPreview !== 'RIGHTCLICK') {
@@ -289,17 +293,21 @@ export default class MarkdownPreview extends React.Component {
     }
   }
 
-  handleDoubleClick (e) {
+  handleDoubleClick(e) {
     if (this.props.onDoubleClick != null) this.props.onDoubleClick(e)
   }
 
-  handleMouseDown (e) {
+  handleMouseDown(e) {
     const config = ConfigManager.get()
     const clickElement = e.target
     const targetTag = clickElement.tagName // The direct parent HTML of where was clicked ie "BODY" or "DIV"
     const lineNumber = getSourceLineNumberByElement(clickElement) // Line location of element clicked.
 
-    if (config.editor.switchPreview === 'RIGHTCLICK' && e.buttons === 2 && config.editor.type === 'SPLIT') {
+    if (
+      config.editor.switchPreview === 'RIGHTCLICK' &&
+      e.buttons === 2 &&
+      config.editor.type === 'SPLIT'
+    ) {
       eventEmitter.emit('topbar:togglemodebutton', 'CODE')
     }
     if (e.ctrlKey) {
@@ -315,10 +323,11 @@ export default class MarkdownPreview extends React.Component {
       }
     }
 
-    if (this.props.onMouseDown != null && targetTag === 'BODY') this.props.onMouseDown(e)
+    if (this.props.onMouseDown != null && targetTag === 'BODY')
+      this.props.onMouseDown(e)
   }
 
-  handleMouseUp (e) {
+  handleMouseUp(e) {
     if (!this.props.onMouseUp) return
     if (e.target != null && e.target.tagName === 'A') {
       return null
@@ -326,15 +335,15 @@ export default class MarkdownPreview extends React.Component {
     if (this.props.onMouseUp != null) this.props.onMouseUp(e)
   }
 
-  handleSaveAsText () {
+  handleSaveAsText() {
     this.exportAsDocument('txt')
   }
 
-  handleSaveAsMd () {
+  handleSaveAsMd() {
     this.exportAsDocument('md')
   }
 
-  htmlContentFormatter (noteContent, exportTasks, targetDir) {
+  htmlContentFormatter(noteContent, exportTasks, targetDir) {
     const {
       fontFamily,
       fontSize,
@@ -360,10 +369,7 @@ export default class MarkdownPreview extends React.Component {
       RTL
     })
     let body = this.refs.root.contentWindow.document.body.innerHTML
-    body = attachmentManagement.fixLocalURLS(
-      body,
-      this.props.storagePath
-    )
+    body = attachmentManagement.fixLocalURLS(body, this.props.storagePath)
     const files = [this.getCodeThemeLink(codeBlockTheme), ...CSS_FILES]
     files.forEach(file => {
       if (global.process.platform === 'win32') {
@@ -394,14 +400,24 @@ export default class MarkdownPreview extends React.Component {
             </html>`
   }
 
-  handleSaveAsHtml () {
-    this.exportAsDocument('html', (noteContent, exportTasks, targetDir) => Promise.resolve(this.htmlContentFormatter(noteContent, exportTasks, targetDir)))
+  handleSaveAsHtml() {
+    this.exportAsDocument('html', (noteContent, exportTasks, targetDir) =>
+      Promise.resolve(
+        this.htmlContentFormatter(noteContent, exportTasks, targetDir)
+      )
+    )
   }
 
-  handleSaveAsPdf () {
+  handleSaveAsPdf() {
     this.exportAsDocument('pdf', (noteContent, exportTasks, targetDir) => {
-      const printout = new remote.BrowserWindow({show: false, webPreferences: {webSecurity: false, javascript: false}})
-      printout.loadURL('data:text/html;charset=UTF-8,' + this.htmlContentFormatter(noteContent, exportTasks, targetDir))
+      const printout = new remote.BrowserWindow({
+        show: false,
+        webPreferences: { webSecurity: false, javascript: false }
+      })
+      printout.loadURL(
+        'data:text/html;charset=UTF-8,' +
+          this.htmlContentFormatter(noteContent, exportTasks, targetDir)
+      )
       return new Promise((resolve, reject) => {
         printout.webContents.on('did-finish-load', () => {
           printout.webContents.printToPDF({}, (err, data) => {
@@ -414,11 +430,11 @@ export default class MarkdownPreview extends React.Component {
     })
   }
 
-  handlePrint () {
+  handlePrint() {
     this.refs.root.contentWindow.print()
   }
 
-  exportAsDocument (fileType, contentFormatter) {
+  exportAsDocument(fileType, contentFormatter) {
     const options = {
       filters: [{ name: 'Documents', extensions: [fileType] }],
       properties: ['openFile', 'createDirectory']
@@ -449,7 +465,7 @@ export default class MarkdownPreview extends React.Component {
     })
   }
 
-  fixDecodedURI (node) {
+  fixDecodedURI(node) {
     if (
       node &&
       node.children.length === 1 &&
@@ -466,17 +482,18 @@ export default class MarkdownPreview extends React.Component {
    * @param {string[]} splitWithCodeTag Array of HTML strings separated by three ```
    * @returns {string} HTML in which special characters between three ``` have been converted
    */
-  escapeHtmlCharactersInCodeTag (splitWithCodeTag) {
+  escapeHtmlCharactersInCodeTag(splitWithCodeTag) {
     for (let index = 0; index < splitWithCodeTag.length; index++) {
-      const codeTagRequired = (splitWithCodeTag[index] !== '\`\`\`' && index < splitWithCodeTag.length - 1)
+      const codeTagRequired =
+        splitWithCodeTag[index] !== '```' && index < splitWithCodeTag.length - 1
       if (codeTagRequired) {
-        splitWithCodeTag.splice((index + 1), 0, '\`\`\`')
+        splitWithCodeTag.splice(index + 1, 0, '```')
       }
     }
     let inCodeTag = false
     let result = ''
     for (let content of splitWithCodeTag) {
-      if (content === '\`\`\`') {
+      if (content === '```') {
         inCodeTag = !inCodeTag
       } else if (inCodeTag) {
         content = escapeHtmlCharacters(content)
@@ -486,13 +503,15 @@ export default class MarkdownPreview extends React.Component {
     return result
   }
 
-  getScrollBarStyle () {
+  getScrollBarStyle() {
     const { theme } = this.props
 
-    return uiThemes.some(item => item.name === theme && item.isDark) ? scrollBarDarkStyle : scrollBarStyle
+    return uiThemes.some(item => item.name === theme && item.isDark)
+      ? scrollBarDarkStyle
+      : scrollBarStyle
   }
 
-  componentDidMount () {
+  componentDidMount() {
     const { onDrop } = this.props
 
     this.refs.root.setAttribute('sandbox', 'allow-scripts')
@@ -542,10 +561,7 @@ export default class MarkdownPreview extends React.Component {
       'scroll',
       this.scrollHandler
     )
-    this.refs.root.contentWindow.addEventListener(
-      'resize',
-      this.resizeHandler
-    )
+    this.refs.root.contentWindow.addEventListener('resize', this.resizeHandler)
     eventEmitter.on('export:save-text', this.saveAsTextHandler)
     eventEmitter.on('export:save-md', this.saveAsMdHandler)
     eventEmitter.on('export:save-html', this.saveAsHtmlHandler)
@@ -553,7 +569,7 @@ export default class MarkdownPreview extends React.Component {
     eventEmitter.on('print', this.printHandler)
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     const { onDrop } = this.props
 
     this.refs.root.contentWindow.document.body.removeEventListener(
@@ -595,7 +611,7 @@ export default class MarkdownPreview extends React.Component {
     eventEmitter.off('print', this.printHandler)
   }
 
-  componentDidUpdate (prevProps) {
+  componentDidUpdate(prevProps) {
     // actual rewriteIframe function should be called only once
     let needsRewriteIframe = false
     if (prevProps.value !== this.props.value) needsRewriteIframe = true
@@ -637,7 +653,7 @@ export default class MarkdownPreview extends React.Component {
     }
   }
 
-  getStyleParams () {
+  getStyleParams() {
     const {
       fontSize,
       lineNumber,
@@ -649,19 +665,20 @@ export default class MarkdownPreview extends React.Component {
       RTL
     } = this.props
     let { fontFamily, codeBlockFontFamily } = this.props
-    fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
-      ? fontFamily
-          .split(',')
-          .map(fontName => fontName.trim())
-          .concat(defaultFontFamily)
-      : defaultFontFamily
-    codeBlockFontFamily = _.isString(codeBlockFontFamily) &&
-      codeBlockFontFamily.trim().length > 0
-      ? codeBlockFontFamily
-          .split(',')
-          .map(fontName => fontName.trim())
-          .concat(defaultCodeBlockFontFamily)
-      : defaultCodeBlockFontFamily
+    fontFamily =
+      _.isString(fontFamily) && fontFamily.trim().length > 0
+        ? fontFamily
+            .split(',')
+            .map(fontName => fontName.trim())
+            .concat(defaultFontFamily)
+        : defaultFontFamily
+    codeBlockFontFamily =
+      _.isString(codeBlockFontFamily) && codeBlockFontFamily.trim().length > 0
+        ? codeBlockFontFamily
+            .split(',')
+            .map(fontName => fontName.trim())
+            .concat(defaultCodeBlockFontFamily)
+        : defaultCodeBlockFontFamily
 
     return {
       fontFamily,
@@ -677,7 +694,7 @@ export default class MarkdownPreview extends React.Component {
     }
   }
 
-  applyStyle () {
+  applyStyle() {
     const {
       fontFamily,
       fontSize,
@@ -707,7 +724,7 @@ export default class MarkdownPreview extends React.Component {
     })
   }
 
-  getCodeThemeLink (name) {
+  getCodeThemeLink(name) {
     const theme = consts.THEMES.find(theme => theme.name === name)
 
     return theme != null
@@ -715,7 +732,7 @@ export default class MarkdownPreview extends React.Component {
       : `${appPath}/node_modules/codemirror/theme/elegant.css`
   }
 
-  rewriteIframe () {
+  rewriteIframe() {
     _.forEach(
       this.refs.root.contentWindow.document.querySelectorAll(
         'input[type="checkbox"]'
@@ -773,7 +790,9 @@ export default class MarkdownPreview extends React.Component {
 
     codeBlockTheme = consts.THEMES.find(theme => theme.name === codeBlockTheme)
 
-    const codeBlockThemeClassName = codeBlockTheme ? codeBlockTheme.className : 'cm-s-default'
+    const codeBlockThemeClassName = codeBlockTheme
+      ? codeBlockTheme.className
+      : 'cm-s-default'
 
     _.forEach(
       this.refs.root.contentWindow.document.querySelectorAll('.code code'),
@@ -859,7 +878,10 @@ export default class MarkdownPreview extends React.Component {
       el => {
         try {
           const format = el.attributes.getNamedItem('data-format').value
-          const chartConfig = format === 'yaml' ? yaml.load(el.innerHTML) : JSON.parse(el.innerHTML)
+          const chartConfig =
+            format === 'yaml'
+              ? yaml.load(el.innerHTML)
+              : JSON.parse(el.innerHTML)
           el.innerHTML = ''
 
           const canvas = document.createElement('canvas')
@@ -882,7 +904,12 @@ export default class MarkdownPreview extends React.Component {
     _.forEach(
       this.refs.root.contentWindow.document.querySelectorAll('.mermaid'),
       el => {
-        mermaidRender(el, htmlTextHelper.decodeEntities(el.innerHTML), theme, mermaidHTMLLabel)
+        mermaidRender(
+          el,
+          htmlTextHelper.decodeEntities(el.innerHTML),
+          theme,
+          mermaidHTMLLabel
+        )
       }
     )
 
@@ -904,20 +931,14 @@ export default class MarkdownPreview extends React.Component {
           autoplay = 0
         }
 
-        render(
-          <Carousel
-            images={images}
-            autoplay={autoplay}
-          />,
-          el
-        )
+        render(<Carousel images={images} autoplay={autoplay} />, el)
       }
     )
 
     const markdownPreviewIframe = document.querySelector('.MarkdownPreview')
     const rect = markdownPreviewIframe.getBoundingClientRect()
     const config = { attributes: true, subtree: true }
-    const imgObserver = new MutationObserver((mutationList) => {
+    const imgObserver = new MutationObserver(mutationList => {
       for (const mu of mutationList) {
         if (mu.target.className === 'carouselContent-enter-done') {
           this.setImgOnClickEventHelper(mu.target, rect)
@@ -926,26 +947,32 @@ export default class MarkdownPreview extends React.Component {
       }
     })
 
-    const imgList = markdownPreviewIframe.contentWindow.document.body.querySelectorAll('img')
+    const imgList = markdownPreviewIframe.contentWindow.document.body.querySelectorAll(
+      'img'
+    )
     for (const img of imgList) {
       const parentEl = img.parentElement
       this.setImgOnClickEventHelper(img, rect)
       imgObserver.observe(parentEl, config)
     }
 
-    const aList = markdownPreviewIframe.contentWindow.document.body.querySelectorAll('a')
+    const aList = markdownPreviewIframe.contentWindow.document.body.querySelectorAll(
+      'a'
+    )
     for (const a of aList) {
       a.removeEventListener('click', this.linkClickHandler)
       a.addEventListener('click', this.linkClickHandler)
     }
   }
 
-  setImgOnClickEventHelper (img, rect) {
+  setImgOnClickEventHelper(img, rect) {
     img.onclick = () => {
       const widthMagnification = document.body.clientWidth / img.width
       const heightMagnification = document.body.clientHeight / img.height
       const baseOnWidth = widthMagnification < heightMagnification
-      const magnification = baseOnWidth ? widthMagnification : heightMagnification
+      const magnification = baseOnWidth
+        ? widthMagnification
+        : heightMagnification
 
       const zoomImgWidth = img.width * magnification
       const zoomImgHeight = img.height * magnification
@@ -976,10 +1003,7 @@ export default class MarkdownPreview extends React.Component {
         width: ${zoomImgWidth};
         height: ${zoomImgHeight}px;
         `
-      zoomImg.animate([
-        originalImgRect,
-        zoomInImgRect
-      ], animationSpeed)
+      zoomImg.animate([originalImgRect, zoomInImgRect], animationSpeed)
 
       const overlay = document.createElement('div')
       overlay.style = `
@@ -1000,10 +1024,10 @@ export default class MarkdownPreview extends React.Component {
           width: ${img.width}px;
           height: ${img.height}px;
           `
-        const zoomOutImgAnimation = zoomImg.animate([
-          zoomInImgRect,
-          originalImgRect
-        ], animationSpeed)
+        const zoomOutImgAnimation = zoomImg.animate(
+          [zoomInImgRect, originalImgRect],
+          animationSpeed
+        )
         zoomOutImgAnimation.onfinish = () => overlay.remove()
       }
 
@@ -1012,7 +1036,7 @@ export default class MarkdownPreview extends React.Component {
     }
   }
 
-  handleResize () {
+  handleResize() {
     _.forEach(
       this.refs.root.contentWindow.document.querySelectorAll('svg[ratio]'),
       el => {
@@ -1021,11 +1045,11 @@ export default class MarkdownPreview extends React.Component {
     )
   }
 
-  focus () {
+  focus() {
     this.refs.root.focus()
   }
 
-  getWindow () {
+  getWindow() {
     return this.refs.root.contentWindow
   }
 
@@ -1033,7 +1057,7 @@ export default class MarkdownPreview extends React.Component {
    * @public
    * @param {Number} targetRow
    */
-  scrollToRow (targetRow) {
+  scrollToRow(targetRow) {
     const blocks = this.getWindow().document.querySelectorAll(
       'body>[data-line]'
     )
@@ -1054,16 +1078,16 @@ export default class MarkdownPreview extends React.Component {
    * @param {Number} x
    * @param {Number} y
    */
-  scrollTo (x, y) {
+  scrollTo(x, y) {
     this.getWindow().document.body.scrollTo(x, y)
   }
 
-  preventImageDroppedHandler (e) {
+  preventImageDroppedHandler(e) {
     e.preventDefault()
     e.stopPropagation()
   }
 
-  notify (title, options) {
+  notify(title, options) {
     if (global.process.platform === 'win32') {
       options.icon = path.join(
         'file://',
@@ -1074,7 +1098,7 @@ export default class MarkdownPreview extends React.Component {
     return new window.Notification(title, options)
   }
 
-  handleLinkClick (e) {
+  handleLinkClick(e) {
     e.preventDefault()
     e.stopPropagation()
 
@@ -1095,9 +1119,7 @@ export default class MarkdownPreview extends React.Component {
       if (posOfHash > -1) {
         const extractedId = linkHash.slice(posOfHash + 1)
         const targetId = mdurl.encode(extractedId)
-        const targetElement = this.getWindow().document.getElementById(
-          targetId
-        )
+        const targetElement = this.getWindow().document.getElementById(targetId)
 
         if (targetElement != null) {
           this.scrollTo(0, targetElement.offsetTop)
@@ -1138,9 +1160,10 @@ export default class MarkdownPreview extends React.Component {
     this.openExternal(href)
   }
 
-  openExternal (href) {
+  openExternal(href) {
     try {
-      const success = shell.openExternal(href) || shell.openExternal(decodeURI(href))
+      const success =
+        shell.openExternal(href) || shell.openExternal(decodeURI(href))
       if (!success) console.error('failed to open url ' + href)
     } catch (e) {
       // URI Error threw from decodeURI
@@ -1148,7 +1171,7 @@ export default class MarkdownPreview extends React.Component {
     }
   }
 
-  render () {
+  render() {
     const { className, style, tabIndex } = this.props
     return (
       <iframe