@atlaskit/editor-core 166.0.2 → 167.0.0

package/dist/esm/plugins/base/index.js

@@ -39,25 +39,16 @@ var basePlugin = function basePlugin(options) {
       // In Firefox, when the selection is placed between adjacent nodes which are not contenteditatble
       // no cursor is presented to users.
       // In Safari, when the selection is placed between adjacent nodes which are not contenteditatble
-      // the cursor appears inside the adjacent nodes.
-      // This plugin workarounds the issues with chrome and firefox by inserting decorations between
+      // it is not possible to navigate with arrow keys.
+      // This plugin works around the issues by inserting decorations between
       // inline nodes which are set as contenteditable, and have a zero width space.
-      // At time of development, using this workaround in Safari caused additional issues;
-      // - visual artifacts when moving across inline nodes (ie. using the arrow key to traverse a
-      //   series of inline nodes)
-      // - blocking the right arrow key when at the start of a line from moving to the end of the
-      //   previous line.
-      // As such we only apply the workaround for firefox and chrome.
-
-      if (browser.chrome || browser.gecko) {
-        plugins.push({
-          name: 'inlineCursorTargetPlugin',
-          plugin: function plugin() {
-            return options && options.allowInlineCursorTarget ? inlineCursorTargetPlugin() : undefined;
-          }
-        });
-      }
 
+      plugins.push({
+        name: 'inlineCursorTargetPlugin',
+        plugin: function plugin() {
+          return options && options.allowInlineCursorTarget ? inlineCursorTargetPlugin() : undefined;
+        }
+      });
       plugins.push({
         name: 'focusHandlerPlugin',
         plugin: function plugin(_ref2) {

package/dist/esm/plugins/base/pm-plugins/better-type-history.js

@@ -4,6 +4,7 @@ import { Fragment } from 'prosemirror-model';
 import { closeHistory } from 'prosemirror-history';
 import { ReplaceStep, ReplaceAroundStep } from 'prosemirror-transform';
 import { PluginKey } from 'prosemirror-state';
+import { extractSliceFromStep } from '../../../utils/step';
 
 var getEnterKeyboardActionStep = function getEnterKeyboardActionStep(trs) {
   var firstTr = trs.length === 1 && trs[0];
@@ -25,17 +26,6 @@ var getEnterKeyboardActionStep = function getEnterKeyboardActionStep(trs) {
   return replaceSteps[0];
 };
 
-var extractSliceFromStep = function extractSliceFromStep(step) {
-  if (!(step instanceof ReplaceStep) && !(step instanceof ReplaceAroundStep)) {
-    return null;
-  } // @ts-ignore This is by design. Slice is a private property, but accesible, from ReplaceStep.
-  // However, we need to read it to found if the step was adding a newline
-
-
-  var slice = step.slice;
-  return slice;
-};
-
 var isSliceSplittingBlockNode = function isSliceSplittingBlockNode(slice) {
   var hasOnlyTwoChildren = slice.size > 1 && slice.content.childCount === 2;
 

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

@@ -1,7 +1,7 @@
 import { DecorationSet, Decoration } from 'prosemirror-view';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from 'prosemirror-state';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
+import { ZERO_WIDTH_SPACE, browser } from '@atlaskit/editor-common/utils';
 import { isTextSelection } from '../../../utils';
 export var inlineCursorTargetStateKey = new PluginKey('inlineCursorTargetPlugin');
 export var isInlineNodeView = function isInlineNodeView(node) {
@@ -20,13 +20,35 @@ export default (function () {
         var selection = tr.selection,
             doc = tr.doc;
         var $from = selection.$from,
-            $to = selection.$to;
-
-        if (selection && isTextSelection(selection)) {
+            $to = selection.$to; // In Safari, if the cursor target is to the right of the cursor it will block selections
+        // made with shift + arrowRight and vice versa for shift + arrowLeft. This is due to a
+        // contenteditable bug in safari, where editable elements block the selection but we need
+        // the cursor target to be editable for the following:
+        // - Ability to navigate with down/up arrows when between inline nodes
+        // - Ability to navigate with down/up arrows when between the start of a paragraph & an inline node
+        // - Ability to click and drag to select an inline node if it is the first node
+        // To prevent blocking the selection, we check handleDOMEvents and add meta to
+        // the transaction to prevent the plugin from making cursor target decorations.
+
+        var safariShiftSelection = tr.getMeta(inlineCursorTargetStateKey);
+
+        if (selection && isTextSelection(selection) && !safariShiftSelection) {
           var hasInlineNodeViewAfter = isInlineNodeView($from.nodeAfter);
           var hasInlineNodeViewBefore = isInlineNodeView($from.nodeBefore);
-          var isAtStart = $from.parentOffset === 0 && isInlineNodeView($from.nodeAfter);
-          var isAtEnd = doc.resolve($from.pos).node().lastChild === $from.nodeBefore && isInlineNodeView($from.nodeBefore); // Create editable decoration widgets either side of the cursor to allow
+          var isAtStartAndInlineNodeViewAfter = $from.parentOffset === 0 && isInlineNodeView($from.nodeAfter);
+          var isAtEndAndInlineNodeViewBefore = doc.resolve($from.pos).node().lastChild === $from.nodeBefore && isInlineNodeView($from.nodeBefore);
+
+          var createWidget = function createWidget(side) {
+            var node = document.createElement('span');
+            node.contentEditable = 'true';
+            node.appendChild(document.createTextNode(ZERO_WIDTH_SPACE));
+            node.className = 'cursor-target';
+            return Decoration.widget(selection.from, node, {
+              raw: true,
+              side: side === 'left' ? -1 : 1,
+              key: 'inlineCursor'
+            });
+          }; // Create editable decoration widgets either side of the cursor to allow
           // text input.
           // We check beforeInput events below to prevent content
           // being added to the decorations.
@@ -37,18 +59,8 @@ export default (function () {
           // - positioned between the beginning of another node and an inline node (firefox)
           // - positioned between an inline node and the end of a node (chrome)
 
-          if ((hasInlineNodeViewAfter || isAtEnd) && (hasInlineNodeViewBefore || isAtStart)) {
-            var createWidget = function createWidget(side) {
-              var node = document.createElement('span');
-              node.contentEditable = 'true';
-              node.appendChild(document.createTextNode(ZERO_WIDTH_SPACE));
-              return Decoration.widget(selection.from, node, {
-                raw: true,
-                side: side === 'left' ? -1 : 1,
-                key: 'inlineCursor'
-              });
-            };
 
+          if (!browser.safari && (hasInlineNodeViewAfter || isAtEndAndInlineNodeViewBefore) && (hasInlineNodeViewBefore || isAtStartAndInlineNodeViewAfter)) {
             return {
               cursorTarget: {
                 decorations: [createWidget('left'), createWidget('right')],
@@ -58,6 +70,34 @@ export default (function () {
                 }
               }
             };
+          } // Only create one widget on the left or right of the cursor in Safari.
+          // This is to prevent the left key from being blocked when at the start of a paragraph,
+          // and the right key from being blocked when at the end of a paragraph. This also
+          // improves click and drag selections, making it easier to select the first node.
+
+
+          if (browser.safari) {
+            if (isAtEndAndInlineNodeViewBefore || hasInlineNodeViewBefore && hasInlineNodeViewAfter) {
+              return {
+                cursorTarget: {
+                  decorations: [createWidget('left')],
+                  positions: {
+                    from: $from.pos,
+                    to: $to.pos
+                  }
+                }
+              };
+            } else if (isAtStartAndInlineNodeViewAfter) {
+              return {
+                cursorTarget: {
+                  decorations: [createWidget('right')],
+                  positions: {
+                    from: $from.pos,
+                    to: $to.pos
+                  }
+                }
+              };
+            }
           }
         }
 
@@ -80,6 +120,21 @@ export default (function () {
         return null;
       },
       handleDOMEvents: {
+        // Workaround to prevent the decorations created by the plugin from
+        // blocking shift + arrow left/right selections in safari. When
+        // a shift + arrow left/right event is detected, send meta data to the
+        // plugin to prevent it from creating decorations.
+        // TODO We may be able to remove this when playing the following ticket:
+        // https://product-fabric.atlassian.net/browse/ED-14938
+        keydown: function keydown(view, event) {
+          if (browser.safari && event instanceof KeyboardEvent && event.shiftKey && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+            view.dispatch(view.state.tr.setMeta(inlineCursorTargetStateKey, {
+              cursorTarget: undefined
+            }));
+          }
+
+          return false;
+        },
         // Check the DOM to see if there are inline cursor targets
         // after a composition event ends. If so, manually insert the
         // event data in order to prevent contents ending up inside

package/dist/esm/plugins/block-type/commands/block-type.js

@@ -13,6 +13,7 @@ import { shouldSplitSelectedNodeOnNodeInsertion } from '../../../utils/insert';
 import { withAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
 import { filterChildrenBetween } from '../../../utils';
 import { PanelType } from '@atlaskit/adf-schema';
+import { CellSelection } from '@atlaskit/editor-tables';
 export function setBlockType(name) {
   return function (state, dispatch) {
     var nodes = state.schema.nodes;
@@ -49,14 +50,18 @@ export function setBlockTypeWithAnalytics(name, inputMethod) {
 }
 export function setNormalText() {
   return function (state, dispatch) {
-    var tr = state.tr,
-        _state$selection = state.selection,
-        $from = _state$selection.$from,
-        $to = _state$selection.$to,
-        schema = state.schema;
+    var selection = state.selection,
+        schema = state.schema,
+        tr = state.tr;
+    var ranges = selection instanceof CellSelection ? selection.ranges : [selection];
+    ranges.forEach(function (_ref) {
+      var $from = _ref.$from,
+          $to = _ref.$to;
+      tr.setBlockType($from.pos, $to.pos, schema.nodes.paragraph);
+    });
 
     if (dispatch) {
-      dispatch(tr.setBlockType($from.pos, $to.pos, schema.nodes.paragraph));
+      dispatch(tr);
     }
 
     return true;
@@ -118,16 +123,20 @@ export function setNormalTextWithAnalytics(inputMethod) {
 }
 export function setHeading(level) {
   return function (state, dispatch) {
-    var tr = state.tr,
-        _state$selection2 = state.selection,
-        $from = _state$selection2.$from,
-        $to = _state$selection2.$to,
-        schema = state.schema;
+    var selection = state.selection,
+        schema = state.schema,
+        tr = state.tr;
+    var ranges = selection instanceof CellSelection ? selection.ranges : [selection];
+    ranges.forEach(function (_ref2) {
+      var $from = _ref2.$from,
+          $to = _ref2.$to;
+      tr.setBlockType($from.pos, $to.pos, schema.nodes.heading, {
+        level: level
+      });
+    });
 
     if (dispatch) {
-      dispatch(tr.setBlockType($from.pos, $to.pos, schema.nodes.heading, {
-        level: level
-      }));
+      dispatch(tr);
     }
 
     return true;
@@ -229,9 +238,9 @@ export var insertBlockTypesWithAnalytics = function insertBlockTypesWithAnalytic
 function wrapSelectionIn(type) {
   return function (state, dispatch) {
     var tr = state.tr;
-    var _state$selection3 = state.selection,
-        $from = _state$selection3.$from,
-        $to = _state$selection3.$to;
+    var _state$selection = state.selection,
+        $from = _state$selection.$from,
+        $to = _state$selection.$to;
     var _state$schema$marks = state.schema.marks,
         alignment = _state$schema$marks.alignment,
         indentation = _state$schema$marks.indentation;
@@ -266,9 +275,9 @@ function insertCodeBlock() {
     var _state$selection$$fro;
 
     var tr = state.tr;
-    var _state$selection4 = state.selection,
-        $to = _state$selection4.$to,
-        $from = _state$selection4.$from;
+    var _state$selection2 = state.selection,
+        $to = _state$selection2.$to,
+        $from = _state$selection2.$from;
     var codeBlock = state.schema.nodes.codeBlock;
     var grandParentType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
     var parentType = state.selection.$from.parent.type;
@@ -292,8 +301,8 @@ function insertCodeBlock() {
 }
 
 export var cleanUpAtTheStartOfDocument = function cleanUpAtTheStartOfDocument(state, dispatch) {
-  var _ref = state.selection,
-      $cursor = _ref.$cursor;
+  var _ref3 = state.selection,
+      $cursor = _ref3.$cursor;
 
   if ($cursor && !$cursor.nodeBefore && !$cursor.nodeAfter && $cursor.pos === 1) {
     var tr = state.tr,

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

@@ -7,12 +7,13 @@ import { css } from '@emotion/react';
 import { N400 } from '@atlaskit/theme/colors';
 import { headingsSharedStyles } from '@atlaskit/editor-common/styles';
 import { shortcutStyle } from '../../../../ui/styles';
+import { token } from '@atlaskit/tokens';
 export var blockTypeMenuItemStyle = function blockTypeMenuItemStyle(tagName, selected) {
   // TEMP FIX: See https://product-fabric.atlassian.net/browse/ED-13878
-  var selectedStyle = selected ? "".concat(tagName, " { color: white !important; }") : '';
+  var selectedStyle = selected ? "".concat(tagName, " { color: ").concat(token('color.text.inverse', 'white'), " !important; }") : '';
   return function (themeProps) {
     return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", ";\n    > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        margin-top: 0;\n      }\n    }\n    ", ";\n  "])), headingsSharedStyles(themeProps), selectedStyle);
   };
 };
 export var keyboardShortcut = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  margin-left: 16px;\n"])), shortcutStyle);
-export var keyboardShortcutSelect = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), N400);
+export var keyboardShortcutSelect = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), token('color.icon', N400));

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

@@ -16,7 +16,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import * as colors from '@atlaskit/theme/colors';
+import { B300, N300, N20A } from '@atlaskit/theme/colors';
 import { injectIntl } from 'react-intl-next';
 import { findParentDomRefOfType, findDomRefAtPos } from 'prosemirror-utils';
 import { Popup } from '@atlaskit/editor-common/ui';
@@ -32,10 +32,8 @@ import { isBreakoutMarkAllowed } from '../utils/is-breakout-mark-allowed';
 import { getPluginState } from '../plugin-key';
 import { NodeSelection } from 'prosemirror-state';
 import { isSupportedNodeForBreakout } from '../utils/is-supported-node';
-var B300 = colors.B300,
-    N300 = colors.N300,
-    N20A = colors.N20A;
-var toolbarButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && button {\n    background: ", ";\n    color: ", ";\n    :hover {\n      background: ", ";\n      color: white !important;\n    }\n  }\n"])), N20A, N300, B300);
+import { token } from '@atlaskit/tokens';
+var toolbarButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && button {\n    background: ", ";\n    color: ", ";\n    :hover {\n      background: ", ";\n      color: ", " !important;\n    }\n  }\n"])), token('color.background.neutral', N20A), token('color.icon', N300), token('color.background.neutral.hovered', B300), token('color.icon', 'white'));
 var BREAKOUT_MODE = {
   FULL_WIDTH: 'full-width',
   CENTER: 'center',

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

@@ -8,4 +8,4 @@ import { N20 } from '@atlaskit/theme/colors';
 import { SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { token } from '@atlaskit/tokens';
-export var smartCardStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n\n    .card {\n      padding-left: 2px;\n      padding-right: 2px;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px\n          ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n"])), SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, SmartCardSharedCssClassName.LOADER_WRAPPER, token('color.border.danger', akEditorDeleteBorder), SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, N20, akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, token('color.border.danger', akEditorDeleteBorder), SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), token('color.border.danger', akEditorDeleteBorder), token('color.background.danger', akEditorDeleteBackground), token('color.border.danger', akEditorDeleteBorder));
+export var smartCardStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n\n    .card {\n      padding-left: 2px;\n      padding-right: 2px;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px\n          ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n"])), SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, SmartCardSharedCssClassName.LOADER_WRAPPER, token('color.border.danger', akEditorDeleteBorder), SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, token('color.background.neutral.subtle.hovered', N20), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, token('color.border.danger', akEditorDeleteBorder), SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), token('color.border.danger', akEditorDeleteBorder), token('color.background.danger', akEditorDeleteBackground), token('color.border.danger', akEditorDeleteBorder));

package/dist/esm/plugins/card/ui/LinkToolbarIconDropdown.js

@@ -17,7 +17,7 @@ var iconBoxStyles = css({
   width: ICON_HEIGHT,
   height: ICON_WIDTH,
   overflow: 'hidden',
-  border: '1px solid rgba(223, 225, 229, 0.5)'
+  border: "1px solid ".concat(token('color.border', 'rgba(223, 225, 229, 0.5)'))
   /* N60 at 50% */
   ,
   borderRadius: borderRadius(),
@@ -25,7 +25,7 @@ var iconBoxStyles = css({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  backgroundColor: token('color.background.default', 'white')
+  backgroundColor: token('elevation.surface', 'white')
 });
 var primitiveStyles = css({
   padding: '0.75rem',

package/dist/esm/plugins/code-block/actions.js

@@ -91,5 +91,33 @@ export var resetCopiedState = function resetCopiedState(state, dispatch) {
     }
   }
 
+  return true;
+};
+export var ignoreFollowingMutations = function ignoreFollowingMutations(state, dispatch) {
+  var tr = state.tr;
+  var ignoreFollowingMutationsTr = tr;
+  ignoreFollowingMutationsTr.setMeta(pluginKey, {
+    type: ACTIONS.SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS,
+    data: true
+  });
+
+  if (dispatch) {
+    dispatch(ignoreFollowingMutationsTr);
+  }
+
+  return true;
+};
+export var resetShouldIgnoreFollowingMutations = function resetShouldIgnoreFollowingMutations(state, dispatch) {
+  var tr = state.tr;
+  var ignoreFollowingMutationsTr = tr;
+  ignoreFollowingMutationsTr.setMeta(pluginKey, {
+    type: ACTIONS.SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS,
+    data: false
+  });
+
+  if (dispatch) {
+    dispatch(ignoreFollowingMutationsTr);
+  }
+
   return true;
 };

package/dist/esm/plugins/code-block/nodeviews/code-block.js

@@ -1,9 +1,13 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import rafSchedule from 'raf-schd';
+import { browser } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from 'prosemirror-model';
 import { codeBlockClassNames } from '../ui/class-names';
+import { resetShouldIgnoreFollowingMutations } from '../actions';
+import { getPluginState } from '../pm-plugins/main-state';
 var MATCH_NEWLINES = new RegExp('\n', 'g');
 
 var toDOM = function toDOM(node) {
@@ -61,6 +65,57 @@ export var CodeBlockView = /*#__PURE__*/function () {
   }
 
   _createClass(CodeBlockView, [{
+    key: "updateDOMAndSelection",
+    value: function updateDOMAndSelection(savedInnerHTML, newCursorPosition) {
+      var _this$dom;
+
+      if ((_this$dom = this.dom) !== null && _this$dom !== void 0 && _this$dom.childNodes && this.dom.childNodes.length > 1) {
+        var _contentView$childNod;
+
+        var contentView = this.dom.childNodes[1];
+
+        if ((contentView === null || contentView === void 0 ? void 0 : (_contentView$childNod = contentView.childNodes) === null || _contentView$childNod === void 0 ? void 0 : _contentView$childNod.length) > 0) {
+          var codeElement = contentView.firstChild;
+          codeElement.innerHTML = savedInnerHTML; // We need to set cursor for the DOM update
+
+          var textElement = _toConsumableArray(codeElement.childNodes).find(function (child) {
+            return child.nodeName === '#text';
+          });
+
+          var sel = window.getSelection();
+          var range = document.createRange();
+          range.setStart(textElement, newCursorPosition);
+          range.collapse(true);
+          sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
+          sel === null || sel === void 0 ? void 0 : sel.addRange(range);
+        }
+      }
+    }
+  }, {
+    key: "coalesceDOMElements",
+    value: function coalesceDOMElements() {
+      var _this$dom2;
+
+      if ((_this$dom2 = this.dom) !== null && _this$dom2 !== void 0 && _this$dom2.childNodes && this.dom.childNodes.length > 1) {
+        var contentView = this.dom.childNodes[1];
+
+        if (contentView !== null && contentView !== void 0 && contentView.childNodes && contentView.childNodes.length > 1) {
+          var savedInnerHTML = '';
+
+          while (contentView.childNodes.length > 1) {
+            var lastChild = contentView.lastChild;
+            savedInnerHTML = lastChild.innerHTML + savedInnerHTML;
+            contentView.removeChild(lastChild);
+          }
+
+          var firstChild = contentView.firstChild;
+          savedInnerHTML = firstChild.innerHTML + '\n' + savedInnerHTML;
+          var newCursorPosition = firstChild.innerHTML.length + 1;
+          setTimeout(this.updateDOMAndSelection.bind(this, savedInnerHTML, newCursorPosition), 20);
+        }
+      }
+    }
+  }, {
     key: "update",
     value: function update(node) {
       if (node.type !== this.node.type) {
@@ -74,6 +129,11 @@ export var CodeBlockView = /*#__PURE__*/function () {
 
         this.node = node;
         this.ensureLineNumbers();
+
+        if (browser.android) {
+          this.coalesceDOMElements();
+          resetShouldIgnoreFollowingMutations(this.view.state, this.view.dispatch);
+        }
       }
 
       return true;
@@ -81,7 +141,13 @@ export var CodeBlockView = /*#__PURE__*/function () {
   }, {
     key: "ignoreMutation",
     value: function ignoreMutation(record) {
-      // Ensure updating the line-number gutter doesn't trigger reparsing the codeblock
+      var pluginState = getPluginState(this.view.state);
+
+      if (pluginState !== null && pluginState !== void 0 && pluginState.shouldIgnoreFollowingMutations) {
+        return true;
+      } // Ensure updating the line-number gutter doesn't trigger reparsing the codeblock
+
+
       return record.target === this.lineNumberGutter || record.target.parentNode === this.lineNumberGutter;
     }
   }]);

package/dist/esm/plugins/code-block/pm-plugins/actions.js

@@ -1,3 +1,4 @@
 export var ACTIONS = {
-  SET_COPIED_TO_CLIPBOARD: 'SET_COPIED_TO_CLIPBOARD'
+  SET_COPIED_TO_CLIPBOARD: 'SET_COPIED_TO_CLIPBOARD',
+  SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS: 'SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS'
 };

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

@@ -5,6 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { browser } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from 'prosemirror-state';
 import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { codeBlockNodeView } from '../nodeviews/code-block';
@@ -12,6 +13,7 @@ import { highlightingCodeBlockNodeView } from '../nodeviews/highlighting-code-bl
 import { createSelectionClickHandler } from '../../selection/utils';
 import { pluginKey } from '../plugin-key';
 import { ACTIONS } from './actions';
+import { ignoreFollowingMutations, resetShouldIgnoreFollowingMutations } from '../actions';
 import { findCodeBlock } from '../utils';
 import { codeBlockClassNames } from '../ui/class-names';
 import { getFeatureFlags } from '../../feature-flags-context';
@@ -29,12 +31,41 @@ export var createPlugin = function createPlugin(_ref) {
 
   if (allowCompositionInputOverride) {
     handleDOMEvents.beforeinput = function (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)) {
+      var keyEvent = event;
+      var eventInputType = keyEvent.inputType;
+      var eventText = keyEvent.data;
+
+      if (browser.ios && event.composed && // insertParagraph will be the input type when the enter key is pressed.
+      eventInputType === 'insertParagraph' && findCodeBlock(view.state, view.state.selection)) {
         event.preventDefault();
+        return true;
+      } else if (browser.android && event.composed && eventInputType === 'insertCompositionText' && eventText[(eventText === null || eventText === void 0 ? void 0 : eventText.length) - 1] === '\n' && findCodeBlock(view.state, view.state.selection)) {
+        var resultingText = event.target.outerText + '\n';
+
+        if (resultingText.endsWith(eventText)) {
+          // End of paragraph
+          setTimeout(function () {
+            view.someProp('handleKeyDown', function (f) {
+              return f(view, new KeyboardEvent('keydown', {
+                bubbles: true,
+                cancelable: true,
+                key: 'Enter',
+                code: 'Enter'
+              }));
+            });
+          }, 0);
+        } else {
+          // Middle of paragraph, end of line
+          ignoreFollowingMutations(view.state, view.dispatch);
+        }
+
         return true;
       }
 
+      if (browser.android) {
+        resetShouldIgnoreFollowingMutations(view.state, view.dispatch);
+      }
+
       return false;
     };
   }
@@ -46,7 +77,8 @@ export var createPlugin = function createPlugin(_ref) {
         return {
           pos: node ? node.pos : null,
           contentCopied: false,
-          isNodeSelected: false
+          isNodeSelected: false,
+          shouldIgnoreFollowingMutations: false
         };
       },
       apply: function apply(tr, pluginState, _oldState, newState) {
@@ -67,6 +99,10 @@ export var createPlugin = function createPlugin(_ref) {
           return _objectSpread(_objectSpread({}, pluginState), {}, {
             contentCopied: meta.data
           });
+        } else if ((meta === null || meta === void 0 ? void 0 : meta.type) === ACTIONS.SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS) {
+          return _objectSpread(_objectSpread({}, pluginState), {}, {
+            shouldIgnoreFollowingMutations: meta.data
+          });
         }
 
         return pluginState;