refactor: update imports and modularize utility functions for better maintainability

Author: Yukaii

lib/models/note.js

@@ -14,7 +14,7 @@ var moment = require('moment')
 var DiffMatchPatch = require('@hackmd/diff-match-patch')
 var dmp = new DiffMatchPatch()
 
-const { stripTags } = require('../../utils/string')
+const { stripTags } = require('../utils/string')
 
 // core
 var config = require('../config')

utils/string.js lib/utils/string.jsutils/string.js renamed to lib/utils/string.js

@@ -25,12 +25,12 @@ import {
 
 import { saveAs } from 'file-saver'
 import List from 'list.js'
-import unescapeHTML from 'lodash/unescape'
+import { unescape as unescapeHTML } from 'lodash'
 
-require('./locale')
+import './locale'
 
-require('../css/cover.css')
-require('../css/site.css')
+import '../css/cover.css'
+import '../css/site.css'
 
 const options = {
   valueNames: ['id', 'text', 'timestamp', 'fromNow', 'time', 'tags', 'pinned'],

public/js/cover.js

@@ -14,7 +14,7 @@ import isURL from 'validator/lib/isURL'
 import { transform } from 'markmap-lib/dist/transform'
 import { Markmap } from 'markmap-lib/dist/view'
 
-import { stripTags } from '../../utils/string'
+import * as stringUtils from './lib/utils/string' // Import namespace
 
 import getUIElements from './lib/editor/ui-elements'
 import { emojifyImageDir } from './lib/editor/constants'
@@ -27,28 +27,43 @@ import { renderFretBoard } from './lib/renderer/fretboard/fretboard'
 import './lib/renderer/lightbox'
 import { renderCSVPreview } from './lib/renderer/csvpreview'
 
-import { escapeAttrValue } from './render'
+import * as renderUtils from './render' // Import namespace
 import { sanitizeUrl } from './utils'
 
 import markdownit from 'markdown-it'
 import markdownitContainer from 'markdown-it-container'
+import markdownitAbbr from 'markdown-it-abbr'
+import markdownitFootnote from 'markdown-it-footnote'
+import markdownitDeflist from 'markdown-it-deflist'
+import markdownitMark from 'markdown-it-mark'
+import markdownitIns from 'markdown-it-ins'
+import markdownitSub from 'markdown-it-sub'
+import markdownitSup from 'markdown-it-sup'
+import markdownitMathjax from 'markdown-it-mathjax'
+import markdownitRuby from 'markdown-it-ruby'
+
+import '@hackmd/emojify.js'
 
 /* Defined regex markdown it plugins */
 import Plugin from 'markdown-it-regexp'
 
-require('prismjs/themes/prism.css')
-require('prismjs/components/prism-wiki')
-require('prismjs/components/prism-haskell')
-require('prismjs/components/prism-go')
-require('prismjs/components/prism-typescript')
-require('prismjs/components/prism-jsx')
-require('prismjs/components/prism-makefile')
-require('prismjs/components/prism-gherkin')
+import plantumlEncoder from 'plantuml-encoder'
 
-require('./lib/common/login')
-require('../vendor/md-toc')
-let viz = new window.Viz()
-const plantumlEncoder = require('plantuml-encoder')
+import 'prismjs/themes/prism.css'
+import 'prismjs/components/prism-wiki'
+import 'prismjs/components/prism-haskell'
+import 'prismjs/components/prism-go'
+import 'prismjs/components/prism-typescript'
+import 'prismjs/components/prism-jsx'
+import 'prismjs/components/prism-makefile'
+import 'prismjs/components/prism-gherkin'
+
+import './lib/common/login'
+import '../vendor/md-toc'
+import { instance as vizInstance } from '@viz-js/viz'
+
+let viz = null
+vizInstance().then(instance => { viz = instance })
 
 const ui = getUIElements()
 
@@ -186,7 +201,7 @@ export function renderTags (view) {
 
 function slugifyWithUTF8 (text) {
   // remove HTML tags and trim spaces
-  let newText = stripTags(text.toString().trim())
+  let newText = stringUtils.stripTags(text.toString().trim()) // Use namespace
   // replace space between words with dashes
   newText = newText.replace(/\s+/g, '-')
   // slugify string to make it valid as an attribute
@@ -345,15 +360,15 @@ export function finishView (view) {
     if ($(value).children().length === 0) {
       // strip HTML tags to avoid stored XSS
       const gistid = value.getAttribute('data-gist-id')
-      value.setAttribute('data-gist-id', stripTags(gistid))
+      value.setAttribute('data-gist-id', stringUtils.stripTags(gistid)) // Use namespace
       const gistfile = value.getAttribute('data-gist-file')
-      if (gistfile) value.setAttribute('data-gist-file', stripTags(gistfile))
+      if (gistfile) value.setAttribute('data-gist-file', stringUtils.stripTags(gistfile)) // Use namespace
       const gistline = value.getAttribute('data-gist-line')
-      if (gistline) value.setAttribute('data-gist-line', stripTags(gistline))
+      if (gistline) value.setAttribute('data-gist-line', stringUtils.stripTags(gistline)) // Use namespace
       const gisthighlightline = value.getAttribute('data-gist-highlight-line')
-      if (gisthighlightline) value.setAttribute('data-gist-highlight-line', stripTags(gisthighlightline))
+      if (gisthighlightline) value.setAttribute('data-gist-highlight-line', stringUtils.stripTags(gisthighlightline)) // Use namespace
       const gistshowloading = value.getAttribute('data-gist-show-loading')
-      if (gistshowloading) value.setAttribute('data-gist-show-loading', stripTags(gistshowloading))
+      if (gistshowloading) value.setAttribute('data-gist-show-loading', stringUtils.stripTags(gistshowloading)) // Use namespace
       $(value).gist(window.viewAjaxCallback)
     }
   })
@@ -406,27 +421,27 @@ export function finishView (view) {
   })
   // graphviz
   var graphvizs = view.find('div.graphviz.raw').removeClass('raw')
-  graphvizs.each(function (key, value) {
+  graphvizs.each(async function (key, value) {
     try {
       var $value = $(value)
       const options = deserializeParamAttributeFromElement(value)
       var $ele = $(value).parent().parent()
       $value.unwrap()
-      viz.renderString($value.text(), options)
+      viz.viz.renderSVGElement($value.text(), options)
         .then(graphviz => {
           if (!graphviz) throw Error('viz.js output empty graph')
           $value.html(graphviz)
 
           $ele.addClass('graphviz')
           $value.children().unwrap()
         })
-        .catch(err => {
-          viz = new window.Viz()
+        .catch(async err => {
+          viz = await vizInstance()
           $value.parent().append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
           console.warn(err)
         })
     } catch (err) {
-      viz = new window.Viz()
+      viz = await vizInstance()
       $value.parent().append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
       console.warn(err)
     }
@@ -830,8 +845,8 @@ export function exportToHTML (view) {
         html: src[0].outerHTML,
         'ui-toc': toc.html(),
         'ui-toc-affix': tocAffix.html(),
-        lang: (md && md.meta && md.meta.lang) ? `lang="${escapeAttrValue(md.meta.lang)}"` : null,
-        dir: (md && md.meta && md.meta.dir) ? `dir="${escapeAttrValue(md.meta.dir)}"` : null
+        lang: (md && md.meta && md.meta.lang) ? `lang="${renderUtils.escapeAttrValue(md.meta.lang)}"` : null, // Use namespace
+        dir: (md && md.meta && md.meta.dir) ? `dir="${renderUtils.escapeAttrValue(md.meta.dir)}"` : null // Use namespace
       }
       const html = template(context)
       //        console.log(html);
@@ -1192,23 +1207,22 @@ export const md = markdownit('default', {
 })
 window.md = md
 
-md.use(require('markdown-it-abbr'))
-md.use(require('markdown-it-footnote'))
-md.use(require('markdown-it-deflist'))
-md.use(require('markdown-it-mark'))
-md.use(require('markdown-it-ins'))
-md.use(require('markdown-it-sub'))
-md.use(require('markdown-it-sup'))
-md.use(require('markdown-it-mathjax')({
+md.use(markdownitAbbr)
+md.use(markdownitFootnote)
+md.use(markdownitDeflist)
+md.use(markdownitMark)
+md.use(markdownitIns)
+md.use(markdownitSub)
+md.use(markdownitSup)
+md.use(markdownitMathjax({
   beforeMath: '<span class="mathjax raw">',
   afterMath: '</span>',
   beforeInlineMath: '<span class="mathjax raw">\\(',
   afterInlineMath: '\\)</span>',
   beforeDisplayMath: '<span class="mathjax raw">\\[',
   afterDisplayMath: '\\]</span>'
 }))
-md.use(require('markdown-it-imsize'))
-md.use(require('markdown-it-ruby'))
+md.use(markdownitRuby)
 
 window.emojify.setConfig({
   blacklist: {
@@ -1421,11 +1435,17 @@ const pdfPlugin = new Plugin(
   }
 )
 
+// Helper function to escape characters with special meaning in RegExp
+function escapeRegExp (string) {
+  // $& means the whole matched string
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
 const emojijsPlugin = new Plugin(
   // regexp to match emoji shortcodes :something:
   // We generate an universal regex that guaranteed only contains the
   // emojies we have available. This should prevent all false-positives
-  new RegExp(':(' + window.emojify.emojiNames.map((item) => { return RegExp.escape(item) }).join('|') + '):', 'i'),
+  new RegExp(':(' + window.emojify.emojiNames.map((item) => { return escapeRegExp(item) }).join('|') + '):', 'i'),
 
   (match, utils) => {
     const emoji = match[1].toLowerCase()

public/js/extra.js

@@ -1,8 +1,14 @@
 /* eslint-env browser, jquery */
-/* global CodeMirror, Cookies, moment, serverurl,
+/* global Cookies, moment, serverurl,
    key, Dropbox, ot, hex2rgb, Visibility, inlineAttachment */
 
+import CodeMirror from '@hackmd/codemirror'
 import TurndownService from 'turndown'
+import Cookies from 'js-cookie'
+import '@vendor/inlineAttachment/inline-attachment'
+import '@vendor/inlineAttachment/codemirror.inline-attachment'
+import Visibility from 'visibilityjs'
+import '@vendor/ot/ot.min.js'
 
 import { saveAs } from 'file-saver'
 import randomColor from 'randomcolor'
@@ -20,6 +26,7 @@ import List from 'list.js'
 import Idle from '@hackmd/idle-js'
 
 import { Spinner } from 'spin.js'
+import io from 'socket.io-client'
 
 import {
   checkLoginStateChanged,
@@ -72,7 +79,7 @@ import {
   removeHistory
 } from './history'
 
-import { preventXSS } from './render'
+import * as renderUtils from './render' // Import namespace
 
 import Editor from './lib/editor'
 
@@ -1235,6 +1242,7 @@ function selectRevision (time) {
 function initRevisionViewer () {
   if (revisionViewer) return
   var revisionViewerTextArea = document.getElementById('revisionViewer')
+  // Use the imported CodeMirror instead of the global one
   revisionViewer = CodeMirror.fromTextArea(revisionViewerTextArea, {
     mode: defaultEditorMode,
     viewportMargin: viewportMargin,
@@ -1707,7 +1715,6 @@ function havePermission () {
 window.havePermission = havePermission
 
 // socket.io actions
-var io = require('socket.io-client')
 var socket = io.connect({
   path: urlpath ? '/' + urlpath + '/socket.io/' : '',
   query: {
@@ -2789,7 +2796,7 @@ function updateViewInner () {
     ui.area.markdown.html(slides)
     window.RevealMarkdown.initialize()
     // prevent XSS
-    ui.area.markdown.html(preventXSS(ui.area.markdown.html()))
+    ui.area.markdown.html(renderUtils.preventXSS(ui.area.markdown.html()))
     ui.area.markdown.addClass('slides')
     appState.syncscroll = false
     checkSyncToggle()
@@ -2806,7 +2813,7 @@ function updateViewInner () {
       rendered = md.render(value)
     }
     // prevent XSS
-    rendered = preventXSS(rendered)
+    rendered = renderUtils.preventXSS(rendered)
     var result = postProcess(rendered).children().toArray()
     partialUpdate(result, lastResult, ui.area.markdown.children().toArray())
     if (result && lastResult && result.length !== lastResult.length) { updateDataAttrs(result, ui.area.markdown.children().toArray()) }

public/js/index.js

@@ -1,5 +1,5 @@
 /* eslint-env browser, jquery */
-/* global Cookies */
+import Cookies from 'js-cookie'
 
 import { serverurl } from '../config'
 

public/js/lib/common/login.js

@@ -1,4 +1,70 @@
-/* global CodeMirror, $, editor, Cookies */
+import CodeMirror from '@hackmd/codemirror'
+import Cookies from 'js-cookie'
+
+// CodeMirror Modes & Addons Imports
+// Modes
+import '@hackmd/codemirror/mode/meta.js'
+import '@hackmd/codemirror/mode/gfm/gfm.js'
+import '@hackmd/codemirror/mode/clike/clike.js'
+import '@hackmd/codemirror/mode/javascript/javascript.js'
+import '@hackmd/codemirror/mode/css/css.js'
+import '@hackmd/codemirror/mode/xml/xml.js'
+import '@hackmd/codemirror/mode/htmlmixed/htmlmixed.js'
+import '@hackmd/codemirror/mode/htmlembedded/htmlembedded.js'
+import '@hackmd/codemirror/mode/python/python.js'
+import '@hackmd/codemirror/mode/ruby/ruby.js'
+import '@hackmd/codemirror/mode/shell/shell.js'
+import '@hackmd/codemirror/mode/php/php.js'
+import '@hackmd/codemirror/mode/sql/sql.js'
+import '@hackmd/codemirror/mode/haskell/haskell.js'
+import '@hackmd/codemirror/mode/coffeescript/coffeescript.js'
+import '@hackmd/codemirror/mode/yaml/yaml.js'
+import '@hackmd/codemirror/mode/pug/pug.js'
+import '@hackmd/codemirror/mode/lua/lua.js'
+import '@hackmd/codemirror/mode/cmake/cmake.js'
+import '@hackmd/codemirror/mode/nginx/nginx.js'
+import '@hackmd/codemirror/mode/perl/perl.js'
+import '@hackmd/codemirror/mode/sass/sass.js'
+import '@hackmd/codemirror/mode/r/r.js'
+import '@hackmd/codemirror/mode/dockerfile/dockerfile.js'
+import '@hackmd/codemirror/mode/tiddlywiki/tiddlywiki.js'
+// import '@hackmd/codemirror/mode/mediawiki/mediawiki.js'
+import '@hackmd/codemirror/mode/go/go.js'
+import '@hackmd/codemirror/mode/gherkin/gherkin.js'
+import '@hackmd/codemirror/mode/clojure/clojure.js'
+// import '@hackmd/codemirror/mode/ocaml/ocaml.js'
+import '@hackmd/codemirror/mode/csv/csv.js'
+// Keymaps
+import '@hackmd/codemirror/keymap/sublime.js'
+import '@hackmd/codemirror/keymap/vim.js'
+import '@hackmd/codemirror/keymap/emacs.js'
+// Addons
+import '@hackmd/codemirror/addon/mode/overlay.js'
+import '@hackmd/codemirror/addon/selection/active-line.js'
+import '@hackmd/codemirror/addon/search/match-highlighter.js'
+import '@hackmd/codemirror/addon/edit/matchbrackets.js'
+import '@hackmd/codemirror/addon/edit/closebrackets.js'
+import '@hackmd/codemirror/addon/edit/matchtags.js'
+import '@hackmd/codemirror/addon/edit/closetag.js'
+import '@hackmd/codemirror/addon/fold/foldcode.js'
+import '@hackmd/codemirror/addon/fold/foldgutter.js'
+import '@hackmd/codemirror/addon/fold/brace-fold.js'
+import '@hackmd/codemirror/addon/fold/comment-fold.js'
+import '@hackmd/codemirror/addon/fold/markdown-fold.js'
+import '@hackmd/codemirror/addon/fold/xml-fold.js'
+import '@hackmd/codemirror/addon/edit/continuelist.js'
+import '@hackmd/codemirror/addon/display/autorefresh.js'
+import '@hackmd/codemirror/addon/display/placeholder.js'
+import '@hackmd/codemirror/addon/search/search.js'
+import '@hackmd/codemirror/addon/search/searchcursor.js'
+import '@hackmd/codemirror/addon/search/jump-to-line.js'
+import '@hackmd/codemirror/addon/dialog/dialog.js'
+import '@hackmd/codemirror/addon/lint/lint.js'
+import '@hackmd/codemirror/addon/display/fullscreen.js'
+import '@hackmd/codemirror/addon/scroll/simplescrollbars.js'
+import '@hackmd/codemirror/addon/search/matchesonscrollbar.js'
+
+/* global $, editor, Cookies */
 import { options, Alignment, FormatType } from '@susisu/mte-kernel'
 import debounce from 'lodash/debounce'