@atlaskit/editor-core 176.0.3 → 177.0.1

package/dist/esm/labs/next/full-page.js

@@ -9,7 +9,6 @@ import rafSchedule from 'raf-schd';
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { BaseTheme } from '@atlaskit/editor-common/ui';
 import { akEditorMenuZIndex, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
@@ -36,8 +35,8 @@ var editorContentArea = function editorContentArea(theme) {
   return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  line-height: 24px;\n  height: 100%;\n  width: 100%;\n  max-width: ", "px;\n  padding-top: 50px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding-bottom: 55px;\n\n  & .ProseMirror {\n    flex-grow: 1;\n    box-sizing: border-box;\n  }\n\n  && .ProseMirror {\n    & > * {\n      clear: both;\n    }\n    > p,\n    > ul,\n    > ol,\n    > h1,\n    > h2,\n    > h3,\n    > h4,\n    > h5,\n    > h6 {\n      clear: none;\n    }\n  }\n  ", ";\n"])), theme.layoutMaxWidth + GUTTER_PADDING * 2, tableFullPageEditorStyles);
 };
 
-var mainToolbar = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: 'none';\n\n  transition: box-shadow 200ms;\n  z-index: ", ";\n  display: flex;\n  height: 80px;\n  flex-shrink: 0;\n  background-color: ", ";\n\n  & object {\n    height: 0 !important;\n  }\n"])), akEditorMenuZIndex, token('elevation.surface', 'white'));
-var mainToolbarWithKeyline = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  box-shadow: 0 ", "px 0 0 ", "\n"])), mainToolbar, akEditorToolbarKeylineHeight, token('color.border', N30));
+var mainToolbar = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: 'none';\n\n  transition: box-shadow 200ms;\n  z-index: ", ";\n  display: flex;\n  height: 80px;\n  flex-shrink: 0;\n  background-color: ", ";\n\n  & object {\n    height: 0 !important;\n  }\n"])), akEditorMenuZIndex, "var(--ds-surface, white)");
+var mainToolbarWithKeyline = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  box-shadow: 0 ", "px 0 0 ", "\n"])), mainToolbar, akEditorToolbarKeylineHeight, "var(--ds-border, ".concat(N30, ")"));
 var mainToolbarCustomComponentsSlot = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  flex-grow: 1;\n"])));
 var sidebarArea = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  height: 100%;\n  box-sizing: border-box;\n"])));
 

package/dist/esm/labs/next/presets/mobile.js

@@ -85,8 +85,8 @@ export function useMobilePreset(_ref) {
     allowBlockCards: true,
     platform: 'mobile'
   }]);
-  preset.add([mentionsPlugin]);
-  preset.add([emojiPlugin]); // End
+  preset.add(mentionsPlugin);
+  preset.add(emojiPlugin); // End
 
   if (maxContentSize) {
     preset.add([maxContentSizePlugin, maxContentSize]);

package/dist/esm/labs/next/presets/preset.js

@@ -1,23 +1,46 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _construct from "@babel/runtime/helpers/construct";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 export var Preset = /*#__PURE__*/function () {
   function Preset() {
     _classCallCheck(this, Preset);
 
-    this.plugins = [];
+    for (var _len = arguments.length, more = new Array(_len), _key = 0; _key < _len; _key++) {
+      more[_key] = arguments[_key];
+    }
+
+    this.data = [].concat(more) || [];
   }
 
   _createClass(Preset, [{
     key: "add",
-    value: function add(plugin) {
-      this.plugins.push(plugin);
-      return this;
+    value: function add(nextOrTuple) {
+      var newPreset = _construct(Preset, [nextOrTuple].concat(_toConsumableArray(this.data))); // TODO: remove this `this.data.push`,
+      // once refactoring `create-plugins-list` to address this complexity:
+
+      /**
+       * preset.add(x)
+       * preset.add(y)
+       * preset.add(z)
+       */
+      // to:
+
+      /**
+       * immutablePreset = preset.add(x).add(foo).add(bar)
+       * presetWithY = presetWithY.add(y)
+       * presetWithZ = preset.add(z)
+       */
+
+
+      this.data.push(nextOrTuple);
+      return newPreset;
     }
   }, {
     key: "has",
     value: function has(plugin) {
-      return this.plugins.some(function (pluginPreset) {
+      return this.data.some(function (pluginPreset) {
         if (Array.isArray(pluginPreset)) {
           return pluginPreset[0] === plugin;
         }
@@ -35,7 +58,7 @@ export var Preset = /*#__PURE__*/function () {
     key: "processEditorPlugins",
     value: function processEditorPlugins() {
       var cache = new Map();
-      this.plugins.forEach(function (pluginEntry) {
+      this.data.forEach(function (pluginEntry) {
         if (Array.isArray(pluginEntry)) {
           var _pluginEntry = _slicedToArray(pluginEntry, 2),
               fn = _pluginEntry[0],
@@ -62,6 +85,13 @@ export var Preset = /*#__PURE__*/function () {
       cache.forEach(function (options, fn) {
         plugins.push(fn(options));
       });
+
+      if (plugins.some(function (plugin) {
+        return typeof plugin === 'function';
+      })) {
+        throw new Error("!!! NextEditorPluginWithDependencies detected in presets. That's an unsupported runtime use case right now.");
+      }
+
       return plugins;
     }
   }, {

package/dist/esm/plugins/alignment/ui/ToolbarAlignment/styles.js

@@ -4,8 +4,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export var triggerWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
-export var separator = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), token('color.border', N30));
+export var separator = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), "var(--ds-border, ".concat(N30, ")"));
 export var wrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  div {\n    display: flex;\n  }\n"])));
 export var expandIconWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-left: -8px;\n"])));

package/dist/esm/plugins/annotation/nodeviews/index.js

@@ -43,6 +43,7 @@ export var AnnotationNodeView = /*#__PURE__*/function (_ReactNodeView) {
         /*#__PURE__*/
         // all inline comment states are now set in decorations at ../pm-plugins/inline-comment.ts
         React.createElement("span", {
+          "data-mark-type": "annotation",
           ref: forwardRef
         })
       );

package/dist/esm/plugins/block-type/ui/ToolbarBlockType/index.js

@@ -22,6 +22,7 @@ import { NORMAL_TEXT } from '../../types';
 import { blockTypeMenuItemStyle, keyboardShortcut, keyboardShortcutSelect } from './styled';
 import { tooltip, findKeymapByDescription } from '../../../../keymaps';
 import { BlockTypeButton } from './blocktype-button';
+import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 
 var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(ToolbarBlockType, _React$PureComponent);
@@ -64,16 +65,19 @@ var ToolbarBlockType = /*#__PURE__*/function (_React$PureComponent) {
         var isActive = currentBlockType === blockType;
         var tagName = blockType.tagName || 'p';
         var Tag = tagName;
+        var keyMap = findKeymapByDescription(blockType.title.defaultMessage);
         return {
           content: jsx("div", {
             css: blockTypeMenuItemStyle(tagName, isActive)
           }, jsx(Tag, null, formatMessage(blockType.title))),
           value: blockType,
           label: formatMessage(blockType.title),
+          'aria-label': tooltip(keyMap, formatMessage(blockType.title)),
+          keyShortcuts: getAriaKeyshortcuts(keyMap),
           key: "".concat(blockType.name, "-").concat(index),
           elemAfter: jsx("div", {
             css: [keyboardShortcut, isActive && keyboardShortcutSelect]
-          }, tooltip(findKeymapByDescription(blockType.title.defaultMessage))),
+          }, tooltip(keyMap)),
           isActive: isActive
         };
       });

package/dist/esm/plugins/block-type/ui/ToolbarBlockType/styled.js

@@ -7,13 +7,12 @@ import { css } from '@emotion/react';
 import { N400 } from '@atlaskit/theme/colors';
 import { headingsSharedStyles } from '@atlaskit/editor-common/styles';
 import { shortcutStyle } from '../../../../ui/styles';
-import { token } from '@atlaskit/tokens';
 export var blockTypeMenuItemStyle = function blockTypeMenuItemStyle(tagName, selected) {
   // TEMP FIX: See https://product-fabric.atlassian.net/browse/ED-13878
-  var selectedStyle = selected ? "".concat(tagName, " { color: ").concat(token('color.text', 'white'), " !important; }") : '';
+  var selectedStyle = selected ? "".concat(tagName, " { color: ", "var(--ds-text, white)", " !important; }") : '';
   return function (themeProps) {
     return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", ";\n    > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        margin-top: 0;\n      }\n    }\n    ", ";\n  "])), headingsSharedStyles(themeProps), selectedStyle);
   };
 };
 export var keyboardShortcut = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  margin-left: 16px;\n"])), shortcutStyle);
-export var keyboardShortcutSelect = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), token('color.icon', N400));
+export var keyboardShortcutSelect = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-icon, ".concat(N400, ")"));

package/dist/esm/plugins/breakout/ui/LayoutButton.js

@@ -32,8 +32,8 @@ import { isBreakoutMarkAllowed } from '../utils/is-breakout-mark-allowed';
 import { getPluginState } from '../plugin-key';
 import { NodeSelection } from 'prosemirror-state';
 import { isSupportedNodeForBreakout } from '../utils/is-supported-node';
-import { token } from '@atlaskit/tokens';
-var toolbarButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && button {\n    background: ", ";\n    color: ", ";\n    :hover {\n      background: ", ";\n      color: ", " !important;\n    }\n  }\n"])), token('color.background.neutral', N20A), token('color.icon', N300), token('color.background.neutral.hovered', B300), token('color.icon', 'white'));
+import { layers } from '@atlaskit/theme/constants';
+var toolbarButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && button {\n    background: ", ";\n    color: ", ";\n    :hover {\n      background: ", ";\n      color: ", " !important;\n    }\n  }\n"])), "var(--ds-background-neutral, ".concat(N20A, ")"), "var(--ds-icon, ".concat(N300, ")"), "var(--ds-background-neutral-hovered, ".concat(B300, ")"), "var(--ds-icon, white)");
 var BREAKOUT_MODE = {
   FULL_WIDTH: 'full-width',
   CENTER: 'center',
@@ -124,6 +124,7 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
       var titleMessage = getTitle(breakoutMode);
       var title = formatMessage(titleMessage);
       var nextBreakoutMode = getNextBreakoutMode(breakoutMode);
+      var belowOtherPopupsZIndex = layers.layer() - 1;
       var pluginState = getPluginState(state);
       var element = getBreakoutNodeElement(pluginState, state.selection, editorView);
 
@@ -147,7 +148,8 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,
         stick: true,
-        forcePlacement: true
+        forcePlacement: true,
+        zIndex: belowOtherPopupsZIndex
       }, jsx("div", {
         css: toolbarButtonWrapper
       }, jsx(ToolbarButton, {

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

@@ -5,20 +5,19 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-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.
  */
@@ -215,17 +214,13 @@ export var changeSelectedCardToLink = function changeSelectedCardToLink(text, hr
 
     if (sendAnalytics) {
       if (selectedNode) {
-        var _getFeatureFlags = getFeatureFlags(state),
-            viewChangingExperimentToolbarStyle = _getFeatureFlags.viewChangingExperimentToolbarStyle;
-
         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)
           }
         });
       }
@@ -352,18 +347,13 @@ export var setSelectedCardAppearance = function setSelectedCardAppearance(appear
     var from = state.selection.from;
     var nodeType = getLinkNodeType(appearance, state.schema.nodes);
     var tr = state.tr.setNodeMarkup(from, nodeType, attrs, selectedNode.marks);
-
-    var _getFeatureFlags2 = getFeatureFlags(state),
-        viewChangingExperimentToolbarStyle = _getFeatureFlags2.viewChangingExperimentToolbarStyle;
-
     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/esm/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 var createPlugin = function createPlugin(options) {
   return function (pmPluginFactoryParams) {
@@ -20,18 +19,6 @@ export var createPlugin = function createPlugin(options) {
     return new SafePlugin({
       state: {
         init: function init() {
-          var viewChangingExperimentToolbarStyle = pmPluginFactoryParams.featureFlags.viewChangingExperimentToolbarStyle;
-          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/esm/plugins/card/styles.js

@@ -7,6 +7,5 @@ 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 var FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
-export var smartCardStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n\n    .card {\n      padding-left: 2px;\n      padding-right: 2px;\n      padding-top: 0.5em;\n      padding-bottom: 0.5em;\n      margin-bottom: -0.5em;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px\n          ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n\n  .", " {\n    padding: 0;\n  }\n"])), SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, SmartCardSharedCssClassName.LOADER_WRAPPER, token('color.border.danger', akEditorDeleteBorder), SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, token('color.background.neutral.subtle.hovered', N20), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, token('color.border.danger', akEditorDeleteBorder), SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), token('color.border.danger', akEditorDeleteBorder), token('color.background.danger', akEditorDeleteBackground), token('color.border.danger', akEditorDeleteBorder), FLOATING_TOOLBAR_LINKPICKER_CLASSNAME);
+export var smartCardStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n\n    .card {\n      padding-left: 2px;\n      padding-right: 2px;\n      padding-top: 0.5em;\n      padding-bottom: 0.5em;\n      margin-bottom: -0.5em;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px\n          ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n\n  .", " {\n    padding: 0;\n  }\n"])), SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), FLOATING_TOOLBAR_LINKPICKER_CLASSNAME);

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

@@ -87,6 +87,8 @@ export var openLinkSettings = function openLinkSettings(state, dispatch) {
 };
 export var floatingToolbar = function floatingToolbar(cardOptions, platform, linkPickerOptions) {
   return function (state, intl, providerFactory) {
+    var _linkPickerOptions$pl;
+
     var _state$schema$nodes = state.schema.nodes,
         inlineCard = _state$schema$nodes.inlineCard,
         blockCard = _state$schema$nodes.blockCard,
@@ -112,10 +114,22 @@ export var floatingToolbar = function floatingToolbar(cardOptions, platform, lin
     } : {}; // Applies padding override for when link picker is currently displayed
 
     var className = pluginState.showLinkingToolbar ? FLOATING_TOOLBAR_LINKPICKER_CLASSNAME : undefined;
-    return _objectSpread(_objectSpread(_objectSpread({
+    /**
+     * Enable focus trap only if feature flag is enabled AND for the new version of the picker
+     */
+
+    var _getFeatureFlags = getFeatureFlags(state),
+        lpLinkPicker = _getFeatureFlags.lpLinkPicker,
+        lpLinkPickerFocusTrap = _getFeatureFlags.lpLinkPickerFocusTrap,
+        preventPopupOverflow = _getFeatureFlags.preventPopupOverflow;
+
+    var shouldEnableFocusTrap = lpLinkPicker && lpLinkPickerFocusTrap;
+    var isLinkPickerEnabled = !!lpLinkPicker && !!(linkPickerOptions !== null && linkPickerOptions !== void 0 && (_linkPickerOptions$pl = linkPickerOptions.plugins) !== null && _linkPickerOptions$pl !== void 0 && _linkPickerOptions$pl.length);
+    return _objectSpread(_objectSpread({
       title: intl.formatMessage(messages.card),
       className: className,
-      nodeType: nodeType
+      nodeType: nodeType,
+      preventPopupOverflow: preventPopupOverflow
     }, toolbarOffset), {}, {
       getDomRef: function getDomRef(view) {
         var element = findDomRefAtPos(view.state.selection.from, view.domAtPos.bind(view));
@@ -130,10 +144,10 @@ export var floatingToolbar = function floatingToolbar(cardOptions, platform, lin
 
         return element;
       },
-      items: generateToolbarItems(state, intl, providerFactory, cardOptions, platform, linkPickerOptions)
-    }, pluginState.showLinkingToolbar ? editLinkToolbarConfig : {}), {}, {
-      scrollable: pluginState.showLinkingToolbar ? false : true
-    });
+      items: generateToolbarItems(state, intl, providerFactory, cardOptions, platform, linkPickerOptions),
+      scrollable: pluginState.showLinkingToolbar ? false : true,
+      focusTrap: shouldEnableFocusTrap && pluginState.showLinkingToolbar
+    }, editLinkToolbarConfig(pluginState.showLinkingToolbar, isLinkPickerEnabled));
   };
 };
 
@@ -217,6 +231,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         }]
       }], _toConsumableArray(getSettingsButtonGroup(state, intl)), [{
         id: 'editor.link.delete',
+        focusEditoronEnter: true,
         type: 'button',
         appearance: 'danger',
         icon: RemoveIcon,
@@ -272,6 +287,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
 var getUnlinkButtonGroup = function getUnlinkButtonGroup(state, intl, node, inlineCard) {
   return node.type === inlineCard ? [{
     id: 'editor.link.unlink',
+    focusEditoronEnter: true,
     type: 'button',
     title: intl.formatMessage(linkToolbarMessages.unlink),
     icon: UnlinkIcon,
@@ -282,8 +298,8 @@ var getUnlinkButtonGroup = function getUnlinkButtonGroup(state, intl, node, inli
 };
 
 var getSettingsButtonGroup = function getSettingsButtonGroup(state, intl) {
-  var _getFeatureFlags = getFeatureFlags(state),
-      floatingToolbarLinkSettingsButton = _getFeatureFlags.floatingToolbarLinkSettingsButton;
+  var _getFeatureFlags2 = getFeatureFlags(state),
+      floatingToolbarLinkSettingsButton = _getFeatureFlags2.floatingToolbarLinkSettingsButton;
 
   return floatingToolbarLinkSettingsButton === 'true' ? [{
     id: 'editor.link.settings',

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

@@ -12,7 +12,7 @@ import React from 'react';
 import HyperlinkToolbar from '../../hyperlink/ui/HyperlinkAddToolbar';
 import { showLinkToolbar, hideLinkToolbar as _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';
@@ -97,8 +97,8 @@ export var buildEditLinkToolbar = function buildEditLinkToolbar(_ref) {
       linkPicker = _ref.linkPicker;
   return {
     type: 'custom',
-    fallback: [],
     disableArrowNavigation: true,
+    fallback: [],
     render: function render(view, idx) {
       if (!view || !providerFactory) {
         return null;
@@ -131,8 +131,10 @@ export var buildEditLinkToolbar = function buildEditLinkToolbar(_ref) {
     }
   };
 };
-export var editLinkToolbarConfig = {
-  height: RECENT_SEARCH_HEIGHT_IN_PX,
-  width: RECENT_SEARCH_WIDTH_IN_PX,
-  forcePlacement: true
+export var editLinkToolbarConfig = function 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/esm/plugins/card/ui/LinkToolbarAppearance.js

@@ -10,19 +10,15 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-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 var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
   _inherits(LinkToolbarAppearance, _React$Component);
 
@@ -106,37 +102,11 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
         options.push(embedOption);
       }
 
-      var _getFeatureFlags = getFeatureFlags(editorState),
-          viewChangingExperimentToolbarStyle = _getFeatureFlags.viewChangingExperimentToolbarStyle;
-
-      if (viewChangingExperimentToolbarStyle === 'toolbarIcons') {
-        return /*#__PURE__*/React.createElement(LinkToolbarButtonGroup, {
-          key: "link-toolbar-button-group",
-          options: options.map(function (option) {
-            return 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(function (option) {
-            return getIconDropdownOption(intl, dispatchCommand, option);
-          })
-        });
-      }
-
-      var 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(function (option) {
+          return getButtonGroupOption(intl, dispatchCommand, option);
+        })
       });
     });
 

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

@@ -45,17 +45,30 @@ export var findCardInfo = function findCardInfo(state) {
     return cardInfo.pos === state.selection.from;
   });
 };
-export var transformUnsupportedBlockCardToInline = function transformUnsupportedBlockCardToInline(slice, state) {
+export var transformUnsupportedBlockCardToInline = function transformUnsupportedBlockCardToInline(slice, state, cardOptions) {
   var _state$schema$nodes = state.schema.nodes,
       blockCard = _state$schema$nodes.blockCard,
       inlineCard = _state$schema$nodes.inlineCard;
   var children = [];
   mapChildren(slice.content, function (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
+ */
+
+var isBlockCardSupported = function isBlockCardSupported(state, frag, allowBlockCards) {
+  return allowBlockCards && isSupportedInParent(state, frag);
 };

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

@@ -5,14 +5,13 @@ var _templateObject, _templateObject2;
 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';
 
 var GutterDangerOverlay = function GutterDangerOverlay() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &::after {\n    height: 100%;\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 24px;\n    background-color: ", ";\n  }\n"])), token('color.blanket.danger', 'none'));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &::after {\n    height: 100%;\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 24px;\n    background-color: ", ";\n  }\n"])), "var(--ds-blanket-danger, none)");
 };
 
 export var codeBlockStyles = function codeBlockStyles(props) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", "\n  }\n\n  .ProseMirror li {\n    /* if same list item has multiple code blocks we need top margin for all but first */\n    > .code-block {\n      margin: ", " 0 0 0;\n    }\n    > .code-block:first-child,\n    > .ProseMirror-gapcursor:first-child + .code-block {\n      margin-top: 0;\n    }\n\n    > div:last-of-type.code-block {\n      margin-bottom: ", ";\n    }\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px\n      ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n      ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: ", ";\n      color: ", ";\n      ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n"])), codeBlockSharedStyles(props), blockNodesVerticalMargin, blockNodesVerticalMargin, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, token('color.border.danger', akEditorDeleteBorder), codeBlockClassNames.gutter, token('color.background.danger', R75), token('color.text.danger', akEditorDeleteIconColor), GutterDangerOverlay(), codeBlockClassNames.content, token('color.blanket.danger', akEditorDeleteBackground), codeBlockClassNames.gutter, token('color.background.danger', 'rgba(255, 143, 115, 0.5)'), token('color.text.danger', akEditorDeleteIconColor), GutterDangerOverlay(), codeBlockClassNames.content, token('color.blanket.danger', 'rgba(255, 189, 173, 0.5)'));
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", "\n  }\n\n  .ProseMirror li {\n    /* if same list item has multiple code blocks we need top margin for all but first */\n    > .code-block {\n      margin: ", " 0 0 0;\n    }\n    > .code-block:first-child,\n    > .ProseMirror-gapcursor:first-child + .code-block {\n      margin-top: 0;\n    }\n\n    > div:last-of-type.code-block {\n      margin-bottom: ", ";\n    }\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px\n      ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n      ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: ", ";\n      color: ", ";\n      ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n"])), codeBlockSharedStyles(props), blockNodesVerticalMargin, blockNodesVerticalMargin, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), codeBlockClassNames.gutter, "var(--ds-background-danger, ".concat(R75, ")"), "var(--ds-text-danger, ".concat(akEditorDeleteIconColor, ")"), GutterDangerOverlay(), codeBlockClassNames.content, "var(--ds-blanket-danger, ".concat(akEditorDeleteBackground, ")"), codeBlockClassNames.gutter, "var(--ds-background-danger, rgba(255, 143, 115, 0.5))", "var(--ds-text-danger, ".concat(akEditorDeleteIconColor, ")"), GutterDangerOverlay(), codeBlockClassNames.content, "var(--ds-blanket-danger, rgba(255, 189, 173, 0.5))");
 };

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

@@ -15,7 +15,7 @@ export var handleInit = function handleInit(initData, view, options) {
     tr.setMeta('isRemote', true);
     view.dispatch(tr);
   } else if (json) {
-    applyRemoteSteps(json, undefined, view);
+    applyRemoteSteps(json, view);
   }
 };
 export var handleConnection = function handleConnection(connectionData, view) {
@@ -32,10 +32,10 @@ export var applyRemoteData = function applyRemoteData(remoteData, view, options)
       userIds = _remoteData$userIds === void 0 ? [] : _remoteData$userIds;
 
   if (json) {
-    applyRemoteSteps(json, userIds, view, options);
+    applyRemoteSteps(json, view, userIds, options);
   }
 };
-export var applyRemoteSteps = function applyRemoteSteps(json, userIds, view, options) {
+export var applyRemoteSteps = function applyRemoteSteps(json, view, userIds, options) {
   if (!json || !json.length) {
     return;
   }

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

@@ -6,12 +6,11 @@ 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';
 
 var telepointerColorStyle = function telepointerColorStyle(color, index) {
-  return "\n  &.color-".concat(index, " {\n    background-color: ").concat(color.selection, ";\n    &::after {\n      background-color: ").concat(color.solid, ";\n      color: ").concat(token('color.text.inverse', '#fff'), ";\n      border-color: ").concat(color.solid, ";\n    }\n  }\n");
+  return "\n  &.color-".concat(index, " {\n    background-color: ").concat(color.selection, ";\n    &::after {\n      background-color: ").concat(color.solid, ";\n      color: ", "var(--ds-text-inverse, #fff)", ";\n      border-color: ").concat(color.solid, ";\n    }\n  }\n");
 };
 
-export var telepointerStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror .telepointer {\n    position: relative;\n    transition: opacity 200ms;\n\n    &.telepointer-selection {\n      line-height: 1.2;\n      pointer-events: none;\n      user-select: none;\n    }\n\n    &.telepointer-selection-badge::after {\n      content: attr(data-initial);\n      position: absolute;\n      display: block;\n      top: -14px;\n      font-size: ", ";\n      padding: 2px;\n      color: ", ";\n      left: -1px;\n      border-radius: 2px 2px 2px 0;\n      line-height: initial;\n    }\n\n    &.", " {\n      opacity: 0.2;\n    }\n\n    ", ";\n  }\n"])), relativeFontSizeToBase16(9), token('color.text.inverse', 'white'), TELEPOINTER_DIM_CLASS, colors.map(function (color, index) {
+export var telepointerStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror .telepointer {\n    position: relative;\n    transition: opacity 200ms;\n\n    &.telepointer-selection {\n      line-height: 1.2;\n      pointer-events: none;\n      user-select: none;\n    }\n\n    &.telepointer-selection-badge::after {\n      content: attr(data-initial);\n      position: absolute;\n      display: block;\n      top: -14px;\n      font-size: ", ";\n      padding: 2px;\n      color: ", ";\n      left: -1px;\n      border-radius: 2px 2px 2px 0;\n      line-height: initial;\n    }\n\n    &.", " {\n      opacity: 0.2;\n    }\n\n    ", ";\n  }\n"])), relativeFontSizeToBase16(9), "var(--ds-text-inverse, white)", TELEPOINTER_DIM_CLASS, colors.map(function (color, index) {
   return telepointerColorStyle(color, index);
 }));