feat: support for indent options (#430)

doocs · Sep 28, 2024 · 85f7f11 · 85f7f11
1 parent e7f01b6
commit 85f7f11
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 3 deletions.
diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -379,6 +379,31 @@ function customStyle() {
               </Button>
             </div>
           </div>
+          <div class="space-y-2">
+            <h2>段落首行缩进</h2>
+            <div class="grid grid-cols-5 justify-items-center gap-2">
+              <Button
+                class="w-full"
+                variant="outline"
+                :class="{
+                  'border-black dark:border-white': store.isUseIndent,
+                }"
+                @click="!store.isUseIndent && store.useIndentChanged()"
+              >
+                开启
+              </Button>
+              <Button
+                class="w-full"
+                variant="outline"
+                :class="{
+                  'border-black dark:border-white': !store.isUseIndent,
+                }"
+                @click="store.isUseIndent && store.useIndentChanged()"
+              >
+                关闭
+              </Button>
+            </div>
+          </div>
           <div class="space-y-2">
             <h2>自定义 CSS 面板</h2>
             <div class="grid grid-cols-5 justify-items-center gap-2">

diff --git 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
@@ -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
@@ -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<string, PropertiesHyphen>): Record<string, ExtendedProperties> =>
     Object.fromEntries(
       Object.entries(styles).map(([ele, style]) => [ele, toMerged(base, style)]),