01.07.2022, 13:40
Hello together,
I'm trying to get some code working which will highlight links automatically in an rich text editor. This is not my own written code this is from draft js and is provided by many different web pages because this is the absolutlly basic how it should work out.
My major problem is that when I deifinine the linkDecorator of the type CompositeDecorator the compiler tells me that the linkDecorator is $ReadOnlyArray<DraftDecorator> which can't handle the provided input. I have absolutly no idea what I'm doing wrong because for people on about 10 different websites exactly this code works out well. Even in an [online compiler][1] were you can compile the code yourself it works.
Also practically the programm won't throw errors but it simply won't do anything anymore after this line.
Thanks in advance for any help!!!
[1]: https://codesandbox.io/s/nz8fj?file=/src/index.js
I'm trying to get some code working which will highlight links automatically in an rich text editor. This is not my own written code this is from draft js and is provided by many different web pages because this is the absolutlly basic how it should work out.
My major problem is that when I deifinine the linkDecorator of the type CompositeDecorator the compiler tells me that the linkDecorator is $ReadOnlyArray<DraftDecorator> which can't handle the provided input. I have absolutly no idea what I'm doing wrong because for people on about 10 different websites exactly this code works out well. Even in an [online compiler][1] were you can compile the code yourself it works.
Also practically the programm won't throw errors but it simply won't do anything anymore after this line.
Thanks in advance for any help!!!
Code:
function findLinkEntities(contentBlock, callback, contentState){
contentBlock.findEntityRanges((character) => {
const entityKey = character.getEntity();
return(
entityKey !== null &&
contentState.getEntity(entityKey).getElementById() === 'LINK'
)
}, callback);
}
const Link = (props) => {
const { url,linkText} = props.contentState
.getEntity(props.entityKey)
.getData()
return (
<a style={{color: '#006cb7', textDecoration: 'underline'}}
href={url}>
{linkText || props.children}
</a>
)
}
const linkDecorator = new CompositeDecorator([
{
strategy: findLinkEntities,
component: Link,
}
])
[1]: https://codesandbox.io/s/nz8fj?file=/src/index.js