refactor: update type of theme (#369)

* chore: add csstype and es-toolkit * chore: add @types/prettier * refactor: update config file to use TypeScript * refactor: update type of theme
2024-11-28 13:36:32 +08:00 · 2024-08-30 08:14:35 +08:00 · 2024-08-30 08:14:35 +08:00 · 75925064b3
commit 75925064b3
parent fed75b307e
5 changed files with 64 additions and 33 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -20,7 +20,9 @@
        "core-js": "^3.38.1",
        "cos-js-sdk-v5": "^1.8.4",
        "crypto-js": "^4.2.0",
+        "csstype": "^3.1.3",
        "element-plus": "^2.8.0",
+        "es-toolkit": "^1.16.0",
        "form-data": "4.0.0",
        "highlight.js": "^11.10.0",
        "juice": "^8.0.0",
@ -44,6 +46,7 @@
        "@types/codemirror": "^5.60.15",
        "@types/marked": "^4.0.0",
        "@types/node": "^22.4.1",
+        "@types/prettier": "^2.7.3",
        "@unocss/eslint-plugin": "^0.62.2",
        "@vitejs/plugin-vue": "^5.1.2",
        "autoprefixer": "^10.4.20",
@ -839,7 +842,6 @@
    },
    "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
      "version": "1.3.0",
-      "dev": true,
      "inBundle": true,
      "license": "MIT",
      "engines": {
@ -2291,6 +2293,12 @@
      "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
      "dev": true
    },
+    "node_modules/@types/prettier": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmmirror.com/@types/prettier/-/prettier-2.7.3.tgz",
+      "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==",
+      "dev": true
+    },
    "node_modules/@types/tern": {
      "version": "0.23.9",
      "resolved": "https://registry.npmmirror.com/@types/tern/-/tern-0.23.9.tgz",
@ -5573,6 +5581,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/es-toolkit": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmmirror.com/es-toolkit/-/es-toolkit-1.16.0.tgz",
+      "integrity": "sha512-eNJh3zF1KmAHRYd1D8rFi1cMFMCjrC6tumBfwuuZdSur97mED/ifyeBoGzxS11L4owCMx3XSmWTo6oxJQkdGng==",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
    "node_modules/esbuild": {
      "version": "0.23.1",
      "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.23.1.tgz",
--- a/package.json
+++ b/package.json
@ -28,7 +28,9 @@
    "core-js": "^3.38.1",
    "cos-js-sdk-v5": "^1.8.4",
    "crypto-js": "^4.2.0",
+    "csstype": "^3.1.3",
    "element-plus": "^2.8.0",
+    "es-toolkit": "^1.16.0",
    "form-data": "4.0.0",
    "highlight.js": "^11.10.0",
    "juice": "^8.0.0",
@ -52,6 +54,7 @@
    "@types/codemirror": "^5.60.15",
    "@types/marked": "^4.0.0",
    "@types/node": "^22.4.1",
+    "@types/prettier": "^2.7.3",
    "@unocss/eslint-plugin": "^0.62.2",
    "@vitejs/plugin-vue": "^5.1.2",
    "autoprefixer": "^10.4.20",
--- a/src/config/index.ts
+++ b/src/config/index.ts
@ -1,12 +1,10 @@
-import CodeMirror from 'codemirror'
-
 export * from './api'
 export * from './style'
 export * from './theme'

 export const prefix = `MD`

-const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault
+const isMac = window.navigator.platform === `MacIntel`

 export const ctrlKey = isMac ? `Cmd` : `Ctrl`
 export const altKey = `Alt`
--- a/src/config/theme.ts
+++ b/src/config/theme.ts
@ -1,35 +1,17 @@
-interface Theme {
-  base: Record<string, string | number>
-  block: Record<string, Record<string, string | number>>
-  inline: Record<string, Record<string, string | number>>
-}
+import { toMerged } from 'es-toolkit'
+
+import type { Theme } from '@/types'

 const baseColor = `#3f3f3f`

-function mergeTheme(defaultTheme: Theme, newTheme: Theme): Theme {
-  const merge = (defaultObj: Record<string, any>, newObj: Record<string, any>) => {
-    const result: Record<string, any> = {}
-    for (const key in defaultObj) {
-      result[key] = { ...defaultObj[key], ...newObj?.[key] }
-    }
-    return result
-  }
-
-  return {
-    base: { ...defaultTheme.base, ...newTheme.base },
-    block: merge(defaultTheme.block, newTheme.block),
-    inline: merge(defaultTheme.inline, newTheme.inline),
-  }
-}
-
-const defaultTheme = {
+const defaultTheme: Theme = {
  base: {
    '--md-primary-color': `#000000`,
    'text-align': `left`,
    'line-height': `1.75`,
  },
  block: {
-    // 一级标题样式
+    // 一级标题
    h1: {
      'display': `table`,
      'padding': `0 1em`,
@ -41,7 +23,7 @@ const defaultTheme = {
      'text-align': `center`,
    },

-    // 二级标题样式
+    // 二级标题
    h2: {
      'display': `table`,
      'padding': `0 0.2em`,
@ -53,7 +35,7 @@ const defaultTheme = {
      'text-align': `center`,
    },

-    // 三级标题样式
+    // 三级标题
    h3: {
      'padding-left': `8px`,
      'border-left': `3px solid var(--md-primary-color)`,
@ -64,7 +46,7 @@ const defaultTheme = {
      'line-height': `1.2`,
    },

-    // 四级标题样式
+    // 四级标题
    h4: {
      'margin': `2em 8px 0.5em`,
      'color': `var(--md-primary-color)`,
@ -72,7 +54,7 @@ const defaultTheme = {
      'font-weight': `bold`,
    },

-    // 段落样式
+    // 段落
    p: {
      'margin': `1.5em 8px`,
      'letter-spacing': `0.1em`,
@ -80,7 +62,7 @@ const defaultTheme = {
      'text-align': `justify`,
    },

-    // 引用样式
+    // 引用
    blockquote: {
      'font-style': `normal`,
      'border-left': `none`,
@ -91,12 +73,15 @@ const defaultTheme = {
      'margin': `2em 8px`,
    },

+    // 引用内容
    blockquote_p: {
      'display': `block`,
      'font-size': `1em`,
      'letter-spacing': `0.1em`,
      'color': `rgb(80, 80, 80)`,
    },
+
+    // 代码块
    code_pre: {
      'font-size': `14px`,
      'overflow-x': `auto`,
@ -105,12 +90,15 @@ const defaultTheme = {
      'line-height': `1.5`,
      'margin': `10px 8px`,
    },
+
+    // 行内代码
    code: {
      'margin': 0,
      'white-space': `nowrap`,
      'font-family': `Menlo, Operator Mono, Consolas, Monaco, monospace`,
    },

+    // 图片
    image: {
      'display': `block`,
      'width': `100% !important`,
@ -118,12 +106,14 @@ const defaultTheme = {
      'border-radius': `4px`,
    },

+    // 有序列表
    ol: {
      'padding-left': `1em`,
      'margin-left': `0`,
      'color': `var(--el-text-color-regular)`,
    },

+    // 无序列表
    ul: {
      'list-style': `circle`,
      'padding-left': `1em`,
@ -216,7 +206,7 @@ const defaultTheme = {
  },
 }

-const graceTheme = mergeTheme(defaultTheme, {
+const graceTheme = toMerged(defaultTheme, {
  base: {
  },
  block: {
@ -284,6 +274,14 @@ const graceTheme = mergeTheme(defaultTheme, {
      'padding-left': `1.5em`,
    },

+    footnotes: {
+
+    },
+
+    figure: {
+
+    },
+
    hr: {
      height: `1px`,
      border: `none`,
@ -329,6 +327,10 @@ const graceTheme = mergeTheme(defaultTheme, {
    footnote: {
      color: `rgba(0,0,0,0.5)`,
    },
+
+    figcaption: {
+
+    },
  },
 })

--- a/src/types/index.ts
+++ b/src/types/index.ts
@ -1,3 +1,14 @@
+import type { PropertiesHyphen } from 'csstype'
+
+type Block = `h1` | `h2` | `h3` | `h4` | `p` | `blockquote` | `blockquote_p` | `code_pre` | `code` | `image` | `ol` | `ul` | `footnotes` | `figure` | `hr`
+type Inline = `listitem` | `codespan` | `link` | `wx_link` | `strong` | `table` | `thead` | `td` | `footnote` | `figcaption`
+
+export interface Theme {
+  base: PropertiesHyphen & { [`--md-primary-color`]?: string }
+  block: Record<Block, PropertiesHyphen>
+  inline: Record<Inline, PropertiesHyphen>
+}
+
 export interface IConfigOption {
  label: string
  value: string