Ошибка выделения текста с draft.js и декоратором - PullRequest
Новая
       11

Ошибка выделения текста с draft.js и декоратором

0 голосов
/ 15 февраля 2019

Я использую редактор draft.js таким образом, что мне нужно обновить декоратор, а также реквизиты компонента, который он отображает на лету внутри onChange.Это позволяет пометить части текста цветом фона.

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

Вот минимальный (искусственный) пример для воспроизведения ошибки: 

import React from 'react';
import { CompositeDecorator, Editor, EditorState } from 'draft-js';


const Marked = ({ children, background }) => <span style={{ background }}>{children}</span>;


class TestEditor extends React.Component {
  constructor(props) {
    super(props);

    this.state = { editorState: EditorState.createEmpty() };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(editorState) {
    const markers = [{ from: 3, to: 7 }, { from: 12, to: 15 }];

    const strategy = (contentBlock, callback) => {
      const text = contentBlock.getText();
      markers.forEach(({ from, to }) => {
        if (text.length >= to) callback(from, to);
      });
    };

    const decorator = new CompositeDecorator([
      { strategy, component: (props) => <Marked {...props} background="#00ff2a1a" /> },
    ]);

    const newEditorState = EditorState.set(editorState, { decorator });

    this.setState({ editorState: newEditorState });
  }

  render() {
    const { editorState } = this.state;

    return <Editor editorState={editorState} onChange={this.handleChange} />;
  }
}

export default TestEditor;

Это будет ввод текста, где текст в позициях 3 - 7 и 12 - 15 имеет зеленый фон(если он существует).

Если я сейчас, например, напишу aaabbbbccc, невозможно выбрать первый c.С помощью мыши он выбирается, пока я не отпущу кнопку мыши;используя клавиатуру, он вообще не отображается (это может быть на мгновение).

Если я использую статический компонент без нового ввода в методе handleChange, он работает нормально: const decorator = new CompositeDecorator([{ strategy, component: Marked }]);.Однако это не подходит для моего варианта использования.

Есть предложения?

1 Ответ

0 голосов
/ 16 февраля 2019

В итоге получается, что я могу делать то, что мне нужно, с черновым entities, возможно, с гораздо лучшей производительностью

...