@atlaskit/editor-core 166.0.4 → 167.0.2

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

@@ -37,13 +37,35 @@ var _default = function _default() {
         var selection = tr.selection,
             doc = tr.doc;
         var $from = selection.$from,
-            $to = selection.$to;
-
-        if (selection && (0, _utils2.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 && (0, _utils2.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(_utils.ZERO_WIDTH_SPACE));
+            node.className = 'cursor-target';
+            return _prosemirrorView.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.
@@ -54,18 +76,8 @@ var _default = function _default() {
           // - 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(_utils.ZERO_WIDTH_SPACE));
-              return _prosemirrorView.Decoration.widget(selection.from, node, {
-                raw: true,
-                side: side === 'left' ? -1 : 1,
-                key: 'inlineCursor'
-              });
-            };
 
+          if (!_utils.browser.safari && (hasInlineNodeViewAfter || isAtEndAndInlineNodeViewBefore) && (hasInlineNodeViewBefore || isAtStartAndInlineNodeViewAfter)) {
             return {
               cursorTarget: {
                 decorations: [createWidget('left'), createWidget('right')],
@@ -75,6 +87,34 @@ var _default = function _default() {
                 }
               }
             };
+          } // 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 (_utils.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
+                  }
+                }
+              };
+            }
           }
         }
 
@@ -97,6 +137,21 @@ var _default = function _default() {
         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 (_utils.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/cjs/plugins/block-type/commands/block-type.js

@@ -31,6 +31,8 @@ var _utils = require("../../../utils");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
+var _editorTables = require("@atlaskit/editor-tables");
+
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -75,14 +77,18 @@ function setBlockTypeWithAnalytics(name, inputMethod) {
 
 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 _editorTables.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;
@@ -145,16 +151,20 @@ function setNormalTextWithAnalytics(inputMethod) {
 
 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 _editorTables.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;
@@ -264,9 +274,9 @@ exports.insertBlockTypesWithAnalytics = insertBlockTypesWithAnalytics;
 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;
@@ -301,9 +311,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;
@@ -327,8 +337,8 @@ function insertCodeBlock() {
 }
 
 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/cjs/plugins/block-type/ui/ToolbarBlockType/styled.js

@@ -17,11 +17,13 @@ var _styles = require("@atlaskit/editor-common/styles");
 
 var _styles2 = require("../../../../ui/styles");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject, _templateObject2, _templateObject3;
 
 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((0, _tokens.token)('color.text.inverse', 'white'), " !important; }") : '';
   return function (themeProps) {
     return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    > {\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        margin-top: 0;\n      }\n    }\n    ", ";\n  "])), (0, _styles.headingsSharedStyles)(themeProps), selectedStyle);
   };
@@ -30,5 +32,5 @@ var blockTypeMenuItemStyle = function blockTypeMenuItemStyle(tagName, selected)
 exports.blockTypeMenuItemStyle = blockTypeMenuItemStyle;
 var keyboardShortcut = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  margin-left: 16px;\n"])), _styles2.shortcutStyle);
 exports.keyboardShortcut = keyboardShortcut;
-var keyboardShortcutSelect = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _colors.N400);
+var keyboardShortcutSelect = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), (0, _tokens.token)('color.icon', _colors.N400));
 exports.keyboardShortcutSelect = keyboardShortcutSelect;

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -29,7 +27,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@emotion/react");
 
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+var _colors = require("@atlaskit/theme/colors");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -61,20 +59,15 @@ var _prosemirrorState = require("prosemirror-state");
 
 var _isSupportedNode = require("../utils/is-supported-node");
 
-var _templateObject;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _tokens = require("@atlaskit/tokens");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _templateObject;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var B300 = colors.B300,
-    N300 = colors.N300,
-    N20A = colors.N20A;
-var toolbarButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  && button {\n    background: ", ";\n    color: ", ";\n    :hover {\n      background: ", ";\n      color: white !important;\n    }\n  }\n"])), N20A, N300, B300);
+var toolbarButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  && button {\n    background: ", ";\n    color: ", ";\n    :hover {\n      background: ", ";\n      color: ", " !important;\n    }\n  }\n"])), (0, _tokens.token)('color.background.neutral', _colors.N20A), (0, _tokens.token)('color.icon', _colors.N300), (0, _tokens.token)('color.background.neutral.hovered', _colors.B300), (0, _tokens.token)('color.icon', 'white'));
 var BREAKOUT_MODE = {
   FULL_WIDTH: 'full-width',
   CENTER: 'center',

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

@@ -21,5 +21,5 @@ var _tokens = require("@atlaskit/tokens");
 
 var _templateObject;
 
-var smartCardStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, _colors.N20, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _styles.SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder));
+var smartCardStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _styles.SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder));
 exports.smartCardStyles = smartCardStyles;

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

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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resetCopiedState = exports.removeCodeBlock = exports.copyContentToClipboard = exports.changeLanguage = void 0;
+exports.resetShouldIgnoreFollowingMutations = exports.resetCopiedState = exports.removeCodeBlock = exports.ignoreFollowingMutations = exports.copyContentToClipboard = exports.changeLanguage = void 0;
 
 var _prosemirrorUtils = require("prosemirror-utils");
 
@@ -119,4 +119,38 @@ var resetCopiedState = function resetCopiedState(state, dispatch) {
   return true;
 };
 
-exports.resetCopiedState = resetCopiedState;
+exports.resetCopiedState = resetCopiedState;
+
+var ignoreFollowingMutations = function ignoreFollowingMutations(state, dispatch) {
+  var tr = state.tr;
+  var ignoreFollowingMutationsTr = tr;
+  ignoreFollowingMutationsTr.setMeta(_pluginKey.pluginKey, {
+    type: _actions.ACTIONS.SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS,
+    data: true
+  });
+
+  if (dispatch) {
+    dispatch(ignoreFollowingMutationsTr);
+  }
+
+  return true;
+};
+
+exports.ignoreFollowingMutations = ignoreFollowingMutations;
+
+var resetShouldIgnoreFollowingMutations = function resetShouldIgnoreFollowingMutations(state, dispatch) {
+  var tr = state.tr;
+  var ignoreFollowingMutationsTr = tr;
+  ignoreFollowingMutationsTr.setMeta(_pluginKey.pluginKey, {
+    type: _actions.ACTIONS.SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS,
+    data: false
+  });
+
+  if (dispatch) {
+    dispatch(ignoreFollowingMutationsTr);
+  }
+
+  return true;
+};
+
+exports.resetShouldIgnoreFollowingMutations = resetShouldIgnoreFollowingMutations;

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

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.codeBlockNodeView = exports.CodeBlockView = void 0;
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -15,10 +17,16 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 
+var _utils = require("@atlaskit/editor-common/utils");
+
 var _prosemirrorModel = require("prosemirror-model");
 
 var _classNames = require("../ui/class-names");
 
+var _actions = require("../actions");
+
+var _mainState = require("../pm-plugins/main-state");
+
 var MATCH_NEWLINES = new RegExp('\n', 'g');
 
 var toDOM = function toDOM(node) {
@@ -75,6 +83,56 @@ var CodeBlockView = /*#__PURE__*/function () {
   }
 
   (0, _createClass2.default)(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 = (0, _toConsumableArray2.default)(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) {
@@ -88,6 +146,11 @@ var CodeBlockView = /*#__PURE__*/function () {
 
         this.node = node;
         this.ensureLineNumbers();
+
+        if (_utils.browser.android) {
+          this.coalesceDOMElements();
+          (0, _actions.resetShouldIgnoreFollowingMutations)(this.view.state, this.view.dispatch);
+        }
       }
 
       return true;
@@ -95,7 +158,13 @@ var CodeBlockView = /*#__PURE__*/function () {
   }, {
     key: "ignoreMutation",
     value: function ignoreMutation(record) {
-      // Ensure updating the line-number gutter doesn't trigger reparsing the codeblock
+      var pluginState = (0, _mainState.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/cjs/plugins/code-block/pm-plugins/actions.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ACTIONS = void 0;
 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'
 };
 exports.ACTIONS = ACTIONS;

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

@@ -11,6 +11,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
+var _utils = require("@atlaskit/editor-common/utils");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _messages = require("@atlaskit/editor-common/messages");
@@ -19,13 +21,15 @@ var _codeBlock = require("../nodeviews/code-block");
 
 var _highlightingCodeBlock = require("../nodeviews/highlighting-code-block");
 
-var _utils = require("../../selection/utils");
+var _utils2 = require("../../selection/utils");
 
 var _pluginKey = require("../plugin-key");
 
 var _actions = require("./actions");
 
-var _utils2 = require("../utils");
+var _actions2 = require("../actions");
+
+var _utils3 = require("../utils");
 
 var _classNames = require("../ui/class-names");
 
@@ -49,10 +53,39 @@ 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' && (0, _utils2.findCodeBlock)(view.state, view.state.selection)) {
+      var keyEvent = event;
+      var eventInputType = keyEvent.inputType;
+      var eventText = keyEvent.data;
+
+      if (_utils.browser.ios && event.composed && // insertParagraph will be the input type when the enter key is pressed.
+      eventInputType === 'insertParagraph' && (0, _utils3.findCodeBlock)(view.state, view.state.selection)) {
         event.preventDefault();
         return true;
+      } else if (_utils.browser.android && event.composed && eventInputType === 'insertCompositionText' && eventText[(eventText === null || eventText === void 0 ? void 0 : eventText.length) - 1] === '\n' && (0, _utils3.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
+          (0, _actions2.ignoreFollowingMutations)(view.state, view.dispatch);
+        }
+
+        return true;
+      }
+
+      if (_utils.browser.android) {
+        (0, _actions2.resetShouldIgnoreFollowingMutations)(view.state, view.dispatch);
       }
 
       return false;
@@ -62,16 +95,17 @@ var createPlugin = function createPlugin(_ref) {
   return new _safePlugin.SafePlugin({
     state: {
       init: function init(_, state) {
-        var node = (0, _utils2.findCodeBlock)(state, state.selection);
+        var node = (0, _utils3.findCodeBlock)(state, state.selection);
         return {
           pos: node ? node.pos : null,
           contentCopied: false,
-          isNodeSelected: false
+          isNodeSelected: false,
+          shouldIgnoreFollowingMutations: false
         };
       },
       apply: function apply(tr, pluginState, _oldState, newState) {
         if (tr.docChanged || tr.selectionSet) {
-          var node = (0, _utils2.findCodeBlock)(newState, tr.selection);
+          var node = (0, _utils3.findCodeBlock)(newState, tr.selection);
 
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
             pos: node ? node.pos : null,
@@ -87,6 +121,10 @@ var createPlugin = function createPlugin(_ref) {
           return _objectSpread(_objectSpread({}, pluginState), {}, {
             contentCopied: meta.data
           });
+        } else if ((meta === null || meta === void 0 ? void 0 : meta.type) === _actions.ACTIONS.SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS) {
+          return _objectSpread(_objectSpread({}, pluginState), {}, {
+            shouldIgnoreFollowingMutations: meta.data
+          });
         }
 
         return pluginState;
@@ -111,7 +149,7 @@ var createPlugin = function createPlugin(_ref) {
           return createCodeBlockNodeView(node, view, getPos);
         }
       },
-      handleClickOn: (0, _utils.createSelectionClickHandler)(['codeBlock'], function (target) {
+      handleClickOn: (0, _utils2.createSelectionClickHandler)(['codeBlock'], function (target) {
         return !!(target.closest(".".concat(_classNames.codeBlockClassNames.gutter)) || target.classList.contains(_classNames.codeBlockClassNames.content));
       }, {
         useLongPressSelection: useLongPressSelection