Codemirror 6: set selection area font color as white, when the editor lost focus, drawSelection will reset the selection area color as default

v6
1

useEffect(() => {
if (!editorRef.current) return;

const basicExtensions = [
  lineNumbers(),
  highlightActiveLineGutter(),
  drawSelection(),
  history(),
  foldGutter(),
  indentOnInput(),
  bracketMatching(),
  closeBrackets(),
  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
  highlightSelectionMatches(),

  Prec.highest(EditorView.theme({
      '&': {
        height: '100%',
        overflow: 'hidden'
      },
      '.cm-scroller': {
        overflow: 'auto !important',
        scrollbarWidth: 'thin',
        height: isFullscreen 
          ? showStatusBar ? 'calc(100vh - 72px)' : 'calc(100vh - 40px)'
          : showStatusBar ? '446px' : '480px',
        maxHeight: isFullscreen 
          ? showStatusBar ? 'calc(100vh - 72px)' : 'calc(100vh - 40px)'
          : showStatusBar ? '446px' : '480px'
      },
      '.cm-content': {
        minHeight: '100%',
      },
      '.cm-gutters': {
        background: currentTheme === 'dark' ? '#282C34 !important' : '#f8f9fa !important',
        borderRight: currentTheme === 'dark' ? '1px solid #444 !important' : '1px solid #e2e8f0 !important'
      },
      '.cm-activeLineGutter': {
        backgroundColor: currentTheme === 'dark' ? '#3E4451 !important' : '#e8f4f8 !important',
        color: currentTheme === 'dark' ? '#61AFEF !important' : '#1890ff !important'
      },
      '.cm-selectionBackground': {
        backgroundColor: currentTheme === 'dark' ? '#264F78 !important' : '#316AC5 !important',
      },
      '.cm-selection': {
        color: 'white !important'
      },
    })
  )
];

const extensions = [
  ...basicExtensions,
  sql(),
  sqlAutocompletion,
  keymap.of([
    ...closeBracketsKeymap,
    ...defaultKeymap,
    ...searchKeymap,
    ...historyKeymap,
    ...foldKeymap,
    ...completionKeymap,
    indentWithTab
  ]),
  EditorView.domEventHandlers({
    blur: (event, view) => {
      if (onChange) {
        onChange(view.state.doc.toString());
      }
    }
  }),
  EditorView.updateListener.of((update) => {
    if (update.selectionSet || update.docChanged) {
      const state = update.state;
      const totalLineCount = state.doc.lines;
      
      setTotalLines(totalLineCount);
    }
  }),
  EditorState.readOnly.of(readOnly),
  ...(currentTheme === 'dark' ? [oneDark] : [])
];

const state = EditorState.create({
  doc: value,
  extensions
});

const view = new EditorView({
  state,
  parent: editorRef.current
});

viewRef.current = view;

return () => {
  view.destroy();
};

}, [readOnly, currentTheme, isFullscreen, showStatusBar]);

2

I set selection area font color as follow:
‘.cm-selection’: {
color: ‘white !important’
},

3

cm-selection is not a CSS class that the library uses. Maybe you’re looking for cm-selectionBackground.

6

yes, I try to set in cm-selectionBackground，but when the editor lost focus, drawSelection will reset the selection area color as default.
‘.cm-selectionBackground’: {
backgroundColor: currentTheme === ‘dark’ ? ‘#264F78 !important’ : ‘#316AC5 !important’,
color: ‘white !important’,
},

企业微信截图_1754883521426
企业微信截图_1754883521426729×396 6.56 KB

image
image786×400 6.74 KB

7

There’s different rules for the focused and the blurred state (see here). You’ll have to make sure your rules are at least as specific as those.