levvsha

const decorator = new CompositeDecorator([
  {
    strategy: findLinkEntities,
    component: Link
  }
]);

this.state = {
  inlineToolbar: { show: false },
  editorState: EditorState.createEmpty(decorator)

levvsha

setLink() {
  // getting url from prompt dialogue
  const urlValue = prompt('Paste URL', '');
  // getting current editor state
  const { editorState } = this.state;
  // getting current contentState
  const contentState = editorState.getCurrentContent();
  // creating Entity
  const contentStateWithEntity = contentState.createEntity(
    'LINK',

levvsha

handleKeyCommand(command) {
  const { editorState } = this.state;
  const newState = RichUtils.handleKeyCommand(editorState, command);
  
  if (newState) {
    this.onChange(newState);
    return true;
  }
  
  return false;

levvsha

<Editor
  editorState={editorState}
  onChange={this.onChange}
  handleKeyCommand={this.handleKeyCommand}
  customStyleMap={customStyleMap}
  ref="editor"
/>

levvsha

const customStyleMap = {
  HIGHLIGHT: {
    backgroundColor: 'palegreen',
  },
};

levvsha

onMouseDown={(e) => {
  e.preventDefault();
  onToggle(type.style);
}}

levvsha

<InlineToolbar
  editorState={editorState}
  onToggle={this.toggleInlineStyle}
  position={inlineToolbar.position}
/>

levvsha

toggleInlineStyle(inlineStyle) {
  this.onChange(
    RichUtils.toggleInlineStyle(
      this.state.editorState,
      inlineStyle
    )
  );
}

levvsha

onChange(editorState) {
  if (!editorState.getSelection().isCollapsed()) {
    const selectionRange = getSelectionRange();
    if (!selectionRange) {
      this.setState({ inlineToolbar: { show: false } });
      return;
    }
    const selectionCoords = getSelectionCoords(selectionRange);
    this.setState({
      inlineToolbar: {

levvsha

export const getSelectionCoords = (selectionRange) => {
  const editorBounds = document.getElementById('editor-container').getBoundingClientRect();
  const rangeBounds = selectionRange.getBoundingClientRect();
  const rangeWidth = rangeBounds.right - rangeBounds.left;
  
  // 107px is width of inline toolbar
  const offsetLeft = (rangeBounds.left - editorBounds.left) + (rangeWidth / 2) - (107 / 2);
  
  // 42px is height of inline toolbar
  const offsetTop = rangeBounds.top - editorBounds.top - 42;