From 924012e21fb107f0e40f1e69733266fe5622a73e Mon Sep 17 00:00:00 2001 From: Alf Eaton Date: Tue, 18 Apr 2023 09:41:24 +0100 Subject: [PATCH] [cm6] Avoid overwriting themed syntax highlighting colours when editing Markdown (#12648) GitOrigin-RevId: ed5d558544839978862004a8b7feb80806a2100d --- package-lock.json | 14 ++++++++------ .../js/features/source-editor/extensions/theme.ts | 6 ++---- .../source-editor/languages/markdown/index.ts | 15 +++++++++++++-- services/web/package.json | 1 + 4 files changed, 24 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4a04cd367a..b37b58e3a9 100644 --- a/package-lock.json +++ b/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", diff --git a/services/web/frontend/js/features/source-editor/extensions/theme.ts b/services/web/frontend/js/features/source-editor/extensions/theme.ts index 39379f4777..19e059e4de 100644 --- a/services/web/frontend/js/features/source-editor/extensions/theme.ts +++ b/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 }), ] } diff --git a/services/web/frontend/js/features/source-editor/languages/markdown/index.ts b/services/web/frontend/js/features/source-editor/languages/markdown/index.ts index e59e429a4c..4234ac8bc0 100644 --- a/services/web/frontend/js/features/source-editor/languages/markdown/index.ts +++ b/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' }, +]) diff --git a/services/web/package.json b/services/web/package.json index ca52f71b1e..b431ce4098 100644 --- a/services/web/package.json +++ b/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",