Linkify DraftTail Editor using decorators

LinkifyDraftailEditor.jsx

// If you're using https://github.com/lokiuz/redraft,
// reuse these methods in your renderers module.

const urlRegex = (/((?:https?(?::\/\/))(?:www\.)?(?:[a-zA-Z\d-_.]+(?:\.[a-zA-Z\d]{2,})|localhost)(?:(?:[-a-zA-Z\d:%_+.~#!?&//=@]*)(?:[,](?![\s]))*)*)/g);

function findWithRegex(regex, contentBlock, callback) {
  const text = contentBlock.getText();
  let matchArr;
  let start;
  matchArr = regex.exec(text);
  while (matchArr !== null) {
    start = matchArr.index;
    callback(start, start + matchArr[0].length);
    matchArr = regex.exec(text);
  }
}

// contentState available as last argument
function handleLinkStrategy(contentBlock, callback) {
  findWithRegex(urlRegex, contentBlock, callback);
}

const DraftLink = ({ decoratedText, children }) => (
  <a
    className="link-classname"
    href={decoratedText}
    rel="noopener noreferrer"
    style={{ color: 'blue' }}
    target="_blank"
    title={`link to ${decoratedText}`}
  >
    {children}
  </a>
);

const Editor = (props) => {
  const {
    ...rest
  } = props;
  return (
    <DraftailEditor
      {...rest}
      decorators={[{
        strategy: handleLinkStrategy,
        component: DraftLink,
      }]}
    />
  );
};

export default Editor;