Odtnhj

I have been stuck at this since today morning and I still can't figure out where did I go wrong. I wanted to highlight text inside a textarea input type. I know this isn't possible, but I found a clever solution to cheat the viewer into thinking that. Here is the link to the article and Here is the link to the codeio pen for the project.

I have been trying to recreate the same using react and normal javascript but the scrollTop property for div with className highlight just doesn't work. If someone could help me debug what I'm doing wrong, that would be wonderful!

class CodeTextArea extends React.Component 
 constructor(props)
 super(props);
 this.state = scrollTop: 0, 
 scrollLeft: 0
 ;
 this.setScroll = this.setScroll.bind(this);
 
 setScroll(top,left)
 this.setState(scrollTop: top, scrollLeft: left);
 
 render()
 return(
 <div class="container">
 <div class="backdrop">
 <Highlight scrollTop=this.state.scrollTop scrollLeft=this.state.scrollLeft/>
 </div>
 <Textarea setScrollTop=this.setScroll/>
</div>
 );
 

class Highlight extends React.Component 
 constructor(props)
 super(props);
 this.divRef = React.createRef();
 
 componentDidUpdate(prevProps)
 if (this.props.scrollTop !== prevProps.scrollTop) 
 /*console.log(this.divRef.current);
 console.log(this.props.scrollTop);
 console.log(this.props.scrollLeft);*/
 this.divRef.current.scrollTop = this.props.scrollTop;
 

 
 render() 
 return (
 <div class="highlights" ref=this.divRef><mark>This</mark> demo shows how to highlight bits of text within a <mark>textarea</mark>. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.
 </div>
 );
 

class TogglePerspective extends React.Component 
 constructor(props)
 super(props);
 this.clickHandler = this.clickHandler.bind(this);
 this.buttonRef = React.createRef();
 
 clickHandler()

 
 render()
 return (
 <button onClick=this.clickHandler ref=this.buttonRef>Toggle Perspective</button>
 );
 

class Textarea extends React.Component 
 constructor(props)
 super(props);
 this.handleScroll = this.handleScroll.bind(this);
 this.handleChange = this.handleChange.bind(this);
 this.applyHighlights = this.applyHighlights.bind(this);
 this.textareaRef = React.createRef();
 this.state = value: 'This demo shows how to highlight bits of text within a textarea. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.';
 

 applyHighlights(text)
 return text
 .replace(/n$/g, 'nn')
 .replace(/[A-Z].*?b/g, '<mark>$&</mark>');
 

 handleScroll()
 let scrollTop = this.textareaRef.current.scrollTop;
 let scrollLeft = this.textareaRef.current.scrollLeft;
 this.props.setScrollTop(scrollTop,scrollLeft);
 

 handleChange(event)
 let textareaValue = event.targrt.value;
 this.setState(value: textareaValue);
 let highlightedText = this.applyHighlights(textareaValue);
 

 render()
 return (
 <textarea ref=this.textareaRef value=this.state.value onChange=this.handleChange onScroll=this.handleScroll></textarea>
 );
 

class Editor extends React.Component 
 render()
 return (
 <div>
 <CodeTextArea />
<TogglePerspective />
</div>
 );
 


ReactDOM.render(
 <Editor />,
 document.getElementById('root')
);

Here is the codeIo pen to my recreation. Just please tell me why the
highlight class div scrollTop attribute is not working.
I don't usually post long code here unless I'm truly frustrated so any help is appreciated.

Looks like the scrollTop property is being set on div.highlights when it should be set on div.backdrop.

Move div.backdrop into the Highlight Component and put the ref on that element:

<div class="backdrop" ref=this.divRef>
<div class="highlights">
 <mark>This</mark> demo shows how to highlight bits of text within a <mark>textarea</mark>.
 Alright, that's a lie. You can't actually render markup inside a textarea. However, you can 
 fake it by carefully positioning a div behind the textarea and adding your highlight markup there. 
 JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. 
 Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.
</div>