Fix scrollbars across themes

Refactor code mirror load code

Author: Komediruzecki

src/lib/CodeMirror.ts

@@ -17,54 +17,16 @@ import 'codemirror/keymap/emacs'
 import 'codemirror/keymap/vim'
 import 'codemirror-abap'
 import { loadMode } from '../shared/lib/codemirror/util'
-import debounce from 'lodash/debounce'
 
 // Custom addons
 import { initHyperlink } from './addons/hyperlink'
 
-const dispatchModeLoad = debounce(() => {
-  window.dispatchEvent(new CustomEvent('codemirror-mode-load'))
-}, 300)
-
-export async function requireMode(mode: string) {
-  try {
-    await import(`codemirror/mode/${mode}/${mode}.js`)
-    dispatchModeLoad()
-  } catch (error) {
-    console.warn(error)
-  }
-}
-
 export function getCodeMirrorTheme(theme?: string) {
   if (theme == null) return 'default'
   if (theme === 'solarized-dark') return 'solarized dark'
   return theme
 }
 
-function loadMode(_CodeMirror: any) {
-  const memoizedModeResult = new Map<string, CodeMirror.ModeInfo | null>()
-  function findModeByMIME(mime: string) {
-    let result = memoizedModeResult.get(mime)
-    if (result === undefined) {
-      result = CodeMirror.findModeByMIME(mime) || null
-      memoizedModeResult.set(mime, result)
-    }
-    return result
-  }
-
-  const originalGetMode = CodeMirror.getMode
-  _CodeMirror.getMode = (config: CodeMirror.EditorConfiguration, mime: any) => {
-    const modeObj = originalGetMode(config, mime)
-    if (modeObj.name === 'null' && typeof mime === 'string') {
-      const mode = findModeByMIME(mime)
-      if (mode != null) {
-        requireMode(mode.mode)
-      }
-    }
-    return modeObj
-  }
-}
-
 // Initialize custom addons
 initHyperlink(CodeMirror)
 loadMode(CodeMirror)

src/shared/components/atoms/GlobalStyle.tsx

@@ -148,7 +148,7 @@ export default createGlobalStyle<BaseTheme>`
 
   /* scrollbar itself */
   ::-webkit-scrollbar-thumb {
-    background-color: ${({ theme }) => theme.colors.background.quaternary};
+    background-color: ${({ theme }) => theme.scroll.background};
   }
 
   /* set button(top and bottom of the scrollbar) */
@@ -192,6 +192,7 @@ export default createGlobalStyle<BaseTheme>`
     bottom: 15px;
     right: 15px;
   }
+
   #nprogress .spinner-icon {
     width: 18px;
     height: 18px;
@@ -203,14 +204,17 @@ export default createGlobalStyle<BaseTheme>`
     -webkit-animation: nprogress-spinner 400ms linear infinite;
     animation: nprogress-spinner 400ms linear infinite;
   }
+
   .nprogress-custom-parent {
     overflow: hidden;
     position: relative;
   }
+
   .nprogress-custom-parent #nprogress .spinner,
   .nprogress-custom-parent #nprogress .bar {
     position: absolute;
   }
+
   @-webkit-keyframes nprogress-spinner {
     0% {
       -webkit-transform: rotate(0deg);
@@ -219,6 +223,7 @@ export default createGlobalStyle<BaseTheme>`
       -webkit-transform: rotate(360deg);
     }
   }
+
   @keyframes nprogress-spinner {
     0% {
       transform: rotate(0deg);

src/shared/lib/styled/common.ts

@@ -40,6 +40,7 @@ const commonTheme: SharedTheme = {
   codeEditorSelectedTextBackgroundColor: '#ffc107',
   sidebarSearchHighlightTextColor: '#E6E6E6',
   sidebarSearchHighlightBackgroundColor: '#6a320f',
+  scroll: { background: '#888' },
 }
 
 export default commonTheme

src/shared/lib/styled/types.ts

@@ -45,6 +45,9 @@ export interface SharedTheme {
   codeEditorSelectedTextBackgroundColor: string
   sidebarSearchHighlightTextColor: string
   sidebarSearchHighlightBackgroundColor: string
+  scroll: {
+    background: string
+  }
 }
 
 /** background color gradient => starting from main color, fade more and more towards the opposite BW ***/