@atlaskit/editor-core 164.0.3 → 166.0.0

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

@@ -1,6 +1,7 @@
 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';
 const ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER',
@@ -32,7 +33,7 @@ export const setContext = context => (state, dispatch) => {
 
   return true;
 };
-export function createMentionPlugin(dispatch, providerFactory, portalProviderAPI, eventDispatcher, fireEvent, options) {
+export function createMentionPlugin(pmPluginFactoryParams, fireEvent, options) {
   let mentionProvider;
 
   const sendAnalytics = (event, actionSubject, action, attributes) => {
@@ -63,14 +64,14 @@ export function createMentionPlugin(dispatch, providerFactory, portalProviderAPI
             newPluginState = { ...pluginState,
               mentionProvider: params.provider
             };
-            dispatch(mentionPluginKey, newPluginState);
+            pmPluginFactoryParams.dispatch(mentionPluginKey, newPluginState);
             return newPluginState;
 
           case ACTIONS.SET_CONTEXT:
             newPluginState = { ...pluginState,
               contextIdentifierProvider: params.context
             };
-            dispatch(mentionPluginKey, newPluginState);
+            pmPluginFactoryParams.dispatch(mentionPluginKey, newPluginState);
             return newPluginState;
         }
 
@@ -80,7 +81,14 @@ export function createMentionPlugin(dispatch, providerFactory, portalProviderAPI
     },
     props: {
       nodeViews: {
-        mention: mentionNodeView(portalProviderAPI, eventDispatcher, providerFactory, options)
+        mention: getInlineNodeViewProducer({
+          pmPluginFactoryParams,
+          Component: MentionNodeView,
+          extraComponentProps: {
+            providerFactory: pmPluginFactoryParams.providerFactory,
+            options
+          }
+        })
       }
     },
 
@@ -117,13 +125,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() {
-          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/es2019/plugins/mentions/type-ahead/index.js

@@ -364,11 +364,16 @@ export const createTypeAheadConfig = ({
     dismiss({
       editorState,
       query,
-      stats
+      stats,
+      wasItemInserted
     }) {
       firstQueryWithoutResults = null;
       const 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 || ''));
+      }
+
       const pluginState = getMentionPluginState(editorState);
 
       if (pluginState !== null && pluginState !== void 0 && pluginState.mentionProvider) {

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

@@ -1,6 +1,7 @@
 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 const panelStyles = props => css`
   .ProseMirror {
     .${PanelSharedCssClassName.prefix} {
@@ -10,10 +11,10 @@ export const panelStyles = props => css`
       &.danger {
         box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
           ${akEditorDeleteBorder};
-        background-color: ${akEditorDeleteBackground} !important;
+        background-color: ${token('color.background.danger', akEditorDeleteBackground)} !important;
 
         .${PanelSharedCssClassName.icon} {
-          color: ${akEditorDeleteIconColor} !important;
+          color: ${token('color.icon.danger', akEditorDeleteIconColor)} !important;
         }
       }
     }
@@ -25,10 +26,10 @@ export const panelStyles = props => css`
     /* Danger when nested node */
     .danger .${PanelSharedCssClassName.prefix} {
       &[data-panel-type] {
-        background-color: ${akEditorDeleteBackgroundWithOpacity};
+        background-color: ${token('color.blanket.danger', akEditorDeleteBackgroundWithOpacity)};
 
         .${PanelSharedCssClassName.icon} {
-          color: ${akEditorDeleteIconColor};
+          color: ${token('color.icon.danger', akEditorDeleteIconColor)};
         }
       }
     }

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

@@ -3,7 +3,9 @@ import { browser, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 
 const serializePlaceholderNode = node => {
   const 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/es2019/plugins/rule/styles.js

@@ -1,6 +1,7 @@
 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 const ruleStyles = props => css`
   .ProseMirror {
     ${ruleSharedStyles(props)};
@@ -13,7 +14,7 @@ export const ruleStyles = props => css`
 
       &.${akEditorSelectedNodeClassName} {
         outline: none;
-        background-color: ${akEditorSelectedBorderColor};
+        background-color: ${token('color.border.selected', akEditorSelectedBorderColor)};
       }
     }
   }

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

@@ -39,7 +39,7 @@ export const getDecorations = tr => {
   }
 
   if (tr.selection instanceof TextSelection || tr.selection instanceof AllSelection) {
-    const decorations = getTopLevelNodesFromSelection(tr.selection, tr.doc).map(({
+    const decorations = getNodesToDecorateFromSelection(tr.selection, tr.doc).map(({
       node,
       pos
     }) => {
@@ -92,24 +92,17 @@ export function getCellSelectionAnalyticsPayload(state) {
     };
   }
 }
+const 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 const getTopLevelNodesFromSelection = (selection, doc) => {
+export const getNodesToDecorateFromSelection = (selection, doc) => {
   const nodes = [];
 
   if (selection.from !== selection.to) {
@@ -118,14 +111,36 @@ export const getTopLevelNodesFromSelection = (selection, doc) => {
       to
     } = selection;
     doc.nodesBetween(from, to, (node, pos) => {
-      const withinSelection = from <= pos && pos + node.nodeSize <= to;
-
-      if (node && node.type.name !== 'paragraph' && !node.isText && withinSelection) {
+      const 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.
+
+      const 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,
+          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,
           pos
         });
-        return false;
       }
 
       return true;

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

@@ -9,6 +9,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
+
+const 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.
+
+const HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
 export const supportedHeaderRow = node => {
   const allHeaders = mapChildren(node, child => child.type.name === 'tableHeader').every(Boolean);
   const someMerged = mapChildren(node, child => child.attrs.rowspan || 0).some(rowspan => rowspan > 1);
@@ -33,6 +40,17 @@ export class TableRowNodeView {
 
     _defineProperty(this, "listening", false);
 
+    _defineProperty(this, "headerRowMouseScrollEnd", debounce(() => {
+      this.dom.classList.remove('no-pointer-events');
+    }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT));
+
+    _defineProperty(this, "headerRowMouseScroll", throttle(() => {
+      if (this.isSticky) {
+        this.dom.classList.add('no-pointer-events');
+        this.headerRowMouseScrollEnd();
+      }
+    }, HEADER_ROW_SCROLL_THROTTLE_TIMEOUT));
+
     _defineProperty(this, "onScroll", () => {
       if (!this.tree) {
         return;
@@ -322,6 +340,8 @@ export class TableRowNodeView {
     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));
   }
 
   unsubscribe() {
@@ -344,6 +364,8 @@ export class TableRowNodeView {
     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/es2019/plugins/table/ui/common-styles.js

@@ -163,6 +163,10 @@ export const tableStyles = props => {
 
       box-shadow: 0 6px 4px -4px ${N40A};
       margin-left: -1px;
+
+      &.no-pointer-events {
+        pointer-events: none;
+      }
     }
 
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {

package/dist/es2019/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 const tableCellBackgroundColor = themed({
   dark: DN30
 });
 export const tableToolbarColor = themed({
-  light: akEditorTableToolbar,
-  dark: akEditorTableToolbarDark
+  light: token('color.background.neutral', akEditorTableToolbar),
+  dark: token('color.background.neutral', akEditorTableToolbarDark)
 });
 export const tableTextColor = themed({
   light: N200,
   dark: DN400
 });
 export const tableBorderColor = themed({
-  light: akEditorTableBorder,
-  dark: akEditorTableBorderDark
+  light: token('color.border', akEditorTableBorder),
+  dark: token('color.border', akEditorTableBorderDark)
 });
 export const tableFloatingControlsColor = N20;
 export const tableCellSelectedColor = B75;

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

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import { TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import { token } from '@atlaskit/tokens';
 export const taskDecisionStyles = css`
   [data-decision-wrapper] {
     cursor: pointer;
@@ -15,8 +16,9 @@ export const taskDecisionStyles = css`
   .danger {
     .${TaskDecisionSharedCssClassName.DECISION_CONTAINER}.${akEditorSelectedNodeClassName}
       > div {
-      box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
-      background-color: ${akEditorDeleteBackgroundWithOpacity};
+      box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
+        ${token('color.border.danger', akEditorDeleteBorder)};
+      background-color: ${token('color.blanket.danger', akEditorDeleteBackgroundWithOpacity)};
       &::after {
         content: none; /* reset the Blanket selection style */
       }

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

@@ -180,6 +180,7 @@ const typeAheadPlugin = options => {
     },
 
     onEditorViewStateUpdated({
+      originalTransaction,
       oldEditorState,
       newEditorState
     }) {
@@ -199,10 +200,13 @@ const typeAheadPlugin = options => {
       const isANewHandler = oldTriggerHandler !== newTriggerHandler;
 
       if (oldTriggerHandler !== null && oldTriggerHandler !== void 0 && oldTriggerHandler.dismiss && isANewHandler) {
+        const typeAheadMessage = originalTransaction.getMeta(typeAheadPluginKey);
+        const 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
         });
       }
 

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

@@ -1,16 +1,19 @@
 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 const pluginKey = new PluginKey('unsupportedContentPlugin');
 
-const createPlugin = ({
-  portalProviderAPI,
-  eventDispatcher,
-  dispatchAnalyticsEvent
-}) => {
+const createPlugin = pmPluginFactoryParams => {
   const hasIntlContext = true;
+  const {
+    portalProviderAPI,
+    eventDispatcher,
+    dispatchAnalyticsEvent
+  } = pmPluginFactoryParams;
   return new SafePlugin({
     key: pluginKey,
     props: {
@@ -18,15 +21,23 @@ const createPlugin = ({
         confluenceUnsupportedBlock: ReactNodeView.fromComponent(UnsupportedBlock, portalProviderAPI, eventDispatcher, {
           dispatchAnalyticsEvent
         }, undefined, hasIntlContext),
-        confluenceUnsupportedInline: ReactNodeView.fromComponent(UnsupportedInline, portalProviderAPI, eventDispatcher, {
-          dispatchAnalyticsEvent
-        }, undefined, hasIntlContext),
+        confluenceUnsupportedInline: getInlineNodeViewProducer({
+          pmPluginFactoryParams,
+          Component: UnsupportedInlineNodeView,
+          extraComponentProps: {
+            dispatchAnalyticsEvent
+          }
+        }),
         unsupportedBlock: ReactNodeView.fromComponent(UnsupportedBlock, portalProviderAPI, eventDispatcher, {
           dispatchAnalyticsEvent
         }, undefined, hasIntlContext),
-        unsupportedInline: ReactNodeView.fromComponent(UnsupportedInline, portalProviderAPI, eventDispatcher, {
-          dispatchAnalyticsEvent
-        }, undefined, hasIntlContext)
+        unsupportedInline: getInlineNodeViewProducer({
+          pmPluginFactoryParams,
+          Component: UnsupportedInlineNodeView,
+          extraComponentProps: {
+            dispatchAnalyticsEvent
+          }
+        })
       }
     }
   });

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

@@ -1,10 +1,11 @@
 import { css } from '@emotion/react';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import { token } from '@atlaskit/tokens';
 export const UnsupportedSharedCssClassName = {
   BLOCK_CONTAINER: 'unsupportedBlockView-content-wrap',
   INLINE_CONTAINER: 'unsupportedInlineView-content-wrap'
 };
-const inlineUnsupportedSelector = `.${UnsupportedSharedCssClassName.INLINE_CONTAINER} > span`;
+const inlineUnsupportedSelector = `.${UnsupportedSharedCssClassName.INLINE_CONTAINER} > span:nth-child(2)`;
 const blockUnsupportedSelector = `.${UnsupportedSharedCssClassName.BLOCK_CONTAINER} > div`;
 export const unsupportedStyles = css`
   ${blockUnsupportedSelector}, ${inlineUnsupportedSelector} {
@@ -19,8 +20,9 @@ export const unsupportedStyles = css`
   .danger {
     .${akEditorSelectedNodeClassName}${blockUnsupportedSelector},
       .${akEditorSelectedNodeClassName}${inlineUnsupportedSelector} {
-      border: ${akEditorSelectedBorderSize}px solid ${akEditorDeleteBorder};
-      background-color: ${akEditorDeleteBackgroundWithOpacity};
+      border: ${akEditorSelectedBorderSize}px solid
+        ${token('color.border.danger', akEditorDeleteBorder)};
+      background-color: ${token('color.blanket.danger', akEditorDeleteBackgroundWithOpacity)};
     }
   }
 `;

package/dist/es2019/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 const UnsupportedInlineNodeView = props => {
+  return jsx(UnsupportedInline, props);
+};

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

@@ -12,7 +12,6 @@ import WithFlash from '../WithFlash';
 const chromelessEditor = css`
   line-height: 20px;
   height: auto;
-  min-height: 30px;
 
   overflow-x: hidden;
   overflow-y: auto;
@@ -50,6 +49,7 @@ export default class Editor extends React.Component {
         contentComponents,
         customContentComponents,
         maxHeight,
+        minHeight = 30,
         popupsMountPoint,
         popupsBoundariesElement,
         popupsScrollableElement,
@@ -62,7 +62,10 @@ export default class Editor extends React.Component {
       }, jsx("div", {
         css: [chromelessEditor, maxHeight && css`
                 max-height: ${maxHeight}px;
-              `],
+              `, css`
+              min-height: ${minHeight}px;
+            `],
+        "data-testid": "chromeless-editor",
         ref: ref => this.containerElement = ref
       }, jsx(ContentArea, null, customContentComponents, jsx(PluginSlot, {
         editorView: editorView,

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

@@ -37,7 +37,7 @@ const commentEditorStyle = css`
   min-width: 272px;
   /* Border + Toolbar + Footer + (Paragraph + ((Parahraph + Margin) * (DefaultLines - 1)) */
   /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */
-  min-height: 150px;
+
   height: auto;
   background-color: white;
   border: 1px solid ${N40};
@@ -117,6 +117,7 @@ class Editor extends React.Component {
         popupsBoundariesElement,
         popupsScrollableElement,
         maxHeight,
+        minHeight = 150,
         onSave,
         onCancel,
         disabled,
@@ -129,7 +130,9 @@ class Editor extends React.Component {
       return jsx(WithFlash, {
         animate: maxContentSizeReached
       }, jsx("div", {
-        css: commentEditorStyle,
+        css: [commentEditorStyle, css`
+              min-height: ${minHeight}px;
+            `],
         className: "akEditor"
       }, jsx(MainToolbar, {
         useStickyToolbar: useStickyToolbar

package/dist/es2019/ui/ChromeCollapsed/styles.js

@@ -2,11 +2,12 @@ import { css } from '@emotion/react';
 import { akEditorSubtleAccent, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N300, N50 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export const inputStyle = css`
   /* Normal .className gets overridden by input[type=text] hence this hack to produce input.className */
   input& {
     background-color: white;
-    border: 1px solid ${akEditorSubtleAccent};
+    border: 1px solid ${token('color.border.input', akEditorSubtleAccent)};
     border-radius: ${borderRadius()}px;
     box-sizing: border-box;
     height: 40px;

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

@@ -17,7 +17,7 @@ import { layoutStyles } from '../../plugins/layout/styles';
 import { panelStyles } from '../../plugins/panel/styles';
 import { fakeCursorStyles } from '../../plugins/fake-text-cursor/styles';
 import { mentionsStyles } from '../../plugins/mentions/styles';
-import { emojiStyles, emojiStylesNext } from '../../plugins/emoji/styles';
+import { emojiStyles } from '../../plugins/emoji/styles';
 import { textFormattingStyles } from '../../plugins/text-formatting/styles';
 import { placeholderTextStyles } from '../../plugins/placeholder-text/styles';
 import { gridStyles } from '../../plugins/grid/styles';
@@ -35,7 +35,7 @@ import { useFeatureFlags } from '../../plugins/feature-flags-context';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
 
 const contentStyles = props => {
-  var _props$featureFlags, _props$featureFlags2;
+  var _props$featureFlags;
 
   return css`
   .ProseMirror {
@@ -89,7 +89,7 @@ const contentStyles = props => {
   ${panelStyles(props)}
   ${fakeCursorStyles}
   ${mentionsStyles}
-  ${(_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.nextEmojiNodeView ? emojiStylesNext : emojiStyles}
+  ${emojiStyles}
   ${tasksAndDecisionsStyles}
   ${gridStyles}
   ${linkStyles}

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import AtlaskitTheme from '@atlaskit/theme/components';
+import { CHANNEL } from '@atlaskit/theme/constants';
+import { ThemeProvider } from '@emotion/react';
+import { ThemeProvider as DeprectateStyledComponentsProvider } from 'styled-components';
+export function PortalProviderThemeProviders(props) {
+  const {
+    children,
+    mode
+  } = props;
+  const styledComponentsAndEmotionTheme = React.useMemo( // This return value should only be one of the following
+  // - { [CHANNEL]: { mode },
+  // - { theme: { [CHANNEL]: { mode } }
+  // However, it appears that consumers have inconsistent expectations
+  // regarding the shape.
+  // This can be revisited in future work, and for the purposes of
+  // fixing https://product-fabric.atlassian.net/browse/ED-14956
+  // we are merging the two shapes consumers expect.
+  () => ({
+    [CHANNEL]: {
+      mode
+    },
+    theme: {
+      [CHANNEL]: {
+        mode
+      }
+    }
+  }), [mode]);
+  const atlaskitTheme = React.useCallback(() => ({
+    mode
+  }), [mode]);
+  return /*#__PURE__*/React.createElement(DeprectateStyledComponentsProvider, {
+    theme: styledComponentsAndEmotionTheme
+  }, /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: styledComponentsAndEmotionTheme
+  }, /*#__PURE__*/React.createElement(AtlaskitTheme.Provider, {
+    value: atlaskitTheme
+  }, children)));
+}