@atlaskit/editor-plugin-panel/dist/cjs/nodeviews/panel.js

Panel plugin for @atlaskit/editor-core.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.panelIcons = exports.getPanelNodeView = exports.PanelIcon = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _react = _interopRequireDefault(require("react"));
var _v = _interopRequireDefault(require("uuid/v4"));
var _adfSchema = require("@atlaskit/adf-schema");
var _emoji = require("@atlaskit/editor-common/emoji");
var _hooks = require("@atlaskit/editor-common/hooks");
var _icons = require("@atlaskit/editor-common/icons");
var _panel = require("@atlaskit/editor-common/panel");
var _model = require("@atlaskit/editor-prosemirror/model");
var _consts = require("@atlaskit/editor-shared-styles/consts");
var _lightbulb = _interopRequireDefault(require("@atlaskit/icon/core/lightbulb"));
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _utils = require("../pm-plugins/utils/utils");
var _renderPanelIcon = require("../ui/renderPanelIcon");
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead

/* eslint-disable @atlaskit/editor/no-re-export */
// Mapping export
var panelIcons = exports.panelIcons = {
  info: _icons.PanelInfoIcon,
  success: _icons.PanelSuccessIcon,
  note: _icons.PanelNoteIcon,
  tip: _lightbulb.default,
  warning: _icons.PanelWarningIcon,
  error: _icons.PanelErrorIcon,
  custom: _icons.PanelInfoIcon
};
/* eslint-enable @atlaskit/editor/no-re-export */

var selector = function selector(states) {
  return {
    emojiState: states.emojiState
  };
};
var PanelIcon = exports.PanelIcon = function PanelIcon(props) {
  var allowCustomPanel = props.allowCustomPanel,
    providerFactory = props.providerFactory,
    pluginInjectionApi = props.pluginInjectionApi,
    _props$panelAttribute = props.panelAttributes,
    panelType = _props$panelAttribute.panelType,
    panelIcon = _props$panelAttribute.panelIcon,
    panelIconId = _props$panelAttribute.panelIconId,
    panelIconText = _props$panelAttribute.panelIconText;
  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['emoji'], selector),
    emojiState = _useSharedPluginState.emojiState;
  var emojiProvider = emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider;
  if (allowCustomPanel && panelIcon && panelType === _adfSchema.PanelType.CUSTOM) {
    return /*#__PURE__*/_react.default.createElement(_emoji.Emoji, {
      emojiProvider: emojiProvider,
      providers: providerFactory,
      shortName: panelIcon,
      id: panelIconId,
      fallback: panelIconText,
      showTooltip: false,
      allowTextFallback: false,
      fitToHeight: _consts.akEditorCustomIconSize
    });
  }
  var Icon = panelIcons[panelType];
  return Icon ? /*#__PURE__*/_react.default.createElement(Icon, {
    label: "".concat(panelType, " panel")
  }) : null;
};
var PanelNodeView = /*#__PURE__*/function () {
  function PanelNodeView(node, view, getPos, pluginOptions, api, nodeViewPortalProviderAPI, providerFactory) {
    var _this = this;
    (0, _classCallCheck2.default)(this, PanelNodeView);
    this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
    this.providerFactory = providerFactory;
    this.pluginOptions = pluginOptions;
    this.view = view;
    this.node = node;
    // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
    this.key = (0, _v.default)();
    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, (0, _utils.panelAttrsToDom)(node.attrs, pluginOptions.allowCustomPanel || false)),
      dom = _DOMSerializer$render.dom,
      contentDOM = _DOMSerializer$render.contentDOM;
    this.getPos = getPos;
    // Ignored via go/ees005
    // eslint-disable-next-line @atlaskit/editor/no-as-casting
    this.dom = dom;
    // Ignored via go/ees005
    // eslint-disable-next-line @atlaskit/editor/no-as-casting
    this.contentDOM = contentDOM;
    // Ignored via go/ees005
    // eslint-disable-next-line @atlaskit/editor/no-as-casting
    this.icon = this.dom.querySelector(".".concat(_panel.PanelSharedCssClassName.icon));
    if (!this.icon) {
      return;
    }
    // set contentEditable as false to be able to select the custom panels with keyboard
    this.icon.contentEditable = 'false';
    var panelAttrs = node.attrs;

    // Determine if this is a standard panel type (info, note, success, warning, error)
    var isStandardPanel = panelAttrs.panelType && [_adfSchema.PanelType.INFO, _adfSchema.PanelType.NOTE, _adfSchema.PanelType.SUCCESS, _adfSchema.PanelType.WARNING, _adfSchema.PanelType.ERROR].includes(panelAttrs.panelType);

    // For standard panels (info, note, success, warning, error), render icon directly as native DOM
    // This avoids Portal rendering delays that cause flickering on SSR and page transitions
    if (isStandardPanel && (0, _expValEquals.expValEquals)('platform_editor_vc90_transition_panel_icon', 'isEnabled', true)) {
      (0, _renderPanelIcon.renderPanelIcon)(panelAttrs.panelType, this.icon);
    } else {
      this.nodeViewPortalProviderAPI.render(function () {
        return /*#__PURE__*/_react.default.createElement(PanelIcon, {
          pluginInjectionApi: api,
          allowCustomPanel: pluginOptions.allowCustomPanel,
          panelAttributes: panelAttrs,
          providerFactory: _this.providerFactory
        });
      }, this.icon, this.key);
    }
  }
  return (0, _createClass2.default)(PanelNodeView, [{
    key: "ignoreMutation",
    value: function ignoreMutation(mutation) {
      // ignore mutation if it caused by the icon.
      if (!this.icon) {
        return false;
      }
      var isIcon = mutation.target === this.icon || mutation.target.parentNode === this.icon;
      // ignore mutation if it caused by the lazy load emoji inside icon.
      var isInsideIcon = this.icon.contains(mutation.target);
      return isIcon || isInsideIcon;
    }
  }, {
    key: "destroy",
    value: function destroy() {
      var panelAttrs = this.node.attrs;
      // Determine if this is a standard panel type (info, note, success, warning, error)
      var isStandardPanel = panelAttrs.panelType && [_adfSchema.PanelType.INFO, _adfSchema.PanelType.NOTE, _adfSchema.PanelType.SUCCESS, _adfSchema.PanelType.WARNING, _adfSchema.PanelType.ERROR].includes(panelAttrs.panelType);
      // Only remove Portal if it was used (for custom emoji panels)
      if (!(isStandardPanel && (0, _expValEquals.expValEquals)('platform_editor_vc90_transition_panel_icon', 'isEnabled', true))) {
        this.nodeViewPortalProviderAPI.remove(this.key);
      }
    }
  }]);
}();
var getPanelNodeView = exports.getPanelNodeView = function getPanelNodeView(pluginOptions, api, nodeViewPortalProviderAPI, providerFactory) {
  return function (node, view, getPos) {
    return new PanelNodeView(node, view, getPos, pluginOptions, api, nodeViewPortalProviderAPI, providerFactory);
  };
};