nteract / nteract

📘 The interactive computing suite for you! ✨

Home Page:https://nteract.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

No Python syntax highlighting in Monaco Editor 3.5.5

alexburgoon opened this issue · comments

Application or Package Used
@nteract/monaco-editor

Describe the bug
When using the @nteract/monaco-editor inside a custom UI using @nteract/stateful-components, there is no Python syntax highlighting or code completion. It works with 3.5.3.

To Reproduce
I am overriding the default editor through the slot in the Cell component from @nteract/stateful-components, with a component that uses the Monaco Editor from @nteract/monaco-editor.

<CodeCell id={id} contentRef={contentRef} cell_type={'code'}>
      {{
        editor: {
          codemirror: (props) => <NotebookEditor {...props} />,
        },
        toolbar: () => (
          <CellToolbar
            id={id}
            contentRef={contentRef}
            cellType={'code'}
          />
        ),
      }}
    </CodeCell>

The CodeEditor component above just wraps the Nteract supplied Monaco Editor and defaults some props.

const NotebookEditor: FunctionComponent<INotebookProps> = ({
  id,
  contentRef,
  language = 'python',
  source,
  channels,
  onFocuseChange,
  onChange,
  onDidCreateEditor,
}) => {
  return (
    <div
      css={css`
        width: 100%;
        margin-right: 20px;
        & > .monaco-container .monaco-editor {
          width: inherit !important;
        }

        & > .monaco-container .monaco-editor .overflow-guard {
          width: inherit !important;
        }

        /* 26px is the left margin for .monaco-scrollable-element  */
        &
          > .monaco-container
          .monaco-editor
          .monaco-scrollable-element.editor-scrollable.vs {
          width: calc(100% - 26px) !important;
        }
      `}
    >
      <MonacoEditor
        id={id}
        contentRef={contentRef}
        theme={'vs-dark'}
        language={language}
        value={source}
        onChange={onChange}
        onFocusChange={onFocuseChange}
        onDidCreateEditor={onDidCreateEditor}
        channels={channels}
        enableCompletion={true}
        enableFormatting={true}
        shouldRegisterDefaultCompletion={true}
        options={{
          lineNumbers: 'on',
          scrollbar: {
            alwaysConsumeMouseWheel: false,
          },
        }}
      />
    </div>
  );
};

I have confirmed that the language prop being passed in is set to 'python' but the Monaco Editor when rendered to the dom shows 'plaintext'. And there is no syntax highlighting or code completion.

Expected behavior
Python code syntax highlighting and code completion should work.

Screenshots

Working with v3.5.3
image

Not working when I upgrade to v3.5.5
image

Monaco Editor Working with JSON
image

Desktop (please complete the following information):

  • OS: Ubuntu
  • Browser: Electron App

Additional context
I am also using a Monaco Editor to edit JSON files and that still highlights correctly.

I am bundling with Webpack v5 and using the Monaco Editor Webpack Plugin.