From 75925064b3931e68df4b127faa0897e418b57367 Mon Sep 17 00:00:00 2001 From: YangFong Date: Fri, 30 Aug 2024 08:14:35 +0800 Subject: [PATCH] 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 | 19 +++++++++- package.json | 3 ++ src/config/{index.js => index.ts} | 4 +-- src/config/theme.ts | 60 ++++++++++++++++--------------- src/types/index.ts | 11 ++++++ 5 files changed, 64 insertions(+), 33 deletions(-) rename src/config/{index.js => index.ts} (75%) diff --git a/package-lock.json b/package-lock.json index 35ac5f6..d2ce071 100644 --- 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", diff --git a/package.json b/package.json index a5e6fc7..29687e2 100644 --- 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", diff --git a/src/config/index.js b/src/config/index.ts similarity index 75% rename from src/config/index.js rename to src/config/index.ts index bde782c..8ff15dc 100644 --- a/src/config/index.js +++ 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` diff --git a/src/config/theme.ts b/src/config/theme.ts index 0c06a51..c7c5cd9 100644 --- a/src/config/theme.ts +++ b/src/config/theme.ts @@ -1,35 +1,17 @@ -interface Theme { - base: Record - block: Record> - inline: Record> -} +import { toMerged } from 'es-toolkit' + +import type { Theme } from '@/types' const baseColor = `#3f3f3f` -function mergeTheme(defaultTheme: Theme, newTheme: Theme): Theme { - const merge = (defaultObj: Record, newObj: Record) => { - const result: Record = {} - 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: { + + }, }, }) diff --git a/src/types/index.ts b/src/types/index.ts index 769edc4..bc77312 100644 --- 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 + inline: Record +} + export interface IConfigOption { label: string value: string