How to use prosemirror-history - 10 common examples

window.Prosemirror.enableProsemirror = function enableProsemirror() {
    const schema = new Schema(getSpec());

    const mi = new MenuInitializer(schema);

    // PLUGIN ORDER IS IMPORTANT!
    const plugins = [
        mi.getMenuPlugin(),
        history(),
        getKeymapPlugin(schema),
        tableEditing(schema),
    ];

    const json = jQuery('#dw__editform').find('[name=prosemirror_json]').get(0);
    const view = new EditorView(document.querySelector('#prosemirror__editor'), {
        state: EditorState.create({
            doc: Node.fromJSON(schema, JSON.parse(json.value)),
            schema,
            plugins,
        }),
        dispatchTransaction(tr) {
            console.log('run');

            view.updateState(view.state.apply(tr));

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)

        let newState = view.state.apply(transaction)
        view.updateState(newState)

function getBasePlugins(options) {
	const deps = [
		buildInputRules(options.schema),
		keymap(buildKeymap(options.schema, options.mapKeys)),
		keymap(baseKeymap),
		headerIdPlugin,
	];
	if (!options.isReadOnly) {
		/* It's not clear that the SelectPlugin is used by anything */
		// deps.push(SelectPlugin);
	}
	if (options.placeholder) { deps.push(generatePlaceholderPlugin(options.placeholder)); }
	if (options.history !== false) { deps.push(history()); }
	// deps.push(gapCursor());

	return deps;
}

return new UpdateIncrementerPlugin(editorView, editor);
		},
	});
	const isEmptyPlugin = new Plugin({
		view(_editorView) {
			return new UpdateIsEmptyPlugin(editor);
		},
	});

	// Additional keyboard bindings
	const ourKeymap = getContentEditorKeymap(editor, schema);

	return [
		keymap(ourKeymap),
		keymap(baseKeymap),
		history(),
		incrementerPlugin,
		isEmptyPlugin,
		new UpdateAutolinkPlugin(editor.capabilities),
		createInputRules(editor.capabilities),
	];
}

redo(n = 1) {
    for (let i = 0; i < n; i += 1) {
      redo(this.state, tr => this.apply(tr));
    }
    return this;
  }

undo(n = 1) {
    for (let i = 0; i < n; i += 1) {
      undo(this.state, tr => this.apply(tr));
    }
    return this;
  }

})
    )
  })
});

const doc = DOMParser.fromSchema(mySchema).parse(
  document.querySelector("#content")
);

const onNoteCreate = note => {
  note.meta = Object.assign({}, note.meta, {
    createdAt: Date.now()
  });
};

const historyPlugin = history();
const {
  plugin: noterPlugin,
  toggleAllNotes,
  showAllNotes,
  toggleNote,
  setNoteMeta
} = buildNoter(mySchema.marks.note, doc, "noter", historyPlugin, {
  onNoteCreate,
  handleClick: note =>
    setNoteMeta(note.id, {
      hidden: !note.meta.hidden
    })
});

const {
  plugin: flagPlugin,

get plugins() {
    return [
      history({
        depth: this.options.depth,
        newGroupDelay: this.options.newGroupDelay,
      }),
    ]
  }

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"}
    }
  }))
}

requestAnimationFrame(commenceTheSpinning);
};
commenceTheSpinning();

const mySchema = new Schema({
  nodes: addListNodes(schema.spec.nodes as any, "paragraph block*", "block"),
  marks: {
    ...marks,
    ...validationMarks
  }
});

const contentElement =
  document.querySelector("#content") || document.createElement("content");
const doc = DOMParser.fromSchema(mySchema).parse(contentElement);
const historyPlugin = history();
const editorElement = document.querySelector("#editor");

editorElement &&
  ((window as any).editor = new EditorView(editorElement, {
    state: EditorState.create({
      doc,
      plugins: [
        ...exampleSetup({
          schema: mySchema,
          history: false,
          menuContent: buildMenuItems(mySchema).fullMenu
        }),
        keymap({
          F6: validateDocument
        }),
        historyPlugin,