I'm trying to create an editor, using draftJS, which renders assosciated values in the editor field to guids which will be included in the actual string value of the editor. The problem I'm having is that when I try to render the assosciated values in the decorator, rather than the actual value, the editor starts behaving weirdly.
Example:
If I have an Object in the store with guid:1234 and value:"example value", If the editor's value is hi there {1234} I want it to lookup the name of the object via the guid and render hi there <span>example value</span> instead .. but when I get my decorators to render the span containing the name instead of the guid which matched the regex the editor's focus starts jumping backwards. I've noticed that not rendering {props.children} in the decorator is the single thing that causes this problem.
This is what I've tried...
/*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>
);
};
I'd expect to be able to render whatever I want into the decorator component without having weird issues with the editor's focus.. I'm coupling these decorators to IMMUTABLE entities which seems to be behaving as I'm expecting but the editor's focus skipping backwards is really annoying me. I can see that there's a whole bunch of data in props.children of the TokenSpan which must tell the editor how to handle its focus when adding the span but I don't know how to use it to make it behave how I want it to.
