Блог

Я пытаюсь реализовать функциональность, которая позволит мне перетаскивать оформленный текст в Draft.js редактор и потратили пару дней мозговых усилий на эту проблему.

Синие подсветки — это аккорды в тексте, и моя цель — настроить их положение в тексте.

Моя стратегия

• отметьте текст в декораторе onClick при нажатии на декоратор
• переместите выделенный текст вокруг

Я знаю, что я создаю условие гонки в Draft.js но я не знаю, как решить эту проблему.

Код

У меня есть настроенный тест, который доступен на Github.
https://github.com/tobi-or-not/draft-js-experiments

Сценарий 1:

Я нажимаю кнопку в том же компоненте, который отображает редактор. Это работает отлично. После нажатия кнопки часть текста будет выделена

Сценарий 2:

Я нажимаю на декоратор. После щелчка редактор возвращается в исходное состояние

Должно быть что-то, чего я не понимаю. Может быть, есть лучший способ реализовать этот вид перетаскивания для начала. Идеи и подсказки очень ценятся!

Я наткнулся на комментарий к Draft.js Слабина, которая указала мне правильное направление.

Вы только передаете декоратор в начальное состояние, но:

• Декоратор закрывает компонент кнопки (в ПЕРВОМ визуализированном экземпляре, а не в текущем экземпляре)
• Компонент Button имеет закрытие для clickFn (в том же ПЕРВОМ визуализированном экземпляре)
• clickFn имеет закрытие для editorState (угадайте, что … в том же ПЕРВОМ экземпляре, который был отображен)

Поэтому ваш clickFn всегда обновляет исходное состояние, а не текущее состояние Mindfuck, не так ли? В основном вам нужно будет обновлять декоратор с каждым обновлением, чтобы все было правильно связано с предыдущим состоянием. Все это вызвано тем фактом, что DraftJS EditorState — это не просто объект данных, но и включает побочные эффекты через декоратор.
Вероятно, самый простой выход из этого — использовать старые добрые компоненты класса, чтобы замыкания каждый раз указывали на один и тот же объект, а не на новый.

И это то, что я сделал. Компонент, содержащий Draft.js редактор теперь является компонентом класса. Код доступен на GitHub.