CODEWITHSUNDEEP
angularcodemirrorcodemirror-6
Arpan Patnaik
Arpan Patnaik

Reputation: 59

Setup CodeMirror 6 with Angular 12

As I'm trying to setup a editor in codemirror v6 with angular but having difficulties in set up as it differs from previous v5.X. Need help in setting up codemirror basic editor with angular. Thank you.

import {EditorState, EditorView, basicSetup} from "@codemirror/basic-setup";
import {javascript} from "@codemirror/lang-javascript";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  
  // Define var here...
  title = 'cEditor';
  @ViewChild('editor') editor: any;

  ngOnInit() {
    this.editor = new EditorView({
      state: EditorState.create({
        extensions: [basicSetup, javascript()]
      }),
      parent: document.body
    })
  }
}

Upvotes: 4

Views: 3451

Answers (1)

jornathan
jornathan

Reputation: 856

You almost there,

Update import.

import { AfterViewInit, Component, Inject } from '@angular/core';
import { basicSetup} from "codemirror";
import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { javascript } from "@codemirror/lang-javascript";
import { DOCUMENT } from '@angular/common';

AfterViewInit is preferable to ngOnInit as there is work referencing the element.

And don't forget to declare document at constructor when you set parent with body

constructor(@Inject(DOCUMENT) private document: Document) {}

That's it !!!.

This will help you as It did to me. CodeMirror 5 to 6 Migration Guide

Also you can check this.

Please make sure as below before start:

Upvotes: 8

Related Questions