@atlaskit/editor-core 165.0.0 → 166.0.0

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

@@ -1,60 +1,15 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _get from "@babel/runtime/helpers/get";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
-
 import React from 'react';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import Mention from '../ui/Mention';
-import { ReactNodeView } from '../../../nodeviews';
-export var MentionNodeView = /*#__PURE__*/function (_ReactNodeView) {
-  _inherits(MentionNodeView, _ReactNodeView);
-
-  var _super = _createSuper(MentionNodeView);
-
-  function MentionNodeView() {
-    _classCallCheck(this, MentionNodeView);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(MentionNodeView, [{
-    key: "createDomRef",
-    value: function createDomRef() {
-      return _get(_getPrototypeOf(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Mention, {
-        id: id,
-        text: text,
-        accessLevel: accessLevel,
-        providers: providerFactory
-      }), options && options.allowZeroWidthSpaceAfter && ZERO_WIDTH_SPACE);
-    }
-  }]);
-
-  return MentionNodeView;
-}(ReactNodeView);
-export default 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();
-  };
-}
+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, {
+    id: id,
+    text: text,
+    accessLevel: accessLevel,
+    providers: providerFactory
+  });
+};

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

@@ -6,7 +6,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { SLI_EVENT_TYPE, SMART_EVENT_TYPE, buildSliPayload } from '@atlaskit/mention/resource';
-import mentionNodeView from '../nodeviews/mention';
+import { getInlineNodeViewProducer } from '../../../nodeviews/getInlineNodeViewProducer';
+import { MentionNodeView } from '../nodeviews/mention';
 import { mentionPluginKey } from './key';
 var ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER',
@@ -42,7 +43,7 @@ export var setContext = function setContext(context) {
     return true;
   };
 };
-export function createMentionPlugin(dispatch, providerFactory, portalProviderAPI, eventDispatcher, fireEvent, options) {
+export function createMentionPlugin(pmPluginFactoryParams, fireEvent, options) {
   var mentionProvider;
 
   var sendAnalytics = function sendAnalytics(event, actionSubject, action, attributes) {
@@ -72,14 +73,14 @@ export function createMentionPlugin(dispatch, providerFactory, portalProviderAPI
             newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
               mentionProvider: params.provider
             });
-            dispatch(mentionPluginKey, newPluginState);
+            pmPluginFactoryParams.dispatch(mentionPluginKey, newPluginState);
             return newPluginState;
 
           case ACTIONS.SET_CONTEXT:
             newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
               contextIdentifierProvider: params.context
             });
-            dispatch(mentionPluginKey, newPluginState);
+            pmPluginFactoryParams.dispatch(mentionPluginKey, newPluginState);
             return newPluginState;
         }
 
@@ -88,7 +89,14 @@ export function createMentionPlugin(dispatch, providerFactory, portalProviderAPI
     },
     props: {
       nodeViews: {
-        mention: mentionNodeView(portalProviderAPI, eventDispatcher, providerFactory, options)
+        mention: getInlineNodeViewProducer({
+          pmPluginFactoryParams: pmPluginFactoryParams,
+          Component: MentionNodeView,
+          extraComponentProps: {
+            providerFactory: pmPluginFactoryParams.providerFactory,
+            options: options
+          }
+        })
       }
     },
     view: function view(editorView) {
@@ -126,13 +134,13 @@ export function createMentionPlugin(dispatch, providerFactory, portalProviderAPI
         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/esm/plugins/mentions/type-ahead/index.js

@@ -378,10 +378,15 @@ export 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(buildTypeAheadCancelPayload(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, query || ''));
+
+      if (!wasItemInserted) {
+        fireEvent(buildTypeAheadCancelPayload(pickerElapsedTime, stats.keyCount.arrowUp, stats.keyCount.arrowDown, sessionId, query || ''));
+      }
+
       var pluginState = getMentionPluginState(editorState);
 
       if (pluginState !== null && pluginState !== void 0 && pluginState.mentionProvider) {

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

@@ -5,6 +5,7 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { panelSharedStyles, PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import { token } from '@atlaskit/tokens';
 export var panelStyles = function panelStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), PanelSharedCssClassName.prefix, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground, PanelSharedCssClassName.icon, akEditorDeleteIconColor, PanelSharedCssClassName.content, PanelSharedCssClassName.prefix, akEditorDeleteBackgroundWithOpacity, PanelSharedCssClassName.icon, akEditorDeleteIconColor, panelSharedStyles(props), PanelSharedCssClassName.prefix, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), PanelSharedCssClassName.prefix, akEditorSelectedBorderSize, akEditorDeleteBorder, token('color.background.danger', akEditorDeleteBackground), PanelSharedCssClassName.icon, token('color.icon.danger', akEditorDeleteIconColor), PanelSharedCssClassName.content, PanelSharedCssClassName.prefix, token('color.blanket.danger', akEditorDeleteBackgroundWithOpacity), PanelSharedCssClassName.icon, token('color.icon.danger', akEditorDeleteIconColor), panelSharedStyles(props), PanelSharedCssClassName.prefix, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]));
 };

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

@@ -5,7 +5,9 @@ import { browser, ZERO_WIDTH_SPACE } from '@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 (browser.gecko) {
     element.setAttribute('contenteditable', 'true');

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

@@ -5,6 +5,7 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { ruleSharedStyles } from '@atlaskit/editor-common/styles';
 import { akEditorLineHeight, akEditorSelectedBorderColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import { token } from '@atlaskit/tokens';
 export var ruleStyles = function ruleStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), ruleSharedStyles(props), akEditorLineHeight, akEditorSelectedNodeClassName, akEditorSelectedBorderColor);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), ruleSharedStyles(props), akEditorLineHeight, akEditorSelectedNodeClassName, token('color.border.selected', akEditorSelectedBorderColor));
 };

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

@@ -39,7 +39,7 @@ export var getDecorations = function getDecorations(tr) {
   }
 
   if (tr.selection instanceof TextSelection || tr.selection instanceof 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 Decoration.node(pos, pos + node.nodeSize, {
@@ -91,38 +91,53 @@ export 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`.
  */
 
-export var getTopLevelNodesFromSelection = function getTopLevelNodesFromSelection(selection, doc) {
+export 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;

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

@@ -11,6 +11,13 @@ import { syncStickyRowToTable, updateStickyMargins as updateTableMargin } from '
 import { updateStickyState } from '../commands';
 import { getTop, getTree } from './dom';
 import { getFeatureFlags } from '../../../../feature-flags-context';
+import debounce from 'lodash/debounce';
+import throttle from '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;
 export var supportedHeaderRow = function supportedHeaderRow(node) {
   var allHeaders = mapChildren(node, function (child) {
     return child.type.name === 'tableHeader';
@@ -40,6 +47,18 @@ export var TableRowNodeView = /*#__PURE__*/function () {
 
     _defineProperty(this, "listening", false);
 
+    _defineProperty(this, "headerRowMouseScrollEnd", debounce(function () {
+      _this.dom.classList.remove('no-pointer-events');
+    }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT));
+
+    _defineProperty(this, "headerRowMouseScroll", throttle(function () {
+      if (_this.isSticky) {
+        _this.dom.classList.add('no-pointer-events');
+
+        _this.headerRowMouseScrollEnd();
+      }
+    }, HEADER_ROW_SCROLL_THROTTLE_TIMEOUT));
+
     _defineProperty(this, "onScroll", function () {
       if (!_this.tree) {
         return;
@@ -350,6 +369,8 @@ export var TableRowNodeView = /*#__PURE__*/function () {
       this.eventDispatcher.on(widthPluginKey.key, this.onWidthPluginState);
       this.eventDispatcher.on(tablePluginKey.key, this.onTablePluginState);
       this.listening = true;
+      this.dom.addEventListener('wheel', this.headerRowMouseScroll.bind(this));
+      this.dom.addEventListener('touchmove', this.headerRowMouseScroll.bind(this));
     }
   }, {
     key: "unsubscribe",
@@ -373,6 +394,8 @@ export var TableRowNodeView = /*#__PURE__*/function () {
       this.eventDispatcher.off(widthPluginKey.key, this.onWidthPluginState);
       this.eventDispatcher.off(tablePluginKey.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
 
   }, {

package/dist/esm/plugins/table/ui/common-styles.js

@@ -17,7 +17,7 @@ var sentinelStyles = ".".concat(ClassName.TABLE_CONTAINER, " {\n  > .").concat(C
 export var tableStyles = function tableStyles(props) {
   var _props$featureFlags;
 
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: white !important;\n    cursor: pointer;\n  }\n\n  .ProseMirror {\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      td.", ", th.", " {\n        position: relative;\n        overflow: visible;\n      }\n\n      td.", " {\n        background-color: ", ";\n      }\n    }\n\n    .", " {\n      ", "\n    }\n\n    .", " {\n      ", "\n    }\n\n    /* Delete button */\n    ", "\n    /* Ends Delete button */\n\n    /* sticky styles */\n    .", " .", " .", ":first-child {\n      margin-top: ", "px;\n      width: ", "px;\n\n      position: fixed !important;\n      z-index: ", " !important;\n\n      box-shadow: 0px -", "px white;\n      border-right: 0 none;\n      /* top set by NumberColumn component */\n    }\n\n    .", " .", ".sticky {\n      position: fixed !important;\n      /* needs to be above row controls */\n      z-index: ", " !important;\n      background: white;\n\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .", ".sticky .", " {\n      border-bottom: 0px none;\n      border-right: 0px none;\n\n      height: ", "px;\n      width: ", "px;\n    }\n\n    .", " .", " {\n      z-index: 0;\n    }\n\n    .", "\n      .", "\n      .", ".sticky {\n      position: fixed !important;\n      z-index: ", " !important;\n      display: flex;\n      border-left: ", "px solid white;\n      margin-left: -", "px;\n    }\n\n    .", " col:first-of-type {\n      /* moving rows out of a table layout does weird things in Chrome */\n      border-right: 1px solid green;\n    }\n\n    tr.sticky {\n      padding-top: ", "px;\n      position: fixed;\n      display: grid;\n\n      /* to keep it above cell selection */\n      z-index: ", ";\n\n      overflow-y: visible;\n      overflow-x: hidden;\n\n      grid-auto-flow: column;\n\n      /* background for where controls apply */\n      background: white;\n      box-sizing: content-box;\n\n      margin-top: 2px;\n\n      box-shadow: 0 6px 4px -4px ", ";\n      margin-left: -1px;\n    }\n\n    .", " .", " {\n      left: unset;\n      position: fixed;\n      z-index: ", ";\n    }\n\n    .", ".", "\n      .", " {\n      padding-bottom: ", "px;\n    }\n\n    tr.sticky th {\n      border-bottom: ", "px solid\n        ", ";\n      margin-right: -1px;\n    }\n\n    .", " tr.sticky > th:last-child {\n      border-right-width: 1px;\n    }\n\n    /* add left edge for first cell */\n    .", " tr.sticky > th:first-child {\n      margin-left: 0px;\n    }\n\n    /* add a little bit so the scroll lines up with the table */\n    .", " tr.sticky::after {\n      content: ' ';\n      width: 1px;\n    }\n\n    /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n    .", " .sticky + tr {\n      min-height: 0px;\n    }\n\n    /* move resize line a little in sticky bar */\n    .", ".", " {\n      tr.sticky\n        td.", ",\n        tr.sticky\n        th.", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n\n      /* when selected put it back to normal -- :not selector would be nicer */\n      tr.sticky\n        td.", ".", ",\n        tr.sticky\n        th.", ".", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n    }\n\n    tr.sticky\n      .", ",\n      tr.sticky\n      .", " {\n      z-index: 1;\n    }\n\n    .", " tr.sticky {\n      padding-top: ", "px;\n    }\n\n    .", ".", "\n      .", "\n      .", ":first-child {\n      margin-top: ", "px;\n    }\n\n    .", ".sticky {\n      border-top: ", "px solid white;\n    }\n\n    ", "\n    ", "\n\n    .", " .", " {\n      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n    }\n\n    .less-padding {\n      padding: 0 ", "px;\n\n      .", " {\n        padding: 0 ", "px;\n      }\n\n      &.", "[data-number-column='true'] {\n        padding-left: ", "px;\n      }\n\n      .", " {\n        left: 6px;\n      }\n\n      .", " {\n        left: calc(100% - 6px);\n      }\n    }\n\n    > .", " {\n      /**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n    }\n\n    /* Breakout only works on top level */\n    > * .", " .", " {\n      margin-left: unset !important;\n      width: 100% !important;\n    }\n\n    ", ";\n\n    /* Corner controls */\n    .", " {\n      width: ", "px;\n      height: ", "px;\n      display: none;\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n    }\n\n    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\n      }\n    }\n\n    .", " {\n      position: absolute;\n      top: 0;\n      width: ", "px;\n      height: ", "px;\n      border: 1px solid ", ";\n      border-radius: 0;\n      border-top-left-radius: ", "px;\n      background: ", ";\n      box-sizing: border-box;\n      padding: 0;\n      :focus {\n        outline: none;\n      }\n    }\n    .active .", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\n    }\n\n    :not(.", ")\n      .", ".", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    /* Row controls */\n    .", " {\n      width: ", "px;\n      box-sizing: border-box;\n      display: none;\n      position: relative;\n\n      ", ";\n\n      .", " {\n        display: flex;\n        flex-direction: column;\n      }\n      .", ":last-child > button {\n        border-bottom-left-radius: ", "px;\n      }\n      .", " {\n        position: relative;\n        margin-top: -1px;\n      }\n      .", ":hover,\n        .", ".active,\n        .", ":hover {\n        z-index: ", ";\n      }\n\n      ", "\n    }\n\n    :not(.", ") .", " {\n      ", "\n      ", "\n    }\n\n    /* Numbered column */\n    .", " {\n      position: relative;\n      float: right;\n      margin-left: ", "px;\n      top: ", "px;\n      width: ", "px;\n      box-sizing: border-box;\n    }\n\n    .", " {\n      border: 1px solid ", ";\n      box-sizing: border-box;\n      margin-top: -1px;\n      padding-bottom: 2px;\n      padding: 10px 2px;\n      text-align: center;\n      font-size: ", ";\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      :first-child {\n        margin-top: 0;\n      }\n      :last-child {\n        border-bottom: 1px solid ", ";\n      }\n    }\n\n    .", " {\n      .", ", .", " {\n        display: block;\n      }\n      .", " {\n        padding-left: 1px;\n        .", " {\n          border-left: 0 none;\n        }\n\n        .", ".active {\n          border-bottom: 1px solid ", ";\n          border-color: ", ";\n          background-color: ", ";\n          position: relative;\n          z-index: ", ";\n          color: ", ";\n        }\n      }\n    }\n    :not(.", ") .", " {\n      .", " {\n        cursor: pointer;\n      }\n      .", ":hover {\n        border-bottom: 1px solid ", ";\n        border-color: ", ";\n        background-color: ", ";\n        position: relative;\n        z-index: ", ";\n        color: ", ";\n      }\n      .", ".", " {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-left: 0;\n        color: ", ";\n        position: relative;\n        z-index: ", ";\n      }\n    }\n\n    /* Table */\n    .", " > table {\n      table-layout: fixed;\n\n      .", " + * {\n        margin-top: 0;\n      }\n\n      /*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n      th.", " > .fabric-editor-block-mark {\n        > h1:first-child,\n        > h2:first-child,\n        > h3:first-child,\n        > h4:first-child,\n        > h5:first-child,\n        > h6:first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", ", .", " {\n        position: relative;\n      }\n      /* Give selected cells a blue overlay */\n      .", "::after,\n        .", "::after {\n        z-index: ", ";\n        position: absolute;\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        opacity: 0.3;\n        pointer-events: none;\n      }\n      .", " {\n        border: 1px solid ", ";\n      }\n      .", "::after {\n        background: ", ";\n      }\n      th.", "::after,\n        td.", "::after {\n        background: ", ";\n      }\n    }\n    .", " {\n      position: absolute;\n      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n      top: ", "px;\n    }\n    .", ".", " {\n      z-index: ", ";\n    }\n    .", " {\n      left: -", "px;\n    }\n    .", " {\n      /*\n      compensating for half of the insert column button\n      that is aligned to the right edge initially on hover of the top right column control when table overflown,\n      its center should be aligned with the edge\n       */\n      padding-right: ", "px;\n      margin-right: -", "px;\n      padding-bottom: ", "px;\n      margin-bottom: -", "px;\n      /* fixes gap cursor height */\n      overflow: auto;\n      position: relative;\n    }\n  }\n\n  .ProseMirror.", " {\n    .", " {\n      overflow-x: auto;\n      ", ";\n    }\n  }\n\n  .ProseMirror.", " {\n    cursor: col-resize;\n  }\n\n  .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {\n    padding-left: revert;\n  }\n"])), ClassName.LAYOUT_BUTTON, N20A, N300, ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, B300, tableSharedStyle(props), columnControlsLineMarker(props), hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper, ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper, DeleteButton, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, tableToolbarSize, ClassName.TABLE_STICKY, stickyRowOffsetTop, stickyRowZIndex, N40A, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, stickyRowZIndex + 1, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', OverflowShadow(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER, columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n          left: -11px;\n          top: 9px;\n        "), ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER, InsertMarker(props, "\n          right: -1px;\n          top: -12px;\n        "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableToolbarColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableToolbarDeleteColor, ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n        bottom: -1px;\n        left: -11px;\n      "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n        border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(tableToolbarSize, "px;\n\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-child {\n          top: 0;\n        }\n      ")), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize - 1, akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableToolbarColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, N0, ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, N0, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, R500, akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor, ClassName.SELECTED_CELL, tableCellSelectedColor, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, tableToolbarSize, ClassName.TABLE_NODE_WRAPPER, tableInsertColumnButtonSize / 2, tableInsertColumnButtonSize / 2, tableScrollbarOffset, tableScrollbarOffset, ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: white !important;\n    cursor: pointer;\n  }\n\n  .ProseMirror {\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n\n    .", " {\n      margin-bottom: 0;\n    }\n\n    .", " {\n      td.", ", th.", " {\n        position: relative;\n        overflow: visible;\n      }\n\n      td.", " {\n        background-color: ", ";\n      }\n    }\n\n    .", " {\n      ", "\n    }\n\n    .", " {\n      ", "\n    }\n\n    /* Delete button */\n    ", "\n    /* Ends Delete button */\n\n    /* sticky styles */\n    .", " .", " .", ":first-child {\n      margin-top: ", "px;\n      width: ", "px;\n\n      position: fixed !important;\n      z-index: ", " !important;\n\n      box-shadow: 0px -", "px white;\n      border-right: 0 none;\n      /* top set by NumberColumn component */\n    }\n\n    .", " .", ".sticky {\n      position: fixed !important;\n      /* needs to be above row controls */\n      z-index: ", " !important;\n      background: white;\n\n      width: ", "px;\n      height: ", "px;\n    }\n\n    .", ".sticky .", " {\n      border-bottom: 0px none;\n      border-right: 0px none;\n\n      height: ", "px;\n      width: ", "px;\n    }\n\n    .", " .", " {\n      z-index: 0;\n    }\n\n    .", "\n      .", "\n      .", ".sticky {\n      position: fixed !important;\n      z-index: ", " !important;\n      display: flex;\n      border-left: ", "px solid white;\n      margin-left: -", "px;\n    }\n\n    .", " col:first-of-type {\n      /* moving rows out of a table layout does weird things in Chrome */\n      border-right: 1px solid green;\n    }\n\n    tr.sticky {\n      padding-top: ", "px;\n      position: fixed;\n      display: grid;\n\n      /* to keep it above cell selection */\n      z-index: ", ";\n\n      overflow-y: visible;\n      overflow-x: hidden;\n\n      grid-auto-flow: column;\n\n      /* background for where controls apply */\n      background: white;\n      box-sizing: content-box;\n\n      margin-top: 2px;\n\n      box-shadow: 0 6px 4px -4px ", ";\n      margin-left: -1px;\n\n      &.no-pointer-events {\n        pointer-events: none;\n      }\n    }\n\n    .", " .", " {\n      left: unset;\n      position: fixed;\n      z-index: ", ";\n    }\n\n    .", ".", "\n      .", " {\n      padding-bottom: ", "px;\n    }\n\n    tr.sticky th {\n      border-bottom: ", "px solid\n        ", ";\n      margin-right: -1px;\n    }\n\n    .", " tr.sticky > th:last-child {\n      border-right-width: 1px;\n    }\n\n    /* add left edge for first cell */\n    .", " tr.sticky > th:first-child {\n      margin-left: 0px;\n    }\n\n    /* add a little bit so the scroll lines up with the table */\n    .", " tr.sticky::after {\n      content: ' ';\n      width: 1px;\n    }\n\n    /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n    .", " .sticky + tr {\n      min-height: 0px;\n    }\n\n    /* move resize line a little in sticky bar */\n    .", ".", " {\n      tr.sticky\n        td.", ",\n        tr.sticky\n        th.", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n\n      /* when selected put it back to normal -- :not selector would be nicer */\n      tr.sticky\n        td.", ".", ",\n        tr.sticky\n        th.", ".", " {\n        .", "::after {\n          right: ", "px;\n        }\n      }\n    }\n\n    tr.sticky\n      .", ",\n      tr.sticky\n      .", " {\n      z-index: 1;\n    }\n\n    .", " tr.sticky {\n      padding-top: ", "px;\n    }\n\n    .", ".", "\n      .", "\n      .", ":first-child {\n      margin-top: ", "px;\n    }\n\n    .", ".sticky {\n      border-top: ", "px solid white;\n    }\n\n    ", "\n    ", "\n\n    .", " .", " {\n      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n    }\n\n    .less-padding {\n      padding: 0 ", "px;\n\n      .", " {\n        padding: 0 ", "px;\n      }\n\n      &.", "[data-number-column='true'] {\n        padding-left: ", "px;\n      }\n\n      .", " {\n        left: 6px;\n      }\n\n      .", " {\n        left: calc(100% - 6px);\n      }\n    }\n\n    > .", " {\n      /**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n    }\n\n    /* Breakout only works on top level */\n    > * .", " .", " {\n      margin-left: unset !important;\n      width: 100% !important;\n    }\n\n    ", ";\n\n    /* Corner controls */\n    .", " {\n      width: ", "px;\n      height: ", "px;\n      display: none;\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n\n      .", " {\n        position: relative;\n\n        ", ";\n      }\n    }\n\n    .", ".sticky {\n      .", " {\n        /* sticky row insert dot overlaps other row insert and messes things up */\n        display: none !important;\n      }\n    }\n\n    .", " {\n      position: absolute;\n      top: 0;\n      width: ", "px;\n      height: ", "px;\n      border: 1px solid ", ";\n      border-radius: 0;\n      border-top-left-radius: ", "px;\n      background: ", ";\n      box-sizing: border-box;\n      padding: 0;\n      :focus {\n        outline: none;\n      }\n    }\n    .active .", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    .", "[data-number-column='true'] {\n      .", ", .", " {\n        width: ", "px;\n      }\n      .", " .", " {\n        border-right-width: 0;\n      }\n    }\n\n    :not(.", ") .", ":hover {\n      border-color: ", ";\n      background: ", ";\n      cursor: pointer;\n    }\n\n    :not(.", ")\n      .", ".", " {\n      border-color: ", ";\n      background: ", ";\n    }\n\n    /* Row controls */\n    .", " {\n      width: ", "px;\n      box-sizing: border-box;\n      display: none;\n      position: relative;\n\n      ", ";\n\n      .", " {\n        display: flex;\n        flex-direction: column;\n      }\n      .", ":last-child > button {\n        border-bottom-left-radius: ", "px;\n      }\n      .", " {\n        position: relative;\n        margin-top: -1px;\n      }\n      .", ":hover,\n        .", ".active,\n        .", ":hover {\n        z-index: ", ";\n      }\n\n      ", "\n    }\n\n    :not(.", ") .", " {\n      ", "\n      ", "\n    }\n\n    /* Numbered column */\n    .", " {\n      position: relative;\n      float: right;\n      margin-left: ", "px;\n      top: ", "px;\n      width: ", "px;\n      box-sizing: border-box;\n    }\n\n    .", " {\n      border: 1px solid ", ";\n      box-sizing: border-box;\n      margin-top: -1px;\n      padding-bottom: 2px;\n      padding: 10px 2px;\n      text-align: center;\n      font-size: ", ";\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      :first-child {\n        margin-top: 0;\n      }\n      :last-child {\n        border-bottom: 1px solid ", ";\n      }\n    }\n\n    .", " {\n      .", ", .", " {\n        display: block;\n      }\n      .", " {\n        padding-left: 1px;\n        .", " {\n          border-left: 0 none;\n        }\n\n        .", ".active {\n          border-bottom: 1px solid ", ";\n          border-color: ", ";\n          background-color: ", ";\n          position: relative;\n          z-index: ", ";\n          color: ", ";\n        }\n      }\n    }\n    :not(.", ") .", " {\n      .", " {\n        cursor: pointer;\n      }\n      .", ":hover {\n        border-bottom: 1px solid ", ";\n        border-color: ", ";\n        background-color: ", ";\n        position: relative;\n        z-index: ", ";\n        color: ", ";\n      }\n      .", ".", " {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-left: 0;\n        color: ", ";\n        position: relative;\n        z-index: ", ";\n      }\n    }\n\n    /* Table */\n    .", " > table {\n      table-layout: fixed;\n\n      .", " + * {\n        margin-top: 0;\n      }\n\n      /*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n      th.", " > .fabric-editor-block-mark {\n        > h1:first-child,\n        > h2:first-child,\n        > h3:first-child,\n        > h4:first-child,\n        > h5:first-child,\n        > h6:first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", ", .", " {\n        position: relative;\n      }\n      /* Give selected cells a blue overlay */\n      .", "::after,\n        .", "::after {\n        z-index: ", ";\n        position: absolute;\n        content: '';\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 0;\n        opacity: 0.3;\n        pointer-events: none;\n      }\n      .", " {\n        border: 1px solid ", ";\n      }\n      .", "::after {\n        background: ", ";\n      }\n      th.", "::after,\n        td.", "::after {\n        background: ", ";\n      }\n    }\n    .", " {\n      position: absolute;\n      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n      top: ", "px;\n    }\n    .", ".", " {\n      z-index: ", ";\n    }\n    .", " {\n      left: -", "px;\n    }\n    .", " {\n      /*\n      compensating for half of the insert column button\n      that is aligned to the right edge initially on hover of the top right column control when table overflown,\n      its center should be aligned with the edge\n       */\n      padding-right: ", "px;\n      margin-right: -", "px;\n      padding-bottom: ", "px;\n      margin-bottom: -", "px;\n      /* fixes gap cursor height */\n      overflow: auto;\n      position: relative;\n    }\n  }\n\n  .ProseMirror.", " {\n    .", " {\n      overflow-x: auto;\n      ", ";\n    }\n  }\n\n  .ProseMirror.", " {\n    cursor: col-resize;\n  }\n\n  .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {\n    padding-left: revert;\n  }\n"])), ClassName.LAYOUT_BUTTON, N20A, N300, ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, B300, tableSharedStyle(props), columnControlsLineMarker(props), hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper, ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper, DeleteButton, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, tableToolbarSize, ClassName.TABLE_STICKY, stickyRowOffsetTop, stickyRowZIndex, N40A, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, stickyRowZIndex + 1, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', OverflowShadow(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER, columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n          left: -11px;\n          top: 9px;\n        "), ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER, InsertMarker(props, "\n          right: -1px;\n          top: -12px;\n        "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableToolbarColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableToolbarDeleteColor, ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n        bottom: -1px;\n        left: -11px;\n      "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n        border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(tableToolbarSize, "px;\n\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-child {\n          top: 0;\n        }\n      ")), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize - 1, akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableToolbarColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, N0, ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, N0, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, R500, akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor, ClassName.SELECTED_CELL, tableCellSelectedColor, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, tableToolbarSize, ClassName.TABLE_NODE_WRAPPER, tableInsertColumnButtonSize / 2, tableInsertColumnButtonSize / 2, tableScrollbarOffset, tableScrollbarOffset, ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR);
 };
 export var tableFullPageEditorStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    width: 100%;\n  }\n"])), ClassName.TABLE_NODE_WRAPPER);
 export var tableCommentEditorStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);

package/dist/esm/plugins/table/ui/consts.js

@@ -1,6 +1,7 @@
 import { B200, B300, B75, N0, N20, R50, R400, R75, DN400, N200, DN30 } from '@atlaskit/theme/colors';
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { akEditorTableBorder, akEditorTableBorderDark, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
+import { token } from '@atlaskit/tokens';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
 import { themed } from '@atlaskit/theme/components';
 /**
@@ -12,16 +13,16 @@ export var tableCellBackgroundColor = themed({
   dark: DN30
 });
 export var tableToolbarColor = themed({
-  light: akEditorTableToolbar,
-  dark: akEditorTableToolbarDark
+  light: token('color.background.neutral', akEditorTableToolbar),
+  dark: token('color.background.neutral', akEditorTableToolbarDark)
 });
 export var tableTextColor = themed({
   light: N200,
   dark: DN400
 });
 export var tableBorderColor = themed({
-  light: akEditorTableBorder,
-  dark: akEditorTableBorderDark
+  light: token('color.border', akEditorTableBorder),
+  dark: token('color.border', akEditorTableBorderDark)
 });
 export var tableFloatingControlsColor = N20;
 export var tableCellSelectedColor = B75;

package/dist/esm/plugins/tasks-and-decisions/styles.js

@@ -5,4 +5,5 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-export var taskDecisionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-decision-wrapper] {\n    cursor: pointer;\n  }\n\n  .", " > [data-decision-wrapper],\n  ol[data-node-type='decisionList'].", " {\n    border-radius: 4px;\n    ", "\n  }\n\n  .danger {\n    .", ".", "\n      > div {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n      &::after {\n        content: none; /* reset the Blanket selection style */\n      }\n    }\n  }\n"])), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackgroundWithOpacity);
+import { token } from '@atlaskit/tokens';
+export var taskDecisionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-decision-wrapper] {\n    cursor: pointer;\n  }\n\n  .", " > [data-decision-wrapper],\n  ol[data-node-type='decisionList'].", " {\n    border-radius: 4px;\n    ", "\n  }\n\n  .danger {\n    .", ".", "\n      > div {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n      &::after {\n        content: none; /* reset the Blanket selection style */\n      }\n    }\n  }\n"])), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, token('color.border.danger', akEditorDeleteBorder), token('color.blanket.danger', akEditorDeleteBackgroundWithOpacity));

package/dist/esm/plugins/type-ahead/index.js

@@ -183,7 +183,8 @@ var typeAheadPlugin = function typeAheadPlugin(options) {
       });
     },
     onEditorViewStateUpdated: function onEditorViewStateUpdated(_ref7) {
-      var oldEditorState = _ref7.oldEditorState,
+      var originalTransaction = _ref7.originalTransaction,
+          oldEditorState = _ref7.oldEditorState,
           newEditorState = _ref7.newEditorState;
       var oldPluginState = getPluginState(oldEditorState);
       var newPluginState = getPluginState(newEditorState);
@@ -197,10 +198,13 @@ var typeAheadPlugin = function typeAheadPlugin(options) {
       var isANewHandler = oldTriggerHandler !== newTriggerHandler;
 
       if (oldTriggerHandler !== null && oldTriggerHandler !== void 0 && oldTriggerHandler.dismiss && isANewHandler) {
+        var typeAheadMessage = originalTransaction.getMeta(typeAheadPluginKey);
+        var wasItemInserted = typeAheadMessage && typeAheadMessage.action === 'INSERT_RAW_QUERY';
         oldTriggerHandler.dismiss({
           editorState: newEditorState,
           query: oldPluginState.query,
-          stats: (oldPluginState.stats || new StatsModifier()).serialize()
+          stats: (oldPluginState.stats || new StatsModifier()).serialize(),
+          wasItemInserted: wasItemInserted
         });
       }
 

package/dist/esm/plugins/unsupported-content/index.js

@@ -1,15 +1,17 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from 'prosemirror-state';
 import { confluenceUnsupportedBlock, confluenceUnsupportedInline, unsupportedBlock, unsupportedInline, unsupportedMark, unsupportedNodeAttribute } from '@atlaskit/adf-schema';
-import { UnsupportedBlock, UnsupportedInline } from '@atlaskit/editor-common/ui';
+import { UnsupportedBlock } from '@atlaskit/editor-common/ui';
+import { UnsupportedInlineNodeView } from './unsupported-inline-node-view';
 import { ReactNodeView } from '../../nodeviews';
+import { getInlineNodeViewProducer } from '../../nodeviews/getInlineNodeViewProducer';
 export var pluginKey = new PluginKey('unsupportedContentPlugin');
 
-var createPlugin = function createPlugin(_ref) {
-  var portalProviderAPI = _ref.portalProviderAPI,
-      eventDispatcher = _ref.eventDispatcher,
-      dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+var createPlugin = function createPlugin(pmPluginFactoryParams) {
   var hasIntlContext = true;
+  var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
+      eventDispatcher = pmPluginFactoryParams.eventDispatcher,
+      dispatchAnalyticsEvent = pmPluginFactoryParams.dispatchAnalyticsEvent;
   return new SafePlugin({
     key: pluginKey,
     props: {
@@ -17,15 +19,23 @@ var createPlugin = function createPlugin(_ref) {
         confluenceUnsupportedBlock: ReactNodeView.fromComponent(UnsupportedBlock, portalProviderAPI, eventDispatcher, {
           dispatchAnalyticsEvent: dispatchAnalyticsEvent
         }, undefined, hasIntlContext),
-        confluenceUnsupportedInline: ReactNodeView.fromComponent(UnsupportedInline, portalProviderAPI, eventDispatcher, {
-          dispatchAnalyticsEvent: dispatchAnalyticsEvent
-        }, undefined, hasIntlContext),
+        confluenceUnsupportedInline: getInlineNodeViewProducer({
+          pmPluginFactoryParams: pmPluginFactoryParams,
+          Component: UnsupportedInlineNodeView,
+          extraComponentProps: {
+            dispatchAnalyticsEvent: dispatchAnalyticsEvent
+          }
+        }),
         unsupportedBlock: ReactNodeView.fromComponent(UnsupportedBlock, portalProviderAPI, eventDispatcher, {
           dispatchAnalyticsEvent: dispatchAnalyticsEvent
         }, undefined, hasIntlContext),
-        unsupportedInline: ReactNodeView.fromComponent(UnsupportedInline, portalProviderAPI, eventDispatcher, {
-          dispatchAnalyticsEvent: dispatchAnalyticsEvent
-        }, undefined, hasIntlContext)
+        unsupportedInline: getInlineNodeViewProducer({
+          pmPluginFactoryParams: pmPluginFactoryParams,
+          Component: UnsupportedInlineNodeView,
+          extraComponentProps: {
+            dispatchAnalyticsEvent: dispatchAnalyticsEvent
+          }
+        })
       }
     }
   });

package/dist/esm/plugins/unsupported-content/styles.js

@@ -4,10 +4,11 @@ var _templateObject;
 
 import { css } from '@emotion/react';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import { token } from '@atlaskit/tokens';
 export var UnsupportedSharedCssClassName = {
   BLOCK_CONTAINER: 'unsupportedBlockView-content-wrap',
   INLINE_CONTAINER: 'unsupportedInlineView-content-wrap'
 };
-var inlineUnsupportedSelector = ".".concat(UnsupportedSharedCssClassName.INLINE_CONTAINER, " > span");
+var inlineUnsupportedSelector = ".".concat(UnsupportedSharedCssClassName.INLINE_CONTAINER, " > span:nth-child(2)");
 var blockUnsupportedSelector = ".".concat(UnsupportedSharedCssClassName.BLOCK_CONTAINER, " > div");
-export var unsupportedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ", ", " {\n    cursor: pointer;\n  }\n\n  .", "", ",\n    .", "", " {\n    ", "\n  }\n\n  .danger {\n    .", "", ",\n      .", "", " {\n      border: ", "px solid ", ";\n      background-color: ", ";\n    }\n  }\n"])), blockUnsupportedSelector, inlineUnsupportedSelector, akEditorSelectedNodeClassName, blockUnsupportedSelector, akEditorSelectedNodeClassName, inlineUnsupportedSelector, getSelectionStyles([SelectionStyle.Background, SelectionStyle.Border]), akEditorSelectedNodeClassName, blockUnsupportedSelector, akEditorSelectedNodeClassName, inlineUnsupportedSelector, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackgroundWithOpacity);
+export var unsupportedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ", ", " {\n    cursor: pointer;\n  }\n\n  .", "", ",\n    .", "", " {\n    ", "\n  }\n\n  .danger {\n    .", "", ",\n      .", "", " {\n      border: ", "px solid\n        ", ";\n      background-color: ", ";\n    }\n  }\n"])), blockUnsupportedSelector, inlineUnsupportedSelector, akEditorSelectedNodeClassName, blockUnsupportedSelector, akEditorSelectedNodeClassName, inlineUnsupportedSelector, getSelectionStyles([SelectionStyle.Background, SelectionStyle.Border]), akEditorSelectedNodeClassName, blockUnsupportedSelector, akEditorSelectedNodeClassName, inlineUnsupportedSelector, akEditorSelectedBorderSize, token('color.border.danger', akEditorDeleteBorder), token('color.blanket.danger', akEditorDeleteBackgroundWithOpacity));

package/dist/esm/plugins/unsupported-content/unsupported-inline-node-view.js

@@ -0,0 +1,7 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { UnsupportedInline } from '@atlaskit/editor-common/ui';
+export var UnsupportedInlineNodeView = function UnsupportedInlineNodeView(props) {
+  return jsx(UnsupportedInline, props);
+};

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

@@ -7,7 +7,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -22,7 +22,7 @@ import { createEditorContentStyle } from '../ContentStyles';
 import { pluginKey as maxContentSizePluginKey } from '../../plugins/max-content-size';
 import { scrollbarStyles } from '../styles';
 import WithFlash from '../WithFlash';
-var chromelessEditor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 20px;\n  height: auto;\n  min-height: 30px;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  max-width: inherit;\n  box-sizing: border-box;\n  word-wrap: break-word;\n\n  div > .ProseMirror {\n    outline: none;\n    white-space: pre-wrap;\n    padding: 0;\n    margin: 0;\n  }\n"])), scrollbarStyles);
+var chromelessEditor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 20px;\n  height: auto;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n  ", ";\n  max-width: inherit;\n  box-sizing: border-box;\n  word-wrap: break-word;\n\n  div > .ProseMirror {\n    outline: none;\n    white-space: pre-wrap;\n    padding: 0;\n    margin: 0;\n  }\n"])), scrollbarStyles);
 var ContentArea = createEditorContentStyle();
 ContentArea.displayName = 'ContentArea';
 
@@ -57,6 +57,8 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           contentComponents = _this$props.contentComponents,
           customContentComponents = _this$props.customContentComponents,
           maxHeight = _this$props.maxHeight,
+          _this$props$minHeight = _this$props.minHeight,
+          minHeight = _this$props$minHeight === void 0 ? 30 : _this$props$minHeight,
           popupsMountPoint = _this$props.popupsMountPoint,
           popupsBoundariesElement = _this$props.popupsBoundariesElement,
           popupsScrollableElement = _this$props.popupsScrollableElement,
@@ -66,7 +68,8 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       return jsx(WithFlash, {
         animate: maxContentSizeReached
       }, jsx("div", {
-        css: [chromelessEditor, maxHeight && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                max-height: ", "px;\n              "])), maxHeight)],
+        css: [chromelessEditor, maxHeight && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n                max-height: ", "px;\n              "])), maxHeight), css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              min-height: ", "px;\n            "])), minHeight)],
+        "data-testid": "chromeless-editor",
         ref: function ref(_ref2) {
           return _this.containerElement = _ref2;
         }