[cm6] Avoid overwriting themed syntax highlighting colours when editing Markdown (#12648)

GitOrigin-RevId: ed5d558544839978862004a8b7feb80806a2100d

package-lock.json

@@ -5199,9 +5199,9 @@
       }
     },
     "node_modules/@lezer/markdown": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.0.1.tgz",
-      "integrity": "sha512-LlpNWLqes3XQvd8TwpJTHf9ENl4fI6H32xQkMgltUITFMMdQpOASXQtDawWR03yS6hskh4bkhATQbgjdGMoUvA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.0.2.tgz",
+      "integrity": "sha512-8CY0OoZ6V5EzPjSPeJ4KLVbtXdLBd8V6sRCooN5kHnO28ytreEGTyrtU/zUwo/XLRzGr/e1g44KlzKi3yWGB5A==",
       "dependencies": {
         "@lezer/common": "^1.0.0",
         "@lezer/highlight": "^1.0.0"
@@ -35105,6 +35105,7 @@
         "@lezer/common": "^1.0.2",
         "@lezer/highlight": "^1.1.3",
         "@lezer/lr": "^1.3.3",
+        "@lezer/markdown": "^1.0.2",
         "@node-oauth/oauth2-server": "^4.3.0",
         "@opentelemetry/api": "^1.0.4",
         "@opentelemetry/auto-instrumentations-web": "^0.27.2",
@@ -41539,9 +41540,9 @@
       }
     },
     "@lezer/markdown": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.0.1.tgz",
-      "integrity": "sha512-LlpNWLqes3XQvd8TwpJTHf9ENl4fI6H32xQkMgltUITFMMdQpOASXQtDawWR03yS6hskh4bkhATQbgjdGMoUvA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.0.2.tgz",
+      "integrity": "sha512-8CY0OoZ6V5EzPjSPeJ4KLVbtXdLBd8V6sRCooN5kHnO28ytreEGTyrtU/zUwo/XLRzGr/e1g44KlzKi3yWGB5A==",
       "requires": {
         "@lezer/common": "^1.0.0",
         "@lezer/highlight": "^1.0.0"
@@ -44784,6 +44785,7 @@
         "@lezer/generator": "^1.1.3",
         "@lezer/highlight": "^1.1.3",
         "@lezer/lr": "^1.3.3",
+        "@lezer/markdown": "^1.0.2",
         "@node-oauth/oauth2-server": "^4.3.0",
         "@opentelemetry/api": "^1.0.4",
         "@opentelemetry/auto-instrumentations-web": "^0.27.2",

services/web/frontend/js/features/source-editor/extensions/theme.ts

@@ -1,6 +1,6 @@
 import { EditorView } from '@codemirror/view'
 import { Annotation, Compartment, TransactionSpec } from '@codemirror/state'
-import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import { syntaxHighlighting } from '@codemirror/language'
 import { classHighlighter } from './class-highlighter'
 
 const optionsThemeConf = new Compartment()
@@ -263,8 +263,6 @@ const loadSelectedTheme = async (editorTheme: string) => {
 
   return [
     EditorView.theme(theme, { dark }),
-    highlightStyle
-      ? EditorView.theme(highlightStyle, { dark })
-      : syntaxHighlighting(defaultHighlightStyle, { fallback: true }), // use the default highlight style if none is provided
+    EditorView.theme(highlightStyle, { dark }),
   ]
 }

services/web/frontend/js/features/source-editor/languages/markdown/index.ts

@@ -1,15 +1,26 @@
 import { markdown as markdownLanguage } from '@codemirror/lang-markdown'
-import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language'
 import { shortcuts } from './shortcuts'
 import { languages } from '../index'
 import { Extension } from '@codemirror/state'
+import { Strikethrough } from '@lezer/markdown'
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import { tags } from '@lezer/highlight'
 
 export const markdown = (): Extension => {
   return [
     markdownLanguage({
       codeLanguages: languages,
+      extensions: [Strikethrough],
     }),
     shortcuts(),
-    syntaxHighlighting(defaultHighlightStyle),
+    syntaxHighlighting(markdownHighlightStyle),
   ]
 }
+
+const markdownHighlightStyle = HighlightStyle.define([
+  { tag: tags.link, textDecoration: 'underline' },
+  { tag: tags.heading, textDecoration: 'underline', fontWeight: 'bold' },
+  { tag: tags.emphasis, fontStyle: 'italic' },
+  { tag: tags.strong, fontWeight: 'bold' },
+  { tag: tags.strikethrough, textDecoration: 'line-through' },
+])

services/web/package.json

@@ -85,6 +85,7 @@
     "@lezer/common": "^1.0.2",
     "@lezer/highlight": "^1.1.3",
     "@lezer/lr": "^1.3.3",
+    "@lezer/markdown": "^1.0.2",
     "@node-oauth/oauth2-server": "^4.3.0",
     "@opentelemetry/api": "^1.0.4",
     "@opentelemetry/auto-instrumentations-web": "^0.27.2",