@atlaskit/editor-core 153.1.3 → 155.0.0

package/dist/es2019/plugins/undo-redo/ui/ToolbarUndoRedo/index.js

@@ -67,12 +67,13 @@ export class ToolbarUndoRedo extends PureComponent {
       spacing: isReducedSpacing ? 'none' : 'default',
       onClick: handleUndo,
       disabled: !canUndo || disabled,
+      "aria-label": labelUndo,
       title: /*#__PURE__*/React.createElement(ToolTipContent, {
         description: labelUndo,
         keymap: undoKeymap
       }),
       iconBefore: /*#__PURE__*/React.createElement(UndoIcon, {
-        label: labelUndo
+        label: ""
       }),
       testId: "ak-editor-toolbar-button-undo"
     }), /*#__PURE__*/React.createElement(ToolbarButton, {
@@ -85,9 +86,10 @@ export class ToolbarUndoRedo extends PureComponent {
         keymap: redoKeymap
       }),
       iconBefore: /*#__PURE__*/React.createElement(RedoIcon, {
-        label: labelRedo
+        label: ""
       }),
-      testId: "ak-editor-toolbar-button-redo"
+      testId: "ak-editor-toolbar-button-redo",
+      "aria-label": labelRedo
     }), /*#__PURE__*/React.createElement(Separator, null));
   }
 

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

@@ -1,6 +1,7 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+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';
+import { UnsupportedBlock, UnsupportedInline } from '@atlaskit/editor-common/ui';
 import { ReactNodeView } from '../../nodeviews';
 export const pluginKey = new PluginKey('unsupportedContentPlugin');
 
@@ -10,7 +11,7 @@ const createPlugin = ({
   dispatchAnalyticsEvent
 }) => {
   const hasIntlContext = true;
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     props: {
       nodeViews: {

package/dist/es2019/plugins/view-update-subscription/index.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 export const trackerStore = new WeakMap();
 
 class Tracker {
@@ -34,7 +35,7 @@ const createViewUpdateSubscriptionPlugin = () => {
   return {
     name: 'viewUpdateSubscription',
     pmPlugins: () => {
-      const createPlugin = () => new Plugin({
+      const createPlugin = () => new SafePlugin({
         key: pluginKey,
 
         view(editorView) {

package/dist/es2019/plugins/width/index.js

@@ -1,7 +1,8 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 export const pluginKey = new PluginKey('widthPlugin');
 export function createPlugin(dispatch) {
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init: () => ({

package/dist/es2019/profiler/render-count.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import uuid from 'uuid';
 import { useComponentRenderTracking } from '../utils/react-hooks/use-component-renderer-tracking';
-import { RenderCountProfiler as RenderCountProfilerClass } from '@atlaskit/editor-common';
+import { RenderCountProfiler as RenderCountProfilerClass } from '@atlaskit/editor-common/utils';
 export let ProfiledComponentIds;
 
 (function (ProfiledComponentIds) {

package/dist/es2019/ui/Addon/ClickAreaMobile/index.js

@@ -10,7 +10,7 @@ import { clickAreaClickHandler } from '../click-area-helper';
 
 const ClickWrapper = styled.div`
   height: 100%;
-  ${props => props.persistScrollGutter !== true && `min-height: ${props.minHeight}vh`}
+  ${props => props.isExpanded && props.minHeight && `min-height: ${props.minHeight}px`}
 `;
 ClickWrapper.displayName = 'ClickWrapper';
 
@@ -63,7 +63,8 @@ export default class ClickAreaMobile extends React.Component {
       minHeight: this.props.minHeight,
       persistScrollGutter: this.props.persistScrollGutter,
       onClick: this.handleClick,
-      innerRef: this.clickElementRef
+      innerRef: this.clickElementRef,
+      isExpanded: this.props.isExpanded
     }, this.props.children);
   }
 

package/dist/es2019/ui/Alignment/AlignmentButton/index.js

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { PureComponent } from 'react';
 import ToolbarButton from '../../ToolbarButton';
+import { ToolTipContent } from '../../../keymaps';
 
 class AlignmentButton extends PureComponent {
   constructor(...args) {
@@ -21,13 +22,18 @@ class AlignmentButton extends PureComponent {
     const {
       label,
       isSelected,
-      content
+      content,
+      shortcut
     } = this.props;
     return /*#__PURE__*/React.createElement(ToolbarButton, {
       disabled: false,
       selected: isSelected,
-      title: label,
+      title: /*#__PURE__*/React.createElement(ToolTipContent, {
+        description: label,
+        keymap: shortcut
+      }),
       "aria-label": label,
+      "aria-pressed": isSelected,
       onClick: this.onClick,
       iconBefore: content
     });

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

@@ -1,18 +1,21 @@
 import React from 'react';
 import { PureComponent } from 'react';
 import { injectIntl } from 'react-intl-next';
-import { iconMap } from '../../plugins/alignment/ui/ToolbarAlignment/icon-map';
+import { IconMap } from '../../plugins/alignment/ui/ToolbarAlignment/icon-map';
 import AlignmentButton from './AlignmentButton';
 import { alignmentMessages } from './messages';
 import { AlignmentWrapper } from './styles';
+import { alignLeft, alignRight } from '../../keymaps';
 const alignmentOptions = [{
   title: alignmentMessages.alignLeft,
+  shortcut: alignLeft,
   value: 'start'
 }, {
   title: alignmentMessages.alignCenter,
   value: 'center'
 }, {
   title: alignmentMessages.alignRight,
+  shortcut: alignRight,
   value: 'end'
 }];
 
@@ -32,14 +35,18 @@ class Alignment extends PureComponent {
     }, alignmentOptions.map(alignment => {
       const {
         value,
-        title
+        title,
+        shortcut
       } = alignment;
       const message = intl.formatMessage(title);
       return /*#__PURE__*/React.createElement(AlignmentButton, {
-        content: iconMap[value],
+        content: /*#__PURE__*/React.createElement(IconMap, {
+          alignment: value
+        }),
         key: value,
         value: value,
         label: message,
+        shortcut: shortcut,
         onClick: onClick,
         isSelected: value === selectedAlignment
       });

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

@@ -14,7 +14,7 @@ import { stateKey as mediaPluginKey } from '../../../plugins/media/pm-plugins/pl
 import { ClickAreaBlock } from '../../Addon';
 import { tableCommentEditorStyles } from '../../../plugins/table/ui/common-styles.css';
 import WithFlash from '../../WithFlash';
-import { WidthConsumer } from '@atlaskit/editor-common';
+import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import WidthEmitter from '../../WidthEmitter';
 import { GRID_GUTTER } from '../../../plugins/grid';

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

@@ -56,7 +56,7 @@ export class FullPageEditor extends React.Component {
     }));
 
     _defineProperty(this, "handleResize", () => {
-      this.scheduledKeylineUpdate = this.updateToolbarKeyline();
+      this.updateToolbarKeyline();
     });
   }
 
@@ -66,10 +66,7 @@ export class FullPageEditor extends React.Component {
 
   componentWillUnmount() {
     window.removeEventListener('resize', this.handleResize);
-
-    if (this.scheduledKeylineUpdate) {
-      cancelAnimationFrame(this.scheduledKeylineUpdate);
-    }
+    this.updateToolbarKeyline.cancel();
   }
 
   render() {

package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js

@@ -1,13 +1,15 @@
-import { WidthConsumer } from '@atlaskit/editor-common';
+import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { ContextPanelConsumer } from '../../ContextPanel/context';
 import React from 'react';
+import { injectIntl } from 'react-intl-next';
 import { ClickAreaBlock } from '../../Addon';
 import ContextPanel from '../../ContextPanel';
 import PluginSlot from '../../PluginSlot';
 import WidthEmitter from '../../WidthEmitter';
 import { ContentArea, EditorContentArea, SidebarArea, ScrollContainer, EditorContentGutter } from './StyledComponents';
+import messages from './messages';
 export const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
-export const FullPageContentArea = /*#__PURE__*/React.memo(props => {
+const Content = /*#__PURE__*/React.memo(props => {
   return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
     width
   }) => /*#__PURE__*/React.createElement(ContextPanelConsumer, null, ({
@@ -22,6 +24,8 @@ export const FullPageContentArea = /*#__PURE__*/React.memo(props => {
   }, /*#__PURE__*/React.createElement(ClickAreaBlock, {
     editorView: props.editorView
   }, /*#__PURE__*/React.createElement(EditorContentArea, {
+    role: "region",
+    "aria-label": props.intl.formatMessage(messages.editableContentLabel),
     fullWidthMode: props.appearance === 'full-width',
     innerRef: props.contentAreaRef,
     containerWidth: width
@@ -46,4 +50,5 @@ export const FullPageContentArea = /*#__PURE__*/React.memo(props => {
   })), /*#__PURE__*/React.createElement(WidthEmitter, {
     editorView: props.editorView
   }))));
-});
+});
+export const FullPageContentArea = injectIntl(Content);

package/dist/es2019/ui/Appearance/FullPage/FullPageToolbar.js

@@ -1,11 +1,13 @@
 import React, { useState, useEffect } from 'react';
+import { injectIntl } from 'react-intl-next';
 import AvatarsWithPluginState from '../../../plugins/collab-edit/ui';
 import FindReplaceToolbarButtonWithState from '../../../plugins/find-replace/FindReplaceToolbarButtonWithState';
 import { BeforePrimaryToolbarWrapper } from '../../../plugins/before-primaryToolbar/ui/BeforePrimaryToolbarWrapper';
 import Toolbar from '../../Toolbar';
 import { MainToolbar, MainToolbarIconBefore, MainToolbarFirstChild, MainToolbarSecondChild, NonCustomToolbarWrapper, CustomToolbarWrapper, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
 import { ContextPanelConsumer } from '../../ContextPanel/context';
-export const FullPageToolbar = /*#__PURE__*/React.memo(props => {
+import messages from './messages';
+export const EditorToolbar = /*#__PURE__*/React.memo(props => {
   var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$collabEdit, _props$collabEdit2, _props$collabEdit3, _props$featureFlags4, _props$featureFlags5;
 
   const [shouldSplitToolbar, setShouldSplitToolbar] = useState(false);
@@ -63,10 +65,15 @@ export const FullPageToolbar = /*#__PURE__*/React.memo(props => {
       showKeyline: props.showKeyline || contextPanelWidth > 0,
       twoLineEditorToolbar: !!((_props$featureFlags7 = props.featureFlags) !== null && _props$featureFlags7 !== void 0 && _props$featureFlags7.twoLineEditorToolbar)
     }, /*#__PURE__*/React.createElement(MainToolbarFirstChild, {
-      twoLineEditorToolbar: !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar)
+      twoLineEditorToolbar: !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar),
+      role: "region",
+      "aria-label": props.intl.formatMessage(messages.toolbarLabel)
     }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), /*#__PURE__*/React.createElement(MainToolbarSecondChild, {
       "data-testid": 'avatar-group-outside-plugin',
-      twoLineEditorToolbar: !!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.twoLineEditorToolbar)
+      twoLineEditorToolbar: !!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.twoLineEditorToolbar),
+      role: "region",
+      "aria-label": props.intl.formatMessage(messages.pageActionsLabel)
     }, shouldSplitToolbar ? nonCustomToolbar : customToolbar));
   });
-});
+});
+export const FullPageToolbar = injectIntl(EditorToolbar);

package/dist/es2019/ui/Appearance/FullPage/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+  toolbarLabel: {
+    id: 'fabric.editor.toolbarLabel',
+    defaultMessage: 'Editor toolbar',
+    description: 'Label for the ARIA region landmark'
+  },
+  pageActionsLabel: {
+    id: 'fabric.editor.pageActionsLabel',
+    defaultMessage: 'Page actions',
+    description: 'Label for the ARIA region landmark'
+  },
+  editableContentLabel: {
+    id: 'fabric.editor.editableContentLabel',
+    defaultMessage: 'Editable content',
+    description: 'Label for the ARIA region landmark'
+  }
+});

package/dist/es2019/ui/AppearanceComponents/Mobile.js

@@ -35,12 +35,14 @@ export function MobileAppearance({
   }) => {
     const maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
     let minHeight = 100;
+    let currentIsExpanded = true; // isExpanded prop should always be true for Hybrid Editor
 
     if (mobileDimensions) {
       const {
         keyboardHeight,
         windowHeight,
-        mobilePaddingTop
+        mobilePaddingTop,
+        isExpanded
       } = mobileDimensions;
       /*
         We calculate the min-height based on the windowHeight - keyboardHeight - paddingTop.
@@ -49,9 +51,16 @@ export function MobileAppearance({
         is scrolled nevertheless, and it gives the sensation that the content was lost.
       */
 
-      const keyboardHeightVh = keyboardHeight * 100 / windowHeight;
-      const paddingVh = mobilePaddingTop * 100 / windowHeight;
-      minHeight = 100 - keyboardHeightVh - paddingVh;
+      if (!persistScrollGutter) {
+        // in iOS Hybrid Editor windowHeight doesn't exclude keyboardHeight
+        // in Android keyboardHeight is always set to -1;
+        minHeight = windowHeight - keyboardHeight - 2 * mobilePaddingTop;
+      } else {
+        // in iOS Compact Editor windowHeight excludes keyboardHeight
+        minHeight = windowHeight - mobilePaddingTop; // isExpanded can be true of false for Compact editor
+
+        currentIsExpanded = isExpanded;
+      }
     }
 
     return /*#__PURE__*/React.createElement(WithFlash, {
@@ -62,7 +71,8 @@ export function MobileAppearance({
     }, /*#__PURE__*/React.createElement(ClickArea, {
       editorView: editorView || undefined,
       minHeight: minHeight,
-      persistScrollGutter: persistScrollGutter
+      persistScrollGutter: persistScrollGutter,
+      isExpanded: currentIsExpanded
     }, /*#__PURE__*/React.createElement(ContentArea, null, /*#__PURE__*/React.createElement("div", {
       className: "ak-editor-content-area"
     }, children)))));

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

@@ -2,7 +2,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { PureComponent } from 'react';
 import { Input } from './styles';
-export default class ChromeCollapsed extends PureComponent {
+import { injectIntl } from 'react-intl-next';
+import { messages } from './messages';
+
+class ChromeCollapsed extends PureComponent {
   constructor(...args) {
     super(...args);
 
@@ -28,7 +31,7 @@ export default class ChromeCollapsed extends PureComponent {
   }
 
   render() {
-    const placeholder = this.props.text || 'Type something…';
+    const placeholder = this.props.text || this.props.intl.formatMessage(messages.chromeCollapsedPlaceholder);
     return /*#__PURE__*/React.createElement(Input, {
       innerRef: this.handleInputRef,
       onFocus: this.focusHandler,
@@ -36,4 +39,6 @@ export default class ChromeCollapsed extends PureComponent {
     });
   }
 
-}
+}
+
+export default injectIntl(ChromeCollapsed);

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

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  chromeCollapsedPlaceholder: {
+    id: 'fabric.editor.chromeCollapsedPlaceholder',
+    defaultMessage: 'Type something…',
+    description: 'placeholder for an input where users insert text'
+  }
+});

package/dist/es2019/ui/ColorPalette/Palettes/panelBackgroundPalette.js

@@ -2,69 +2,136 @@
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { colors } from '@atlaskit/theme';
 import { DEFAULT_BORDER_COLOR } from './common';
+import { darkPanelColors } from '@atlaskit/editor-common/styles';
 export const panelBackgroundPalette = [{
-  label: 'Doctor',
+  label: 'White',
   value: colors.N0
 }, {
-  label: 'Pixie dust',
+  label: 'Light blue',
   value: colors.B50
 }, {
-  label: "Gram's sofa",
+  label: 'Light teal',
   value: colors.T50
 }, {
-  label: 'The smell',
+  label: 'Light green',
   value: colors.G50
 }, {
-  label: 'James blonde',
+  label: 'Light yellow',
   value: colors.Y50
 }, {
-  label: 'Rosie',
+  label: 'Light red',
   value: colors.R50
 }, {
-  label: 'Lavender secret',
+  label: 'Light purple',
   value: colors.P50
 }, {
-  label: "Gram's hair",
+  label: 'Light gray',
   value: colors.N20
 }, {
-  label: 'Schwag',
+  label: 'Blue',
   value: colors.B75
 }, {
-  label: 'Arctic chill',
+  label: 'Teal',
   value: colors.T75
 }, {
-  label: 'Mintie',
+  label: 'Green',
   value: colors.G75
 }, {
-  label: 'Dandelion whisper',
+  label: 'Yellow',
   value: colors.Y75
 }, {
-  label: 'Bondi sunburn',
+  label: 'Red',
   value: colors.R75
 }, {
-  label: 'Phantom mist',
+  label: 'Purple',
   value: colors.P75
 }, {
-  label: 'Sentinel',
+  label: 'Gray',
   value: colors.N60
 }, {
-  label: 'Arvo breeze',
+  label: 'Dark blue',
   value: colors.B100
 }, {
-  label: 'Hairy fairy',
+  label: 'Dark teal',
   value: colors.T100
 }, {
-  label: 'Green tea',
+  label: 'Dark green',
   value: colors.G200
 }, {
-  label: 'Pub mix',
+  label: 'Dark yellow',
   value: colors.Y200
 }, {
-  label: 'Alexandria',
+  label: 'Dark red',
   value: colors.R100
 }, {
-  label: 'Herky jerky',
+  label: 'Dark purple',
   value: colors.P100
 }].map(color => ({ ...color,
   border: DEFAULT_BORDER_COLOR
+}));
+export const panelDarkModeBackgroundPalette = [{
+  label: 'Dark gray',
+  value: darkPanelColors.DarkGray
+}, {
+  label: 'Dark blue',
+  value: darkPanelColors.B1200S
+}, {
+  label: 'Dark teal',
+  value: darkPanelColors.T1200S
+}, {
+  label: 'Dark green',
+  value: darkPanelColors.G1200S
+}, {
+  label: 'Dark yellow',
+  value: darkPanelColors.Y1200S
+}, {
+  label: 'Dark red',
+  value: darkPanelColors.R1200S
+}, {
+  label: 'Dark purple',
+  value: darkPanelColors.P1200S
+}, {
+  label: 'Gray',
+  value: darkPanelColors.Gray
+}, {
+  label: 'blue',
+  value: darkPanelColors.B900
+}, {
+  label: 'teal',
+  value: darkPanelColors.T900
+}, {
+  label: 'green',
+  value: darkPanelColors.G900
+}, {
+  label: 'yellow',
+  value: darkPanelColors.Y900
+}, {
+  label: 'red',
+  value: darkPanelColors.R900
+}, {
+  label: 'purple',
+  value: darkPanelColors.P900
+}, {
+  label: 'Light gray',
+  value: darkPanelColors.LightGray
+}, {
+  label: 'Light blue',
+  value: darkPanelColors.B800S
+}, {
+  label: 'Light teal',
+  value: darkPanelColors.T900S
+}, {
+  label: 'Light green',
+  value: darkPanelColors.G900S
+}, {
+  label: 'Light yellow',
+  value: darkPanelColors.Y800S
+}, {
+  label: 'Light red',
+  value: darkPanelColors.R800S
+}, {
+  label: 'Light purple',
+  value: darkPanelColors.P800S
+}].map(color => ({ ...color,
+  border: DEFAULT_BORDER_COLOR
 }));

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

@@ -23,7 +23,6 @@ const ColorPalette = props => {
     onClick,
     selectedColor,
     className,
-    isShowingMoreColors,
     intl: {
       formatMessage
     }
@@ -53,8 +52,7 @@ const ColorPalette = props => {
     label: message ? formatMessage(message) : label,
     onClick: onClick,
     isSelected: value === selectedColor,
-    checkMarkColor: getContrastColor(value, [N0, N500]),
-    autoFocus: isShowingMoreColors && rowIdx === 1 && colorIdx === 0
+    checkMarkColor: getContrastColor(value, [N0, N500])
   })))));
 };
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Popup, withOuterListeners } from '@atlaskit/editor-common';
+import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
 import Button from '@atlaskit/button';
 import Tooltip from '@atlaskit/tooltip';
 import { N60A } from '@atlaskit/theme/colors';

package/dist/es2019/ui/ConfigPanel/Header.js

@@ -88,10 +88,13 @@ const Header = ({
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(ItemIcon, null, /*#__PURE__*/React.createElement(ResolvedIcon, {
     label: title
   })), /*#__PURE__*/React.createElement(ItemBody, null, summary ? /*#__PURE__*/React.createElement(ItemText, null, /*#__PURE__*/React.createElement("div", {
-    className: "item-title"
+    className: "item-title",
+    id: "context-panel-title"
   }, title), /*#__PURE__*/React.createElement("div", {
     className: "item-summary"
-  }, summary)) : /*#__PURE__*/React.createElement(CenteredItemTitle, null, title)), /*#__PURE__*/React.createElement(CloseButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+  }, summary)) : /*#__PURE__*/React.createElement(CenteredItemTitle, {
+    id: "context-panel-title"
+  }, title)), /*#__PURE__*/React.createElement(CloseButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     iconBefore: /*#__PURE__*/React.createElement(CrossIcon, {
       label: intl.formatMessage(messages.close)

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import styled from 'styled-components';
-import { whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, shadowSharedStyle, inlineNodeSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, annotationSharedStyles, smartCardSharedStyles, textColorStyles } from '@atlaskit/editor-common/styles';
+import { whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, shadowSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, annotationSharedStyles, smartCardSharedStyles, textColorStyles } from '@atlaskit/editor-common/styles';
 import { editorFontSize } from '@atlaskit/editor-shared-styles';
 import { unsupportedStyles } from '../../plugins/unsupported-content/styles';
 import { telepointerStyle } from '../../plugins/collab-edit/styles';
@@ -41,7 +41,6 @@ const ContentStyles = styled.div`
     ${listsSharedStyles};
     ${indentationSharedStyles};
     ${shadowSharedStyle};
-    ${inlineNodeSharedStyle};
   }
 
   .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {
@@ -131,7 +130,7 @@ const ContentStyles = styled.div`
 
   .pm-table-header-content-wrap,
   .pm-table-cell-content-wrap div.fabric-editor-block-mark {
-    p {
+    p:first-child {
       margin-top: 0;
     }
   }

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

@@ -155,7 +155,9 @@ export class SwappableContentArea extends React.PureComponent {
         panelWidth: width,
         visible: visible,
         positionPanelOverEditor: newPosition,
-        "data-testid": "context-panel-panel"
+        "data-testid": "context-panel-panel",
+        "aria-labelledby": "context-panel-title",
+        role: "dialog"
       }, /*#__PURE__*/React.createElement(Content, {
         panelWidth: width,
         visible: visible

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { PureComponent } from 'react'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
 import DropdownList from '@atlaskit/droplist';
-import { Popup } from '@atlaskit/editor-common';
+import { Popup } from '@atlaskit/editor-common/ui';
 import withOuterListeners from '../with-outer-listeners';
 
 /**