diff --git a/site/package.json b/site/package.json index eab6d18b6008c..20e6992413f8d 100644 --- a/site/package.json +++ b/site/package.json @@ -35,7 +35,7 @@ "@material-ui/core": "4.12.1", "@material-ui/icons": "4.5.1", "@material-ui/lab": "4.0.0-alpha.42", - "@monaco-editor/react": "4.4.6", + "@monaco-editor/react": "4.5.0", "@tanstack/react-query": "4.22.4", "@testing-library/react-hooks": "8.0.1", "@types/color-convert": "2.0.0", @@ -43,7 +43,7 @@ "@vitejs/plugin-react": "2.1.0", "@xstate/inspect": "0.6.5", "@xstate/react": "3.2.1", - "ansi-to-html": "^0.7.2", + "ansi-to-html": "0.7.2", "axios": "1.3.4", "canvas": "2.11.0", "chart.js": "3.9.1", @@ -109,8 +109,8 @@ "@types/react-dom": "18.0.6", "@types/react-helmet": "6.1.5", "@types/react-syntax-highlighter": "15.5.5", - "@types/react-virtualized-auto-sizer": "^1.0.1", - "@types/react-window": "^1.8.5", + "@types/react-virtualized-auto-sizer": "1.0.1", + "@types/react-window": "1.8.5", "@types/semver": "7.3.12", "@types/ua-parser-js": "0.7.36", "@types/uuid": "8.3.4", @@ -136,7 +136,7 @@ "jest-runner-eslint": "1.1.0", "jest-websocket-mock": "2.4.0", "jest_workaround": "0.1.14", - "monaco-editor": "0.34.1", + "monaco-editor": "0.37.1", "msw": "1.1.0", "prettier": "2.8.1", "resize-observer": "1.0.4", diff --git a/site/site.go b/site/site.go index b9143c9801239..168dd028929f9 100644 --- a/site/site.go +++ b/site/site.go @@ -321,12 +321,11 @@ func cspHeaders(next http.Handler) http.Handler { CSPDirectiveDefaultSrc: {"'self'"}, CSPDirectiveConnectSrc: {"'self'"}, CSPDirectiveChildSrc: {"'self'"}, - // https://cdn.jsdelivr.net is used by monaco editor on FE for Syntax Highlight // https://github.com/suren-atoyan/monaco-react/issues/168 - CSPDirectiveScriptSrc: {"'self' https://cdn.jsdelivr.net"}, - CSPDirectiveStyleSrc: {"'self' 'unsafe-inline' https://cdn.jsdelivr.net"}, + CSPDirectiveScriptSrc: {"'self'"}, + CSPDirectiveStyleSrc: {"'self' 'unsafe-inline'"}, // data: is used by monaco editor on FE for Syntax Highlight - CSPDirectiveFontSrc: {"'self' https://cdn.jsdelivr.net data:"}, + CSPDirectiveFontSrc: {"'self' data:"}, CSPDirectiveWorkerSrc: {"'self' blob:"}, // object-src is needed to support code-server CSPDirectiveObjectSrc: {"'self'"}, diff --git a/site/src/__mocks__/monaco-editor.ts b/site/src/__mocks__/monaco-editor.ts new file mode 100644 index 0000000000000..6cde413c39853 --- /dev/null +++ b/site/src/__mocks__/monaco-editor.ts @@ -0,0 +1,18 @@ +const editor = { + defineTheme: () => { + // + }, + create: () => { + return { + dispose: () => { + // + }, + } + }, +} + +const monaco = { + editor, +} + +module.exports = monaco diff --git a/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx b/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx index 5eefc1b60de1d..343ff30d95268 100644 --- a/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx +++ b/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx @@ -1,8 +1,11 @@ import { FC } from "react" -import Editor, { DiffEditor } from "@monaco-editor/react" +import Editor, { DiffEditor, loader } from "@monaco-editor/react" +import * as monaco from "monaco-editor" import { useCoderTheme } from "./coderTheme" import { makeStyles } from "@material-ui/core/styles" +loader.config({ monaco }) + export const SyntaxHighlighter: FC<{ value: string language: string diff --git a/site/src/components/TemplateVersionEditor/MonacoEditor.tsx b/site/src/components/TemplateVersionEditor/MonacoEditor.tsx index d86a5f778dcba..8fc42420b2333 100644 --- a/site/src/components/TemplateVersionEditor/MonacoEditor.tsx +++ b/site/src/components/TemplateVersionEditor/MonacoEditor.tsx @@ -1,10 +1,13 @@ import { useTheme } from "@material-ui/core/styles" -import Editor from "@monaco-editor/react" +import Editor, { loader } from "@monaco-editor/react" +import * as monaco from "monaco-editor" import { FC, useLayoutEffect, useMemo, useState } from "react" import { MONOSPACE_FONT_FAMILY } from "theme/constants" import { hslToHex } from "utils/colors" import type { editor } from "monaco-editor" +loader.config({ monaco }) + export const MonacoEditor: FC<{ value?: string path?: string @@ -73,7 +76,7 @@ export const MonacoEditor: FC<{ // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Private type in Monaco! ;(editor as any)._standaloneKeybindingService.addDynamicKeybinding( `-editor.action.insertLineAfter`, - undefined, + monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => { // }, diff --git a/site/yarn.lock b/site/yarn.lock index ef3221ce9cec9..6dbc022e88f9e 100644 --- a/site/yarn.lock +++ b/site/yarn.lock @@ -1813,20 +1813,19 @@ "@types/mdx" "^2.0.0" "@types/react" ">=16" -"@monaco-editor/loader@^1.3.2": - version "1.3.2" - resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.2.tgz#04effbb87052d19cd7d3c9d81c0635490f9bb6d8" - integrity sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g== +"@monaco-editor/loader@^1.3.3": + version "1.3.3" + resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.3.tgz#7f1742bd3cc21c0362a46a4056317f6e5215cfca" + integrity sha512-6KKF4CTzcJiS8BJwtxtfyYt9shBiEv32ateQ9T4UVogwn4HM/uPo9iJd2Dmbkpz8CM6Y0PDUpjnZzCwC+eYo2Q== dependencies: state-local "^1.0.6" -"@monaco-editor/react@4.4.6": - version "4.4.6" - resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.4.6.tgz#8ae500b0edf85276d860ed702e7056c316548218" - integrity sha512-Gr3uz3LYf33wlFE3eRnta4RxP5FSNxiIV9ENn2D2/rN8KgGAD8ecvcITRtsbbyuOuNkwbuHYxfeaz2Vr+CtyFA== +"@monaco-editor/react@4.5.0": + version "4.5.0" + resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.5.0.tgz#5a581f1ce5af6597dd127ac2c0d22d15ca3f3928" + integrity sha512-VJMkp5Fe1+w8pLEq8tZPHZKu8zDXQIA1FtiDTSNccg1D3wg1YIZaH2es2Qpvop1k62g3c/YySRb3bnGXu2XwYQ== dependencies: - "@monaco-editor/loader" "^1.3.2" - prop-types "^15.7.2" + "@monaco-editor/loader" "^1.3.3" "@mswjs/cookies@^0.2.2": version "0.2.2" @@ -3324,14 +3323,14 @@ dependencies: "@types/react" "*" -"@types/react-virtualized-auto-sizer@^1.0.1": +"@types/react-virtualized-auto-sizer@1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz#b3187dae1dfc4c15880c9cfc5b45f2719ea6ebd4" integrity sha512-GH8sAnBEM5GV9LTeiz56r4ZhMOUSrP43tAQNSRVxNexDjcNKLCEtnxusAItg1owFUFE6k0NslV26gqVClVvong== dependencies: "@types/react" "*" -"@types/react-window@^1.8.5": +"@types/react-window@1.8.5": version "1.8.5" resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.5.tgz#285fcc5cea703eef78d90f499e1457e9b5c02fc1" integrity sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw== @@ -4033,7 +4032,7 @@ ansi-styles@^5.0.0: resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b" integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA== -ansi-to-html@^0.7.2: +ansi-to-html@0.7.2: version "0.7.2" resolved "https://registry.yarnpkg.com/ansi-to-html/-/ansi-to-html-0.7.2.tgz#a92c149e4184b571eb29a0135ca001a8e2d710cb" integrity sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g== @@ -9019,10 +9018,10 @@ mock-socket@^9.1.0: resolved "https://registry.yarnpkg.com/mock-socket/-/mock-socket-9.2.1.tgz#cc9c0810aa4d0afe02d721dcb2b7e657c00e2282" integrity sha512-aw9F9T9G2zpGipLLhSNh6ZpgUyUl4frcVmRN08uE1NWPWg43Wx6+sGPDbQ7E5iFZZDJW5b5bypMeAEHqTbIFag== -monaco-editor@0.34.1: - version "0.34.1" - resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.34.1.tgz#1b75c4ad6bc4c1f9da656d740d98e0b850a22f87" - integrity sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ== +monaco-editor@0.37.1: + version "0.37.1" + resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.37.1.tgz#d6f5ffb593e019e74e19bf8a2bdef5a691876f4e" + integrity sha512-jLXEEYSbqMkT/FuJLBZAVWGuhIb4JNwHE9kPTorAVmsdZ4UzHAfgWxLsVtD7pLRFaOwYPhNG9nUCpmFL1t/dIg== moo-color@^1.0.2: version "1.0.3"