diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue index 3a90d234..28d106f0 100644 --- a/src/components/CodemirrorEditor/EditorHeader/index.vue +++ b/src/components/CodemirrorEditor/EditorHeader/index.vue @@ -379,6 +379,31 @@ function customStyle() { +
+

段落首行缩进

+
+ + +
+

自定义 CSS 面板

diff --git a/src/stores/index.ts b/src/stores/index.ts index 9982dba3..fa3688bd 100644 --- a/src/stores/index.ts +++ b/src/stores/index.ts @@ -28,6 +28,10 @@ export const useStore = defineStore(`store`, () => { const isCiteStatus = useStorage(`isCiteStatus`, false) const toggleCiteStatus = useToggle(isCiteStatus) + // 是否开启段落首行缩进 + const isUseIndent = useStorage(addPrefix(`use_indent`), true) + const toggleUseIndent = useToggle(isUseIndent) + const output = ref(``) // 文本字体 @@ -133,12 +137,13 @@ export const useStore = defineStore(`store`, () => { theme: customCssWithTemplate(css2json(getCurrentTab().content), primaryColor.value, customizeTheme(themeMap[theme.value], { fontSize: fontSizeNumber.value, color: primaryColor.value })), fonts: fontFamily.value, size: fontSize.value, + isUseIndent: isUseIndent.value, }) // 更新编辑器 const editorRefresh = () => { codeThemeChange() - renderer.reset({ status: isCiteStatus.value, legend: legend.value }) + renderer.reset({ status: isCiteStatus.value, legend: legend.value, isUseIndent: isUseIndent.value }) let outputTemp = marked.parse(editor.value!.getValue()) as string // 去除第一行的 margin-top @@ -318,6 +323,10 @@ export const useStore = defineStore(`store`, () => { toggleCiteStatus() }) + const useIndentChanged = withAfterRefresh(() => { + toggleUseIndent() + }) + // 导出编辑器内容为 HTML,并且下载到本地 const exportEditorContent2HTML = () => { exportHTML() @@ -389,6 +398,8 @@ export const useStore = defineStore(`store`, () => { isMacCodeBlock, isCiteStatus, citeStatusChanged, + isUseIndent, + useIndentChanged, output, editor, diff --git a/src/types/index.ts b/src/types/index.ts index fe9372b6..c71a0603 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -20,6 +20,7 @@ export interface IOpts { theme: Theme fonts: string size: string + isUseIndent: boolean legend?: string status?: boolean } diff --git a/src/utils/renderer.ts b/src/utils/renderer.ts index 0d25d151..b1c18c1e 100644 --- a/src/utils/renderer.ts +++ b/src/utils/renderer.ts @@ -1,7 +1,7 @@ import type { ExtendedProperties, IOpts, ThemeStyles } from '@/types' import type { PropertiesHyphen } from 'csstype' import type { Renderer, RendererObject, Tokens } from 'marked' -import { toMerged } from 'es-toolkit' +import { cloneDeep, toMerged } from 'es-toolkit' import hljs from 'highlight.js' import { marked } from 'marked' @@ -10,12 +10,20 @@ import { MDKatex } from './MDKatex' marked.use(MDKatex({ nonStandard: true })) -function buildTheme({ theme, fonts, size }: IOpts): ThemeStyles { +function buildTheme({ theme: _theme, fonts, size, isUseIndent }: IOpts): ThemeStyles { + const theme = cloneDeep(_theme) const base = toMerged(theme.base, { 'font-family': fonts, 'font-size': size, }) + if (isUseIndent) { + theme.block.p = { + 'text-indent': `2em`, + ...theme.block.p, + } + } + const mergeStyles = (styles: Record): Record => Object.fromEntries( Object.entries(styles).map(([ele, style]) => [ele, toMerged(base, style)]),