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

Unsupported Content plugin for @atlaskit/editor-core

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import { bind } from 'bind-event-listener';
import { ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics/types/enums';
import { getBrowserInfo } from '@atlaskit/editor-common/browser';
import { unsupportedContentMessages } from '@atlaskit/editor-common/messages/unsupportedContent';
import { trackUnsupportedContentTooltipDisplayedFor } from '@atlaskit/editor-common/utils/track-unsupported-content';
import { VANILLA_TOOLTIP_DEFAULT_CLASS, VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace/whitespace';
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
import { getUnsupportedContent } from './get-unsupported-content';
import { getUnsupportedContentIconSpec } from './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(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 = getBrowserInfo();
  var trailingSpec = browser.android ? ['span', {
    class: ZERO_WIDTH_SPACE_CONTAINER_CLASS_NAME,
    contentEditable: 'false'
  }, ['span', {
    class: ADD_ZERO_WIDTH_SPACE_CLASS_NAME
  }], 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
  }], ZERO_WIDTH_SPACE], ['span', {
    class: VanillaUnsupportedInlineCssClassName.INNER
  }, label, getUnsupportedContentIconSpec(VanillaUnsupportedInlineCssClassName.ICON)], trailingSpec];
}
function createUnsupportedInlineDOM(node, intl) {
  var _domElement$querySele;
  var label = getUnsupportedContent(unsupportedContentMessages.unsupportedInlineContent, 'Unsupported', node, intl);
  var _DOMSerializer$render = 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
  };
}
export var UnsupportedInlineNodeViewVanilla = /*#__PURE__*/function () {
  function UnsupportedInlineNodeViewVanilla(node, intl, dispatchAnalyticsEvent) {
    var _this = this;
    _classCallCheck(this, UnsupportedInlineNodeViewVanilla);
    _defineProperty(this, "tooltip", null);
    _defineProperty(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 = 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(unsupportedContentMessages.unsupportedContentTooltip);
        _this.tooltip = new 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;
            trackUnsupportedContentTooltipDisplayedFor(dispatchAnalyticsEvent, 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 _createClass(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;
    }
  }]);
}();