# All files / composer/utils/draft-js-custom-plugins/unshortened-link UnshortenedLink.jsx

0% Statements 0/13
0% Branches 0/2
0% Functions 0/3
0% Lines 0/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50

     import React from 'react';
    import PropTypes from 'prop-types';
    import styles from './UnshortenedLink.css';

    class UnshortenedLink extends React.Component {
      static propTypes = {
        onMouseOver: PropTypes.func.isRequired,
        onMouseOut: PropTypes.func.isRequired,
        entityKey: PropTypes.string.isRequired,
        contentState: PropTypes.object.isRequired,
        children: PropTypes.node.isRequired,
      };

      // UNSHORTENED_LINK entities are mutable: don't offer to reshorten mutated entities
      onMouseOver = () => {
        const { contentState, entityKey } = this.props;
        const { unshortenedLink, shortLink } = contentState.getEntity(entityKey).getData();

        const entityText = this.props.children[0].props.text;
        const wasEntityMutated = unshortenedLink !== entityText;
        if (wasEntityMutated) return;

        const el = this.refs.unshortenedLink;
        const firstLineOfLinkPosition = el.getClientRects()[0];
        const parentPosition = el.offsetParent.getBoundingClientRect();

        const relativePosition = {
          top: firstLineOfLinkPosition.top - parentPosition.top,
          left: firstLineOfLinkPosition.left - parentPosition.left,
          width: firstLineOfLinkPosition.width,
          height: firstLineOfLinkPosition.height,
        };

        this.props.onMouseOver({ entityKey, unshortenedLink, shortLink, relativePosition });
      };

      onMouseOut = () => this.props.onMouseOut();

      render = () => (
        <span
          onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}
          className={styles.link} ref="unshortenedLink"
        >
          {this.props.children}
        </span>
      );
    }

    export default UnshortenedLink;