upfront-editable/lib/highlight-support.js

Friendly contenteditable API

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

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

var _jquery = _interopRequireDefault(require("jquery"));

var _rangy = _interopRequireDefault(require("rangy"));

var content = _interopRequireWildcard(require("./content"));

var _highlightText2 = _interopRequireDefault(require("./highlight-text"));

var _textHighlighting = _interopRequireDefault(require("./plugins/highlighting/text-highlighting"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function isInHost(elem, host) {
  if (!elem.closest) elem = elem.parentNode;
  return elem.closest('[data-editable]:not([data-word-id])') === host;
}

var highlightSupport = {
  highlightText: function highlightText(editableHost, text, highlightId) {
    if (this.hasHighlight(editableHost, highlightId)) return;

    var blockText = _highlightText2["default"].extractText(editableHost);

    var marker = '<span class="highlight-comment"></span>';
    var markerNode = highlightSupport.createMarkerNode(marker, 'highlight', this.win);
    var textSearch = new _textHighlighting["default"](markerNode, 'text');
    var matches = textSearch.findMatches(blockText, [text]);

    if (matches && matches.length) {
      if (highlightId) matches[0].id = highlightId;

      _highlightText2["default"].highlightMatches(editableHost, matches);

      return matches[0].startIndex;
    }
  },
  highlightRange: function highlightRange(editableHost, highlightId, startIndex, endIndex, dispatcher, type) {
    if (this.hasHighlight(editableHost, highlightId)) {
      this.removeHighlight(editableHost, highlightId);
    }

    var range = _rangy["default"].createRange();

    range.selectCharacters(editableHost, startIndex, endIndex);

    if (!isInHost(range.commonAncestorContainer, editableHost)) {
      return -1;
    }

    var marker = highlightSupport.createMarkerNode("<span class=\"highlight-comment\" data-word-id=\"".concat(highlightId, "\"></span>"), type || 'comment', this.win);
    var fragment = range.extractContents();
    marker.appendChild(fragment);
    range.deleteContents();
    range.insertNode(marker);
    highlightSupport.cleanupStaleMarkerNodes(editableHost, 'comment');

    if (dispatcher) {
      dispatcher.notify('change', editableHost);
    }

    return startIndex;
  },
  updateHighlight: function updateHighlight(editableHost, highlightId, addCssClass, removeCssClass) {
    if (!document.documentElement.classList) return;
    (0, _jquery["default"])(editableHost).find("[data-word-id=\"".concat(highlightId, "\"]")).each(function (index, elem) {
      if (removeCssClass) elem.classList.remove(removeCssClass);
      if (addCssClass) elem.classList.add(addCssClass);
    });
  },
  removeHighlight: function removeHighlight(editableHost, highlightId, dispatcher) {
    (0, _jquery["default"])(editableHost).find("[data-word-id=\"".concat(highlightId, "\"]")).each(function (index, elem) {
      content.unwrap(elem);

      if (dispatcher) {
        dispatcher.notify('change', editableHost);
      }
    });
  },
  hasHighlight: function hasHighlight(editableHost, highlightId) {
    var matches = (0, _jquery["default"])(editableHost).find("[data-word-id=\"".concat(highlightId, "\"]"));
    return !!matches.length;
  },
  extractHighlightedRanges: function extractHighlightedRanges(editableHost, type) {
    var _this = this;

    var findMarkersQuery = '[data-word-id]';
    if (type) findMarkersQuery += "[data-highlight=\"".concat(type, "\"]");
    var markers = (0, _jquery["default"])(editableHost).find(findMarkersQuery);

    if (!markers.length) {
      return;
    }

    var groups = {};
    markers.each(function (_, marker) {
      var highlightId = (0, _jquery["default"])(marker).data('word-id');

      if (!groups[highlightId]) {
        groups[highlightId] = (0, _jquery["default"])(editableHost).find("[data-word-id=\"".concat(highlightId, "\"]"));
      }
    });
    var res = {};
    Object.keys(groups).forEach(function (highlightId) {
      var position = _this.extractMarkerNodePosition(editableHost, groups[highlightId]);

      if (position) {
        res[highlightId] = position;
      }
    });
    return res;
  },
  extractMarkerNodePosition: function extractMarkerNodePosition(editableHost, markers) {
    var range = _rangy["default"].createRange();

    if (markers.length > 1) {
      range.setStartBefore(markers.first()[0]);
      range.setEndAfter(markers.last()[0]);
    } else {
      range.selectNode(markers[0]);
    }

    var textRange = range.toCharacterRange(editableHost);
    return {
      start: textRange.start,
      end: textRange.end,
      text: range.text()
    };
  },
  cleanupStaleMarkerNodes: function cleanupStaleMarkerNodes(editableHost, highlightType) {
    editableHost.querySelectorAll("span[data-highlight=\"".concat(highlightType, "\"]")).forEach(function (node) {
      if (!node.textContent.length) {
        node.remove();
      }
    });
  },
  createMarkerNode: function createMarkerNode(markerMarkup, highlightType, win) {
    var marker = (0, _jquery["default"])(markerMarkup)[0];

    if (win) {
      marker = content.adoptElement(marker, win.document);
    }

    marker.setAttribute('data-editable', 'ui-unwrap');
    marker.setAttribute('data-highlight', highlightType);
    return marker;
  }
};
var _default = highlightSupport;
exports["default"] = _default;
module.exports = exports.default;