textarea highlight text code example

Example: highlight textarea

function Demo() {  const highlight = [    {      highlight: 'blue',      enhancement: MultiColor,      className: 'blue',    },    {      highlight: /[^ ]*berry/gi,      enhancement: ToolTip,      className: 'yellow',    },  ]    function ToolTip(props) {    const content = (      < style={{        whiteSpace: "pre",         overflow: "hidden",         textOverflow: "ellipsis"      }}>        {JSON.stringify(props.data, 0, 1)}      </>    )    const overlayStyle = {      position: "absolute",      height: "50%",      width: "100%",      background: "transparent",      zIndex: 1,    }      return (      <mark style={{position: "relative"}}>        <Tippy content={content} maxWidth="400px">          <mark style={overlayStyle}></mark>        </Tippy>        <props.MarkView />      </mark>    )  }    function MultiColor(props) {    const [color, setColor] = useState(0xff8800);    const colorText = `#${color.toString(16)}`      useEffect(() => {      const timer = setInterval(() => setColor(0x808080 | (color + 0x081018) % 0xFFFFFF), 200)      return () => clearInterval(timer)    })    return <props.MarkView style={{backgroundColor: colorText}} />  };  return <HighlightWithinTextarea highlight={highlight} />;}