Draft-js: auto line break

Question

Я пытаюсь реализовать редактор, используя фреймворк Draft-JS, который будет ограничен линией в 50 символов.

Я не хочу, чтобы линии прерывались с использованием css, я хочу, чтобы они действительно разбивались на отдельные блоки при достижении этого предела в 50 символов.

Разрыв строки должен происходить в последнем пространстве перед словом, превышающим 50-й символ (аналогично word-wrap: break-word в css).

Наверняка, мне нужен выбор, чтобы остаться в конце новой линии.

Я не уверен, с чего начать. Есть идеи?

• Я создал проект-JS codepen с предварительным просмотром текущего editorState для легкого запуска, просто не знаю, с чего начать: https://codepen.io/adamtal/pen/pbqVrL?editors=0010

Update: В ответ на Jiang YD Я не думаю, что это хорошая идея, чтобы взять текст с конца блока и создать новый блок с ним. Не уверен, насколько хорошо состояние форматирования будет сохранено. Я думаю, что решение должно использовать Modifier.splitBlock с некоторыми манипуляциями выбора.

Answer 1

Вот как

1. захватывают ввод текста в handleBeforeInput
2. получить блок текущего выбора
3. получить текст текущего блока
4. сделать свою линию на разрыв
5. вставить новый блок с вырезанным текстом до ContentState
6. установить новое состояние на ваш компонент