Wondering how to remove dashed-line on focus

v6
1

Hey,

I currently have CodeMirror rendered in my React application. When I click on the editor in Chrome however (on focus), a dashed border line appears around the editor. Strangely, I never set these styles myself so I assumed the editor came out of the box like this. However, inspecting it reveals that border is set to none. Is this a theming thing? Below, is my component/theme code. I’m using classNames and separate styling sheets in my website.

import CodeMirror from '@uiw/react-codemirror';
import {createTheme} from '@uiw/codemirror-themes';
import {javascript} from '@codemirror/lang-javascript';
import {tags as t} from '@lezer/highlight';

const myTheme = createTheme({
    dark: 'light',
    settings: {
        background: '#ffffff',
        backgroundImage: '',
        foreground: '#000000',
        caret: '#4d6a2f',
        selection: '#c6c8d2',
        selectionMatch: '#D6D6D6',
        gutterBackground: '#ffffff',
        gutterForeground: '#ada9a9',
        gutterBorder: '#ffffff',
        gutterActiveForeground: '',
        lineHighlight: '#efefef',
    },
    styles: [
        {tag: t.comment, color: '#787b80'},
        {tag: t.definition(t.typeName), color: '#194a7b'},
        {tag: t.typeName, color: '#194a7b'},
        {tag: t.tagName, color: '#9495b3'},
        {tag: t.variableName, color: '#0c6efd'},
    ],
});

const CodeEditor = () => {
    return (
        <CodeMirror
            value="console.log('hello world!');"
            height="300px"
            theme={myTheme}
            extensions={[javascript({jsx: true})]}
            onChange={(value, viewUpdate) => {
                console.log('value:', value);
            }}
        />
    );
}

export default CodeEditor;
2

That’s an outline, not a border. Set on .cm-editor.cm-focused.

1 Like
3

Could I style it in the theme or className stylesheet instead? Thanks