@atlaskit/editor-core 165.0.0 → 166.0.0

package/dist/cjs/plugins/hyperlink/pm-plugins/keymap.js

@@ -18,8 +18,6 @@ var _main = require("../pm-plugins/main");
 
 var _commands = require("../commands");
 
-var _actions = require("../../card/pm-plugins/actions");
-
 var _analytics = require("../../analytics");
 
 var _analytics2 = require("../analytics");
@@ -77,13 +75,7 @@ var mayConvertLastWordToHyperlink = function mayConvertLastWordToHyperlink(skipA
       var markType = state.schema.mark('link', {
         href: url
       });
-      var tr = (0, _actions.queueCards)([{
-        url: url,
-        pos: start,
-        appearance: 'inline',
-        compareLinkText: true,
-        source: _analytics.INPUT_METHOD.AUTO_DETECT
-      }])(state.tr.addMark(start, end, markType));
+      var tr = state.tr.addMark(start, end, markType);
 
       if (dispatch) {
         if (skipAnalytics) {

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

@@ -19,6 +19,8 @@ var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _types = require("../table/types");
 
 var _consts = require("../table/ui/consts");
@@ -29,5 +31,5 @@ var LAYOUT_SECTION_MARGIN = (0, _constants.gridSize)();
 exports.LAYOUT_SECTION_MARGIN = LAYOUT_SECTION_MARGIN;
 var LAYOUT_COLUMN_PADDING = (0, _constants.gridSize)() * 1.5;
 exports.LAYOUT_COLUMN_PADDING = LAYOUT_COLUMN_PADDING;
-var layoutStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > *:first-child {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-child .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border-color: ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() - 1, _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSelectedBorderSize, _colors.N40A, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, _colors.N50A, _editorSharedStyles.akEditorDeleteBackground, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
+var layoutStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " [data-layout-section] {\n      margin: ", "px -", "px 0;\n      transition: border-color 0.3s ", ";\n      cursor: pointer;\n\n      /* Inner cursor located 26px from left */\n      [data-layout-column] {\n        flex: 1;\n        min-width: 0;\n        border: ", "px solid ", ";\n        border-radius: 4px;\n        padding: ", "px;\n        box-sizing: border-box;\n\n        > div {\n          > *:first-child {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child + * {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child + span + * {\n            margin-top: 0;\n          }\n\n          .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .mediaSingleView-content-wrap:first-child .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor.-right:first-child\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          > .ProseMirror-gapcursor:first-child\n            + span\n            + .mediaSingleView-content-wrap\n            .rich-media-item {\n            margin-top: 0;\n          }\n\n          /* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n          > [data-node-type='decisionList'] {\n            li:first-of-type [data-decision-wrapper] {\n              margin-top: 0;\n            }\n          }\n        }\n\n        /* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n        [data-layout-content] {\n          height: 100%;\n          cursor: text;\n        }\n      }\n\n      [data-layout-column] + [data-layout-column] {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        [data-layout-column] + [data-layout-column] {\n          margin-left: 0;\n        }\n      }\n\n      /* Shows the border when cursor is inside a layout */\n      &.selected [data-layout-column],\n      &:hover [data-layout-column] {\n        border-color: ", ";\n      }\n\n      &.selected.danger > [data-layout-column] {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &.", ":not(.danger) {\n        [data-layout-column] {\n          ", "\n        }\n      }\n    }\n  }\n\n  .fabric-editor--full-width-mode .ProseMirror {\n    [data-layout-section] {\n      .", " {\n        margin: 0 ", "px;\n      }\n    }\n  }\n"])), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() - 1, _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSelectedBorderSize, _colors.N40A, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, _colors.N50A, (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
 exports.layoutStyles = layoutStyles;

package/dist/cjs/plugins/list/commands/indent-list.js

@@ -25,6 +25,8 @@ var _selection = require("../utils/selection");
 
 var _analytics2 = require("../utils/analytics");
 
+var _prosemirrorHistory = require("prosemirror-history");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -37,8 +39,10 @@ function indentList() {
 
     if (!(0, _selection.isInsideListItem)(state)) {
       return false;
-    }
+    } // Save the history, so it could undo/revert to the same state before the indent, see https://product-fabric.atlassian.net/browse/ED-14753
+
 
+    (0, _prosemirrorHistory.closeHistory)(tr);
     var firstListItemSelectedAttributes = (0, _selection.getListItemAttributes)($from);
     var parentListNode = (0, _find.findFirstParentListNode)($from);
 

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

@@ -21,6 +21,8 @@ var _analytics2 = require("../utils/analytics");
 
 var _outdentListItemsSelected = require("../actions/outdent-list-items-selected");
 
+var _prosemirrorHistory = require("prosemirror-history");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -38,8 +40,10 @@ function outdentList() {
     if (!parentListNode) {
       // Even though this is a non-operation, we don't want to send this event to the browser. Because if we return false, the browser will move the focus to another place
       return true;
-    }
+    } // Save the history, so it could undo/revert to the same state before the outdent, see https://product-fabric.atlassian.net/browse/ED-14753
+
 
+    (0, _prosemirrorHistory.closeHistory)(state.tr);
     var actionSubjectId = (0, _node.isBulletList)(parentListNode.node) ? _analytics.ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : _analytics.ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
     var customTr = state.tr;
     (0, _outdentListItemsSelected.outdentListItemsSelected)(customTr);

package/dist/cjs/plugins/list/transforms.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.liftFollowingList = liftFollowingList;
 exports.liftSelectionList = liftSelectionList;
-exports.upgradeTextToLists = exports.splitParagraphs = void 0;
+exports.upgradeTextToLists = exports.splitParagraphs = exports.splitIntoParagraphs = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -263,8 +263,14 @@ var splitIntoParagraphs = function splitIntoParagraphs(_ref) {
   var _schema$nodes3 = schema.nodes,
       hardBreak = _schema$nodes3.hardBreak,
       paragraph = _schema$nodes3.paragraph;
-  fragment.forEach(function (node) {
-    if (lastNode && lastNode.type === hardBreak && node.type === hardBreak) {
+  fragment.forEach(function (node, i) {
+    // ED-14725 Fixed the issue that it make duplicated line
+    // when pasting <br /> from google docs.
+    if (i === 0 && node.type === hardBreak) {
+      paragraphs.push(paragraph.createChecked(undefined, curChildren, (0, _toConsumableArray2.default)(blockMarks)));
+      lastNode = node;
+      return;
+    } else if (lastNode && lastNode.type === hardBreak && node.type === hardBreak) {
       // double hardbreak
       // backtrack a little; remove the trailing hardbreak we added last loop
       curChildren.pop(); // create a new paragraph
@@ -286,6 +292,8 @@ var splitIntoParagraphs = function splitIntoParagraphs(_ref) {
   return _prosemirrorModel.Fragment.from(paragraphs.length ? paragraphs : [paragraph.createAndFill(undefined, undefined, (0, _toConsumableArray2.default)(blockMarks))]);
 };
 
+exports.splitIntoParagraphs = splitIntoParagraphs;
+
 var splitParagraphs = function splitParagraphs(slice, schema) {
   // exclude Text nodes with a code mark, since we transform those later
   // into a codeblock

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

@@ -19,9 +19,11 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _mediaCard = require("@atlaskit/media-card");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
-var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  .mediaGroupView-content-wrap.danger {\n    /* Media inline */\n    .", "::after {\n      border: 1px solid ", ";\n    }\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: rgb(255, 189, 173, 0.5); /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, _colors.N60, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _colors.B200, _editorSharedStyles.akEditorDeleteBackground, _editorSharedStyles.akEditorSelectedBorderBoldSize, _editorSharedStyles.akEditorDeleteBorder, _mediaCard.fileCardImageViewSelectedSelector, _editorSharedStyles.akEditorDeleteIconColor, _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, _editorSharedStyles.akEditorDeleteIconColor, _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, _editorSharedStyles.akEditorDeleteIconColor, _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, _editorSharedStyles.akEditorDeleteIconColor, _editorSharedStyles.akEditorDeleteIconColor);
+var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: 12px;\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: 12px;\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  .mediaGroupView-content-wrap.danger {\n    /* Media inline */\n    .", "::after {\n      border: 1px solid ", ";\n    }\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", ";\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: rgb(255, 189, 173, 0.5); /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, _colors.N60, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _colors.B200, (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), _editorSharedStyles.akEditorSelectedBorderBoldSize, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _mediaCard.fileCardImageViewSelectedSelector, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteIconColor), (0, _tokens.token)('color.icon.danger', _editorSharedStyles.akEditorDeleteIconColor));
 /* `left: unset` above is to work around Chrome bug where rendering a div with
  * that style applied inside a container that has a scroll, causes any svgs on
  * the page, without a border, that are inside a flexbox, to no longer align to

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

@@ -75,26 +75,22 @@ var mentionsPlugin = function mentionsPlugin(options) {
     pmPlugins: function pmPlugins() {
       return [{
         name: 'mention',
-        plugin: function plugin(_ref) {
-          var providerFactory = _ref.providerFactory,
-              dispatch = _ref.dispatch,
-              portalProviderAPI = _ref.portalProviderAPI,
-              eventDispatcher = _ref.eventDispatcher;
-          return (0, _main.createMentionPlugin)(dispatch, providerFactory, portalProviderAPI, eventDispatcher, fireEvent, options);
+        plugin: function plugin(pmPluginFactoryParams) {
+          return (0, _main.createMentionPlugin)(pmPluginFactoryParams, fireEvent, options);
         }
       }];
     },
-    secondaryToolbarComponent: function secondaryToolbarComponent(_ref2) {
-      var editorView = _ref2.editorView,
-          disabled = _ref2.disabled;
+    secondaryToolbarComponent: function secondaryToolbarComponent(_ref) {
+      var editorView = _ref.editorView,
+          disabled = _ref.disabled;
       return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
         editorView: editorView,
         plugins: {
           mentionState: _key.mentionPluginKey
         },
-        render: function render(_ref3) {
-          var _ref3$mentionState = _ref3.mentionState,
-              mentionState = _ref3$mentionState === void 0 ? {} : _ref3$mentionState;
+        render: function render(_ref2) {
+          var _ref2$mentionState = _ref2.mentionState,
+              mentionState = _ref2$mentionState === void 0 ? {} : _ref2$mentionState;
           return !mentionState.mentionProvider ? null : /*#__PURE__*/_react.default.createElement(_ToolbarMention.default, {
             editorView: editorView,
             isDisabled: disabled || (0, _utils.isTypeAheadAllowed)(editorView.state)
@@ -103,8 +99,8 @@ var mentionsPlugin = function mentionsPlugin(options) {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref4) {
-        var formatMessage = _ref4.formatMessage;
+      quickInsert: function quickInsert(_ref3) {
+        var formatMessage = _ref3.formatMessage;
         return [{
           id: 'mention',
           title: formatMessage(_messages.messages.mention),

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

@@ -6,75 +6,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MentionNodeView = void 0;
-exports.default = mentionNodeView;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _utils = require("@atlaskit/editor-common/utils");
-
 var _Mention = _interopRequireDefault(require("../ui/Mention"));
 
-var _nodeviews = require("../../../nodeviews");
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var MentionNodeView = /*#__PURE__*/function (_ReactNodeView) {
-  (0, _inherits2.default)(MentionNodeView, _ReactNodeView);
-
-  var _super = _createSuper(MentionNodeView);
-
-  function MentionNodeView() {
-    (0, _classCallCheck2.default)(this, MentionNodeView);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(MentionNodeView, [{
-    key: "createDomRef",
-    value: function createDomRef() {
-      return (0, _get2.default)((0, _getPrototypeOf2.default)(MentionNodeView.prototype), "createDomRef", this).call(this);
-    }
-  }, {
-    key: "render",
-    value: function render(props) {
-      var providerFactory = props.providerFactory,
-          options = props.options;
-      var _this$node$attrs = this.node.attrs,
-          id = _this$node$attrs.id,
-          text = _this$node$attrs.text,
-          accessLevel = _this$node$attrs.accessLevel;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Mention.default, {
-        id: id,
-        text: text,
-        accessLevel: accessLevel,
-        providers: providerFactory
-      }), options && options.allowZeroWidthSpaceAfter && _utils.ZERO_WIDTH_SPACE);
-    }
-  }]);
-  return MentionNodeView;
-}(_nodeviews.ReactNodeView);
-
-exports.MentionNodeView = MentionNodeView;
-
-function mentionNodeView(portalProviderAPI, eventDispatcher, providerFactory, options) {
-  return function (node, view, getPos) {
-    var hasIntlContext = true;
-    return new MentionNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
-      providerFactory: providerFactory,
-      options: options
-    }, undefined, undefined, undefined, hasIntlContext).init();
-  };
-}
+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, {
+    id: id,
+    text: text,
+    accessLevel: accessLevel,
+    providers: providerFactory
+  });
+};
+
+exports.MentionNodeView = MentionNodeView;

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

@@ -14,7 +14,9 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var _resource = require("@atlaskit/mention/resource");
 
-var _mention = _interopRequireDefault(require("../nodeviews/mention"));
+var _getInlineNodeViewProducer = require("../../../nodeviews/getInlineNodeViewProducer");
+
+var _mention = require("../nodeviews/mention");
 
 var _key = require("./key");
 
@@ -59,7 +61,7 @@ var setContext = function setContext(context) {
 
 exports.setContext = setContext;
 
-function createMentionPlugin(dispatch, providerFactory, portalProviderAPI, eventDispatcher, fireEvent, options) {
+function createMentionPlugin(pmPluginFactoryParams, fireEvent, options) {
   var mentionProvider;
 
   var sendAnalytics = function sendAnalytics(event, actionSubject, action, attributes) {
@@ -89,14 +91,14 @@ function createMentionPlugin(dispatch, providerFactory, portalProviderAPI, event
             newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
               mentionProvider: params.provider
             });
-            dispatch(_key.mentionPluginKey, newPluginState);
+            pmPluginFactoryParams.dispatch(_key.mentionPluginKey, newPluginState);
             return newPluginState;
 
           case ACTIONS.SET_CONTEXT:
             newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
               contextIdentifierProvider: params.context
             });
-            dispatch(_key.mentionPluginKey, newPluginState);
+            pmPluginFactoryParams.dispatch(_key.mentionPluginKey, newPluginState);
             return newPluginState;
         }
 
@@ -105,7 +107,14 @@ function createMentionPlugin(dispatch, providerFactory, portalProviderAPI, event
     },
     props: {
       nodeViews: {
-        mention: (0, _mention.default)(portalProviderAPI, eventDispatcher, providerFactory, options)
+        mention: (0, _getInlineNodeViewProducer.getInlineNodeViewProducer)({
+          pmPluginFactoryParams: pmPluginFactoryParams,
+          Component: _mention.MentionNodeView,
+          extraComponentProps: {
+            providerFactory: pmPluginFactoryParams.providerFactory,
+            options: options
+          }
+        })
       }
     },
     view: function view(editorView) {
@@ -143,13 +152,13 @@ function createMentionPlugin(dispatch, providerFactory, portalProviderAPI, event
         return;
       };
 
-      providerFactory.subscribe('mentionProvider', providerHandler);
-      providerFactory.subscribe('contextIdentifierProvider', providerHandler);
+      pmPluginFactoryParams.providerFactory.subscribe('mentionProvider', providerHandler);
+      pmPluginFactoryParams.providerFactory.subscribe('contextIdentifierProvider', providerHandler);
       return {
         destroy: function destroy() {
-          if (providerFactory) {
-            providerFactory.unsubscribe('mentionProvider', providerHandler);
-            providerFactory.unsubscribe('contextIdentifierProvider', providerHandler);
+          if (pmPluginFactoryParams.providerFactory) {
+            pmPluginFactoryParams.providerFactory.unsubscribe('mentionProvider', providerHandler);
+            pmPluginFactoryParams.providerFactory.unsubscribe('contextIdentifierProvider', providerHandler);
           }
 
           if (mentionProvider) {

package/dist/cjs/plugins/mentions/type-ahead/index.js

@@ -411,10 +411,15 @@ var createTypeAheadConfig = function createTypeAheadConfig(_ref6) {
     dismiss: function dismiss(_ref9) {
       var editorState = _ref9.editorState,
           query = _ref9.query,
-          stats = _ref9.stats;
+          stats = _ref9.stats,
+          wasItemInserted = _ref9.wasItemInserted;
       firstQueryWithoutResults = null;
       var pickerElapsedTime = stats.startedAt ? Date.now() - stats.startedAt : 0;
-      fireEvent((0, _analytics.buildTypeAheadCancelPayload)(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, query || ''));
+
+      if (!wasItemInserted) {
+        fireEvent((0, _analytics.buildTypeAheadCancelPayload)(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, query || ''));
+      }
+
       var pluginState = (0, _utils2.getMentionPluginState)(editorState);
 
       if (pluginState !== null && pluginState !== void 0 && pluginState.mentionProvider) {

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

@@ -15,10 +15,12 @@ var _panel = require("@atlaskit/editor-common/panel");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 var panelStyles = function panelStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), _panel.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackground, _panel.PanelSharedCssClassName.icon, _editorSharedStyles.akEditorDeleteIconColor, _panel.PanelSharedCssClassName.content, _panel.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _panel.PanelSharedCssClassName.icon, _editorSharedStyles.akEditorDeleteIconColor, (0, _panel.panelSharedStyles)(props), _panel.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]));
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), _panel.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), _panel.PanelSharedCssClassName.icon, (0, _tokens.token)('color.icon.danger', _editorSharedStyles.akEditorDeleteIconColor), _panel.PanelSharedCssClassName.content, _panel.PanelSharedCssClassName.prefix, (0, _tokens.token)('color.blanket.danger', _editorSharedStyles.akEditorDeleteBackgroundWithOpacity), _panel.PanelSharedCssClassName.icon, (0, _tokens.token)('color.icon.danger', _editorSharedStyles.akEditorDeleteIconColor), (0, _panel.panelSharedStyles)(props), _panel.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]));
 };
 
 exports.panelStyles = panelStyles;

package/dist/cjs/plugins/placeholder-text/placeholder-text-nodeview.js

@@ -17,7 +17,9 @@ var _utils = require("@atlaskit/editor-common/utils");
 
 var serializePlaceholderNode = function serializePlaceholderNode(node) {
   var element = document.createElement('span');
-  element.classList.add('pm-placeholder');
+  element.classList.add('pm-placeholder'); // the inline node api test suite requires the following class name
+
+  element.classList.add('placeholderView-content-wrap');
 
   if (_utils.browser.gecko) {
     element.setAttribute('contenteditable', 'true');

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

@@ -15,10 +15,12 @@ var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 var ruleStyles = function ruleStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", ";\n\n    hr {\n      cursor: pointer;\n      padding: 4px 0;\n      margin: calc(", "em - 4px) 0;\n      background-clip: content-box;\n\n      &.", " {\n        outline: none;\n        background-color: ", ";\n      }\n    }\n  }\n"])), (0, _styles.ruleSharedStyles)(props), _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderColor);
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", ";\n\n    hr {\n      cursor: pointer;\n      padding: 4px 0;\n      margin: calc(", "em - 4px) 0;\n      background-clip: content-box;\n\n      &.", " {\n        outline: none;\n        background-color: ", ";\n      }\n    }\n  }\n"])), (0, _styles.ruleSharedStyles)(props), _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _tokens.token)('color.border.selected', _editorSharedStyles.akEditorSelectedBorderColor));
 };
 
 exports.ruleStyles = ruleStyles;

package/dist/cjs/plugins/selection/utils.js

@@ -9,8 +9,9 @@ exports.getAllSelectionAnalyticsPayload = getAllSelectionAnalyticsPayload;
 exports.getCellSelectionAnalyticsPayload = getCellSelectionAnalyticsPayload;
 exports.getDecorations = void 0;
 exports.getNodeSelectionAnalyticsPayload = getNodeSelectionAnalyticsPayload;
+exports.getNodesToDecorateFromSelection = void 0;
 exports.getRangeSelectionAnalyticsPayload = getRangeSelectionAnalyticsPayload;
-exports.isSelectionAtStartOfParentNode = exports.isSelectionAtEndOfParentNode = exports.isSelectableContainerNode = exports.isSelectableChildNode = exports.getTopLevelNodesFromSelection = void 0;
+exports.isSelectionAtStartOfParentNode = exports.isSelectionAtEndOfParentNode = exports.isSelectableContainerNode = exports.isSelectableChildNode = void 0;
 exports.shouldRecalcDecorations = shouldRecalcDecorations;
 
 var _prosemirrorState = require("prosemirror-state");
@@ -67,7 +68,7 @@ var getDecorations = function getDecorations(tr) {
   }
 
   if (tr.selection instanceof _prosemirrorState.TextSelection || tr.selection instanceof _prosemirrorState.AllSelection) {
-    var decorations = getTopLevelNodesFromSelection(tr.selection, tr.doc).map(function (_ref) {
+    var decorations = getNodesToDecorateFromSelection(tr.selection, tr.doc).map(function (_ref) {
       var node = _ref.node,
           pos = _ref.pos;
       return _prosemirrorView.Decoration.node(pos, pos + node.nodeSize, {
@@ -124,39 +125,54 @@ function getCellSelectionAnalyticsPayload(state) {
     };
   }
 }
+
+var topLevelBlockNodesThatHaveSelectionStyles = ['table', 'panel', 'expand', 'layoutSection', 'decisionList', 'decisionItem', 'codeBlock'];
 /**
- * Use `getTopLevelNodesFromSelection` to collect and return
- * a list of only the outermost nodes of the given/passed `Selection`. This
- * function will ignore `paragraph` and `text` node types when collecting
- * top-level nodes. It will also ignore any top-level nodes that don't
- * completely sit within the given `Selection`.
- *
- * For example, using the following document:
- * ```
- * doc(p('{<}one'), blockquote(p('hello')), p(expand({ title: 'two' })(p('three'))), p('four{>}'))))
- * ```
- * we would expect `getTopLevelNodesFromSelection` to return:
- * ```
- * [blockquote(p('hello')), expand({ title: 'two' })(p('three')))]
- * ```
+ * Use `getNodesToDecorateFromSelection` to collect and return
+ * a list of nodes within the Selection that should have Selection
+ * decorations applied. This allows selection styles to be added to
+ * nested nodes. It will ignore text nodes as decorations are
+ * applied natively and also ignore nodes that don't completely
+ * sit within the given `Selection`.
  */
 
-
-var getTopLevelNodesFromSelection = function getTopLevelNodesFromSelection(selection, doc) {
+var getNodesToDecorateFromSelection = function getNodesToDecorateFromSelection(selection, doc) {
   var nodes = [];
 
   if (selection.from !== selection.to) {
     var from = selection.from,
         to = selection.to;
     doc.nodesBetween(from, to, function (node, pos) {
-      var withinSelection = from <= pos && pos + node.nodeSize <= to;
-
-      if (node && node.type.name !== 'paragraph' && !node.isText && withinSelection) {
+      var withinSelection = from <= pos && pos + node.nodeSize <= to; // The reason we need to check for these nodes is to stop
+      // traversing their children if they are within a selection -
+      // this is to prevent selection styles from being added to
+      // the children as well as the parent node.
+      // Example scenario is if an entire table has been selected
+      // we should not traverse its children so we can apply the
+      // selection styles to the table. But if an entire tableRow
+      // has been selected (but the parent table has not) we should
+      // traverse it as it could contain other nodes that need
+      // selection styles. I couldn’t see a clear way to differentiate
+      // without explicitly stating which nodes should be traversed
+      // and which shouldn’t.
+
+      var isTopLevelNodeThatHasSelectionStyles = topLevelBlockNodesThatHaveSelectionStyles.includes(node.type.name); // If the node is a top-level block node and completely sits within
+      // the selection, we do not recurse it's children to prevent selection
+      // styles being added to its child nodes. The expected behaviour
+      // is that selection styles are only added to the parent.
+
+      if (node && withinSelection && isTopLevelNodeThatHasSelectionStyles) {
+        nodes.push({
+          node: node,
+          pos: pos
+        });
+        return false; // Otherwise we recurse the children and return them so we can apply
+        // selection styles. Text is handled by the browser.
+      } else if (node && withinSelection && !node.isText) {
         nodes.push({
           node: node,
           pos: pos
         });
-        return false;
       }
 
       return true;
@@ -166,7 +182,7 @@ var getTopLevelNodesFromSelection = function getTopLevelNodesFromSelection(selec
   return nodes;
 };
 
-exports.getTopLevelNodesFromSelection = getTopLevelNodesFromSelection;
+exports.getNodesToDecorateFromSelection = getNodesToDecorateFromSelection;
 
 function getRangeSelectionAnalyticsPayload(selection, doc) {
   if (selection instanceof _prosemirrorState.TextSelection && selection.from !== selection.to) {

package/dist/cjs/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -33,6 +33,16 @@ var _dom2 = require("./dom");
 
 var _featureFlagsContext = require("../../../../feature-flags-context");
 
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+
+// limit scroll event calls
+var HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200; // timeout for resetting the scroll class - if it’s too long then users won’t be able to click on the header cells,
+// if too short it would trigger too many dom udpates.
+
+var HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
+
 var supportedHeaderRow = function supportedHeaderRow(node) {
   var allHeaders = (0, _slice.mapChildren)(node, function (child) {
     return child.type.name === 'tableHeader';
@@ -58,6 +68,16 @@ var TableRowNodeView = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "stickyHeadersOptimization", false);
     (0, _defineProperty2.default)(this, "sentinels", {});
     (0, _defineProperty2.default)(this, "listening", false);
+    (0, _defineProperty2.default)(this, "headerRowMouseScrollEnd", (0, _debounce.default)(function () {
+      _this.dom.classList.remove('no-pointer-events');
+    }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT));
+    (0, _defineProperty2.default)(this, "headerRowMouseScroll", (0, _throttle.default)(function () {
+      if (_this.isSticky) {
+        _this.dom.classList.add('no-pointer-events');
+
+        _this.headerRowMouseScrollEnd();
+      }
+    }, HEADER_ROW_SCROLL_THROTTLE_TIMEOUT));
     (0, _defineProperty2.default)(this, "onScroll", function () {
       if (!_this.tree) {
         return;
@@ -352,6 +372,8 @@ var TableRowNodeView = /*#__PURE__*/function () {
       this.eventDispatcher.on(_width.pluginKey.key, this.onWidthPluginState);
       this.eventDispatcher.on(_pluginKey.pluginKey.key, this.onTablePluginState);
       this.listening = true;
+      this.dom.addEventListener('wheel', this.headerRowMouseScroll.bind(this));
+      this.dom.addEventListener('touchmove', this.headerRowMouseScroll.bind(this));
     }
   }, {
     key: "unsubscribe",
@@ -375,6 +397,8 @@ var TableRowNodeView = /*#__PURE__*/function () {
       this.eventDispatcher.off(_width.pluginKey.key, this.onWidthPluginState);
       this.eventDispatcher.off(_pluginKey.pluginKey.key, this.onTablePluginState);
       this.listening = false;
+      this.dom.removeEventListener('wheel', this.headerRowMouseScroll);
+      this.dom.removeEventListener('touchmove', this.headerRowMouseScroll);
     } // initialize intersection observer to track if table is within scroll area
 
   }, {