diff --git a/app/components/code-mirror.hbs b/app/components/code-mirror.hbs
index 6591a281e..e243f23ef 100644
--- a/app/components/code-mirror.hbs
+++ b/app/components/code-mirror.hbs
@@ -11,6 +11,7 @@
{{did-update this.optionDidChange "editable" @editable}}
{{did-update this.optionDidChange "foldGutter" @foldGutter}}
{{did-update this.optionDidChange "highlightActiveLine" @highlightActiveLine}}
+ {{did-update this.optionDidChange "highlightNewlines" @highlightNewlines}}
{{did-update this.optionDidChange "highlightSelectionMatches" @highlightSelectionMatches}}
{{did-update this.optionDidChange "highlightSpecialChars" @highlightSpecialChars}}
{{did-update this.optionDidChange "highlightTrailingWhitespace" @highlightTrailingWhitespace}}
diff --git a/app/components/code-mirror.ts b/app/components/code-mirror.ts
index d0d9652ab..41112dfb3 100644
--- a/app/components/code-mirror.ts
+++ b/app/components/code-mirror.ts
@@ -36,6 +36,7 @@ import {
} from '@codemirror/language';
import { languages } from '@codemirror/language-data';
import { markdown } from '@codemirror/lang-markdown';
+import { highlightNewlines } from 'codecrafters-frontend/utils/code-mirror-highlight-newlines';
function generateHTMLElement(src: string): HTMLElement {
const div = document.createElement('div');
@@ -65,6 +66,7 @@ const OPTION_HANDLERS: { [key: string]: OptionHandler } = {
dropCursor: ({ dropCursor: enabled }) => (enabled ? [dropCursor()] : []),
editable: ({ editable }) => [EditorView.editable.of(!!editable)],
highlightActiveLine: ({ highlightActiveLine: enabled }) => (enabled ? [highlightActiveLine(), highlightActiveLineGutter()] : []),
+ highlightNewlines: ({ highlightNewlines: enabled }) => (enabled ? [highlightNewlines()] : []),
highlightSelectionMatches: ({ highlightSelectionMatches: enabled }) => (enabled ? [highlightSelectionMatches()] : []),
highlightSpecialChars: ({ highlightSpecialChars: enabled }) => (enabled ? [highlightSpecialChars()] : []),
highlightTrailingWhitespace: ({ highlightTrailingWhitespace: enabled }) => (enabled ? [highlightTrailingWhitespace()] : []),
@@ -228,6 +230,10 @@ export interface Signature {
* Enable inline highlighting of changes in the diff
*/
highlightChanges?: boolean;
+ /**
+ * Enable highlighting of new line symbols
+ */
+ highlightNewlines?: boolean;
/**
* Enable highlighting of current selection matches in the document
*/
diff --git a/app/controllers/demo/code-mirror.ts b/app/controllers/demo/code-mirror.ts
index 7ac788457..10b4b981f 100644
--- a/app/controllers/demo/code-mirror.ts
+++ b/app/controllers/demo/code-mirror.ts
@@ -43,6 +43,7 @@ const OPTION_DEFAULTS = {
foldGutter: true,
highlightActiveLine: true,
highlightChanges: false,
+ highlightNewlines: false,
highlightSelectionMatches: true,
highlightSpecialChars: true,
highlightTrailingWhitespace: true,
@@ -97,6 +98,7 @@ export default class DemoCodeMirrorController extends Controller {
'foldGutter',
'highlightActiveLine',
'highlightChanges',
+ 'highlightNewlines',
'highlightSelectionMatches',
'highlightSpecialChars',
'highlightTrailingWhitespace',
@@ -147,6 +149,7 @@ export default class DemoCodeMirrorController extends Controller {
@tracked foldGutter = OPTION_DEFAULTS.foldGutter;
@tracked highlightActiveLine = OPTION_DEFAULTS.highlightActiveLine;
@tracked highlightChanges = OPTION_DEFAULTS.highlightChanges;
+ @tracked highlightNewlines = OPTION_DEFAULTS.highlightNewlines;
@tracked highlightSelectionMatches = OPTION_DEFAULTS.highlightSelectionMatches;
@tracked highlightSpecialChars = OPTION_DEFAULTS.highlightSpecialChars;
@tracked highlightTrailingWhitespace = OPTION_DEFAULTS.highlightTrailingWhitespace;
diff --git a/app/routes/demo/code-mirror.ts b/app/routes/demo/code-mirror.ts
index 3d7d99e6e..76caf6fa7 100644
--- a/app/routes/demo/code-mirror.ts
+++ b/app/routes/demo/code-mirror.ts
@@ -15,6 +15,7 @@ const QUERY_PARAMS = [
'foldGutter',
'highlightActiveLine',
'highlightChanges',
+ 'highlightNewlines',
'highlightSelectionMatches',
'highlightSpecialChars',
'highlightTrailingWhitespace',
diff --git a/app/templates/demo/code-mirror.hbs b/app/templates/demo/code-mirror.hbs
index a0045a64a..5696def42 100644
--- a/app/templates/demo/code-mirror.hbs
+++ b/app/templates/demo/code-mirror.hbs
@@ -260,6 +260,10 @@
highlightTrailingWhitespace
+