Свой Инструмент: поле письма
Строчный атом с кнопкой на Панели — Merge Tag, который подставляет имя клиента в рассылку.
Письмо рассылки пишут один раз, а имя клиента и его тариф подставляет сервер при отправке. Автору нужно отметить в тексте, куда что встанет: это Merge Tag — строчный атом с ключом поля. Рецепт собирает его своим Инструментом: Блок, правило Схемы, кнопка с поповером на Панели.
Нажмите кнопку с меткой на Панели (или Ctrl+Alt+M) и выберите поле — оно встанет у каретки.
Из чего он состоит
Часть для движка — Node Tiptap: атом, его атрибут и Текст атома (renderText), который
видят getText(), maxLength и счётчик слов. Группу, разбор и вывод HTML узлу ставит кит — по
правилам Схемы, поэтому parseHTML и renderHTML не пишутся. addNodeView рисует атом в
Редакторе как чип; это только вид, в Документ он не попадает.
Правила Схемы — данные без Tiptap: kind: "inline" и атрибут acme_key со списком
допустимых значений. По ним кит пишет HTML и чистит Документ; ключ не из списка срезается и в
браузере, и на сервере.
<span data-block="acme_mergeTag" data-acme_key="first_name"></span>Кнопка — запись buttons: подпись (строка или функция от { locale }), обязательный
значок, can и поповер. Рамку поповера, фокус, Escape, подсказку с сочетанием и
aria-keyshortcuts держит кит.
Префикс
Всё своё называется с Префиксом через подчёркивание: Инструмент acme_mergeTag, атрибут
acme_key. У имён кита подчёркивания нет, поэтому своё и встроенное не пересекаются ни в наборе,
ни в сохранённом Документе.
На сервере
Сервер чистит Документ тем же массивом tools, что получил Редактор, — иначе свой Блок
срежется при сохранении:
import { sanitizeRichText } from "@olddevs/ui/editor/schema";
const html = sanitizeRichText(dirty, DOMPurify, EDITOR_TOOLS);Чтобы описание Инструмента импортировалось на сервере без Tiptap и React, отдайте Часть для движка загрузчиком — подробно в API расширения.