text: import React from "react";
  import { observer, inject } from "mobx-react";
  import Utils from "../../utils";
  import TextNode from "../TextNode/TextNode";
  
  const HtxTextNodeView = ({ store, range, id, highlightStyle, style, charIndex, children, overlap }) => {
    const getStyle = range => (range ? highlightStyle : style);
    const getRangeKey = () => `${id}-${range.start}-${charIndex}`;
    const getNormalKey = () => `${id}-${charIndex}`;
    const getKey = range => (range ? getRangeKey() : getNormalKey());
  
    let wrapper = (
      <span data-position={charIndex} key={getKey(range)} style={getStyle(range)}>
        {children}
      </span>
    );
  
    if (overlap && overlap.length) {
      let bg;
  
      if (range.states) {
        range.states.map(i => {
          bg = Utils.Colors.convertToRGBA(i.getSelectedColor(), 0.3);
        });
      }
  
      store.completionStore.selected.regionStore.regions.map(i => {
        if (i.selected) {
          overlap.map(overlapItem => {
            if (overlapItem === i.id) {
              bg = "#ff4d4f";
            }
          });
        }
  
        if (i.highlighted && overlap.includes(i.id)) {
          bg = "#ff4d4f";
        }
      });
  
      wrapper = overlap.reduceRight((value, key) => {
        return (
          <TextNode
            style={{ background: bg, padding: "2px 0" }}
            position={charIndex}
            overlap={key}
            keyNode={getKey(range)}
          >
            {value}
          </TextNode>
        );
      }, children);
    }
  
    return wrapper;
  };
  
  const HtxTextNode = inject("store")(observer(HtxTextNodeView));
  export { HtxTextNode };
  