Skip to main content

How do I?

In this page we answer a list of commonly asked things

How do I watch for changes to the editor?#

Create a plugin that watches changes to the editor, see exporting data for an example.

How do I handle editor's DOM events ?#

Create a plugin which listens to DOM events as show below:

new Plugin({  key: new PluginKey("myDropPlugin"),  props: {    handleDOMEvents: {      drop(view, event) {        // your logic      },    },  },});

💡 See Prosemirror.EditorProps for the API.

How do I add a keyboard shortcut ?#

📖 See Keybindings Guide

How do I execute a command ?#

If you are using the vanilla setup, you can get access to view from the editor instance. For example

const editor =  new BangleEditor({ ... })const view = editor.viewconst state = view.stateconst dispatch = view.dispatch
// dry run a commandconst success = toggleBold()(view.state);// execute the commandtoggleBold()(view.state, view.dispatch, view);

In a React setup you can get the view from the hook useEditorViewContext for components rendered inside the <BangleEditor />. For components outside <BangleEditor />, save the editor in your applications state management for retrieval and access. Don't forget to clean it up when your editor is destroyed.

How do I get access to the view, state, dispatch for a command?#

See ### How do I execute a command ? above.

How do I get access to Prosemirror schema ?#

If you are using specs:[ ... ] notation, switch to using SpecRegistry.

const specRegistry = new SpecRegistry([]);const schema = specRegistry.schema;

How do I access prosemirror-* module ?#

You can use the @bangle.dev/pm package, which exports all of the core exports of prosemirror-* package in a single streamlined fashion.

import { EditorView, TextSelection, Slice } from "@bangle.dev/pm";

Else, you can install the prosemirror packages:

npm i -S prosemirror-view prosemirror-state
import { EditorView } from "prosemirror-view";import { TextSelection } from "prosemirror-state";import { Slice } from "prosemirror-model";

I recommend the first approach, as in the second approach you are responsible for making sure bangle and your prosemirror package versions align.

How do I change the selection ?#

First, you will need to figure out whether you want a TextSelection (majority of the cases) or a NodeSelection. Below is an example of setting selection to the end:

const setSelectionAtEnd = (state, dispatch) => {  const textSelection = TextSelection.create(    state.doc,    state.doc.content.size - 1  );  // doing this creates a new Transaction  const tr = state.tr;  // this convention allows for dry running of a command  if (dispatch) {    dispatch(tr.setSelection(textSelection));  }  // return the success of the command  return true;};

How do I programmatically update the doc content?#

This is a pretty heavy question as this requires Prosemirror knowledge of dealing with transactions. To get started read up on

  • Read the Prosemirror guide at least 3 times.
  • Browse the source code of some of your favourite components to get a hang of carrying out transactions.
  • Checkout prosemirror-utils for more code examples.

How do I create a new paragraph node ?#

Below is an example of how you can create a new paragraph node:

const { doc, schema, tr } = view.state;const type = schema.nodes.paragraph;// Insert a paragraph node at the end of document.const transaction = tr.insert(doc.content.size, type.create("Hello"));// Commit it.view.dispatch(transaction);