@atlaskit/editor-plugin-mentions/dist/esm/nodeviews/mentionAvatarRenderer.js

Mentions plugin for @atlaskit/editor-core

import { bind } from 'bind-event-listener';
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
var avatarImageClassName = 'editor-mention-avatar-image';
var agentAvatarClassName = 'editor-mention-avatar-agent';
var fixedAgentAvatarClassName = 'editor-mention-avatar-agent-hexagon-ui-fix';
var fallbackAvatarClassName = 'editor-mention-avatar-fallback';
var avatarSize = 16;
/**
 * Populates the fixed-size avatar slot owned by the vanilla ProseMirror NodeView.
 * No React root or editor portal is created for individual mention nodes.
 */
export var mentionAvatarRenderer = function mentionAvatarRenderer(_ref) {
  var container = _ref.container,
    onFailure = _ref.onFailure;
  var image;
  var fallback;
  var failureReported = false;
  var currentUrl;
  var reportFailure = function reportFailure() {
    if (!failureReported) {
      failureReported = true;
      onFailure === null || onFailure === void 0 || onFailure();
    }
  };
  var unbindImageError;
  var removeImage = function removeImage() {
    var _unbindImageError, _image;
    (_unbindImageError = unbindImageError) === null || _unbindImageError === void 0 || _unbindImageError();
    unbindImageError = undefined;
    (_image = image) === null || _image === void 0 || _image.remove();
    image = undefined;
  };
  var removeFallback = function removeFallback() {
    var _fallback;
    (_fallback = fallback) === null || _fallback === void 0 || _fallback.remove();
    fallback = undefined;
    container.classList.remove(fallbackAvatarClassName);
  };
  var showFallback = function showFallback() {
    reportFailure();
    removeImage();
    removeFallback();
    fallback = container.ownerDocument.createTextNode('@');
    container.appendChild(fallback);
    container.classList.add(fallbackAvatarClassName);
  };
  var destroy = function destroy() {
    removeImage();
    removeFallback();
  };
  return {
    destroy: destroy,
    render: function render(_ref2) {
      var appType = _ref2.appType,
        avatarUrl = _ref2.avatarUrl,
        isAvatarImagePreShaped = _ref2.isAvatarImagePreShaped;
      var shouldApplyAgentClip = !isAvatarImagePreShaped && appType === 'agent';
      var shouldApplyFixedAgentClip = shouldApplyAgentClip && isExperimentEnabled('platform_editor_agent_hexagon_ui_fix');
      container.classList.toggle(agentAvatarClassName, shouldApplyAgentClip);
      container.classList.toggle(fixedAgentAvatarClassName, shouldApplyFixedAgentClip);
      removeFallback();
      if (!avatarUrl) {
        removeImage();
        return;
      }
      if (!image || currentUrl !== avatarUrl) {
        failureReported = false;
        currentUrl = avatarUrl;
      }
      if (!image) {
        image = container.ownerDocument.createElement('img');
        image.alt = '';
        image.className = avatarImageClassName;
        image.decoding = 'async';
        image.draggable = false;
        image.height = avatarSize;
        image.loading = 'lazy';
        image.width = avatarSize;
        unbindImageError = bind(image, {
          type: 'error',
          listener: showFallback
        });
        container.appendChild(image);
      }
      image.src = avatarUrl;
    }
  };
};