wix-style-react/dist/src/RichTextInputArea/EditorUtilities.js

wix-style-react

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _draftJs = require("draft-js");

var _draftJsExportHtml = require("draft-js-export-html");

var _UrlUtils = require("../utils/UrlUtils");

var _RichTextInputAreaTypes = require("./RichTextInputAreaTypes");

/** Returns whether the specified style is applied on a block */
var hasStyle = function hasStyle(editorState, style) {
  var currentStyle = editorState.getCurrentInlineStyle();
  return currentStyle.has(style);
};
/** Returns whether a block with the specified type exists */


var hasBlockType = function hasBlockType(editorState, blockType) {
  var selection = editorState.getSelection();
  var currentBlockType = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
  return currentBlockType === blockType;
};
/** Returns whether the specified entity is applied on a block */


var hasEntity = function hasEntity(editorState, entity) {
  var selection = editorState.getSelection();
  var contentState = editorState.getCurrentContent();
  var currentKey = contentState.getBlockForKey(selection.getStartKey()).getEntityAt(selection.getStartOffset());

  if (currentKey) {
    var currentEntity = contentState.getEntity(currentKey);
    return currentEntity.type === entity;
  }

  return false;
};
/** Returns whether the block of the selected text is linked to an entity */


var hasRemovableEntityInSelection = function hasRemovableEntityInSelection(editorState) {
  if (_hasSelectedText(editorState)) {
    var _getSelectedBlock2 = _getSelectedBlock(editorState),
        contentBlock = _getSelectedBlock2.contentBlock,
        startOffset = _getSelectedBlock2.startOffset; // Finds the entity that's related to the selected text


    var entity = contentBlock.getEntityAt(startOffset);

    if (entity) {
      return true;
    }
  }

  return false;
};
/** Returns an EditorState with the rendered selection.
 * Mainly useful in order to maintain the selection after creating new state */


var keepCurrentSelection = function keepCurrentSelection(editorState) {
  return _draftJs.EditorState.forceSelection(editorState, editorState.getSelection());
};
/** Returns an EditorState so that the specified style is toggled on the selection */


var toggleStyle = function toggleStyle(editorState, toggledStyle) {
  return _draftJs.RichUtils.toggleInlineStyle(keepCurrentSelection(editorState), toggledStyle);
};
/** Returns an EditorState so that the specified block type is toggled on the selection */


var toggleBlockType = function toggleBlockType(editorState, toggledBlockType) {
  return _draftJs.RichUtils.toggleBlockType(keepCurrentSelection(editorState), toggledBlockType);
};

var toggleLink = function toggleLink(editorState, linkData) {
  if (hasRemovableEntityInSelection(editorState)) {
    var _getSelectedBlock3 = _getSelectedBlock(editorState),
        contentBlock = _getSelectedBlock3.contentBlock,
        startOffset = _getSelectedBlock3.startOffset;

    var entity = contentBlock.getEntityAt(startOffset);
    return _removeEntityFromBlock(editorState, contentBlock, entity);
  }

  return _attachLinkEntityToText(editorState, linkData);
};

var getSelectedText = function getSelectedText(editorState) {
  var _getSelectedBlock4 = _getSelectedBlock(editorState),
      contentBlock = _getSelectedBlock4.contentBlock,
      startOffset = _getSelectedBlock4.startOffset,
      endOffset = _getSelectedBlock4.endOffset;

  return contentBlock.getText().slice(startOffset, endOffset);
};

var findLinkEntities = function findLinkEntities(contentBlock, callback, contentState) {
  contentBlock.findEntityRanges(function (character) {
    var entityKey = character.getEntity();
    return entityKey !== null && contentState.getEntity(entityKey).getType() === _RichTextInputAreaTypes.entityTypes.link;
  }, callback);
};

var convertToHtml = function convertToHtml(editorState, prependHTTP) {
  var markupConfig = {
    inlineStyles: {
      ITALIC: {
        element: 'em'
      }
    },
    entityStyleFn: function entityStyleFn(entity) {
      var entityType = entity.get('type').toLowerCase();

      if (entityType === 'link') {
        var _entity$getData = entity.getData(),
            url = _entity$getData.url;

        return {
          element: 'a',
          attributes: {
            rel: 'noopener noreferrer',
            target: '_blank',
            href: prependHTTP ? (0, _UrlUtils.prependHTTP)(url) : url
          }
        };
      }
    }
  };
  var html = (0, _draftJsExportHtml.stateToHTML)(editorState.getCurrentContent(), markupConfig); // Getting rid of unexceptional extra empty line-breaks manually until it would be adopted and supported by `stateToHTML`:
  // http://github.com/sstur/draft-js-utils/pull/84

  return html.replace(/<p><br>/g, '<p>');
};

var isEditorFocused = function isEditorFocused(editorState) {
  return editorState.getSelection().getHasFocus();
};
/** Returns true in case the editor's content does not contain any block which has a non-default type or text.
    It means that if the user changes the block type before entering any text, the content will be considered as non-empty.
 */


var isEditorEmpty = function isEditorEmpty(editorState) {
  return !editorState.getCurrentContent().hasText() && editorState.getCurrentContent().getBlockMap().first().getType() === _RichTextInputAreaTypes.blockTypes.unstyled;
}; // Returns whether a text is selected


var _hasSelectedText = function _hasSelectedText(editorState) {
  return !editorState.getSelection().isCollapsed();
};

var _getSelectedBlock = function _getSelectedBlock(editorState) {
  var selection = editorState.getSelection();
  var currentContent = editorState.getCurrentContent(); // Resolves the current block of the selection

  var anchorKey = selection.getAnchorKey();
  var currentBlock = currentContent.getBlockForKey(anchorKey); // Resolves the current block with extra information

  return {
    contentBlock: currentBlock,
    startOffset: selection.getStartOffset(),
    endOffset: selection.getEndOffset(),
    startKey: selection.getStartKey(),
    endKey: selection.getEndKey()
  };
};

var _attachLinkEntityToText = function _attachLinkEntityToText(editorState, _ref) {
  var text = _ref.text,
      url = _ref.url;
  var contentState = editorState.getCurrentContent();
  var selectionState = editorState.getSelection();
  var contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {
    url: url
  });
  var entityKey = contentStateWithEntity.getLastCreatedEntityKey();
  var startPosition = selectionState.getStartOffset();
  var endPosition = startPosition + text.length; // A key for the block that containing the start of the selection range

  var blockKey = selectionState.getStartKey(); // Replaces the content in specified selection range with text

  var contentStateWithText = _draftJs.Modifier.replaceText(contentState, selectionState, text);

  var newSelectionState = new _draftJs.SelectionState({
    anchorOffset: startPosition,
    anchorKey: blockKey,
    focusOffset: endPosition,
    focusKey: blockKey
  });

  var newEditorState = _draftJs.EditorState.push(editorState, contentStateWithText, 'insert-characters');

  return _draftJs.RichUtils.toggleLink(newEditorState, newSelectionState, entityKey);
};

var _removeEntityFromBlock = function _removeEntityFromBlock(editorState, contentBlock, entity) {
  var contentState = editorState.getCurrentContent();
  var selectionState = editorState.getSelection();
  var selectionWithEntity = null;
  contentBlock.findEntityRanges(function (character) {
    return character.getEntity() === entity;
  }, function (start, end) {
    // Creates a selection state that contains the whole text that's linked to the entity
    selectionWithEntity = selectionState.merge({
      anchorOffset: start,
      focusOffset: end
    });
  }); // Removes the linking between the text and entity

  var contentStateWithoutEntity = _draftJs.Modifier.applyEntity(contentState, selectionWithEntity, null);

  var newEditorState = _draftJs.EditorState.push(editorState, contentStateWithoutEntity, 'apply-entity');

  return _draftJs.RichUtils.toggleLink(newEditorState, selectionState, null);
};

var _default = {
  hasStyle: hasStyle,
  hasBlockType: hasBlockType,
  hasEntity: hasEntity,
  hasRemovableEntityInSelection: hasRemovableEntityInSelection,
  toggleStyle: toggleStyle,
  toggleBlockType: toggleBlockType,
  toggleLink: toggleLink,
  getSelectedText: getSelectedText,
  findLinkEntities: findLinkEntities,
  convertToHtml: convertToHtml,
  isEditorFocused: isEditorFocused,
  isEditorEmpty: isEditorEmpty
};
exports["default"] = _default;