@atlaskit/editor-core 153.1.1 → 154.0.0

package/dist/es2019/keymaps/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { browser } from '@atlaskit/editor-common';
+import { browser } from '@atlaskit/editor-common/utils';
 import styled from 'styled-components';
 import { N400 } from '@atlaskit/theme/colors';
 export const addAltText = makeKeyMapWithCommon('Add Alt Text', 'Mod-Alt-y');
@@ -7,6 +7,8 @@ export const toggleBold = makeKeyMapWithCommon('Bold', 'Mod-b');
 export const toggleItalic = makeKeyMapWithCommon('Italic', 'Mod-i');
 export const toggleUnderline = makeKeyMapWithCommon('Underline', 'Mod-u');
 export const toggleStrikethrough = makeKeyMapWithCommon('Strikethrough', 'Mod-Shift-s');
+export const toggleSubscript = makeKeyMapWithCommon('Subscript', 'Mod-Shift-,');
+export const toggleSuperscript = makeKeyMapWithCommon('Superscript', 'Mod-Shift-.');
 export const toggleCode = makeKeyMapWithCommon('Code', 'Mod-Shift-m');
 export const pastePlainText = makeKeyMapWithCommon('Paste Plain Text', 'Mod-Shift-v');
 export const clearFormatting = makeKeyMapWithCommon('Clear formatting', 'Mod-\\');
@@ -61,6 +63,8 @@ export const copy = makeKeyMapWithCommon('Copy', 'Mod-c');
 export const paste = makeKeyMapWithCommon('Paste', 'Mod-v');
 export const altPaste = makeKeyMapWithCommon('Paste', 'Mod-Shift-v');
 export const find = makeKeyMapWithCommon('Find', 'Mod-f');
+export const alignLeft = makeKeyMapWithCommon('Align Left', 'Mod-Shift-l');
+export const alignRight = makeKeyMapWithCommon('Align Right', 'Mod-Shift-r');
 const arrowKeysMap = {
   // for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
   ARROWLEFT: '\u2190',
@@ -132,7 +136,7 @@ export function findShortcutByKeymap(keymap) {
 
   return keymap.windows;
 }
-const ALL = [toggleOrderedList, toggleBulletList, toggleBold, toggleItalic, toggleUnderline, toggleStrikethrough, toggleCode, setNormalText, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleBlockQuote, insertNewLine, insertRule, splitCodeBlock, splitListItem, redo, undo, find, escape, enter, shiftEnter];
+const ALL = [toggleOrderedList, toggleBulletList, toggleBold, toggleItalic, toggleUnderline, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleCode, setNormalText, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleBlockQuote, insertNewLine, insertRule, splitCodeBlock, splitListItem, redo, undo, find, escape, enter, shiftEnter];
 export function makeKeymap(description, windows, mac, common) {
   return {
     description: description,

package/dist/es2019/labs/next/full-page.js

@@ -4,7 +4,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { N30 } from '@atlaskit/theme/colors';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { BaseTheme } from '@atlaskit/editor-common';
+import { BaseTheme } from '@atlaskit/editor-common/ui';
 import { akEditorMenuZIndex, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
 import ContentStyles from '../../ui/ContentStyles';
 import WidthEmitter from '../../ui/WidthEmitter';

package/dist/es2019/labs/next/internal/components/EditorInternal.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { WidthProvider } from '@atlaskit/editor-common/ui';
 import { injectIntl } from 'react-intl-next';
-import { WidthProvider } from '@atlaskit/editor-common';
 import { useProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import EditorContext from '../../../../ui/EditorContext';
 import EditorActions from '../../../../actions';

package/dist/es2019/labs/next/internal/hooks/use-editor/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { measureRender, getResponseEndTime, startMeasure, stopMeasure } from '@atlaskit/editor-common';
+import { measureRender, getResponseEndTime, startMeasure, stopMeasure } from '@atlaskit/editor-common/utils';
 import measurements from '../../../../../utils/performance/measure-enum';
 import { getNodesCount } from '../../../../../utils';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, PLATFORMS } from '../../../../../plugins/analytics';

package/dist/es2019/nodeviews/ReactNodeView.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { startMeasure, stopMeasure } from '@atlaskit/editor-common';
+import { startMeasure, stopMeasure } from '@atlaskit/editor-common/utils';
 import { analyticsPluginKey } from '../plugins/analytics/plugin-key';
 import { createDispatch } from '../event-dispatcher';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../plugins/analytics';

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

@@ -4,6 +4,7 @@ import WithPluginState from '../../ui/WithPluginState';
 import { pluginKey, createPlugin } from './pm-plugins/main';
 import { changeAlignment } from './commands';
 import ToolbarAlignment from './ui/ToolbarAlignment';
+import { keymapPlugin } from './pm-plugins/keymap';
 export const defaultConfig = {
   align: 'start'
 };
@@ -24,6 +25,9 @@ const alignmentPlugin = () => ({
       plugin: ({
         dispatch
       }) => createPlugin(dispatch, defaultConfig)
+    }, {
+      name: 'annotationKeymap',
+      plugin: () => keymapPlugin()
     }];
   },
 

package/dist/es2019/plugins/alignment/pm-plugins/keymap.js

@@ -0,0 +1,9 @@
+import { keymap } from 'prosemirror-keymap';
+import { bindKeymapWithCommand, alignLeft, alignRight } from '../../../keymaps';
+import { changeAlignment } from '../commands';
+export function keymapPlugin() {
+  const list = {};
+  bindKeymapWithCommand(alignLeft.common, changeAlignment('start'), list);
+  bindKeymapWithCommand(alignRight.common, changeAlignment('end'), list);
+  return keymap(list);
+}

package/dist/es2019/plugins/alignment/ui/ToolbarAlignment/index.js

@@ -36,7 +36,7 @@ export class AlignmentToolbar extends React.Component {
     });
 
     _defineProperty(this, "hide", () => {
-      if (this.state.isOpen === true) {
+      if (this.state.isOpen) {
         this.setState({
           isOpen: false
         });
@@ -62,7 +62,7 @@ export class AlignmentToolbar extends React.Component {
       mountTo: popupsMountPoint,
       boundariesElement: popupsBoundariesElement,
       scrollableElement: popupsScrollableElement,
-      isOpen: this.state.isOpen,
+      isOpen: isOpen,
       handleClickOutside: this.hide,
       handleEscapeKeydown: this.hide,
       fitWidth: 112,
@@ -72,8 +72,10 @@ export class AlignmentToolbar extends React.Component {
         disabled: disabled,
         selected: isOpen,
         title: title,
-        "aria-label": "Text alignment",
         className: "align-btn",
+        "aria-label": "Text alignment",
+        "aria-expanded": isOpen,
+        "aria-haspopup": true,
         onClick: this.toggleOpen,
         iconBefore: /*#__PURE__*/React.createElement(TriggerWrapper, null, iconMap[pluginState.align], /*#__PURE__*/React.createElement(ExpandIconWrapper, null, /*#__PURE__*/React.createElement(ExpandIcon, {
           label: ""

package/dist/es2019/plugins/analytics/consts.js

@@ -1,4 +1,4 @@
 import { FabricChannel } from '@atlaskit/analytics-listeners';
-import { analyticsEventKey as key } from '@atlaskit/editor-common';
+import { analyticsEventKey as key } from '@atlaskit/editor-common/utils';
 export const analyticsEventKey = key;
 export const editorAnalyticsChannel = FabricChannel.editor;

package/dist/es2019/plugins/analytics/plugin.js

@@ -1,5 +1,5 @@
 import { Plugin } from 'prosemirror-state';
-import { isPerformanceAPIAvailable, measureRender } from '@atlaskit/editor-common';
+import { isPerformanceAPIAvailable, measureRender } from '@atlaskit/editor-common/utils';
 import { ACTION, EVENT_TYPE } from './types';
 import { getAnalyticsEventsFromTransaction } from './utils';
 import { analyticsPluginKey } from './plugin-key';

package/dist/es2019/plugins/analytics/types/enums.js

@@ -80,6 +80,7 @@ export let ACTION;
   ACTION["SYNCHRONY_DISCONNECTED"] = "synchronyDisconnected";
   ACTION["SYNCHRONY_ENTITY_ERROR"] = "synchronyEntityError";
   ACTION["SYNCHRONY_ERROR"] = "synchronyError";
+  ACTION["TEXT_LINK_MARK_TRANSFORMED"] = "textLinkMarkTransformed";
   ACTION["TOGGLE_EXPAND"] = "toggleExpand";
   ACTION["TRANSACTION_DISPATCHED"] = "transactionDispatched";
   ACTION["TYPING_FINISHED"] = "typingFinished";

package/dist/es2019/plugins/annotation/nodeviews/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AnnotationSharedClassNames } from '@atlaskit/editor-common';
+import { AnnotationSharedClassNames } from '@atlaskit/editor-common/styles';
 import { ReactNodeView } from '../../../nodeviews';
 import WithPluginState from '../../../ui/WithPluginState';
 import { inlineCommentPluginKey } from '../utils';

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

@@ -1,6 +1,7 @@
 import { PluginKey, TextSelection, AllSelection } from 'prosemirror-state';
 import { Decoration } from 'prosemirror-view';
-import { AnnotationSharedClassNames, canApplyAnnotationOnRange, getAnnotationIdsFromRange } from '@atlaskit/editor-common';
+import { AnnotationSharedClassNames } from '@atlaskit/editor-common/styles';
+import { canApplyAnnotationOnRange, getAnnotationIdsFromRange } from '@atlaskit/editor-common/utils';
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { AnnotationSelectionType } from './types';
 import { sum } from '../../utils';

package/dist/es2019/plugins/base/pm-plugins/frozen-editor.js

@@ -1,5 +1,5 @@
 import { Plugin, PluginKey } from 'prosemirror-state';
-import { isPerformanceObserverAvailable, isPerformanceAPIAvailable, getAnalyticsEventSeverity } from '@atlaskit/editor-common';
+import { isPerformanceObserverAvailable, isPerformanceAPIAvailable, getAnalyticsEventSeverity } from '@atlaskit/editor-common/utils';
 import { EditorExperience, ExperienceStore } from '@atlaskit/editor-common/ufo';
 import { ACTION, ACTION_SUBJECT, BROWSER_FREEZE_INTERACTION_TYPE, EVENT_TYPE } from '../../analytics';
 import { getParticipantsCount } from '../../collab-edit/get-participants-count';

package/dist/es2019/plugins/base/pm-plugins/inline-cursor-target.js

@@ -1,6 +1,6 @@
 import { DecorationSet, Decoration } from 'prosemirror-view';
 import { PluginKey, Plugin } from 'prosemirror-state';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 export const inlineCursorTargetStateKey = new PluginKey('inlineCursorTargetPlugin');
 export const SPECIAL_NODES = ['mention', 'emoji'];
 export const isSpecial = node => {

package/dist/es2019/plugins/block-type/pm-plugins/main.js

@@ -1,5 +1,5 @@
 import { Plugin, PluginKey } from 'prosemirror-state';
-import { browser } from '@atlaskit/editor-common';
+import { browser } from '@atlaskit/editor-common/utils';
 import { NORMAL_TEXT, HEADING_1, HEADING_2, HEADING_3, HEADING_4, HEADING_5, HEADING_6, BLOCK_QUOTE, CODE_BLOCK, PANEL, OTHER, TEXT_BLOCK_TYPES, WRAPPER_BLOCK_TYPES, HEADINGS_BY_LEVEL } from '../types';
 import { areBlockTypesDisabled } from '../../../utils';
 import { setHeadingWithAnalytics, setNormalTextWithAnalytics } from '../commands';

package/dist/es2019/plugins/block-type/styles.js

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { blockquoteSharedStyles, headingsSharedStyles } from '@atlaskit/editor-common';
+import { blockquoteSharedStyles, headingsSharedStyles } from '@atlaskit/editor-common/styles';
 export const blocktypeStyles = css`
   .ProseMirror {
     ${blockquoteSharedStyles};

package/dist/es2019/plugins/block-type/ui/ToolbarBlockType/blocktype-button.js

@@ -22,6 +22,8 @@ export const BlockTypeButton = props => {
     onClick: props.onClick,
     title: labelTextStyles,
     "aria-label": labelTextStyles,
+    "aria-haspopup": true,
+    "aria-expanded": props['aria-expanded'],
     iconAfter: /*#__PURE__*/React.createElement(Wrapper, {
       isSmall: props.isSmall
     }, props.isSmall && /*#__PURE__*/React.createElement(TextStyleIcon, {

package/dist/es2019/plugins/block-type/ui/ToolbarBlockType/index.js

@@ -48,6 +48,7 @@ class ToolbarBlockType extends React.PureComponent {
             selected: isActive
           }, /*#__PURE__*/React.createElement(Tag, null, formatMessage(blockType.title))),
           value: blockType,
+          label: formatMessage(blockType.title),
           key: `${blockType.name}-${index}`,
           elemAfter: /*#__PURE__*/React.createElement(KeyboardShortcut, {
             selected: isActive
@@ -114,7 +115,8 @@ class ToolbarBlockType extends React.PureComponent {
         scrollableElement: popupsScrollableElement,
         zIndex: akEditorMenuZIndex,
         fitHeight: 360,
-        fitWidth: 106
+        fitWidth: 106,
+        shouldUseDefaultRole: true
       }, /*#__PURE__*/React.createElement(BlockTypeButton, {
         isSmall: isSmall,
         isReducedSpacing: isReducedSpacing,
@@ -122,7 +124,8 @@ class ToolbarBlockType extends React.PureComponent {
         disabled: false,
         title: blockTypeTitles[0],
         onClick: this.handleTriggerClick,
-        formatMessage: formatMessage
+        formatMessage: formatMessage,
+        "aria-expanded": active
       }, longestDropdownMenuItem)), /*#__PURE__*/React.createElement(Separator, null));
     }
 
@@ -133,7 +136,8 @@ class ToolbarBlockType extends React.PureComponent {
       disabled: true,
       title: blockTypeTitles[0],
       onClick: this.handleTriggerClick,
-      formatMessage: formatMessage
+      formatMessage: formatMessage,
+      "aria-expanded": active
     }, longestDropdownMenuItem), /*#__PURE__*/React.createElement(Separator, null));
   }
 

package/dist/es2019/plugins/block-type/ui/ToolbarBlockType/styled.js

@@ -1,6 +1,6 @@
 import { N400 } from '@atlaskit/theme/colors';
 import styled from 'styled-components';
-import { headingsSharedStyles } from '@atlaskit/editor-common';
+import { headingsSharedStyles } from '@atlaskit/editor-common/styles';
 import { Shortcut } from '../../../../ui/styles';
 export const BlockTypeMenuItem = styled.div`
   ${headingsSharedStyles};

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { Plugin } from 'prosemirror-state';
 import { breakout } from '@atlaskit/adf-schema';
-import { calcBreakoutWidth } from '@atlaskit/editor-common';
+import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import WithPluginState from '../../ui/WithPluginState';
 import { pluginKey as widthPluginKey } from '../width';
 import LayoutButton from './ui/LayoutButton';

package/dist/es2019/plugins/breakout/ui/LayoutButton.js

@@ -3,7 +3,7 @@ import React from 'react';
 import * as colors from '@atlaskit/theme/colors';
 import { injectIntl } from 'react-intl-next';
 import { findParentDomRefOfType, findDomRefAtPos } from 'prosemirror-utils';
-import { Popup } from '@atlaskit/editor-common';
+import { Popup } from '@atlaskit/editor-common/ui';
 import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
 import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
 import ToolbarButton from '../../../ui/ToolbarButton';

package/dist/es2019/plugins/caption/nodeviews/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { Caption } from '@atlaskit/editor-common';
+import { Caption } from '@atlaskit/editor-common/ui';
 import { SelectionBasedNodeView } from '../../../nodeviews/';
 export class CaptionNodeView extends SelectionBasedNodeView {
   constructor(...args) {

package/dist/es2019/plugins/card/nodeviews/blockCard.js

@@ -1,13 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { Card as SmartCard } from '@atlaskit/smart-card';
-import { UnsupportedBlock, browser } from '@atlaskit/editor-common';
+import { UnsupportedBlock } from '@atlaskit/editor-common/ui';
+import { browser } from '@atlaskit/editor-common/utils';
 import PropTypes from 'prop-types';
 import rafSchedule from 'raf-schd';
 import { Card } from './genericCard';
 import { ReactNodeView } from '../../../nodeviews/';
 import { registerCard } from '../pm-plugins/actions';
-import { findOverflowScrollParent } from '@atlaskit/editor-common';
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 export class BlockCardComponent extends React.PureComponent {
   constructor(...args) {
     super(...args);

package/dist/es2019/plugins/card/nodeviews/embedCard.js

@@ -5,7 +5,8 @@ import { Card as SmartCard } from '@atlaskit/smart-card';
 import PropTypes from 'prop-types';
 import rafSchedule from 'raf-schd';
 import { Card } from './genericCard';
-import { UnsupportedBlock, MediaSingle as RichMediaWrapper, browser, findOverflowScrollParent } from '@atlaskit/editor-common';
+import { UnsupportedBlock, MediaSingle as RichMediaWrapper, findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+import { browser } from '@atlaskit/editor-common/utils';
 import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { SelectionBasedNodeView } from '../../../nodeviews/';
 import { registerCard } from '../pm-plugins/actions';

package/dist/es2019/plugins/card/nodeviews/inlineCard.js

@@ -2,8 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Card as SmartCard } from '@atlaskit/smart-card';
-import { UnsupportedInline, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
-import { findOverflowScrollParent } from '@atlaskit/editor-common';
+import { UnsupportedInline } from '@atlaskit/editor-common/ui';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import rafSchedule from 'raf-schd';
 import { Card } from './genericCard';
 import ReactNodeView from '../../../nodeviews/ReactNodeView';

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

@@ -1,7 +1,7 @@
 import { css } from 'styled-components';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBorder, akEditorDeleteBackground } from '@atlaskit/editor-shared-styles';
 import { N20 } from '@atlaskit/theme/colors';
-import { SmartCardSharedCssClassName } from '@atlaskit/editor-common';
+import { SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const smartCardStyles = css`
   .${SmartCardSharedCssClassName.INLINE_CARD_CONTAINER} {

package/dist/es2019/plugins/card/toolbar.js

@@ -10,7 +10,7 @@ import commonMessages from '../../messages';
 import { hoverDecoration } from '../base/pm-plugins/decoration';
 import { changeSelectedCardToText } from './pm-plugins/doc';
 import { pluginKey } from './pm-plugins/main';
-import { richMediaClassName } from '@atlaskit/editor-common';
+import { richMediaClassName } from '@atlaskit/editor-common/styles';
 import { buildEditLinkToolbar, editLink, editLinkToolbarConfig } from './ui/EditLinkToolbar';
 import { displayInfoForCard, findCardInfo, titleUrlPairFromNode, appearanceForNodeType } from './utils';
 import { isSafeUrl } from '@atlaskit/adf-schema';

package/dist/es2019/plugins/card/ui/ResizableEmbedCard.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from 'prosemirror-utils';
-import { calcColumnsFromPx, calcPctFromPx, calcPxFromColumns, wrappedLayouts } from '@atlaskit/editor-common';
+import { calcColumnsFromPx, calcPctFromPx, calcPxFromColumns, wrappedLayouts } from '@atlaskit/editor-common/ui';
 import { akEditorMediaResizeHandlerPaddingWide, akEditorBreakoutPadding, akEditorWideLayoutWidth, breakoutWideScaleRatio, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { embedHeaderHeight } from '@atlaskit/media-ui/embeds';
 import { Wrapper } from '../../../ui/Resizer/styled';

package/dist/es2019/plugins/code-block/index.js

@@ -24,8 +24,7 @@ const codeBlockPlugin = options => ({
       name: 'codeBlock',
       plugin: ({
         getIntl
-      }) => createPlugin({
-        useLongPressSelection: options.useLongPressSelection,
+      }) => createPlugin({ ...options,
         getIntl,
         appearance: options.appearance
       })

package/dist/es2019/plugins/code-block/pm-plugins/main.js

@@ -11,10 +11,26 @@ import { getFeatureFlags } from '../../feature-flags-context';
 export const createPlugin = ({
   useLongPressSelection = false,
   getIntl,
-  appearance
+  appearance,
+  allowCompositionInputOverride = false
 }) => {
   const intl = getIntl();
   const codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
+  const handleDOMEvents = {}; // ME-1599: Composition on mobile was causing the DOM observer to mutate the code block
+  // incorrecly and lose content when pressing enter in the middle of a code block line.
+
+  if (allowCompositionInputOverride) {
+    handleDOMEvents.beforeinput = (view, event) => {
+      if (event.composed && // insertParagraph will be the input type when the enter key is pressed.
+      event.inputType === 'insertParagraph' && findCodeBlock(view.state, view.state.selection)) {
+        event.preventDefault();
+        return true;
+      }
+
+      return false;
+    };
+  }
+
   return new Plugin({
     state: {
       init(_, state) {
@@ -70,7 +86,8 @@ export const createPlugin = ({
       },
       handleClickOn: createSelectionClickHandler(['codeBlock'], target => !!(target.closest(`.${codeBlockClassNames.gutter}`) || target.classList.contains(codeBlockClassNames.content)), {
         useLongPressSelection
-      })
+      }),
+      handleDOMEvents
     }
   });
 };

package/dist/es2019/plugins/code-block/refresh-browser-selection.js

@@ -1,4 +1,4 @@
-import { browser } from '@atlaskit/editor-common';
+import { browser } from '@atlaskit/editor-common/utils';
 import { pluginKey } from './plugin-key'; // Workaround for a firefox issue where dom selection is off sync
 // https://product-fabric.atlassian.net/browse/ED-12442
 

package/dist/es2019/plugins/collab-edit/analytics.js

@@ -1,7 +1,7 @@
 import { addAnalytics, ACTION, EVENT_TYPE, ACTION_SUBJECT } from '../analytics';
 import { getFeatureFlags } from '../feature-flags-context';
 import { getDocStructure } from '../../utils/document-logger';
-import { sniffUserBrowserExtensions } from '@atlaskit/editor-common';
+import { sniffUserBrowserExtensions } from '@atlaskit/editor-common/utils';
 export const addSynchronyErrorAnalytics = (state, tr) => {
   return error => {
     const browserExtensions = sniffUserBrowserExtensions({

package/dist/es2019/plugins/collab-edit/events/initialize.js

@@ -22,11 +22,17 @@ export const initialize = ({
 
   cleanup = subscribe(view, provider, options, providerFactory); // Initialize provider
 
-  /**
-   * We only want to initialise once, if we reload/reconfigure this plugin
-   * We dont want to re-init collab, it would break existing sessions
-   */
+  if (options.useNativePlugin) {
+    // ED-13912 For NCS we don't want to use memoizeOne because it causes
+    // infinite text while changing page-width
+    initCollab(provider, view);
+  } else {
+    /**
+     * We only want to initialise once, if we reload/reconfigure this plugin
+     * We dont want to re-init collab, it would break existing sessions
+     */
+    initCollabMemo(provider, view);
+  }
 
-  initCollabMemo(provider, view);
   return cleanup;
 };

package/dist/es2019/plugins/collab-edit/utils.js

@@ -2,7 +2,7 @@ import { Selection, TextSelection } from 'prosemirror-state';
 import { Decoration } from 'prosemirror-view';
 import * as themeColors from '@atlaskit/theme/colors';
 import { hexToRgba } from '@atlaskit/adf-schema';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { addAnalytics } from '../analytics/utils';
 import { EVENT_TYPE, ACTION, ACTION_SUBJECT } from '../analytics/types';
 export const colors = [themeColors.R100, themeColors.R300, themeColors.R500, themeColors.Y100, themeColors.Y300, themeColors.Y500, themeColors.G100, themeColors.G300, themeColors.G500, themeColors.T100, themeColors.T300, themeColors.T500, themeColors.B100, themeColors.B300, themeColors.B500, themeColors.P100, themeColors.P300, themeColors.P500, themeColors.N70, themeColors.N200, themeColors.N800].map(solid => ({

package/dist/es2019/plugins/date/actions.js

@@ -1,6 +1,6 @@
 import { NodeSelection, Selection } from 'prosemirror-state';
 import { Fragment } from 'prosemirror-model';
-import { todayTimestampInUTC } from '@atlaskit/editor-common';
+import { todayTimestampInUTC } from '@atlaskit/editor-common/utils';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { withAnalytics, addAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '../analytics';
 import { isToday } from './utils/internal';

package/dist/es2019/plugins/date/nodeviews/date.js

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { injectIntl } from 'react-intl-next';
-import { timestampToString, timestampToTaskContext, isPastDate, DateSharedCssClassName } from '@atlaskit/editor-common';
+import { timestampToString, timestampToTaskContext, isPastDate } from '@atlaskit/editor-common/utils';
 import { Date } from '@atlaskit/date';
 import { setDatePickerAt } from '../actions';
 

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

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import { DateSharedCssClassName } from '@atlaskit/editor-common';
+import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const dateStyles = css`
   .${DateSharedCssClassName.DATE_CONTAINER} {

package/dist/es2019/plugins/date/ui/DatePicker/index.js

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Popup, timestampToUTCDate, timestampToIsoFormat } from '@atlaskit/editor-common';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { timestampToUTCDate, timestampToIsoFormat } from '@atlaskit/editor-common/utils';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import Calendar from '@atlaskit/calendar';
 import { borderRadius } from '@atlaskit/theme/constants';

package/dist/es2019/plugins/emoji/nodeviews/emoji-next.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { DOMSerializer } from 'prosemirror-model';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import { createMobileInlineDomRef } from '../../../ui/InlineNodeWrapper';
 export class EmojiNodeView {
   constructor(node, _, context) {

package/dist/es2019/plugins/emoji/nodeviews/emoji.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common';
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import Emoji from '../ui/Emoji';
 import { ReactNodeView } from '../../../nodeviews';
 import InlineNodeWrapper, { createMobileInlineDomRef } from '../../../ui/InlineNodeWrapper';

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

@@ -1,7 +1,7 @@
 import { css } from 'styled-components';
 import { N0, N20, N900 } from '@atlaskit/theme/colors';
 import { borderRadius, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
-import { EmojiSharedCssClassName } from '@atlaskit/editor-common';
+import { EmojiSharedCssClassName } from '@atlaskit/editor-common/emoji';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 export const emojiStyles = css`
   .${EmojiSharedCssClassName.EMOJI_CONTAINER} {
@@ -18,8 +18,7 @@ export const emojiStyles = css`
 
     &.${akEditorSelectedNodeClassName} {
       .${EmojiSharedCssClassName.EMOJI_SPRITE},
-        .${EmojiSharedCssClassName.EMOJI_IMAGE}
-        > span {
+        .${EmojiSharedCssClassName.EMOJI_IMAGE} {
         border-radius: 2px;
         ${getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow])}
       }

package/dist/es2019/plugins/emoji/ui/Emoji/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ClickSelectWrapper } from '../../../../ui/styles';
-import { Emoji } from '@atlaskit/editor-common';
+import { Emoji } from '@atlaskit/editor-common/emoji';
 export default function EmojiNode(props) {
   return /*#__PURE__*/React.createElement(ClickSelectWrapper, null, /*#__PURE__*/React.createElement(Emoji, props));
 }

package/dist/es2019/plugins/expand/nodeviews/index.js

@@ -5,7 +5,7 @@ import { Selection, NodeSelection } from 'prosemirror-state';
 import { ExpandIconButton } from '../ui/ExpandIconButton';
 import { keyName } from 'w3c-keyname';
 import { DOMSerializer } from 'prosemirror-model';
-import { expandMessages } from '@atlaskit/editor-common';
+import { expandMessages } from '@atlaskit/editor-common/ui';
 import { isEmptyNode } from '../../../utils';
 import { updateExpandTitle, toggleExpandExpanded, deleteExpandAtPos, setSelectionInsideExpand } from '../commands';
 import { expandClassNames } from '../ui/class-names';

package/dist/es2019/plugins/expand/ui/ExpandIconButton.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, forwardRef } from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
-import { expandMessages, ExpandLayoutWrapper } from '@atlaskit/editor-common';
+import { expandMessages, ExpandLayoutWrapper } from '@atlaskit/editor-common/ui';
 import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import Tooltip from '@atlaskit/tooltip';

package/dist/es2019/plugins/expand/ui/styles.js

@@ -2,7 +2,7 @@ import { css } from 'styled-components';
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { R50, R300, N40A, N50A, N80A, DN50, R200 } from '@atlaskit/theme/colors';
-import { sharedExpandStyles } from '@atlaskit/editor-common';
+import { sharedExpandStyles } from '@atlaskit/editor-common/ui';
 import { SelectionStyle, getSelectionStyles, akLayoutGutterOffset, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { BreakoutCssClassName } from '../../breakout/constants';
 import { expandClassNames } from './class-names';

package/dist/es2019/plugins/extension/commands.js

@@ -49,9 +49,11 @@ export const updateExtensionLayout = layout => createCommand({
   const selectedExtension = getSelectedExtension(state, true);
 
   if (selectedExtension) {
-    return tr.setNodeMarkup(selectedExtension.pos, undefined, { ...selectedExtension.node.attrs,
+    const trWithNewNodeMarkup = tr.setNodeMarkup(selectedExtension.pos, undefined, { ...selectedExtension.node.attrs,
       layout
     });
+    trWithNewNodeMarkup.setMeta('scrollIntoView', false);
+    return trWithNewNodeMarkup;
   }
 
   return tr;