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 +