Переработать систему тегирования текста
Цена договорная
Используем редактор SlateJS
Ветка https://gitlab.com/qulap_dev/slate-demo/-/tree/tags
{ 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
Видео, как должно это работать по ссылке
Ветка https://gitlab.com/qulap_dev/slate-demo/-/tree/tags
- Необходимо переработать функционал создания и отображения тегов. Сейчас случайный тег создается по нажатию на 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).
- Отмеченный тег сохраняется в 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 }[] } (можно адаптировать при необходимости). Для этого при добавлении новых тегов получится сделать пересечение и вложение.
{ 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
Видео, как должно это работать по ссылке
В заказе есть исполнитель
При переводе заказа из архивного в актуальный, текущий исполнитель будет снят с задачи.
Выберите тип сделки
С безопасной сделкой вы всегда сможете вернуть средства, если что-то пойдет не так. С простой сделкой вы самостоятельно договариваетесь с исполнителем об оплате и берете на себя решение конфликтов.