Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

No Python syntax highlighting in Monaco Editor 3.5.5 #5674

Open
alexburgoon opened this issue May 2, 2022 · 0 comments
Open

No Python syntax highlighting in Monaco Editor 3.5.5 #5674

alexburgoon opened this issue May 2, 2022 · 0 comments

Comments

@alexburgoon
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant