@atlaskit/editor-plugin-card 6.0.0 → 6.0.2

package/dist/es2019/nodeviews/inlineCardWithAwareness.js

@@ -1,5 +1,6 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
-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 { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { registerRemoveOverlay } from '../pm-plugins/actions';
@@ -7,6 +8,19 @@ import { pluginKey } from '../pm-plugins/plugin-key';
 import { AwarenessWrapper } from '../ui/AwarenessWrapper';
 import OpenButtonOverlay from '../ui/OpenButtonOverlay';
 import { InlineCard } from './inlineCard';
+const useSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const {
+    editorViewModeState
+  } = useSharedPluginState(pluginInjectionApi, ['editorViewMode']);
+  return {
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+}, pluginInjectionApi => {
+  const mode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  return {
+    mode
+  };
+});
 export const InlineCardWithAwareness = /*#__PURE__*/memo(({
   node,
   cardContext,
@@ -52,8 +66,8 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
     }
   }, [isOverlayEnabled]);
   const {
-    editorViewModeState
-  } = useSharedPluginState(pluginInjectionApi, ['editorViewMode']);
+    mode
+  } = useSharedState(pluginInjectionApi);
   const innerCardWithOpenButtonOverlay = useMemo(() => /*#__PURE__*/React.createElement(OpenButtonOverlay, {
     isVisible: isResolvedViewRendered,
     url: node.attrs.url,
@@ -86,8 +100,8 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
   }), [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed]);
   const shouldShowOpenButtonOverlay = useMemo(() => {
     const shouldShowOpenButtonOverlayInChomeless = editorAppearance === 'chromeless' && fg('platform_editor_controls_patch_8');
-    return ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit' || editorAppearance === 'comment' && fg('platform_editor_controls_patch_6') || shouldShowOpenButtonOverlayInChomeless) && editorExperiment('platform_editor_controls', 'variant1');
-  }, [editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode, editorAppearance]);
+    return (mode === 'edit' || editorAppearance === 'comment' && fg('platform_editor_controls_patch_6') || shouldShowOpenButtonOverlayInChomeless) && editorExperiment('platform_editor_controls', 'variant1');
+  }, [mode, editorAppearance]);
   const innerCard = shouldShowOpenButtonOverlay ? innerCardWithOpenButtonOverlay : innerCardOriginal;
   const getPosFunction = typeof getPos === 'function' ? getPos : undefined;
   const placeholderUniqId = (getPosFunction === null || getPosFunction === void 0 ? void 0 : getPosFunction()) || 0;

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

@@ -1,24 +1,42 @@
 import React from 'react';
-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 { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, AssetsConfigModal, CONFLUENCE_SEARCH_DATASOURCE_ID, ConfluenceSearchConfigModal, JIRA_LIST_OF_LINKS_DATASOURCE_ID, JiraIssuesConfigModal } from '@atlaskit/link-datasource';
 import { EditorSmartCardProviderValueGuard, useSmartLinkContext } from '@atlaskit/link-provider';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DatasourceErrorBoundary } from '../datasourceErrorBoundary';
 import { DatasourceModal } from './index';
+const useSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const showDatasourceModal = useSharedPluginStateSelector(pluginInjectionApi, 'card.showDatasourceModal');
+  const datasourceModalType = useSharedPluginStateSelector(pluginInjectionApi, 'card.datasourceModalType');
+  return {
+    cardState: undefined,
+    showDatasourceModal,
+    datasourceModalType
+  };
+}, pluginInjectionApi => {
+  const {
+    cardState
+  } = useSharedPluginState(pluginInjectionApi, ['card']);
+  return {
+    cardState,
+    showDatasourceModal: cardState === null || cardState === void 0 ? void 0 : cardState.showDatasourceModal,
+    datasourceModalType: cardState === null || cardState === void 0 ? void 0 : cardState.datasourceModalType
+  };
+});
 const ModalWithState = ({
   api,
   editorView
 }) => {
   const cardContext = useSmartLinkContext();
   const {
-    cardState
-  } = useSharedPluginState(api, ['card']);
-  if (!cardState) {
-    return null;
-  }
-  const {
+    cardState,
     showDatasourceModal,
     datasourceModalType
-  } = cardState;
+  } = useSharedState(api);
+  if (!cardState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
+    return null;
+  }
   if (!showDatasourceModal || !datasourceModalType) {
     return null;
   }

package/dist/es2019/ui/HyperlinkToolbarAppearanceDropdown.js

@@ -3,6 +3,7 @@ import { appearancePropsMap } from '@atlaskit/editor-common/card';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
 import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives/compiled';
 import { LinkAppearanceMenu } from './LinkToolbarAppearanceDropdown';
 const CustomHyperlinkDropdown = props => {
@@ -68,7 +69,7 @@ const CustomHyperlinkDropdown = props => {
     return null;
   }
   const dispatchCommand = fn => {
-    fn && fn(editorView && editorView.state, editorView && editorView.dispatch);
+    fn && fn(editorView && editorView.state, editorView && editorView.dispatch, 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/es2019/ui/LayoutButton/index.js

@@ -7,9 +7,10 @@ import { useCallback, useMemo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
 import GrowHorizontalIcon from '@atlaskit/icon/core/migration/grow-horizontal--editor-expand';
 import ShrinkHorizontalIcon from '@atlaskit/icon/core/migration/shrink-horizontal--editor-collapse';
@@ -71,6 +72,22 @@ export const LayoutButton = ({
     })
   }));
 };
+const useSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const layout = useSharedPluginStateSelector(pluginInjectionApi, 'card.layout');
+  const datasourceTableRef = useSharedPluginStateSelector(pluginInjectionApi, 'card.datasourceTableRef');
+  return {
+    layout,
+    datasourceTableRef
+  };
+}, pluginInjectionApi => {
+  const {
+    cardState
+  } = useSharedPluginState(pluginInjectionApi, ['card']);
+  return {
+    layout: cardState === null || cardState === void 0 ? void 0 : cardState.layout,
+    datasourceTableRef: cardState === null || cardState === void 0 ? void 0 : cardState.datasourceTableRef
+  };
+});
 const LayoutButtonWrapper = ({
   editorView,
   mountPoint,
@@ -80,24 +97,18 @@ const LayoutButtonWrapper = ({
   api
 }) => {
   var _node$attrs;
-  const {
-    cardState
-  } = useSharedPluginState(api, ['card']);
   const {
     node,
     pos
   } = getDatasource(editorView);
+  const {
+    layout = (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) || undefined,
+    datasourceTableRef
+  } = useSharedState(api);
   const isDatasource = 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.
-  const {
-    datasourceTableRef,
-    layout = (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) || undefined
-  } = cardState !== null && cardState !== void 0 ? cardState : {};
   const onLayoutChange = layout => {
     var _getDatasource$node;
     if (pos === undefined) {

package/dist/es2019/ui/toolbar.js

@@ -319,6 +319,28 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       type: 'separator'
     }] : [];
     const openLinkInputMethod = fg('platform_editor_controls_patch_analytics') ? INPUT_METHOD.FLOATING_TB : INPUT_METHOD.TOOLBAR;
+    const editButtonItems = cardOptions.allowDatasource && fg('platform_editor_controls_patch_9') ? [{
+      type: 'custom',
+      fallback: [],
+      render: editorView => /*#__PURE__*/React.createElement(EditToolbarButton, {
+        key: "edit-toolbar-item",
+        url: url,
+        intl: intl,
+        editorAnalyticsApi: editorAnalyticsApi,
+        editorView: editorView,
+        onLinkEditClick: getEditLinkCallback(editorAnalyticsApi, true),
+        currentAppearance: currentAppearance
+      })
+    }] : [{
+      id: 'editor.link.edit',
+      type: 'button',
+      selected: false,
+      metadata: metadata,
+      title: intl.formatMessage(linkToolbarMessages.editLink),
+      icon: EditIcon,
+      testId: 'link-toolbar-edit-link-button',
+      onClick: getEditLinkCallback(editorAnalyticsApi, true)
+    }];
     const toolbarItems = editorExperiment('platform_editor_controls', 'control') ? [...editItems, ...commentItems, {
       id: 'editor.link.openLink',
       type: 'button',
@@ -358,16 +380,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
       title: intl.formatMessage(commonMessages.remove),
       onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
-    }] : [{
-      id: 'editor.link.edit',
-      type: 'button',
-      selected: false,
-      metadata: metadata,
-      title: intl.formatMessage(linkToolbarMessages.editLink),
-      icon: EditIcon,
-      testId: 'link-toolbar-edit-link-button',
-      onClick: getEditLinkCallback(editorAnalyticsApi, true)
-    }, ...(fg('platform_editor_controls_patch_6') ? [] : [{
+    }] : [...editButtonItems, ...(fg('platform_editor_controls_patch_6') ? [] : [{
       type: 'separator'
     }]), ...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi), {
       id: 'editor.link.openLink',

package/dist/esm/nodeviews/embedCard.js

@@ -15,15 +15,35 @@ 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 as _removeCard } from '../pm-plugins/actions';
 import ResizableEmbedCard from '../ui/ResizableEmbedCard';
 import { Card } from './genericCard';
+var useSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  var lineLength = useSharedPluginStateSelector(pluginInjectionApi, 'width.lineLength');
+  var width = useSharedPluginStateSelector(pluginInjectionApi, 'width.width');
+  var editorDisabled = useSharedPluginStateSelector(pluginInjectionApi, 'editorDisabled.editorDisabled');
+  return {
+    widthStateLineLength: lineLength || 0,
+    widthStateWidth: width || 0,
+    editorDisabled: editorDisabled
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = 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,
@@ -39,11 +59,10 @@ var CardInner = function CardInner(_ref) {
     heightAlone = _ref.heightAlone,
     cardProps = _ref.cardProps,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
-  var _useSharedPluginState = 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;
@@ -96,7 +115,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/esm/nodeviews/genericCard.js

@@ -10,21 +10,34 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 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';
+var useSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  var mode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  return {
+    mode: mode
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = 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 = useSharedPluginState(pluginInjectionApi, ['editorViewMode']),
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    mode = _useSharedState.mode;
   var onClick = useCallback(function (event) {
     if (typeof onClickCallback === 'function') {
       try {
@@ -53,7 +66,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.createElement(React.Fragment, null, children({
     onClick: allowNavigation ? undefined : onClick
   }));

package/dist/esm/nodeviews/inlineCard.js

@@ -3,9 +3,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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';
@@ -125,6 +126,22 @@ export var InlineCard = /*#__PURE__*/memo(function (_ref) {
 });
 var WrappedInlineCardWithAwareness = Card(InlineCardWithAwareness, UnsupportedInline);
 var WrappedInlineCard = Card(InlineCard, UnsupportedInline);
+var useSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  var mode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  var selection = useSharedPluginStateSelector(pluginInjectionApi, 'selection.selection');
+  return {
+    mode: mode,
+    selection: selection
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = 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
+  };
+});
 export function InlineCardNodeView(props) {
   var useAlternativePreloader = props.useAlternativePreloader,
     node = props.node,
@@ -142,10 +159,10 @@ export function InlineCardNodeView(props) {
     _useState2 = _slicedToArray(_useState, 2),
     isOverlayHovered = _useState2[0],
     setIsOverlayHovered = _useState2[1];
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['selection', 'editorViewMode']),
-    editorViewModeState = _useSharedPluginState.editorViewModeState,
-    selectionState = _useSharedPluginState.selectionState;
-  var floatingToolbarNode = (selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection) instanceof 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 NodeSelection && selection.node;
   if (__livePage && fg('linking_platform_smart_links_in_live_pages')) {
     var showHoverPreview = floatingToolbarNode !== node;
     var livePagesHoverCardFadeInDelay = 800;
@@ -163,7 +180,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,
@@ -190,7 +207,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 var inlineCardNodeView = function inlineCardNodeView(_ref2) {
   var inlineCardViewProducer = _ref2.inlineCardViewProducer;

package/dist/esm/nodeviews/inlineCardWithAwareness.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { memo, useCallback, useMemo, useState } from 'react';
-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 { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { registerRemoveOverlay } from '../pm-plugins/actions';
@@ -8,6 +9,18 @@ import { pluginKey } from '../pm-plugins/plugin-key';
 import { AwarenessWrapper } from '../ui/AwarenessWrapper';
 import OpenButtonOverlay from '../ui/OpenButtonOverlay';
 import { InlineCard } from './inlineCard';
+var useSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  return {
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+}, function (pluginInjectionApi) {
+  var mode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  return {
+    mode: mode
+  };
+});
 export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
   var _pluginInjectionApi$c, _pluginInjectionApi$a;
   var node = _ref.node,
@@ -63,8 +76,8 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
       setIsHovered(isHovered);
     }
   }, [isOverlayEnabled]);
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorViewMode']),
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var _useSharedState = useSharedState(pluginInjectionApi),
+    mode = _useSharedState.mode;
   var innerCardWithOpenButtonOverlay = useMemo(function () {
     return /*#__PURE__*/React.createElement(OpenButtonOverlay, {
       isVisible: isResolvedViewRendered,
@@ -101,8 +114,8 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
   }, [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed]);
   var shouldShowOpenButtonOverlay = useMemo(function () {
     var shouldShowOpenButtonOverlayInChomeless = editorAppearance === 'chromeless' && fg('platform_editor_controls_patch_8');
-    return ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit' || editorAppearance === 'comment' && fg('platform_editor_controls_patch_6') || shouldShowOpenButtonOverlayInChomeless) && editorExperiment('platform_editor_controls', 'variant1');
-  }, [editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode, editorAppearance]);
+    return (mode === 'edit' || editorAppearance === 'comment' && fg('platform_editor_controls_patch_6') || shouldShowOpenButtonOverlayInChomeless) && 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/esm/ui/DatasourceModal/ModalWithState.js

@@ -1,20 +1,39 @@
 import React from 'react';
-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 { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, AssetsConfigModal, CONFLUENCE_SEARCH_DATASOURCE_ID, ConfluenceSearchConfigModal, JIRA_LIST_OF_LINKS_DATASOURCE_ID, JiraIssuesConfigModal } from '@atlaskit/link-datasource';
 import { EditorSmartCardProviderValueGuard, useSmartLinkContext } from '@atlaskit/link-provider';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DatasourceErrorBoundary } from '../datasourceErrorBoundary';
 import { DatasourceModal } from './index';
+var useSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  var showDatasourceModal = useSharedPluginStateSelector(pluginInjectionApi, 'card.showDatasourceModal');
+  var datasourceModalType = useSharedPluginStateSelector(pluginInjectionApi, 'card.datasourceModalType');
+  return {
+    cardState: undefined,
+    showDatasourceModal: showDatasourceModal,
+    datasourceModalType: datasourceModalType
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = 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 = useSmartLinkContext();
-  var _useSharedPluginState = useSharedPluginState(api, ['card']),
-    cardState = _useSharedPluginState.cardState;
-  if (!cardState) {
+  var _useSharedState = useSharedState(api),
+    cardState = _useSharedState.cardState,
+    showDatasourceModal = _useSharedState.showDatasourceModal,
+    datasourceModalType = _useSharedState.datasourceModalType;
+  if (!cardState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
     return null;
   }
-  var showDatasourceModal = cardState.showDatasourceModal,
-    datasourceModalType = cardState.datasourceModalType;
   if (!showDatasourceModal || !datasourceModalType) {
     return null;
   }

package/dist/esm/ui/HyperlinkToolbarAppearanceDropdown.js

@@ -6,6 +6,7 @@ import { appearancePropsMap } from '@atlaskit/editor-common/card';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
 import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives/compiled';
 import { LinkAppearanceMenu } from './LinkToolbarAppearanceDropdown';
 var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {
@@ -138,7 +139,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, 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/esm/ui/LayoutButton/index.js

@@ -10,9 +10,10 @@ import { useCallback, useMemo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
 import GrowHorizontalIcon from '@atlaskit/icon/core/migration/grow-horizontal--editor-expand';
 import ShrinkHorizontalIcon from '@atlaskit/icon/core/migration/shrink-horizontal--editor-collapse';
@@ -73,6 +74,21 @@ export var LayoutButton = function LayoutButton(_ref) {
     })
   }));
 };
+var useSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  var layout = useSharedPluginStateSelector(pluginInjectionApi, 'card.layout');
+  var datasourceTableRef = useSharedPluginStateSelector(pluginInjectionApi, 'card.datasourceTableRef');
+  return {
+    layout: layout,
+    datasourceTableRef: datasourceTableRef
+  };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState = 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,
@@ -81,22 +97,17 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     boundariesElement = _ref2.boundariesElement,
     intl = _ref2.intl,
     api = _ref2.api;
-  var _useSharedPluginState = useSharedPluginState(api, ['card']),
-    cardState = _useSharedPluginState.cardState;
   var _getDatasource = 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 = 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/esm/ui/toolbar.js

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