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

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",

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",

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`

src/config/theme.ts

@@ -1,35 +1,17 @@
-interface Theme {
+import { toMerged } from 'es-toolkit'
-  base: Record<string, string | number>
+
-  block: Record<string, Record<string, string | number>>
+import type { Theme } from '@/types'
-  inline: Record<string, Record<string, string | number>>
-}
 
 const baseColor = `#3f3f3f`
 
-function mergeTheme(defaultTheme: Theme, newTheme: Theme): Theme {
+const defaultTheme: 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 = {
   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: {
+
+    },
   },
 })
 

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