@atlaskit/editor-common/dist/es2019/extensions/UnknownMacroPlaceholder.js

A package that contains common classes and components for editor and renderer

/* UnknownMacroPlaceholder.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./UnknownMacroPlaceholder.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useMemo } from 'react';
import { useIntl } from 'react-intl';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { messages } from './messages';
// Unknown macro placeholder styling aligned with Legacy Content Macro (LCM) for consistent look
const neutralBorder = "var(--ds-background-neutral, #0515240F)";
const unknownMacroContainerStyles = null;

// Match LCM header exactly: lcmHeaderStyles from LegacyContentHeader/index.tsx
const unknownMacroHeaderStyles = null;

// Match LCM content area: white surface, text color inherits
const unknownMacroBodyStyles = null;
const unknownMacroPreStyles = null;
const formatParam = (key, param) => {
  var _param$value;
  const value = String((_param$value = param === null || param === void 0 ? void 0 : param.value) !== null && _param$value !== void 0 ? _param$value : '').trim();
  return `${key} = ${value}`;
};
const EMPTY_MACRO_PARAMS = {};
export function UnknownMacroPlaceholder({
  extensionNode
}) {
  var _extensionNode$parame, _extensionNode$parame2, _extensionNode$parame3, _extensionNode$parame4, _extensionNode$parame5, _extensionNode$parame6, _extensionNode$parame7, _extensionNode$parame8, _extensionNode$parame9;
  const intl = useIntl();
  const macroTitle = ((_extensionNode$parame = extensionNode.parameters) === null || _extensionNode$parame === void 0 ? void 0 : (_extensionNode$parame2 = _extensionNode$parame.macroMetadata) === null || _extensionNode$parame2 === void 0 ? void 0 : _extensionNode$parame2.title) || extensionNode.extensionKey;
  const bodyContent = (_extensionNode$parame3 = extensionNode.parameters) === null || _extensionNode$parame3 === void 0 ? void 0 : (_extensionNode$parame4 = _extensionNode$parame3.macroParams) === null || _extensionNode$parame4 === void 0 ? void 0 : (_extensionNode$parame5 = _extensionNode$parame4.__bodyContent) === null || _extensionNode$parame5 === void 0 ? void 0 : _extensionNode$parame5.value;
  const macroParamsOld = (_extensionNode$parame6 = (_extensionNode$parame7 = extensionNode.parameters) === null || _extensionNode$parame7 === void 0 ? void 0 : _extensionNode$parame7.macroParams) !== null && _extensionNode$parame6 !== void 0 ? _extensionNode$parame6 : {};
  const macroParams = (_extensionNode$parame8 = (_extensionNode$parame9 = extensionNode.parameters) === null || _extensionNode$parame9 === void 0 ? void 0 : _extensionNode$parame9.macroParams) !== null && _extensionNode$parame8 !== void 0 ? _extensionNode$parame8 : EMPTY_MACRO_PARAMS;
  const formatParamInline = (key, param) => {
    var _param$value2;
    const value = String((_param$value2 = param === null || param === void 0 ? void 0 : param.value) !== null && _param$value2 !== void 0 ? _param$value2 : '').trim();
    return `${key} = ${value}`;
  };
  const memoizedVisibleParams = useMemo(() => Object.entries(macroParams).filter(([key]) => !key.startsWith('_')).map(([key, param]) => formatParam(key, param)).join(' | '), [macroParams]);
  const visibleParams = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedVisibleParams :
  // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- intentional fallback for experiment off path
  Object.entries(macroParamsOld).filter(([key]) => !key.startsWith('_')).map(([key, param]) => formatParamInline(key, param)).join(' | ');
  const headerText = visibleParams ? `${intl.formatMessage(messages.unknownMacroHeader, {
    macroTitle
  })} | ${visibleParams}` : intl.formatMessage(messages.unknownMacroHeader, {
    macroTitle
  });
  return /*#__PURE__*/React.createElement("section", {
    "aria-label": intl.formatMessage(messages.unknownMacroPlaceholderAriaLabel),
    className: ax(["_19it1tra _2rko12b0 _1reo15vq _18m915vq _bfhkhp5a"])
  }, /*#__PURE__*/React.createElement("div", {
    className: ax(["_2rko14xi _11c8wadc _n7zlbjo2 _bfhki8nm _ca0qu2gc _u5f3pxbi _n3td1b66 _19bvpxbi _kqswh2mm _154i1n1a"])
  }, headerText), /*#__PURE__*/React.createElement("div", {
    className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _bfhkvuon _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp"])
  }, /*#__PURE__*/React.createElement("pre", {
    className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _11c8fhey _o5721jtm _1nmz1hna _6z24egat"])
  }, bodyContent)));
}