import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import CustomTextEditor from './Hello';
import './style.css';

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

{
  "name": "@plnkr/starter-react",
  "version": "1.0.2",
  "description": "React starter template",
  "dependencies": {
    "react": "^16.13.0",
    "react-dom": "^16.13.0"
  },
  "plnkr": {
    "runtime": "system",
    "useHotReload": true
  }
}

h1,
p {
  font-family: sans-serif;
}
mark {
  cursor:pointer
}

import React, {useState, useEffect, useRef} from 'react';

export default ({ name }) => (
  <>
    <p contenteditable="true">
  Editable text box with some additional input controls like this consider that highlighting keyword <MarkText>XX.XX</MarkText> and it can contain multiple like this <MarkText>XX.XX</MarkText> 
</p>
  </>
);

const InputText = (value) => {
  const [ textValue, setTextValue] = useState('');
  const [ changed, setChanged ] = useState(false);
  useEffect(val => {
    setTextValue(val);
    inputRef.current.focus();
  }, value);
  const inputRef = useRef(null);

  return changed ? textValue :<input ref={inputRef}  type="text" value={textValue} onChange={event => setTextValue(event.target.value)} onBlur={event => setChanged(true)} />
}

const MarkText = ({children}) => {
  const [ editable, setEditable] = useState(false);
  const onMarkClick = (event) => {
    setEditable(!editable);
  }

  return (
    editable ? <InputText value={children} /> : <mark onClick={onMarkClick}>{children}</mark>
  );

}