My editor is unstyled?

v6
1

Hello! :wave:

I’m new to codemirror, and wanting to get something basic going before I start tweaking themes / language / grammar etc, but I’m having issues getting the editor styles to load – I understand they are supposed to be included with the JS, but I haven’t found any examples on the Styling docs.

This is what I have so far:

import { autocompletion } from '@codemirror/autocomplete';
import { basicSetup } from '@codemirror/basic-setup';
import { closeBrackets } from '@codemirror/closebrackets';
import { foldGutter } from '@codemirror/fold';
import { history } from '@codemirror/history';
import { javascript } from '@codemirror/lang-javascript';
import { markdown } from '@codemirror/lang-markdown';
import { bracketMatching } from '@codemirror/matchbrackets';
import { EditorState } from '@codemirror/state';
import { oneDark } from '@codemirror/theme-one-dark';
import { EditorView } from '@codemirror/view';

export default function newEditor(
  element: HTMLElement,
  value: string,
  updateText: (text: string) => void
) {
  let updateListener = EditorView.updateListener.of(({ state, docChanged }) => {
    if (docChanged) {
      updateText(state.doc.toString());
    }
  });

  let view = new EditorView({
    state: EditorState.create({
      doc: value,
      extensions: [
        ...basicSetup,
        updateListener,
        foldGutter(),
        history(),
        bracketMatching(),
        closeBrackets(),
        autocompletion(),
        // javascript(),
        markdown(),
        oneDark,
      ],
    }),
    parent: element,
  });

  return view;
}

But when rendered, it looks like this:

image
image604×647 18.6 KB

I know the editor is mounting, because the updateListener extension in here correctly fires when I change text.

I’m probably missing something obvious, but I haven’t been able to narrow it down yet

2

Are you mounting the editor in a shadow root? If so, you’ll need to pass the root option when creating the view. Other than that, I don’t know what could cause this.

3

yes! I’m not using shadow dom at all – should I be? :thinking:

I added:

let shadow = element.attachShadow({ mode: 'open' });

to the top of my method, and then passed shadow as the parent in the EditorView options.
the font looks better! – but still no colors or anything.

image
image1394×494 48.8 KB

So then I tried these options:

parent: element,
root: shadow,

but then it seems my editor contents just totally disappeared.

image
image1832×646 58.5 KB

but looking at this, I noticed that the editor contents were not in the shadow element.

so now I changed the config options to:

    parent: shadow,
    root: shadow,

but then I’m back to the less fun font:

image
image1535×606 68.2 KB

4

Something I noticed in the:

parent: shadow,
root: shadow

attempt is that there is a style tag (yay!)
but it has some unicode prefixing the classes? :thinking:

image
image930×476 37.4 KB

I can’t find that unicode character anywhere in the classes

5

Ah, here they are image

6

after looking through the CSS, it looks like I’m maybe missing a theme?

7

No, not at all—if you were using a shadow root, that might be the cause of the problem.

Is your fold gutter visible? And yes, if you want syntax highlighting you’ll have to add some highlight style.

8

Is your fold gutter visible?

it is not

And yes, if you want syntax highlighting you’ll have to add some highlight style.

I currently have defaultHighlightStyle but see no difference :-\

This is my new config:

  let view = new EditorView({
    parent: editorTarget,
    root: shadow,
    state: EditorState.create({
      doc: value,
      extensions: [
        updateListener,
        foldGutter(),
        history(),
        bracketMatching(),
        closeBrackets(),
        autocompletion(),
        markdown(),
        defaultHighlightStyle,
        oneDark,
      ],
    }),
  });
9

Ok, I copied the example theme from CodeMirror Styling Example, and I can see colors and stuff now – so I guess something is wrong with the one dark theme? idk