@atlaskit/editor-core 179.0.4 → 179.1.1

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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import HyperlinkToolbar from '../../hyperlink/ui/HyperlinkAddToolbar';
 import { showLinkToolbar, hideLinkToolbar } from '../pm-plugins/actions';
@@ -7,7 +8,17 @@ import { changeSelectedCardToLink, updateCard } from '../pm-plugins/doc';
 import { findCardInfo, displayInfoForCard } from '../utils';
 import { NodeSelection } from 'prosemirror-state';
 import { buildEditLinkPayload } from '../../../utils/linking-utils';
+import { forceFocusSelector } from '../../floating-toolbar/pm-plugins/force-focus';
+import { withOuterListeners } from '@atlaskit/editor-common/ui';
+import { linkToolbarMessages } from '../../../messages';
+const HyperLinkToolbarWithListeners = withOuterListeners(HyperlinkToolbar);
 export class EditLinkToolbar extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "handleEsc", e => {
+      forceFocusSelector(`[aria-label="${linkToolbarMessages.editLink.defaultMessage}"]`, this.props.view);
+    });
+  }
   componentDidUpdate(prevProps) {
     if (prevProps.node !== this.props.node) {
       this.hideLinkToolbar();
@@ -16,6 +27,11 @@ export class EditLinkToolbar extends React.Component {
   componentWillUnmount() {
     this.hideLinkToolbar();
   }
+
+  /** Focus should move to the 'Edit link' button when the toolbar closes
+   * and not close the floating toolbar.
+   */
+
   hideLinkToolbar() {
     const {
       view
@@ -31,12 +47,13 @@ export class EditLinkToolbar extends React.Component {
       view,
       onSubmit
     } = this.props;
-    return /*#__PURE__*/React.createElement(HyperlinkToolbar, {
+    return /*#__PURE__*/React.createElement(HyperLinkToolbarWithListeners, {
       view: view,
       linkPickerOptions: linkPickerOptions,
       providerFactory: providerFactory,
       displayUrl: url,
-      displayText: text
+      displayText: text,
+      handleEscapeKeydown: this.handleEsc
       // Assumes that the smart card link picker can only ever be invoked by clicking "edit"
       // via the floating toolbar
       ,

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

@@ -21,6 +21,7 @@ import { findNode } from './utils';
 import { ErrorBoundary } from '../../ui/ErrorBoundary';
 import { getFeatureFlags } from '../feature-flags-context';
 import { processCopyButtonItems } from '../copy-button/toolbar';
+import forceFocusPlugin from './pm-plugins/force-focus';
 export const getRelevantConfig = (selection, configs) => {
   // node selections always take precedence, see if
   let configPair;
@@ -133,6 +134,9 @@ const floatingToolbarPlugin = () => ({
       plugin: ({
         dispatch
       }) => floatingToolbarDataPluginFactory(dispatch)
+    }, {
+      name: 'forceFocus',
+      plugin: () => forceFocusPlugin()
     }];
   },
   contentComponent({

package/dist/es2019/plugins/floating-toolbar/pm-plugins/force-focus/index.js

@@ -0,0 +1,59 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+export const forceFocusStateKey = new PluginKey('forceFocusStatePlugin');
+/**
+ * Used in cases where a floating toolbar button opens a submenu which destroys
+ * the button, but the user has pressed ESC to close the submenu and focus needs
+ * to move back to the button. */
+export default (() => new SafePlugin({
+  key: forceFocusStateKey,
+  state: {
+    init: () => ({
+      selector: null
+    }),
+    apply: (tr, prevState) => {
+      const meta = tr.getMeta(forceFocusStateKey);
+      if (meta && 'selector' in meta) {
+        return {
+          selector: meta.selector
+        };
+      }
+      return prevState;
+    }
+  }
+}));
+
+/**
+ * The provided selector should be the floating toolbar button that needs focus.
+ */
+export function forceFocusSelector(selector, view) {
+  if (view) {
+    return view.dispatch(view.state.tr.setMeta(forceFocusStateKey, {
+      selector
+    }));
+  }
+}
+
+/**
+ * If a selector is set and the element exists, focus it.
+ */
+export function checkShouldForceFocusAndApply(view) {
+  const state = view === null || view === void 0 ? void 0 : view.state;
+  if (state) {
+    const {
+      selector
+    } = forceFocusStateKey.getState(state);
+    if (selector) {
+      const focusableElement = document.querySelector(selector);
+      if (focusableElement) {
+        focusableElement.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'nearest'
+        });
+        focusableElement.focus();
+        forceFocusSelector(null, view);
+      }
+    }
+  }
+}

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

@@ -23,8 +23,10 @@ import Announcer from '../../../utils/announcer/announcer';
 import { injectIntl } from 'react-intl-next';
 import messages from './messages';
 import { decorationStateKey, ACTIONS } from '../../base/pm-plugins/decoration';
+import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
 import ScrollButtons from './ScrollButtons';
 import { ToolbarArrowKeyNavigationProvider } from '../../../ui/ToolbarArrowKeyNavigationProvider';
+import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
 const akGridSize = gridSize();
 const ToolbarItems = /*#__PURE__*/React.memo(({
   items,
@@ -336,10 +338,8 @@ class Toolbar extends Component {
         state,
         dispatch
       } = this.props.editorView;
-      // tables use their own decorations
-      // TODO fix for tables https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-617
       if (table) {
-        return null;
+        return clearHoverSelection()(state, dispatch);
       }
       dispatch(state.tr.setMeta(decorationStateKey, {
         action: ACTIONS.DECORATION_REMOVE
@@ -366,6 +366,8 @@ class Toolbar extends Component {
     });
   }
   componentDidUpdate(prevProps) {
+    var _this$props;
+    checkShouldForceFocusAndApply((_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.editorView);
     if (this.props.node !== prevProps.node) {
       this.resetStyling({
         table: (prevProps === null || prevProps === void 0 ? void 0 : prevProps.node.type.name) === 'table'
@@ -373,6 +375,7 @@ class Toolbar extends Component {
     }
   }
   componentWillUnmount() {
+    forceFocusSelector(null, this.props.editorView);
     this.resetStyling({
       table: this.props.node.type.name === 'table'
     });

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/block-insert-element-browser.js

@@ -10,7 +10,9 @@ export const BlockInsertElementBrowser = props => {
     offset: [0, 3],
     mountTo: props.popupsMountPoint,
     boundariesElement: props.popupsBoundariesElement,
-    scrollableElement: props.popupsScrollableElement
+    scrollableElement: props.popupsScrollableElement,
+    preventOverflow: true,
+    alignX: "right"
   }, /*#__PURE__*/React.createElement(InsertMenu, {
     editorView: props.editorView,
     dropdownItems: props.items,

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -459,7 +459,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
     var _this$props$isDisable, _this$props$replacePl;
     const {
       buttons,
-      dropdownItems
+      dropdownItems,
+      emojiPickerOpen
     } = this.state;
     const {
       isDisabled,
@@ -478,7 +479,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
       spacing: isReducedSpacing ? 'none' : 'default',
       disabled: isDisabled || btn.isDisabled,
       iconBefore: btn.elemBefore,
-      selected: btn.isActive,
+      selected: btn.value.name === 'emoji' && emojiPickerOpen || btn.isActive,
       title: btn.title,
       "aria-label": btn['aria-label'],
       "aria-haspopup": btn['aria-haspopup'],

package/dist/es2019/plugins/list/actions/outdent-list-items-selected.js

@@ -7,6 +7,8 @@ import { findFirstParentListItemNode, findRootParentListNode } from '../utils/fi
 import { normalizeListItemsSelection, createListNodeRange } from '../utils/selection';
 import { GapCursorSelection } from '../../selection/gap-cursor-selection';
 import { getFeatureFlags } from '../../feature-flags-context';
+import { storeRestartListsAttributes, getRestartListsAttributes } from '../utils/analytics';
+import { OUTDENT_SCENARIOS } from '@atlaskit/editor-common/analytics';
 export const outdentListItemsSelected = (tr, state) => {
   const originalSelection = tr.selection;
   const normalizedSelection = normalizeListItemsSelection({
@@ -199,22 +201,55 @@ const extractListItemsRangeFromList = ({
   }
   let nextList = list.copy(Fragment.empty);
   const featureFlags = getFeatureFlags(state);
+  let nextListStartNumber;
   if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists) {
     // if splitting a numbered list, keep the splitted item
     // counter as the start of the next (second half) list (instead
     // of reverting back to 1 as a starting number)
     const order = getOrderFromOrderedListNode(list);
     if (list.type.name === 'orderedList') {
+      nextListStartNumber = range.endIndex - 1 + order;
       nextList.attrs = {
         ...nextList.attrs,
-        order: range.endIndex - 1 + order
+        order: nextListStartNumber
       };
+      const {
+        splitListStartNumber
+      } = getRestartListsAttributes(tr);
+      if (typeof splitListStartNumber !== 'number') {
+        storeRestartListsAttributes(tr, {
+          splitListStartNumber: nextListStartNumber
+        });
+      }
     }
   }
   const nextListFragment = listItemContent.append(Fragment.from(nextList));
+  if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists) {
+    // if the split list with nextListStartNumber is below another list
+    // with order (e.g due to multi-level indent items being lifted), track the
+    // list above's order instead, as it will be the split list's order after sibling joins
+    nextListFragment.forEach((node, _offset, index) => {
+      var _node$attrs;
+      if (node.type.name === 'orderedList' && ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.order) === nextListStartNumber) {
+        var _prev$attrs;
+        const prev = nextListFragment.child(index - 1);
+        if ((prev === null || prev === void 0 ? void 0 : (_prev$attrs = prev.attrs) === null || _prev$attrs === void 0 ? void 0 : _prev$attrs.order) >= 0) {
+          var _prev$attrs2;
+          storeRestartListsAttributes(tr, {
+            splitListStartNumber: prev === null || prev === void 0 ? void 0 : (_prev$attrs2 = prev.attrs) === null || _prev$attrs2 === void 0 ? void 0 : _prev$attrs2.order
+          });
+        }
+      }
+    });
+  }
   if (isTheEntireList) {
     const slice = new Slice(listItemContent, 0, 0);
     const step = new ReplaceStep($start.pos - 1, range.end + 1, slice, false);
+    if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists) {
+      storeRestartListsAttributes(tr, {
+        outdentScenario: undefined
+      });
+    }
     tr.step(step);
   } else if (isAtTop) {
     const slice = new Slice(nextListFragment, 0, 1);
@@ -225,6 +260,11 @@ const extractListItemsRangeFromList = ({
     const step = new ReplaceStep($start.pos, listEnd + 1, slice, false);
     tr.step(step);
   } else {
+    if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists) {
+      storeRestartListsAttributes(tr, {
+        outdentScenario: OUTDENT_SCENARIOS.SPLIT_LIST
+      });
+    }
     const slice = new Slice(nextListFragment, 1, 1);
     const step = new ReplaceAroundStep($start.pos, listEnd, range.end, listEnd, slice, slice.size, false);
     tr.step(step);

package/dist/es2019/plugins/list/commands/outdent-list.js

@@ -1,10 +1,12 @@
+import { OUTDENT_SCENARIOS } from '@atlaskit/editor-common/analytics';
 import { addAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '../../analytics';
 import { isInsideListItem, isInsideTableCell } from '../utils/selection';
 import { isBulletList } from '../utils/node';
 import { findFirstParentListNode } from '../utils/find';
-import { getCommonListAnalyticsAttributes } from '../utils/analytics';
+import { getCommonListAnalyticsAttributes, getRestartListsAttributes } from '../utils/analytics';
 import { outdentListItemsSelected as outdentListAction } from '../actions/outdent-list-items-selected';
 import { closeHistory } from 'prosemirror-history';
+import { getFeatureFlags } from '../../feature-flags-context';
 export function outdentList(inputMethod = INPUT_METHOD.KEYBOARD) {
   return function (state, dispatch) {
     if (!isInsideListItem(state)) {
@@ -29,6 +31,18 @@ export function outdentList(inputMethod = INPUT_METHOD.KEYBOARD) {
       // If inside table cell and can't outdent list, then let it handle by table keymap
       return !isInsideTableCell(state);
     }
+    const featureFlags = getFeatureFlags(state);
+    const restartListsAttributes = {};
+    if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists) {
+      const {
+        outdentScenario,
+        splitListStartNumber
+      } = getRestartListsAttributes(customTr);
+      if (outdentScenario === OUTDENT_SCENARIOS.SPLIT_LIST) {
+        restartListsAttributes.outdentScenario = outdentScenario;
+        restartListsAttributes.splitListStartNumber = splitListStartNumber;
+      }
+    }
     addAnalytics(state, customTr, {
       action: ACTION.OUTDENTED,
       actionSubject: ACTION_SUBJECT.LIST,
@@ -36,6 +50,7 @@ export function outdentList(inputMethod = INPUT_METHOD.KEYBOARD) {
       eventType: EVENT_TYPE.TRACK,
       attributes: {
         ...getCommonListAnalyticsAttributes(state),
+        ...restartListsAttributes,
         inputMethod
       }
     });

package/dist/es2019/plugins/list/pm-plugins/input-rules/create-list-input-rule.js

@@ -1,27 +1,45 @@
 import { ruleWithAnalytics, createWrappingJoinRule } from '../../../../utils/input-rules';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '../../../analytics';
+import { JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST } from '@atlaskit/editor-common/analytics';
+const getOrder = matchResult => Number(matchResult[1]);
 export function createRuleForListType({
   listType,
   expression,
   featureFlags
 }) {
+  let joinScenario = JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST.NO_JOIN;
   const isBulletList = listType.name === 'bulletList';
   const actionSubjectId = isBulletList ? ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
-  const analyticsPayload = {
-    action: ACTION.INSERTED,
-    actionSubject: ACTION_SUBJECT.LIST,
-    actionSubjectId,
-    eventType: EVENT_TYPE.TRACK,
-    attributes: {
-      inputMethod: INPUT_METHOD.FORMATTING
+  const getAnalyticsPayload = (state, matchResult) => {
+    const analyticsPayload = {
+      action: ACTION.INSERTED,
+      actionSubject: ACTION_SUBJECT.LIST,
+      actionSubjectId,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        inputMethod: INPUT_METHOD.FORMATTING
+      }
+    };
+    if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists && listType === state.schema.nodes.orderedList && analyticsPayload.attributes) {
+      analyticsPayload.attributes.listStartNumber = getOrder(matchResult);
+      analyticsPayload.attributes.joinScenario = joinScenario;
+      // we reset the tracked joinScenario after storing it in the event payload
+      joinScenario = JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST.NO_JOIN;
+    }
+    return analyticsPayload;
+  };
+  const joinToNeighbourIfSameListType = (_, node, scenario) => {
+    const shouldJoin = node.type === listType;
+    if (shouldJoin) {
+      joinScenario = scenario;
     }
+    return shouldJoin;
   };
-  const shouldJoinNextNodeWhen = (_, node) => node.type === listType;
   let getAttrs = {};
   if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists) {
     getAttrs = matchResult => {
       return {
-        order: Number(matchResult[1])
+        order: getOrder(matchResult)
       };
     };
   }
@@ -29,7 +47,7 @@ export function createRuleForListType({
     match: expression,
     nodeType: listType,
     getAttrs,
-    joinPredicate: shouldJoinNextNodeWhen
+    joinPredicate: joinToNeighbourIfSameListType
   });
-  return ruleWithAnalytics(analyticsPayload)(inputRule);
+  return ruleWithAnalytics(getAnalyticsPayload)(inputRule);
 }

package/dist/es2019/plugins/list/utils/analytics.js

@@ -33,4 +33,16 @@ export const countListItemsInSelection = state => {
     }
   });
   return count;
+};
+export const RESTART_LISTS_ANALYTICS_KEY = 'restartListsAnalytics';
+export const getRestartListsAttributes = tr => {
+  var _tr$getMeta;
+  return (_tr$getMeta = tr.getMeta(RESTART_LISTS_ANALYTICS_KEY)) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : {};
+};
+export const storeRestartListsAttributes = (tr, attributes) => {
+  const meta = getRestartListsAttributes(tr);
+  tr.setMeta(RESTART_LISTS_ANALYTICS_KEY, {
+    ...meta,
+    ...attributes
+  });
 };

package/dist/es2019/plugins/media/commands/linking.js

@@ -45,11 +45,11 @@ export const showLinkingToolbarWithMediaTypeCheck = (editorState, dispatch, edit
 const hideLinkingToolbarCommand = createMediaLinkingCommand({
   type: MediaLinkingActionsTypes.hideToolbar
 });
-export const hideLinkingToolbar = (state, dispatch, view) => {
+export const hideLinkingToolbar = (state, dispatch, view, focusFloatingToolbar) => {
   hideLinkingToolbarCommand(state, dispatch, view);
 
   // restore focus on the editor so keyboard shortcuts aren't lost to the browser
-  if (view) {
+  if (view && !focusFloatingToolbar) {
     view.focus();
   }
 };

package/dist/es2019/plugins/media/pm-plugins/alt-text/index.js

@@ -27,18 +27,7 @@ export const createPlugin = ({
     state: createPluginState(dispatch, {
       isAltTextEditorOpen: false
     }),
-    key: pluginKey,
-    view: () => {
-      return {
-        update: (view, prev) => {
-          const pluginState = getPluginState(view.state);
-          const oldPluginState = getPluginState(prev);
-          if (pluginState && oldPluginState && oldPluginState.isAltTextEditorOpen && !pluginState.isAltTextEditorOpen && !view.hasFocus()) {
-            view.focus();
-          }
-        }
-      };
-    }
+    key: pluginKey
   });
 };
 export { createCommand, getPluginState };

package/dist/es2019/plugins/media/toolbar/alt-text.js

@@ -6,6 +6,9 @@ import AltTextEdit from '../pm-plugins/alt-text/ui/AltTextEdit';
 import { CONTAINER_WIDTH_IN_PX } from '../pm-plugins/alt-text/ui/AltTextEdit';
 import { getMediaNodeFromSelection } from '../utils/media-common';
 import { ClassNames } from '../pm-plugins/alt-text/style';
+import { withOuterListeners } from '@atlaskit/editor-common/ui';
+import { forceFocusSelector } from '../../floating-toolbar/pm-plugins/force-focus';
+const testId = 'alt-text-edit-button';
 export const altTextButton = (intl, state) => {
   const mediaNode = getMediaNodeFromSelection(state);
   const message = mediaNode && mediaNode.attrs.alt ? messages.editAltText : messages.altText;
@@ -16,13 +19,14 @@ export const altTextButton = (intl, state) => {
     type: 'button',
     onClick: openMediaAltTextMenu,
     showTitle: true,
-    testId: 'alt-text-edit-button',
+    testId,
     tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {
       description: title,
       keymap: addAltText
     })
   };
 };
+const AltTextEditWithListeners = withOuterListeners(AltTextEdit);
 export const altTextEditComponent = options => {
   return {
     type: 'custom',
@@ -36,11 +40,18 @@ export const altTextEditComponent = options => {
       if (!mediaNode) {
         return null;
       }
-      return /*#__PURE__*/React.createElement(AltTextEdit, {
+      /** Focus should move to the 'Alt text' button when the toolbar closes
+       * and not close the floating toolbar.
+       */
+      const handleEsc = e => {
+        forceFocusSelector(`[data-testid="${testId}"]`, view);
+      };
+      return /*#__PURE__*/React.createElement(AltTextEditWithListeners, {
         view: view,
         key: idx,
         value: mediaNode.attrs.alt,
-        altTextValidator: options && options.altTextValidator
+        altTextValidator: options && options.altTextValidator,
+        handleEscapeKeydown: handleEsc
       });
     }
   };

package/dist/es2019/plugins/media/toolbar/linking-toolbar-appearance.js

@@ -25,22 +25,21 @@ export const LinkToolbarAppearance = ({
   onEditLink,
   onOpenLink
 }) => {
-  const [showLinkingControls, setShowLinkingControls] = useState(false);
+  const [showLinkingControls, setShowLinkingControls] = useState(true);
   useEffect(() => {
     var _stateKey$getState;
-    setShowLinkingControls(false);
     const mediaNode = currentMediaNode(editorState);
     if (!mediaNode) {
+      setShowLinkingControls(false);
       return;
     }
     const mediaClientConfig = (_stateKey$getState = stateKey.getState(editorState)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.mediaClientConfig;
     if (!mediaClientConfig) {
+      setShowLinkingControls(false);
       return;
     }
     checkMediaType(mediaNode, mediaClientConfig).then(mediaType => {
-      if (mediaType === 'external' || mediaType === 'image') {
-        setShowLinkingControls(true);
-      }
+      setShowLinkingControls(mediaType === 'external' || mediaType === 'image');
     });
   }, [editorState]);
   if (!showLinkingControls) {
@@ -58,7 +57,8 @@ export const LinkToolbarAppearance = ({
       tooltipContent: jsx(ToolTipContent, {
         description: title,
         keymap: addLink
-      })
+      }),
+      testId: "edit-link-button"
     }, title)), jsx("div", {
       css: wrapper
     }, jsx(Separator, null)), jsx(ToolbarButton, {

package/dist/es2019/plugins/media/toolbar/linking.js

@@ -3,6 +3,8 @@ import { hideLinkingToolbar, setUrlToMedia, unlink } from '../commands/linking';
 import { getMediaLinkingState } from '../pm-plugins/linking';
 import MediaLinkingToolbar from '../ui/MediaLinkingToolbar';
 import { RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '../../../ui/LinkSearch/ToolbarComponents';
+import { forceFocusSelector } from '../../floating-toolbar/pm-plugins/force-focus';
+const FORCE_FOCUS_SELECTOR = '[data-testid="add-link-button"],[data-testid="edit-link-button"]';
 export function shouldShowMediaLinkToolbar(editorState) {
   const mediaLinkingState = getMediaLinkingState(editorState);
   if (!mediaLinkingState || mediaLinkingState.mediaPos === null) {
@@ -61,7 +63,13 @@ export const getLinkingToolbar = (toolbarBaseConfig, mediaLinkingState, state, i
                 }
                 hideLinkingToolbar(view.state, view.dispatch, view);
               },
-              onCancel: () => hideLinkingToolbar(view.state, view.dispatch, view),
+              onCancel: () => {
+                hideLinkingToolbar(view.state, view.dispatch, view, true);
+                /** Focus should move to the 'Add link' button when the toolbar closes
+                 * and not close the floating toolbar.
+                 */
+                forceFocusSelector(FORCE_FOCUS_SELECTOR, view);
+              },
               onSubmit: (href, meta) => {
                 setUrlToMedia(href, meta.inputMethod)(view.state, view.dispatch, view);
                 hideLinkingToolbar(view.state, view.dispatch, view);

package/dist/es2019/plugins/paste/handlers.js

@@ -1,7 +1,7 @@
 import { closeHistory } from 'prosemirror-history';
 import { Fragment, Node as PMNode, Slice } from 'prosemirror-model';
 import { TextSelection, NodeSelection } from 'prosemirror-state';
-import { findParentNodeOfType, hasParentNodeOfType, safeInsert } from 'prosemirror-utils';
+import { canInsert, findParentNodeOfType, hasParentNodeOfType, safeInsert } from 'prosemirror-utils';
 import uuid from 'uuid/v4';
 import { replaceSelectedTable } from '@atlaskit/editor-tables/utils';
 import { compose, insideTable, isParagraph, isText, isLinkMark, insideTableCell, isInListItem } from '../../utils';
@@ -19,6 +19,7 @@ import { canLinkBeCreatedInRange } from '../hyperlink/pm-plugins/main';
 import { insertSliceForLists } from './edge-cases';
 import { startTrackingPastedMacroPositions, stopTrackingPastedMacroPositions } from './commands';
 import { getPluginState as getPastePluginState } from './pm-plugins/plugin-factory';
+import { doesSelectionWhichStartsOrEndsInListContainEntireList } from '../../utils/lists';
 
 // remove text attribute from mention for copy/paste (GDPR)
 export function handleMention(slice, schema) {
@@ -93,7 +94,7 @@ export function handlePasteIntoTaskOrDecisionOrPanel(slice) {
     }
     const transformedSlice = compose.apply(null, filters)(slice);
     const tr = closeHistory(state.tr);
-    const transformedSliceIsValidNode = transformedSlice.content.firstChild.type.inlineContent || ['decisionList', 'decisionItem', 'taskList', 'taskItem', 'panel'].includes(transformedSlice.content.firstChild.type.name);
+    const transformedSliceIsValidNode = transformedSlice.content.firstChild.type.inlineContent || ['decisionList', 'decisionItem', 'taskList', 'taskItem', 'panel'].includes(transformedSlice.content.firstChild.type.name) && !isInListItem(state);
     // If the slice or the selection are valid nodes to handle,
     // and the slice is not a whole node (i.e. openStart is 1 and openEnd is 0)
     // or the slice's first node is a paragraph,
@@ -120,11 +121,12 @@ export function handlePastePanelIntoList(slice) {
     const {
       selection
     } = tr;
-
     // Check this pasting action is related to copy content from panel node into a selected the list node
-    const selectionParentListNode = selection.$to.node(selection.$to.depth - 1);
     const panelNode = slice.content.firstChild;
-    if (!dispatch || !selectionParentListNode || (selectionParentListNode === null || selectionParentListNode === void 0 ? void 0 : selectionParentListNode.type) !== schema.nodes.listItem || !panelNode || (panelNode === null || panelNode === void 0 ? void 0 : panelNode.type) !== schema.nodes.panel || (panelNode === null || panelNode === void 0 ? void 0 : panelNode.content.firstChild) === undefined) {
+    const isSliceWholeNode = slice.openStart === 0 && slice.openEnd === 0;
+    const selectionParentListItemNode = selection.$to.node(selection.$to.depth - 1);
+    const sliceIsWholeNodeButShouldNotReplaceSelection = isSliceWholeNode && !doesSelectionWhichStartsOrEndsInListContainEntireList(selection);
+    if (!dispatch || !selectionParentListItemNode || (selectionParentListItemNode === null || selectionParentListItemNode === void 0 ? void 0 : selectionParentListItemNode.type) !== schema.nodes.listItem || !panelNode || (panelNode === null || panelNode === void 0 ? void 0 : panelNode.type) !== schema.nodes.panel || (panelNode === null || panelNode === void 0 ? void 0 : panelNode.content.firstChild) === undefined || sliceIsWholeNodeButShouldNotReplaceSelection) {
       return false;
     }
 
@@ -679,7 +681,7 @@ export function handleRichText(slice) {
           return false;
         }
       });
-      if (insideTableCell(state) && (!doesBlockNodeExist || isInListItem(state)) || sliceHasList) {
+      if (insideTableCell(state) && (!doesBlockNodeExist || isInListItem(state) && canInsert(selection.$from, slice.content) && canInsert(selection.$to, slice.content)) || sliceHasList) {
         tr.replaceSelection(slice);
       } else {
         // need safeInsert rather than replaceSelection, so that nodes aren't split in half

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

@@ -32,6 +32,7 @@ export function createPlaceholderDecoration(editorState, placeholderText, pos =
   // when backspace in GBoard composition
   if (browser.android && browser.chrome) {
     const buffNode = document.createElement('span');
+    buffNode.setAttribute('class', 'placeholder-android');
     buffNode.setAttribute('contenteditable', 'true');
     buffNode.textContent = ' ';
     placeholderDecoration.appendChild(buffNode);

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

@@ -6,5 +6,12 @@ export const placeholderStyles = css`
     width: 100%;
     pointer-events: none;
     user-select: none;
+
+    .placeholder-android {
+      pointer-events: none;
+      outline: none;
+      user-select: none;
+      position: absolute;
+    }
   }
 `;