obsidian-qa-bot / docs /obsidian-developer /Plugins /Editor /Communicating with editor extensions.md
anpigon's picture
Add favicon and image assets for Obsidian help and developer documentation
c63ff03
|
raw
history blame
1.43 kB

Once you've built your editor extension, you might want to communicate with it from outside the editor. For example, through a [[Commands|command]], or a [[Ribbon actions|ribbon action]].

You can access the CodeMirror 6 editor from a [[MarkdownView|MarkdownView]]. However, since the Obsidian API doesn't actually expose the editor, you need to tell TypeScript to trust that it's there, using @ts-expect-error.

import { EditorView } from "@codemirror/view";

// @ts-expect-error, not typed
const editorView = view.editor.cm as EditorView;

View plugin

You can access the [[View plugins|view plugin]] instance from the EditorView.plugin() method.

this.addCommand({
    id: "example-editor-command",
    name: "Example editor command",
    editorCallback: (editor, view) => {
        // @ts-expect-error, not typed
        const editorView = view.editor.cm as EditorView;

        const plugin = editorView.plugin(examplePlugin);

        if (plugin) {
            plugin.addPointerToSelection(editorView);
        }
    },
});

State field

You can dispatch changes and [[State fields#Dispatching state effects|dispatch state effects]] directly on the editor view.

this.addCommand({
    id: "example-editor-command",
    name: "Example editor command",
    editorCallback: (editor, view) => {
        // @ts-expect-error, not typed
        const editorView = view.editor.cm as EditorView;

        editorView.dispatch({
            effects: [
                // ...
            ],
        });
    },
});