Блог

Я пытаюсь реализовать пользовательский декоратор для моего draft.js компонент. Я не хочу использовать CompositeDecorator, потому что я хотел бы отображать, возможно, много разных типов украшений на основе входных данных. Я не смог найти никакой документации для DraftDecoratorType, кроме определений типов в draft.js репозиторий —https://github.com/facebook/draft-js/blob/master/src/model/decorators/DraftDecoratorType.js

Я черпал вдохновение вhttps://github.com/SamyPesse/draft-js-prism/blob/master/lib/index.js и я решил попробовать с помощью маленьких шагов — просто напишите декоратор, который выделяет слова, начинающиеся с # bold.

Декоратор, который я использую до сих пор, можно найти ниже.

 this.state = {
            editorState: Draft.EditorState.createEmpty({
                getComponentForKey(key: string): Function {
                    const originalText = key.split('.')[0];
                    return () => <b>{originalText}</b>;
                },
                getPropsForKey(key: string): any {
                    return {};
                },

                getDecorations(block: any, contentState: any): any {

                    const text = block.getText();
                    const decorations: Array<string | null> = Array(text.length).fill(null);

                    let counter = 0;
                    let result: RegExpExecArray;

                    const regex = /(^|s)#w /g;
                    while ((result = regex.exec(text) as RegExpExecArray) != null) {
                        const start = result.index;
                        const end = start   result[0].length;
                        decorations.fill(result[0]   '.'   counter, start, end);
                        counter  ;
                    }

                    console.log(decorations);
                    return Immutable.List(decorations);
                }
            })
        };
  

полный код моего компонента можно найти по адресуhttps://github.com/d-kozak/react-playground/blob/master/src/draftjs/CustomDecoratorExample.tsx

К сожалению, редактор начинает вести себя непредсказуемо, когда я его использую. В тот момент, когда я набираю #, за которым следует символ (например, #a), то есть когда запускается декоратор, текст действительно становится жирным, но фокус перемещается в начало текстовой области, а затем он просто ведет себя очень непредсказуемо. Это сложно описать, но вы действительно можете попробовать это сами здесь:https://dkozak-react-playground.netlify.com

У меня в основном такой же декоратор, реализованный с помощью CompositeDecorator вhttps://github.com/d-kozak/react-playground/blob/master/src/draftjs/CompositeDecoratorExample.tsx и это работает так, как ожидалось. Если вы откроете мою страницу netlify, демонстрационную версию можно найти на другой вкладке на той же странице.

Но что-то в моем пользовательском декораторе полностью отключает редактор, но я не уверен, почему и как это исправить. Кто-нибудь, пожалуйста, может мне помочь?

Я считаю, что исправление заключается в замене возвращаемого значения вашего getComponentForKey на

 (props) => <b>{props.children}</b>;
  

Если вы посмотрите на дочерние элементы, вы увидите, что он содержит всевозможные ключи, и я предполагаю, Draft.js использует эти ключи, чтобы выяснить, изменили ли вы элемент или нет. Ваша версия не содержит этой информации, поэтому элементы, вероятно, были воссозданы заново или иным образом ваш курсор сброшен, поскольку он не знает, куда поместить этот, по-видимому, новый элемент.