feat: CodeEditor

  - disable browser back/forward when code editor is focused and has horizontal overflow
  - UAT changes

Author: RohitRaj011

src/Common/CodeEditor/CodeEditorRenderer.tsx

@@ -3,7 +3,7 @@ import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror'
 
 import { Progressing } from '@Common/Progressing'
 
-import { useEffect, useRef } from 'react'
+import { FocusEventHandler, useEffect, useRef, useState } from 'react'
 import { CodeEditorRendererProps } from './types'
 import { getCodeEditorHeight } from './utils'
 
@@ -29,6 +29,9 @@ export const CodeEditorRenderer = ({
     extensions,
     autoFocus,
 }: CodeEditorRendererProps) => {
+    // STATES
+    const [isFocused, setIsFocused] = useState(false)
+
     // REFS
     const codeMirrorRef = useRef<ReactCodeMirrorRef>()
 
@@ -41,6 +44,29 @@ export const CodeEditorRenderer = ({
         }, 100)
     }, [autoFocus])
 
+    // STOPPING OVERSCROLL BROWSER BACK/FORWARD BEHAVIOR WHEN CODE EDITOR IS FOCUSED
+    useEffect(() => {
+        const html = document.querySelector('html')
+        if (html) {
+            const { scrollWidth, clientWidth } = codeMirrorRef.current?.view?.scrollDOM ?? {}
+            if (isFocused && scrollWidth > clientWidth) {
+                html.classList.add('dc__overscroll-none')
+            } else {
+                html.classList.remove('dc__overscroll-none')
+            }
+        }
+    }, [state.lhsCode, state.code, isFocused])
+
+    const handleOnFocus: FocusEventHandler<HTMLDivElement> = (e) => {
+        setIsFocused(true)
+        onFocus?.(e)
+    }
+
+    const handleOnBlur: FocusEventHandler<HTMLDivElement> = (e) => {
+        setIsFocused(false)
+        onBlur?.(e)
+    }
+
     const { codeEditorClassName, codeEditorHeight, codeEditorParentClassName } = getCodeEditorHeight(height)
 
     if (loading) {
@@ -79,7 +105,9 @@ export const CodeEditorRenderer = ({
     ) : (
         <div ref={codeMirrorParentDivRef} className={`w-100 ${codeEditorParentClassName}`}>
             {shebang && (
-                <div className="code-editor__shebang flexbox text__white">
+                <div
+                    className={`flexbox text__white code-editor__shebang ${isDarkTheme ? 'code-editor__shebang__dark' : 'code-editor__shebang__light'}`}
+                >
                     <div className="code-editor__shebang__gutter dc__align-self-stretch" />
                     {shebang}
                 </div>
@@ -94,8 +122,8 @@ export const CodeEditorRenderer = ({
                 readOnly={readOnly}
                 height={codeEditorHeight}
                 minHeight="250px"
-                onFocus={onFocus}
-                onBlur={onBlur}
+                onFocus={handleOnFocus}
+                onBlur={handleOnBlur}
                 onChange={handleOnChange}
                 extensions={extensions}
             />

src/Common/CodeEditor/Extensions/yamlParseLinter.ts

@@ -21,7 +21,7 @@ export const yamlParseLinter =
                     diagnostics.push({
                         from,
                         to: from + (linePos[0]?.col || 0),
-                        message,
+                        message: message.replace(/\n+/g, '\n'),
                         severity: 'error',
                         source: err.name,
                     })

src/Common/CodeEditor/codeEditor.scss

@@ -17,6 +17,7 @@
 // CODE MIRROR OVERRIDES
 .cm-mergeView {
     height: 100%;
+    background-color: var(--bg-code-editor-base);
 }
 
 .cm-mergeViewEditor:last-child {

src/Common/CodeEditor/types.ts

@@ -36,7 +36,7 @@ export interface CodeEditorHeaderProps {
     children?: ReactNode
 }
 
-type CodeEditorBaseProps = Pick<ReactCodeMirrorProps, 'onBlur' | 'onFocus' | 'autoFocus'> & {
+type CodeEditorBaseProps = Partial<Pick<ReactCodeMirrorProps, 'onBlur' | 'onFocus' | 'autoFocus'>> & {
     value?: ReactCodeMirrorProps['value']
     onChange?: (value: string) => void
     shebang?: string | JSX.Element
@@ -135,11 +135,21 @@ export interface FindReplaceToggleButtonProps {
 }
 
 // CODE-EDITOR RENDERER PROPS
-export type CodeEditorRendererProps = Pick<
-    CodeEditorProps,
-    'loading' | 'customLoader' | 'height' | 'readOnly' | 'shebang' | 'placeholder' | 'onBlur' | 'onFocus' | 'autoFocus'
+export type CodeEditorRendererProps = Required<
+    Pick<
+        CodeEditorProps,
+        | 'loading'
+        | 'customLoader'
+        | 'height'
+        | 'readOnly'
+        | 'shebang'
+        | 'placeholder'
+        | 'onBlur'
+        | 'onFocus'
+        | 'autoFocus'
+    >
 > &
-    Pick<CodeEditorDiffBaseProps, 'isOriginalModifiable'> & {
+    Required<Pick<CodeEditorDiffBaseProps, 'isOriginalModifiable'>> & {
         codemirrorMergeKey: Key
         codeMirrorParentDivRef: MutableRefObject<HTMLDivElement>
         codeEditorTheme: ReactCodeMirrorProps['theme']

src/Common/Hooks/UseRegisterShortcut/types.ts

@@ -25,7 +25,7 @@ export const KEYBOARD_KEYS_MAP = {
     E: 'E',
     R: 'R',
     K: 'K',
-    Escape: 'Escape',
+    Escape: 'Esc',
     Enter: '↩',
 } as const