@atlaskit/editor-core 174.0.0 → 175.0.0

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

@@ -4,7 +4,7 @@ import { TextSelection, NodeSelection } from 'prosemirror-state';
 import { 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 } from '../../utils';
+import { compose, insideTable, isParagraph, isText, isLinkMark, insideTableCell, isInListItem } from '../../utils';
 import { mapSlice } from '../../utils/slice';
 import { INPUT_METHOD } from '../analytics';
 import { queueCardsFromChangedTr } from '../card/pm-plugins/doc';
@@ -35,7 +35,7 @@ export function handleMention(slice, schema) {
 }
 export function handlePasteIntoTaskOrDecisionOrPanel(slice) {
   return (state, dispatch) => {
-    var _slice$content$firstC, _slice$content$firstC2, _transformedSlice$con;
+    var _slice$content$firstC, _transformedSlice$con;
 
     const {
       schema,
@@ -58,6 +58,7 @@ export function handlePasteIntoTaskOrDecisionOrPanel(slice) {
         panel,
         bulletList,
         orderedList,
+        listItem,
         expand,
         heading
       }
@@ -65,14 +66,19 @@ export function handlePasteIntoTaskOrDecisionOrPanel(slice) {
     const selectionIsValidNode = state.selection instanceof NodeSelection && ['decisionList', 'decisionItem', 'taskList', 'taskItem'].includes(state.selection.node.type.name);
     const selectionHasValidParentNode = hasParentNodeOfType([decisionItem, taskItem, panel])(state.selection);
     const selectionIsPanel = hasParentNodeOfType([panel])(state.selection); // Some types of content should be handled by the default handler, not this function.
+    // Check through slice content to see if it contains an invalid node.
 
-    const sliceFirstNodeType = (_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type;
-    const sliceIsInvalid = sliceFirstNodeType === bulletList || sliceFirstNodeType === orderedList || sliceFirstNodeType === expand || sliceFirstNodeType === heading; // If the selection is a panel,
+    let sliceIsInvalid = false;
+    slice.content.nodesBetween(0, slice.content.size, node => {
+      if (node.type === bulletList || node.type === orderedList || node.type === expand || node.type === heading || node.type === listItem) {
+        sliceIsInvalid = true;
+      }
+    }); // If the selection is a panel,
     // and the slice's first node is a paragraph
     // and it is not from a depth that would indicate it being from inside from another node (e.g. text from a decision)
     // then we can rely on the default behaviour.
 
-    const sliceIsAPanelReceivingLowDepthText = selectionIsPanel && ((_slice$content$firstC2 = slice.content.firstChild) === null || _slice$content$firstC2 === void 0 ? void 0 : _slice$content$firstC2.type) === paragraph && slice.openEnd < 2;
+    const sliceIsAPanelReceivingLowDepthText = selectionIsPanel && ((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type) === paragraph && slice.openEnd < 2;
 
     if (sliceIsInvalid || sliceIsAPanelReceivingLowDepthText || !selectionIsValidNode && !selectionHasValidParentNode) {
       return false;
@@ -510,6 +516,7 @@ export function handleExpandPasteInTable(slice) {
 export function handleMarkdown(markdownSlice, from, to) {
   return (state, dispatch) => {
     const tr = closeHistory(state.tr);
+    const pastesFrom = typeof from === 'number' ? from : tr.selection.from;
 
     if (typeof from === 'number' && typeof to === 'number') {
       tr.replaceRange(from, to, markdownSlice);
@@ -517,6 +524,7 @@ export function handleMarkdown(markdownSlice, from, to) {
       tr.replaceSelection(markdownSlice);
     }
 
+    tr.setSelection(TextSelection.near(tr.doc.resolve(pastesFrom + markdownSlice.size), -1));
     queueCardsFromChangedTr(state, tr, INPUT_METHOD.CLIPBOARD);
 
     if (dispatch) {
@@ -675,21 +683,6 @@ export function flattenNestedListInSlice(slice) {
   const contentWithFlattenedList = slice.content.replaceChild(0, listToFlatten.type.createChecked(listToFlatten.attrs, leafListItems));
   return new Slice(contentWithFlattenedList, slice.openEnd, slice.openEnd);
 }
-export function insertIntoPanel(tr, slice, panel) {
-  let panelParentOverCurrentSelection = findParentNodeOfType(panel)(tr.selection);
-
-  if (tr.selection.$from === tr.selection.$to && panelParentOverCurrentSelection && !panelParentOverCurrentSelection.node.textContent) {
-    tr = safeInsert(slice.content, tr.selection.$to.pos)(tr); // set selection to end of inserted content
-
-    const panelNode = findParentNodeOfType(panel)(tr.selection);
-
-    if (panelNode) {
-      tr.setSelection(TextSelection.near(tr.doc.resolve(panelNode.pos + panelNode.node.nodeSize)));
-    }
-  } else {
-    tr.replaceSelection(slice);
-  }
-}
 export function handleRichText(slice) {
   return (state, dispatch) => {
     var _slice$content, _slice$content2, _panelParentOverCurre;
@@ -740,18 +733,22 @@ export function handleRichText(slice) {
     } else if (noNeedForSafeInsert) {
       tr.replaceSelection(slice);
     } else {
-      // need to scan the slice if there's a block node inside it
+      // need to scan the slice if there's a block node or list items inside it
       let doesBlockNodeExist = false;
+      let sliceHasList = false;
       slice.content.nodesBetween(0, slice.content.size, (node, start) => {
+        if (node.type === state.schema.nodes.listItem) {
+          sliceHasList = true;
+        }
+
         if (start >= slice.openStart && start <= slice.content.size - slice.openEnd && node.isBlock) {
           doesBlockNodeExist = true;
           return false;
         }
       });
 
-      if (insideTableCell(state) && !doesBlockNodeExist) {
-        // bring back the old code for inline nodes
-        insertIntoPanel(tr, slice, panel);
+      if (insideTableCell(state) && (!doesBlockNodeExist || isInListItem(state)) || sliceHasList) {
+        tr.replaceSelection(slice);
       } else {
         // need safeInsert rather than replaceSelection, so that nodes aren't split in half
         // e.g. when pasting a layout into a table, replaceSelection splits the table in half and adds the layout in the middle

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

@@ -86,7 +86,7 @@ export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, plainText
       },
 
       handlePaste(view, rawEvent, slice) {
-        var _analyticsPlugin$perf, _analyticsPlugin$perf2, _schema$nodes, _schema$nodes2, _schema$nodes3;
+        var _text, _analyticsPlugin$perf, _analyticsPlugin$perf2, _schema$nodes, _schema$nodes2, _schema$nodes3;
 
         const event = rawEvent;
 
@@ -105,6 +105,10 @@ export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, plainText
           slice = new Slice(Fragment.from(schema.text(text)), 1, 1);
         }
 
+        if ((_text = text) !== null && _text !== void 0 && _text.includes('\r')) {
+          text = text.replace(/\r/g, '');
+        }
+
         const isPastedFile = clipboard.isPastedFile(event);
         const isPlainText = text && !html;
         const isRichText = !!html; // Bail if copied content has files

package/dist/es2019/plugins/rank.js

@@ -1,5 +1,5 @@
 export default {
-  plugins: ['featureFlagsContextPlugin', 'compositionPlugin', 'inlineCursorTargetPlugin', 'typeAhead', 'typeAheadInsertItem', 'focusHandlerPlugin', 'frozenEditor', 'submitEditor', 'saveOnEnter', 'customAutoformatting', 'newlinePreserveMarksPlugin', 'imageUpload', 'imageUploadInputRule', 'clipboard', 'paste', 'pasteKeymap', 'mention', 'mentionInputRule', 'mentionKeymap', 'emoji', 'placeholderText', 'emojiInputRule', 'emojiKeymap', 'emojiAsciiInputRule', 'blockType', 'quickInsert', 'tasksAndDecisions', 'blockTypeInputRule', 'tasksAndDecisionsInputRule', 'list', 'typeAhead', 'typeAheadKeymap', 'typeAheadInputRule', 'date', // Needs to be before indentation to handle tab into input field
+  plugins: ['featureFlagsContextPlugin', 'compositionPlugin', 'inlineCursorTargetPlugin', 'typeAhead', 'typeAheadInsertItem', 'focusHandlerPlugin', 'frozenEditor', 'submitEditor', 'saveOnEnter', 'customAutoformatting', 'newlinePreserveMarksPlugin', 'imageUpload', 'imageUploadInputRule', 'clipboard', 'paste', 'pasteKeymap', 'mention', 'mentionInputRule', 'mentionKeymap', 'emoji', 'placeholderText', 'emojiInputRule', 'emojiKeymap', 'emojiAsciiInputRule', 'blockType', 'quickInsert', 'tasksAndDecisions', 'blockTypeInputRule', 'tasksAndDecisionsInputRule', 'list', 'typeAheadKeymap', 'typeAheadInputRule', 'date', // Needs to be before indentation to handle tab into input field
   'dateKeymap', // This should be always after `typeAheadKeymap` & `emojiKeymap`
   'indentationKeymap', 'textColor', 'alignmentPlugin', 'listInputRule', 'listKeymap', 'codeBlock', 'codeBlockIDEKeyBindings', 'codeBlockKeyMap', 'textFormatting', 'textFormattingCursor', 'textFormattingInputRule', 'textFormattingSmartRule', 'textFormattingClear', 'textFormattingKeymap', // task/decisions keymap needs to be above table keymap so can indent actions in a table
   'tasksAndDecisionsKeyMap', // expand and table keymaps need to be above selection keymap to add their custom selection behaviour:

package/dist/es2019/plugins/rule/pm-plugins/input-rule.js

@@ -68,8 +68,7 @@ export function inputRulePlugin(schema, featureFlags) {
 
   if (rules.length !== 0) {
     return createPlugin('rule', rules, {
-      isBlockNodeRule: true,
-      useUnpredictableInputRule: featureFlags.useUnpredictableInputRule
+      isBlockNodeRule: true
     });
   }
 

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

@@ -1,9 +1,9 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { NodeSelection, TextSelection } from 'prosemirror-state';
+import { SelectionActionTypes } from '../actions';
 import { createPluginState, getPluginState } from '../plugin-factory';
 import { selectionPluginKey } from '../types';
-import { getDecorations, shouldRecalcDecorations, getNodeSelectionAnalyticsPayload, getRangeSelectionAnalyticsPayload, getAllSelectionAnalyticsPayload, getCellSelectionAnalyticsPayload } from '../utils';
-import { SelectionActionTypes } from '../actions';
+import { getAllSelectionAnalyticsPayload, getCellSelectionAnalyticsPayload, getDecorations, getNodeSelectionAnalyticsPayload, getRangeSelectionAnalyticsPayload, shouldRecalcDecorations } from '../utils';
 export const getInitialState = state => ({
   decorationSet: getDecorations(state.tr),
   selection: state.selection
@@ -123,13 +123,18 @@ export const createPlugin = (dispatch, dispatchAnalyticsEvent, options = {}) =>
           if (event instanceof KeyboardEvent && event.shiftKey && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
             const {
               state
-            } = editorView;
+            } = editorView; // If current depth is on the top most level, skip that
+
+            if (state.selection.$head.depth <= 0) {
+              return false;
+            }
+
             let pos;
 
             if (event.key === 'ArrowDown') {
               pos = state.selection.$head.after();
             } else {
-              pos = state.selection.$head.before() - 1; // block extensions only take up one position, dont need to get before()
+              pos = Math.max(state.selection.$head.before() - 1, 0); // block extensions only take up one position, dont need to get before()
 
               if (!editorView.nodeDOM(pos)) {
                 pos = state.doc.resolve(pos).before();

package/dist/es2019/plugins/tasks-and-decisions/pm-plugins/input-rules.js

@@ -88,8 +88,7 @@ export function inputRulePlugin(schema, featureFlags) {
   }
 
   return createPlugin('tasks-and-decisions', rules, {
-    isBlockNodeRule: true,
-    useUnpredictableInputRule: featureFlags.useUnpredictableInputRule
+    isBlockNodeRule: true
   });
 }
 export default inputRulePlugin;

package/dist/es2019/plugins/tasks-and-decisions/pm-plugins/keymaps.js

@@ -4,11 +4,11 @@ import { Fragment, Slice } from 'prosemirror-model';
 import { TextSelection } from 'prosemirror-state';
 import { findParentNodeOfType, findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { uuid } from '@atlaskit/adf-schema';
-import { filter, isEmptySelectionAtEnd, isEmptySelectionAtStart } from '../../../utils/commands';
+import { filter, isEmptySelectionAtStart, deleteEmptyParagraphAndMoveBlockUp, isEmptySelectionAtEnd } from '../../../utils/commands';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INDENT_DIRECTION, INDENT_TYPE, INPUT_METHOD, withAnalytics } from '../../analytics';
 import { insertTaskDecisionWithAnalytics } from '../commands';
 import { joinAtCut, liftSelection, wrapSelectionInTaskList } from './commands';
-import { getBlockRange, getCurrentIndentLevel, isActionOrDecisionItem, isActionOrDecisionList, isEmptyTaskDecision, isInsideTask, isInsideTaskOrDecisionItem, liftBlock, subtreeHeight, walkOut, isTable, getTaskItemIndex, isInsideDecision } from './helpers';
+import { getBlockRange, getCurrentIndentLevel, isActionOrDecisionItem, isActionOrDecisionList, isEmptyTaskDecision, isInsideTask, isInsideTaskOrDecisionItem, liftBlock, subtreeHeight, walkOut, getTaskItemIndex, isInsideDecision, isTable } from './helpers';
 
 const indentationAnalytics = (curIndentLevel, direction, inputMethod) => ({
   action: ACTION.FORMATTED,
@@ -32,7 +32,12 @@ const actionDecisionFollowsOrNothing = $pos => {
 };
 
 const joinTaskDecisionFollowing = (state, dispatch) => {
-  // look for the node after this current one
+  // only run if selection is at end of text, and inside a task or decision item
+  if (!isEmptySelectionAtEnd(state) || !isInsideTaskOrDecisionItem(state) || !dispatch) {
+    return false;
+  } // look for the node after this current one
+
+
   const $next = walkOut(state.selection.$from); // if there's no taskItem or taskList following, then
   // we just do the normal behaviour
 
@@ -170,59 +175,55 @@ const backspaceFrom = $from => (state, dispatch) => {
 };
 
 const backspace = filter(isEmptySelectionAtStart, autoJoin(chainCommands((state, dispatch) => joinAtCut(state.selection.$from)(state, dispatch), filter(isInsideTaskOrDecisionItem, (state, dispatch) => backspaceFrom(state.selection.$from)(state, dispatch))), ['taskList', 'decisionList']));
-const deleteHandler = filter([isInsideTaskOrDecisionItem, isEmptySelectionAtEnd], chainCommands(joinTaskDecisionFollowing, (state, dispatch) => {
-  // look for the node after this current one
-  const $next = walkOut(state.selection.$from);
+
+const unindentTaskOrUnwrapTaskDecisionFollowing = (state, dispatch) => {
   const {
-    taskList,
-    paragraph,
-    doc
-  } = state.schema.nodes; // this is a top-level node it wont have $next.before()
+    selection: {
+      $from
+    },
+    schema: {
+      nodes: {
+        taskList,
+        doc,
+        paragraph
+      }
+    },
+    tr
+  } = state; // only run if cursor is at the end of the node
 
-  if (!$next.parent || $next.parent.type === doc) {
+  if (!isEmptySelectionAtEnd(state) || !dispatch) {
     return false;
-  } // previous was empty, just delete backwards
+  } // look for the node after this current one
 
 
-  const taskBefore = $next.doc.resolve($next.before());
+  const $next = walkOut($from); // this is a top-level node it wont have $next.before()
 
-  if (taskBefore.nodeBefore && isActionOrDecisionItem(taskBefore.nodeBefore) && taskBefore.nodeBefore.nodeSize === 2) {
+  if (!$next.parent || $next.parent.type === doc) {
     return false;
   } // if nested, just unindent
 
 
   if ($next.node($next.depth - 2).type === taskList || // this is for the case when we are on a non-nested item and next one is nested
   $next.node($next.depth - 1).type === taskList && $next.parent.type === taskList) {
-    const tr = liftBlock(state.tr, $next, $next);
-
-    if (dispatch && tr) {
-      dispatch(tr);
-    }
-
+    liftBlock(tr, $next, $next);
+    dispatch(tr);
     return true;
-  } // if located inside of a table, don't delete forward
-
-
-  if (isTable(taskBefore.nodeBefore)) {
-    return false;
-  } // bottom level, should "unwrap" taskItem contents into paragraph
-  // we achieve this by slicing the content out, and replacing
-
+  } // if next node is of same type, remove the node wrapping and create paragraph
 
-  if (actionDecisionFollowsOrNothing(state.selection.$from)) {
-    if (dispatch) {
-      const taskContent = state.doc.slice($next.start(), $next.end()).content; // might be end of document after
 
-      const slice = taskContent.size ? paragraph.createChecked(undefined, taskContent) : [];
-      dispatch(splitListItemWith(state.tr, slice, $next, false));
-    }
+  if (!isTable($next.nodeAfter) && isActionOrDecisionItem($from.parent) && actionDecisionFollowsOrNothing($from) && // only forward delete if the node is same type
+  $next.node().type.name === $from.node().type.name) {
+    const taskContent = state.doc.slice($next.start(), $next.end()).content; // might be end of document after
 
+    const slice = taskContent.size ? paragraph.createChecked(undefined, taskContent) : [];
+    dispatch(splitListItemWith(tr, slice, $next, false));
     return true;
   }
 
   return false;
-}));
-const deleteForwards = autoJoin(deleteHandler, ['taskList', 'decisionList']);
+};
+
+const deleteForwards = autoJoin(chainCommands(deleteEmptyParagraphAndMoveBlockUp(isActionOrDecisionList), joinTaskDecisionFollowing, unindentTaskOrUnwrapTaskDecisionFollowing), ['taskList', 'decisionList']);
 
 const splitListItemWith = (tr, content, $from, setSelection) => {
   const origDoc = tr.doc; // split just before the current item
@@ -366,6 +367,7 @@ export function keymapPlugin(schema, allowNestedTasks, consumeTabs) {
   const keymaps = {
     Backspace: backspace,
     Delete: deleteForwards,
+    'Ctrl-d': deleteForwards,
     Enter: enter,
     ...(allowNestedTasks ? indentHandlers : defaultHandlers)
   };

package/dist/es2019/plugins/text-formatting/pm-plugins/input-rule.js

@@ -1,5 +1,4 @@
 import { createPlugin, createRule, ruleWithAnalytics } from '../../../utils/input-rules';
-import { getFeatureFlags } from '../../feature-flags-context';
 import { leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '../../analytics';
 import { transformSmartCharsMentionsAndEmojis } from '../commands/transform-to-code';
@@ -89,23 +88,6 @@ function addMark(markType, schema, char) {
       tr.delete(mappedEnd - char.length, mappedEnd);
     }
 
-    const {
-      useUnpredictableInputRule
-    } = getFeatureFlags(state);
-
-    if (useUnpredictableInputRule) {
-      // THe unpredictable input rule is keeping the last char in the document
-      // for example: `lol` the second stick need to removed
-      if (char.length === 2) {
-        tr.delete(mappedEnd - 1, mappedEnd);
-      } // And for range selection too
-
-
-      if (!tr.selection.empty) {
-        tr.deleteSelection();
-      }
-    }
-
     if (textPrefix === char) {
       tr.delete(mappedStart, mappedStart + char.length);
     }
@@ -269,9 +251,7 @@ export function inputRulePlugin(schema, featureFlags) {
   }
 
   if (rules.length !== 0) {
-    return createPlugin('text-formatting', rules, {
-      useUnpredictableInputRule: featureFlags.useUnpredictableInputRule
-    });
+    return createPlugin('text-formatting', rules);
   }
 
   return;

package/dist/es2019/plugins/text-formatting/pm-plugins/main.js

@@ -91,9 +91,9 @@ export const plugin = dispatch => new SafePlugin({
         dispatch
       } = view;
 
-      if (event.key === keymaps.moveRight.common) {
+      if (event.key === keymaps.moveRight.common && !event.metaKey) {
         return commands.moveRight()(state, dispatch);
-      } else if (event.key === keymaps.moveLeft.common) {
+      } else if (event.key === keymaps.moveLeft.common && !event.metaKey) {
         return commands.moveLeft()(state, dispatch);
       }
 

package/dist/es2019/plugins/text-formatting/pm-plugins/smart-input-rule.js

@@ -158,6 +158,4 @@ function getPunctuationRules() {
   return [...dashEllipsisRules, ...doubleQuoteRules, ...singleQuoteRules.map(rule => punctuationRuleWithAnalytics(PUNC.QUOTE_SINGLE)(rule))];
 }
 
-export default (featureFlags => createPlugin('text-formatting:smart-input', [...getProductRules(), ...getSymbolRules(), ...getPunctuationRules()], {
-  useUnpredictableInputRule: featureFlags.useUnpredictableInputRule
-}));
+export default (featureFlags => createPlugin('text-formatting:smart-input', [...getProductRules(), ...getSymbolRules(), ...getPunctuationRules()]));

package/dist/es2019/plugins/type-ahead/pm-plugins/input-rules.js

@@ -24,8 +24,7 @@ export function inputRulePlugin(schema, typeAheads, featureFlags) {
     return acc;
   }, []);
   const plugin = createPlugin('type-ahead', rules, {
-    allowInsertTextOnDocument: false,
-    useUnpredictableInputRule: featureFlags.useUnpredictableInputRule
+    allowInsertTextOnDocument: false
   });
   return plugin;
 }

package/dist/es2019/ui/Appearance/Chromeless.js

@@ -67,7 +67,9 @@ export default class Editor extends React.Component {
             `],
         "data-testid": "chromeless-editor",
         ref: ref => this.containerElement = ref
-      }, jsx(ContentArea, null, customContentComponents, jsx(PluginSlot, {
+      }, jsx(ContentArea, {
+        className: "ak-editor-content-area"
+      }, customContentComponents, jsx(PluginSlot, {
         editorView: editorView,
         editorActions: editorActions,
         eventDispatcher: eventDispatcher,

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -14,7 +14,7 @@ import WithPluginState from '../../WithPluginState';
 import { pluginKey as maxContentSizePluginKey } from '../../../plugins/max-content-size';
 import { stateKey as mediaPluginKey } from '../../../plugins/media/pm-plugins/plugin-key';
 import { ClickAreaBlock } from '../../Addon';
-import { tableCommentEditorStyles } from '../../../plugins/table/ui/common-styles';
+import { tableCommentEditorStyles } from '@atlaskit/editor-plugin-table/ui/common-styles';
 import WithFlash from '../../WithFlash';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';

package/dist/es2019/ui/Appearance/FullPage/FullPageToolbar.js

@@ -74,7 +74,7 @@ export const EditorToolbar = /*#__PURE__*/React.memo(props => {
       "data-testid": "ak-editor-main-toolbar"
     }, jsx("div", {
       css: mainToolbarFirstChildStyle(!!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.twoLineEditorToolbar)),
-      role: "region",
+      role: "toolbar",
       "aria-label": props.intl.formatMessage(messages.toolbarLabel)
     }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), jsx("div", {
       css: mainToolbarSecondChildStyle(!!((_props$featureFlags10 = props.featureFlags) !== null && _props$featureFlags10 !== void 0 && _props$featureFlags10.twoLineEditorToolbar)),

package/dist/es2019/ui/Appearance/FullPage/StyledComponents.js

@@ -2,8 +2,8 @@ import { css } from '@emotion/react';
 import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorSwoopCubicBezier, akLayoutGutterOffset, ATLASSIAN_NAVIGATION_HEIGHT, akEditorContextPanelWidth } from '@atlaskit/editor-shared-styles';
 import { taskListSelector, decisionListSelector } from '@atlaskit/adf-schema';
 import { createEditorContentStyle } from '../../ContentStyles';
-import { tableFullPageEditorStyles } from '../../../plugins/table/ui/common-styles';
-import { tableMarginFullWidthMode } from '../../../plugins/table/ui/consts';
+import { tableFullPageEditorStyles } from '@atlaskit/editor-plugin-table/ui/common-styles';
+import { tableMarginFullWidthMode } from '@atlaskit/editor-plugin-table/ui/consts';
 import { scrollbarStyles } from '../../styles';
 const SWOOP_ANIMATION = `0.5s ${akEditorSwoopCubicBezier}`;
 const TOTAL_PADDING = akEditorGutterPadding * 2;

package/dist/es2019/ui/ColorPickerButton/index.js

@@ -33,6 +33,12 @@ const ColorPickerButton = props => {
     setIsPopupOpen(!isPopupOpen);
   };
 
+  React.useEffect(() => {
+    if (props.setDisableParentScroll) {
+      props.setDisableParentScroll(isPopupOpen);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [isPopupOpen]);
   const ColorPaletteWithListeners = withOuterListeners(ColorPalette);
 
   const onColorSelected = (color, label) => {
@@ -70,7 +76,13 @@ const ColorPickerButton = props => {
       fitHeight: 350,
       fitWidth: 350,
       offset: [0, 10],
-      alignX: props.alignX
+      alignX: props.alignX,
+      mountTo: props.setDisableParentScroll ? props.mountPoint : undefined // Confluence inline comment editor has z-index: 500
+      // if the toolbar is scrollable, this will be mounted in the root editor
+      // we need an index of > 500 to display over it
+      ,
+      zIndex: props.setDisableParentScroll ? 600 : undefined,
+      ariaLabel: "Color picker popup"
     }, jsx("div", {
       css: colorPickerWrapper
     }, jsx(ColorPaletteWithListeners, {

package/dist/es2019/ui/ContentStyles/index.js

@@ -7,7 +7,7 @@ import { token } from '@atlaskit/tokens';
 import { unsupportedStyles } from '../../plugins/unsupported-content/styles';
 import { telepointerStyle } from '../../plugins/collab-edit/styles';
 import { gapCursorStyles } from '../../plugins/selection/gap-cursor/styles';
-import { tableStyles } from '../../plugins/table/ui/common-styles';
+import { tableStyles } from '@atlaskit/editor-plugin-table/ui/common-styles';
 import { placeholderStyles } from '../../plugins/placeholder/styles';
 import { blocktypeStyles } from '../../plugins/block-type/styles';
 import { codeBlockStyles } from '../../plugins/code-block/styles';

package/dist/es2019/ui/ElementBrowser/InsertMenu.js

@@ -101,7 +101,8 @@ const ViewMore = ({
       css: itemBefore
     }, item.icon()),
     "aria-describedby": item.title,
-    "data-testid": "view-more-elements-item",
+    "data-testid": "view-more-elements-item" // @ts-ignore Overriding Menu styles is not supported
+    ,
     css: css`
           padding: 0px 12px;
         `

package/dist/es2019/ui/PortalProvider/index.js

@@ -11,6 +11,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plu
 import { useIntl, RawIntlProvider, injectIntl } from 'react-intl-next';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { PortalProviderThemeProviders } from './PortalProviderThemesProvider';
+import { IntlProviderIfMissingWrapper } from '@atlaskit/editor-common/ui';
 export class PortalProviderAPI extends EventDispatcher {
   constructor(intl, onAnalyticsEvent, analyticsContext, themeMode) {
     super();
@@ -135,17 +136,32 @@ class BasePortalProvider extends React.Component {
 _defineProperty(BasePortalProvider, "displayName", 'PortalProvider');
 
 export const PortalProvider = injectIntl(BasePortalProvider);
-export const PortalProviderWithThemeProviders = props => {
+export const PortalProviderWithThemeProviders = ({
+  onAnalyticsEvent,
+  useAnalyticsContext,
+  render
+}) => /*#__PURE__*/React.createElement(IntlProviderIfMissingWrapper, null, /*#__PURE__*/React.createElement(PortalProviderWithThemeAndIntlProviders, {
+  onAnalyticsEvent: onAnalyticsEvent,
+  useAnalyticsContext: useAnalyticsContext,
+  render: render
+}));
+
+const PortalProviderWithThemeAndIntlProviders = ({
+  onAnalyticsEvent,
+  useAnalyticsContext,
+  render
+}) => {
   const intl = useIntl();
   const globalTheme = useGlobalTheme();
   return /*#__PURE__*/React.createElement(BasePortalProvider, {
     intl: intl,
     themeMode: globalTheme.mode,
-    onAnalyticsEvent: props.onAnalyticsEvent,
-    useAnalyticsContext: props.useAnalyticsContext,
-    render: props.render
+    onAnalyticsEvent: onAnalyticsEvent,
+    useAnalyticsContext: useAnalyticsContext,
+    render: render
   });
 };
+
 export class PortalRenderer extends React.Component {
   constructor(props) {
     super(props);

package/dist/es2019/ui/Resizer/index.js

@@ -43,7 +43,6 @@ export default class Resizer extends React.Component {
     _defineProperty(this, "handleResizeStart", event => {
       const {
         innerPadding = 0,
-        handleResizeStart,
         highlights,
         displayGrid,
         layout,
@@ -52,11 +51,6 @@ export default class Resizer extends React.Component {
       } = this.props; // prevent creating a drag event on Firefox
 
       event.preventDefault();
-
-      if (handleResizeStart && !handleResizeStart(event)) {
-        return false;
-      }
-
       this.setState({
         isResizing: true
       }, () => {