Render image

[reyamir]

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>

[inokawa]

Thank you for your interest in my lib. Unfortunately, it's impossible for now because rich-textarea is built on textarea element and it can render only texts.

It's possible to support image, video, etc in #74 if many people requested, but it's not scheduled yet.