How to get data from the editor?

5

You can get the data from the editor by writing a simple plugin that is triggered whenever there is an update to the PM editor:

So here’s the plugin:

import {Plugin} from 'prosemirror-state';
import {updateFromView, getActiveMarks, getAvailableNodeTypes, getAvailableMarks, getHTMLStringFromState} from 'client/features/story-editor/prosemirror/utils.js';

export default (dispatchUpdateCallback) => {
	return new Plugin({
		view() {
			return {
				update (updatedView) {
					const json = updatedView.state.toJSON();
					dispatchUpdateCallback(json);
				}
			}
		}
	});
};

You need to pass a callback when adding the plugin in the editor state:

onUpdatePlugin(someCallback)

If you want HTML instead of JSON you can use this function to get it from an editor state:

export function getHTMLStringFromState (state) {
	const fragment = DOMSerializer.fromSchema(state.schema).serializeFragment(state.doc.content);
	const div = document.createElement("div");
	div.appendChild(fragment);
	return div.innerHTML;
}