chore: organize comments and formatting (#165)

- 提供公共函数 & 使用合适的参数名称
- 统一导出函数声明
- 优化部分 JSDoc 注解

src/assets/scripts/util.js

@@ -1,38 +1,33 @@
-import defaultTheme from './themes/default-theme'
 import prettier from 'prettier/standalone'
-import prettierMarkdown from 'prettier/parser-markdown'
 import prettierCss from 'prettier/parser-postcss'
+import prettierMarkdown from 'prettier/parser-markdown'
+import defaultTheme from './themes/default-theme'
+
+const createCustomTheme = (theme, color) => {
+  const customTheme = JSON.parse(JSON.stringify(theme))
+  customTheme.block.h1[`border-bottom`] = `2px solid ${color}`
+  customTheme.block.h2[`background`] = color
+  customTheme.block.h3[`border-left`] = `3px solid ${color}`
+  customTheme.block.h4[`color`] = color
+  customTheme.inline.strong[`color`] = color
+  return customTheme
+}
 
 // 设置自定义颜色
-export function setColorWithTemplate(template) {
+export function setColorWithTemplate(theme) {
-  return function (color) {
+  return (color) => {
-    let customTheme = JSON.parse(JSON.stringify(template))
+    return createCustomTheme(theme, color)
-    customTheme.block.h1[`border-bottom`] = `2px solid ${color}`
-    customTheme.block.h2[`background`] = color
-    customTheme.block.h3[`border-left`] = `3px solid ${color}`
-    customTheme.block.h4[`color`] = color
-    customTheme.inline.strong[`color`] = color
-    return customTheme
   }
 }
 
-export const setColorWithCustomTemplate = function setColorWithCustomTemplate(
+export function setColorWithCustomTemplate(theme, color) {
-  template,
+  return createCustomTheme(theme, color)
-  color
-) {
-  let customTheme = JSON.parse(JSON.stringify(template))
-  customTheme.block.h1[`border-bottom`] = `2px solid ${color}`
-  customTheme.block.h2[`background`] = color
-  customTheme.block.h3[`border-left`] = `3px solid ${color}`
-  customTheme.block.h4[`color`] = color
-  customTheme.inline.strong[`color`] = color
-  return customTheme
 }
 
 // 设置自定义字体大小
 export function setFontSizeWithTemplate(template) {
   return function (fontSize) {
-    let customTheme = JSON.parse(JSON.stringify(template))
+    const customTheme = JSON.parse(JSON.stringify(template))
     customTheme.block.h1[`font-size`] = `${fontSize * 1.14}px`
     customTheme.block.h2[`font-size`] = `${fontSize * 1.1}px`
     customTheme.block.h3[`font-size`] = `${fontSize}px`
@@ -45,13 +40,8 @@ export const setColor = setColorWithTemplate(defaultTheme)
 export const setFontSize = setFontSizeWithTemplate(defaultTheme)
 
 export function customCssWithTemplate(jsonString, color, theme) {
-  let customTheme = JSON.parse(JSON.stringify(theme))
   // block
-  customTheme.block.h1[`border-bottom`] = `2px solid ${color}`
+  const customTheme = createCustomTheme(theme, color)
-  customTheme.block.h2[`background`] = color
-  customTheme.block.h3[`border-left`] = `3px solid ${color}`
-  customTheme.block.h4[`color`] = color
-  customTheme.inline.strong[`color`] = color
 
   customTheme.block.h1 = Object.assign(customTheme.block.h1, jsonString.h1)
   customTheme.block.h2 = Object.assign(customTheme.block.h2, jsonString.h2)
@@ -105,7 +95,7 @@ export function customCssWithTemplate(jsonString, color, theme) {
 /**
  * 将CSS形式的字符串转换为JSON
  *
- * @param {css字符串} css
+ * @param {string} css - css字符串
  */
 export function css2json(css) {
   // 移除CSS所有注释
@@ -137,8 +127,7 @@ export function css2json(css) {
       array.forEach((e) => {
         const index = e.indexOf(`:`)
         const property = e.substring(0, index).trim()
-        const value = e.substring(index + 1).trim()
+        ret[property] = e.substring(index + 1).trim()
-        ret[property] = value
       })
       return ret
     }
@@ -198,38 +187,36 @@ export function saveEditorContent(editor, name) {
 
 /**
  * 格式化文档
- * @param {文档内容} content
+ * @param {string} content - 文档内容
  */
 export function formatDoc(content) {
-  const doc = prettier.format(content, {
+  return prettier.format(content, {
     parser: `markdown`,
     plugins: [prettierMarkdown],
   })
-  return doc
 }
 
 /**
  * 格式化css
- * @param {css内容}} content
+ * @param {string} content - css内容
  */
 export function formatCss(content) {
-  const doc = prettier.format(content, {
+  return prettier.format(content, {
     parser: `css`,
     plugins: [prettierCss],
   })
-  return doc
 }
 
 /**
  * 导出原始 Markdown 文档
- * @param {文档内容} doc
+ * @param {string} doc - 文档内容
  */
 export function downloadMD(doc) {
-  let downLink = document.createElement(`a`)
+  const downLink = document.createElement(`a`)
 
   downLink.download = `content.md`
   downLink.style.display = `none`
-  let blob = new Blob([doc])
+  const blob = new Blob([doc])
 
   downLink.href = URL.createObjectURL(blob)
   document.body.appendChild(downLink)
@@ -259,6 +246,22 @@ export function exportHTML() {
   document.body.removeChild(downLink)
 
   function setStyles(element) {
+    /**
+     * 获取一个 DOM 元素的所有样式，
+     * @param {DOM 元素} element DOM 元素
+     * @param {排除的属性} excludes 如果某些属性对结果有不良影响，可以使用这个参数来排除
+     * @returns 行内样式拼接结果
+     */
+    function getElementStyles(element, excludes = [`width`, `height`]) {
+      const styles = getComputedStyle(element, null)
+      return Object.entries(styles)
+        .filter(
+          ([key]) => styles.getPropertyValue(key) && !excludes.includes(key)
+        )
+        .map(([key, value]) => `${key}:${value};`)
+        .join(``)
+    }
+
     switch (true) {
       case isPre(element):
       case isCode(element):
@@ -278,6 +281,7 @@ export function exportHTML() {
         Array.from(element.classList).includes(`code__pre`)
       )
     }
+
     // 判断是否是包裹代码块的 code 元素
     function isCode(element) {
       return (
@@ -285,6 +289,7 @@ export function exportHTML() {
         Array.from(element.classList).includes(`prettyprint`)
       )
     }
+
     // 判断是否是包裹代码字符的 span 元素
     function isSpan(element) {
       return (
@@ -318,13 +323,14 @@ export function createTable({ data, rows, cols }) {
   return table
 }
 
-export const toBase64 = (file) =>
+export function toBase64(file) {
-  new Promise((resolve, reject) => {
+  return new Promise((resolve, reject) => {
     const reader = new FileReader()
     reader.readAsDataURL(file)
     reader.onload = () => resolve(reader.result.split(`,`).pop())
     reader.onerror = (error) => reject(error)
   })
+}
 
 export function checkImage(file) {
   // check filename suffix
@@ -348,20 +354,6 @@ export function checkImage(file) {
   return { ok: true }
 }
 
-/**
- * 获取一个 DOM 元素的所有样式，
- * @param {DOM 元素} element DOM 元素
- * @param {排除的属性} excludes 如果某些属性对结果有不良影响，可以使用这个参数来排除
- * @returns 行内样式拼接结果
- */
-function getElementStyles(element, excludes = [`width`, `height`]) {
-  const styles = getComputedStyle(element, null)
-  return Object.entries(styles)
-    .filter(([key]) => styles.getPropertyValue(key) && !excludes.includes(key))
-    .map(([key, value]) => `${key}:${value};`)
-    .join(``)
-}
-
 /**
  * 移除左边多余空格
  * @param {*} str
@@ -375,6 +367,5 @@ export function removeLeft(str) {
     .map((item) => item.match(/(^\s+)?/)[0].length)
     .sort((a, b) => a - b)[0]
   // 删除空白符
-  const newStr = lines.map((item) => item.slice(minSpaceNum)).join(`\n`)
+  return lines.map((item) => item.slice(minSpaceNum)).join(`\n`)
-  return newStr
 }

src/components/CodemirrorEditor/aboutDialog.vue

@@ -22,14 +22,16 @@
         type="primary"
         @click="onRedirect('https://github.com/doocs/md')"
         plain
-        >GitHub 仓库</el-button
       >
+        GitHub 仓库
+      </el-button>
       <el-button
         type="primary"
         @click="onRedirect('https://gitee.com/doocs/md')"
         plain
-        >Gitee 仓库</el-button
       >
+        Gitee 仓库
+      </el-button>
     </span>
   </el-dialog>
 </template>

src/components/CodemirrorEditor/header.vue

@@ -299,14 +299,10 @@
 </template>
 
 <script>
-import {
+import { setFontSize, setColorWithCustomTemplate } from '@/assets/scripts/util'
-  setFontSize,
+import { solveWeChatImage, solveHtml } from '@/assets/scripts/converter'
-  fixCodeWhiteSpace,
-  setColorWithCustomTemplate,
-} from '../../assets/scripts/util'
-import { solveWeChatImage, solveHtml } from '../../assets/scripts/converter'
-import config from '../../assets/scripts/config'
 import DEFAULT_CSS_CONTENT from '@/assets/example/theme-css.txt'
+import config from '@/assets/scripts/config'
 import resetDialog from './resetDialog'
 import { mapState, mapMutations } from 'vuex'
 
@@ -473,7 +469,7 @@ export default {
         this.cssEditor.refresh()
       }, 50)
 
-      let flag = await localStorage.getItem(`__css_content`)
+      let flag = localStorage.getItem(`__css_content`)
       if (!flag) {
         this.setCssEditorValue(DEFAULT_CSS_CONTENT)
       }

src/components/CodemirrorEditor/insertForm.vue

@@ -44,18 +44,19 @@
       </tr>
     </table>
     <div slot="footer" class="dialog-footer">
-      <el-button :type="btnType" plain @click="$emit('input', false)"
+      <el-button :type="btnType" @click="$emit('input', false)" plain>
-        >取 消</el-button
+        取 消
-      >
+      </el-button>
       <el-button :type="btnType" @click="insertTable" plain> 确 定 </el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import config from '../../assets/scripts/config'
+import config from '@/assets/scripts/config'
-import { createTable } from '../../assets/scripts/util'
+import { createTable } from '@/assets/scripts/util'
 import { mapState, mapMutations } from 'vuex'
+
 export default {
   props: {
     value: {
@@ -108,6 +109,7 @@ export default {
   min-height: 375px;
   min-width: 440px;
 }
+
 .tb-options {
   margin-bottom: 20px;
 }

src/components/CodemirrorEditor/resetDialog.vue

@@ -7,16 +7,19 @@
   >
     <div class="text">此操作将丢失本地自定义样式，是否继续?</div>
     <div slot="footer" class="dialog-footer">
-      <el-button :type="btnType" plain @click="$emit('close')">取 消</el-button>
+      <el-button :type="btnType" @click="$emit('close')" plain>
-      <el-button :type="btnType" @click="$emit('confirm')" plain
+        取 消
-        >确 定</el-button
+      </el-button>
-      >
+      <el-button :type="btnType" @click="$emit('confirm')" plain>
+        确 定
+      </el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
 import { mapState } from 'vuex'
+
 export default {
   props: {
     showResetConfirm: {
@@ -39,6 +42,7 @@ export default {
 /deep/ .el-dialog {
   min-width: 440px;
 }
+
 .reset__dialog {
   text-align: center;
 }

src/views/CodemirrorEditor.vue

@@ -118,8 +118,8 @@ import {
   saveEditorContent,
   customCssWithTemplate,
   checkImage,
-} from '../assets/scripts/util'
+  toBase64,
-import { toBase64 } from '../assets/scripts/util'
+} from '@/assets/scripts/util'
 import fileApi from '../api/file'
 import { mapState, mapMutations } from 'vuex'
 
@@ -339,7 +339,7 @@ export default {
       if (el != undefined) {
         el.setAttribute(`href`, cssUrl)
       } else {
-        var link = document.createElement(`link`)
+        const link = document.createElement(`link`)
         link.setAttribute(`type`, `text/css`)
         link.setAttribute(`rel`, `stylesheet`)
         link.setAttribute(`href`, cssUrl)
@@ -699,7 +699,7 @@ export default {
 }
 
 /deep/ .preview-table {
-  border-spacing: 0px;
+  border-spacing: 0;
 }
 
 @keyframes bounceInRight {