feat: change header style

Author: winverse

packages/markdown-editor/package.json

@@ -40,6 +40,7 @@
     "@codemirror/autocomplete": "^6.16.0",
     "@codemirror/commands": "^6.5.0",
     "@codemirror/lang-markdown": "^6.2.5",
+    "@codemirror/language": "^6.10.2",
     "@codemirror/language-data": "^6.5.1",
     "@codemirror/state": "^6.4.1",
     "@codemirror/theme-one-dark": "^6.1.2",
@@ -49,6 +50,7 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@headlessui/react": "^1.7.17",
+    "@lezer/highlight": "^1.2.0",
     "@mdx-js/mdx": "3.0.1",
     "@mdx-js/react": "2.3.0",
     "@popperjs/core": "^2.11.8",

packages/markdown-editor/src/components/markdown-editor/hooks/useCodemirror.ts

@@ -66,6 +66,11 @@ export const useCodemirror = (container: RefObject<HTMLElement>, config: Config
       scrollbarGutter: 'stable',
       'overflow-x': 'hidden',
     },
+    '.cm-heading1': { fontSize: '24px' },
+    '.cm-heading2': { fontSize: '20px' },
+    '.cm-heading3': { fontSize: '18px' },
+    '.cm-heading4': { fontSize: '16px' },
+    '.cm-heading5': { fontSize: '14px' },
   })
 
   const updateListener = EditorView.updateListener.of((viewUpdate: ViewUpdate) => {

packages/markdown-editor/src/components/markdown-editor/lib/getDefaultExtensions.ts

@@ -1,6 +1,8 @@
 import { EditorState, Extension } from '@codemirror/state'
 import { EditorView, keymap, placeholder } from '@codemirror/view'
 import { indentWithTab } from '@codemirror/commands'
+import { tags } from '@lezer/highlight'
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
 import { darkTheme, lightTheme } from './theme'
 import { basicSetup, type BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup'
 import { codeKeymap } from '../toolbar/commands/code'
@@ -18,6 +20,7 @@ export type ExtensionOptions = {
   theme?: 'light' | 'dark' | 'none' | Extension
   readOnly?: boolean
   editable?: boolean
+  defaultSyntax?: boolean
 }
 
 export const getDefaultExtensions = (options: ExtensionOptions) => {
@@ -28,6 +31,7 @@ export const getDefaultExtensions = (options: ExtensionOptions) => {
     theme = 'light',
     placeholder: placeholderStr = '',
     basicSetup: defaultBasicSetup = true,
+    defaultSyntax = true,
   } = options
 
   const getExtensions: Extension[] = []
@@ -79,5 +83,17 @@ export const getDefaultExtensions = (options: ExtensionOptions) => {
     getExtensions.push(EditorState.readOnly.of(true))
   }
 
+  if (defaultSyntax) {
+    const headHighlightStyle = HighlightStyle.define([
+      { tag: tags.heading1, class: 'cm-heading1' },
+      { tag: tags.heading2, class: 'cm-heading2' },
+      { tag: tags.heading3, class: 'cm-heading3' },
+      { tag: tags.heading4, class: 'cm-heading4' },
+      { tag: tags.heading5, class: 'cm-heading5' },
+    ])
+
+    getExtensions.push(syntaxHighlighting(headHighlightStyle))
+  }
+
   return [...getExtensions]
 }

packages/markdown-editor/src/mdx-components.tsx

@@ -55,7 +55,7 @@ function HeadingLink({
           : cn(
               'nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100',
               {
-                h2: 'nx-mt-10 nx-border-b nx-pb-1 nx-text-3xl nx-border-neutral-200/70 contrast-more:nx-border-neutral-400 dark:nx-border-primary-100/10 contrast-more:dark:nx-border-neutral-400',
+                h2: 'nx-mt-10 nx-border-neutral-200/70 nx-pb-1 nx-text-3xl contrast-more:nx-border-neutral-400 dark:nx-border-primary-100/10 contrast-more:dark:nx-border-neutral-400',
                 h3: 'nx-mt-8 nx-text-2xl',
                 h4: 'nx-mt-8 nx-text-xl',
                 h5: 'nx-mt-8 nx-text-lg',
@@ -145,8 +145,8 @@ const Summary = (props: ComponentProps<'summary'>): ReactElement => {
   return (
     <summary
       className={cn(
-        'nx-flex nx-items-center nx-cursor-pointer nx-list-none nx-p-1 nx-transition-colors hover:nx-bg-gray-100 dark:hover:nx-bg-neutral-800',
-        "before:nx-mr-1 before:nx-inline-block before:nx-transition-transform before:nx-content-[''] dark:before:nx-invert before:nx-shrink-0",
+        'nx-flex nx-cursor-pointer nx-list-none nx-items-center nx-p-1 nx-transition-colors hover:nx-bg-gray-100 dark:hover:nx-bg-neutral-800',
+        "before:nx-mr-1 before:nx-inline-block before:nx-shrink-0 before:nx-transition-transform before:nx-content-[''] dark:before:nx-invert",
         'rtl:before:nx-rotate-180 [[data-expanded]>&]:before:nx-rotate-90',
       )}
       {...props}