Skip to content

Commit 1bc5071

Browse files
RohitRaj011RohitRaj011
committed
refactor: CodeMirror - code refactor, review fixes
1 parent 73fab94 commit 1bc5071

File tree

6 files changed

+49
-50
lines changed

6 files changed

+49
-50
lines changed

‎src/Common/CodeMirror/CodeEditor.theme.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,46 +16,46 @@
1616

1717
import { EditorView } from '@uiw/react-codemirror'
1818
import { githubDarkInit, githubLightInit } from '@uiw/codemirror-theme-github'
19-
import { tags as t } from '@lezer/highlight'
19+
import { tags } from '@lezer/highlight'
2020

2121
export const getCodeEditorTheme = (isDark: boolean) => {
2222
const themeInit = isDark ? githubDarkInit : githubLightInit
2323
const styles = isDark
2424
? [
2525
{
26-
tag: [t.className, t.propertyName],
26+
tag: [tags.className, tags.propertyName],
2727
color: 'var(--code-editor-property-name)',
2828
},
2929
{
30-
tag: [t.variableName, t.attributeName, t.number, t.operator],
30+
tag: [tags.variableName, tags.attributeName, tags.number, tags.operator],
3131
color: 'var(--code-editor-number)',
3232
},
3333
{
34-
tag: [t.heading, t.strong],
34+
tag: [tags.heading, tags.strong],
3535
color: 'var(--code-editor-property-name)',
3636
fontWeight: 'bold',
3737
},
3838
{
39-
tag: [t.emphasis],
39+
tag: [tags.emphasis],
4040
color: 'var(--code-editor-property-name)',
4141
fontStyle: 'italic',
4242
},
4343
{
44-
tag: [t.atom, t.bool, t.special(t.variableName)],
44+
tag: [tags.atom, tags.bool, tags.special(tags.variableName)],
4545
color: 'var(--code-editor-boolean)',
4646
},
4747
]
4848
: [
4949
{
50-
tag: [t.className, t.propertyName],
50+
tag: [tags.className, tags.propertyName],
5151
color: 'var(--code-editor-property-name)',
5252
},
5353
{
54-
tag: [t.variableName, t.attributeName, t.number, t.operator],
54+
tag: [tags.variableName, tags.attributeName, tags.number, tags.operator],
5555
color: 'var(--code-editor-number)',
5656
},
5757
{
58-
tag: [t.atom, t.bool, t.special(t.variableName)],
58+
tag: [tags.atom, tags.bool, tags.special(tags.variableName)],
5959
color: 'var(--code-editor-boolean)',
6060
},
6161
]

‎src/Common/CodeMirror/CodeEditor.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,8 @@ const CodeEditor = <DiffView extends boolean = false>({
8989
const codeMirrorParentDivRef = useRef<HTMLDivElement>()
9090

9191
// CONSTANTS
92-
const isDarkTheme = (theme ?? appTheme) === AppThemeType.dark
92+
const componentTheme = theme ?? appTheme
93+
const isDarkTheme = componentTheme === AppThemeType.dark
9394
const { codeEditorTheme, themeExtension } = getCodeEditorTheme(isDarkTheme)
9495

9596
// STATES
@@ -232,7 +233,7 @@ const CodeEditor = <DiffView extends boolean = false>({
232233
codemirrorMergeKey={codemirrorMergeKey}
233234
codeMirrorParentDivRef={codeMirrorParentDivRef}
234235
codeEditorTheme={codeEditorTheme}
235-
isDarkTheme={isDarkTheme}
236+
theme={componentTheme}
236237
state={state}
237238
loading={loading}
238239
customLoader={customLoader}

‎src/Common/CodeMirror/CodeEditorRenderer.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,24 @@
1414
* limitations under the License.
1515
*/
1616

17-
import CodeMirrorMerge from 'react-codemirror-merge'
17+
import { FocusEventHandler, useEffect, useRef, useState } from 'react'
1818
import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror'
19+
import CodeMirrorMerge from 'react-codemirror-merge'
1920

21+
import { getComponentSpecificThemeClass } from '@Shared/Providers'
2022
import { Progressing } from '@Common/Progressing'
2123

22-
import { FocusEventHandler, useEffect, useRef, useState } from 'react'
2324
import { CodeEditorRendererProps } from './types'
2425
import { getCodeEditorHeight, getRevertControlButton } from './utils'
2526

2627
export const CodeEditorRenderer = ({
28+
theme,
2729
loading,
2830
customLoader,
2931
height,
3032
state,
3133
codeEditorTheme,
3234
codemirrorMergeKey,
33-
isDarkTheme,
3435
readOnly,
3536
isOriginalModifiable,
3637
handleLhsOnChange,
@@ -52,6 +53,9 @@ export const CodeEditorRenderer = ({
5253
// REFS
5354
const codeMirrorRef = useRef<ReactCodeMirrorRef>()
5455

56+
// CONSTANTS
57+
const componentSpecificThemeClass = getComponentSpecificThemeClass(theme)
58+
5559
// This handling will be removed once shebang is shown inside the codeEditor rather than extra div
5660
const updateGutterWith = () => {
5761
const gutters = document.querySelector('.cm-gutters')
@@ -114,7 +118,7 @@ export const CodeEditorRenderer = ({
114118
<CodeMirrorMerge
115119
theme={codeEditorTheme}
116120
key={codemirrorMergeKey}
117-
className={`w-100 ${isDarkTheme ? 'cm-merge-theme__dark' : 'cm-merge-theme__light'} ${codeEditorParentClassName} ${readOnly ? 'code-editor__read-only' : ''}`}
121+
className={`w-100 ${componentSpecificThemeClass} ${codeEditorParentClassName} ${readOnly ? 'code-editor__read-only' : ''}`}
118122
gutter
119123
destroyRerender={false}
120124
{...(!readOnly ? { revertControls: 'a-to-b', renderRevertControl: getRevertControlButton } : {})}
@@ -137,9 +141,7 @@ export const CodeEditorRenderer = ({
137141
) : (
138142
<div ref={codeMirrorParentDivRef} className={`w-100 ${codeEditorParentClassName}`}>
139143
{shebang && (
140-
<p
141-
className={`m-0 flexbox cn-9 code-editor__shebang ${isDarkTheme ? 'code-editor__shebang__dark' : 'code-editor__shebang__light'}`}
142-
>
144+
<p className={`m-0 flexbox cn-9 code-editor__shebang ${componentSpecificThemeClass}`}>
143145
<span
144146
className="code-editor__shebang__gutter dc__align-self-stretch"
145147
style={{ flex: `0 0 ${gutterWidth}px` }}
@@ -150,7 +152,7 @@ export const CodeEditorRenderer = ({
150152
<CodeMirror
151153
ref={codeMirrorRef}
152154
theme={codeEditorTheme}
153-
className={`${isDarkTheme ? 'cm-theme__dark' : 'cm-theme__light'} ${codeEditorClassName}`}
155+
className={`${componentSpecificThemeClass} ${codeEditorClassName}`}
154156
basicSetup={false}
155157
value={state.code}
156158
placeholder={placeholder}

‎src/Common/CodeMirror/codeEditor.scss

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,18 @@
5151
outline: none;
5252
}
5353

54+
&.cm-merge-a .cm-changedText,
55+
.cm-deletedChunk .cm-deletedText,
56+
&.cm-merge-b .cm-changedText {
57+
border-radius: 4px;
58+
padding: 0 2px;
59+
color: var(--N900);
60+
61+
> span {
62+
color: var(--N900);
63+
}
64+
}
65+
5466
&.cm-merge-a .cm-changedLine,
5567
.cm-deletedChunk {
5668
background-color: var(--bg-code-editor-red);
@@ -59,12 +71,6 @@
5971
&.cm-merge-a .cm-changedText,
6072
.cm-deletedChunk .cm-deletedText {
6173
background: var(--bg-code-editor-red-highlight);
62-
border-radius: 4px;
63-
padding: 0 2px;
64-
color: var(--N900);
65-
> span {
66-
color: var(--N900);
67-
}
6874
}
6975

7076
&.cm-merge-a .cm-changedLineGutter {
@@ -77,12 +83,6 @@
7783

7884
&.cm-merge-b .cm-changedText {
7985
background: var(--bg-code-editor-green-highlight);
80-
border-radius: 4px;
81-
padding: 0 2px;
82-
color: var(--N900);
83-
> span {
84-
color: var(--N900);
85-
}
8686
}
8787

8888
&.cm-merge-b .cm-changedLineGutter {
@@ -204,13 +204,15 @@
204204
// SEARCH
205205
.cm-searchMatch {
206206
background-color: var(--bg-matching-keyword);
207+
207208
span {
208209
color: var(--white);
209210
}
210211
}
211212

212213
.cm-searchMatch-selected {
213214
background-color: var(--bg-matching-keyword-selected);
215+
214216
span {
215217
color: var(--white);
216218
}

‎src/Common/CodeMirror/types.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,9 @@ export type FindReplaceQuery = Partial<
9797

9898
export interface FindReplaceProps {
9999
view: EditorView
100+
/** Default value for Search Query state. */
100101
defaultQuery: SearchQuery
102+
/** Default value for showReplaceField state. */
101103
defaultShowReplace: boolean
102104
}
103105

@@ -139,6 +141,7 @@ export interface FindReplaceToggleButtonProps {
139141
export type CodeEditorRendererProps = Required<
140142
Pick<
141143
CodeEditorProps,
144+
| 'theme'
142145
| 'loading'
143146
| 'customLoader'
144147
| 'height'
@@ -154,7 +157,6 @@ export type CodeEditorRendererProps = Required<
154157
codemirrorMergeKey: Key
155158
codeMirrorParentDivRef: MutableRefObject<HTMLDivElement>
156159
codeEditorTheme: ReactCodeMirrorProps['theme']
157-
isDarkTheme: boolean
158160
state: CodeEditorState
159161
handleOnChange: ReactCodeMirrorProps['onChange']
160162
handleLhsOnChange: ReactCodeMirrorProps['onChange']

‎src/Shared/Components/CodeEditorWrapper/CodeEditorWrapper.tsx

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const CodeEditorWrapper = <DiffView extends boolean>({
1111
children,
1212
...restProps
1313
}: CodeEditorWrapperProps<DiffView>) =>
14-
window._env_.FEATURE_CODE_MIRROR_ENABLE ? (
14+
isCodeMirrorEnabled() ? (
1515
<CodeMirror<DiffView> {...(codeMirrorProps as any)} {...restProps}>
1616
{children}
1717
</CodeMirror>
@@ -21,37 +21,29 @@ export const CodeEditorWrapper = <DiffView extends boolean>({
2121
</CodeEditor>
2222
)
2323

24-
const CodeEditorLanguageChangerWrapper = () =>
25-
window._env_.FEATURE_CODE_MIRROR_ENABLE ? null : <CodeEditor.LanguageChanger />
24+
const CodeEditorLanguageChangerWrapper = () => (isCodeMirrorEnabled() ? null : <CodeEditor.LanguageChanger />)
2625

27-
const CodeEditorThemeChangerWrapper = () =>
28-
window._env_.FEATURE_CODE_MIRROR_ENABLE ? null : <CodeEditor.ThemeChanger />
26+
const CodeEditorThemeChangerWrapper = () => (isCodeMirrorEnabled() ? null : <CodeEditor.ThemeChanger />)
2927

30-
const CodeEditorValidationErrorWrapper = () =>
31-
window._env_.FEATURE_CODE_MIRROR_ENABLE ? null : <CodeEditor.ValidationError />
28+
const CodeEditorValidationErrorWrapper = () => (isCodeMirrorEnabled() ? null : <CodeEditor.ValidationError />)
3229

33-
const CodeEditorClipboardWrapper = () =>
34-
window._env_.FEATURE_CODE_MIRROR_ENABLE ? <CodeMirror.Clipboard /> : <CodeEditor.Clipboard />
30+
const CodeEditorClipboardWrapper = () => (isCodeMirrorEnabled() ? <CodeMirror.Clipboard /> : <CodeEditor.Clipboard />)
3531

3632
const CodeEditorHeaderWrapper = ({ diffViewWidth, ...props }: CodeEditorHeaderProps & { diffViewWidth?: boolean }) =>
37-
window._env_.FEATURE_CODE_MIRROR_ENABLE ? (
33+
isCodeMirrorEnabled() ? (
3834
<CodeMirror.Header {...props} />
3935
) : (
4036
<CodeEditor.Header diffViewWidth={diffViewWidth} {...props} />
4137
)
4238

4339
const CodeEditorWarningWrapper = (props: CodeEditorStatusBarProps) =>
44-
window._env_.FEATURE_CODE_MIRROR_ENABLE ? <CodeMirror.Warning {...props} /> : <CodeEditor.Warning {...props} />
40+
isCodeMirrorEnabled() ? <CodeMirror.Warning {...props} /> : <CodeEditor.Warning {...props} />
4541

4642
const CodeEditorErrorBarWrapper = (props: CodeEditorStatusBarProps) =>
47-
window._env_.FEATURE_CODE_MIRROR_ENABLE ? <CodeMirror.ErrorBar {...props} /> : <CodeEditor.ErrorBar {...props} />
43+
isCodeMirrorEnabled() ? <CodeMirror.ErrorBar {...props} /> : <CodeEditor.ErrorBar {...props} />
4844

4945
const CodeEditorInformationWrapper = (props: CodeEditorStatusBarProps) =>
50-
window._env_.FEATURE_CODE_MIRROR_ENABLE ? (
51-
<CodeMirror.Information {...props} />
52-
) : (
53-
<CodeEditor.Information {...props} />
54-
)
46+
isCodeMirrorEnabled() ? <CodeMirror.Information {...props} /> : <CodeEditor.Information {...props} />
5547

5648
const CodeEditorContainerWrapper = ({
5749
overflowHidden,
@@ -61,7 +53,7 @@ const CodeEditorContainerWrapper = ({
6153
flexExpand?: boolean
6254
overflowHidden?: boolean
6355
}) =>
64-
window._env_.FEATURE_CODE_MIRROR_ENABLE ? (
56+
isCodeMirrorEnabled() ? (
6557
<CodeMirror.Container {...props} />
6658
) : (
6759
<CodeEditor.Container overflowHidden={overflowHidden} {...props} />

0 commit comments

Comments
 (0)