@atlaskit/editor-plugin-unsupported-content/dist/cjs/nodeviews/unsupported-inline-node-view-vanilla.js

Unsupported Content plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.UnsupportedInlineNodeViewVanilla = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _bindEventListener = require("bind-event-listener");
var _enums = require("@atlaskit/editor-common/analytics/types/enums");
var _browser = require("@atlaskit/editor-common/browser");
var _unsupportedContent = require("@atlaskit/editor-common/messages/unsupportedContent");
var _trackUnsupportedContent = require("@atlaskit/editor-common/utils/track-unsupported-content");
var _vanillaTooltip = require("@atlaskit/editor-common/vanilla-tooltip");
var _whitespace = require("@atlaskit/editor-common/whitespace/whitespace");
var _model = require("@atlaskit/editor-prosemirror/model");
var _getUnsupportedContent = require("./get-unsupported-content");
var _getUnsupportedContentIconSpec = require("./get-unsupported-content-icon-spec");
var VanillaUnsupportedInlineCssClassName = {
  INNER: 'unsupported-inline-vanilla-inner',
  ICON: 'unsupported-vanilla-icon'
};

/** Identifies this tooltip for tests and debugging. */
var TOOLTIP_CLASS_NAME = 'unsupported-content-tooltip';

/** Distinct from the block node view's prefix, so the counter fallback below cannot collide. */
var TOOLTIP_ID_PREFIX = 'unsupported-inline-content-tooltip';

/** Classes applied to the tooltip element: the shared default look, plus our own hook. */
var TOOLTIP_CLASS_NAMES = "".concat(_vanillaTooltip.VANILLA_TOOLTIP_DEFAULT_CLASS, " ").concat(TOOLTIP_CLASS_NAME);
var INLINE_NODE_VIEW_CLASS_NAME = 'inlineNodeView';
var ZERO_WIDTH_SPACE_CONTAINER_CLASS_NAME = 'zeroWidthSpaceContainer';
var ADD_ZERO_WIDTH_SPACE_CLASS_NAME = "".concat(INLINE_NODE_VIEW_CLASS_NAME, "AddZeroWidthSpace");
var nextTooltipId = function () {
  var count = 0;
  return function () {
    return typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? "".concat(TOOLTIP_ID_PREFIX, "-").concat(crypto.randomUUID()) : "".concat(TOOLTIP_ID_PREFIX, "-").concat(count += 1);
  };
}();
function getInlineSpec(node, label) {
  var browser = (0, _browser.getBrowserInfo)();
  var trailingSpec = browser.android ? ['span', {
    class: ZERO_WIDTH_SPACE_CONTAINER_CLASS_NAME,
    contentEditable: 'false'
  }, ['span', {
    class: ADD_ZERO_WIDTH_SPACE_CLASS_NAME
  }], _whitespace.ZERO_WIDTH_SPACE] : ['span', {
    class: ADD_ZERO_WIDTH_SPACE_CLASS_NAME
  }];
  return ['span', {
    class: "".concat(node.type.name, "View-content-wrap ").concat(INLINE_NODE_VIEW_CLASS_NAME),
    contentEditable: 'false'
  }, ['span', {
    class: ZERO_WIDTH_SPACE_CONTAINER_CLASS_NAME
  }, ['span', {
    class: ADD_ZERO_WIDTH_SPACE_CLASS_NAME
  }], _whitespace.ZERO_WIDTH_SPACE], ['span', {
    class: VanillaUnsupportedInlineCssClassName.INNER
  }, label, (0, _getUnsupportedContentIconSpec.getUnsupportedContentIconSpec)(VanillaUnsupportedInlineCssClassName.ICON)], trailingSpec];
}
function createUnsupportedInlineDOM(node, intl) {
  var _domElement$querySele;
  var label = (0, _getUnsupportedContent.getUnsupportedContent)(_unsupportedContent.unsupportedContentMessages.unsupportedInlineContent, 'Unsupported', node, intl);
  var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, getInlineSpec(node, label)),
    dom = _DOMSerializer$render.dom;
  var domElement = dom instanceof HTMLElement ? dom : undefined;
  var icon = (_domElement$querySele = domElement === null || domElement === void 0 ? void 0 : domElement.querySelector(".".concat(VanillaUnsupportedInlineCssClassName.ICON))) !== null && _domElement$querySele !== void 0 ? _domElement$querySele : null;
  return {
    dom: dom,
    icon: icon
  };
}
var UnsupportedInlineNodeViewVanilla = exports.UnsupportedInlineNodeViewVanilla = /*#__PURE__*/function () {
  function UnsupportedInlineNodeViewVanilla(node, intl, dispatchAnalyticsEvent) {
    var _this = this;
    (0, _classCallCheck2.default)(this, UnsupportedInlineNodeViewVanilla);
    (0, _defineProperty2.default)(this, "tooltip", null);
    (0, _defineProperty2.default)(this, "unbindMouseenter", null);
    this.node = node;
    var _createUnsupportedInl = createUnsupportedInlineDOM(node, intl),
      dom = _createUnsupportedInl.dom,
      icon = _createUnsupportedInl.icon;
    this.dom = dom;
    if (!icon) {
      return;
    }
    this.unbindMouseenter = (0, _bindEventListener.bind)(icon, {
      type: 'mouseenter',
      options: {
        once: true
      },
      listener: function listener(event) {
        var _this$unbindMouseente;
        (_this$unbindMouseente = _this.unbindMouseenter) === null || _this$unbindMouseente === void 0 || _this$unbindMouseente.call(_this);
        _this.unbindMouseenter = null;
        var tooltipText = intl.formatMessage(_unsupportedContent.unsupportedContentMessages.unsupportedContentTooltip);
        _this.tooltip = new _vanillaTooltip.VanillaTooltip(icon, tooltipText, nextTooltipId(), TOOLTIP_CLASS_NAMES, 300,
        // Use default style by having the default tooltip class name.
        undefined, function () {
          if (dispatchAnalyticsEvent) {
            var _this$node;
            (0, _trackUnsupportedContent.trackUnsupportedContentTooltipDisplayedFor)(dispatchAnalyticsEvent, _enums.ACTION_SUBJECT_ID.ON_UNSUPPORTED_INLINE, (_this$node = _this.node) === null || _this$node === void 0 || (_this$node = _this$node.attrs) === null || _this$node === void 0 || (_this$node = _this$node.originalValue) === null || _this$node === void 0 ? void 0 : _this$node.type);
          }
        });
        icon.dispatchEvent(new Event(event.type));
      }
    });
  }
  return (0, _createClass2.default)(UnsupportedInlineNodeViewVanilla, [{
    key: "update",
    value: function update(node) {
      if (node.type !== this.node.type) {
        return false;
      }
      if (!this.node.sameMarkup(node)) {
        return false;
      }
      this.node = node;
      return true;
    }
  }, {
    key: "ignoreMutation",
    value: function ignoreMutation(mutation) {
      return mutation.type !== 'selection';
    }
  }, {
    key: "destroy",
    value: function destroy() {
      var _this$tooltip, _this$unbindMouseente2;
      (_this$tooltip = this.tooltip) === null || _this$tooltip === void 0 || _this$tooltip.destroy();
      this.tooltip = null;
      (_this$unbindMouseente2 = this.unbindMouseenter) === null || _this$unbindMouseente2 === void 0 || _this$unbindMouseente2.call(this);
      this.unbindMouseenter = null;
    }
  }]);
}();