Пишем простой WYSIWYG-редактор с помощью ProseMirror

Обзор ProseMirror

• prosemirror-model – модель документа, описывающая все компоненты документа, их свойства и действия, которые можно совершить над ними;
  
• prosemirror-state – структура данных, которая описывает состояние созданного документа в определенный момент времени, включая выделенные фрагменты и транзакции для перехода от одного состояния в другое;
  
• prosemirror-view – представление документа в браузере и инструменты для того, чтобы пользователь мог взаимодействовать с документом;
  
• prosemirror-transform – функционал для хранения истории транзакций, с помощью которого реализованы транзакции и который позволяет откатываться до предыдущих состояний или вести совместную разработку одного документа.
  

• prosemirror-commands – набор уже готовых команд для редактирования. Как правило, что-то более сложное или индивидуальное нужно писать самому, но некоторые вещи Marijn Haverbeke уже сделал за нас, например, удаление выделенного фрагмента текста;
  
• prosemirror-keymap – модуль из двух методов для задания быстрых клавиш;
  
• prosemirror-history – реализация хранения истории изменений работает примерно как система контроля версий, т.е. можно откатить одни изменения, при этом сохранить другие, более поздние, что имеет особенное значение при совместной разработке;
  
• prosemirror-schema-list – набор команд для работы с элементами, имеющими отношение к списку (под элементом имеются в виду не DOM-элементы, а элементы контента, которые описаны в схеме нашего редактора).
  

Редактор с помощью ProseMirror

import { Schema } from "prosemirror-model";

const mySchema = new Schema({
    nodes: {
        doc: {
           content: 'block'
        },
        text: {},
        paragraph: {
            content: 'inline',
            group: 'block',
            toDOM: function toDOM(node) {
                return ['p', {class: 'paragraph'}, 0];
            },
        },
    },
});

<p class="paragraph">Content of the paragraph</p>

import { EditorState } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { Schema } from "prosemirror-model";

const mySchema = new Schema({
    nodes: {
        doc: {
            content: 'block+'
        },
        text: {
            group: 'inline',
            inline: true
        },
        paragraph: {
            content: 'inline*',
            group: 'block',
            toDOM: function toDOM(node) {
                return ['p', {class: 'paragraph'}, 0];
            },
        },
    },
});

/**
 * @classdesc объект редактора
 * @param {Object} el DOM-нода, в которую помещается редактор
 */
export default class Wysiwyg {
    constructor(el) {
        this.el = el;
    }

    /**
      * @description генерирует стейт и вью редактора
      * @param {Object} content объект, содержащий массив с элементами
      */
    setArticle(content) {
        const state = EditorState.fromJSON(
            {schema: mySchema},
            content,
        );
        const view = new EditorView(this.el, {state: state});
    }
}

<div id="editor"></div>

// импортируем конструктор редактора из пакета
import Wysiwyg from 'wysiwyg';

const root = document.getElementById('editor');
const myWysiwyg = new Wysiwyg(root);
myWysiwyg.setArticle();

content: [
    {
        type: 'paragraph',
        value: 'Это мой новый классный WYSIWYG-редактор',
    },
];

// импортируем конструктор редактора из пакета
import Wysiwyg from 'wysiwyg';

const root = document.getElementById('editor');
const myWysiwyg = new Wysiwyg(root);
const content = {
    type: 'doc',
    content: [
        {
            type: 'paragraph',
            value: 'Hello, world!',
        },
        {
            type: 'paragraph',
            value: 'This is my first wysiwyg-editor',
        }
    ],
};
myWysiwyg.setArticle(content);

Что делать с редактором дальше