Выберите текст в декораторе Draft.js. Нажмите на декоратор, чтобы реализовать перетаскивание
Я пытаюсь реализовать функциональность, которая позволит мне перетаскивать декорированный текст в редакторе Draft.js, и потратил пару дней на решение этой проблемы.
Синие блики — это аккорды в текстах, и моя цель — отрегулировать их положение в тексте.
Моя стратегия
- пометить текст в декораторе
onClickпри нажатии на декоратор - перемещать выделенный текст
Я знаю, что создаю состояние гонки в Draft.js, но не знаю, как решить эту проблему.
Код
У меня есть тестовая установка, которая доступна на Github.
https://github.com/tobi-or-not/draft-js-experiments
Сценарий 1:
Я нажимаю кнопку в том же компоненте, который отображает редактор. Это работает отлично. После нажатия кнопки часть текста выделяется
Сценарий 2:
Я нажимаю декоратор. После щелчка редактор возвращается в исходное состояние.
Должно быть что-то, чего я не понимаю. Возможно, для начала есть лучший способ реализовать этот вид перетаскивания. Идеи и подсказки приветствуются!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я наткнулся на комментарий в Draft.js Slack, который указал мне правильное направление.
Вы только передаете декоратор в начальное состояние, но:
- Декоратор имеет закрытие для компонента Button (в ПЕРВОМ отображаемом экземпляре, а не в текущем экземпляре)
- Компонент кнопки имеет закрытие для clickFn (в том же ПЕРВОМ отображаемом экземпляре)
- clickFn имеет закрытие для editorState (угадайте, что ... в том же ПЕРВОМ отображаемом экземпляре)
Поэтому ваш clickFn всегда обновляет исходное состояние, а не текущее состояние. Мозг, не так ли? В основном вам придется обновлять декоратор с каждым обновлением, чтобы все было правильно связано с предыдущим состоянием. Все это связано с тем, что DraftJS EditorState — это не просто объект данных, а дополнительные эффекты через декоратор. Самый простой выход из этого, вероятно, состоит в том, чтобы использовать старые добрые компоненты класса, чтобы замыкания продолжали указывать на один и тот же объект, а не каждый раз на новый.
И это то, что я сделал. Компонент, содержащий редактор Draft.js, теперь является компонентом класса. Код доступен на GitHub.