@atlaskit/editor-plugin-card 6.0.0 → 6.0.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-card
 
+## 6.0.2
+
+### Patch Changes
+
+- [#154277](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/154277)
+  [`84e1566863396`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/84e1566863396) -
+  [ux] ED-27809 Update edit button for datasource link toolbars so users can update search query
+- Updated dependencies
+
+## 6.0.1
+
+### Patch Changes
+
+- [#147070](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/147070)
+  [`9fec1cb4ec861`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9fec1cb4ec861) -
+  Migrate Card plugin to use useSharedPluginStateSelector
+- Updated dependencies
+
 ## 6.0.0
 
 ### Patch Changes

package/dist/cjs/nodeviews/embedCard.js

@@ -20,6 +20,7 @@ var _steps = require("@atlaskit/adf-schema/steps");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _ui = require("@atlaskit/editor-common/ui");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _smartCard = require("@atlaskit/smart-card");
@@ -31,6 +32,25 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
+  var lineLength = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'width.lineLength');
+  var width = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'width.width');
+  var editorDisabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorDisabled.editorDisabled');
+  return {
+    widthStateLineLength: lineLength || 0,
+    widthStateWidth: width || 0,
+    editorDisabled: editorDisabled
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'editorDisabled']),
+    widthState = _useSharedPluginState.widthState,
+    editorDisabledState = _useSharedPluginState.editorDisabledState;
+  return {
+    widthStateLineLength: (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || 0,
+    widthStateWidth: (widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0,
+    editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled
+  };
+});
 var CardInner = function CardInner(_ref) {
   var pluginInjectionApi = _ref.pluginInjectionApi,
     getPosSafely = _ref.getPosSafely,
@@ -46,11 +66,10 @@ var CardInner = function CardInner(_ref) {
     heightAlone = _ref.heightAlone,
     cardProps = _ref.cardProps,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'editorDisabled']),
-    widthState = _useSharedPluginState.widthState,
-    editorDisabledState = _useSharedPluginState.editorDisabledState;
-  var widthStateLineLength = (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || 0;
-  var widthStateWidth = (widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0;
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    widthStateLineLength = _useSharedState.widthStateLineLength,
+    widthStateWidth = _useSharedState.widthStateWidth,
+    editorDisabled = _useSharedState.editorDisabled;
   var pos = getPosSafely();
   if (pos === undefined) {
     return null;
@@ -103,7 +122,7 @@ var CardInner = function CardInner(_ref) {
     displayGrid: displayGrid,
     updateSize: updateSize,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    isResizeDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled
+    isResizeDisabled: editorDisabled
   }), smartCard);
 };
 // eslint-disable-next-line @repo/internal/react/no-class-components

package/dist/cjs/nodeviews/genericCard.js

@@ -17,6 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _utils = require("@atlaskit/editor-common/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _doc = require("../pm-plugins/doc");
@@ -27,14 +28,26 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
+  var mode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode');
+  return {
+    mode: mode
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  return {
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+});
 var WithClickHandler = function WithClickHandler(_ref) {
   var pluginInjectionApi = _ref.pluginInjectionApi,
     url = _ref.url,
     onClickCallback = _ref.onClickCallback,
     children = _ref.children,
     __livePage = _ref.__livePage;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode']),
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    mode = _useSharedState.mode;
   var onClick = (0, _react.useCallback)(function (event) {
     if (typeof onClickCallback === 'function') {
       try {
@@ -63,7 +76,7 @@ var WithClickHandler = function WithClickHandler(_ref) {
 
   // Setting `onClick` to `undefined` ensures clicks on smartcards navigate to the URL.
   // If in view mode and not overriding with onClickCallback option, then allow smartlinks to navigate on click.
-  var allowNavigation = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' && !onClickCallback;
+  var allowNavigation = mode === 'view' && !onClickCallback;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children({
     onClick: allowNavigation ? undefined : onClick
   }));

package/dist/cjs/nodeviews/inlineCard.js

@@ -16,6 +16,7 @@ var _v = _interopRequireDefault(require("uuid/v4"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _link = require("@atlaskit/editor-common/link");
 var _ui = require("@atlaskit/editor-common/ui");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _smartCard = require("@atlaskit/smart-card");
@@ -137,6 +138,22 @@ var InlineCard = exports.InlineCard = /*#__PURE__*/(0, _react.memo)(function (_r
 });
 var WrappedInlineCardWithAwareness = (0, _genericCard.Card)(_inlineCardWithAwareness.InlineCardWithAwareness, _ui.UnsupportedInline);
 var WrappedInlineCard = (0, _genericCard.Card)(InlineCard, _ui.UnsupportedInline);
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
+  var mode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode');
+  var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'selection.selection');
+  return {
+    mode: mode,
+    selection: selection
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['selection', 'editorViewMode']),
+    selectionState = _useSharedPluginState.selectionState,
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  return {
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  };
+});
 function InlineCardNodeView(props) {
   var useAlternativePreloader = props.useAlternativePreloader,
     node = props.node,
@@ -154,10 +171,10 @@ function InlineCardNodeView(props) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOverlayHovered = _useState2[0],
     setIsOverlayHovered = _useState2[1];
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['selection', 'editorViewMode']),
-    editorViewModeState = _useSharedPluginState.editorViewModeState,
-    selectionState = _useSharedPluginState.selectionState;
-  var floatingToolbarNode = (selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection) instanceof _state.NodeSelection && (selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection.node);
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    mode = _useSharedState.mode,
+    selection = _useSharedState.selection;
+  var floatingToolbarNode = selection instanceof _state.NodeSelection && selection.node;
   if (__livePage && (0, _platformFeatureFlags.fg)('linking_platform_smart_links_in_live_pages')) {
     var showHoverPreview = floatingToolbarNode !== node;
     var livePagesHoverCardFadeInDelay = 800;
@@ -175,7 +192,7 @@ function InlineCardNodeView(props) {
       },
       isPageSSRed: isPageSSRed
     });
-    return (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? inlineCard : /*#__PURE__*/_react.default.createElement(_ConfigureOverlay.default, {
+    return mode === 'view' ? inlineCard : /*#__PURE__*/_react.default.createElement(_ConfigureOverlay.default, {
       targetElementPos: getPos(),
       view: view,
       isHoveredCallback: setIsOverlayHovered,
@@ -202,7 +219,7 @@ function InlineCardNodeView(props) {
     appearance: "inline"
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
-  }, enableInlineUpgradeFeatures && (0, _utils.getAwarenessProps)(view.state, getPos, allowEmbeds, allowBlockCards, !(0, _experiments.editorExperiment)('live_pages_graceful_edit', 'control') ? true : (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view')));
+  }, enableInlineUpgradeFeatures && (0, _utils.getAwarenessProps)(view.state, getPos, allowEmbeds, allowBlockCards, !(0, _experiments.editorExperiment)('live_pages_graceful_edit', 'control') ? true : mode === 'view')));
 }
 var inlineCardNodeView = exports.inlineCardNodeView = function inlineCardNodeView(_ref2) {
   var inlineCardViewProducer = _ref2.inlineCardViewProducer;

package/dist/cjs/nodeviews/inlineCardWithAwareness.js

@@ -9,6 +9,7 @@ exports.InlineCardWithAwareness = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("../pm-plugins/actions");
@@ -18,6 +19,18 @@ var _OpenButtonOverlay = _interopRequireDefault(require("../ui/OpenButtonOverlay
 var _inlineCard = require("./inlineCard");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  return {
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+}, function (pluginInjectionApi) {
+  var mode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode');
+  return {
+    mode: mode
+  };
+});
 var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var _pluginInjectionApi$c, _pluginInjectionApi$a;
   var node = _ref.node,
@@ -73,8 +86,8 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
       setIsHovered(isHovered);
     }
   }, [isOverlayEnabled]);
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode']),
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    mode = _useSharedState.mode;
   var innerCardWithOpenButtonOverlay = (0, _react.useMemo)(function () {
     return /*#__PURE__*/_react.default.createElement(_OpenButtonOverlay.default, {
       isVisible: isResolvedViewRendered,
@@ -111,8 +124,8 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
   }, [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed]);
   var shouldShowOpenButtonOverlay = (0, _react.useMemo)(function () {
     var shouldShowOpenButtonOverlayInChomeless = editorAppearance === 'chromeless' && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_8');
-    return ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit' || editorAppearance === 'comment' && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6') || shouldShowOpenButtonOverlayInChomeless) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
-  }, [editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode, editorAppearance]);
+    return (mode === 'edit' || editorAppearance === 'comment' && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6') || shouldShowOpenButtonOverlayInChomeless) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
+  }, [mode, editorAppearance]);
   var innerCard = shouldShowOpenButtonOverlay ? innerCardWithOpenButtonOverlay : innerCardOriginal;
   var getPosFunction = typeof getPos === 'function' ? getPos : undefined;
   var placeholderUniqId = (getPosFunction === null || getPosFunction === void 0 ? void 0 : getPosFunction()) || 0;

package/dist/cjs/ui/DatasourceModal/ModalWithState.js

@@ -7,21 +7,40 @@ Object.defineProperty(exports, "__esModule", {
 exports.modalTypeToComponentMap = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _linkDatasource = require("@atlaskit/link-datasource");
 var _linkProvider = require("@atlaskit/link-provider");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _datasourceErrorBoundary = require("../datasourceErrorBoundary");
 var _index = require("./index");
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
+  var showDatasourceModal = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'card.showDatasourceModal');
+  var datasourceModalType = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'card.datasourceModalType');
+  return {
+    cardState: undefined,
+    showDatasourceModal: showDatasourceModal,
+    datasourceModalType: datasourceModalType
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['card']),
+    cardState = _useSharedPluginState.cardState;
+  return {
+    cardState: cardState,
+    showDatasourceModal: cardState === null || cardState === void 0 ? void 0 : cardState.showDatasourceModal,
+    datasourceModalType: cardState === null || cardState === void 0 ? void 0 : cardState.datasourceModalType
+  };
+});
 var ModalWithState = function ModalWithState(_ref) {
   var api = _ref.api,
     editorView = _ref.editorView;
   var cardContext = (0, _linkProvider.useSmartLinkContext)();
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['card']),
-    cardState = _useSharedPluginState.cardState;
-  if (!cardState) {
+  var _useSharedState = useSharedState(api),
+    cardState = _useSharedState.cardState,
+    showDatasourceModal = _useSharedState.showDatasourceModal,
+    datasourceModalType = _useSharedState.datasourceModalType;
+  if (!cardState && (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)) {
     return null;
   }
-  var showDatasourceModal = cardState.showDatasourceModal,
-    datasourceModalType = cardState.datasourceModalType;
   if (!showDatasourceModal || !datasourceModalType) {
     return null;
   }

package/dist/cjs/ui/HyperlinkToolbarAppearanceDropdown.js

@@ -14,6 +14,7 @@ var _card = require("@atlaskit/editor-common/card");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _LinkToolbarAppearanceDropdown = require("./LinkToolbarAppearanceDropdown");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -148,7 +149,7 @@ var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {
     return null;
   }
   var dispatchCommand = function dispatchCommand(fn) {
-    fn && fn(editorView && editorView.state, editorView && editorView.dispatch);
+    fn && fn(editorView && editorView.state, editorView && editorView.dispatch, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_9') ? editorView : undefined);
     // Refocus the view to ensure the editor has focus
     if (editorView && !editorView.hasFocus()) {
       editorView.focus();

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

@@ -12,6 +12,7 @@ var _reactIntlNext = require("react-intl-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _utils = require("@atlaskit/editor-common/utils");
 var _growHorizontalEditorExpand = _interopRequireDefault(require("@atlaskit/icon/core/migration/grow-horizontal--editor-expand"));
 var _shrinkHorizontalEditorCollapse = _interopRequireDefault(require("@atlaskit/icon/core/migration/shrink-horizontal--editor-collapse"));
@@ -77,6 +78,21 @@ var LayoutButton = exports.LayoutButton = function LayoutButton(_ref) {
     })
   }));
 };
+var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
+  var layout = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'card.layout');
+  var datasourceTableRef = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'card.datasourceTableRef');
+  return {
+    layout: layout,
+    datasourceTableRef: datasourceTableRef
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['card']),
+    cardState = _useSharedPluginState.cardState;
+  return {
+    layout: cardState === null || cardState === void 0 ? void 0 : cardState.layout,
+    datasourceTableRef: cardState === null || cardState === void 0 ? void 0 : cardState.datasourceTableRef
+  };
+});
 var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
   var _node$attrs;
   var editorView = _ref2.editorView,
@@ -85,22 +101,17 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     boundariesElement = _ref2.boundariesElement,
     intl = _ref2.intl,
     api = _ref2.api;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['card']),
-    cardState = _useSharedPluginState.cardState;
   var _getDatasource = (0, _utils3.getDatasource)(editorView),
     node = _getDatasource.node,
     pos = _getDatasource.pos;
+  var _useSharedState = useSharedState(api),
+    _useSharedState$layou = _useSharedState.layout,
+    layout = _useSharedState$layou === void 0 ? (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) || undefined : _useSharedState$layou,
+    datasourceTableRef = _useSharedState.datasourceTableRef;
   var isDatasource = (0, _utils2.isDatasourceNode)(node);
   if (!isDatasource) {
     return null;
   }
-
-  //  If layout doesn't exist in ADF it returns null, we want to change to undefined
-  //  which results in default parameter value being used in LayoutButton.
-  var _ref3 = cardState !== null && cardState !== void 0 ? cardState : {},
-    datasourceTableRef = _ref3.datasourceTableRef,
-    _ref3$layout = _ref3.layout,
-    layout = _ref3$layout === void 0 ? (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) || undefined : _ref3$layout;
   var onLayoutChange = function onLayoutChange(layout) {
     var _getDatasource$node;
     if (pos === undefined) {

package/dist/cjs/ui/toolbar.js

@@ -325,6 +325,30 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         type: 'separator'
       }] : [];
       var openLinkInputMethod = (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_analytics') ? _analytics.INPUT_METHOD.FLOATING_TB : _analytics.INPUT_METHOD.TOOLBAR;
+      var editButtonItems = cardOptions.allowDatasource && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_9') ? [{
+        type: 'custom',
+        fallback: [],
+        render: function render(editorView) {
+          return /*#__PURE__*/_react.default.createElement(_EditToolbarButton.EditToolbarButton, {
+            key: "edit-toolbar-item",
+            url: url,
+            intl: intl,
+            editorAnalyticsApi: editorAnalyticsApi,
+            editorView: editorView,
+            onLinkEditClick: (0, _EditLinkToolbar.getEditLinkCallback)(editorAnalyticsApi, true),
+            currentAppearance: currentAppearance
+          });
+        }
+      }] : [{
+        id: 'editor.link.edit',
+        type: 'button',
+        selected: false,
+        metadata: metadata,
+        title: intl.formatMessage(_messages.linkToolbarMessages.editLink),
+        icon: _edit.default,
+        testId: 'link-toolbar-edit-link-button',
+        onClick: (0, _EditLinkToolbar.getEditLinkCallback)(editorAnalyticsApi, true)
+      }];
       var toolbarItems = (0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? [].concat(editItems, commentItems, [_objectSpread({
         id: 'editor.link.openLink',
         type: 'button',
@@ -363,16 +387,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
         title: intl.formatMessage(_messages.default.remove),
         onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
-      }]) : [{
-        id: 'editor.link.edit',
-        type: 'button',
-        selected: false,
-        metadata: metadata,
-        title: intl.formatMessage(_messages.linkToolbarMessages.editLink),
-        icon: _edit.default,
-        testId: 'link-toolbar-edit-link-button',
-        onClick: (0, _EditLinkToolbar.getEditLinkCallback)(editorAnalyticsApi, true)
-      }].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6') ? [] : [{
+      }]) : [].concat(editButtonItems, (0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6') ? [] : [{
         type: 'separator'
       }]), (0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [_objectSpread({
         id: 'editor.link.openLink',

package/dist/es2019/nodeviews/embedCard.js

@@ -4,15 +4,36 @@ import React from 'react';
 import rafSchedule from 'raf-schd';
 import uuid from 'uuid/v4';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, MediaSingle as RichMediaWrapper, UnsupportedBlock } from '@atlaskit/editor-common/ui';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { EmbedResizeMessageListener, Card as SmartCard } from '@atlaskit/smart-card';
 import { registerCard, removeCard } from '../pm-plugins/actions';
 import ResizableEmbedCard from '../ui/ResizableEmbedCard';
 import { Card } from './genericCard';
+const useSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const lineLength = useSharedPluginStateSelector(pluginInjectionApi, 'width.lineLength');
+  const width = useSharedPluginStateSelector(pluginInjectionApi, 'width.width');
+  const editorDisabled = useSharedPluginStateSelector(pluginInjectionApi, 'editorDisabled.editorDisabled');
+  return {
+    widthStateLineLength: lineLength || 0,
+    widthStateWidth: width || 0,
+    editorDisabled
+  };
+}, pluginInjectionApi => {
+  const {
+    widthState,
+    editorDisabledState
+  } = useSharedPluginState(pluginInjectionApi, ['width', 'editorDisabled']);
+  return {
+    widthStateLineLength: (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || 0,
+    widthStateWidth: (widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0,
+    editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled
+  };
+});
 const CardInner = ({
   pluginInjectionApi,
   getPosSafely,
@@ -30,11 +51,10 @@ const CardInner = ({
   dispatchAnalyticsEvent
 }) => {
   const {
-    widthState,
-    editorDisabledState
-  } = useSharedPluginState(pluginInjectionApi, ['width', 'editorDisabled']);
-  const widthStateLineLength = (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || 0;
-  const widthStateWidth = (widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0;
+    widthStateLineLength,
+    widthStateWidth,
+    editorDisabled
+  } = useSharedState(pluginInjectionApi);
   const pos = getPosSafely();
   if (pos === undefined) {
     return null;
@@ -87,7 +107,7 @@ const CardInner = ({
     displayGrid: displayGrid,
     updateSize: updateSize,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    isResizeDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled
+    isResizeDisabled: editorDisabled
   }), smartCard);
 };
 // eslint-disable-next-line @repo/internal/react/no-class-components

package/dist/es2019/nodeviews/genericCard.js

@@ -3,13 +3,27 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { useCallback } from 'react';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { getAnalyticsEditorAppearance } from '@atlaskit/editor-common/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { changeSelectedCardToLinkFallback } from '../pm-plugins/doc';
 import { getPluginState } from '../pm-plugins/util/state';
 import { titleUrlPairFromNode } from '../pm-plugins/utils';
 import { WithCardContext } from '../ui/WithCardContext';
+const useSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const mode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  return {
+    mode
+  };
+}, pluginInjectionApi => {
+  const {
+    editorViewModeState
+  } = useSharedPluginState(pluginInjectionApi, ['editorViewMode']);
+  return {
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+});
 const WithClickHandler = ({
   pluginInjectionApi,
   url,
@@ -18,8 +32,8 @@ const WithClickHandler = ({
   __livePage
 }) => {
   const {
-    editorViewModeState
-  } = useSharedPluginState(pluginInjectionApi, ['editorViewMode']);
+    mode
+  } = useSharedState(pluginInjectionApi);
   const onClick = useCallback(event => {
     if (typeof onClickCallback === 'function') {
       try {
@@ -48,7 +62,7 @@ const WithClickHandler = ({
 
   // Setting `onClick` to `undefined` ensures clicks on smartcards navigate to the URL.
   // If in view mode and not overriding with onClickCallback option, then allow smartlinks to navigate on click.
-  const allowNavigation = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' && !onClickCallback;
+  const allowNavigation = mode === 'view' && !onClickCallback;
   return /*#__PURE__*/React.createElement(React.Fragment, null, children({
     onClick: allowNavigation ? undefined : onClick
   }));

package/dist/es2019/nodeviews/inlineCard.js

@@ -2,9 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import rafSchedule from 'raf-schd';
 import uuid from 'uuid/v4';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { handleNavigation } from '@atlaskit/editor-common/link';
 import { findOverflowScrollParent, UnsupportedInline } from '@atlaskit/editor-common/ui';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Card as SmartCard } from '@atlaskit/smart-card';
@@ -130,6 +131,23 @@ export const InlineCard = /*#__PURE__*/memo(({
 });
 const WrappedInlineCardWithAwareness = Card(InlineCardWithAwareness, UnsupportedInline);
 const WrappedInlineCard = Card(InlineCard, UnsupportedInline);
+const useSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const mode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  const selection = useSharedPluginStateSelector(pluginInjectionApi, 'selection.selection');
+  return {
+    mode,
+    selection
+  };
+}, pluginInjectionApi => {
+  const {
+    selectionState,
+    editorViewModeState
+  } = useSharedPluginState(pluginInjectionApi, ['selection', 'editorViewMode']);
+  return {
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
+  };
+});
 export function InlineCardNodeView(props) {
   const {
     useAlternativePreloader,
@@ -147,10 +165,10 @@ export function InlineCardNodeView(props) {
   } = props;
   const [isOverlayHovered, setIsOverlayHovered] = useState(false);
   const {
-    editorViewModeState,
-    selectionState
-  } = useSharedPluginState(pluginInjectionApi, ['selection', 'editorViewMode']);
-  const floatingToolbarNode = (selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection) instanceof NodeSelection && (selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection.node);
+    mode,
+    selection
+  } = useSharedState(pluginInjectionApi);
+  const floatingToolbarNode = selection instanceof NodeSelection && selection.node;
   if (__livePage && fg('linking_platform_smart_links_in_live_pages')) {
     const showHoverPreview = floatingToolbarNode !== node;
     const livePagesHoverCardFadeInDelay = 800;
@@ -168,7 +186,7 @@ export function InlineCardNodeView(props) {
       },
       isPageSSRed: isPageSSRed
     });
-    return (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? inlineCard : /*#__PURE__*/React.createElement(OverlayWrapper, {
+    return mode === 'view' ? inlineCard : /*#__PURE__*/React.createElement(OverlayWrapper, {
       targetElementPos: getPos(),
       view: view,
       isHoveredCallback: setIsOverlayHovered,
@@ -195,7 +213,7 @@ export function InlineCardNodeView(props) {
     appearance: "inline"
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
-  }, enableInlineUpgradeFeatures && getAwarenessProps(view.state, getPos, allowEmbeds, allowBlockCards, !editorExperiment('live_pages_graceful_edit', 'control') ? true : (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view')));
+  }, enableInlineUpgradeFeatures && getAwarenessProps(view.state, getPos, allowEmbeds, allowBlockCards, !editorExperiment('live_pages_graceful_edit', 'control') ? true : mode === 'view')));
 }
 export const inlineCardNodeView = ({
   inlineCardViewProducer