@atlaskit/editor-common 107.6.1 → 107.7.1

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-common
 
+## 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
+
+- [#182161](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/182161)
+  [`dcf2f7bd931a8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dcf2f7bd931a8) -
+  feat: add useSharedStateWithSelector to editor-common
+
+### Patch Changes
+
+- [#181781](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/181781)
+  [`e0060cc2c2eb7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e0060cc2c2eb7) -
+  ED-28417 Offline Editing: Update the type ahead error to clear on new requests, and make error
+  more generic.
+- Updated dependencies
+
 ## 107.6.1
 
 ### Patch 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/hooks/index.js

@@ -28,7 +28,14 @@ Object.defineProperty(exports, "useSharedPluginState", {
     return _useSharedPluginState.useSharedPluginState;
   }
 });
+Object.defineProperty(exports, "useSharedPluginStateWithSelector", {
+  enumerable: true,
+  get: function get() {
+    return _useSharedPluginStateWithSelector.useSharedPluginStateWithSelector;
+  }
+});
 var _usePreviousState = _interopRequireDefault(require("./usePreviousState"));
 var _useConstructor = _interopRequireDefault(require("./useConstructor"));
 var _useSharedPluginState = require("./useSharedPluginState");
-var _sharedPluginStateHookMigratorFactory = require("./sharedPluginStateHookMigratorFactory");
+var _sharedPluginStateHookMigratorFactory = require("./sharedPluginStateHookMigratorFactory");
+var _useSharedPluginStateWithSelector = require("./useSharedPluginStateWithSelector");

package/dist/cjs/hooks/useSharedPluginStateWithSelector.js

@@ -0,0 +1,171 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSharedPluginStateWithSelector = useSharedPluginStateWithSelector;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Ignored via go/ees005
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+/**
+ *
+ * Directly map object values
+ *
+ * @private
+ * @param object The object to transform
+ * @param mapFunction The function to map an old value to new one
+ * @returns Object with the same key but transformed values
+ *
+ */
+function mapValues(object, mapFunction) {
+  return Object.entries(object).reduce(function (acc, _ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, key, mapFunction(value)));
+  }, {});
+}
+
+// When we use the `useSharedPluginStateWithSelector` example: `useSharedPluginStateWithSelector(api, ['width'], selector)`
+// it will re-render every time the component re-renders as the array "['width']" is seen as an update.
+// This hook is used to prevent re-renders due to this.
+function useStaticPlugins(plugins) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return (0, _react.useMemo)(function () {
+    return plugins;
+  }, []);
+}
+
+/**
+ *
+ * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
+ * If the plugins you are listening to generate multiple shared states while the user is typing,
+ * your React Component will get only the last one.
+ *
+ * Used to return the current plugin state of input dependencies.
+ *
+ * @example
+ * Example in plugin:
+ *
+ * ```typescript
+ * function selector(states: NamedPluginStatesFromInjectionAPI<API, ['dog']>) {
+ *  return {
+ *   title: states.dogState?.title,
+ *  }
+ * }
+ *
+ * function ExampleContent({ api }: Props) {
+ *   const { title } = useSharedPluginStateWithSelector(
+ *     api,
+ *     ['dog'],
+ *     selector
+ *   )
+ *   return <p>{ title }</p>
+ * }
+ *
+ * ```
+ *
+ * @param injectionApi Plugin injection API from `NextEditorPlugin`
+ * @param plugins Plugin names to get the shared plugin state for
+ * @param selector A function that takes the shared states of the plugins and returns a subset of a plugin state.
+ * @returns A corresponding object, the keys are names of the plugin with `State` appended,
+ * the values are the shared state exposed by that plugin.
+ */
+function useSharedPluginStateWithSelector(injectionApi, plugins, selector) {
+  var pluginNames = useStaticPlugins(plugins);
+
+  // Create a memoized object containing the named plugins
+  var namedExternalPlugins = (0, _react.useMemo)(function () {
+    return pluginNames.reduce(function (acc, pluginName) {
+      return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, "".concat(String(pluginName), "State"), injectionApi === null || injectionApi === void 0 ? void 0 : injectionApi[pluginName]));
+    }, {});
+  }, [injectionApi, pluginNames]);
+  return useSharedPluginStateInternal(namedExternalPlugins, selector);
+}
+function useSharedPluginStateInternal(externalPlugins, selector) {
+  var refStates = (0, _react.useRef)(mapValues(externalPlugins, function (value) {
+    return value === null || value === void 0 ? void 0 : value.sharedState.currentState();
+  }));
+  var _useState = (0, _react.useState)(function () {
+      return selector(refStates.current);
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    pluginStates = _useState2[0],
+    setPluginState = _useState2[1];
+  var mounted = (0, _react.useRef)(false);
+  (0, _react.useLayoutEffect)(function () {
+    var debouncedPluginStateUpdate = (0, _debounce.default)(function () {
+      setPluginState(function (currentPluginStates) {
+        // This is to avoid changing behaviour of the hook when selector is not provided.
+        var nextStates = selector(_objectSpread({}, refStates.current));
+        if (shallowEqual(nextStates, currentPluginStates)) {
+          return currentPluginStates;
+        }
+        return nextStates;
+      });
+    });
+
+    // If we re-render this hook due to a change in the external
+    // plugins we need to push a state update to ensure we have
+    // the most current state.
+    if (mounted.current) {
+      refStates.current = mapValues(externalPlugins, function (value) {
+        return value === null || value === void 0 ? void 0 : value.sharedState.currentState();
+      });
+      debouncedPluginStateUpdate();
+    }
+    var unsubs = Object.entries(externalPlugins).map(function (_ref3) {
+      var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+        pluginKey = _ref4[0],
+        externalPlugin = _ref4[1];
+      return externalPlugin === null || externalPlugin === void 0 ? void 0 : externalPlugin.sharedState.onChange(function (_ref5) {
+        var nextSharedState = _ref5.nextSharedState,
+          prevSharedState = _ref5.prevSharedState;
+        if (prevSharedState === nextSharedState) {
+          return;
+        }
+        refStates.current[pluginKey] = nextSharedState;
+        debouncedPluginStateUpdate();
+      });
+    });
+    mounted.current = true;
+    return function () {
+      refStates.current = {};
+      unsubs.forEach(function (cb) {
+        return cb === null || cb === void 0 ? void 0 : cb();
+      });
+    };
+    // Do not re-render due to state changes, we only need to check this when
+    // setting up the initial subscription.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [externalPlugins, selector]);
+  return pluginStates;
+}
+function shallowEqual(objA, objB) {
+  if (objA === objB) {
+    return true;
+  }
+  if ((0, _typeof2.default)(objA) !== 'object' || objA === null || (0, _typeof2.default)(objB) !== 'object' || objB === null) {
+    return false;
+  }
+  var keysA = Object.keys(objA);
+  var keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  for (var _i = 0, _keysA = keysA; _i < _keysA.length; _i++) {
+    var key = _keysA[_i];
+    if (objA[key] !== objB[key]) {
+      return false;
+    }
+  }
+  return true;
+}

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.0";
+var packageVersion = "107.7.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/type-ahead/messages.js

@@ -81,15 +81,15 @@ var typeAheadListMessages = exports.typeAheadListMessages = (0, _reactIntlNext.d
     defaultMessage: 'Text shortcut',
     description: 'Text shortcut'
   },
-  offlineErrorFallbackHeading: {
-    id: 'fabric.editor.offlineErrorFallbackHeading',
+  typeAheadErrorFallbackHeading: {
+    id: 'fabric.editor.typeAheadErrorFallbackHeading',
     defaultMessage: 'Something went wrong!',
-    description: 'heading for offline error fallback when mentions are not available'
+    description: 'Error message heading shown when typeahead items fail to load'
   },
-  offlineErrorFallbackDesc: {
-    id: 'fabric.editor.offlineErrorFallbackDescription',
-    defaultMessage: 'Try reloading the page.',
-    description: 'description for offline error fallback when mentions are not available'
+  typeAheadErrorFallbackDesc: {
+    id: 'fabric.editor.typeAheadErrorFallbackDescription',
+    defaultMessage: 'Please try again.',
+    description: 'Error message description shown when typeahead items fail to load'
   },
   viewAllInserts: {
     id: 'fablric.editor.viewAllInserts',

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.0";
+var packageVersion = "107.7.0";
 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';