@atlaskit/editor-common 107.7.0 → 107.7.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-common
 
+## 107.7.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 107.7.1
+
+### Patch Changes
+
+- [#179943](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/179943)
+  [`3ecd2fde1b7b2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3ecd2fde1b7b2) -
+  [ux] [EDITOR-981] Update extension to use new LegacyContentHeader behind fg
+  'platform_editor_legacy_content_macro_visual_update'
+- Updated dependencies
+
 ## 107.7.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -146,6 +146,9 @@
         {
             "path": "../../../design-system/spinner/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../elements/status/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../elements/task-decision/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -146,6 +146,9 @@
 		{
 			"path": "../../../design-system/spinner/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../elements/status/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/task-decision/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -146,6 +146,9 @@
 		{
 			"path": "../../../design-system/spinner/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../elements/status/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/task-decision/afm-post-office/tsconfig.json"
 		},

package/dist/cjs/extensibility/Extension/Extension/index.js

@@ -12,10 +12,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _classnames2 = _interopRequireDefault(require("classnames"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _hooks = require("../../../hooks");
 var _useSharedPluginStateSelector = require("../../../hooks/useSharedPluginStateSelector/useSharedPluginStateSelector");
 var _ui = require("../../../ui");
 var _utils = require("../../../utils");
+var _LegacyContentHeader = require("../LegacyContentHeader");
 var _Lozenge = _interopRequireDefault(require("../Lozenge"));
 var _styles = require("../styles");
 var _extensionUtils = require("./extension-utils");
@@ -56,6 +58,7 @@ function ExtensionWithPluginState(props) {
     var _extensionNode$attrs, _extensionNode$attrs2;
     return extensionNode.type.name === 'extension' && ((_extensionNode$attrs = extensionNode.attrs) === null || _extensionNode$attrs === void 0 ? void 0 : _extensionNode$attrs.extensionType) === 'com.atlassian.confluence.migration' && ((_extensionNode$attrs2 = extensionNode.attrs) === null || _extensionNode$attrs2 === void 0 ? void 0 : _extensionNode$attrs2.extensionKey) === 'legacy-content';
   };
+  var showLegacyContentHeader = (0, _platformFeatureFlags.fg)('platform_editor_legacy_content_macro_visual_update') && isLegacyContentMacroExtension(node);
   var hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   var hasChildren = !!children;
   var removeBorder = showMacroInteractionDesignUpdates || !!(hideFrame && !hasBody);
@@ -87,7 +90,8 @@ function ExtensionWithPluginState(props) {
     'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested && !showBodiedExtensionRendererView,
     'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
     'with-danger-overlay': showMacroInteractionDesignUpdates,
-    'without-frame': removeBorder
+    'without-frame': removeBorder,
+    'legacy-content': showLegacyContentHeader
   }, _styles2.widerLayoutClassName, shouldBreakout));
   var overflowClassNames = (0, _classnames2.default)('extension-overflow-wrapper', {
     'with-body': hasBody,
@@ -128,7 +132,16 @@ function ExtensionWithPluginState(props) {
       setIsNodeHovered(didHover);
     }
   };
-  return (0, _react2.jsx)(_react.Fragment, null, showMacroInteractionDesignUpdates && !isLivePageViewMode && (0, _react2.jsx)(_Lozenge.default, {
+  return (0, _react2.jsx)(_react.Fragment, null, showLegacyContentHeader && (0, _react2.jsx)(_LegacyContentHeader.LegacyContentHeader, {
+    isNodeSelected: isNodeSelected,
+    isNodeHovered: isNodeHovered,
+    onMouseEnter: function onMouseEnter() {
+      return handleMouseEvent(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleMouseEvent(false);
+    }
+  }), !showLegacyContentHeader && showMacroInteractionDesignUpdates && !isLivePageViewMode && (0, _react2.jsx)(_Lozenge.default, {
     isNodeSelected: isNodeSelected,
     isNodeHovered: isNodeHovered,
     isNodeNested: isNodeNested,

package/dist/cjs/extensibility/Extension/Extension/styles.js

@@ -33,6 +33,10 @@ var wrapperStyleWithoutCursor = (0, _react.css)(_styles.wrapperDefault, {
   '&.with-margin-styles': {
     margin: "0 ".concat("var(--ds-space-negative-250, -20px)"),
     padding: "0 ".concat("var(--ds-space-250, 20px)")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.legacy-content': {
+    borderRadius: "0 0 ".concat("var(--ds-border-radius, 3px)", " ", "var(--ds-border-radius, 3px)")
   }
 });
 

package/dist/cjs/extensibility/Extension/LegacyContentHeader/index.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LegacyContentHeader = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactIntlNext = require("react-intl-next");
+var _statusWarning = _interopRequireDefault(require("@atlaskit/icon/core/status-warning"));
+var _link = _interopRequireDefault(require("@atlaskit/link"));
+var _status = require("@atlaskit/status");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var i18n = (0, _reactIntlNext.defineMessages)({
+  legacyContentHeader: {
+    id: 'editor.extension.legacyContentHeader',
+    defaultMessage: 'Legacy Content',
+    description: 'Header for the legacy content extension in the editor.'
+  },
+  contentHasLimitedFunctionality: {
+    id: 'editor.extension.legacyContentHeader.contentHasLimitedFunctionality',
+    defaultMessage: 'This content has limited functionality, ',
+    description: 'Message indicating that the legacy content has limited functionality.'
+  },
+  learnMore: {
+    id: 'editor.extension.legacyContentHeader.learnMore',
+    defaultMessage: ' Learn more',
+    description: 'Link text for learning more about the legacy content.'
+  }
+});
+var lcmHeaderStyles = (0, _react2.css)({
+  padding: "0 ".concat("var(--ds-space-200, 16px)", " ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-200, 16px)"),
+  backgroundColor: "var(--ds-background-neutral, #0515240F)",
+  borderRadius: "var(--ds-border-radius, 4px)".concat(" ", "var(--ds-border-radius, 4px)", " 0 0"),
+  boxShadow: "0 0 0 1px ".concat("var(--ds-background-neutral, #0515240F)"),
+  position: 'relative',
+  top: "-1px",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-hover-border': {
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8590A2)")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.selected': {
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)"),
+    backgroundColor: "var(--ds-background-selected, #E9F2FF)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& .status-lozenge-span': {
+    marginRight: "var(--ds-space-100, 8px)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& > .legacy-content-header-text': {
+    font: "var(--ds-font-body-UNSAFE_small, 12px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '& span': {
+      paddingRight: "var(--ds-space-050, 4px)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '& a': {
+      cursor: 'pointer'
+    }
+  }
+});
+var LegacyContentHeader = exports.LegacyContentHeader = function LegacyContentHeader(_ref) {
+  var isNodeHovered = _ref.isNodeHovered,
+    isNodeSelected = _ref.isNodeSelected,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var classNames = (0, _classnames.default)('legacy-content-header', {
+    'with-hover-border': isNodeHovered,
+    selected: isNodeSelected
+  });
+  var learnMore = (0, _react.useCallback)(function () {
+    window.open('https://support.atlassian.com/confluence-cloud/docs/the-legacy-content-macro/', '_blank');
+  }, []);
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
+    "data-testid": "editor-extension-legacy-content-header",
+    css: [lcmHeaderStyles]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: classNames,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, (0, _react2.jsx)(_status.Status, {
+    text: formatMessage(i18n.legacyContentHeader),
+    color: isNodeSelected ? 'blue' : 'neutral',
+    style: "bold",
+    isBold: true
+  }), (0, _react2.jsx)("span", {
+    className: "legacy-content-header-text"
+  }, (0, _react2.jsx)(_statusWarning.default, {
+    label: formatMessage(i18n.contentHasLimitedFunctionality),
+    size: "small"
+  }), formatMessage(i18n.contentHasLimitedFunctionality), "\xA0", (0, _react2.jsx)(_link.default, {
+    onClick: learnMore,
+    href: "https://support.atlassian.com/confluence-cloud/docs/the-legacy-content-macro/",
+    target: "_blank"
+  }, formatMessage(i18n.learnMore)))));
+};

package/dist/cjs/extensibility/index.js

@@ -34,8 +34,15 @@ Object.defineProperty(exports, "ExtensionNodeWrapper", {
     return _ExtensionNodeWrapper.ExtensionNodeWrapper;
   }
 });
+Object.defineProperty(exports, "LegacyContentHeader", {
+  enumerable: true,
+  get: function get() {
+    return _LegacyContentHeader.LegacyContentHeader;
+  }
+});
 var _ExtensionNodeWrapper = require("./ExtensionNodeWrapper");
 var _Extension = require("./Extension");
+var _LegacyContentHeader = require("./Extension/LegacyContentHeader");
 var _extensionNodeView = _interopRequireWildcard(require("./extensionNodeView"));
 var _ExtensionComponent = require("./ExtensionComponent");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "107.6.1";
+var packageVersion = "107.7.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/ui/DropList/index.js

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "107.6.1";
+var packageVersion = "107.7.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/es2019/extensibility/Extension/Extension/index.js

@@ -9,10 +9,12 @@ import React, { Fragment } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import classnames from 'classnames';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '../../../hooks';
 import { useSharedPluginStateSelector } from '../../../hooks/useSharedPluginStateSelector/useSharedPluginStateSelector';
 import { overflowShadow } from '../../../ui';
 import { calculateBreakoutStyles } from '../../../utils';
+import { LegacyContentHeader } from '../LegacyContentHeader';
 import ExtensionLozenge from '../Lozenge';
 import { overlay } from '../styles';
 import { isEmptyBodiedMacro } from './extension-utils';
@@ -47,6 +49,7 @@ function ExtensionWithPluginState(props) {
     var _extensionNode$attrs, _extensionNode$attrs2;
     return extensionNode.type.name === 'extension' && ((_extensionNode$attrs = extensionNode.attrs) === null || _extensionNode$attrs === void 0 ? void 0 : _extensionNode$attrs.extensionType) === 'com.atlassian.confluence.migration' && ((_extensionNode$attrs2 = extensionNode.attrs) === null || _extensionNode$attrs2 === void 0 ? void 0 : _extensionNode$attrs2.extensionKey) === 'legacy-content';
   };
+  const showLegacyContentHeader = fg('platform_editor_legacy_content_macro_visual_update') && isLegacyContentMacroExtension(node);
   const hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   const hasChildren = !!children;
   const removeBorder = showMacroInteractionDesignUpdates || !!(hideFrame && !hasBody);
@@ -81,6 +84,7 @@ function ExtensionWithPluginState(props) {
     'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
     'with-danger-overlay': showMacroInteractionDesignUpdates,
     'without-frame': removeBorder,
+    'legacy-content': showLegacyContentHeader,
     [widerLayoutClassName]: shouldBreakout
   });
   const overflowClassNames = classnames('extension-overflow-wrapper', {
@@ -128,7 +132,12 @@ function ExtensionWithPluginState(props) {
       setIsNodeHovered(didHover);
     }
   };
-  return jsx(Fragment, null, showMacroInteractionDesignUpdates && !isLivePageViewMode && jsx(ExtensionLozenge, {
+  return jsx(Fragment, null, showLegacyContentHeader && jsx(LegacyContentHeader, {
+    isNodeSelected: isNodeSelected,
+    isNodeHovered: isNodeHovered,
+    onMouseEnter: () => handleMouseEvent(true),
+    onMouseLeave: () => handleMouseEvent(false)
+  }), !showLegacyContentHeader && showMacroInteractionDesignUpdates && !isLivePageViewMode && jsx(ExtensionLozenge, {
     isNodeSelected: isNodeSelected,
     isNodeHovered: isNodeHovered,
     isNodeNested: isNodeNested,

package/dist/es2019/extensibility/Extension/Extension/styles.js

@@ -26,6 +26,10 @@ const wrapperStyleWithoutCursor = css(wrapperDefault, {
   '&.with-margin-styles': {
     margin: `0 ${"var(--ds-space-negative-250, -20px)"}`,
     padding: `0 ${"var(--ds-space-250, 20px)"}`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.legacy-content': {
+    borderRadius: `0 0 ${"var(--ds-border-radius, 3px)"} ${"var(--ds-border-radius, 3px)"}`
   }
 });
 

package/dist/es2019/extensibility/Extension/LegacyContentHeader/index.js

@@ -0,0 +1,104 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { Fragment, useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import classnames from 'classnames';
+import { defineMessages, useIntl } from 'react-intl-next';
+import StatusWarningIcon from '@atlaskit/icon/core/status-warning';
+import Link from '@atlaskit/link';
+import { Status } from '@atlaskit/status';
+const i18n = defineMessages({
+  legacyContentHeader: {
+    id: 'editor.extension.legacyContentHeader',
+    defaultMessage: 'Legacy Content',
+    description: 'Header for the legacy content extension in the editor.'
+  },
+  contentHasLimitedFunctionality: {
+    id: 'editor.extension.legacyContentHeader.contentHasLimitedFunctionality',
+    defaultMessage: 'This content has limited functionality, ',
+    description: 'Message indicating that the legacy content has limited functionality.'
+  },
+  learnMore: {
+    id: 'editor.extension.legacyContentHeader.learnMore',
+    defaultMessage: ' Learn more',
+    description: 'Link text for learning more about the legacy content.'
+  }
+});
+const lcmHeaderStyles = css({
+  padding: `0 ${"var(--ds-space-200, 16px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-200, 16px)"}`,
+  backgroundColor: "var(--ds-background-neutral, #0515240F)",
+  borderRadius: `${"var(--ds-border-radius, 4px)"} ${"var(--ds-border-radius, 4px)"} 0 0`,
+  boxShadow: `0 0 0 1px ${"var(--ds-background-neutral, #0515240F)"}`,
+  position: 'relative',
+  top: `-1px`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-hover-border': {
+    boxShadow: `0 0 0 1px ${"var(--ds-border-input, #8590A2)"}`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.selected': {
+    boxShadow: `0 0 0 1px ${"var(--ds-border-selected, #0C66E4)"}`,
+    backgroundColor: "var(--ds-background-selected, #E9F2FF)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& .status-lozenge-span': {
+    marginRight: "var(--ds-space-100, 8px)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& > .legacy-content-header-text': {
+    font: "var(--ds-font-body-UNSAFE_small, 12px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '& span': {
+      paddingRight: "var(--ds-space-050, 4px)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '& a': {
+      cursor: 'pointer'
+    }
+  }
+});
+export const LegacyContentHeader = ({
+  isNodeHovered,
+  isNodeSelected,
+  onMouseEnter,
+  onMouseLeave
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const classNames = classnames('legacy-content-header', {
+    'with-hover-border': isNodeHovered,
+    selected: isNodeSelected
+  });
+  const learnMore = useCallback(() => {
+    window.open('https://support.atlassian.com/confluence-cloud/docs/the-legacy-content-macro/', '_blank');
+  }, []);
+  return jsx(Fragment, null, jsx("div", {
+    "data-testid": "editor-extension-legacy-content-header",
+    css: [lcmHeaderStyles]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: classNames,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, jsx(Status, {
+    text: formatMessage(i18n.legacyContentHeader),
+    color: isNodeSelected ? 'blue' : 'neutral',
+    style: "bold",
+    isBold: true
+  }), jsx("span", {
+    className: "legacy-content-header-text"
+  }, jsx(StatusWarningIcon, {
+    label: formatMessage(i18n.contentHasLimitedFunctionality),
+    size: "small"
+  }), formatMessage(i18n.contentHasLimitedFunctionality), "\xA0", jsx(Link, {
+    onClick: learnMore,
+    href: "https://support.atlassian.com/confluence-cloud/docs/the-legacy-content-macro/",
+    target: "_blank"
+  }, formatMessage(i18n.learnMore)))));
+};

package/dist/es2019/extensibility/index.js

@@ -3,5 +3,6 @@
 
 export { ExtensionNodeWrapper } from './ExtensionNodeWrapper';
 export { Extension } from './Extension';
+export { LegacyContentHeader } from './Extension/LegacyContentHeader';
 export { default as ExtensionNodeView, ExtensionNode } from './extensionNodeView';
 export { ExtensionComponent } from './ExtensionComponent';

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "107.6.1";
+const packageVersion = "107.7.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/ui/DropList/index.js

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "107.6.1";
+const packageVersion = "107.7.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/esm/extensibility/Extension/Extension/index.js

@@ -14,10 +14,12 @@ import React, { Fragment } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import classnames from 'classnames';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '../../../hooks';
 import { useSharedPluginStateSelector } from '../../../hooks/useSharedPluginStateSelector/useSharedPluginStateSelector';
 import { overflowShadow } from '../../../ui';
 import { calculateBreakoutStyles } from '../../../utils';
+import { LegacyContentHeader } from '../LegacyContentHeader';
 import ExtensionLozenge from '../Lozenge';
 import { overlay } from '../styles';
 import { isEmptyBodiedMacro } from './extension-utils';
@@ -49,6 +51,7 @@ function ExtensionWithPluginState(props) {
     var _extensionNode$attrs, _extensionNode$attrs2;
     return extensionNode.type.name === 'extension' && ((_extensionNode$attrs = extensionNode.attrs) === null || _extensionNode$attrs === void 0 ? void 0 : _extensionNode$attrs.extensionType) === 'com.atlassian.confluence.migration' && ((_extensionNode$attrs2 = extensionNode.attrs) === null || _extensionNode$attrs2 === void 0 ? void 0 : _extensionNode$attrs2.extensionKey) === 'legacy-content';
   };
+  var showLegacyContentHeader = fg('platform_editor_legacy_content_macro_visual_update') && isLegacyContentMacroExtension(node);
   var hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   var hasChildren = !!children;
   var removeBorder = showMacroInteractionDesignUpdates || !!(hideFrame && !hasBody);
@@ -80,7 +83,8 @@ function ExtensionWithPluginState(props) {
     'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested && !showBodiedExtensionRendererView,
     'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
     'with-danger-overlay': showMacroInteractionDesignUpdates,
-    'without-frame': removeBorder
+    'without-frame': removeBorder,
+    'legacy-content': showLegacyContentHeader
   }, widerLayoutClassName, shouldBreakout));
   var overflowClassNames = classnames('extension-overflow-wrapper', {
     'with-body': hasBody,
@@ -121,7 +125,16 @@ function ExtensionWithPluginState(props) {
       setIsNodeHovered(didHover);
     }
   };
-  return jsx(Fragment, null, showMacroInteractionDesignUpdates && !isLivePageViewMode && jsx(ExtensionLozenge, {
+  return jsx(Fragment, null, showLegacyContentHeader && jsx(LegacyContentHeader, {
+    isNodeSelected: isNodeSelected,
+    isNodeHovered: isNodeHovered,
+    onMouseEnter: function onMouseEnter() {
+      return handleMouseEvent(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleMouseEvent(false);
+    }
+  }), !showLegacyContentHeader && showMacroInteractionDesignUpdates && !isLivePageViewMode && jsx(ExtensionLozenge, {
     isNodeSelected: isNodeSelected,
     isNodeHovered: isNodeHovered,
     isNodeNested: isNodeNested,

package/dist/esm/extensibility/Extension/Extension/styles.js

@@ -26,6 +26,10 @@ var wrapperStyleWithoutCursor = css(wrapperDefault, {
   '&.with-margin-styles': {
     margin: "0 ".concat("var(--ds-space-negative-250, -20px)"),
     padding: "0 ".concat("var(--ds-space-250, 20px)")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.legacy-content': {
+    borderRadius: "0 0 ".concat("var(--ds-border-radius, 3px)", " ", "var(--ds-border-radius, 3px)")
   }
 });
 

package/dist/esm/extensibility/Extension/LegacyContentHeader/index.js

@@ -0,0 +1,102 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { Fragment, useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import classnames from 'classnames';
+import { defineMessages, useIntl } from 'react-intl-next';
+import StatusWarningIcon from '@atlaskit/icon/core/status-warning';
+import Link from '@atlaskit/link';
+import { Status } from '@atlaskit/status';
+var i18n = defineMessages({
+  legacyContentHeader: {
+    id: 'editor.extension.legacyContentHeader',
+    defaultMessage: 'Legacy Content',
+    description: 'Header for the legacy content extension in the editor.'
+  },
+  contentHasLimitedFunctionality: {
+    id: 'editor.extension.legacyContentHeader.contentHasLimitedFunctionality',
+    defaultMessage: 'This content has limited functionality, ',
+    description: 'Message indicating that the legacy content has limited functionality.'
+  },
+  learnMore: {
+    id: 'editor.extension.legacyContentHeader.learnMore',
+    defaultMessage: ' Learn more',
+    description: 'Link text for learning more about the legacy content.'
+  }
+});
+var lcmHeaderStyles = css({
+  padding: "0 ".concat("var(--ds-space-200, 16px)", " ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-200, 16px)"),
+  backgroundColor: "var(--ds-background-neutral, #0515240F)",
+  borderRadius: "var(--ds-border-radius, 4px)".concat(" ", "var(--ds-border-radius, 4px)", " 0 0"),
+  boxShadow: "0 0 0 1px ".concat("var(--ds-background-neutral, #0515240F)"),
+  position: 'relative',
+  top: "-1px",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-hover-border': {
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8590A2)")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.selected': {
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)"),
+    backgroundColor: "var(--ds-background-selected, #E9F2FF)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& .status-lozenge-span': {
+    marginRight: "var(--ds-space-100, 8px)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& > .legacy-content-header-text': {
+    font: "var(--ds-font-body-UNSAFE_small, 12px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '& span': {
+      paddingRight: "var(--ds-space-050, 4px)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '& a': {
+      cursor: 'pointer'
+    }
+  }
+});
+export var LegacyContentHeader = function LegacyContentHeader(_ref) {
+  var isNodeHovered = _ref.isNodeHovered,
+    isNodeSelected = _ref.isNodeSelected,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var classNames = classnames('legacy-content-header', {
+    'with-hover-border': isNodeHovered,
+    selected: isNodeSelected
+  });
+  var learnMore = useCallback(function () {
+    window.open('https://support.atlassian.com/confluence-cloud/docs/the-legacy-content-macro/', '_blank');
+  }, []);
+  return jsx(Fragment, null, jsx("div", {
+    "data-testid": "editor-extension-legacy-content-header",
+    css: [lcmHeaderStyles]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: classNames,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, jsx(Status, {
+    text: formatMessage(i18n.legacyContentHeader),
+    color: isNodeSelected ? 'blue' : 'neutral',
+    style: "bold",
+    isBold: true
+  }), jsx("span", {
+    className: "legacy-content-header-text"
+  }, jsx(StatusWarningIcon, {
+    label: formatMessage(i18n.contentHasLimitedFunctionality),
+    size: "small"
+  }), formatMessage(i18n.contentHasLimitedFunctionality), "\xA0", jsx(Link, {
+    onClick: learnMore,
+    href: "https://support.atlassian.com/confluence-cloud/docs/the-legacy-content-macro/",
+    target: "_blank"
+  }, formatMessage(i18n.learnMore)))));
+};

package/dist/esm/extensibility/index.js

@@ -3,5 +3,6 @@
 
 export { ExtensionNodeWrapper } from './ExtensionNodeWrapper';
 export { Extension } from './Extension';
+export { LegacyContentHeader } from './Extension/LegacyContentHeader';
 export { default as ExtensionNodeView, ExtensionNode } from './extensionNodeView';
 export { ExtensionComponent } from './ExtensionComponent';

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "107.6.1";
+var packageVersion = "107.7.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/ui/DropList/index.js

@@ -20,7 +20,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "107.6.1";
+var packageVersion = "107.7.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/types/extensibility/Extension/LegacyContentHeader/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+export type LegacyContentHeaderProps = {
+    isNodeSelected?: boolean;
+    isNodeHovered?: boolean;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+};
+export declare const LegacyContentHeader: ({ isNodeHovered, isNodeSelected, onMouseEnter, onMouseLeave, }: LegacyContentHeaderProps) => jsx.JSX.Element;

package/dist/types/extensibility/index.d.ts

@@ -1,5 +1,6 @@
 export { ExtensionNodeWrapper } from './ExtensionNodeWrapper';
 export { Extension } from './Extension';
+export { LegacyContentHeader } from './Extension/LegacyContentHeader';
 export { default as ExtensionNodeView, ExtensionNode } from './extensionNodeView';
 export { ExtensionComponent } from './ExtensionComponent';
 export type { MacroInteractionDesignFeatureFlags, GetPMNodeHeight } from './types';

package/dist/types-ts4.5/extensibility/Extension/LegacyContentHeader/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+export type LegacyContentHeaderProps = {
+    isNodeSelected?: boolean;
+    isNodeHovered?: boolean;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+};
+export declare const LegacyContentHeader: ({ isNodeHovered, isNodeSelected, onMouseEnter, onMouseLeave, }: LegacyContentHeaderProps) => jsx.JSX.Element;

package/dist/types-ts4.5/extensibility/index.d.ts

@@ -1,5 +1,6 @@
 export { ExtensionNodeWrapper } from './ExtensionNodeWrapper';
 export { Extension } from './Extension';
+export { LegacyContentHeader } from './Extension/LegacyContentHeader';
 export { default as ExtensionNodeView, ExtensionNode } from './extensionNodeView';
 export { ExtensionComponent } from './ExtensionComponent';
 export type { MacroInteractionDesignFeatureFlags, GetPMNodeHeight } from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "107.7.0",
+	"version": "107.7.2",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -140,7 +140,7 @@
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/emoji": "^69.3.0",
-		"@atlaskit/icon": "^27.2.0",
+		"@atlaskit/icon": "^27.3.0",
 		"@atlaskit/icon-object": "^7.1.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/link-datasource": "^4.12.0",
@@ -163,13 +163,14 @@
 		"@atlaskit/profilecard": "^23.21.0",
 		"@atlaskit/react-ufo": "^3.14.0",
 		"@atlaskit/section-message": "^8.2.0",
-		"@atlaskit/smart-card": "^39.0.0",
+		"@atlaskit/smart-card": "^39.1.0",
 		"@atlaskit/smart-user-picker": "^8.0.0",
 		"@atlaskit/spinner": "^18.0.0",
+		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^8.8.0",
+		"@atlaskit/tmp-editor-statsig": "^9.0.0",
 		"@atlaskit/tokens": "^5.4.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/width-detector": "^5.0.0",
@@ -366,6 +367,9 @@
 		},
 		"platform_editor_fix_unsubscribe_of_provider": {
 			"type": "boolean"
+		},
+		"platform_editor_legacy_content_macro_visual_update": {
+			"type": "boolean"
 		}
 	}
 }