CODEWITHSUNDEEP
reactjsmonaco-editor
John Fairbanks
John Fairbanks

Reputation: 1422

Monaco editor intellisense font sizing wrong making it unusable

I have the Monaco editor embedded in a React component. For some reason the intellisense font sizes are all hosed up. Anyone have any ideas? I have changed a bunch of settings to try and fix things but nothing I have tried is having any impact.

enter image description here

    import { useRef } from 'react'
    import MonacoEditor from '@monaco-editor/react'
    import codeShift from 'jscodeshift'
    import Highlighter from 'monaco-jsx-highlighter'
    
    import './jsx-syntax.css'
    
    const CodeEditor = ({ height, initialValue, language, onChange, readOnly }) => {
       const editorRef = useRef()
       const onEditorDidMount = (getValue, editor) => {
          editorRef.current = editor  
          editor.onDidChangeModelContent(() => (onChange) ? onChange(getValue()) : {})
          editor.getModel()?.updateOptions({ tabSize: 4 })
    
          const highlighter = new Highlighter(window.monaco, codeShift, editor);
          highlighter.highLightOnDidChangeModelContent(
             () => {}, () => {}, undefined, () => {}
          );
       }
       const options = {
          minimap: {enabled: false},
          //showUnused: false,
          lineNumbersMinChars: 3,
          //fontSize: 13,
          scrollBeyondLastLine: false,
          automaticLayout: true,
          readOnly
       }
    
       return (
          <div className="editor-wrapper">
             <MonacoEditor theme="dark" language={language ?? 'javascript'} height={(height ?? 400) + 'px'} value={initialValue ?? ''} 
                           editorDidMount={onEditorDidMount} options={options}
             />
          </div>
       );
    
    };

export default CodeEditor;

Upvotes: 0

Views: 482

Answers (2)

John Fairbanks
John Fairbanks

Reputation: 1422

After much playing around I can confirm that the reason for the distortions is that my project is using the Bulma css framework. It looks like Monaco does not properly namespace its CSS and that Bulma is able to change things that completely mess up the toolbars and intellisense popups from the editor. To fix it I am manually going through and figuring out which styles need to be loacally applied to the wrapper around Monaco to get it working again.

It turned out to be the padding added to the tabs style in Bulma since the Monaco intellisense apparently uses a embedded tab on each line:

.tabs a {
  ...
  padding: 0.5em 1em;
  ...
}

Upvotes: 1

Mike Lischke
Mike Lischke

Reputation: 53337

There's a FAQ somewhere, which says that if Monaco has measured its fonts before you set new ones, values are computed wrongly.

That's why I call:

public componentDidMount(): void {
    Monaco.remeasureFonts();
}

Upvotes: 0

Related Questions