@atlaskit/editor-core 176.0.3 → 177.0.1

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

@@ -25,8 +25,6 @@ var _main = _interopRequireDefault(require("./pm-plugins/main"));
 
 var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
 
-var _featureFlagsContext = require("../feature-flags-context");
-
 var _editorDisabled = require("../editor-disabled");
 
 var _assets = require("../quick-insert/assets");
@@ -84,8 +82,7 @@ var datePlugin = function datePlugin() {
           popupsMountPoint = _ref.popupsMountPoint,
           popupsBoundariesElement = _ref.popupsBoundariesElement,
           popupsScrollableElement = _ref.popupsScrollableElement;
-      var state = editorView.state,
-          dispatch = editorView.dispatch;
+      var dispatch = editorView.dispatch;
       var domAtPos = editorView.domAtPos.bind(editorView);
       return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
         plugins: {
@@ -104,14 +101,11 @@ var datePlugin = function datePlugin() {
               isNew = datePlugin.isNew,
               focusDateInput = datePlugin.focusDateInput;
           var element = (0, _prosemirrorUtils.findDomRefAtPos)(showDatePickerAt, domAtPos);
-          var allFlags = (0, _featureFlagsContext.getFeatureFlags)(state);
-          var keyboardAccessibleDatepicker = allFlags.keyboardAccessibleDatepicker;
           return /*#__PURE__*/_react.default.createElement(DatePicker, {
             mountTo: popupsMountPoint,
             boundariesElement: popupsBoundariesElement,
             scrollableElement: popupsScrollableElement,
             key: showDatePickerAt,
-            showTextField: keyboardAccessibleDatepicker,
             element: element,
             isNew: isNew,
             autoFocus: focusDateInput,

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

@@ -13,11 +13,9 @@ var _react = require("@emotion/react");
 
 var _styles = require("@atlaskit/editor-common/styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject;
 
-var dateStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    .", " {\n      line-height: initial;\n      cursor: pointer;\n    }\n\n    &.", " {\n      .", " > span {\n        ", "\n      }\n    }\n  }\n\n  .danger {\n    .", ".", "\n      .", "\n      > span {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n    }\n  }\n"])), _styles.DateSharedCssClassName.DATE_CONTAINER, _styles.DateSharedCssClassName.DATE_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.DateSharedCssClassName.DATE_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.DateSharedCssClassName.DATE_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.DateSharedCssClassName.DATE_WRAPPER, _editorSharedStyles.akEditorSelectedBorderSize, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder));
+var dateStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    .", " {\n      line-height: initial;\n      cursor: pointer;\n    }\n\n    &.", " {\n      .", " > span {\n        ", "\n      }\n    }\n  }\n\n  .danger {\n    .", ".", "\n      .", "\n      > span {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n    }\n  }\n"])), _styles.DateSharedCssClassName.DATE_CONTAINER, _styles.DateSharedCssClassName.DATE_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.DateSharedCssClassName.DATE_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.DateSharedCssClassName.DATE_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.DateSharedCssClassName.DATE_WRAPPER, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"));
 exports.dateStyles = dateStyles;

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

@@ -41,8 +41,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _withOuterListeners = _interopRequireDefault(require("../../../../ui/with-outer-listeners"));
 
 var _enums = require("../../../analytics/types/enums");
@@ -58,7 +56,7 @@ 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; } }
 
 var PopupWithListeners = (0, _withOuterListeners.default)(_ui.Popup);
-var popupContentWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 2px;\n  border-radius: ", "px;\n  box-shadow: ", ";\n  background-color: ", ";\n"])), (0, _constants.borderRadius)(), (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A)), (0, _tokens.token)('elevation.surface.overlay', _colors.N0));
+var popupContentWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 2px;\n  border-radius: ", "px;\n  box-shadow: ", ";\n  background-color: ", ";\n"])), (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"));
 
 var DatePicker = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(DatePicker, _React$Component);
@@ -143,7 +141,6 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
           mountTo = _this$props.mountTo,
           boundariesElement = _this$props.boundariesElement,
           scrollableElement = _this$props.scrollableElement,
-          showTextField = _this$props.showTextField,
           intl = _this$props.intl,
           dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent,
           isNew = _this$props.isNew,
@@ -181,7 +178,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
         scrollableElement: scrollableElement
       }, (0, _react2.jsx)("div", {
         css: popupContentWrapper
-      }, showTextField === true && (0, _react2.jsx)(_datePickerInput.default, {
+      }, (0, _react2.jsx)(_datePickerInput.default, {
         date: date,
         onNewDate: this.handleNewDate,
         onSubmitDate: this.handleKeyboardSubmitDate,

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

@@ -38,8 +38,6 @@ var _assets = require("../quick-insert/assets");
 
 var _emoji3 = require("./nodeviews/emoji");
 
-var _EmojiContextProvider = require("./ui/EmojiContextProvider");
-
 var _messages = require("../insert-block/ui/ToolbarInsertBlock/messages");
 
 var _openTypeaheadAtCursor = require("../type-ahead/transforms/open-typeahead-at-cursor");
@@ -56,18 +54,13 @@ var emojiToTypeaheadItem = function emojiToTypeaheadItem(emoji, emojiProvider) {
       var isSelected = _ref.isSelected,
           onClick = _ref.onClick,
           onHover = _ref.onHover;
-      return (
-        /*#__PURE__*/
-        // It's required to pass emojiProvider through the context for custom emojis to work
-        _react.default.createElement(_EmojiContextProvider.EmojiContextProvider, {
-          emojiProvider: emojiProvider
-        }, /*#__PURE__*/_react.default.createElement(_emoji2.EmojiTypeAheadItem, {
-          emoji: emoji,
-          selected: isSelected,
-          onMouseMove: onHover,
-          onSelection: onClick
-        }))
-      );
+      return /*#__PURE__*/_react.default.createElement(_emoji2.EmojiTypeAheadItem, {
+        emoji: emoji,
+        selected: isSelected,
+        onMouseMove: onHover,
+        onSelection: onClick,
+        emojiProvider: emojiProvider
+      });
     },
     emoji: emoji
   };

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

@@ -5,6 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.containsClass = containsClass;
 exports.createPlugin = void 0;
 
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
@@ -24,7 +25,9 @@ var _classNames = require("../ui/class-names");
 var _pluginFactory = require("./plugin-factory");
 
 function containsClass(element, className) {
-  return !!element && element.classList.contains(className);
+  var _element$classList;
+
+  return Boolean(element === null || element === void 0 ? void 0 : (_element$classList = element.classList) === null || _element$classList === void 0 ? void 0 : _element$classList.contains(className));
 }
 
 var createPlugin = function createPlugin(dispatch, getIntl) {

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

@@ -47,6 +47,7 @@ var getToolbarConfig = function getToolbarConfig(state, _ref) {
         id: 'editor.expand.delete',
         type: 'button',
         appearance: 'danger',
+        focusEditoronEnter: true,
         icon: _remove.default,
         onClick: (0, _commands.deleteExpand)(),
         onMouseEnter: (0, _decoration.hoverDecoration)([nestedExpand, expand], true),

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

@@ -17,8 +17,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -30,35 +28,35 @@ var _classNames = require("./class-names");
 var _templateObject, _templateObject2;
 
 var EXPAND_SELECTED_BACKGROUND = (0, _components.themed)({
-  light: (0, _tokens.token)('color.background.neutral.subtle', 'rgba(255, 255, 255, 0.6)'),
-  dark: (0, _tokens.token)('color.background.neutral.subtle', 'rgba(9, 10, 11, 0.29)')
+  light: "var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0.6))",
+  dark: "var(--ds-background-neutral-subtle, rgba(9, 10, 11, 0.29))"
 });
 
 var EXPAND_ICON_COLOR = function EXPAND_ICON_COLOR(props) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _components.themed)({
-    light: (0, _tokens.token)('color.icon.subtle', _colors.N80A),
-    dark: (0, _tokens.token)('color.icon.subtle', '#d9dde3')
+    light: "var(--ds-icon-subtle, ".concat(_colors.N80A, ")"),
+    dark: "var(--ds-icon-subtle, #d9dde3)"
   })(props));
 };
 
 var ACTIVE_STATE_BACKGROUND_COLOR = (0, _components.themed)({
-  dark: (0, _tokens.token)('color.blanket.selected', "#0C294F4B")
+  dark: "var(--ds-blanket-selected, ".concat("#0C294F4B", ")")
 });
 var ACTIVE_STATE_BORDER = (0, _components.themed)({
-  dark: "1px solid ".concat((0, _tokens.token)('color.border.selected', "#4794ff4B"))
+  dark: "1px solid ".concat("var(--ds-border-selected, ".concat("#4794ff4B", ")"))
 });
 var ACTIVE_STATE_BORDER_RADIUS = (0, _components.themed)({
   dark: '3px'
 });
 var DANGER_STATE_BACKGROUND_COLOR = (0, _components.themed)({
-  light: (0, _tokens.token)('color.background.danger', _colors.R50),
-  dark: (0, _tokens.token)('color.background.danger', '#441C13')
+  light: "var(--ds-background-danger, ".concat(_colors.R50, ")"),
+  dark: "var(--ds-background-danger, #441C13)"
 });
 var DANGER_STATE_BORDER = (0, _components.themed)({
-  dark: "1px solid ".concat((0, _tokens.token)('color.border.danger', _colors.R200))
+  dark: "1px solid ".concat("var(--ds-border-danger, ".concat(_colors.R200, ")"))
 });
 var DANGER_STATE_BORDER_COLOR = (0, _components.themed)({
-  light: (0, _tokens.token)('color.border.danger', _colors.R300)
+  light: "var(--ds-border-danger, ".concat(_colors.R300, ")")
 });
 var DANGER_STATE_BORDER_RADIUS = (0, _components.themed)({
   dark: '3px'
@@ -72,11 +70,11 @@ var expandStyles = function expandStyles(props) {
     expanded: false,
     focused: false
   })(props), _classNames.expandClassNames.titleInput, _ui.sharedExpandStyles.titleInputStyles(props), _classNames.expandClassNames.titleContainer, _ui.sharedExpandStyles.titleContainerStyles(props), _classNames.expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND(props), (0, _components.themed)({
-    light: (0, _tokens.token)('color.border', _colors.N40A),
-    dark: (0, _tokens.token)('color.border', _colors.DN50)
+    light: "var(--ds-border, ".concat(_colors.N40A, ")"),
+    dark: "var(--ds-border, ".concat(_colors.DN50, ")")
   })(props), _classNames.expandClassNames.content, (0, _constants.gridSize)(), _classNames.expandClassNames.inputContainer, _classNames.expandClassNames.prefix, _classNames.expandClassNames.expanded, _classNames.expandClassNames.prefix, _classNames.expandClassNames.expanded, _classNames.expandClassNames.iconContainer, EXPAND_ICON_COLOR(props), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _components.themed)({
-    light: (0, _tokens.token)('color.border', _colors.N50A),
-    dark: (0, _tokens.token)('color.border', _colors.DN50)
+    light: "var(--ds-border, ".concat(_colors.N50A, ")"),
+    dark: "var(--ds-border, ".concat(_colors.DN50, ")")
   })(props), EXPAND_SELECTED_BACKGROUND(props));
 };
 

package/dist/cjs/plugins/extension/commands.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeExtension = exports.forceAutoSave = exports.clearEditingContext = void 0;
+exports.removeExtension = exports.removeDescendantNodes = exports.forceAutoSave = exports.clearEditingContext = void 0;
 exports.setEditingContextToContextPanel = setEditingContextToContextPanel;
 exports.updateExtensionLayout = exports.showContextPanel = void 0;
 exports.updateState = updateState;
@@ -20,6 +20,8 @@ var _pluginFactory = require("./plugin-factory");
 
 var _utils = require("./utils");
 
+var _utils2 = require("@atlaskit/editor-common/utils");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 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) { (0, _defineProperty2.default)(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; }
@@ -109,4 +111,17 @@ var removeExtension = function removeExtension() {
   });
 };
 
-exports.removeExtension = removeExtension;
+exports.removeExtension = removeExtension;
+
+var removeDescendantNodes = function removeDescendantNodes(sourceNode) {
+  return (0, _pluginFactory.createCommand)({
+    type: 'UPDATE_STATE',
+    data: {
+      element: undefined
+    }
+  }, function (tr, state) {
+    return sourceNode ? (0, _utils2.removeConnectedNodes)(state, sourceNode) : tr;
+  });
+};
+
+exports.removeDescendantNodes = removeDescendantNodes;

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

@@ -327,6 +327,16 @@ var createPlugin = function createPlugin(dispatch, providerFactory, extensionHan
           if (!selectedExtension) {
             if (showContextPanel) {
               (0, _commands.clearEditingContext)(state, dispatch);
+            } // if an extension is no longer selected, but the plugin has cached the previous selected extension id/ref
+            // then this should clear those values so that if an exention is selected again, then this sees it as a change
+            // and updates the state correctly.
+
+
+            if (!!localId || !!element) {
+              (0, _commands.updateState)({
+                localId: undefined,
+                element: undefined
+              })(state, dispatch);
             }
 
             return;

package/dist/cjs/plugins/extension/toolbar.js

@@ -45,15 +45,25 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Edit',
     description: 'Edit the properties for this extension.'
   },
+  deleteElementTitle: {
+    id: 'fabric.editor.extension.deleteElementTitle',
+    defaultMessage: 'Delete element',
+    description: 'Title text for confirm modal when deleting an extension linked to a data consumer.'
+  },
   confirmDeleteLinkedModalOKButton: {
     id: 'fabric.editor.extension.confirmDeleteLinkedModalOKButton',
-    defaultMessage: 'Remove extension',
+    defaultMessage: 'Delete',
     description: 'Action button label for confirm modal when deleting an extension linked to a data consumer.'
   },
   confirmDeleteLinkedModalMessage: {
     id: 'fabric.editor.extension.confirmDeleteLinkedModalMessage',
-    defaultMessage: 'Removing this extension will break anything connected to it.',
+    defaultMessage: 'Deleting {nodeName} will break anything connected to it.',
     description: 'Message for confirm modal when deleting a extension linked to an data consumer.'
+  },
+  confirmModalCheckboxLabel: {
+    id: 'fabric.editor.floatingToolbar.confirmModalCheckboxLabel',
+    defaultMessage: 'Also delete connected elements',
+    description: 'checkbox label text'
   }
 });
 exports.messages = messages;
@@ -127,7 +137,8 @@ var editButton = function editButton(formatMessage, extensionState) {
       return true;
     },
     title: formatMessage(messages.edit),
-    tabIndex: null
+    tabIndex: null,
+    focusEditoronEnter: true
   }];
 };
 
@@ -146,9 +157,23 @@ var getToolbarConfig = function getToolbarConfig() {
       var confirmDialog;
 
       if ((0, _utils2.isReferencedSource)(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)) {
-        confirmDialog = {
-          okButtonLabel: formatMessage(messages.confirmDeleteLinkedModalOKButton),
-          message: formatMessage(messages.confirmDeleteLinkedModalMessage)
+        confirmDialog = function confirmDialog() {
+          return {
+            title: formatMessage(messages.deleteElementTitle),
+            okButtonLabel: formatMessage(messages.confirmDeleteLinkedModalOKButton),
+            message: formatMessage(messages.confirmDeleteLinkedModalMessage, {
+              nodeName: (0, _utils2.getNodeName)(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)
+            }),
+            isReferentialityDialog: true,
+            getChildrenInfo: function getChildrenInfo() {
+              return (0, _utils2.getChildrenInfo)(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node);
+            },
+            checkboxLabel: formatMessage(messages.confirmModalCheckboxLabel),
+            onConfirm: function onConfirm() {
+              var isChecked = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+              return clickWithCheckboxHandler(isChecked, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node);
+            }
+          };
         };
       }
 
@@ -183,6 +208,7 @@ var getToolbarConfig = function getToolbarConfig() {
           onMouseLeave: (0, _decoration.hoverDecoration)(nodeType, false),
           onFocus: (0, _decoration.hoverDecoration)(nodeType, true),
           onBlur: (0, _decoration.hoverDecoration)(nodeType, false),
+          focusEditoronEnter: true,
           title: formatMessage(_messages.default.remove),
           tabIndex: null,
           confirmDialog: confirmDialog
@@ -195,4 +221,20 @@ var getToolbarConfig = function getToolbarConfig() {
   };
 };
 
-exports.getToolbarConfig = getToolbarConfig;
+exports.getToolbarConfig = getToolbarConfig;
+
+var clickWithCheckboxHandler = function clickWithCheckboxHandler(isChecked, node) {
+  return function (state, dispatch) {
+    if (!node) {
+      return false;
+    }
+
+    if (!isChecked) {
+      (0, _commands.removeExtension)()(state, dispatch);
+    } else {
+      (0, _commands.removeDescendantNodes)(node)(state, dispatch);
+    }
+
+    return true;
+  };
+};

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

@@ -19,8 +19,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _styles = require("../styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var widerLayoutClassName = 'wider-layout';
@@ -36,11 +34,11 @@ exports.header = header;
 
 var content = function content(theme) {
   return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px;\n  background: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  cursor: initial;\n"])), _styles.padding, (0, _components.themed)({
-    light: (0, _tokens.token)('elevation.surface', 'white'),
-    dark: (0, _tokens.token)('elevation.surface', _colors.DN30)
+    light: "var(--ds-surface, white)",
+    dark: "var(--ds-surface, ".concat(_colors.DN30, ")")
   })(theme), (0, _components.themed)({
-    dark: (0, _tokens.token)('color.text', _colors.DN900)
-  })(theme), (0, _tokens.token)('color.border', _colors.N30), (0, _constants.borderRadius)());
+    dark: "var(--ds-text, ".concat(_colors.DN900, ")")
+  })(theme), "var(--ds-border, ".concat(_colors.N30, ")"), (0, _constants.borderRadius)());
 };
 
 exports.content = content;

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

@@ -15,12 +15,10 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _styles = require("../styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
 var wrapperStyle = function wrapperStyle(theme) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  cursor: pointer;\n  display: inline-flex;\n  margin: 1px 1px 4px;\n\n  > img {\n    border-radius: ", "px;\n  }\n\n  &::after,\n  &::before {\n    vertical-align: text-top;\n    display: inline-block;\n    width: 1px;\n    content: '';\n  }\n\n  &.with-children {\n    padding: 0;\n    background: ", ";\n  }\n"])), (0, _styles.wrapperDefault)(theme), (0, _constants.borderRadius)(), (0, _tokens.token)('color.background.neutral.subtle', 'white'));
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  cursor: pointer;\n  display: inline-flex;\n  margin: 1px 1px 4px;\n\n  > img {\n    border-radius: ", "px;\n  }\n\n  &::after,\n  &::before {\n    vertical-align: text-top;\n    display: inline-block;\n    width: 1px;\n    content: '';\n  }\n\n  &.with-children {\n    padding: 0;\n    background: ", ";\n  }\n"])), (0, _styles.wrapperDefault)(theme), (0, _constants.borderRadius)(), "var(--ds-background-neutral-subtle, white)");
 };
 
 exports.wrapperStyle = wrapperStyle;

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

@@ -30,19 +30,17 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _styles = require("@atlaskit/editor-common/styles");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 var wrapperDefault = function wrapperDefault(theme) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", "px;\n  color: ", ";\n  position: relative;\n  vertical-align: middle;\n\n  .ProseMirror-selectednode > span > & > .extension-overlay {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    opacity: 1;\n  }\n\n  &.with-overlay {\n    .extension-overlay {\n      background: ", ";\n      color: transparent;\n    }\n\n    &:hover .extension-overlay {\n      opacity: 1;\n    }\n  }\n"])), (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.neutral', _colors.N20),
-    dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
+    light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
   })(theme), (0, _constants.borderRadius)(), (0, _components.themed)({
-    dark: (0, _tokens.token)('color.text', _colors.DN700)
-  })(theme), (0, _tokens.token)('color.border.selected', _colors.B200), (0, _tokens.token)('color.background.neutral.hovered', _colors.N20A));
+    dark: "var(--ds-text, ".concat(_colors.DN700, ")")
+  })(theme), "var(--ds-border-selected, ".concat(_colors.B200, ")"), "var(--ds-background-neutral-hovered, ".concat(_colors.N20A, ")"));
 };
 
 exports.wrapperDefault = wrapperDefault;
@@ -50,7 +48,7 @@ var overlay = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _tagge
 exports.overlay = overlay;
 var placeholderFallback = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: center;\n\n  & > img {\n    margin: 0 4px;\n  }\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: placeholder-fallback;\n"])));
 exports.placeholderFallback = placeholderFallback;
-var placeholderFallbackParams = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  max-width: 200px;\n  margin-left: 5px;\n  color: ", ";\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N70));
+var placeholderFallbackParams = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  max-width: 200px;\n  margin-left: 5px;\n  color: ", ";\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N70, ")"));
 exports.placeholderFallbackParams = placeholderFallbackParams;
 var styledImage = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  max-height: 16px;\n  max-width: 16px;\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: lozenge-image;\n"])));
 exports.styledImage = styledImage;

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

@@ -23,14 +23,12 @@ var _reactIntlNext = require("react-intl-next");
 
 var _messages = require("./messages");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject, _templateObject2, _templateObject3;
 
 var noop = function noop() {};
 
 var saveIndicatorWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n"])));
-var saveIndicatorContent = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  width: 256px;\n  bottom: 20px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 6px 12px;\n\n  background: ", ";\n\n  /* E300 */\n  box-shadow: ", ";\n  border-radius: 16px;\n"])), (0, _tokens.token)('elevation.surface.overlay', _colors.N0), (0, _tokens.token)('elevation.shadow.overlay', "0px 8px 12px rgba(9, 30, 66, 0.15), 0px 0px 1px rgba(9, 30, 66, 0.31)"));
+var saveIndicatorContent = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  width: 256px;\n  bottom: 20px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 6px 12px;\n\n  background: ", ";\n\n  /* E300 */\n  box-shadow: ", ";\n  border-radius: 16px;\n"])), "var(--ds-surface-overlay, ".concat(_colors.N0, ")"), "var(--ds-shadow-overlay, ".concat("0px 8px 12px rgba(9, 30, 66, 0.15), 0px 0px 1px rgba(9, 30, 66, 0.31)", ")"));
 var saveIndicatorText = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: 6px;\n"])));
 
 var SaveIndicator = function SaveIndicator(_ref) {
@@ -71,7 +69,7 @@ var SaveIndicator = function SaveIndicator(_ref) {
     "data-testid": "save-indicator-content"
   }, (0, _react2.jsx)(_checkCircle.default, {
     label: "Saving",
-    primaryColor: (0, _tokens.token)('color.icon.success', _colors.G300),
+    primaryColor: "var(--ds-icon-success, ".concat(_colors.G300, ")"),
     size: "small"
   }), (0, _react2.jsx)("span", {
     css: saveIndicatorText

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

@@ -13,9 +13,7 @@ var _react = require("@emotion/react");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
-var extensionStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .extensionView-content-wrap,\n  .bodiedExtensionView-content-wrap {\n    margin: ", " 0;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    &:not(.danger).", " {\n      & > span > .extension-container {\n        ", "\n      }\n    }\n\n    &.danger > span > .extension-container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n\n    &.inline {\n      word-wrap: break-all;\n    }\n  }\n\n  .extensionView-content-wrap .extension-container {\n    overflow: hidden;\n  }\n\n  .bodiedExtensionView-content-wrap\n    .extensionView-content-wrap\n    .extension-container {\n    width: 100%;\n    max-width: 100%; // ensure width can't go over 100%;\n  }\n\n  [data-mark-type='fragment'] {\n    & > .extensionView-content-wrap,\n    & > .bodiedExtensionView-content-wrap {\n      margin: ", " 0;\n    }\n\n    & > [data-mark-type='dataConsumer'] {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin: ", " 0;\n      }\n    }\n\n    &:first-child {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-top: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-top: 0;\n        }\n      }\n    }\n\n    &:nth-last-of-type(-n + 2):not(:first-of-type) {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-bottom: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-bottom: 0;\n        }\n      }\n    }\n  }\n"])), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedBorderSize, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin);
+var extensionStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .extensionView-content-wrap,\n  .bodiedExtensionView-content-wrap {\n    margin: ", " 0;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    &:not(.danger).", " {\n      & > span > .extension-container {\n        ", "\n      }\n    }\n\n    &.danger > span > .extension-container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n\n    &.inline {\n      word-wrap: break-all;\n    }\n  }\n\n  .extensionView-content-wrap .extension-container {\n    overflow: hidden;\n  }\n\n  .bodiedExtensionView-content-wrap\n    .extensionView-content-wrap\n    .extension-container {\n    width: 100%;\n    max-width: 100%; // ensure width can't go over 100%;\n  }\n\n  [data-mark-type='fragment'] {\n    & > .extensionView-content-wrap,\n    & > .bodiedExtensionView-content-wrap {\n      margin: ", " 0;\n    }\n\n    & > [data-mark-type='dataConsumer'] {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin: ", " 0;\n      }\n    }\n\n    &:first-child {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-top: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-top: 0;\n        }\n      }\n    }\n\n    &:nth-last-of-type(-n + 2):not(:first-of-type) {\n      & > .extensionView-content-wrap,\n      & > .bodiedExtensionView-content-wrap {\n        margin-bottom: 0;\n      }\n\n      & > [data-mark-type='dataConsumer'] {\n        & > .extensionView-content-wrap,\n        & > .bodiedExtensionView-content-wrap {\n          margin-bottom: 0;\n        }\n      }\n    }\n  }\n"])), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin);
 exports.extensionStyles = extensionStyles;

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

@@ -13,9 +13,7 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
-var fakeCursorStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .ProseMirror-fake-text-cursor {\n      display: inline;\n      pointer-events: none;\n      position: relative;\n    }\n\n    .ProseMirror-fake-text-cursor::after {\n      content: '';\n      display: inline;\n      top: 0;\n      position: absolute;\n      border-right: 1px solid ", ";\n    }\n\n    .ProseMirror-fake-text-selection {\n      display: inline;\n      pointer-events: none;\n      position: relative;\n      background-color: ", ";\n    }\n  }\n"])), (0, _tokens.token)('color.border', 'rgba(0, 0, 0, 0.4)'), (0, _tokens.token)('color.background.selected', _colors.B75));
+var fakeCursorStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .ProseMirror-fake-text-cursor {\n      display: inline;\n      pointer-events: none;\n      position: relative;\n    }\n\n    .ProseMirror-fake-text-cursor::after {\n      content: '';\n      display: inline;\n      top: 0;\n      position: absolute;\n      border-right: 1px solid ", ";\n    }\n\n    .ProseMirror-fake-text-selection {\n      display: inline;\n      pointer-events: none;\n      position: relative;\n      background-color: ", ";\n    }\n  }\n"])), "var(--ds-border, rgba(0, 0, 0, 0.4))", "var(--ds-background-selected, ".concat(_colors.B75, ")"));
 exports.fakeCursorStyles = fakeCursorStyles;

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

@@ -43,7 +43,7 @@ function getSpellCheck(featureFlags) {
 
 
 function createFeatureFlagsFromProps(props) {
-  var _props$featureFlags, _props$allowTextColor, _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$featureFlags2, _props$featureFlags3, _props$allowTables, _props$featureFlags4, _props$featureFlags5, _props$allowTables2, _props$featureFlags6, _props$featureFlags7, _props$allowTables3, _props$featureFlags8, _props$featureFlags9, _props$allowTables4, _props$allowTables5, _props$featureFlags10, _props$featureFlags11, _props$allowTables6, _props$allowExtension, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$collabEdit, _props$collabEdit2, _props$featureFlags28, _props$featureFlags29, _props$featureFlags30, _props$featureFlags31, _props$featureFlags32, _props$featureFlags33, _props$featureFlags34, _props$featureFlags35, _props$featureFlags36, _props$featureFlags37, _props$featureFlags38, _props$featureFlags39;
+  var _props$featureFlags, _props$allowTextColor, _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$featureFlags2, _props$featureFlags3, _props$allowTables, _props$featureFlags4, _props$featureFlags5, _props$allowTables2, _props$featureFlags6, _props$featureFlags7, _props$allowTables3, _props$featureFlags8, _props$featureFlags9, _props$allowTables4, _props$allowTables5, _props$featureFlags10, _props$featureFlags11, _props$allowTables6, _props$allowExtension, _props$featureFlags12, _props$featureFlags13, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$collabEdit, _props$collabEdit2, _props$featureFlags28, _props$featureFlags29, _props$featureFlags30, _props$featureFlags31, _props$featureFlags32, _props$featureFlags33, _props$featureFlags34, _props$featureFlags35, _props$featureFlags36, _props$featureFlags37, _props$featureFlags38, _props$featureFlags39, _props$featureFlags40, _props$featureFlags41, _props$featureFlags42;
 
   var normalizedFeatureFlags = (0, _normalizeFeatureFlags.normalizeFeatureFlags)(props.featureFlags);
   var tableCellOptionsInFloatingToolbar = normalizedFeatureFlags.tableCellOptionsInFloatingToolbar || ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableCellOptionsInFloatingToolbar) || undefined;
@@ -51,11 +51,9 @@ function createFeatureFlagsFromProps(props) {
     newInsertionBehaviour: props.allowNewInsertionBehaviour,
     interactiveExpand: typeof props.allowExpand === 'boolean' ? props.allowExpand : Boolean(props.allowExpand && props.allowExpand.allowInteractiveExpand !== false),
     placeholderBracketHint: !!props.placeholderBracketHint,
-    placeholderHints: Array.isArray(props.placeholderHints) && props.placeholderHints.length > 0,
     moreTextColors: typeof props.allowTextColor === 'boolean' ? false : Boolean(((_props$allowTextColor = props.allowTextColor) === null || _props$allowTextColor === void 0 ? void 0 : _props$allowTextColor.allowMoreTextColors) === true),
     findReplace: !!props.allowFindReplace,
     findReplaceMatchCase: (0, _typeof2.default)(props.allowFindReplace) === 'object' && Boolean(props.allowFindReplace.allowMatchCase),
-    keyboardAccessibleDatepicker: typeof props.allowKeyboardAccessibleDatepicker === 'boolean' ? props.allowKeyboardAccessibleDatepicker : false,
     addColumnWithCustomStep: !props.allowTables || typeof props.allowTables === 'boolean' ? false : Boolean(props.allowTables.allowAddColumnWithCustomStep),
     singleLayout: (0, _typeof2.default)(props.allowLayouts) === 'object' && !!((_props$allowLayouts = props.allowLayouts) !== null && _props$allowLayouts !== void 0 && _props$allowLayouts.UNSAFE_allowSingleColumnLayout),
     undoRedoButtons: props.allowUndoRedoButtons,
@@ -76,17 +74,19 @@ function createFeatureFlagsFromProps(props) {
     saferDispatchedTransactions: Boolean(typeof normalizedFeatureFlags.saferDispatchedTransactions === 'boolean' && !!normalizedFeatureFlags.saferDispatchedTransactions || (typeof ((_props$featureFlags26 = props.featureFlags) === null || _props$featureFlags26 === void 0 ? void 0 : _props$featureFlags26.saferDispatchedTransactions) === 'boolean' ? !!((_props$featureFlags27 = props.featureFlags) !== null && _props$featureFlags27 !== void 0 && _props$featureFlags27.saferDispatchedTransactions) : false)),
     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$featureFlags28 = props.featureFlags) === null || _props$featureFlags28 === void 0 ? void 0 : _props$featureFlags28.chromeCursorHandlerFixedVersion) === 'string' ? Number(props.featureFlags.chromeCursorHandlerFixedVersion) || undefined : undefined,
-    viewChangingExperimentToolbarStyle: typeof ((_props$featureFlags29 = props.featureFlags) === null || _props$featureFlags29 === void 0 ? void 0 : _props$featureFlags29['view-changing-experiment-toolbar-style']) === 'string' ? props.featureFlags['view-changing-experiment-toolbar-style'] || undefined : undefined,
     tableCellOptionsInFloatingToolbar: typeof tableCellOptionsInFloatingToolbar === 'boolean' ? tableCellOptionsInFloatingToolbar : false,
-    showHoverPreview: Boolean(typeof ((_props$featureFlags30 = props.featureFlags) === null || _props$featureFlags30 === void 0 ? void 0 : _props$featureFlags30.showHoverPreview) === 'boolean' ? !!((_props$featureFlags31 = props.featureFlags) !== null && _props$featureFlags31 !== void 0 && _props$featureFlags31.showHoverPreview) : false),
-    indentationButtonsInTheToolbar: Boolean(typeof normalizedFeatureFlags.indentationButtonsInTheToolbar === 'boolean' && !!normalizedFeatureFlags.indentationButtonsInTheToolbar || (typeof ((_props$featureFlags32 = props.featureFlags) === null || _props$featureFlags32 === void 0 ? void 0 : _props$featureFlags32.indentationButtonsInTheToolbar) === 'boolean' ? !!((_props$featureFlags33 = props.featureFlags) !== null && _props$featureFlags33 !== void 0 && _props$featureFlags33.indentationButtonsInTheToolbar) : false)),
-    floatingToolbarCopyButton: Boolean(typeof normalizedFeatureFlags.floatingToolbarCopyButton === 'boolean' && !!normalizedFeatureFlags.floatingToolbarCopyButton || (typeof ((_props$featureFlags34 = props.featureFlags) === null || _props$featureFlags34 === void 0 ? void 0 : _props$featureFlags34.floatingToolbarCopyButton) === 'boolean' ? !!((_props$featureFlags35 = props.featureFlags) !== null && _props$featureFlags35 !== void 0 && _props$featureFlags35.floatingToolbarCopyButton) : false)),
-    floatingToolbarLinkSettingsButton: typeof ((_props$featureFlags36 = props.featureFlags) === null || _props$featureFlags36 === void 0 ? void 0 : _props$featureFlags36['floating-toolbar-link-settings-button']) === 'string' ? props.featureFlags['floating-toolbar-link-settings-button'] || undefined : undefined,
+    showHoverPreview: Boolean(typeof ((_props$featureFlags29 = props.featureFlags) === null || _props$featureFlags29 === void 0 ? void 0 : _props$featureFlags29.showHoverPreview) === 'boolean' ? !!((_props$featureFlags30 = props.featureFlags) !== null && _props$featureFlags30 !== void 0 && _props$featureFlags30.showHoverPreview) : false),
+    indentationButtonsInTheToolbar: Boolean(typeof normalizedFeatureFlags.indentationButtonsInTheToolbar === 'boolean' && !!normalizedFeatureFlags.indentationButtonsInTheToolbar || (typeof ((_props$featureFlags31 = props.featureFlags) === null || _props$featureFlags31 === void 0 ? void 0 : _props$featureFlags31.indentationButtonsInTheToolbar) === 'boolean' ? !!((_props$featureFlags32 = props.featureFlags) !== null && _props$featureFlags32 !== void 0 && _props$featureFlags32.indentationButtonsInTheToolbar) : false)),
+    floatingToolbarCopyButton: Boolean(typeof normalizedFeatureFlags.floatingToolbarCopyButton === 'boolean' && !!normalizedFeatureFlags.floatingToolbarCopyButton || (typeof ((_props$featureFlags33 = props.featureFlags) === null || _props$featureFlags33 === void 0 ? void 0 : _props$featureFlags33.floatingToolbarCopyButton) === 'boolean' ? !!((_props$featureFlags34 = props.featureFlags) !== null && _props$featureFlags34 !== void 0 && _props$featureFlags34.floatingToolbarCopyButton) : false)),
+    floatingToolbarLinkSettingsButton: typeof ((_props$featureFlags35 = props.featureFlags) === null || _props$featureFlags35 === void 0 ? void 0 : _props$featureFlags35['floating-toolbar-link-settings-button']) === 'string' ? props.featureFlags['floating-toolbar-link-settings-button'] || undefined : undefined,
     disableSpellcheckByBrowser: getSpellCheck(props.featureFlags),
     // Including fallback to props.featureFlags so that mobile feature flags
     // are included (they are not kebab cased)
-    restartNumberedLists: normalizedFeatureFlags.restartNumberedLists === true || ((_props$featureFlags37 = props.featureFlags) === null || _props$featureFlags37 === void 0 ? void 0 : _props$featureFlags37.restartNumberedLists) === true,
-    listNumberContinuity: normalizedFeatureFlags.listNumberContinuity === true || ((_props$featureFlags38 = props.featureFlags) === null || _props$featureFlags38 === void 0 ? void 0 : _props$featureFlags38.listNumberContinuity) === true,
-    restartNumberedListsToolbar: normalizedFeatureFlags.restartNumberedListsToolbar === true || ((_props$featureFlags39 = props.featureFlags) === null || _props$featureFlags39 === void 0 ? void 0 : _props$featureFlags39.restartNumberedListsToolbar) === true
+    restartNumberedLists: normalizedFeatureFlags.restartNumberedLists === true || ((_props$featureFlags36 = props.featureFlags) === null || _props$featureFlags36 === void 0 ? void 0 : _props$featureFlags36.restartNumberedLists) === true,
+    listNumberContinuity: normalizedFeatureFlags.listNumberContinuity === true || ((_props$featureFlags37 = props.featureFlags) === null || _props$featureFlags37 === void 0 ? void 0 : _props$featureFlags37.listNumberContinuity) === true,
+    restartNumberedListsToolbar: normalizedFeatureFlags.restartNumberedListsToolbar === true || ((_props$featureFlags38 = props.featureFlags) === null || _props$featureFlags38 === void 0 ? void 0 : _props$featureFlags38.restartNumberedListsToolbar) === true,
+    useSomewhatSemanticTextColorNames: Boolean(typeof normalizedFeatureFlags.useSomewhatSemanticTextColorNames === 'boolean' && !!normalizedFeatureFlags.useSomewhatSemanticTextColorNames || (typeof ((_props$featureFlags39 = props.featureFlags) === null || _props$featureFlags39 === void 0 ? void 0 : _props$featureFlags39.useSomewhatSemanticTextColorNames) === 'boolean' ? !!((_props$featureFlags40 = props.featureFlags) !== null && _props$featureFlags40 !== void 0 && _props$featureFlags40.useSomewhatSemanticTextColorNames) : false)),
+    lpLinkPickerFocusTrap: Boolean(normalizedFeatureFlags.lpLinkPickerFocusTrap),
+    preventPopupOverflow: Boolean(typeof ((_props$featureFlags41 = props.featureFlags) === null || _props$featureFlags41 === void 0 ? void 0 : _props$featureFlags41['prevent-popup-overflow']) === 'boolean' ? !!((_props$featureFlags42 = props.featureFlags) !== null && _props$featureFlags42 !== void 0 && _props$featureFlags42['prevent-popup-overflow']) : false)
   });
 }

package/dist/cjs/plugins/find-replace/ui/FindReplaceToolbarButton.js

@@ -47,6 +47,8 @@ var _types = require("../../analytics/types");
 
 var _keymaps = require("../../../keymaps");
 
+var _keymaps2 = require("@atlaskit/editor-common/keymaps");
+
 var _templateObject, _templateObject2, _templateObject3;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -114,6 +116,7 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
           takeFullWidth = _this$props.takeFullWidth;
       var title = formatMessage(messages.findReplaceToolbarButton);
       var stackBelowOtherEditorFloatingPanels = _editorSharedStyles.akEditorFloatingPanelZIndex - 1;
+      var keymap = (0, _keymaps.findKeymapByDescription)('Find');
       return (0, _react2.jsx)("div", {
         css: [toolbarButtonWrapper, takeFullWidth && toolbarButtonWrapperFullWith]
       }, (0, _react2.jsx)(_Dropdown.default, {
@@ -137,14 +140,16 @@ var FindReplaceToolbarButton = /*#__PURE__*/function (_React$PureComponent) {
           selected: isActive,
           title: (0, _react2.jsx)(_keymaps.ToolTipContent, {
             description: title,
-            keymap: (0, _keymaps.findKeymapByDescription)('Find')
+            keymap: keymap
           }),
           iconBefore: (0, _react2.jsx)(_search.default, {
             label: title
           }),
           onClick: this.toggleOpen,
           "aria-expanded": isActive,
-          "aria-haspopup": true
+          "aria-haspopup": true,
+          "aria-label": keymap ? (0, _keymaps.tooltip)(keymap, title) : title,
+          "aria-keyshortcuts": (0, _keymaps2.getAriaKeyshortcuts)(keymap)
         })
       }, (0, _react2.jsx)("div", {
         css: wrapper