131744 overwrite textDecoration to none

packages/editor/package.json

@@ -23,6 +23,7 @@
   "devDependencies": {
     "@codemirror/lang-markdown": "^6.2.0",
     "@codemirror/language-data": "^6.3.1",
+    "@codemirror/language": "^6.8.0",
     "@codemirror/state": "^6.2.1",
     "@codemirror/view": "^6.15.3",
     "@popperjs/core": "^2.11.8",

packages/editor/src/services/codemirror-editor/use-codemirror-editor/use-codemirror-editor.ts

@@ -2,9 +2,11 @@ import { useMemo } from 'react';
 
 import { indentWithTab, defaultKeymap } from '@codemirror/commands';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { syntaxHighlighting, HighlightStyle, defaultHighlightStyle } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
 import { EditorState, Prec, type Extension } from '@codemirror/state';
 import { keymap, EditorView } from '@codemirror/view';
+import { tags } from '@lezer/highlight';
 import { useCodeMirror, type UseCodeMirror } from '@uiw/react-codemirror';
 import deepmerge from 'ts-deepmerge';
 
@@ -14,6 +16,15 @@ import { useGetDoc, type GetDoc } from './utils/get-doc';
 import { useInitDoc, type InitDoc } from './utils/init-doc';
 import { useSetCaretLine, type SetCaretLine } from './utils/set-caret-line';
 
+const markdownHighlighting = HighlightStyle.define([
+  { tag: tags.heading1, fontSize: '1.9em', textDecoration: 'none' },
+  { tag: tags.heading2, fontSize: '1.6em', textDecoration: 'none' },
+  { tag: tags.heading3, fontSize: '1.4em', textDecoration: 'none' },
+  { tag: tags.heading4, fontSize: '1.35em', textDecoration: 'none' },
+  { tag: tags.heading5, fontSize: '1.25em', textDecoration: 'none' },
+  { tag: tags.heading6, fontSize: '1.2em', textDecoration: 'none' },
+]);
+
 type UseCodeMirrorEditorUtils = {
   initDoc: InitDoc,
   appendExtensions: AppendExtensions,
@@ -31,6 +42,8 @@ const defaultExtensions: Extension[] = [
   markdown({ base: markdownLanguage, codeLanguages: languages }),
   keymap.of([indentWithTab]),
   Prec.lowest(keymap.of(defaultKeymap)),
+  Prec.highest(syntaxHighlighting(markdownHighlighting)),
+  Prec.lowest(syntaxHighlighting(defaultHighlightStyle)),
 ];
 
 export const useCodeMirrorEditor = (props?: UseCodeMirror): UseCodeMirrorEditor => {