代码之家 › 专栏 › 技术社区 › John Fairbanks

摩纳哥编辑intellisense字体大小错误,无法使用

monaco-editor reactjs

0

John Fairbanks · 技术社区 · 4 年前

我在React组件中嵌入了Monaco编辑器。出于某种原因,intellisense的字体大小都被冲洗掉了。有人有什么想法吗?我已经更改了很多设置,试图解决问题,但我所尝试的一切都没有产生任何影响。

    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;

0 回复 | 直到 4 年前

1

John Fairbanks 4 年前

经过多次尝试,我可以确认失真的原因是我的项目使用的是Bulma css框架。看起来Monaco没有正确命名其css,并且Bulma能够从编辑器中更改完全扰乱工具栏和智能弹出窗口的内容。为了修复它,我正在手动浏览并找出哪些样式需要随意应用于摩纳哥周围的包装器,才能使其重新工作。

事实证明,这是添加到Bulma标签样式中的填充物,因为Monaco intellisense显然在每一行都使用了嵌入式标签:

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

2

0

Mike Lischke 4 年前

某个地方有一个常见问题解答,它说如果摩纳哥在你设置新字体之前测量了它的字体,那么值的计算是错误的。

这就是为什么我打电话给:

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