@atlaskit/editor-core 175.0.4 → 176.0.0

package/dist/esm/plugins/media/nodeviews/mediaSingle.js

@@ -20,7 +20,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaSingle, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
@@ -30,7 +30,7 @@ import { pluginKey as widthPluginKey } from '../../width';
 import { setNodeSelection, setTextSelection } from '../../../utils';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import { createDisplayGrid } from '../../../plugins/grid';
-import { stateKey as mediaPluginKey } from '../pm-plugins/main';
+import { stateKey as mediaPluginKey, MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -67,6 +67,10 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       isCopying: false
     });
 
+    _defineProperty(_assertThisInitialized(_this), "mediaSingleWrapperRef", /*#__PURE__*/React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "captionPlaceHolderRef", /*#__PURE__*/React.createRef());
+
     _defineProperty(_assertThisInitialized(_this), "createMediaNodeUpdater", function (props) {
       var node = _this.props.node.firstChild;
       return new MediaNodeUpdater(_objectSpread(_objectSpread({}, props), {}, {
@@ -264,6 +268,20 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       return dispatch(tr);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onMediaSingleClicked", function (event) {
+      var _this$captionPlaceHol;
+
+      if (!browser.ios) {
+        return;
+      }
+
+      if (_this.mediaSingleWrapperRef.current !== event.target) {
+        return;
+      }
+
+      (_this$captionPlaceHol = _this.captionPlaceHolderRef.current) === null || _this$captionPlaceHol === void 0 ? void 0 : _this$captionPlaceHol.click();
+    });
+
     _defineProperty(_assertThisInitialized(_this), "clickPlaceholder", function () {
       var _this$props = _this.props,
           view = _this$props.view,
@@ -430,11 +448,14 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       var isSelected = selected();
       var shouldShowPlaceholder = getMediaFeatureFlag('captions', mediaOptions.featureFlags) && node.childCount !== 2 && isSelected && state.selection instanceof NodeSelection;
       var MediaChildren = jsx("figure", {
+        ref: this.mediaSingleWrapperRef,
         css: figureWrapper,
-        className: MediaSingleNodeSelector
+        className: MediaSingleNodeSelector,
+        onClick: this.onMediaSingleClicked
       }, jsx("div", {
         ref: this.props.forwardRef
       }), shouldShowPlaceholder && jsx(CaptionPlaceholder, {
+        ref: this.captionPlaceHolderRef,
         onClick: this.clickPlaceholder
       }));
       return canResize ? jsx(ResizableMediaSingle, _extends({}, mediaSingleProps, {
@@ -519,7 +540,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
     key: "getContentDOM",
     value: function getContentDOM() {
       var dom = document.createElement('div');
-      dom.classList.add("media-content-wrap");
+      dom.classList.add(MEDIA_CONTENT_WRAP_CLASS_NAME);
       return {
         dom: dom
       };

package/dist/esm/plugins/media/pm-plugins/main.js

@@ -40,6 +40,7 @@ import { CAPTION_PLACEHOLDER_ID } from '../ui/CaptionPlaceholder';
 import { RawIntlProvider } from 'react-intl-next';
 import { MediaTaskManager } from './mediaTaskManager';
 export { stateKey } from './plugin-key';
+export var MEDIA_CONTENT_WRAP_CLASS_NAME = 'media-content-wrap';
 
 var createDropPlaceholder = function createDropPlaceholder(intl, allowDropLine) {
   var dropPlaceholder = document.createElement('div');
@@ -863,7 +864,19 @@ export var createPlugin = function createPlugin(_schema, options, reactContext,
         // Returning true prevents that updateSelection() is getting called in the commit below:
         // @see https://github.com/ProseMirror/prosemirror-view/compare/1.18.5...1.18.6
 
-        return Boolean((browser.chrome || browser.safari) && clickedInsideCaptionPlaceholder);
+        if ((browser.chrome || browser.safari) && clickedInsideCaptionPlaceholder) {
+          return true;
+        } // Workaound for iOS 16 Caption selection issue
+        // @see https://product-fabric.atlassian.net/browse/MEX-2012
+
+
+        if (browser.ios) {
+          var _event$target2;
+
+          return !!((_event$target2 = event.target) !== null && _event$target2 !== void 0 && _event$target2.closest("[class=\"".concat(MEDIA_CONTENT_WRAP_CLASS_NAME, "\"]")));
+        }
+
+        return false;
       }
     }
   });

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

@@ -33,6 +33,7 @@ export var altTextEditComponent = function altTextEditComponent(options) {
   return {
     type: 'custom',
     fallback: [],
+    disableArrowNavigation: true,
     render: function render(view, idx) {
       if (!view) {
         return null;

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

@@ -47,6 +47,7 @@ export var getLinkingToolbar = function getLinkingToolbar(toolbarBaseConfig, med
         items: [{
           type: 'custom',
           fallback: [],
+          disableArrowNavigation: true,
           render: function render(view, idx) {
             if (!view || !providerFactory) {
               return null;

package/dist/esm/plugins/media/ui/CaptionPlaceholder/index.js

@@ -3,6 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 /** @jsx jsx */
+import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { N200 } from '@atlaskit/theme/colors';
@@ -10,9 +11,10 @@ import { token } from '@atlaskit/tokens';
 import { messages } from './messages';
 var placeholder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  width: 100%;\n  text-align: center;\n  margin-top: 8px !important;\n  display: block;\n"])), token('color.text.subtlest', N200));
 export var CAPTION_PLACEHOLDER_ID = 'caption-placeholder';
-export default (function (_ref) {
+export default /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var onClick = _ref.onClick;
   return jsx("span", {
+    ref: ref,
     css: placeholder,
     onClick: onClick,
     "data-id": CAPTION_PLACEHOLDER_ID,

package/dist/esm/plugins/media/ui/ToolbarMedia/toolbar-media-messages.js

@@ -2,7 +2,7 @@ import { defineMessages } from 'react-intl-next';
 export var toolbarMediaMessages = defineMessages({
   toolbarMediaTitle: {
     id: 'fabric.editor.toolbarMediaTitle',
-    defaultMessage: 'Files & images',
-    description: 'a label for an icon that describes files and images'
+    defaultMessage: 'Add image, video, or file',
+    description: 'a label for an icon that describes files, videos and images'
   }
 });

package/dist/esm/plugins/mentions/messages.js

@@ -14,5 +14,10 @@ export var messages = defineMessages({
     id: 'fabric.editor.mentionsIconLabel',
     defaultMessage: 'Mention',
     description: 'icon label to describe the mention icon'
+  },
+  mentionsNodeLabel: {
+    id: 'fabric.editor.mentionNode.label',
+    defaultMessage: 'Tagged user',
+    description: 'Label to indicate mention node to Screen reader users, that preceeds with user name ex: "Tagged user @XXX'
   }
 });

package/dist/esm/plugins/mentions/nodeviews/mention.js

@@ -1,15 +1,28 @@
 import React from 'react';
 import Mention from '../ui/Mention';
+import { useIntl } from 'react-intl-next';
+import { messages } from '../messages';
+var MentionAssistiveTextComponent = /*#__PURE__*/React.memo(function (_ref) {
+  var mentionedName = _ref.mentionedName;
+  var intl = useIntl();
+  return /*#__PURE__*/React.createElement("span", {
+    className: 'assistive'
+  }, "".concat(intl.formatMessage(messages.mentionsNodeLabel), " ").concat(mentionedName));
+});
 export var MentionNodeView = function MentionNodeView(props) {
   var providerFactory = props.providerFactory;
   var _props$node$attrs = props.node.attrs,
       id = _props$node$attrs.id,
       text = _props$node$attrs.text,
       accessLevel = _props$node$attrs.accessLevel;
-  return /*#__PURE__*/React.createElement(Mention, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MentionAssistiveTextComponent, {
+    mentionedName: text
+  }), /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement(Mention, {
     id: id,
     text: text,
     accessLevel: accessLevel,
     providers: providerFactory
-  });
+  })));
 };

package/dist/esm/plugins/mentions/styles.js

@@ -7,4 +7,4 @@ import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackgroundWithOpacity, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { N500, N30A } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-export var mentionsStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), token('color.text.subtle', N500), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, token('color.background.danger', akEditorDeleteBackgroundWithOpacity), MentionSharedCssClassName.MENTION_CONTAINER, token('color.background.neutral', N30A), token('color.text.subtle', N500));
+export var mentionsStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), token('color.text.subtle', N500), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, token('color.background.danger', akEditorDeleteBackgroundWithOpacity), MentionSharedCssClassName.MENTION_CONTAINER, token('color.background.neutral', N30A), token('color.text.subtle', N500));

package/dist/esm/plugins/mentions/ui/Mention/index.js

@@ -15,6 +15,8 @@ import React from 'react';
 import { PureComponent } from 'react';
 import { ResourcedMention } from '@atlaskit/mention/element';
 import { ProviderFactory, WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { browser } from '@atlaskit/editor-common/utils';
+import { refreshBrowserSelection } from '../../../code-block/refresh-browser-selection';
 
 var Mention = /*#__PURE__*/function (_PureComponent) {
   _inherits(Mention, _PureComponent);
@@ -53,6 +55,17 @@ var Mention = /*#__PURE__*/function (_PureComponent) {
   }
 
   _createClass(Mention, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      // Workaround an issue where the selection is not updated immediately after adding
+      // a mention when "sanitizePrivateContent" is enabled in the editor on safari.
+      // This affects both insertion and paste behaviour it is applied to the component.
+      // https://product-fabric.atlassian.net/browse/ED-14859
+      if (browser.safari) {
+        setTimeout(refreshBrowserSelection, 0);
+      }
+    }
+  }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       if (!this.props.providers) {

package/dist/esm/plugins/panel/actions.js

@@ -8,7 +8,7 @@ import { removeParentNodeOfType, findSelectedNodeOfType, removeSelectedNode, fin
 import { NodeSelection } from 'prosemirror-state';
 import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, addAnalytics } from '../analytics';
 import { findPanel } from './utils';
-import { getPanelTypeBackground } from '@atlaskit/editor-common/panel';
+import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
 export var removePanel = function removePanel() {
   return function (state, dispatch) {
     var nodes = state.schema.nodes,
@@ -57,7 +57,7 @@ export var changePanelType = function changePanelType(panelType) {
     var newTr;
 
     if (allowCustomPanel) {
-      var previousColor = panelNode.node.attrs.panelColor || getPanelTypeBackground(previousType);
+      var previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : getPanelTypeBackgroundNoTokens(previousType);
       var previousIcon = panelNode.node.attrs.panelIcon;
       var previousIconId = panelNode.node.attrs.panelIconId;
       var previousIconText = panelNode.node.attrs.panelIconText;

package/dist/esm/plugins/panel/index.js

@@ -145,6 +145,7 @@ var panelPlugin = function panelPlugin() {
                 panelIcon: ':rainbow:',
                 panelIconId: '1f308',
                 panelIconText: '🌈',
+                // TODO: https://product-fabric.atlassian.net/browse/DSP-7268
                 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
                 panelColor: T50
               }, state, insert);

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

@@ -17,7 +17,7 @@ import commonMessages from '../../messages';
 import { removePanel, changePanelType } from './actions';
 import { hoverDecoration } from '../base/pm-plugins/decoration';
 import { panelBackgroundPalette } from '../../ui/ColorPalette/Palettes/panelBackgroundPalette';
-import { getPanelTypeBackground } from '@atlaskit/editor-common/panel';
+import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
 import { findPanel } from './utils';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { DEFAULT_BORDER_COLOR } from '../../ui/ColorPalette/Palettes';
@@ -96,7 +96,7 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
           return false;
         }
 
-        var previousColor = panelNode.node.attrs.panelColor || getPanelTypeBackground(panelNode.node.attrs.panelType);
+        var previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : getPanelTypeBackgroundNoTokens(panelNode.node.attrs.panelType);
         var emojiInfo = panelNode.node.attrs.panelType;
         var panelEmoji = panelIconMap[emojiInfo];
         var previousEmoji = panelEmoji ? {
@@ -196,7 +196,7 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
       };
     };
 
-    var panelColor = activePanelType === PanelType.CUSTOM ? activePanelColor || getPanelTypeBackground(PanelType.INFO) : getPanelTypeBackground(activePanelType);
+    var panelColor = activePanelType === PanelType.CUSTOM ? activePanelColor || getPanelTypeBackgroundNoTokens(PanelType.INFO) : getPanelTypeBackgroundNoTokens(activePanelType);
     var defaultPalette = panelBackgroundPalette.find(function (item) {
       return item.value === panelColor;
     }) || {

package/dist/esm/plugins/paste/index.js

@@ -2,8 +2,7 @@ import { createPlugin } from './pm-plugins/main';
 
 var pastePlugin = function pastePlugin(_ref) {
   var cardOptions = _ref.cardOptions,
-      sanitizePrivateContent = _ref.sanitizePrivateContent,
-      plainTextPasteLinkification = _ref.plainTextPasteLinkification;
+      sanitizePrivateContent = _ref.sanitizePrivateContent;
   return {
     name: 'paste',
     pmPlugins: function pmPlugins() {
@@ -14,7 +13,7 @@ var pastePlugin = function pastePlugin(_ref) {
               providerFactory = _ref2.providerFactory,
               dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
               dispatch = _ref2.dispatch;
-          return createPlugin(schema, dispatchAnalyticsEvent, dispatch, plainTextPasteLinkification, cardOptions, sanitizePrivateContent, providerFactory);
+          return createPlugin(schema, dispatchAnalyticsEvent, dispatch, cardOptions, sanitizePrivateContent, providerFactory);
         }
       }];
     }

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

@@ -32,7 +32,7 @@ import { extractSliceFromStep } from '../../../utils/step';
 import { pluginKey as stateKey, createPluginState } from './plugin-factory';
 export { pluginKey as stateKey } from './plugin-factory';
 export { md } from '../md';
-export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, plainTextPasteLinkification, cardOptions, sanitizePrivateContent, providerFactory) {
+export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, cardOptions, sanitizePrivateContent, providerFactory) {
   var atlassianMarkDownParser = new MarkdownTransformer(schema, md);
 
   function getMarkdownSlice(text, openStart, openEnd) {
@@ -226,7 +226,7 @@ export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, plainText
         };
 
         slice = handleParagraphBlockMarks(state, slice);
-        var plainTextPasteSlice = plainTextPasteLinkification === true ? linkifyContent(state.schema)(slice) : slice;
+        var plainTextPasteSlice = linkifyContent(state.schema)(slice);
 
         if (handlePasteAsPlainTextWithAnalytics(view, event, plainTextPasteSlice)(state, dispatch, view)) {
           return true;

package/dist/esm/plugins/quick-insert/assets/action.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconAction() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/code.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconCode() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/custom-panel.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconCustomPanel() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/date.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconDate() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/decision.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconDecision() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/divider.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconDivider() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/emoji.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconEmoji() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/expand.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconExpand() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/fallback.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconFallback() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/feedback.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconFeedback() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/heading1.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconHeading1() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/heading2.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconHeading2() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/heading3.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconHeading3() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/heading4.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconHeading4() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/heading5.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconHeading5() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/heading6.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconHeading6() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/images.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconImages() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/layout.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconLayout() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/link.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconLink() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/list-number.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconListOrdered() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/list.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconList() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/mention.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconMention() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/panel-error.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconPanelError() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/panel-note.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconPanelNote() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/panel-success.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconPanelSuccess() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/panel-warning.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconPanelWarning() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/panel.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconPanel() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/quote.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconQuote() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/quick-insert/assets/status.js

@@ -1,3 +1,6 @@
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 export default function IconStatus() {
   return /*#__PURE__*/React.createElement("svg", {

package/dist/esm/plugins/selection/gap-cursor/actions.js

@@ -2,15 +2,16 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 var _mapDirection;
 
-import { Selection, TextSelection, NodeSelection } from 'prosemirror-state';
-import { removeNodeBefore, findDomRefAtPos } from 'prosemirror-utils';
+import { NodeSelection, Selection, TextSelection } from 'prosemirror-state';
+import { findDomRefAtPos, removeNodeBefore } from 'prosemirror-utils';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { Direction, isBackward, isForward } from './direction';
 import { GapCursorSelection, Side } from './selection';
-import { isTextBlockNearPos, getMediaNearPos } from './utils';
+import { getMediaNearPos, isTextBlockNearPos } from './utils';
 import { isValidTargetNode } from './utils/is-valid-target-node';
 import { atTheBeginningOfDoc, atTheEndOfDoc } from '../../../utils/prosemirror/position';
 import { gapCursorPluginKey } from '../pm-plugins/gap-cursor-plugin-key';
+import { isPositionNearTableRow } from '../../../utils/table';
 var mapDirection = (_mapDirection = {}, _defineProperty(_mapDirection, Direction.LEFT, -1), _defineProperty(_mapDirection, Direction.RIGHT, 1), _defineProperty(_mapDirection, Direction.UP, -1), _defineProperty(_mapDirection, Direction.DOWN, 1), _defineProperty(_mapDirection, Direction.BACKWARD, -1), _defineProperty(_mapDirection, Direction.FORWARD, 1), _mapDirection);
 
 function shouldHandleMediaGapCursor(dir, state) {
@@ -56,10 +57,28 @@ function shouldHandleMediaGapCursor(dir, state) {
   return true;
 }
 
+export var shouldSkipGapCursor = function shouldSkipGapCursor(direction, state, $pos) {
+  var doc = state.doc,
+      schema = state.schema;
+
+  switch (direction) {
+    case Direction.UP:
+      if (atTheBeginningOfDoc(state)) {
+        return false;
+      }
+
+      return isPositionNearTableRow($pos, schema, 'before') || isTextBlockNearPos(doc, schema, $pos, -1);
+
+    case Direction.DOWN:
+      return atTheEndOfDoc(state) || isTextBlockNearPos(doc, schema, $pos, 1) || isPositionNearTableRow($pos, schema, 'after');
+
+    default:
+      return false;
+  }
+};
 export var arrow = function arrow(dir, endOfTextblock) {
   return function (state, dispatch, view) {
     var doc = state.doc,
-        schema = state.schema,
         selection = state.selection,
         tr = state.tr;
     var $pos = isBackward(dir) ? selection.$from : selection.$to;
@@ -72,7 +91,7 @@ export var arrow = function arrow(dir, endOfTextblock) {
       } // UP/DOWN jumps to the nearest texblock skipping gapcursor whenever possible
 
 
-      if (dir === Direction.UP && !atTheBeginningOfDoc(state) && isTextBlockNearPos(doc, schema, $pos, -1) || dir === Direction.DOWN && (atTheEndOfDoc(state) || isTextBlockNearPos(doc, schema, $pos, 1))) {
+      if (shouldSkipGapCursor(dir, state, $pos)) {
         return false;
       } // otherwise resolve previous/next position