Как визуализировать декоратор / объект с текстом, который отличается от соответствующей строки в значении редактора - PullRequest
Новая
       12

Как визуализировать декоратор / объект с текстом, который отличается от соответствующей строки в значении редактора

0 голосов
/ 17 июня 2019

Я пытаюсь создать редактор, используя draftJS, который отображает связанные значения в поле редактора для направляющих, которые будут включены в фактическое строковое значение редактора. У меня проблема в том, что когда я пытаюсь визуализировать ассоциированные значения в декораторе, а не фактическое значение, редактор начинает вести себя странно.

Пример: Если у меня есть объект в магазине с guid:1234 и value:"example value", если значение редактора hi there {1234}, я хочу, чтобы он просматривал имя объекта через guid и вместо этого отображал hi there <span>example value</span>, но когда я получаю мои декораторы для рендеринга диапазона, содержащего имя вместо guid, который соответствовал регулярному выражению, фокус редактора начинает перемещаться назад. Я заметил, что отсутствие рендеринга {props.children} в декораторе - единственное, что вызывает эту проблему.

Это то, что я пробовал ... 

/*This doesn't work: 
Rendering {tokenName} causes the Editor's focus to jump backwards 
when the new <span> gets inserted
*/

const TokenSpan = (props) => {
    let tokenGuid = props.decoratedText;
    let tokenName = getTokenNameById(tokenGuid);
    return (
        <span
            className={styles.token}
            data-offset-key={props.offsetKey}
        >
            {tokenName}
        </span>
    );
};

/* This does work, but I don't want to render {props.children} - 
how do I do this?? 
*/
const TokenSpan = (props) => {
    return (
        <span
            className={styles.token}
            data-offset-key={props.offsetKey}
        >
            {props.children}
        </span>
    );
};

Я бы ожидал, что смогу рендерить все, что захочу, в компонент декоратора без каких-либо странных проблем с фокусом редактора. Я связываю эти декораторы с объектами IMMUTABLE, которые, кажется, ведут себя так, как я и ожидал, но фокус редактора, пропускающий назад, действительно раздражает меня. Я вижу, что в props.children TokenSpan есть целая куча данных, которые должны указывать редактору, как обрабатывать фокус при добавлении диапазона, но я не знаю, как его использовать, чтобы он вел себя так, как я хочу. .

...