Как реализовать собственный декоратор в draftjs - PullRequest
Новая
       9

Как реализовать собственный декоратор в draftjs

0 голосов
/ 02 апреля 2019

Я пытаюсь реализовать собственный декоратор для моего проекта 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 и решил попробовать с маленькими шагами - просто написать декораторэто делает слова, начинающиеся с # жирным шрифтом.

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

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, демо-версию можно найти на другой вкладке на этой же странице.

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

...