Skip to content

Commit 84bf352

Browse files
authored
Merge pull request #614 from devtron-labs/feat/codemirror-enhancements-v2
feat: CodeEditor Enhancements
2 parents 423ff84 + 1fa9c3c commit 84bf352

File tree

13 files changed

+100
-44
lines changed

13 files changed

+100
-44
lines changed

package-lock.json

Lines changed: 16 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@devtron-labs/devtron-fe-common-lib",
3-
"version": "1.8.7",
3+
"version": "1.8.8",
44
"description": "Supporting common component library",
55
"type": "module",
66
"main": "dist/index.js",
@@ -107,7 +107,8 @@
107107
"@replit/codemirror-indentation-markers": "6.5.3",
108108
"@replit/codemirror-vscode-keymap": "6.0.2",
109109
"@types/react-dates": "^21.8.6",
110-
"@uiw/codemirror-theme-github": "^4.23.7",
110+
"@uiw/codemirror-extensions-hyper-link": "4.23.10",
111+
"@uiw/codemirror-theme-github": "4.23.7",
111112
"@uiw/react-codemirror": "4.23.7",
112113
"ansi_up": "^5.2.1",
113114
"codemirror-json-schema": "0.8.0",

src/Common/ChartVersionAndTypeSelector.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ const ChartVersionAndTypeSelector = ({ setSelectedChartRefId }: ChartVersionAndT
7575
}
7676

7777
return (
78-
<div className="flex">
78+
<div className="flex left">
7979
<div className="chart-type-options flex" data-testid="chart-type-options">
8080
<span className="cn-7 mr-4">Chart Type</span>
8181
<SelectPicker

src/Common/CodeMirror/CodeEditor.components.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const SplitPane = () => {
4545
}
4646

4747
export const Header = ({ children, className, hideDefaultSplitHeader }: CodeEditorHeaderProps) => {
48-
const { diffMode, lhsValue, hasCodeEditorContainer, theme } = useCodeEditorContext()
48+
const { diffMode, readOnly, lhsValue, hasCodeEditorContainer, theme } = useCodeEditorContext()
4949

5050
return (
5151
<div className={`${getComponentSpecificThemeClass(theme)} flexbox w-100 border__primary--bottom`}>
@@ -56,7 +56,9 @@ export const Header = ({ children, className, hideDefaultSplitHeader }: CodeEdit
5656
{children}
5757
{!hideDefaultSplitHeader && lhsValue && <SplitPane />}
5858
</div>
59-
{diffMode ? <div className="bg__secondary px-5 dc__align-self-stretch" /> : null}
59+
{diffMode ? (
60+
<div className={`bg__secondary dc__align-self-stretch ${readOnly ? 'px-15' : 'px-5'}`} />
61+
) : null}
6062
</div>
6163
)
6264
}

src/Common/CodeMirror/CodeEditor.tsx

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,21 @@ import { search } from '@codemirror/search'
2828
import { lintGutter } from '@codemirror/lint'
2929
import { vscodeKeymap } from '@replit/codemirror-vscode-keymap'
3030
import { indentationMarkers } from '@replit/codemirror-indentation-markers'
31+
import { hyperLink } from '@uiw/codemirror-extensions-hyper-link'
3132

3233
import { AppThemeType, useTheme } from '@Shared/Providers'
3334
import { getUniqueId } from '@Shared/Helpers'
3435
import { cleanKubeManifest } from '@Common/Helper'
3536
import { DEFAULT_JSON_SCHEMA_URI, MODES } from '@Common/Constants'
3637

3738
import { codeEditorFindReplace, readOnlyTooltip, yamlHighlight } from './Extensions'
38-
import { openSearchPanel, openSearchPanelWithReplace, replaceAll, showReplaceFieldState } from './Commands'
39+
import {
40+
blurOnEscape,
41+
openSearchPanel,
42+
openSearchPanelWithReplace,
43+
replaceAll,
44+
showReplaceFieldState,
45+
} from './Commands'
3946
import { CodeEditorContextProps, CodeEditorProps } from './types'
4047
import { getFoldGutterElement, getLanguageExtension, getValidationSchema, parseValueToCode } from './utils'
4148
import { CodeEditorContext } from './CodeEditor.context'
@@ -48,6 +55,11 @@ import './codeEditor.scss'
4855
// CODEMIRROR CLASSES
4956
const foldingCompartment = new Compartment()
5057

58+
// EXTENSIONS
59+
const foldConfig = foldGutter({
60+
markerDOM: getFoldGutterElement,
61+
})
62+
5163
const CodeEditor = <DiffView extends boolean = false>({
5264
theme,
5365
value: propValue,
@@ -184,10 +196,6 @@ const CodeEditor = <DiffView extends boolean = false>({
184196
}
185197

186198
// EXTENSIONS
187-
const foldConfig = foldGutter({
188-
markerDOM: getFoldGutterElement,
189-
})
190-
191199
const getBaseExtensions = (): Extension[] => [
192200
basicSetup(basicSetupOptions),
193201
themeExtension,
@@ -196,6 +204,7 @@ const CodeEditor = <DiffView extends boolean = false>({
196204
...(!disableSearch ? [{ key: 'Mod-f', run: openSearchPanel, scope: 'editor search-panel' }] : []),
197205
{ key: 'Mod-Enter', run: replaceAll, scope: 'editor search-panel' },
198206
{ key: 'Mod-Alt-f', run: openSearchPanelWithReplace, scope: 'editor search-panel' },
207+
{ key: 'Escape', run: blurOnEscape, stopPropagation: true },
199208
]),
200209
indentationMarkers(),
201210
getLanguageExtension(mode),
@@ -206,6 +215,7 @@ const CodeEditor = <DiffView extends boolean = false>({
206215
}),
207216
showReplaceFieldState,
208217
...(mode === MODES.YAML ? [yamlHighlight] : []),
218+
hyperLink,
209219
]
210220

211221
const extensions: Extension[] = [
@@ -222,7 +232,6 @@ const CodeEditor = <DiffView extends boolean = false>({
222232
basicSetup({
223233
...basicSetupOptions,
224234
lineNumbers: false,
225-
foldGutter: false,
226235
highlightActiveLine: false,
227236
highlightActiveLineGutter: false,
228237
syntaxHighlighting: false,
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export * from './findAndReplace'
2+
export * from './keyMaps'
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { Command, EditorView } from '@uiw/react-codemirror'
2+
3+
export const blurOnEscape: Command = (view: EditorView) => {
4+
view.contentDOM.blur()
5+
return true
6+
}

src/Common/CodeMirror/Extensions/DiffMinimap.tsx

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,12 @@ export const DiffMinimap = ({ view, diffMinimapExtensions, codeEditorTheme, them
6060
const { clientHeight, scrollHeight, scrollTop } = view.dom
6161
const minimapHeight = minimapContainerRef.current.clientHeight
6262

63-
let computedHeight = (clientHeight / scrollHeight) * minimapHeight
64-
if (computedHeight < CODE_EDITOR_MIN_OVERLAY_HEIGHT) {
65-
computedHeight = CODE_EDITOR_MIN_OVERLAY_HEIGHT
66-
}
67-
68-
setOverlayHeight(computedHeight)
69-
setOverlayTop((scrollTop / scrollHeight) * (minimapHeight - computedHeight))
63+
const computedHeight = (clientHeight / scrollHeight) * minimapHeight
64+
const modifiedHeight = Math.max(computedHeight, CODE_EDITOR_MIN_OVERLAY_HEIGHT)
65+
setOverlayHeight(modifiedHeight)
66+
setOverlayTop(
67+
(scrollTop / scrollHeight) * (minimapHeight - (modifiedHeight !== computedHeight ? modifiedHeight : 0)),
68+
)
7069
}
7170

7271
useEffect(() => {

src/Common/CodeMirror/Extensions/readOnlyTooltip.ts

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ import { EditorView, Extension, showTooltip, StateEffect, StateField, Tooltip, V
1919
import { getReadOnlyElement } from '../utils'
2020
import { READ_ONLY_TOOLTIP_TIMEOUT } from '../CodeEditor.constants'
2121

22+
/** Array of keys to be ignored on keypress */
23+
const ignoreKeys = ['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft', 'Enter', 'Escape']
24+
2225
// Effect to update the tooltip in the editor state
2326
const updateTooltipEffect = StateEffect.define<Tooltip | null>()
2427

@@ -84,8 +87,15 @@ const keypressTooltipPlugin = ViewPlugin.fromClass(
8487
}
8588
}
8689

87-
handleKeyPress = () => {
88-
if (!this.view.state.readOnly) {
90+
handleKeyPress = (e: KeyboardEvent) => {
91+
if (
92+
!this.view.state.readOnly ||
93+
ignoreKeys.includes(e.key) ||
94+
e.metaKey ||
95+
e.shiftKey ||
96+
e.altKey ||
97+
e.ctrlKey
98+
) {
8999
return
90100
}
91101

src/Common/CodeMirror/codeEditor.scss

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,10 @@
3434
border-left: 1px solid var(--N200);
3535
}
3636

37-
.cm-mergeView {
37+
&:not(.code-editor__read-only) .cm-mergeView {
3838
position: relative;
3939
&::before {
40-
content: "";
40+
content: '';
4141
position: absolute;
4242
top: 0;
4343
bottom: 0;
@@ -49,6 +49,20 @@
4949
background-color: var(--bg-primary);
5050
}
5151
}
52+
53+
&.code-editor__read-only .cm-mergeView {
54+
position: relative;
55+
&::before {
56+
content: '';
57+
position: absolute;
58+
top: 0;
59+
bottom: 0;
60+
left: calc(50%);
61+
transform: translate(-50%);
62+
width: 1px;
63+
background-color: var(--N200);
64+
}
65+
}
5266
}
5367

5468
.cm-scroller {
@@ -165,11 +179,11 @@
165179
border-top-left-radius: 2px;
166180
border-bottom-left-radius: 2px;
167181
border-left: 2px solid var(--R500);
182+
line-height: 18px;
168183
}
169184

170185
.cm-diagnosticText {
171186
font-size: 12px;
172-
line-height: 18px;
173187
}
174188

175189
.cm-diagnosticSource {
@@ -268,9 +282,13 @@
268282
padding: 0;
269283
}
270284

271-
& .cm-line,
272-
& .cm-line span {
285+
& .cm-line {
273286
color: transparent !important;
287+
padding: 0;
288+
289+
& span {
290+
color: transparent !important;
291+
}
274292
}
275293

276294
& .cm-scroller {

0 commit comments

Comments
 (0)