@atlaskit/editor-plugin-mentions/dist/es2019/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';
const avatarImageClassName = 'editor-mention-avatar-image';
const agentAvatarClassName = 'editor-mention-avatar-agent';
const fixedAgentAvatarClassName = 'editor-mention-avatar-agent-hexagon-ui-fix';
const fallbackAvatarClassName = 'editor-mention-avatar-fallback';
const 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 const mentionAvatarRenderer = ({
  container,
  onFailure
}) => {
  let image;
  let fallback;
  let failureReported = false;
  let currentUrl;
  const reportFailure = () => {
    if (!failureReported) {
      failureReported = true;
      onFailure === null || onFailure === void 0 ? void 0 : onFailure();
    }
  };
  let unbindImageError;
  const removeImage = () => {
    var _unbindImageError, _image;
    (_unbindImageError = unbindImageError) === null || _unbindImageError === void 0 ? void 0 : _unbindImageError();
    unbindImageError = undefined;
    (_image = image) === null || _image === void 0 ? void 0 : _image.remove();
    image = undefined;
  };
  const removeFallback = () => {
    var _fallback;
    (_fallback = fallback) === null || _fallback === void 0 ? void 0 : _fallback.remove();
    fallback = undefined;
    container.classList.remove(fallbackAvatarClassName);
  };
  const showFallback = () => {
    reportFailure();
    removeImage();
    removeFallback();
    fallback = container.ownerDocument.createTextNode('@');
    container.appendChild(fallback);
    container.classList.add(fallbackAvatarClassName);
  };
  const destroy = () => {
    removeImage();
    removeFallback();
  };
  return {
    destroy,
    render: ({
      appType,
      avatarUrl,
      isAvatarImagePreShaped
    }) => {
      const shouldApplyAgentClip = !isAvatarImagePreShaped && appType === 'agent';
      const 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;
    }
  };
};