How to use prosemirror-dropcursor - 6 common examples

constructor(
    editorHolder: Element,
    contentHolder: Element
  ) {
    let state = EditorState.create({
      doc: DOMParser.fromSchema(schema).parse(contentHolder),
      plugins: [
        buildInputRules(schema),
        // TODO keymap around enter -> new list item
        // https://discuss.prosemirror.net/t/lists-paragraph-inside-li-instead-of-new-list-item/455
        // TODO keymap around tab and shift-tab
        // TODO extract hints about available keys
        // https://github.com/prosemirror/prosemirror-example-setup/blob/master/src/keymap.js
        keymap(buildKeymap(schema)),
        keymap(baseKeymap),
        dropCursor(),
        gapCursor(),
        history(),
      ]
    })

    this.view = new EditorView(editorHolder, {
      state: state,
      dispatchTransaction(transaction) {
        let view = this

        transaction.before

        console.log(`transaction`)
        console.log(transaction.before)
        console.log(transaction.doc)

function buildPlugins(schema: Schema): Array {

  const plugins = [
    new EditorAttributesPlugin(),
    new CursorPlaceholderPlugin(),
    new SelectionPlaceholderPlugin(),
    new LinkTooltipPlugin(),

    buildInputRules(schema),
    dropCursor(),
    gapCursor(),
    history(),
    keymap(buildKeymap(schema)),
    keymap(baseKeymap),

    // Tables
    // https://github.com/ProseMirror/prosemirror-tables/blob/master/demo.js
    columnResizing(),
    tableEditing(),
  ];

  return plugins;
}

schema: Schema,
  translator: Translator,
  plugins: Plugin[],
  value: string,
  frame: any,
  theme: any // TODO: update type
) {
  return EditorState.create({
    schema,
    doc: translator.nodeFromString(value),
    plugins: [
      inputRules(schema),
      keymap(buildKeymap(schema, plugins)),
      history(),
      links(schema, frame, theme),
      dropCursor({ width: 2, color: 'rgb(33, 224, 158)' }),
      gapCursor(),
      menu(translator, false, frame, theme),
    ],
  })
}

createState() {
    return EditorState.create({
      schema: this.schema,
      doc: this.createDocument(this.options.content),
      plugins: [
        ...this.plugins,
        inputRules({
          rules: this.inputRules,
        }),
        ...this.pasteRules,
        ...this.keymaps,
        keymap({
          Backspace: undoInputRule,
        }),
        keymap(baseKeymap),
        dropCursor(this.options.dropCursor),
        gapCursor(),
        new Plugin({
          key: new PluginKey('editable'),
          props: {
            editable: () => this.options.editable,
          },
        }),
        new Plugin({
          props: {
            attributes: {
              tabindex: 0,
            },
            handleDOMEvents: {
              focus: (view, event) => {
                this.focused = true
                this.emit('focus', {

export function exampleSetup(options) {
  let plugins = [
    buildInputRules(options.schema),
    keymap(buildKeymap(options.schema, options.mapKeys)),
    keymap(baseKeymap),
    dropCursor(),
    gapCursor()
  ]
  if (options.menuBar !== false)
    plugins.push(menuBar({floating: options.floatingMenu !== false,
                          content: options.menuContent || buildMenuItems(options.schema).fullMenu}))
  if (options.history !== false)
    plugins.push(history())

  return plugins.concat(new Plugin({
    props: {
      attributes: {class: "ProseMirror-example-setup-style"}
    }
  }))
}

public plugin() {
    const { color, width } = this.options;

    return dropCursor({ color, width });
  }
}