Render image
reyamir opened this issue · comments
雨宮蓮 commented
HI, thank for great library.
I'm just have small problem, I not sure it is a bug or rich-textarea
is not support this feature yet. I just want to display image instead of url when user uploaded image, but rich-textarea
is not display image problaly, I'm tried use CSS to style but not have much effort
Screen.Recording.2024-02-23.at.09.56.53.mov
I use regex to parse image url
const renderer = createRegexRenderer([
[
HASHTAG_REG,
({ children, key }) => (
<span key={key} className="text-blue-500">
{children}
</span>
),
],
[
URL_REG,
({ children, key, value }) => (
<a key={key} href={value} target="_blank" className="text-blue-500">
{children}
</a>
),
],
[
IMAGE_REG,
({ children, key, value }) => (
<img
key={key}
src={value}
className="my-1 h-auto w-full object-cover"
loading="lazy"
decoding="async"
/>
),
],
]);
And rich textarea component
<RichTextarea
value={text}
onChange={(e) => setText(e.target.value)}
placeholder={t("editor.placeholder")}
className="resize-none border-none outline-none placeholder:text-neutral-600 focus:border-none focus:outline-none focus:ring-0 dark:placeholder:text-neutral-400"
style={{ width: "100%", height: "100%" }}
autoHeight
autoFocus
>
{renderer}
</RichTextarea>