diff --git a/web/package.json b/web/package.json index 8d35f20a8..de6df6a20 100644 --- a/web/package.json +++ b/web/package.json @@ -49,6 +49,7 @@ "@harness/uicore": "3.106.3", "@harness/use-modal": "1.1.0", "@popperjs/core": "^2.4.2", + "@types/react-monaco-editor": "^0.16.0", "@uiw/codemirror-extensions-color": "^4.19.9", "@uiw/codemirror-extensions-hyper-link": "^4.19.9", "@uiw/codemirror-themes-all": "^4.19.9", @@ -69,14 +70,16 @@ "masonry-layout": "^4.2.2", "moment": "^2.25.3", "moment-range": "^4.0.2", - "monaco-editor": "^0.19.2", - "monaco-editor-core": "0.15.5", - "monaco-languages": "1.6.0", + "monaco-editor": "^0.37.1", + "monaco-editor-core": "^0.37.1", + "monaco-editor-webpack-plugin": "^7.0.1", + "monaco-languages": "^2.11.1", "monaco-plugin-helpers": "^1.0.2", "qs": "^6.9.4", "react": "^17.0.2", "react-complex-tree": "^1.1.11", "react-contenteditable": "^3.3.5", + "react-cool-dimensions": "^3.0.1", "react-dom": "^17.0.2", "react-draggable": "^4.4.2", "react-intersection-observer": "^9.4.1", @@ -84,7 +87,7 @@ "react-jsx-match": "^1.1.5", "react-keywords": "^0.0.5", "react-markdown": "^8.0.3", - "react-monaco-editor": "^0.34.0", + "react-monaco-editor": "^0.52.0", "react-resize-detector": "^7.1.2", "react-router-dom": "^5.2.0", "react-split-pane": "^0.1.92", @@ -125,7 +128,6 @@ "@types/react": "^17.0.3", "@types/react-beautiful-dnd": "^13.0.0", "@types/react-dom": "^17.0.3", - "@types/react-monaco-editor": "^0.16.0", "@types/react-router-dom": "^5.1.7", "@types/react-table": "^7.0.18", "@types/react-timeago": "^4.1.1", @@ -165,7 +167,6 @@ "lighthouse": "^6.5.0", "lint-staged": "^11.0.0", "mini-css-extract-plugin": "^2.4.2", - "monaco-editor-webpack-plugin": "1.8.*", "mustache": "^4.0.1", "npm-run-all": "^4.1.5", "nyc": "^15.1.0", diff --git a/web/src/components/MarkdownViewer/MarkdownViewer.module.scss b/web/src/components/MarkdownViewer/MarkdownViewer.module.scss index 7beae28e2..aac2add6c 100644 --- a/web/src/components/MarkdownViewer/MarkdownViewer.module.scss +++ b/web/src/components/MarkdownViewer/MarkdownViewer.module.scss @@ -1,7 +1,11 @@ @import 'src/utils/utils'; .main { - overflow: auto; + overflow: hidden; + + &.withMaxHeight { + overflow: auto; + } :global { .wmde-markdown { diff --git a/web/src/components/MarkdownViewer/MarkdownViewer.module.scss.d.ts b/web/src/components/MarkdownViewer/MarkdownViewer.module.scss.d.ts index 9e614bf2d..de7f5e2f4 100644 --- a/web/src/components/MarkdownViewer/MarkdownViewer.module.scss.d.ts +++ b/web/src/components/MarkdownViewer/MarkdownViewer.module.scss.d.ts @@ -2,5 +2,6 @@ // this is an auto-generated file declare const styles: { readonly main: string + readonly withMaxHeight: string } export default styles diff --git a/web/src/components/MarkdownViewer/MarkdownViewer.tsx b/web/src/components/MarkdownViewer/MarkdownViewer.tsx index 18d705669..b1e16dbd6 100644 --- a/web/src/components/MarkdownViewer/MarkdownViewer.tsx +++ b/web/src/components/MarkdownViewer/MarkdownViewer.tsx @@ -59,7 +59,7 @@ export function MarkdownViewer({ source, className, maxHeight }: MarkdownViewerP return ( 0 })} onClick={interceptClickEventOnViewerContainer} style={{ maxHeight: maxHeight }}> { if (autoHeight) { - autoAdjustEditorHeight(_editor) + // autoAdjustEditorHeight(_editor) } setEditor(_editor) }} @@ -135,9 +135,13 @@ export function DiffEditor({ height={height} options={{ ...MonacoEditorOptions, + smartSelect: { + selectLeadingAndTrailingWhitespace: true + }, readOnly, wordWrap: toOnOff(wordWrap), lineNumbers: toOnOff(lineNumbers), + originalEditable: false, scrollbar: { vertical: 'auto', horizontal: 'auto', diff --git a/web/src/pages/RepositoryFileEdit/FileEditor/FileEditor.module.scss b/web/src/pages/RepositoryFileEdit/FileEditor/FileEditor.module.scss index 0deab39b9..70a7e833c 100644 --- a/web/src/pages/RepositoryFileEdit/FileEditor/FileEditor.module.scss +++ b/web/src/pages/RepositoryFileEdit/FileEditor/FileEditor.module.scss @@ -5,9 +5,6 @@ background-color: var(--white) !important; margin-top: 0 !important; - // box-shadow: 0px 0px 1px rgba(40, 41, 61, 0.08), 0px 0.5px 2px rgba(96, 97, 112, 0.16); - // border-radius: 4px; - height: calc(100vh - var(--header-height)); overflow: hidden; .heading { diff --git a/web/src/pages/RepositoryFileEdit/RepositoryFileEdit.module.scss b/web/src/pages/RepositoryFileEdit/RepositoryFileEdit.module.scss index b3a7f5ff4..02c62a8c7 100644 --- a/web/src/pages/RepositoryFileEdit/RepositoryFileEdit.module.scss +++ b/web/src/pages/RepositoryFileEdit/RepositoryFileEdit.module.scss @@ -1,8 +1,30 @@ .main { - min-height: var(--page-min-height, 100%); background-color: var(--primary-bg) !important; -} -.resourceContent { - background-color: var(--primary-bg); + &, + > div:first-of-type { + min-height: var(--page-min-height) !important; + } + + > div:first-of-type { + display: flex; + flex-direction: column; + + .resourceContent { + background-color: var(--primary-bg); + flex-grow: 1; + display: flex; + flex-direction: column; + + > div:first-of-type { + flex-grow: 1; + display: flex; + flex-direction: column; + + > div:last-of-type { + flex-grow: 1; + } + } + } + } } diff --git a/web/yarn.lock b/web/yarn.lock index fa28c22ec..7b327b2a0 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -1717,7 +1717,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@>=16.9.0", "@types/react@^15.x || ^16.x", "@types/react@^17", "@types/react@^17.0.3": +"@types/react@*", "@types/react@>=16.9.0", "@types/react@^17", "@types/react@^17.0.3": version "17.0.58" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.58.tgz#c8bbc82114e5c29001548ebe8ed6c4ba4d3c9fb0" integrity sha512-c1GzVY97P0fGxwGxhYq989j4XwlcHQoto6wQISOC2v6wm3h0PORRWJFHlkRjfGsiG3y1609WdQ+J+tKxvrEd6A== @@ -8493,7 +8493,7 @@ loader-utils@^1.2.3, loader-utils@^1.4.0: emojis-list "^3.0.0" json5 "^1.0.1" -loader-utils@^2.0.0: +loader-utils@^2.0.0, loader-utils@^2.0.2: version "2.0.4" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c" integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw== @@ -9408,27 +9408,27 @@ moment@^2.25.3: resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108" integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w== -monaco-editor-core@0.15.5: - version "0.15.5" - resolved "https://registry.yarnpkg.com/monaco-editor-core/-/monaco-editor-core-0.15.5.tgz#145f1953a8e319282d92502252d68ef3486b6875" - integrity sha512-kM3KHRjj16cFdK5Z0EppKUu793JVMpsEesBSWlqdgrxcmjyDMXV6xK0oatPcAYp3eOfbbyjPhruxDXj85FKyIg== +monaco-editor-core@^0.37.1: + version "0.37.1" + resolved "https://registry.yarnpkg.com/monaco-editor-core/-/monaco-editor-core-0.37.1.tgz#f1983d6b7748a6fed06aac0f11cbd1cdc3e10bc2" + integrity sha512-bcggKPMlQnsQnbiTxCfhKKDvsxGsvWzDFkkDYoZgc90bwzVswA1zTGQ8HbyY+TtIkUaFY0Zq+p7tEAwmxBUFAw== -monaco-editor-webpack-plugin@1.8.*: - version "1.8.2" - resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-1.8.2.tgz#3721b8d9a3e2e41b154cf2a2955a7d7246c03714" - integrity sha512-g9G7A/lxQtpPsYaZFBqm73dwVkOziGUXExIR6iW7ksZUaiMkpvdTiE9O8edgdJGo+XtCmjycmIKB1Lt8VKbSTQ== +monaco-editor-webpack-plugin@^7.0.1: + version "7.0.1" + resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-7.0.1.tgz#ba19c60aba990184e36ad8722b1ed6a564527c7c" + integrity sha512-M8qIqizltrPlIbrb73cZdTWfU9sIsUVFvAZkL3KGjAHmVWEJ0hZKa/uad14JuOckc0GwnCaoGHvMoYtJjVyCzw== dependencies: - loader-utils "^1.2.3" + loader-utils "^2.0.2" -monaco-editor@^0.19.2: - version "0.19.3" - resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.19.3.tgz#1c994b3186c00650dbcd034d5370d46bf56c0663" - integrity sha512-2n1vJBVQF2Hhi7+r1mMeYsmlf18hjVb6E0v5SoMZyb4aeOmYPKun+CE3gYpiNA1KEvtSdaDHFBqH9d7Wd9vREg== +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== -monaco-languages@1.6.0: - version "1.6.0" - resolved "https://registry.yarnpkg.com/monaco-languages/-/monaco-languages-1.6.0.tgz#54ec5510b31f3132939014f171ade235e84ef0bc" - integrity sha512-LBEWj8tngYwsq4kasQr+dIhnO4xUIEN36ns+cRepWAQiXZnzcrZ84gFHXm8f4mR4tssxvHVU5Vw7xMUYro6h3g== +monaco-languages@^2.11.1: + version "2.11.1" + resolved "https://registry.yarnpkg.com/monaco-languages/-/monaco-languages-2.11.1.tgz#5e485677dfb71673c777e19da862b458aadf55a1" + integrity sha512-XLd6RtqCTYQ1AD7Tz/JzT/Eag/OfvjUtsetqVe6Hm+Tj01osGgnlKsjmPPfTddOIfnSsT6S3TR5aMRL57bSrJg== monaco-plugin-helpers@^1.0.2: version "1.0.3" @@ -10865,6 +10865,11 @@ react-contenteditable@^3.3.5: fast-deep-equal "^3.1.3" prop-types "^15.7.1" +react-cool-dimensions@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/react-cool-dimensions/-/react-cool-dimensions-3.0.1.tgz#b419c0386957a08e75acf7a4e6578c77f29b0f78" + integrity sha512-DUsDB5WUN1Qh6fJJlBtqFKCktrZCPRYcVn8NTeM6hP/5AhZNjDOa2sC2Dg0EM3WUObPDNV5nFLA34vHQfahUeg== + react-day-picker@^7.3.2: version "7.4.10" resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-7.4.10.tgz#d3928fa65c04379ad28c76de22aa85374a8361e1" @@ -10962,21 +10967,13 @@ react-markdown@^8.0.3, react-markdown@~8.0.0: unist-util-visit "^4.0.0" vfile "^5.0.0" -react-monaco-editor@*: +react-monaco-editor@*, react-monaco-editor@^0.52.0: version "0.52.0" resolved "https://registry.yarnpkg.com/react-monaco-editor/-/react-monaco-editor-0.52.0.tgz#69a7c450a22830064d2fc1b446674b1b7da0f540" integrity sha512-jhQSekf2JABbcpN45gKZlWfTS0QcBOZAbAWKGyfqy/KEcMXTwJpCOYGcn2Ur11SUUxWJUzhKjE2fx9BGBc5S8g== dependencies: prop-types "^15.8.1" -react-monaco-editor@^0.34.0: - version "0.34.0" - resolved "https://registry.yarnpkg.com/react-monaco-editor/-/react-monaco-editor-0.34.0.tgz#14ec8b10d448bf11f85f711ab9d91117bc46b3b8" - integrity sha512-XoGgTMVcdrMQr1yJM7/SDfG5wLkET2An2DME1mUvOYZRHJlqfPDEkaF3eP60dRxBGztkqqQgQNdkEOJCCxEuFQ== - dependencies: - "@types/react" "^15.x || ^16.x" - prop-types "^15.7.2" - react-popper@^1.3.7: version "1.3.11" resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.11.tgz#a2cc3f0a67b75b66cfa62d2c409f9dd1fcc71ffd"