@atlaskit/editor-core 176.0.3 → 177.0.1

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

@@ -2,41 +2,40 @@ import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { R50, R300, N40A, N50A, N80A, DN50, R200 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { sharedExpandStyles } from '@atlaskit/editor-common/ui';
 import { SelectionStyle, getSelectionStyles, akLayoutGutterOffset, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { BreakoutCssClassName } from '../../breakout/constants';
 import { expandClassNames } from './class-names';
 const EXPAND_SELECTED_BACKGROUND = themed({
-  light: token('color.background.neutral.subtle', 'rgba(255, 255, 255, 0.6)'),
-  dark: 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))"
 });
 
 const EXPAND_ICON_COLOR = props => css`
   color: ${themed({
-  light: token('color.icon.subtle', N80A),
-  dark: token('color.icon.subtle', '#d9dde3')
+  light: `var(--ds-icon-subtle, ${N80A})`,
+  dark: "var(--ds-icon-subtle, #d9dde3)"
 })(props)};
 `;
 
 const ACTIVE_STATE_BACKGROUND_COLOR = themed({
-  dark: token('color.blanket.selected', `#0C294F4B`)
+  dark: `var(--ds-blanket-selected, ${`#0C294F4B`})`
 });
 const ACTIVE_STATE_BORDER = themed({
-  dark: `1px solid ${token('color.border.selected', `#4794ff4B`)}`
+  dark: `1px solid ${`var(--ds-border-selected, ${`#4794ff4B`})`}`
 });
 const ACTIVE_STATE_BORDER_RADIUS = themed({
   dark: '3px'
 });
 const DANGER_STATE_BACKGROUND_COLOR = themed({
-  light: token('color.background.danger', R50),
-  dark: token('color.background.danger', '#441C13')
+  light: `var(--ds-background-danger, ${R50})`,
+  dark: "var(--ds-background-danger, #441C13)"
 });
 const DANGER_STATE_BORDER = themed({
-  dark: `1px solid ${token('color.border.danger', R200)}`
+  dark: `1px solid ${`var(--ds-border-danger, ${R200})`}`
 });
 const DANGER_STATE_BORDER_COLOR = themed({
-  light: token('color.border.danger', R300)
+  light: `var(--ds-border-danger, ${R300})`
 });
 const DANGER_STATE_BORDER_RADIUS = themed({
   dark: '3px'
@@ -113,8 +112,8 @@ export const expandStyles = props => css`
   .${expandClassNames.expanded} {
     background: ${EXPAND_SELECTED_BACKGROUND(props)};
     border-color: ${themed({
-  light: token('color.border', N40A),
-  dark: token('color.border', DN50)
+  light: `var(--ds-border, ${N40A})`,
+  dark: `var(--ds-border, ${DN50})`
 })(props)};
 
     .${expandClassNames.content} {
@@ -155,8 +154,8 @@ export const expandStyles = props => css`
 
       &:hover {
         border-color: ${themed({
-  light: token('color.border', N50A),
-  dark: token('color.border', DN50)
+  light: `var(--ds-border, ${N50A})`,
+  dark: `var(--ds-border, ${DN50})`
 })(props)};
         background: ${EXPAND_SELECTED_BACKGROUND(props)};
       }

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

@@ -1,7 +1,8 @@
 import { removeSelectedNode, removeParentNodeOfType } from 'prosemirror-utils';
 import { applyChange } from '../context-panel/transforms';
 import { createCommand } from './plugin-factory';
-import { getSelectedExtension } from './utils'; // AFP-2532 TODO: Fix automatic suppressions below
+import { getSelectedExtension } from './utils';
+import { removeConnectedNodes } from '@atlaskit/editor-common/utils'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 export function updateState(state) {
@@ -70,4 +71,12 @@ export const removeExtension = () => createCommand({
   } else {
     return removeParentNodeOfType(state.schema.nodes.bodiedExtension)(tr);
   }
+});
+export const removeDescendantNodes = sourceNode => createCommand({
+  type: 'UPDATE_STATE',
+  data: {
+    element: undefined
+  }
+}, (tr, state) => {
+  return sourceNode ? removeConnectedNodes(state, sourceNode) : tr;
 });

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

@@ -129,6 +129,16 @@ const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProvid
           if (!selectedExtension) {
             if (showContextPanel) {
               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) {
+              updateState({
+                localId: undefined,
+                element: undefined
+              })(state, dispatch);
             }
 
             return;

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

@@ -10,24 +10,34 @@ import { hoverDecoration } from '../base/pm-plugins/decoration';
 import { editExtension } from './actions';
 import { getPluginState } from './pm-plugins/main';
 import { getSelectedExtension } from './utils';
-import { updateExtensionLayout, removeExtension } from './commands';
+import { updateExtensionLayout, removeExtension, removeDescendantNodes } from './commands';
 import { pluginKey as macroPluginKey } from '../macro/plugin-key';
-import { isReferencedSource } from '@atlaskit/editor-common/utils';
+import { isReferencedSource, getChildrenInfo, getNodeName } from '@atlaskit/editor-common/utils';
 export const messages = defineMessages({
   edit: {
     id: 'fabric.editor.edit',
     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'
   }
 });
 
@@ -106,7 +116,8 @@ const editButton = (formatMessage, extensionState) => {
       return true;
     },
     title: formatMessage(messages.edit),
-    tabIndex: null
+    tabIndex: null,
+    focusEditoronEnter: true
   }];
 };
 
@@ -125,9 +136,18 @@ export const getToolbarConfig = (breakoutEnabled = true) => (state, intl) => {
     let confirmDialog;
 
     if (isReferencedSource(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)) {
-      confirmDialog = {
-        okButtonLabel: formatMessage(messages.confirmDeleteLinkedModalOKButton),
-        message: formatMessage(messages.confirmDeleteLinkedModalMessage)
+      confirmDialog = () => {
+        return {
+          title: formatMessage(messages.deleteElementTitle),
+          okButtonLabel: formatMessage(messages.confirmDeleteLinkedModalOKButton),
+          message: formatMessage(messages.confirmDeleteLinkedModalMessage, {
+            nodeName: getNodeName(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)
+          }),
+          isReferentialityDialog: true,
+          getChildrenInfo: () => getChildrenInfo(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node),
+          checkboxLabel: formatMessage(messages.confirmModalCheckboxLabel),
+          onConfirm: (isChecked = false) => clickWithCheckboxHandler(isChecked, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)
+        };
       };
     }
 
@@ -160,6 +180,7 @@ export const getToolbarConfig = (breakoutEnabled = true) => (state, intl) => {
         onMouseLeave: hoverDecoration(nodeType, false),
         onFocus: hoverDecoration(nodeType, true),
         onBlur: hoverDecoration(nodeType, false),
+        focusEditoronEnter: true,
         title: formatMessage(commonMessages.remove),
         tabIndex: null,
         confirmDialog
@@ -169,4 +190,18 @@ export const getToolbarConfig = (breakoutEnabled = true) => (state, intl) => {
   }
 
   return;
+};
+
+const clickWithCheckboxHandler = (isChecked, node) => (state, dispatch) => {
+  if (!node) {
+    return false;
+  }
+
+  if (!isChecked) {
+    removeExtension()(state, dispatch);
+  } else {
+    removeDescendantNodes(node)(state, dispatch);
+  }
+
+  return true;
 };

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

@@ -3,7 +3,6 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { DN30, DN900, N30 } from '@atlaskit/theme/colors';
 import { wrapperDefault, padding } from '../styles';
-import { token } from '@atlaskit/tokens';
 export const widerLayoutClassName = 'wider-layout';
 export const wrapperStyle = theme => css`
   ${wrapperDefault(theme)}
@@ -32,13 +31,13 @@ export const header = css`
 export const content = theme => css`
   padding: ${padding}px;
   background: ${themed({
-  light: token('elevation.surface', 'white'),
-  dark: token('elevation.surface', DN30)
+  light: "var(--ds-surface, white)",
+  dark: `var(--ds-surface, ${DN30})`
 })(theme)};
   color: ${themed({
-  dark: token('color.text', DN900)
+  dark: `var(--ds-text, ${DN900})`
 })(theme)};
-  border: 1px solid ${token('color.border', N30)};
+  border: 1px solid ${`var(--ds-border, ${N30})`};
   border-radius: ${borderRadius()}px;
   cursor: initial;
 `;

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

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { wrapperDefault } from '../styles';
-import { token } from '@atlaskit/tokens';
 export const wrapperStyle = theme => css`
   ${wrapperDefault(theme)}
 
@@ -23,6 +22,6 @@ export const wrapperStyle = theme => css`
 
   &.with-children {
     padding: 0;
-    background: ${token('color.background.neutral.subtle', 'white')};
+    background: ${"var(--ds-background-neutral-subtle, white)"};
   }
 `;

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

@@ -2,29 +2,28 @@ import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N20, DN50, DN700, B200, N20A, N70 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { EXTENSION_PADDING, BODIED_EXT_PADDING } from '@atlaskit/editor-common/styles';
 export { EXTENSION_PADDING as padding, BODIED_EXT_PADDING };
 export const wrapperDefault = theme => css`
   background: ${themed({
-  light: token('color.background.neutral', N20),
-  dark: token('color.background.neutral', DN50)
+  light: `var(--ds-background-neutral, ${N20})`,
+  dark: `var(--ds-background-neutral, ${DN50})`
 })(theme)};
   border-radius: ${borderRadius()}px;
   color: ${themed({
-  dark: token('color.text', DN700)
+  dark: `var(--ds-text, ${DN700})`
 })(theme)};
   position: relative;
   vertical-align: middle;
 
   .ProseMirror-selectednode > span > & > .extension-overlay {
-    box-shadow: inset 0px 0px 0px 2px ${token('color.border.selected', B200)};
+    box-shadow: inset 0px 0px 0px 2px ${`var(--ds-border-selected, ${B200})`};
     opacity: 1;
   }
 
   &.with-overlay {
     .extension-overlay {
-      background: ${token('color.background.neutral.hovered', N20A)};
+      background: ${`var(--ds-background-neutral-hovered, ${N20A})`};
       color: transparent;
     }
 
@@ -57,7 +56,7 @@ export const placeholderFallbackParams = css`
   display: inline-block;
   max-width: 200px;
   margin-left: 5px;
-  color: ${token('color.text.subtlest', N70)};
+  color: ${`var(--ds-text-subtlest, ${N70})`};
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;

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

@@ -5,7 +5,6 @@ import { G300, N0 } from '@atlaskit/theme/colors';
 import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from './messages';
-import { token } from '@atlaskit/tokens';
 
 const noop = () => {};
 
@@ -22,10 +21,10 @@ const saveIndicatorContent = css`
   align-items: center;
   padding: 6px 12px;
 
-  background: ${token('elevation.surface.overlay', N0)};
+  background: ${`var(--ds-surface-overlay, ${N0})`};
 
   /* E300 */
-  box-shadow: ${token('elevation.shadow.overlay', `0px 8px 12px rgba(9, 30, 66, 0.15), 0px 0px 1px rgba(9, 30, 66, 0.31)`)};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0px 8px 12px rgba(9, 30, 66, 0.15), 0px 0px 1px rgba(9, 30, 66, 0.31)`})`};
   border-radius: 16px;
 `;
 const saveIndicatorText = css`
@@ -62,7 +61,7 @@ export const SaveIndicator = ({
     "data-testid": "save-indicator-content"
   }, jsx(CheckCircleIcon, {
     label: "Saving",
-    primaryColor: token('color.icon.success', G300),
+    primaryColor: `var(--ds-icon-success, ${G300})`,
     size: "small"
   }), jsx("span", {
     css: saveIndicatorText

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

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { blockNodesVerticalMargin, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 export const extensionStyles = css`
   .extensionView-content-wrap,
   .bodiedExtensionView-content-wrap {
@@ -22,8 +21,8 @@ export const extensionStyles = css`
 
     &.danger > span > .extension-container {
       box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
-        ${token('color.border.danger', akEditorDeleteBorder)};
-      background-color: ${token('color.background.danger', akEditorDeleteBackground)};
+        ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+      background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
     }
 
     &.inline {

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

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { B75 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const fakeCursorStyles = css`
   .ProseMirror {
     .ProseMirror-fake-text-cursor {
@@ -14,14 +13,14 @@ export const fakeCursorStyles = css`
       display: inline;
       top: 0;
       position: absolute;
-      border-right: 1px solid ${token('color.border', 'rgba(0, 0, 0, 0.4)')};
+      border-right: 1px solid ${"var(--ds-border, rgba(0, 0, 0, 0.4))"};
     }
 
     .ProseMirror-fake-text-selection {
       display: inline;
       pointer-events: none;
       position: relative;
-      background-color: ${token('color.background.selected', B75)};
+      background-color: ${`var(--ds-background-selected, ${B75})`};
     }
   }
 `;

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

@@ -26,7 +26,7 @@ function getSpellCheck(featureFlags) {
 
 
 export 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;
 
   const normalizedFeatureFlags = normalizeFeatureFlags(props.featureFlags);
   const tableCellOptionsInFloatingToolbar = normalizedFeatureFlags.tableCellOptionsInFloatingToolbar || ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableCellOptionsInFloatingToolbar) || undefined;
@@ -34,11 +34,9 @@ export 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: typeof 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: typeof props.allowLayouts === 'object' && !!((_props$allowLayouts = props.allowLayouts) !== null && _props$allowLayouts !== void 0 && _props$allowLayouts.UNSAFE_allowSingleColumnLayout),
     undoRedoButtons: props.allowUndoRedoButtons,
@@ -59,17 +57,19 @@ export 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/es2019/plugins/find-replace/ui/FindReplaceToolbarButton.js

@@ -11,7 +11,8 @@ import ToolbarButton, { TOOLBAR_BUTTON } from '../../../ui/ToolbarButton';
 import Dropdown from '../../../ui/Dropdown';
 import FindReplace from './FindReplace';
 import { TRIGGER_METHOD } from '../../analytics/types';
-import { ToolTipContent, findKeymapByDescription } from '../../../keymaps';
+import { ToolTipContent, findKeymapByDescription, tooltip } from '../../../keymaps';
+import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 const toolbarButtonWrapper = css`
   display: flex;
   flex: 1 1 auto;
@@ -72,6 +73,7 @@ class FindReplaceToolbarButton extends React.PureComponent {
     } = this.props;
     const title = formatMessage(messages.findReplaceToolbarButton);
     const stackBelowOtherEditorFloatingPanels = akEditorFloatingPanelZIndex - 1;
+    const keymap = findKeymapByDescription('Find');
     return jsx("div", {
       css: [toolbarButtonWrapper, takeFullWidth && toolbarButtonWrapperFullWith]
     }, jsx(Dropdown, {
@@ -95,14 +97,16 @@ class FindReplaceToolbarButton extends React.PureComponent {
         selected: isActive,
         title: jsx(ToolTipContent, {
           description: title,
-          keymap: findKeymapByDescription('Find')
+          keymap: keymap
         }),
         iconBefore: jsx(EditorSearchIcon, {
           label: title
         }),
         onClick: this.toggleOpen,
         "aria-expanded": isActive,
-        "aria-haspopup": true
+        "aria-haspopup": true,
+        "aria-label": keymap ? tooltip(keymap, title) : title,
+        "aria-keyshortcuts": getAriaKeyshortcuts(keymap)
       })
     }, jsx("div", {
       css: wrapper

package/dist/es2019/plugins/find-replace/ui/styles.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { N60, N30A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 export const replaceSectionButtonStyles = css({
   marginLeft: '4px'
@@ -9,7 +8,7 @@ export const replaceSectionButtonStyles = css({
 export const ruleStyles = css({
   width: '100%',
   border: 'none',
-  backgroundColor: `${token('color.border', N30A)}`,
+  backgroundColor: `${`var(--ds-border, ${N30A})`}`,
   margin: '4px 0px',
   height: '1px',
   borderRadius: '1px'
@@ -36,7 +35,7 @@ export const sectionWrapperStyles = css`
   }
 `;
 export const countStyles = css({
-  color: `${token('color.text.subtlest', N60)}`,
+  color: `${`var(--ds-text-subtlest, ${N60})`}`,
   fontSize: `${relativeFontSizeToBase16(12)}`,
   flex: '0 0 auto',
   justifyContent: 'center',

package/dist/es2019/plugins/floating-toolbar/index.js

@@ -190,7 +190,9 @@ const floatingToolbarPlugin = () => ({
           zIndex,
           offset = [0, 12],
           forcePlacement,
-          onPositionCalculated
+          preventPopupOverflow,
+          onPositionCalculated,
+          focusTrap
         } = config;
         const targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
 
@@ -215,6 +217,7 @@ const floatingToolbarPlugin = () => ({
         } = floatingToolbarData || {};
         const confirmButtonItem = confirmDialogForItem ? toolbarItems[confirmDialogForItem] : undefined;
         const scrollable = getFeatureFlags(editorView.state).floatingToolbarCopyButton && config.scrollable;
+        const confirmDialogOptions = typeof (confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog) === 'function' ? confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog() : confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog;
         return /*#__PURE__*/React.createElement(ErrorBoundary, {
           component: ACTION_SUBJECT.FLOATING_TOOLBAR_PLUGIN,
           componentId: camelCase(title),
@@ -237,7 +240,9 @@ const floatingToolbarPlugin = () => ({
           onPositionCalculated: customPositionCalculation,
           style: scrollable ? {
             maxWidth: '100%'
-          } : {}
+          } : {},
+          focusTrap: focusTrap,
+          preventOverflow: preventPopupOverflow
         }, /*#__PURE__*/React.createElement(ToolbarLoader, {
           target: targetRef,
           items: toolbarItems,
@@ -254,9 +259,14 @@ const floatingToolbarPlugin = () => ({
           extensionsProvider: extensionsState === null || extensionsState === void 0 ? void 0 : extensionsState.extensionProvider,
           scrollable: scrollable
         })), /*#__PURE__*/React.createElement(ConfirmationModal, {
-          options: confirmButtonItem === null || confirmButtonItem === void 0 ? void 0 : confirmButtonItem.confirmDialog,
-          onConfirm: () => {
-            dispatchCommand(confirmButtonItem.onClick);
+          options: confirmDialogOptions,
+          onConfirm: (isChecked = false) => {
+            if (!!confirmDialogOptions.onConfirm) {
+              dispatchCommand(confirmDialogOptions.onConfirm(isChecked));
+            } else {
+              dispatchCommand(confirmButtonItem.onClick);
+            }
+
             dispatchCommand(hideConfirmDialog());
           } // When closed without clicking OK or cancel buttons
           ,

package/dist/es2019/plugins/floating-toolbar/ui/CheckboxModal.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState } from 'react';
+import Button from '@atlaskit/button/standard-button';
+import { Checkbox } from '@atlaskit/checkbox';
+import Modal, { ModalBody, ModalTitle, ModalHeader, ModalFooter } from '@atlaskit/modal-dialog';
+import messages from './messages';
+export const CheckboxModal = props => {
+  const [isChecked, setCheckbox] = useState(false);
+  const {
+    onConfirm,
+    onClose,
+    options,
+    intl: {
+      formatMessage
+    },
+    testId
+  } = props;
+  const heading = (options === null || options === void 0 ? void 0 : options.title) || formatMessage(messages.confirmModalDefaultHeading);
+  const okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(messages.confirmModalOK);
+  const cancelButtonLabel = (options === null || options === void 0 ? void 0 : options.cancelButtonLabel) || formatMessage(messages.confirmModalCancel);
+  const checkboxlabel = options === null || options === void 0 ? void 0 : options.checkboxLabel;
+
+  const ListComponent = ({
+    nodes
+  }) => {
+    if (!nodes) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement("ul", null, nodes.map(node => /*#__PURE__*/React.createElement(ListItem, _extends({}, node, {
+      key: node.id
+    }))));
+  };
+
+  const ListItem = props => {
+    const {
+      id,
+      name,
+      amount
+    } = props;
+    return /*#__PURE__*/React.createElement("li", {
+      id: id
+    }, formatMessage(messages.confirmModalListUnit, {
+      name,
+      amount
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(Modal, {
+    onClose: onClose,
+    testId: testId
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
+    appearance: "warning"
+  }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, options === null || options === void 0 ? void 0 : options.message), (options === null || options === void 0 ? void 0 : options.getChildrenInfo) && /*#__PURE__*/React.createElement(ListComponent, {
+    nodes: options === null || options === void 0 ? void 0 : options.getChildrenInfo()
+  }), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Checkbox, {
+    isChecked: isChecked,
+    onChange: () => setCheckbox(!isChecked),
+    label: checkboxlabel,
+    testId: testId ? `${testId}-checkbox` : undefined
+  }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "default",
+    onClick: onClose,
+    testId: testId ? `${testId}-cancel-button` : undefined
+  }, cancelButtonLabel), /*#__PURE__*/React.createElement(Button, {
+    appearance: "warning",
+    onClick: () => onConfirm(isChecked),
+    testId: testId ? `${testId}-confirm-button` : undefined
+  }, okButtonLabel)));
+};