@atlaskit/editor-core 175.0.5 → 176.0.0

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

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

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

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

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

@@ -9,7 +9,9 @@ exports.default = exports.CAPTION_PLACEHOLDER_ID = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = require("@emotion/react");
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -21,18 +23,19 @@ var _messages = require("./messages");
 
 var _templateObject;
 
-var placeholder = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  width: 100%;\n  text-align: center;\n  margin-top: 8px !important;\n  display: block;\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N200));
+var placeholder = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  width: 100%;\n  text-align: center;\n  margin-top: 8px !important;\n  display: block;\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N200));
 var CAPTION_PLACEHOLDER_ID = 'caption-placeholder';
 exports.CAPTION_PLACEHOLDER_ID = CAPTION_PLACEHOLDER_ID;
 
-var _default = function _default(_ref) {
+var _default = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var onClick = _ref.onClick;
-  return (0, _react.jsx)("span", {
+  return (0, _react2.jsx)("span", {
+    ref: ref,
     css: placeholder,
     onClick: onClick,
     "data-id": CAPTION_PLACEHOLDER_ID,
     "data-testid": "caption-placeholder"
-  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.placeholder));
-};
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.placeholder));
+});
 
 exports.default = _default;

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

@@ -10,8 +10,8 @@ var _reactIntlNext = require("react-intl-next");
 var toolbarMediaMessages = (0, _reactIntlNext.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'
   }
 });
 exports.toolbarMediaMessages = toolbarMediaMessages;

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

@@ -22,6 +22,11 @@ var messages = (0, _reactIntlNext.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'
   }
 });
 exports.messages = messages;

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

@@ -11,18 +11,34 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Mention = _interopRequireDefault(require("../ui/Mention"));
 
+var _reactIntlNext = require("react-intl-next");
+
+var _messages = require("../messages");
+
+var MentionAssistiveTextComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var mentionedName = _ref.mentionedName;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: 'assistive'
+  }, "".concat(intl.formatMessage(_messages.messages.mentionsNodeLabel), " ").concat(mentionedName));
+});
+
 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.default.createElement(_Mention.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(MentionAssistiveTextComponent, {
+    mentionedName: text
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement(_Mention.default, {
     id: id,
     text: text,
     accessLevel: accessLevel,
     providers: providerFactory
-  });
+  })));
 };
 
 exports.MentionNodeView = MentionNodeView;

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

@@ -21,5 +21,5 @@ var _tokens = require("@atlaskit/tokens");
 
 var _templateObject;
 
-var mentionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), (0, _tokens.token)('color.text.subtle', _colors.N500), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackgroundWithOpacity), _mention.MentionSharedCssClassName.MENTION_CONTAINER, (0, _tokens.token)('color.background.neutral', _colors.N30A), (0, _tokens.token)('color.text.subtle', _colors.N500));
+var mentionsStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), (0, _tokens.token)('color.text.subtle', _colors.N500), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackgroundWithOpacity), _mention.MentionSharedCssClassName.MENTION_CONTAINER, (0, _tokens.token)('color.background.neutral', _colors.N30A), (0, _tokens.token)('color.text.subtle', _colors.N500));
 exports.mentionsStyles = mentionsStyles;

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

@@ -31,6 +31,10 @@ var _element = require("@atlaskit/mention/element");
 
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 
+var _utils = require("@atlaskit/editor-common/utils");
+
+var _refreshBrowserSelection = require("../../../code-block/refresh-browser-selection");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -73,6 +77,17 @@ var Mention = /*#__PURE__*/function (_PureComponent) {
   }
 
   (0, _createClass2.default)(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 (_utils.browser.safari) {
+        setTimeout(_refreshBrowserSelection.refreshBrowserSelection, 0);
+      }
+    }
+  }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       if (!this.props.providers) {

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

@@ -74,7 +74,7 @@ var changePanelType = function changePanelType(panelType) {
     var newTr;
 
     if (allowCustomPanel) {
-      var previousColor = panelNode.node.attrs.panelColor || (0, _panel.getPanelTypeBackground)(previousType);
+      var previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : (0, _panel.getPanelTypeBackgroundNoTokens)(previousType);
       var previousIcon = panelNode.node.attrs.panelIcon;
       var previousIconId = panelNode.node.attrs.panelIconId;
       var previousIconText = panelNode.node.attrs.panelIconText;

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

@@ -163,6 +163,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: _colors.T50
               }, state, insert);

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

@@ -125,7 +125,7 @@ var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isC
           return false;
         }
 
-        var previousColor = panelNode.node.attrs.panelColor || (0, _panel.getPanelTypeBackground)(panelNode.node.attrs.panelType);
+        var previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : (0, _panel.getPanelTypeBackgroundNoTokens)(panelNode.node.attrs.panelType);
         var emojiInfo = panelNode.node.attrs.panelType;
         var panelEmoji = panelIconMap[emojiInfo];
         var previousEmoji = panelEmoji ? {
@@ -225,7 +225,7 @@ var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isC
       };
     };
 
-    var panelColor = activePanelType === _adfSchema.PanelType.CUSTOM ? activePanelColor || (0, _panel.getPanelTypeBackground)(_adfSchema.PanelType.INFO) : (0, _panel.getPanelTypeBackground)(activePanelType);
+    var panelColor = activePanelType === _adfSchema.PanelType.CUSTOM ? activePanelColor || (0, _panel.getPanelTypeBackgroundNoTokens)(_adfSchema.PanelType.INFO) : (0, _panel.getPanelTypeBackgroundNoTokens)(activePanelType);
     var defaultPalette = _panelBackgroundPalette.panelBackgroundPalette.find(function (item) {
       return item.value === panelColor;
     }) || {

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

@@ -9,8 +9,7 @@ var _main = require("./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() {
@@ -21,7 +20,7 @@ var pastePlugin = function pastePlugin(_ref) {
               providerFactory = _ref2.providerFactory,
               dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
               dispatch = _ref2.dispatch;
-          return (0, _main.createPlugin)(schema, dispatchAnalyticsEvent, dispatch, plainTextPasteLinkification, cardOptions, sanitizePrivateContent, providerFactory);
+          return (0, _main.createPlugin)(schema, dispatchAnalyticsEvent, dispatch, cardOptions, sanitizePrivateContent, providerFactory);
         }
       }];
     }

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

@@ -89,7 +89,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 _analytics.sendPasteAnalyticsEvent;
 
-function createPlugin(schema, dispatchAnalyticsEvent, dispatch, plainTextPasteLinkification, cardOptions, sanitizePrivateContent, providerFactory) {
+function createPlugin(schema, dispatchAnalyticsEvent, dispatch, cardOptions, sanitizePrivateContent, providerFactory) {
   var atlassianMarkDownParser = new _editorMarkdownTransformer.MarkdownTransformer(schema, _md.md);
 
   function getMarkdownSlice(text, openStart, openEnd) {
@@ -285,7 +285,7 @@ function createPlugin(schema, dispatchAnalyticsEvent, dispatch, plainTextPasteLi
         };
 
         slice = (0, _handlers.handleParagraphBlockMarks)(state, slice);
-        var plainTextPasteSlice = plainTextPasteLinkification === true ? (0, _utils.linkifyContent)(state.schema)(slice) : slice;
+        var plainTextPasteSlice = (0, _utils.linkifyContent)(state.schema)(slice);
 
         if ((0, _analytics.handlePasteAsPlainTextWithAnalytics)(view, event, plainTextPasteSlice)(state, dispatch, view)) {
           return true;

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

@@ -9,6 +9,9 @@ exports.default = IconAction;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconAction() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconCode;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconCode() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconCustomPanel;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconCustomPanel() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     width: "40",

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

@@ -9,6 +9,9 @@ exports.default = IconDate;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconDate() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconDecision;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconDecision() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconDivider;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconDivider() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconEmoji;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconEmoji() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconExpand;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconExpand() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconFallback;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconFallback() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconFeedback;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconFeedback() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconHeading1;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconHeading1() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconHeading2;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconHeading2() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconHeading3;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconHeading3() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconHeading4;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconHeading4() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconHeading5;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconHeading5() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconHeading6;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconHeading6() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconImages;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconImages() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconLayout;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconLayout() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconLink;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconLink() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconListOrdered;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconListOrdered() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconList;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconList() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconMention;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconMention() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconPanelError;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconPanelError() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconPanelNote;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconPanelNote() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconPanelSuccess;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconPanelSuccess() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconPanelWarning;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconPanelWarning() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconPanel;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconPanel() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconQuote;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconQuote() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -9,6 +9,9 @@ exports.default = IconStatus;
 
 var _react = _interopRequireDefault(require("react"));
 
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4138
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 function IconStatus() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false",

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setSelectionTopLevelBlocks = exports.setGapCursorAtPos = exports.setCursorForTopLevelBlocks = exports.hasGapCursorPlugin = exports.deleteNode = exports.arrow = void 0;
+exports.shouldSkipGapCursor = exports.setSelectionTopLevelBlocks = exports.setGapCursorAtPos = exports.setCursorForTopLevelBlocks = exports.hasGapCursorPlugin = exports.deleteNode = exports.arrow = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -27,6 +27,8 @@ var _position = require("../../../utils/prosemirror/position");
 
 var _gapCursorPluginKey = require("../pm-plugins/gap-cursor-plugin-key");
 
+var _table = require("../../../utils/table");
+
 var _mapDirection;
 
 var mapDirection = (_mapDirection = {}, (0, _defineProperty2.default)(_mapDirection, _direction.Direction.LEFT, -1), (0, _defineProperty2.default)(_mapDirection, _direction.Direction.RIGHT, 1), (0, _defineProperty2.default)(_mapDirection, _direction.Direction.UP, -1), (0, _defineProperty2.default)(_mapDirection, _direction.Direction.DOWN, 1), (0, _defineProperty2.default)(_mapDirection, _direction.Direction.BACKWARD, -1), (0, _defineProperty2.default)(_mapDirection, _direction.Direction.FORWARD, 1), _mapDirection);
@@ -74,10 +76,31 @@ function shouldHandleMediaGapCursor(dir, state) {
   return true;
 }
 
+var shouldSkipGapCursor = function shouldSkipGapCursor(direction, state, $pos) {
+  var doc = state.doc,
+      schema = state.schema;
+
+  switch (direction) {
+    case _direction.Direction.UP:
+      if ((0, _position.atTheBeginningOfDoc)(state)) {
+        return false;
+      }
+
+      return (0, _table.isPositionNearTableRow)($pos, schema, 'before') || (0, _utils2.isTextBlockNearPos)(doc, schema, $pos, -1);
+
+    case _direction.Direction.DOWN:
+      return (0, _position.atTheEndOfDoc)(state) || (0, _utils2.isTextBlockNearPos)(doc, schema, $pos, 1) || (0, _table.isPositionNearTableRow)($pos, schema, 'after');
+
+    default:
+      return false;
+  }
+};
+
+exports.shouldSkipGapCursor = shouldSkipGapCursor;
+
 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 = (0, _direction.isBackward)(dir) ? selection.$from : selection.$to;
@@ -90,7 +113,7 @@ var arrow = function arrow(dir, endOfTextblock) {
       } // UP/DOWN jumps to the nearest texblock skipping gapcursor whenever possible
 
 
-      if (dir === _direction.Direction.UP && !(0, _position.atTheBeginningOfDoc)(state) && (0, _utils2.isTextBlockNearPos)(doc, schema, $pos, -1) || dir === _direction.Direction.DOWN && ((0, _position.atTheEndOfDoc)(state) || (0, _utils2.isTextBlockNearPos)(doc, schema, $pos, 1))) {
+      if (shouldSkipGapCursor(dir, state, $pos)) {
         return false;
       } // otherwise resolve previous/next position