@atlaskit/editor-core 176.0.3 → 177.0.1

package/dist/es2019/plugins/card/pm-plugins/doc.js

@@ -1,17 +1,16 @@
-import { NodeSelection } from 'prosemirror-state';
 import { closeHistory } from 'prosemirror-history';
-import { pluginKey } from './plugin-key';
-import { queueCards, resolveCard } from './actions';
-import { appearanceForNodeType } from '../utils';
-import { nodesBetweenChanged, processRawValue } from '../../../utils';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD } from '../../../plugins/analytics';
+import { NodeSelection } from 'prosemirror-state';
 import { isSafeUrl } from '@atlaskit/adf-schema';
-import { isFromCurrentDomain } from '../../hyperlink/utils';
-import { shouldReplaceLink } from './shouldReplaceLink';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD } from '../../../plugins/analytics';
 import { SMART_LINK_TYPE } from '../../../plugins/analytics/types/node-events';
 import { getLinkCreationAnalyticsEvent } from '../../../plugins/hyperlink/analytics';
+import { nodesBetweenChanged, processRawValue } from '../../../utils';
 import { unlinkPayload } from '../../../utils/linking-utils';
-import { getFeatureFlags } from '../../feature-flags-context';
+import { isFromCurrentDomain } from '../../hyperlink/utils';
+import { appearanceForNodeType } from '../utils';
+import { queueCards, resolveCard } from './actions';
+import { pluginKey } from './plugin-key';
+import { shouldReplaceLink } from './shouldReplaceLink';
 /**
  * Attempt to replace the link into the respective card.
  */
@@ -198,17 +197,13 @@ export const changeSelectedCardToLink = (text, href, sendAnalytics, node, pos) =
 
   if (sendAnalytics) {
     if (selectedNode) {
-      const {
-        viewChangingExperimentToolbarStyle
-      } = getFeatureFlags(state);
       addAnalytics(state, tr, {
         action: ACTION.CHANGED_TYPE,
         actionSubject: ACTION_SUBJECT.SMART_LINK,
         eventType: EVENT_TYPE.TRACK,
         attributes: {
           newType: SMART_LINK_TYPE.URL,
-          previousType: appearanceForNodeType(selectedNode.type),
-          featureFlag: viewChangingExperimentToolbarStyle || 'noChange'
+          previousType: appearanceForNodeType(selectedNode.type)
         }
       });
     }
@@ -333,17 +328,13 @@ export const setSelectedCardAppearance = appearance => (state, dispatch) => {
   } = state.selection;
   const nodeType = getLinkNodeType(appearance, state.schema.nodes);
   const tr = state.tr.setNodeMarkup(from, nodeType, attrs, selectedNode.marks);
-  const {
-    viewChangingExperimentToolbarStyle
-  } = getFeatureFlags(state);
   addAnalytics(state, tr, {
     action: ACTION.CHANGED_TYPE,
     actionSubject: ACTION_SUBJECT.SMART_LINK,
     eventType: EVENT_TYPE.TRACK,
     attributes: {
       newType: appearance,
-      previousType: appearanceForNodeType(selectedNode.type),
-      featureFlag: viewChangingExperimentToolbarStyle || 'noChange'
+      previousType: appearanceForNodeType(selectedNode.type)
     }
   });
 

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

@@ -1,14 +1,13 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import rafSchedule from 'raf-schd';
 import { getInlineNodeViewProducer } from '../../../nodeviews/getInlineNodeViewProducer';
-import reducer from './reducers';
+import { BlockCard } from '../nodeviews/blockCard';
+import { EmbedCard } from '../nodeviews/embedCard';
+import { InlineCardNodeView } from '../nodeviews/inlineCard';
 import { pluginKey } from './plugin-key';
+import reducer from './reducers';
 import { handleProvider, resolveWithProvider } from './util/resolve';
 import { getNewRequests, getPluginState, getPluginStateWithUpdatedPos } from './util/state';
-import { EmbedCard } from '../nodeviews/embedCard';
-import { BlockCard } from '../nodeviews/blockCard';
-import { InlineCardNodeView } from '../nodeviews/inlineCard';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../../plugins/analytics';
 export { pluginKey } from './plugin-key';
 export const createPlugin = options => pmPluginFactoryParams => {
   const {
@@ -21,20 +20,6 @@ export const createPlugin = options => pmPluginFactoryParams => {
   return new SafePlugin({
     state: {
       init() {
-        const {
-          viewChangingExperimentToolbarStyle
-        } = pmPluginFactoryParams.featureFlags;
-        pmPluginFactoryParams.dispatchAnalyticsEvent({
-          eventType: EVENT_TYPE.OPERATIONAL,
-          action: ACTION.EXPOSED,
-          actionSubject: ACTION_SUBJECT.FEATURE,
-          attributes: {
-            flagKey: 'confluence.frontend.fabric.editor.view-changing-experiment-toolbar-style',
-            value: viewChangingExperimentToolbarStyle || 'noChange'
-          },
-          source: '@atlaskit/feature-flag-client',
-          tags: ['measurement']
-        });
         return {
           requests: [],
           provider: null,

package/dist/es2019/plugins/card/styles.js

@@ -3,7 +3,6 @@ import { SelectionStyle, getSelectionStyles, akEditorDeleteBorder, akEditorDelet
 import { N20 } from '@atlaskit/theme/colors';
 import { SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
 export const smartCardStyles = css`
   .${SmartCardSharedCssClassName.INLINE_CARD_CONTAINER} {
@@ -38,7 +37,7 @@ export const smartCardStyles = css`
     &.danger {
       .${SmartCardSharedCssClassName.LOADER_WRAPPER} > a {
         box-shadow: 0 0 0 1px
-          ${token('color.border.danger', akEditorDeleteBorder)};
+          ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
         /* EDM-1717: box-shadow Safari fix start */
         z-index: 2;
         /* EDM-1717: box-shadow Safari fix end */
@@ -50,7 +49,7 @@ export const smartCardStyles = css`
     .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
       cursor: pointer;
       &:hover {
-        background-color: ${token('color.background.neutral.subtle.hovered', N20)};
+        background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N20})`};
       }
     }
 
@@ -63,7 +62,7 @@ export const smartCardStyles = css`
     &.danger {
       .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
         box-shadow: 0 0 0 1px
-          ${token('color.border.danger', akEditorDeleteBorder)} !important;
+          ${`var(--ds-border-danger, ${akEditorDeleteBorder})`} !important;
       }
     }
   }
@@ -90,12 +89,12 @@ export const smartCardStyles = css`
     &.danger {
       .media-card-frame::after {
         box-shadow: 0 0 0 1px
-          ${token('color.border.danger', akEditorDeleteBorder)} !important;
-        background: ${token('color.background.danger', akEditorDeleteBackground)} !important;
+          ${`var(--ds-border-danger, ${akEditorDeleteBorder})`} !important;
+        background: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`} !important;
       }
       .richMedia-resize-handle-right::after,
       .richMedia-resize-handle-left::after {
-        background: ${token('color.border.danger', akEditorDeleteBorder)};
+        background: ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
       }
     }
   }

package/dist/es2019/plugins/card/toolbar.js

@@ -83,6 +83,8 @@ export const openLinkSettings = (state, dispatch) => {
 };
 export const floatingToolbar = (cardOptions, platform, linkPickerOptions) => {
   return (state, intl, providerFactory) => {
+    var _linkPickerOptions$pl;
+
     const {
       inlineCard,
       blockCard,
@@ -109,10 +111,22 @@ export const floatingToolbar = (cardOptions, platform, linkPickerOptions) => {
     } : {}; // Applies padding override for when link picker is currently displayed
 
     const className = pluginState.showLinkingToolbar ? FLOATING_TOOLBAR_LINKPICKER_CLASSNAME : undefined;
+    /**
+     * Enable focus trap only if feature flag is enabled AND for the new version of the picker
+     */
+
+    const {
+      lpLinkPicker,
+      lpLinkPickerFocusTrap,
+      preventPopupOverflow
+    } = getFeatureFlags(state);
+    const shouldEnableFocusTrap = lpLinkPicker && lpLinkPickerFocusTrap;
+    const isLinkPickerEnabled = !!lpLinkPicker && !!(linkPickerOptions !== null && linkPickerOptions !== void 0 && (_linkPickerOptions$pl = linkPickerOptions.plugins) !== null && _linkPickerOptions$pl !== void 0 && _linkPickerOptions$pl.length);
     return {
       title: intl.formatMessage(messages.card),
       className,
       nodeType,
+      preventPopupOverflow,
       ...toolbarOffset,
       getDomRef: view => {
         const element = findDomRefAtPos(view.state.selection.from, view.domAtPos.bind(view));
@@ -128,8 +142,9 @@ export const floatingToolbar = (cardOptions, platform, linkPickerOptions) => {
         return element;
       },
       items: generateToolbarItems(state, intl, providerFactory, cardOptions, platform, linkPickerOptions),
-      ...(pluginState.showLinkingToolbar ? editLinkToolbarConfig : {}),
-      scrollable: pluginState.showLinkingToolbar ? false : true
+      scrollable: pluginState.showLinkingToolbar ? false : true,
+      focusTrap: shouldEnableFocusTrap && pluginState.showLinkingToolbar,
+      ...editLinkToolbarConfig(pluginState.showLinkingToolbar, isLinkPickerEnabled)
     };
   };
 };
@@ -213,6 +228,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, platfor
       }]
     }, ...getSettingsButtonGroup(state, intl), {
       id: 'editor.link.delete',
+      focusEditoronEnter: true,
       type: 'button',
       appearance: 'danger',
       icon: RemoveIcon,
@@ -267,6 +283,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, platfor
 const getUnlinkButtonGroup = (state, intl, node, inlineCard) => {
   return node.type === inlineCard ? [{
     id: 'editor.link.unlink',
+    focusEditoronEnter: true,
     type: 'button',
     title: intl.formatMessage(linkToolbarMessages.unlink),
     icon: UnlinkIcon,

package/dist/es2019/plugins/card/ui/EditLinkToolbar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import HyperlinkToolbar from '../../hyperlink/ui/HyperlinkAddToolbar';
 import { showLinkToolbar, hideLinkToolbar } from '../pm-plugins/actions';
 import { addAnalytics } from '../../analytics';
-import { RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '../../../ui/LinkSearch/ToolbarComponents';
+import { LINKPICKER_HEIGHT_IN_PX, RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '../../../ui/LinkSearch/ToolbarComponents';
 import { changeSelectedCardToLink, updateCard } from '../pm-plugins/doc';
 import { findCardInfo, displayInfoForCard } from '../utils';
 import { NodeSelection } from 'prosemirror-state';
@@ -72,8 +72,8 @@ export const buildEditLinkToolbar = ({
 }) => {
   return {
     type: 'custom',
-    fallback: [],
     disableArrowNavigation: true,
+    fallback: [],
     render: (view, idx) => {
       if (!view || !providerFactory) {
         return null;
@@ -106,8 +106,10 @@ export const buildEditLinkToolbar = ({
     }
   };
 };
-export const editLinkToolbarConfig = {
-  height: RECENT_SEARCH_HEIGHT_IN_PX,
-  width: RECENT_SEARCH_WIDTH_IN_PX,
-  forcePlacement: true
+export const editLinkToolbarConfig = (showLinkingToolbar, linkPickerOptions) => {
+  return showLinkingToolbar ? {
+    height: linkPickerOptions ? LINKPICKER_HEIGHT_IN_PX : RECENT_SEARCH_HEIGHT_IN_PX,
+    width: RECENT_SEARCH_WIDTH_IN_PX,
+    forcePlacement: true
+  } : {};
 };

package/dist/es2019/plugins/card/ui/LinkToolbarAppearance.js

@@ -1,17 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
 import PropTypes from 'prop-types';
 import { Fragment } from 'prosemirror-model';
-import { setSelectedCardAppearance, changeSelectedCardToLink } from '../pm-plugins/doc';
+import React from 'react';
+import nodeNames from '../../../messages';
 import { isSupportedInParent } from '../../../utils/nodes';
-import Dropdown from '../../floating-toolbar/ui/Dropdown';
 import { messages } from '../messages';
-import nodeNames from '../../../messages';
-import { getFeatureFlags } from '../../../plugins/feature-flags-context';
-import { LinkToolbarIconDropdown } from './LinkToolbarIconDropdown';
-import { LinkToolbarButtonGroup } from './LinkToolbarButtonGroup';
+import { changeSelectedCardToLink, setSelectedCardAppearance } from '../pm-plugins/doc';
 import { getButtonGroupOption } from './link-toolbar-button-group-options';
-import { getIconDropdownOption } from './link-toolbar-icon-dropdown-options';
+import { LinkToolbarButtonGroup } from './LinkToolbarButtonGroup';
 export class LinkToolbarAppearance extends React.Component {
   constructor(...args) {
     super(...args);
@@ -82,34 +78,9 @@ export class LinkToolbarAppearance extends React.Component {
         options.push(embedOption);
       }
 
-      const {
-        viewChangingExperimentToolbarStyle
-      } = getFeatureFlags(editorState);
-
-      if (viewChangingExperimentToolbarStyle === 'toolbarIcons') {
-        return /*#__PURE__*/React.createElement(LinkToolbarButtonGroup, {
-          key: "link-toolbar-button-group",
-          options: options.map(option => getButtonGroupOption(intl, dispatchCommand, option))
-        });
-      }
-
-      if (viewChangingExperimentToolbarStyle === 'newDropdown') {
-        return /*#__PURE__*/React.createElement(LinkToolbarIconDropdown, {
-          key: "link-toolbar-icon-dropdown",
-          title: "Change view",
-          buttonTestId: "link-toolbar-appearance-button",
-          dispatchCommand: dispatchCommand,
-          options: options.map(option => getIconDropdownOption(intl, dispatchCommand, option))
-        });
-      }
-
-      const title = intl.formatMessage(currentAppearance ? messages[currentAppearance] : messages.url);
-      return /*#__PURE__*/React.createElement(Dropdown, {
-        key: "link-toolbar",
-        buttonTestId: "link-toolbar-appearance-button",
-        title: title,
-        dispatchCommand: dispatchCommand,
-        options: options
+      return /*#__PURE__*/React.createElement(LinkToolbarButtonGroup, {
+        key: "link-toolbar-button-group",
+        options: options.map(option => getButtonGroupOption(intl, dispatchCommand, option))
       });
     });
   }

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

@@ -41,18 +41,31 @@ export const findCardInfo = state => {
   const pluginState = pluginKey.getState(state);
   return pluginState.cards.find(cardInfo => cardInfo.pos === state.selection.from);
 };
-export const transformUnsupportedBlockCardToInline = (slice, state) => {
+export const transformUnsupportedBlockCardToInline = (slice, state, cardOptions) => {
   const {
     blockCard,
     inlineCard
   } = state.schema.nodes;
   const children = [];
   mapChildren(slice.content, (node, i, frag) => {
-    if (node.type === blockCard && !isSupportedInParent(state, frag)) {
+    var _cardOptions$allowBlo;
+
+    if (node.type === blockCard && !isBlockCardSupported(state, frag, (_cardOptions$allowBlo = cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards) !== null && _cardOptions$allowBlo !== void 0 ? _cardOptions$allowBlo : false)) {
       children.push(inlineCard.createChecked(node.attrs, node.content, node.marks));
     } else {
       children.push(node);
     }
   });
   return new Slice(Fragment.fromArray(children), slice.openStart, slice.openEnd);
+};
+/**
+ * Function to determine if a block card is supported by the editor
+ * @param state
+ * @param frag
+ * @param allowBlockCards
+ * @returns
+ */
+
+const isBlockCardSupported = (state, frag, allowBlockCards) => {
+  return allowBlockCards && isSupportedInParent(state, frag);
 };

package/dist/es2019/plugins/code-block/styles.js

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { R75 } from '@atlaskit/theme/colors';
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 import { codeBlockClassNames } from './ui/class-names';
 import { codeBlockSharedStyles } from '@atlaskit/editor-common/styles';
 
@@ -13,7 +12,7 @@ const GutterDangerOverlay = () => css`
     left: 0;
     top: 0;
     width: 24px;
-    background-color: ${token('color.blanket.danger', 'none')};
+    background-color: ${"var(--ds-blanket-danger, none)"};
   }
 `;
 
@@ -44,29 +43,29 @@ export const codeBlockStyles = props => css`
   /* Danger when top level node */
   .ProseMirror .danger.code-block {
     box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
-      ${token('color.border.danger', akEditorDeleteBorder)};
+      ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
 
     .${codeBlockClassNames.gutter} {
-      background-color: ${token('color.background.danger', R75)};
-      color: ${token('color.text.danger', akEditorDeleteIconColor)};
+      background-color: ${`var(--ds-background-danger, ${R75})`};
+      color: ${`var(--ds-text-danger, ${akEditorDeleteIconColor})`};
       ${GutterDangerOverlay()};
     }
 
     .${codeBlockClassNames.content} {
-      background-color: ${token('color.blanket.danger', akEditorDeleteBackground)};
+      background-color: ${`var(--ds-blanket-danger, ${akEditorDeleteBackground})`};
     }
   }
 
   /* Danger when nested node */
   .ProseMirror .danger .code-block {
     .${codeBlockClassNames.gutter} {
-      background-color: ${token('color.background.danger', 'rgba(255, 143, 115, 0.5)')};
-      color: ${token('color.text.danger', akEditorDeleteIconColor)};
+      background-color: ${"var(--ds-background-danger, rgba(255, 143, 115, 0.5))"};
+      color: ${`var(--ds-text-danger, ${akEditorDeleteIconColor})`};
       ${GutterDangerOverlay()};
     }
 
     .${codeBlockClassNames.content} {
-      background-color: ${token('color.blanket.danger', 'rgba(255, 189, 173, 0.5)')};
+      background-color: ${"var(--ds-blanket-danger, rgba(255, 189, 173, 0.5))"};
     }
   }
 `;

package/dist/es2019/plugins/collab-edit/actions.js

@@ -18,7 +18,7 @@ export const handleInit = (initData, view, options) => {
     tr.setMeta('isRemote', true);
     view.dispatch(tr);
   } else if (json) {
-    applyRemoteSteps(json, undefined, view);
+    applyRemoteSteps(json, view);
   }
 };
 export const handleConnection = (connectionData, view) => {
@@ -44,10 +44,10 @@ export const applyRemoteData = (remoteData, view, options) => {
   } = remoteData;
 
   if (json) {
-    applyRemoteSteps(json, userIds, view, options);
+    applyRemoteSteps(json, view, userIds, options);
   }
 };
-export const applyRemoteSteps = (json, userIds, view, options) => {
+export const applyRemoteSteps = (json, view, userIds, options) => {
   if (!json || !json.length) {
     return;
   }

package/dist/es2019/plugins/collab-edit/styles.js

@@ -2,14 +2,13 @@ import { css } from '@emotion/react';
 import { TELEPOINTER_DIM_CLASS } from './plugin-state';
 import { colors } from './utils';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 
 const telepointerColorStyle = (color, index) => `
   &.color-${index} {
     background-color: ${color.selection};
     &::after {
       background-color: ${color.solid};
-      color: ${token('color.text.inverse', '#fff')};
+      color: ${"var(--ds-text-inverse, #fff)"};
       border-color: ${color.solid};
     }
   }
@@ -33,7 +32,7 @@ export const telepointerStyle = css`
       top: -14px;
       font-size: ${relativeFontSizeToBase16(9)};
       padding: 2px;
-      color: ${token('color.text.inverse', 'white')};
+      color: ${"var(--ds-text-inverse, white)"};
       left: -1px;
       border-radius: 2px 2px 2px 0;
       line-height: initial;

package/dist/es2019/plugins/collab-edit/ui/styles.js

@@ -2,9 +2,8 @@ import { css } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N20 } from '@atlaskit/theme/colors';
 import { akEditorSmallZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export const inviteTeamWrapper = css`
-  background: ${token('color.background.neutral', N20)};
+  background: ${`var(--ds-background-neutral, ${N20})`};
   border-radius: 50%;
   min-width: ${gridSize() * 4}px;
   margin-left: -${gridSize() / 2}px;
@@ -38,11 +37,11 @@ export const badge = color => css`
   z-index: ${akEditorSmallZIndex};
   border-radius: 3px;
   background: ${color};
-  color: ${token('color.text.inverse', '#fff')};
+  color: ${"var(--ds-text-inverse, #fff)"};
   font-size: ${relativeFontSizeToBase16(9)};
   line-height: 0;
   padding-top: 7px;
   text-align: center;
-  box-shadow: 0 0 1px ${token('color.border.inverse', '#fff')};
+  box-shadow: 0 0 1px ${"var(--ds-border-inverse, #fff)"};
   box-sizing: border-box;
 `;

package/dist/es2019/plugins/copy-button/toolbar.js

@@ -17,7 +17,9 @@ export function getCopyButtonConfig(options) {
     state,
     formatMessage,
     onMouseEnter,
-    onMouseLeave
+    onMouseLeave,
+    onFocus,
+    onBlur
   } = options;
   const copyButtonState = copyButtonPluginKey.getState(state);
   let buttonActionHandlers;
@@ -28,11 +30,11 @@ export function getCopyButtonConfig(options) {
       // Note for future changes: these two handlers should perform
       // the same action.
       onMouseEnter: onMouseEnter || hoverDecoration(options.nodeType, true, 'ak-editor-selected-node'),
-      onFocus: hoverDecoration(options.nodeType, true, 'ak-editor-selected-node'),
+      onFocus: onFocus || hoverDecoration(options.nodeType, true, 'ak-editor-selected-node'),
       // Note for future changes: these two handlers should perform
       // the same action.
       onMouseLeave: resetCopiedState(options.nodeType, onMouseLeave),
-      onBlur: resetCopiedState(options.nodeType)
+      onBlur: resetCopiedState(options.nodeType, onBlur)
     };
   } else {
     buttonActionHandlers = {

package/dist/es2019/plugins/date/index.js

@@ -6,7 +6,6 @@ import WithPluginState from '../../ui/WithPluginState';
 import { insertDate, closeDatePicker, closeDatePickerWithAnalytics, createDate, deleteDate } from './actions';
 import createDatePlugin from './pm-plugins/main';
 import keymap from './pm-plugins/keymap';
-import { getFeatureFlags } from '../feature-flags-context';
 import { pluginKey as editorDisabledPluginKey } from '../editor-disabled';
 import { IconDate } from '../quick-insert/assets';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD } from '../analytics';
@@ -53,7 +52,6 @@ const datePlugin = () => ({
     popupsScrollableElement
   }) {
     const {
-      state,
       dispatch
     } = editorView;
     const domAtPos = editorView.domAtPos.bind(editorView);
@@ -76,16 +74,11 @@ const datePlugin = () => ({
           focusDateInput
         } = datePlugin;
         const element = findDomRefAtPos(showDatePickerAt, domAtPos);
-        const allFlags = getFeatureFlags(state);
-        const {
-          keyboardAccessibleDatepicker
-        } = allFlags;
         return /*#__PURE__*/React.createElement(DatePicker, {
           mountTo: popupsMountPoint,
           boundariesElement: popupsBoundariesElement,
           scrollableElement: popupsScrollableElement,
           key: showDatePickerAt,
-          showTextField: keyboardAccessibleDatepicker,
           element: element,
           isNew: isNew,
           autoFocus: focusDateInput,

package/dist/es2019/plugins/date/styles.js

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { token } from '@atlaskit/tokens';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const dateStyles = css`
   .${DateSharedCssClassName.DATE_CONTAINER} {
@@ -21,7 +20,7 @@ export const dateStyles = css`
       .${DateSharedCssClassName.DATE_WRAPPER}
       > span {
       box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
-        ${token('color.border.danger', akEditorDeleteBorder)};
+        ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
     }
   }
 `;

package/dist/es2019/plugins/date/ui/DatePicker/index.js

@@ -10,7 +10,6 @@ import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import Calendar from '@atlaskit/calendar';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N60A, N0 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import withOuterListeners from '../../../../ui/with-outer-listeners';
 const PopupWithListeners = withOuterListeners(Popup);
 import { INPUT_METHOD } from '../../../analytics/types/enums';
@@ -19,8 +18,8 @@ import DatePickerInput from './date-picker-input';
 const popupContentWrapper = css`
   padding: 2px;
   border-radius: ${borderRadius()}px;
-  box-shadow: ${token('elevation.shadow.overlay', `0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`)};
-  background-color: ${token('elevation.surface.overlay', N0)};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
+  background-color: ${`var(--ds-surface-overlay, ${N0})`};
 `;
 
 class DatePicker extends React.Component {
@@ -101,7 +100,6 @@ class DatePicker extends React.Component {
       mountTo,
       boundariesElement,
       scrollableElement,
-      showTextField,
       intl,
       dispatchAnalyticsEvent,
       isNew,
@@ -143,7 +141,7 @@ class DatePicker extends React.Component {
       scrollableElement: scrollableElement
     }, jsx("div", {
       css: popupContentWrapper
-    }, showTextField === true && jsx(DatePickerInput, {
+    }, jsx(DatePickerInput, {
       date: date,
       onNewDate: this.handleNewDate,
       onSubmitDate: this.handleKeyboardSubmitDate,

package/dist/es2019/plugins/emoji/index.js

@@ -10,7 +10,6 @@ import { inputRulePlugin as asciiInputRulePlugin } from './pm-plugins/ascii-inpu
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD } from '../analytics';
 import { IconEmoji } from '../quick-insert/assets';
 import { EmojiNodeView } from './nodeviews/emoji';
-import { EmojiContextProvider } from './ui/EmojiContextProvider';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { openTypeAheadAtCursor } from '../type-ahead/transforms/open-typeahead-at-cursor';
 export const emojiToTypeaheadItem = (emoji, emojiProvider) => ({
@@ -22,18 +21,13 @@ export const emojiToTypeaheadItem = (emoji, emojiProvider) => ({
     onClick,
     onHover
   }) {
-    return (
-      /*#__PURE__*/
-      // It's required to pass emojiProvider through the context for custom emojis to work
-      React.createElement(EmojiContextProvider, {
-        emojiProvider: emojiProvider
-      }, /*#__PURE__*/React.createElement(EmojiTypeAheadItem, {
-        emoji: emoji,
-        selected: isSelected,
-        onMouseMove: onHover,
-        onSelection: onClick
-      }))
-    );
+    return /*#__PURE__*/React.createElement(EmojiTypeAheadItem, {
+      emoji: emoji,
+      selected: isSelected,
+      onMouseMove: onHover,
+      onSelection: onClick,
+      emojiProvider: emojiProvider
+    });
   },
 
   emoji

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

@@ -6,11 +6,11 @@ import { setExpandRef } from '../commands';
 import { findExpand } from '../utils';
 import { expandClassNames } from '../ui/class-names';
 import { getPluginState, createPluginState, pluginKey } from './plugin-factory';
+export function containsClass(element, className) {
+  var _element$classList;
 
-function containsClass(element, className) {
-  return !!element && element.classList.contains(className);
+  return Boolean(element === null || element === void 0 ? void 0 : (_element$classList = element.classList) === null || _element$classList === void 0 ? void 0 : _element$classList.contains(className));
 }
-
 export const createPlugin = (dispatch, getIntl, appearance = 'full-page', useLongPressSelection = false) => {
   const state = createPluginState(dispatch, {});
   const isMobile = appearance === 'mobile';

package/dist/es2019/plugins/expand/toolbar.js

@@ -33,6 +33,7 @@ export const getToolbarConfig = (state, {
         id: 'editor.expand.delete',
         type: 'button',
         appearance: 'danger',
+        focusEditoronEnter: true,
         icon: RemoveIcon,
         onClick: deleteExpand(),
         onMouseEnter: hoverDecoration([nestedExpand, expand], true),