How get codemirror in plugin?

Developers: Plugin & API
1

I cannot get codemirror using any of these three methods in onload:

this.registerCodeMirror((cm:CodeMirror.Editor)=>{
			console.log(`codemirror`)
			console.log(cm)
			const mode = cm.getMode()
			console.log(mode)
		});
		this.app.workspace.iterateCodeMirrors(
			(cm:CodeMirror.Editor)=>{
				console.log(`codemirror`)
				console.log(cm)
				const mode = cm.getMode()
				console.log(mode)
			}
		)
		this.app.workspace.on('codemirror',(cm:CodeMirror.Editor)=>{
			console.log(`codemirror`)
			console.log(cm)
			const mode = cm.getMode()
			console.log(mode)
		})

Lastly, I have another question: if I want to inject a custom formatting mode into the current mode, do I use CodeMirror.extendMode?

2

For codemirror 6, you’ll need to write an editor extension for that.

3

thanks for your reply ！ I need to a desktop plugin.

Editor serves as an abstraction to bridge features in CM5 (desktop) and CM6 (mobile).

And I want to customize the formatting in syntax tree, not just decorate it.

4

I am working in Typescript. Where I need CodeMirror I import the following:

import { EditorView } from ‘@codemirror/view’;
import { EditorState } from ‘@codemirror/state’;

Then when I want to construct an editor I do:

// create view
this.view = new EditorView({
  state: EditorState.create({
    doc: await this.getFileContent(this.editable),  // or some string contents
    extensions: [
      EditorView.lineWrapping,                                // Add your extentions here
      sceneGutter,                                                    // or leave empty for basic editor
    ],
  }),
  parent: <some HTMLElement to append to>
});

Hope this helps

5

For anyone who might still stumble upon this answer:

import { EditorView } from ‘@codemirror/view’;

// somewhere in your plugin code
const view = this.app.workspace.getActiveViewOfType(MarkdownView);
const editorView = (view.editor as any).cm as EditorView;

// or onload
this.app.workspace.iterateAllLeaves((leaf) => {
	if (leaf.view && leaf.view instanceof MarkdownView) {
		const editorView = (leaf.view.editor as any).cm as EditorView;
		// ...
	}
})
1 Like