@atlaskit/editor-plugin-extension/dist/esm/ui/ConfigPanel/FieldMessages.js

editor-plugin-extension plugin for @atlaskit/editor-core

import React, { Fragment, useMemo } from 'react';
import { injectIntl } from 'react-intl';
import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
import { ErrorMessage, HelperMessage } from '@atlaskit/form';
import { Text } from '@atlaskit/primitives/compiled';
import { FieldTypeError, ValidationError } from './types';

// sidestep XSS issues
function makeMarkup(fragment, key) {
  var nodeName = fragment.nodeName,
    nodeType = fragment.nodeType,
    childNodes = fragment.childNodes,
    textContent = fragment.textContent;
  if (nodeType === Node.TEXT_NODE) {
    return /*#__PURE__*/React.createElement(Fragment, {
      key: key
    }, textContent);
  }

  // NOTE: NodeList doesn't have .map
  var children = [];
  childNodes.forEach(function (childNode, i) {
    var markup = makeMarkup(childNode, String(i));
    if (markup) {
      children.push(markup);
    }
  });
  switch (nodeName) {
    case 'B':
      return /*#__PURE__*/React.createElement("b", {
        key: key
      }, children);
    case 'I':
      return /*#__PURE__*/React.createElement("i", {
        key: key
      }, children);
    case 'STRONG':
      return /*#__PURE__*/React.createElement(Text, {
        as: "strong",
        color: "color.text.subtlest",
        size: "small",
        key: key
      }, children);
    case 'EM':
      return /*#__PURE__*/React.createElement(Text, {
        as: "em",
        color: "color.text.subtlest",
        size: "small",
        key: key
      }, children);
    case 'CODE':
      // eslint-disable-next-line @atlaskit/design-system/no-html-code
      return /*#__PURE__*/React.createElement("code", {
        key: key
      }, children);
  }
  if (children.length === 1) {
    return /*#__PURE__*/React.createElement(Fragment, {
      key: key
    }, children[0]);
  }
  if (children.length) {
    return /*#__PURE__*/React.createElement("span", {
      key: key
    }, children);
  }
  return null;
}
function Description(_ref) {
  var description = _ref.description;
  var markup = useMemo(function () {
    var dom = new DOMParser().parseFromString(description, 'text/html');
    return makeMarkup(dom);
  }, [description]);
  return /*#__PURE__*/React.createElement(HelperMessage, {
    testId: "field-message-description"
  }, markup);
}
var FieldMessages = function FieldMessages(_ref2) {
  var error = _ref2.error,
    description = _ref2.description,
    intl = _ref2.intl;
  if (!error && description) {
    return /*#__PURE__*/React.createElement(Description, {
      description: description
    });
  }
  switch (error) {
    case ValidationError.Required:
      return /*#__PURE__*/React.createElement(ErrorMessage, {
        testId: "config-panel-error-message"
      }, intl.formatMessage(messages.required));
    case ValidationError.Invalid:
      return /*#__PURE__*/React.createElement(ErrorMessage, {
        testId: "config-panel-error-message"
      }, intl.formatMessage(messages.invalid));
    case FieldTypeError.isMultipleAndRadio:
      return /*#__PURE__*/React.createElement(ErrorMessage, {
        testId: "config-panel-error-message"
      }, intl.formatMessage(messages.isMultipleAndRadio));
    default:
      return null;
  }
};

// eslint-disable-next-line @typescript-eslint/ban-types
var _default_1 = injectIntl(FieldMessages);
export default _default_1;