@atlaskit/editor-core 166.0.4 → 167.0.0

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

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

@@ -19,10 +19,10 @@ var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _classNames = require("./ui/class-names");
 
 var _templateObject, _templateObject2;
@@ -32,52 +32,56 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 highlightingCodeBlockStyles = function highlightingCodeBlockStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .code-block {\n    position: relative;\n    background-image: ", ";\n    background-repeat: no-repeat;\n    background-color: ", ";\n\n    --ds--code--bg-color: transparent;\n\n    background-attachment: local, scroll, scroll;\n    background-size: 8px 100%, 8px 100%, 8px 100%;\n    background-position: 100% 0, 100% 0, 0 0;\n    font-family: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    counter-reset: line;\n    display: flex;\n    min-width: ", "px;\n    cursor: pointer;\n    overflow-x: auto;\n\n    .", " {\n      /* https://bitbucket.org/atlassian/atlassian-frontend/src/develop/packages/design-system/code/src/themes/themeBuilder.ts#packages/design-system/code/src/themes/themeBuilder.ts-19:28 */\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n      color: ", ";\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        &::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          font-size: ", ";\n          line-height: 1.5rem;\n          color: ", ";\n        }\n      }\n    }\n\n    .", " {\n      position: absolute;\n      z-index: 2;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      pointer-events: none;\n      overflow: hidden;\n      tab-size: 4;\n\n      & [data-ds--code--code-block] {\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n\n    .", " {\n      position: relative;\n      z-index: 1;\n      display: flex;\n      flex: 1;\n\n      > code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        /* https://bitbucket.org/atlassian/atlassian-frontend/src/218202daeaf527262c21841e6f88fa058d349ad4/packages/design-system/code/src/themes/themeBuilder.ts#lines-12:17 */\n        font-size: ", ";\n        line-height: 1.5rem;\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n      }\n\n      &[data-debounce='true'] {\n        .", " {\n          display: none;\n        }\n      }\n\n      &:not([data-debounce='true']) {\n        > code:not([data-language='plaintext']):not([data-language='none']):not([data-language='']) {\n          color: transparent;\n          caret-color: ", ";\n        }\n      }\n    }\n  }\n\n  .ProseMirror li > .code-block {\n    margin: 0;\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px\n      ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: rgba(255, 143, 115, 0.5);\n      color: ", ";\n    }\n\n    .", " {\n      background-color: rgba(255, 189, 173, 0.5);\n    }\n  }\n"])), (0, _editorSharedStyles.overflowShadow)({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .code-block {\n    position: relative;\n    background-image: ", ";\n    background-repeat: no-repeat;\n    background-color: ", ";\n\n    --ds--code--bg-color: transparent;\n\n    background-attachment: local, scroll, scroll;\n    background-size: 8px 100%, 8px 100%, 8px 100%;\n    background-position: 100% 0, 100% 0, 0 0;\n    font-family: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    counter-reset: line;\n    display: flex;\n    min-width: ", "px;\n    cursor: pointer;\n    overflow-x: auto;\n\n    .", " {\n      /* https://bitbucket.org/atlassian/atlassian-frontend/src/develop/packages/design-system/code/src/themes/themeBuilder.ts#packages/design-system/code/src/themes/themeBuilder.ts-19:28 */\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n      color: ", ";\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        &::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          font-size: ", ";\n          line-height: 1.5rem;\n          color: ", ";\n        }\n      }\n    }\n\n    .", " {\n      position: absolute;\n      z-index: 2;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      pointer-events: none;\n      overflow: hidden;\n      tab-size: 4;\n\n      & [data-ds--code--code-block] {\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n\n    .", " {\n      position: relative;\n      z-index: 1;\n      display: flex;\n      flex: 1;\n\n      > code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        /* https://bitbucket.org/atlassian/atlassian-frontend/src/218202daeaf527262c21841e6f88fa058d349ad4/packages/design-system/code/src/themes/themeBuilder.ts#lines-12:17 */\n        font-size: ", ";\n        line-height: 1.5rem;\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n      }\n\n      &[data-debounce='true'] {\n        .", " {\n          display: none;\n        }\n      }\n\n      &:not([data-debounce='true']) {\n        > code:not([data-language='plaintext']):not([data-language='none']):not([data-language='']) {\n          color: transparent;\n          caret-color: ", ";\n        }\n      }\n    }\n  }\n\n  .ProseMirror li > .code-block {\n    margin: 0;\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px\n      ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n"])), (0, _editorSharedStyles.overflowShadow)({
+    // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     background: (0, _components.themed)({
       light: colors.N20,
       dark: colors.DN50
     })(props),
     width: '8px'
   }), (0, _components.themed)({
-    light: colors.N20,
-    dark: colors.DN50
+    light: (0, _tokens.token)('color.background.neutral', colors.N20),
+    dark: (0, _tokens.token)('color.background.neutral', colors.DN50)
   })(props), _editorSharedStyles.akEditorCodeFontFamily, (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorTableCellMinWidth, _classNames.codeBlockClassNames.gutter, (0, _components.themed)({
-    light: colors.N30,
-    dark: colors.DN20
+    light: (0, _tokens.token)('color.background.neutral', colors.N30),
+    dark: (0, _tokens.token)('color.background.neutral', colors.DN20)
   })(props), (0, _constants.gridSize)(), (0, _components.themed)({
-    light: colors.N90,
-    dark: colors.DN90
+    light: (0, _tokens.token)('color.text.subtlest', colors.N90),
+    dark: (0, _tokens.token)('color.text.subtlest', colors.DN90)
   })(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
-    light: colors.N400,
-    dark: colors.DN400
+    light: (0, _tokens.token)('color.text.subtle', colors.N400),
+    dark: (0, _tokens.token)('color.text.subtle', colors.DN400)
   })(props), _classNames.codeBlockClassNames.highlighting, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _classNames.codeBlockClassNames.content, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _constants.borderRadius)(), (0, _constants.gridSize)(), _classNames.codeBlockClassNames.highlighting, (0, _components.themed)({
-    light: colors.N800,
-    dark: colors.DN500
-  })(props), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _classNames.codeBlockClassNames.gutter, colors.R75, (0, _tokens.token)('color.text.danger', _editorSharedStyles.akEditorDeleteIconColor), _classNames.codeBlockClassNames.content, (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), _classNames.codeBlockClassNames.gutter, (0, _tokens.token)('color.text.danger', _editorSharedStyles.akEditorDeleteIconColor), _classNames.codeBlockClassNames.content);
+    light: (0, _tokens.token)('color.text', colors.N800),
+    dark: (0, _tokens.token)('color.text', colors.DN500)
+  })(props), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _classNames.codeBlockClassNames.gutter, (0, _tokens.token)('color.blanket.danger', colors.R75), (0, _tokens.token)('color.text.danger', _editorSharedStyles.akEditorDeleteIconColor), _classNames.codeBlockClassNames.content, (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), _classNames.codeBlockClassNames.gutter, (0, _tokens.token)('color.blanket.danger', 'rgba(255, 143, 115, 0.5)'), (0, _tokens.token)('color.text.danger', _editorSharedStyles.akEditorDeleteIconColor), _classNames.codeBlockClassNames.content, (0, _tokens.token)('color.background.danger', 'rgba(255, 189, 173, 0.5)'));
 };
 
 exports.highlightingCodeBlockStyles = highlightingCodeBlockStyles;
 
 var codeBlockStyles = function codeBlockStyles(props) {
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .code-block {\n    position: relative;\n    background-image: ", ";\n\n    --ds--code--bg-color: transparent;\n\n    background-repeat: no-repeat;\n    background-color: ", ";\n    background-attachment: local, scroll, scroll;\n    background-size: 8px 100%, 8px 100%, 8px 100%;\n    background-position: 100% 0, 100% 0, 0 0;\n    font-family: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    counter-reset: line;\n    display: flex;\n    min-width: ", "px;\n    cursor: pointer;\n    overflow-x: auto;\n\n    .", " {\n      /* https://bitbucket.org/atlassian/atlassian-frontend/src/develop/packages/design-system/code/src/themes/themeBuilder.ts#packages/design-system/code/src/themes/themeBuilder.ts-19:28 */\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        &::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          font-size: ", ";\n          line-height: 1.5rem;\n          color: ", ";\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        /* https://bitbucket.org/atlassian/atlassian-frontend/src/218202daeaf527262c21841e6f88fa058d349ad4/packages/design-system/code/src/themes/themeBuilder.ts#lines-12:17 */\n        font-size: ", ";\n        line-height: 1.5rem;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n      }\n    }\n  }\n\n  .ProseMirror li > .code-block {\n    margin: 0;\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px\n      ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: rgba(255, 143, 115, 0.5);\n      color: ", ";\n    }\n\n    .", " {\n      background-color: rgba(255, 189, 173, 0.5);\n    }\n  }\n"])), (0, _editorSharedStyles.overflowShadow)({
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .code-block {\n    position: relative;\n    background-image: ", ";\n\n    --ds--code--bg-color: transparent;\n\n    background-repeat: no-repeat;\n    background-color: ", ";\n    background-attachment: local, scroll, scroll;\n    background-size: 8px 100%, 8px 100%, 8px 100%;\n    background-position: 100% 0, 100% 0, 0 0;\n    font-family: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    counter-reset: line;\n    display: flex;\n    min-width: ", "px;\n    cursor: pointer;\n    overflow-x: auto;\n\n    .", " {\n      /* https://bitbucket.org/atlassian/atlassian-frontend/src/develop/packages/design-system/code/src/themes/themeBuilder.ts#packages/design-system/code/src/themes/themeBuilder.ts-19:28 */\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n\n      span {\n        display: block;\n        line-height: 0;\n        font-size: 0;\n\n        &::before {\n          display: inline-block;\n          content: counter(line);\n          counter-increment: line;\n          font-size: ", ";\n          line-height: 1.5rem;\n          color: ", ";\n        }\n      }\n    }\n\n    .", " {\n      display: flex;\n      flex: 1;\n\n      code {\n        flex-grow: 1;\n        tab-size: 4;\n        cursor: text;\n        /* https://bitbucket.org/atlassian/atlassian-frontend/src/218202daeaf527262c21841e6f88fa058d349ad4/packages/design-system/code/src/themes/themeBuilder.ts#lines-12:17 */\n        font-size: ", ";\n        line-height: 1.5rem;\n        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n      }\n    }\n  }\n\n  .ProseMirror li > .code-block {\n    margin: 0;\n  }\n\n  .ProseMirror .code-block.", ":not(.danger) {\n    ", "\n  }\n\n  /* Danger when top level node */\n  .ProseMirror .danger.code-block {\n    box-shadow: 0 0 0 ", "px ", ";\n\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n\n  /* Danger when nested node */\n  .ProseMirror .danger .code-block {\n    .", " {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .", " {\n      background-color: ", ";\n    }\n  }\n"])), (0, _editorSharedStyles.overflowShadow)({
+    // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     background: (0, _components.themed)({
       light: colors.N20,
       dark: colors.DN50
     })(props),
     width: '8px'
   }), (0, _components.themed)({
-    light: colors.N20,
-    dark: colors.DN50
+    light: (0, _tokens.token)('color.background.neutral', colors.N20),
+    dark: (0, _tokens.token)('color.background.neutral', colors.DN50)
   })(props), _editorSharedStyles.akEditorCodeFontFamily, (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorTableCellMinWidth, _classNames.codeBlockClassNames.gutter, (0, _components.themed)({
-    light: colors.N30,
-    dark: colors.DN20
+    light: (0, _tokens.token)('color.background.neutral', colors.N30),
+    dark: (0, _tokens.token)('color.background.neutral', colors.DN20)
   })(props), (0, _constants.gridSize)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
-    light: colors.N400,
-    dark: colors.DN400
+    light: (0, _tokens.token)('color.text', colors.N400),
+    dark: (0, _tokens.token)('color.text', colors.DN400)
   })(props), _classNames.codeBlockClassNames.content, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
-    light: colors.N800,
-    dark: colors.DN800
-  })(props), (0, _constants.borderRadius)(), (0, _constants.gridSize)(), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), _classNames.codeBlockClassNames.gutter, colors.R75, (0, _tokens.token)('color.text.danger', _editorSharedStyles.akEditorDeleteIconColor), _classNames.codeBlockClassNames.content, (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), _classNames.codeBlockClassNames.gutter, (0, _tokens.token)('color.text.danger', _editorSharedStyles.akEditorDeleteIconColor), _classNames.codeBlockClassNames.content);
+    light: (0, _tokens.token)('color.text', colors.N800),
+    dark: (0, _tokens.token)('color.text', colors.DN800)
+  })(props), (0, _constants.borderRadius)(), (0, _constants.gridSize)(), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _classNames.codeBlockClassNames.gutter, (0, _tokens.token)('color.blanket.danger', colors.R75), (0, _tokens.token)('color.text.danger', _editorSharedStyles.akEditorDeleteIconColor), _classNames.codeBlockClassNames.content, (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground), _classNames.codeBlockClassNames.gutter, (0, _tokens.token)('color.blanket.danger', 'rgba(255, 143, 115, 0.5)'), (0, _tokens.token)('color.text.danger', _editorSharedStyles.akEditorDeleteIconColor), _classNames.codeBlockClassNames.content, (0, _tokens.token)('color.background.danger', 'rgba(255, 189, 173, 0.5)'));
 };
 
 exports.codeBlockStyles = codeBlockStyles;

package/dist/cjs/plugins/collab-edit/styles.js

@@ -17,13 +17,15 @@ var _utils = require("./utils");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
 var telepointerColorStyle = function telepointerColorStyle(color, index) {
-  return "\n  &.color-".concat(index, " {\n    background-color: ").concat(color.selection, ";\n    &::after {\n      background-color: ").concat(color.solid, ";\n      color: #fff;\n      border-color: ").concat(color.solid, ";\n    }\n  }\n");
+  return "\n  &.color-".concat(index, " {\n    background-color: ").concat(color.selection, ";\n    &::after {\n      background-color: ").concat(color.solid, ";\n      color: ").concat((0, _tokens.token)('color.text.inverse', '#fff'), ";\n      border-color: ").concat(color.solid, ";\n    }\n  }\n");
 };
 
-var telepointerStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .telepointer {\n    position: relative;\n    transition: opacity 200ms;\n\n    &.telepointer-selection {\n      line-height: 1.2;\n      pointer-events: none;\n      user-select: none;\n    }\n\n    &.telepointer-selection-badge::after {\n      content: attr(data-initial);\n      position: absolute;\n      display: block;\n      top: -14px;\n      font-size: ", ";\n      padding: 2px;\n      color: white;\n      left: -1px;\n      border-radius: 2px 2px 2px 0;\n      line-height: initial;\n    }\n\n    &.", " {\n      opacity: 0.2;\n    }\n\n    ", ";\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(9), _pluginState.TELEPOINTER_DIM_CLASS, _utils.colors.map(function (color, index) {
+var telepointerStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .telepointer {\n    position: relative;\n    transition: opacity 200ms;\n\n    &.telepointer-selection {\n      line-height: 1.2;\n      pointer-events: none;\n      user-select: none;\n    }\n\n    &.telepointer-selection-badge::after {\n      content: attr(data-initial);\n      position: absolute;\n      display: block;\n      top: -14px;\n      font-size: ", ";\n      padding: 2px;\n      color: ", ";\n      left: -1px;\n      border-radius: 2px 2px 2px 0;\n      line-height: initial;\n    }\n\n    &.", " {\n      opacity: 0.2;\n    }\n\n    ", ";\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(9), (0, _tokens.token)('color.text.inverse', 'white'), _pluginState.TELEPOINTER_DIM_CLASS, _utils.colors.map(function (color, index) {
   return telepointerColorStyle(color, index);
 }));
 exports.telepointerStyle = telepointerStyle;