Используем редактор SlateJS
Ветка https://gitlab.com/qulap_dev/slate-demo/-/tree/tags

1. Необходимо переработать функционал создания и отображения тегов. Сейчас случайный тег создается по нажатию на ctrl (https://gitlab.com/qulap_dev/slate-demo/-/blob/tags/src/components/interview-editor/InterviewEditor.tsx#L113-120). Надо переделать, чтобы при выделении текста показывался всплывающий тулбар (https://www.slatejs.org/examples/hovering-toolbar) для выбора тега и выбор тега происходил через addMark (https://docs.slatejs.org/v/v0.47/slate-core/commands#addmark).
2. Отмеченный тег сохраняется в value редактора и имеет формат { text: string, tag: TagType } (https://gitlab.com/qulap_dev/slate-demo/-/blob/tags/src/components/interview-editor/InterviewEditor.tsx#L50-53). Из-за такого подхода не получится делать пересекаемые и вкладываемые теги. Предполагается передать формат на такой { text: string, tags: { id: number, type: TagType }[] } (можно адаптировать при необходимости). Для этого при добавлении новых тегов получится сделать пересечение и вложение.

<span class="line">{ text: 'This is editable ' },
{ text: 'rich', tagIds: [{ id: 0, tagType: TagType.blue }] }, // Первый тег</span>
<span class="line">{ text: ' text, ', tagIds: [{ id: 0, tagType: TagType.blue }, { id: 1, tagType: TagType.red }] }, // Пересечение тегов</span>
<span class="line">{ text: 'much', tagIds: [{ id: 1, tagType: TagType.red }] }, // Второй тег</span>
<span class="line">{ text: ' better than a ' },</span>
<span class="line">{ text: '<textarea>' },</span>

<span class="line">{ text: 'This is editable ' },</span>
<span class="line">{ text: 'rich', tagIds: [{ id: 0, tagType: TagType.blue }] }, // Первый тег</span>
<span class="line">{ text: ' text, ', tagIds: [{ id: 0, tagType: TagType.blue }, { id: 1, tagType: TagType.red }] }, // Второй тег является вложенным</span>
<span class="line">{ text: 'much', tagIds: [{ id: 0, tagType: TagType.blue }] }, // Продолжение первого тега</span>
<span class="line">{ text: ' better than a ' },</span>
<span class="line">{ text: '<textarea>' },</span>
3. Сделать рендеринг размеченных тегов в редакторе с учетом наложения тегов. Если текст принадлежит только одному тегу, то добавлять ему задний фон этого цвета. Если текст принадлежит нескольким тегам, то надо сделать умножение или наложение цветов для фона. Как делать рендеринг конечных узлов можно посмотреть тут https://github.com/ianstormtaylor/slate/blob/d39943741f88c2d3d85375b58057b3dbca7d8c42/site/examples/richtext.tsx#L181-L199

Видео, как должно это работать по ссылке