From 695e0e1961be15a342675f0fabb2402491cbc4b1 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 11 Apr 2023 17:54:22 +0000 Subject: [PATCH 1/2] fix(site): Load monaco locally --- site/package.json | 20 +++---- site/site.go | 7 +-- .../SyntaxHighlighter/SyntaxHighlighter.tsx | 5 +- .../TemplateVersionEditor/MonacoEditor.tsx | 7 ++- site/yarn.lock | 55 +++++++++---------- 5 files changed, 49 insertions(+), 45 deletions(-) diff --git a/site/package.json b/site/package.json index a0a411c50d33c..4474a05031f69 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", @@ -54,7 +54,7 @@ "date-fns": "2.29.3", "dayjs": "1.11.4", "emoji-mart": "5.4.0", - "eslint-plugin-testing-library": "^5.10.2", + "eslint-plugin-testing-library": "5.10.2", "eventsourcemock": "2.0.0", "formik": "2.2.9", "front-matter": "4.0.2", @@ -75,8 +75,8 @@ "react-markdown": "8.0.3", "react-router-dom": "6.4.1", "react-syntax-highlighter": "15.5.0", - "react-virtualized-auto-sizer": "^1.0.7", - "react-window": "^1.8.8", + "react-virtualized-auto-sizer": "1.0.7", + "react-window": "1.8.8", "remark-gfm": "3.0.1", "rollup-plugin-visualizer": "5.9.0", "sourcemapped-stacktrace": "1.1.11", @@ -108,8 +108,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", @@ -134,13 +134,13 @@ "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", "semver": "7.3.7", - "storybook-addon-mock": "^3.2.0", - "storybook-react-context": "^0.6.0", + "storybook-addon-mock": "3.2.0", + "storybook-react-context": "0.6.0", "typescript": "4.8.2" }, "browserslist": [ 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/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 a64b26b7112f4..2dcdcd75d225d 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 "util/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 91933410808f4..9b09d63455d8c 100644 --- a/site/yarn.lock +++ b/site/yarn.lock @@ -1758,20 +1758,19 @@ resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.22.tgz#219dfd89ae5b97a8801f015323ffa4b62f45718b" integrity sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA== -"@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" "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" @@ -3495,14 +3494,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== @@ -4495,6 +4494,13 @@ 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: + 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== + dependencies: + entities "^2.2.0" + ansi-to-html@^0.6.11: version "0.6.15" resolved "https://registry.yarnpkg.com/ansi-to-html/-/ansi-to-html-0.6.15.tgz#ac6ad4798a00f6aa045535d7f6a9cb9294eebea7" @@ -4502,13 +4508,6 @@ ansi-to-html@^0.6.11: dependencies: entities "^2.0.0" -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== - dependencies: - entities "^2.2.0" - any-promise@^1.1.0, any-promise@~1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f" @@ -7089,7 +7088,7 @@ eslint-plugin-react@7.31.1: semver "^6.3.0" string.prototype.matchall "^4.0.7" -eslint-plugin-testing-library@^5.10.2: +eslint-plugin-testing-library@5.10.2: version "5.10.2" resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.10.2.tgz#12f231ad9b52b6aef45c801fd00aa129a932e0c2" integrity sha512-f1DmDWcz5SDM+IpCkEX0lbFqrrTs8HRsEElzDEqN/EBI0hpRj8Cns5+IVANXswE8/LeybIJqPAOQIFu2j5Y5sw== @@ -11142,10 +11141,10 @@ mock-xmlhttprequest@^7.0.3: resolved "https://registry.yarnpkg.com/mock-xmlhttprequest/-/mock-xmlhttprequest-7.0.4.tgz#5e188da009cf46900e522f690cbea8d26274a872" integrity sha512-hA0fIHy/74p5DE0rdmrpU0sV1U+gnWTcgShWequGRLy0L1eT+zY0ozFukawpLaxMwIA+orRcqFRElYwT+5p81A== -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" @@ -12674,12 +12673,12 @@ react-transition-group@^4.4.0: loose-envify "^1.4.0" prop-types "^15.6.2" -react-virtualized-auto-sizer@^1.0.7: +react-virtualized-auto-sizer@1.0.7: version "1.0.7" resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.7.tgz#bfb8414698ad1597912473de3e2e5f82180c1195" integrity sha512-Mxi6lwOmjwIjC1X4gABXMJcKHsOo0xWl3E3ugOgufB8GJU+MqrtY35aBuvCYv/razQ1Vbp7h1gWJjGjoNN5pmA== -react-window@^1.8.8: +react-window@1.8.8: version "1.8.8" resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.8.tgz#1b52919f009ddf91970cbdb2050a6c7be44df243" integrity sha512-D4IiBeRtGXziZ1n0XklnFGu7h9gU684zepqyKzgPNzrsrk7xOCxni+TCckjg2Nr/DiaEEGVVmnhYSlT2rB47dQ== @@ -13750,7 +13749,7 @@ store2@^2.12.0: resolved "https://registry.yarnpkg.com/store2/-/store2-2.14.2.tgz#56138d200f9fe5f582ad63bc2704dbc0e4a45068" integrity sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w== -storybook-addon-mock@^3.2.0: +storybook-addon-mock@3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/storybook-addon-mock/-/storybook-addon-mock-3.2.0.tgz#5832b1e49ff39ffab7a0ae8ec7de8bfdb8ddea45" integrity sha512-LaggsF/6Lt0AyHiotIEVQpwKfIiZ3KsNqtdXKVnIdOetjaD7GaOQeX0jIZiZUFX/i6QLmMuNoXFngqqkdVtfSg== @@ -13759,7 +13758,7 @@ storybook-addon-mock@^3.2.0: path-to-regexp "^6.2.0" polished "^4.2.2" -storybook-react-context@^0.6.0: +storybook-react-context@0.6.0: version "0.6.0" resolved "https://registry.yarnpkg.com/storybook-react-context/-/storybook-react-context-0.6.0.tgz#06c7b48dc95f4619cf12e59429305fbd6f2b1373" integrity sha512-6IOUbSoC1WW68x8zQBEh8tZsVXjEvOBSJSOhkaD9o8IF9caIg/o1jnwuGibdyAd47ARN6g95O0N0vFBjXcB7pA== From aa85819f77e5b66d8dbc7e1fb7b98872fd3f3ca2 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 11 Apr 2023 18:10:10 +0000 Subject: [PATCH 2/2] Mock monaco-editor --- site/src/__mocks__/monaco-editor.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 site/src/__mocks__/monaco-editor.ts 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