Adding CodeMirror editor for code highlighting and editing #2279
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Removed previous code highlighter
johnsimons
force-pushed
the
john/codemirror
branch
from
8291c8a to
e2365cc
Compare
johnsimons
commented
Mar 17, 2025
Comment on lines
-107
to
-130
| function isContentTypeSupported(contentType: string | undefined) { | ||
| if (contentType === undefined) return false; | ||
|
|
||
| if (contentType.startsWith("text/")) return true; | ||
|
|
||
| const charsetUtf8 = "; charset=utf-8"; | ||
|
|
||
| if (contentType.endsWith(charsetUtf8)) { | ||
| contentType = contentType.substring(0, contentType.length - charsetUtf8.length); | ||
| } | ||
|
|
||
| if (contentType === "application/json") return true; | ||
|
|
||
| if (contentType.startsWith("application/")) { | ||
| // Some examples: | ||
| // application/atom+xml | ||
| // application/ld+json | ||
| // application/vnd.masstransit+json | ||
| if (contentType.endsWith("+json") || contentType.endsWith("+xml")) return true; | ||
| } | ||
|
|
||
| return false; | ||
| } | ||
|
|
There was a problem hiding this comment.
Refactor so it can be reused
johnsimons
commented
Mar 17, 2025
| @@ -0,0 +1 @@ | |||
| export type CodeLanguage = "json" | "xml" | "shell" | "powershell" | "csharp"; | |||
There was a problem hiding this comment.
At the moment these are the only languages supported, we can add more later if needed
johnsimons
commented
Mar 17, 2025
| } | ||
|
|
||
| // taken from https://github.com/krtnio/angular-pretty-xml/blob/master/src/angular-pretty-xml.js | ||
| function formatXml(xml: string) { |
There was a problem hiding this comment.
I found a lib that does the formatting for xml.
I tested a message with xml serialization, and everything works correctly.
johnsimons
commented
Mar 17, 2025
Comment on lines
+8
to
+32
| function getBoundingClientRect(): DOMRect { | ||
| const rec = { | ||
| x: 0, | ||
| y: 0, | ||
| bottom: 0, | ||
| height: 0, | ||
| left: 0, | ||
| right: 0, | ||
| top: 0, | ||
| width: 0, | ||
| }; | ||
| return { ...rec, toJSON: () => rec }; | ||
| } | ||
|
|
||
| class FakeDOMRectList extends Array<DOMRect> implements DOMRectList { | ||
| item(index: number): DOMRect | null { | ||
| return this[index]; | ||
| } | ||
| } | ||
|
|
||
| document.elementFromPoint = (): null => null; | ||
| HTMLElement.prototype.getBoundingClientRect = getBoundingClientRect; | ||
| HTMLElement.prototype.getClientRects = (): DOMRectList => new FakeDOMRectList(); | ||
| Range.prototype.getBoundingClientRect = getBoundingClientRect; | ||
| Range.prototype.getClientRects = (): DOMRectList => new FakeDOMRectList(); |
There was a problem hiding this comment.
Ran into jsdom/jsdom#3729 (comment) so I used that fix mentioned there
PhilBastian
approved these changes
Mar 17, 2025
| @@ -0,0 +1 @@ | |||
| export type CodeLanguage = "json" | "xml" | "shell" | "powershell" | "csharp"; | |||
|
|
||
| <template> | ||
| <div class="wrapper" :aria-label="ariaLabel"> | ||
| <div v-if="props.showCopyToClipboard" class="toolbar"> |
There was a problem hiding this comment.
comment here to explain that the copy on CodeMirror doesn't seem to work so we rolled our own
There was a problem hiding this comment.
Well, out of the box, there is no copy button.
The last time I looked at a plugin option, I can't remember which one.
So, we don't need a comment here to spell that out.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds CodeMirror as the code editor and syntax highlighter.
I changed the stack trace to use the editor. At the moment, the syntax highlighter for the stack trace uses the "PowerShell" language, which highlights it slightly but not super nicely. We can write a custom language for it later.
Also added syntax highlighting to the message body in both view and editing mode.
For editing mode, we can add lint so that it helps the user avoid syntax mistakes. See https://codemirror.net/examples/lint/
The editor has: