Skip to content

Commit ad665ce

Browse files
BrunoQuaresmaBrunoQuaresma
authored
fix(site): Load monaco locally (#7092)
1 parent 17bb1a1 commit ad665ce

File tree

6 files changed

+51
-29
lines changed

6 files changed

+51
-29
lines changed

‎site/package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,15 @@
3535
"@material-ui/core": "4.12.1",
3636
"@material-ui/icons": "4.5.1",
3737
"@material-ui/lab": "4.0.0-alpha.42",
38-
"@monaco-editor/react": "4.4.6",
38+
"@monaco-editor/react": "4.5.0",
3939
"@tanstack/react-query": "4.22.4",
4040
"@testing-library/react-hooks": "8.0.1",
4141
"@types/color-convert": "2.0.0",
4242
"@types/react-color": "3.0.6",
4343
"@vitejs/plugin-react": "2.1.0",
4444
"@xstate/inspect": "0.6.5",
4545
"@xstate/react": "3.2.1",
46-
"ansi-to-html": "^0.7.2",
46+
"ansi-to-html": "0.7.2",
4747
"axios": "1.3.4",
4848
"canvas": "2.11.0",
4949
"chart.js": "3.9.1",
@@ -109,8 +109,8 @@
109109
"@types/react-dom": "18.0.6",
110110
"@types/react-helmet": "6.1.5",
111111
"@types/react-syntax-highlighter": "15.5.5",
112-
"@types/react-virtualized-auto-sizer": "^1.0.1",
113-
"@types/react-window": "^1.8.5",
112+
"@types/react-virtualized-auto-sizer": "1.0.1",
113+
"@types/react-window": "1.8.5",
114114
"@types/semver": "7.3.12",
115115
"@types/ua-parser-js": "0.7.36",
116116
"@types/uuid": "8.3.4",
@@ -136,7 +136,7 @@
136136
"jest-runner-eslint": "1.1.0",
137137
"jest-websocket-mock": "2.4.0",
138138
"jest_workaround": "0.1.14",
139-
"monaco-editor": "0.34.1",
139+
"monaco-editor": "0.37.1",
140140
"msw": "1.1.0",
141141
"prettier": "2.8.1",
142142
"resize-observer": "1.0.4",

‎site/site.go

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -321,12 +321,11 @@ func cspHeaders(next http.Handler) http.Handler {
321321
CSPDirectiveDefaultSrc: {"'self'"},
322322
CSPDirectiveConnectSrc: {"'self'"},
323323
CSPDirectiveChildSrc: {"'self'"},
324-
// https://cdn.jsdelivr.net is used by monaco editor on FE for Syntax Highlight
325324
// https://github.com/suren-atoyan/monaco-react/issues/168
326-
CSPDirectiveScriptSrc: {"'self' https://cdn.jsdelivr.net"},
327-
CSPDirectiveStyleSrc: {"'self' 'unsafe-inline' https://cdn.jsdelivr.net"},
325+
CSPDirectiveScriptSrc: {"'self'"},
326+
CSPDirectiveStyleSrc: {"'self' 'unsafe-inline'"},
328327
// data: is used by monaco editor on FE for Syntax Highlight
329-
CSPDirectiveFontSrc: {"'self' https://cdn.jsdelivr.net data:"},
328+
CSPDirectiveFontSrc: {"'self' data:"},
330329
CSPDirectiveWorkerSrc: {"'self' blob:"},
331330
// object-src is needed to support code-server
332331
CSPDirectiveObjectSrc: {"'self'"},

‎site/src/__mocks__/monaco-editor.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const editor = {
2+
defineTheme: () => {
3+
//
4+
},
5+
create: () => {
6+
return {
7+
dispose: () => {
8+
//
9+
},
10+
}
11+
},
12+
}
13+
14+
const monaco = {
15+
editor,
16+
}
17+
18+
module.exports = monaco

‎site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import { FC } from "react"
2-
import Editor, { DiffEditor } from "@monaco-editor/react"
2+
import Editor, { DiffEditor, loader } from "@monaco-editor/react"
3+
import * as monaco from "monaco-editor"
34
import { useCoderTheme } from "./coderTheme"
45
import { makeStyles } from "@material-ui/core/styles"
56

7+
loader.config({ monaco })
8+
69
export const SyntaxHighlighter: FC<{
710
value: string
811
language: string

‎site/src/components/TemplateVersionEditor/MonacoEditor.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { useTheme } from "@material-ui/core/styles"
2-
import Editor from "@monaco-editor/react"
2+
import Editor, { loader } from "@monaco-editor/react"
3+
import * as monaco from "monaco-editor"
34
import { FC, useLayoutEffect, useMemo, useState } from "react"
45
import { MONOSPACE_FONT_FAMILY } from "theme/constants"
56
import { hslToHex } from "utils/colors"
67
import type { editor } from "monaco-editor"
78

9+
loader.config({ monaco })
10+
811
export const MonacoEditor: FC<{
912
value?: string
1013
path?: string
@@ -73,7 +76,7 @@ export const MonacoEditor: FC<{
7376
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Private type in Monaco!
7477
;(editor as any)._standaloneKeybindingService.addDynamicKeybinding(
7578
`-editor.action.insertLineAfter`,
76-
undefined,
79+
monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
7780
() => {
7881
//
7982
},

‎site/yarn.lock

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1813,20 +1813,19 @@
18131813
"@types/mdx" "^2.0.0"
18141814
"@types/react" ">=16"
18151815

1816-
"@monaco-editor/loader@^1.3.2":
1817-
version "1.3.2"
1818-
resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.2.tgz#04effbb87052d19cd7d3c9d81c0635490f9bb6d8"
1819-
integrity sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==
1816+
"@monaco-editor/loader@^1.3.3":
1817+
version "1.3.3"
1818+
resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.3.3.tgz#7f1742bd3cc21c0362a46a4056317f6e5215cfca"
1819+
integrity sha512-6KKF4CTzcJiS8BJwtxtfyYt9shBiEv32ateQ9T4UVogwn4HM/uPo9iJd2Dmbkpz8CM6Y0PDUpjnZzCwC+eYo2Q==
18201820
dependencies:
18211821
state-local "^1.0.6"
18221822

1823-
"@monaco-editor/react@4.4.6":
1824-
version "4.4.6"
1825-
resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.4.6.tgz#8ae500b0edf85276d860ed702e7056c316548218"
1826-
integrity sha512-Gr3uz3LYf33wlFE3eRnta4RxP5FSNxiIV9ENn2D2/rN8KgGAD8ecvcITRtsbbyuOuNkwbuHYxfeaz2Vr+CtyFA==
1823+
"@monaco-editor/react@4.5.0":
1824+
version "4.5.0"
1825+
resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.5.0.tgz#5a581f1ce5af6597dd127ac2c0d22d15ca3f3928"
1826+
integrity sha512-VJMkp5Fe1+w8pLEq8tZPHZKu8zDXQIA1FtiDTSNccg1D3wg1YIZaH2es2Qpvop1k62g3c/YySRb3bnGXu2XwYQ==
18271827
dependencies:
1828-
"@monaco-editor/loader" "^1.3.2"
1829-
prop-types "^15.7.2"
1828+
"@monaco-editor/loader" "^1.3.3"
18301829

18311830
"@mswjs/cookies@^0.2.2":
18321831
version "0.2.2"
@@ -3324,14 +3323,14 @@
33243323
dependencies:
33253324
"@types/react" "*"
33263325

3327-
"@types/react-virtualized-auto-sizer@^1.0.1":
3326+
"@types/react-virtualized-auto-sizer@1.0.1":
33283327
version "1.0.1"
33293328
resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz#b3187dae1dfc4c15880c9cfc5b45f2719ea6ebd4"
33303329
integrity sha512-GH8sAnBEM5GV9LTeiz56r4ZhMOUSrP43tAQNSRVxNexDjcNKLCEtnxusAItg1owFUFE6k0NslV26gqVClVvong==
33313330
dependencies:
33323331
"@types/react" "*"
33333332

3334-
"@types/react-window@^1.8.5":
3333+
"@types/react-window@1.8.5":
33353334
version "1.8.5"
33363335
resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.5.tgz#285fcc5cea703eef78d90f499e1457e9b5c02fc1"
33373336
integrity sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==
@@ -4033,7 +4032,7 @@ ansi-styles@^5.0.0:
40334032
resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
40344033
integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
40354034

4036-
ansi-to-html@^0.7.2:
4035+
ansi-to-html@0.7.2:
40374036
version "0.7.2"
40384037
resolved "https://registry.yarnpkg.com/ansi-to-html/-/ansi-to-html-0.7.2.tgz#a92c149e4184b571eb29a0135ca001a8e2d710cb"
40394038
integrity sha512-v6MqmEpNlxF+POuyhKkidusCHWWkaLcGRURzivcU3I9tv7k4JVhFcnukrM5Rlk2rUywdZuzYAZ+kbZqWCnfN3g==
@@ -9019,10 +9018,10 @@ mock-socket@^9.1.0:
90199018
resolved "https://registry.yarnpkg.com/mock-socket/-/mock-socket-9.2.1.tgz#cc9c0810aa4d0afe02d721dcb2b7e657c00e2282"
90209019
integrity sha512-aw9F9T9G2zpGipLLhSNh6ZpgUyUl4frcVmRN08uE1NWPWg43Wx6+sGPDbQ7E5iFZZDJW5b5bypMeAEHqTbIFag==
90219020

9022-
monaco-editor@0.34.1:
9023-
version "0.34.1"
9024-
resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.34.1.tgz#1b75c4ad6bc4c1f9da656d740d98e0b850a22f87"
9025-
integrity sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ==
9021+
monaco-editor@0.37.1:
9022+
version "0.37.1"
9023+
resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.37.1.tgz#d6f5ffb593e019e74e19bf8a2bdef5a691876f4e"
9024+
integrity sha512-jLXEEYSbqMkT/FuJLBZAVWGuhIb4JNwHE9kPTorAVmsdZ4UzHAfgWxLsVtD7pLRFaOwYPhNG9nUCpmFL1t/dIg==
90269025

90279026
moo-color@^1.0.2:
90289027
version "1.0.3"

0 commit comments

Comments
 (0)