@atlaskit/editor-core 161.0.0 → 163.0.0

package/dist/es2019/plugins/expand/ui/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { R50, R300, N40A, N50A, N80A, DN50, R200 } from '@atlaskit/theme/colors';
@@ -10,12 +10,14 @@ const EXPAND_SELECTED_BACKGROUND = themed({
   light: 'rgba(255, 255, 255, 0.6)',
   dark: 'rgba(9, 10, 11, 0.29)'
 });
-const EXPAND_ICON_COLOR = css`
+
+const EXPAND_ICON_COLOR = props => css`
   color: ${themed({
   light: N80A,
   dark: '#d9dde3'
-})};
+})(props)};
 `;
+
 const ACTIVE_STATE_BACKGROUND_COLOR = themed({
   dark: `#0C294F`
 });
@@ -38,13 +40,16 @@ const DANGER_STATE_BORDER_COLOR = themed({
 const DANGER_STATE_BORDER_RADIUS = themed({
   dark: '3px'
 });
-export const expandStyles = css`
+export const expandStyles = props => css`
   .${expandClassNames.icon} > div {
     display: flex;
   }
 
   .${expandClassNames.prefix} {
-    ${sharedExpandStyles.ContainerStyles}
+    ${sharedExpandStyles.containerStyles({
+  expanded: false,
+  focused: false
+})(props)}
     overflow: hidden;
     cursor: pointer;
     box-sizing: border-box;
@@ -54,7 +59,7 @@ export const expandStyles = css`
     }
 
     .${expandClassNames.iconContainer} svg {
-      ${EXPAND_ICON_COLOR};
+      ${EXPAND_ICON_COLOR(props)};
       transform: rotate(90deg);
     }
 
@@ -63,17 +68,17 @@ export const expandStyles = css`
 
       ::after {
         // Custom background color and borders (for dark theme).
-        background-color: ${ACTIVE_STATE_BACKGROUND_COLOR};
-        border: ${ACTIVE_STATE_BORDER};
-        border-radius: ${ACTIVE_STATE_BORDER_RADIUS};
+        background-color: ${ACTIVE_STATE_BACKGROUND_COLOR(props)};
+        border: ${ACTIVE_STATE_BORDER(props)};
+        border-radius: ${ACTIVE_STATE_BORDER_RADIUS(props)};
       }
     }
 
     &.danger {
-      background: ${DANGER_STATE_BACKGROUND_COLOR};
-      border: ${DANGER_STATE_BORDER};
-      border-color: ${DANGER_STATE_BORDER_COLOR};
-      border-radius: ${DANGER_STATE_BORDER_RADIUS};
+      background: ${DANGER_STATE_BACKGROUND_COLOR(props)};
+      border: ${DANGER_STATE_BORDER(props)};
+      border-color: ${DANGER_STATE_BORDER_COLOR(props)};
+      border-radius: ${DANGER_STATE_BORDER_RADIUS(props)};
     }
   }
 
@@ -86,29 +91,32 @@ export const expandStyles = css`
   }
 
   .${expandClassNames.content} {
-    ${sharedExpandStyles.ContentStyles}
+    ${sharedExpandStyles.contentStyles({
+  expanded: false,
+  focused: false
+})(props)}
     cursor: text;
     padding-top: 0px;
   }
 
   .${expandClassNames.titleInput} {
-    ${sharedExpandStyles.TitleInputStyles}
+    ${sharedExpandStyles.titleInputStyles(props)}
   }
 
   .${expandClassNames.titleContainer} {
-    ${sharedExpandStyles.TitleContainerStyles};
+    ${sharedExpandStyles.titleContainerStyles(props)};
     overflow: visible;
   }
 
   .${expandClassNames.expanded} {
-    background: ${EXPAND_SELECTED_BACKGROUND};
+    background: ${EXPAND_SELECTED_BACKGROUND(props)};
     border-color: ${themed({
   light: N40A,
   dark: DN50
-})};
+})(props)};
 
     .${expandClassNames.content} {
-      padding-top: ${gridSize}px;
+      padding-top: ${gridSize()}px;
     }
   }
 
@@ -116,11 +124,13 @@ export const expandStyles = css`
     width: 100%;
   }
 
+  /* stylelint-disable property-no-unknown, value-keyword-case */
   .${expandClassNames.prefix}:(.${expandClassNames.expanded}) {
     .expand-content-wrapper {
       height: auto;
     }
   }
+  /* stylelint-enable property-no-unknown, value-keyword-case */
 
   .${expandClassNames.prefix}:not(.${expandClassNames.expanded}) {
     .ak-editor-expand__content {
@@ -133,7 +143,7 @@ export const expandStyles = css`
     }
 
     .${expandClassNames.iconContainer} svg {
-      ${EXPAND_ICON_COLOR};
+      ${EXPAND_ICON_COLOR(props)};
       transform: rotate(0deg);
     }
 
@@ -145,8 +155,8 @@ export const expandStyles = css`
         border-color: ${themed({
   light: N50A,
   dark: DN50
-})};
-        background: ${EXPAND_SELECTED_BACKGROUND};
+})(props)};
+        background: ${EXPAND_SELECTED_BACKGROUND(props)};
       }
     }
   }

package/dist/es2019/plugins/extension/plugin-factory.js

@@ -1,6 +1,7 @@
 import { pluginFactory } from '../../utils/plugin-state-factory';
 import reducer from './reducer';
 import { pluginKey } from './plugin-key';
+import { onSelectionChanged } from './utils';
 const factory = pluginFactory(pluginKey, reducer, {
   mapping(tr, state) {
     const {
@@ -21,8 +22,9 @@ const factory = pluginFactory(pluginKey, reducer, {
     return { ...state,
       positions
     };
-  }
+  },
 
+  onSelectionChanged: onSelectionChanged
 });
 export const createPluginState = factory.createPluginState;
 export const createCommand = factory.createCommand;

package/dist/es2019/plugins/extension/pm-plugins/main.js

@@ -97,6 +97,7 @@ export const createContextIdentifierProviderHandler = view => async (name, provi
 
 const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, useLongPressSelection = false, options = {}) => {
   const state = createPluginState(dispatch, {
+    shouldRefreshEditButton: false,
     showEditButton: false,
     showContextPanel: false
   });
@@ -121,27 +122,48 @@ const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProvid
             element,
             localId,
             extensionProvider,
-            showContextPanel
-          } = getPluginState(state); // This fetches the selected extension node, either by keyboard selection or click for all types of extensions
+            showContextPanel,
+            shouldRefreshEditButton
+          } = getPluginState(state);
 
-          const selectedExtension = getSelectedExtension(state, true);
+          if (!shouldRefreshEditButton) {
+            return false;
+          } // This fetches the selected extension node, either by keyboard selection or click for all types of extensions
+
+
+          const selectedExtension = getSelectedExtension(state, true); // If our selection isn't on an extension node, clear some state and hide the config panel
 
           if (!selectedExtension) {
             if (showContextPanel) {
               clearEditingContext(state, dispatch);
             }
 
+            updateState({
+              shouldRefreshEditButton: false,
+              localId: undefined,
+              element: undefined,
+              showEditButton: false,
+              updateExtension: undefined
+            })(state, dispatch);
             return;
-          }
+          } // By this point we're certain we've selected an extension node.
+          // But we need to determine if the selection has changed to another
+          // extension node or remained on the same node.
+
 
           const {
             node
           } = selectedExtension;
           const newElement = getSelectedDomElement(state.schema, domAtPos, selectedExtension); // New node is selection
 
-          if (node.attrs.localId ? localId !== node.attrs.localId : // This is the current assumption and it's wrong but we are keeping it
+          const hasSelectedNodeChanged = node.attrs.localId ? localId !== node.attrs.localId : // This is the current assumption and it's wrong but we are keeping it
           // as fallback in case we need to turn off `allowLocalIdGeneration`
-          element !== newElement) {
+          element !== newElement;
+          const nextState = {
+            shouldRefreshEditButton: false
+          };
+
+          if (hasSelectedNodeChanged) {
             if (showContextPanel) {
               clearEditingContext(state, dispatch);
             }
@@ -154,20 +176,20 @@ const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProvid
             const showEditButton = shouldShowEditButton(extensionHandler, extensionProvider);
             const updateExtension = getUpdateExtensionPromise(view, extensionHandler, extensionProvider).catch(() => {// do nothing;
             });
-            updateState({
+            Object.assign(nextState, {
               localId: node.attrs.localId,
-              showContextPanel: false,
               element: newElement,
               showEditButton,
               updateExtension
-            })(state, dispatch);
+            });
           } // New DOM element doesn't necessarily mean it's a new Node
           else if (element !== newElement) {
-            updateState({
+            Object.assign(nextState, {
               element: newElement
-            })(state, dispatch);
+            });
           }
 
+          updateState(nextState)(state, dispatch);
           return true;
         },
         destroy: () => {
@@ -183,7 +205,11 @@ const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProvid
         bodiedExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions),
         inlineExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions)
       },
-      handleClickOn: createSelectionClickHandler(['extension', 'bodiedExtension'], target => !target.closest('.extension-content'), {
+      handleClickOn: createSelectionClickHandler(['extension', 'bodiedExtension'], target => {
+        // Clicked on anything around the extension content
+        // or specifically on the content border of a bodied extension
+        return !target.closest('.extension-content') || target.classList.contains('extension-content');
+      }, {
         useLongPressSelection
       })
     }

package/dist/es2019/plugins/extension/ui/Extension/Extension/index.js

@@ -1,8 +1,10 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { overflowShadow } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
-import { Wrapper, Header, Content, ContentWrapper, widerLayoutClassName } from './styles';
-import { Overlay } from '../styles';
+import { wrapperStyle, Header, Content, ContentWrapper, widerLayoutClassName } from './styles';
+import { overlay } from '../styles';
 import ExtensionLozenge from '../Lozenge';
 import { pluginKey as widthPluginKey } from '../../../../width';
 import WithPluginState from '../../../../../ui/WithPluginState';
@@ -32,7 +34,7 @@ const Extension = props => {
     'with-children': hasChildren,
     'without-frame': removeBorder
   });
-  return /*#__PURE__*/React.createElement(WithPluginState, {
+  return jsx(WithPluginState, {
     editorView: view,
     plugins: {
       widthState: widthPluginKey
@@ -42,21 +44,25 @@ const Extension = props => {
         width: 0
       }
     }) => {
-      return /*#__PURE__*/React.createElement(Wrapper, {
-        innerRef: handleRef,
+      return jsx("div", {
+        ref: handleRef,
         "data-layout": node.attrs.layout,
         className: classNames,
-        extensionWidth: calcBreakoutWidth(node.attrs.layout, widthState.width)
-      }, /*#__PURE__*/React.createElement("div", {
+        css: theme => {
+          const extensionWidth = calcBreakoutWidth(node.attrs.layout, widthState.width);
+          return wrapperStyle(theme, extensionWidth);
+        }
+      }, jsx("div", {
         className: `extension-overflow-wrapper ${hasBody ? 'with-body' : ''}`
-      }, /*#__PURE__*/React.createElement(Overlay, {
+      }, jsx("div", {
+        css: overlay,
         className: "extension-overlay"
-      }), /*#__PURE__*/React.createElement(Header, {
+      }), jsx(Header, {
         contentEditable: false,
         className: headerClassNames
-      }, !removeBorder && /*#__PURE__*/React.createElement(ExtensionLozenge, {
+      }, !removeBorder && jsx(ExtensionLozenge, {
         node: node
-      }), children), hasBody && /*#__PURE__*/React.createElement(ContentWrapper, null, /*#__PURE__*/React.createElement(Content, {
+      }), children), hasBody && jsx(ContentWrapper, null, jsx(Content, {
         innerRef: handleContentDOMRef,
         className: "extension-content block"
       }))));

package/dist/es2019/plugins/extension/ui/Extension/Extension/styles.js

@@ -1,11 +1,14 @@
 import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { DN30, DN900, N30 } from '@atlaskit/theme/colors';
-import { Wrapper as WrapperDefault, padding } from '../styles';
+import { wrapperDefault, padding } from '../styles';
 const dataConsumerSelector = '[data-mark-type="dataConsumer"]';
 export const widerLayoutClassName = 'wider-layout';
-export const Wrapper = styled(WrapperDefault)`
+export const wrapperStyle = (theme, extensionWidth) => css`
+  ${wrapperDefault(theme)}
+
   &.without-frame {
     background: transparent;
   }
@@ -16,7 +19,7 @@ export const Wrapper = styled(WrapperDefault)`
     overflow-x: auto;
   }
 
-  /* extension container breakout, only works on top level*/
+  /* extension container breakout, only works on top level */
   .ProseMirror
     > ${dataConsumerSelector}
     > [extensiontype]
@@ -24,9 +27,7 @@ export const Wrapper = styled(WrapperDefault)`
     .ProseMirror
     > [extensiontype]
     &.${widerLayoutClassName} {
-    width: ${({
-  extensionWidth
-}) => `${extensionWidth}`};
+    width: ${extensionWidth};
     margin-left: 50%;
     transform: translateX(-50%);
   }

package/dist/es2019/plugins/extension/ui/Extension/InlineExtension/index.js

@@ -1,8 +1,10 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
-import { Overlay } from '../styles';
+import { overlay } from '../styles';
 import ExtensionLozenge from '../Lozenge';
-import { Wrapper } from './styles';
+import { wrapperStyle } from './styles';
 export default class InlineExtension extends Component {
   render() {
     const {
@@ -11,11 +13,13 @@ export default class InlineExtension extends Component {
     } = this.props;
     const hasChildren = !!children;
     const className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
-    return /*#__PURE__*/React.createElement(Wrapper, {
+    return jsx("div", {
+      css: wrapperStyle,
       className: `extension-container inline ${className}`
-    }, /*#__PURE__*/React.createElement(Overlay, {
+    }, jsx("div", {
+      css: overlay,
       className: "extension-overlay"
-    }), children ? children : /*#__PURE__*/React.createElement(ExtensionLozenge, {
+    }), children ? children : jsx(ExtensionLozenge, {
       node: node
     }));
   }

package/dist/es2019/plugins/extension/ui/Extension/InlineExtension/styles.js

@@ -1,7 +1,9 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
-import { Wrapper as WrapperDefault } from '../styles';
-export const Wrapper = styled(WrapperDefault)`
+import { wrapperDefault } from '../styles';
+export const wrapperStyle = theme => css`
+  ${wrapperDefault(theme)}
+
   cursor: pointer;
   display: inline-flex;
   margin: 1px;

package/dist/es2019/plugins/extension/ui/Extension/Lozenge.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
 import { getExtensionLozengeData } from '@atlaskit/editor-common/utils';
-import { PlaceholderFallback, PlaceholderFallbackParams, StyledImage } from './styles';
+import { placeholderFallback, placeholderFallbackParams, styledImage } from './styles';
 export const capitalizeFirstLetter = str => {
   return str.charAt(0).toUpperCase() + str.slice(1);
 };
@@ -37,7 +39,8 @@ export default class ExtensionLozenge extends Component {
       url,
       ...rest
     } = lozengeData;
-    return /*#__PURE__*/React.createElement(StyledImage, _extends({
+    return jsx("img", _extends({
+      css: styledImage,
       src: url
     }, rest, {
       alt: extensionKey
@@ -55,15 +58,19 @@ export default class ExtensionLozenge extends Component {
     const params = parameters && parameters.macroParams;
     const title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
     const isBlockExtension = name === 'extension';
-    return /*#__PURE__*/React.createElement(PlaceholderFallback, null, lozengeData && !isBlockExtension ? this.renderImage({
+    return jsx("div", {
+      css: placeholderFallback
+    }, lozengeData && !isBlockExtension ? this.renderImage({
       height: ICON_SIZE,
       width: ICON_SIZE,
       ...lozengeData
-    }) : /*#__PURE__*/React.createElement(EditorFileIcon, {
+    }) : jsx(EditorFileIcon, {
       label: title
-    }), /*#__PURE__*/React.createElement("span", {
+    }), jsx("span", {
       className: "extension-title"
-    }, capitalizeFirstLetter(title)), params && !isBlockExtension && /*#__PURE__*/React.createElement(PlaceholderFallbackParams, null, Object.keys(params).map(key => key && ` | ${key} = ${params[key].value}`)));
+    }, capitalizeFirstLetter(title)), params && !isBlockExtension && jsx("span", {
+      css: placeholderFallbackParams
+    }, Object.keys(params).map(key => key && ` | ${key} = ${params[key].value}`)));
   }
 
 }

package/dist/es2019/plugins/extension/ui/Extension/styles.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
@@ -6,15 +6,15 @@ import { N20, DN50, DN700, B200, N20A, N70 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 export const padding = gridSize();
 export const BODIED_EXT_PADDING = padding * 2;
-export const Wrapper = styled.div`
+export const wrapperDefault = theme => css`
   background: ${themed({
   light: N20,
   dark: DN50
-})};
+})(theme)};
   border-radius: ${borderRadius()}px;
   color: ${themed({
   dark: DN700
-})};
+})(theme)};
   position: relative;
   vertical-align: middle;
   font-size: ${relativeFontSizeToBase16(fontSize())};
@@ -35,7 +35,7 @@ export const Wrapper = styled.div`
     }
   }
 `;
-export const Overlay = styled.div`
+export const overlay = css`
   border-radius: ${borderRadius()}px;
   position: absolute;
   width: 100%;
@@ -44,15 +44,18 @@ export const Overlay = styled.div`
   pointer-events: none;
   transition: opacity 0.3s;
 `;
-export const PlaceholderFallback = styled.div`
+export const placeholderFallback = css`
   display: inline-flex;
   align-items: center;
 
   & > img {
     margin: 0 4px;
   }
+  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
+  /* stylelint-disable-next-line */
+  label: placeholder-fallback;
 `;
-export const PlaceholderFallbackParams = styled.span`
+export const placeholderFallbackParams = css`
   display: inline-block;
   max-width: 200px;
   margin-left: 5px;
@@ -61,7 +64,10 @@ export const PlaceholderFallbackParams = styled.span`
   white-space: nowrap;
   overflow: hidden;
 `;
-export const StyledImage = styled.img`
+export const styledImage = css`
   max-height: 16px;
   max-width: 16px;
+  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
+  /* stylelint-disable-next-line */
+  label: lozenge-image;
 `;

package/dist/es2019/plugins/extension/ui/SaveIndicator/SaveIndicator.js

@@ -1,5 +1,6 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
 import { G300, N0 } from '@atlaskit/theme/colors';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import { FormattedMessage } from 'react-intl-next';
@@ -7,11 +8,11 @@ import { messages } from './messages';
 
 const noop = () => {};
 
-const SaveIndicatorWrapper = styled.div`
+const saveIndicatorWrapper = css`
   display: flex;
   justify-content: center;
 `;
-const SaveIndicatorContent = styled.div`
+const saveIndicatorContent = css`
   position: fixed;
   width: 256px;
   bottom: 20px;
@@ -27,7 +28,7 @@ const SaveIndicatorContent = styled.div`
     0px 0px 1px rgba(9, 30, 66, 0.31);
   border-radius: 16px;
 `;
-const SaveIndicatorText = styled.span`
+const saveIndicatorText = css`
   padding-left: 6px;
 `;
 export const SaveIndicator = ({
@@ -51,14 +52,19 @@ export const SaveIndicator = ({
       return () => clearTimeout(handleId);
     }
   }, [saving, duration]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, children({
+  return jsx(Fragment, null, jsx("div", null, children({
     onSaveStarted,
     onSaveEnded: noop
-  })), visible && saving && /*#__PURE__*/React.createElement(SaveIndicatorWrapper, null, /*#__PURE__*/React.createElement(SaveIndicatorContent, {
+  })), visible && saving && jsx("div", {
+    css: saveIndicatorWrapper
+  }, jsx("div", {
+    css: saveIndicatorContent,
     "data-testid": "save-indicator-content"
-  }, /*#__PURE__*/React.createElement(CheckCircleIcon, {
+  }, jsx(CheckCircleIcon, {
     label: "Saving",
     primaryColor: G300,
     size: "small"
-  }), /*#__PURE__*/React.createElement(SaveIndicatorText, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.saveIndicator)))));
+  }), jsx("span", {
+    css: saveIndicatorText
+  }, jsx(FormattedMessage, messages.saveIndicator)))));
 };

package/dist/es2019/plugins/extension/ui/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { blockNodesVerticalMargin, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const extensionStyles = css`
   .extensionView-content-wrap,
@@ -37,5 +37,6 @@ export const extensionStyles = css`
     .extensionView-content-wrap
     .extension-container {
     width: 100%;
+    max-width: 100%; // ensure width can't go over 100%;
   }
 `;

package/dist/es2019/plugins/extension/utils.js

@@ -1,15 +1,25 @@
 import { findParentNodeOfType, findSelectedNodeOfType, findDomRefAtPos } from 'prosemirror-utils';
 import { closestElement } from '../../utils/dom';
 import { findNodePosByLocalIds } from '../../utils/nodes-by-localIds';
+
+const getSelectedExtensionByTransaction = (transaction, searchParent = true) => {
+  return _getSelectedExtension(transaction.doc.type.schema, transaction.selection, searchParent);
+};
+
 export const getSelectedExtension = (state, searchParent = false) => {
+  return _getSelectedExtension(state.schema, state.selection, searchParent);
+};
+
+const _getSelectedExtension = (schema, selection, searchParent) => {
   const {
     inlineExtension,
     extension,
     bodiedExtension
-  } = state.schema.nodes;
+  } = schema.nodes;
   const nodeTypes = [extension, bodiedExtension, inlineExtension];
-  return findSelectedNodeOfType(nodeTypes)(state.selection) || searchParent && findParentNodeOfType(nodeTypes)(state.selection) || undefined;
+  return findSelectedNodeOfType(nodeTypes)(selection) || searchParent && findParentNodeOfType(nodeTypes)(selection) || undefined;
 };
+
 export const findExtensionWithLocalId = (state, localId) => {
   const selectedExtension = getSelectedExtension(state, true);
 
@@ -62,4 +72,29 @@ export const getNodeTypesReferenced = (ids, state) => {
 export const findNodePosWithLocalId = (state, localId) => {
   const nodes = findNodePosByLocalIds(state, [localId]);
   return nodes.length >= 1 ? nodes[0] : undefined;
+};
+export const onSelectionChanged = (tr, state) => {
+  const selectedExtension = getSelectedExtensionByTransaction(tr, true);
+  const hasUnselectedExtension = !!state.element && !selectedExtension;
+  /*
+   * We use this to indicate to our plugin that the selection has changed.
+   *
+   * - ignore if shouldRefreshEditButton already set
+   * - restrict to scenarios when an extension is
+   * - a) actually selected
+   * - b) or un-selected (not accounting for selection extensionA -> extensionB)
+   *
+   * The rest of the logic will be handled in Extension main plugin view update().
+   *
+   * Known issue: typing inside of a bodiedExtension will trigger state changes each keystroke
+   * as the toolbar always being open while it is focused.
+   */
+
+  if (!state.shouldRefreshEditButton && (selectedExtension || hasUnselectedExtension)) {
+    return { ...state,
+      shouldRefreshEditButton: true
+    };
+  }
+
+  return state;
 };

package/dist/es2019/plugins/fake-text-cursor/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { B75 } from '@atlaskit/theme/colors';
 export const fakeCursorStyles = css`
   .ProseMirror {

package/dist/es2019/plugins/feature-flags-context/feature-flags-from-props.js

@@ -51,6 +51,6 @@ export function createFeatureFlagsFromProps(props) {
     maxUnsafeChromeSpellcheckingVersion: safeNumberFeatureFlag((_props$featureFlags36 = props.featureFlags) === null || _props$featureFlags36 === void 0 ? void 0 : _props$featureFlags36.maxUnsafeChromeSpellcheckingVersion),
     useNativeCollabPlugin: Boolean(typeof ((_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.useNativePlugin) === 'boolean' ? !!((_props$collabEdit2 = props.collabEdit) !== null && _props$collabEdit2 !== void 0 && _props$collabEdit2.useNativePlugin) : false),
     chromeCursorHandlerFixedVersion: typeof ((_props$featureFlags37 = props.featureFlags) === null || _props$featureFlags37 === void 0 ? void 0 : _props$featureFlags37.chromeCursorHandlerFixedVersion) === 'string' ? Number(props.featureFlags.chromeCursorHandlerFixedVersion) || undefined : undefined,
-    viewChangingExperimentToolbarStyle: typeof ((_props$featureFlags38 = props.featureFlags) === null || _props$featureFlags38 === void 0 ? void 0 : _props$featureFlags38.viewChangingExperimentToolbarStyle) === 'string' ? props.featureFlags.viewChangingExperimentToolbarStyle || undefined : undefined
+    viewChangingExperimentToolbarStyle: typeof ((_props$featureFlags38 = props.featureFlags) === null || _props$featureFlags38 === void 0 ? void 0 : _props$featureFlags38['view-changing-experiment-toolbar-style']) === 'string' ? props.featureFlags['view-changing-experiment-toolbar-style'] || undefined : undefined
   };
 }