Slate.js

import React from "react";
import { Editor } from "slate-react";
import Plain from "slate-plain-serializer";

import InstantReplace from "slate-instant-replace";

import isUrl from "is-url";

// Transformation function
const AddURL = (editor, lastWord) => {
  if (isUrl(lastWord)) {
    editor.moveFocusBackward(lastWord.length); // select last word
    editor.unwrapInline("link"); // remove existing urls
    const href = lastWord.startsWith("http") ? lastWord : `https://${lastWord}`;
    editor.wrapInline({ type: "link", data: { href } }); // set URL inline
    editor.moveFocusForward(lastWord.length); // deselect it
  }
};

// Initialise the plugin
const plugins = [InstantReplace(AddURL)];

const initialValue = Plain.deserialize("Habak");

class Slate extends React.Component {
  // Set the initial value when the app is first constructed.
  state = {
    value: initialValue,
  };

  // On change, update the app's React state with the new editor value.
  onChange = ({ value }) => {
    this.setState({ value });
  };

  // Render the editor.
  render() {
    return (
      <Editor
        value={this.state.value}
        onChange={this.onChange}
        plugins={plugins}
        renderNode={Node}
      />
    );
  }
}

// Render slate node
const Node = ({ attributes, children, node }) => {
  switch (node.type) {
    case "link": {
      const { data } = node;
      const href = data.get("href");
      return (
        <a href={href} {...attributes}>
          {children}
        </a>
      );
    }
    default:
      return null;
  }
};

export default Slate;