@atlaskit/editor-core 164.0.3 → 166.0.0

package/dist/cjs/plugins/base/utils/input-latency-tracking.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _getPerformanceTiming = require("../../../utils/performance/get-performance-timing");
+
+var _utils = require("@atlaskit/editor-common/utils");
+
+var InputLatencyTracker = /*#__PURE__*/function () {
+  function InputLatencyTracker(_ref) {
+    var samplingRate = _ref.samplingRate,
+        slowThreshold = _ref.slowThreshold,
+        normalThreshold = _ref.normalThreshold,
+        degradedThreshold = _ref.degradedThreshold,
+        dispatchAverage = _ref.dispatchAverage,
+        dispatchSample = _ref.dispatchSample,
+        onSampleStart = _ref.onSampleStart,
+        onSampleEnd = _ref.onSampleEnd,
+        onSlowInput = _ref.onSlowInput;
+    (0, _classCallCheck2.default)(this, InputLatencyTracker);
+    (0, _defineProperty2.default)(this, "samples", []);
+    (0, _defineProperty2.default)(this, "total", 0);
+    this.currentStart = null;
+    this.samplingRate = samplingRate;
+    this.slowThreshold = slowThreshold;
+    this.normalThreshold = normalThreshold;
+    this.degradedThreshold = degradedThreshold;
+    this.dispatchAverage = dispatchAverage;
+    this.dispatchSample = dispatchSample;
+    this.onSampleStart = onSampleStart;
+    this.onSampleEnd = onSampleEnd;
+    this.onSlowInput = onSlowInput;
+  }
+
+  (0, _createClass2.default)(InputLatencyTracker, [{
+    key: "start",
+    value: function start() {
+      this.currentStart = performance.now();
+
+      if (this.samples.length + 1 === this.samplingRate) {
+        var _this$onSampleStart;
+
+        (_this$onSampleStart = this.onSampleStart) === null || _this$onSampleStart === void 0 ? void 0 : _this$onSampleStart.call(this);
+      }
+    }
+  }, {
+    key: "end",
+    value: function end() {
+      if (this.currentStart === null) {
+        return;
+      }
+
+      var isSlow = false;
+      var time = (0, _getPerformanceTiming.getTimeSince)(this.currentStart);
+      this.push(time);
+
+      if (time > this.slowThreshold) {
+        var _this$onSlowInput;
+
+        (_this$onSlowInput = this.onSlowInput) === null || _this$onSlowInput === void 0 ? void 0 : _this$onSlowInput.call(this, time);
+        isSlow = true;
+      }
+
+      if (this.samples.length === this.samplingRate) {
+        var _this$onSampleEnd;
+
+        this.flush();
+        (_this$onSampleEnd = this.onSampleEnd) === null || _this$onSampleEnd === void 0 ? void 0 : _this$onSampleEnd.call(this, time, {
+          isSlow: isSlow,
+          severity: this.severity(time)
+        });
+      }
+    }
+  }, {
+    key: "flush",
+    value: function flush() {
+      if (this.samples.length === 0) {
+        return;
+      }
+
+      this.dispatch();
+      this.samples = [];
+      this.total = 0;
+    }
+  }, {
+    key: "dispatch",
+    value: function dispatch() {
+      var _this$dispatchSample, _this$dispatchAverage;
+
+      (_this$dispatchSample = this.dispatchSample) === null || _this$dispatchSample === void 0 ? void 0 : _this$dispatchSample.call(this, this.getLast(), this.severity(this.getLast())); // cache
+
+      var median = this.getMedian();
+      (_this$dispatchAverage = this.dispatchAverage) === null || _this$dispatchAverage === void 0 ? void 0 : _this$dispatchAverage.call(this, {
+        mean: this.getMean(),
+        median: median,
+        sampleSize: this.samples.length
+      }, this.severity(median));
+    }
+  }, {
+    key: "push",
+    value: function push(latency) {
+      this.samples.push(latency);
+      this.total += latency;
+    }
+  }, {
+    key: "severity",
+    value: function severity(time) {
+      return (0, _utils.getAnalyticsEventSeverity)(time, this.normalThreshold, this.degradedThreshold);
+    }
+  }, {
+    key: "getLast",
+    value: function getLast() {
+      return this.samples[this.samples.length - 1];
+    }
+  }, {
+    key: "getMean",
+    value: function getMean() {
+      return this.total / this.samples.length;
+    }
+  }, {
+    key: "getMedian",
+    value: function getMedian() {
+      if (this.samples.length === 1) {
+        return this.samples[0];
+      }
+
+      this.samples.sort(function (a, b) {
+        return a - b;
+      });
+      var middle = (this.samples.length + 1) / 2;
+      var floorMiddle = Math.floor(middle);
+      var remainder = middle % floorMiddle;
+
+      if (remainder === 0) {
+        return this.samples[middle - 1];
+      }
+
+      var left = this.samples[floorMiddle - 1];
+      var right = this.samples[floorMiddle];
+      return (left + right) / 2;
+    }
+  }]);
+  return InputLatencyTracker;
+}();
+
+exports.default = InputLatencyTracker;

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

@@ -17,7 +17,9 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _styles = require("@atlaskit/editor-common/styles");
 
+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        /* 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 ", " !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 ", " !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, _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, _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]), _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackground, _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, _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/code-block/styles.js

@@ -19,6 +19,8 @@ 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 _classNames = require("./ui/class-names");
@@ -30,7 +32,7 @@ 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      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: 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)({
     background: (0, _components.themed)({
       light: colors.N20,
       dark: colors.DN50
@@ -51,13 +53,13 @@ var highlightingCodeBlockStyles = function highlightingCodeBlockStyles(props) {
   })(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, _editorSharedStyles.akEditorDeleteBorder, _classNames.codeBlockClassNames.gutter, colors.R75, _editorSharedStyles.akEditorDeleteIconColor, _classNames.codeBlockClassNames.content, _editorSharedStyles.akEditorDeleteBackground, _classNames.codeBlockClassNames.gutter, _editorSharedStyles.akEditorDeleteIconColor, _classNames.codeBlockClassNames.content);
+  })(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);
 };
 
 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      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    .", " {\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)({
     background: (0, _components.themed)({
       light: colors.N20,
       dark: colors.DN50
@@ -75,7 +77,7 @@ var codeBlockStyles = function codeBlockStyles(props) {
   })(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, _editorSharedStyles.akEditorDeleteBorder, _classNames.codeBlockClassNames.gutter, colors.R75, _editorSharedStyles.akEditorDeleteIconColor, _classNames.codeBlockClassNames.content, _editorSharedStyles.akEditorDeleteBackground, _classNames.codeBlockClassNames.gutter, _editorSharedStyles.akEditorDeleteIconColor, _classNames.codeBlockClassNames.content);
+  })(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);
 };
 
 exports.codeBlockStyles = codeBlockStyles;

package/dist/cjs/plugins/collab-edit/plugin-state.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TELEPOINTER_DIM_CLASS = exports.PluginState = void 0;
+exports.getValidPos = exports.TELEPOINTER_DIM_CLASS = exports.PluginState = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -35,16 +35,24 @@ var TELEPOINTER_DIM_CLASS = 'telepointer-dim';
 exports.TELEPOINTER_DIM_CLASS = TELEPOINTER_DIM_CLASS;
 
 var getValidPos = function getValidPos(tr, pos) {
-  var resolvedPos = tr.doc.resolve(pos);
+  var endOfDocPos = tr.doc.nodeSize - 2;
 
-  var backwardSelection = _prosemirrorState.Selection.findFrom(resolvedPos, -1, true); // if there's no correct cursor position before the `pos`, we try to find it after the `pos`
+  if (pos <= endOfDocPos) {
+    var resolvedPos = tr.doc.resolve(pos);
 
+    var backwardSelection = _prosemirrorState.Selection.findFrom(resolvedPos, -1, true); // if there's no correct cursor position before the `pos`, we try to find it after the `pos`
 
-  var forwardSelection = _prosemirrorState.Selection.findFrom(resolvedPos, 1, true);
 
-  return backwardSelection ? backwardSelection.from : forwardSelection ? forwardSelection.from : pos;
+    var forwardSelection = _prosemirrorState.Selection.findFrom(resolvedPos, 1, true);
+
+    return backwardSelection ? backwardSelection.from : forwardSelection ? forwardSelection.from : pos;
+  }
+
+  return endOfDocPos;
 };
 
+exports.getValidPos = getValidPos;
+
 var PluginState = /*#__PURE__*/function () {
   function PluginState(decorations, participants, sessionId) {
     var collabInitalised = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
@@ -135,11 +143,21 @@ var PluginState = /*#__PURE__*/function () {
             remove = remove.concat(oldPointers);
           }
 
+          var endOfDocPos = tr.doc.nodeSize - 2;
           var _telepointerData$sele = telepointerData.selection,
               anchor = _telepointerData$sele.anchor,
               head = _telepointerData$sele.head;
           var rawFrom = anchor < head ? anchor : head;
           var rawTo = anchor >= head ? anchor : head;
+
+          if (rawFrom > endOfDocPos) {
+            rawFrom = endOfDocPos;
+          }
+
+          if (rawTo > endOfDocPos) {
+            rawTo = endOfDocPos;
+          }
+
           var isSelection = rawTo - rawFrom > 0;
           var from = 1;
           var to = 1;

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

@@ -13,9 +13,11 @@ var _react = require("@emotion/react");
 
 var _styles = require("@atlaskit/editor-common/styles");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject;
 
-var dateStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    .", " {\n      line-height: initial;\n      cursor: pointer;\n    }\n\n    &.", " {\n      .", " > span {\n        ", "\n      }\n    }\n  }\n\n  .danger {\n    .", ".", "\n      .", "\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n    }\n  }\n"])), _styles.DateSharedCssClassName.DATE_CONTAINER, _styles.DateSharedCssClassName.DATE_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.DateSharedCssClassName.DATE_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.DateSharedCssClassName.DATE_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.DateSharedCssClassName.DATE_WRAPPER, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder);
+var dateStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    .", " {\n      line-height: initial;\n      cursor: pointer;\n    }\n\n    &.", " {\n      .", " > span {\n        ", "\n      }\n    }\n  }\n\n  .danger {\n    .", ".", "\n      .", "\n      > span {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n    }\n  }\n"])), _styles.DateSharedCssClassName.DATE_CONTAINER, _styles.DateSharedCssClassName.DATE_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.DateSharedCssClassName.DATE_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.DateSharedCssClassName.DATE_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.DateSharedCssClassName.DATE_WRAPPER, _editorSharedStyles.akEditorSelectedBorderSize, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder));
 exports.dateStyles = dateStyles;

package/dist/cjs/plugins/emoji/index.js

@@ -5,9 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultListLimit = exports.default = exports.ACTIONS = void 0;
-exports.emojiPluginFactory = emojiPluginFactory;
-exports.emojiToTypeaheadItem = exports.emojiPluginKey = void 0;
+exports.ACTIONS = void 0;
+exports.createEmojiPlugin = createEmojiPlugin;
+exports.emojiToTypeaheadItem = exports.emojiPluginKey = exports.defaultListLimit = exports.default = void 0;
 exports.getEmojiPluginState = getEmojiPluginState;
 exports.memoize = memoize;
 exports.setProvider = void 0;
@@ -28,22 +28,20 @@ var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 
 var _emoji2 = require("@atlaskit/emoji");
 
+var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer");
+
 var _asciiInputRules = require("./pm-plugins/ascii-input-rules");
 
 var _analytics = require("../analytics");
 
 var _assets = require("../quick-insert/assets");
 
-var _emoji3 = _interopRequireDefault(require("./nodeviews/emoji"));
-
-var _emojiNext = _interopRequireDefault(require("./nodeviews/emoji-next"));
+var _emoji3 = require("./nodeviews/emoji");
 
 var _EmojiContextProvider = require("./ui/EmojiContextProvider");
 
 var _messages = require("../insert-block/ui/ToolbarInsertBlock/messages");
 
-var _featureFlagsContext = require("../feature-flags-context");
-
 var _openTypeaheadAtCursor = require("../type-ahead/transforms/open-typeahead-at-cursor");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -219,26 +217,22 @@ var emojiPlugin = function emojiPlugin(options) {
     pmPlugins: function pmPlugins() {
       return [{
         name: 'emoji',
-        plugin: function plugin(_ref5) {
-          var providerFactory = _ref5.providerFactory,
-              dispatch = _ref5.dispatch,
-              portalProviderAPI = _ref5.portalProviderAPI,
-              eventDispatcher = _ref5.eventDispatcher;
-          return emojiPluginFactory(dispatch, providerFactory, portalProviderAPI, eventDispatcher, options);
+        plugin: function plugin(pmPluginFactoryParams) {
+          return createEmojiPlugin(pmPluginFactoryParams);
         }
       }, {
         name: 'emojiAsciiInputRule',
-        plugin: function plugin(_ref6) {
-          var schema = _ref6.schema,
-              providerFactory = _ref6.providerFactory,
-              featureFlags = _ref6.featureFlags;
+        plugin: function plugin(_ref5) {
+          var schema = _ref5.schema,
+              providerFactory = _ref5.providerFactory,
+              featureFlags = _ref5.featureFlags;
           return (0, _asciiInputRules.inputRulePlugin)(schema, providerFactory, featureFlags);
         }
       }];
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref7) {
-        var formatMessage = _ref7.formatMessage;
+      quickInsert: function quickInsert(_ref6) {
+        var formatMessage = _ref6.formatMessage;
         return [{
           id: 'emoji',
           title: formatMessage(_messages.messages.emoji),
@@ -322,7 +316,7 @@ function getEmojiPluginState(state) {
   return emojiPluginKey.getState(state) || {};
 }
 
-function emojiPluginFactory(dispatch, providerFactory, portalProviderAPI, eventDispatcher, options) {
+function createEmojiPlugin(pmPluginFactoryParams) {
   return new _safePlugin.SafePlugin({
     key: emojiPluginKey,
     state: {
@@ -330,12 +324,12 @@ function emojiPluginFactory(dispatch, providerFactory, portalProviderAPI, eventD
         return {};
       },
       apply: function apply(tr, pluginState) {
-        var _ref8 = tr.getMeta(emojiPluginKey) || {
+        var _ref7 = tr.getMeta(emojiPluginKey) || {
           action: null,
           params: null
         },
-            action = _ref8.action,
-            params = _ref8.params;
+            action = _ref7.action,
+            params = _ref7.params;
 
         var newPluginState = pluginState;
 
@@ -344,14 +338,14 @@ function emojiPluginFactory(dispatch, providerFactory, portalProviderAPI, eventD
             newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
               emojiProvider: params.provider
             });
-            dispatch(emojiPluginKey, newPluginState);
+            pmPluginFactoryParams.dispatch(emojiPluginKey, newPluginState);
             return newPluginState;
 
           case ACTIONS.SET_ASCII_MAP:
             newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
               asciiMap: params.asciiMap
             });
-            dispatch(emojiPluginKey, newPluginState);
+            pmPluginFactoryParams.dispatch(emojiPluginKey, newPluginState);
             return newPluginState;
         }
 
@@ -360,11 +354,13 @@ function emojiPluginFactory(dispatch, providerFactory, portalProviderAPI, eventD
     },
     props: {
       nodeViews: {
-        emoji: function emoji(node, view, getPos) {
-          var featureFlags = (0, _featureFlagsContext.getFeatureFlags)(view.state);
-          var createEmojiNodeView = featureFlags !== null && featureFlags !== void 0 && featureFlags.nextEmojiNodeView ? (0, _emojiNext.default)(providerFactory, options) : (0, _emoji3.default)(portalProviderAPI, eventDispatcher, providerFactory, options);
-          return createEmojiNodeView(node, view, getPos);
-        }
+        emoji: (0, _getInlineNodeViewProducer.getInlineNodeViewProducer)({
+          pmPluginFactoryParams: pmPluginFactoryParams,
+          Component: _emoji3.EmojiNodeView,
+          extraComponentProps: {
+            providerFactory: pmPluginFactoryParams.providerFactory
+          }
+        })
       }
     },
     view: function view(editorView) {
@@ -389,11 +385,11 @@ function emojiPluginFactory(dispatch, providerFactory, portalProviderAPI, eventD
         return;
       };
 
-      providerFactory.subscribe('emojiProvider', providerHandler);
+      pmPluginFactoryParams.providerFactory.subscribe('emojiProvider', providerHandler);
       return {
         destroy: function destroy() {
-          if (providerFactory) {
-            providerFactory.unsubscribe('emojiProvider', providerHandler);
+          if (pmPluginFactoryParams.providerFactory) {
+            pmPluginFactoryParams.providerFactory.unsubscribe('emojiProvider', providerHandler);
           }
         }
       };

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

@@ -5,75 +5,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EmojiNodeView = void 0;
-exports.default = emojiNodeView;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+exports.EmojiNodeView = EmojiNodeView;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _utils = require("@atlaskit/editor-common/utils");
-
 var _Emoji = _interopRequireDefault(require("../ui/Emoji"));
 
-var _nodeviews = require("../../../nodeviews");
-
-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 EmojiNodeView = /*#__PURE__*/function (_ReactNodeView) {
-  (0, _inherits2.default)(EmojiNodeView, _ReactNodeView);
-
-  var _super = _createSuper(EmojiNodeView);
-
-  function EmojiNodeView() {
-    (0, _classCallCheck2.default)(this, EmojiNodeView);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(EmojiNodeView, [{
-    key: "createDomRef",
-    value: function createDomRef() {
-      return (0, _get2.default)((0, _getPrototypeOf2.default)(EmojiNodeView.prototype), "createDomRef", this).call(this);
-    }
-  }, {
-    key: "render",
-    value: function render(props) {
-      var providerFactory = props.providerFactory,
-          options = props.options;
-      var _this$node$attrs = this.node.attrs,
-          shortName = _this$node$attrs.shortName,
-          id = _this$node$attrs.id,
-          text = _this$node$attrs.text;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Emoji.default, {
-        providers: providerFactory,
-        id: id,
-        shortName: shortName,
-        fallback: text
-      }), options && options.allowZeroWidthSpaceAfter && _utils.ZERO_WIDTH_SPACE);
-    }
-  }]);
-  return EmojiNodeView;
-}(_nodeviews.ReactNodeView);
-
-exports.EmojiNodeView = EmojiNodeView;
-
-function emojiNodeView(portalProviderAPI, eventDispatcher, providerFactory, options) {
-  return function (node, view, getPos) {
-    return new EmojiNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
-      providerFactory: providerFactory,
-      options: options
-    }).init();
-  };
+function EmojiNodeView(props) {
+  var _props$node$attrs = props.node.attrs,
+      shortName = _props$node$attrs.shortName,
+      id = _props$node$attrs.id,
+      text = _props$node$attrs.text;
+  return /*#__PURE__*/_react.default.createElement(_Emoji.default, {
+    providers: props.providerFactory,
+    id: id,
+    shortName: shortName,
+    fallback: text
+  });
 }

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

@@ -5,31 +5,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.emojiStylesNext = exports.emojiStyles = void 0;
+exports.emojiStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = require("@emotion/react");
 
-var _colors = require("@atlaskit/theme/colors");
-
-var _constants = require("@atlaskit/theme/constants");
-
 var _emoji = require("@atlaskit/editor-common/emoji");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
 var emojiStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    display: inline-block;\n\n    .", " {\n      cursor: pointer;\n\n      &.", " > span {\n        /** needed for selection style to cover custom emoji image properly */\n        display: flex;\n      }\n    }\n\n    &.", " {\n      .", ",\n        .", " {\n        border-radius: 2px;\n        ", "\n      }\n    }\n  }\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_NODE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
-exports.emojiStyles = emojiStyles;
-var grid = (0, _constants.gridSize)() / 2;
-var fontSize = (0, _constants.fontSizeSmall)();
-var lineHeight = 4 * grid / fontSize;
-var maxWidth = 105 * grid; // ~420px
-
-var leftAndRightTextPadding = 2 * grid;
-var topAndBottomPadding = grid / 4;
-var marginDistance = 2 * grid;
-var emojiStylesNext = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .editor-emoji {\n    position: relative;\n    display: inline-block;\n    width: 20px;\n    height: 20px;\n    background-repeat: none;\n    background-size: contain;\n    cursor: pointer;\n    vertical-align: middle;\n\n    &.editor-emoji-loading {\n      border-radius: ", "px;\n      background: ", ";\n    }\n\n    &.editor-emoji-fallback {\n      display: inline;\n      background: transparent;\n      vertical-align: baseline;\n    }\n\n    &.ProseMirror-selectednode:empty {\n      outline: none;\n    }\n\n    &:not(.editor-emoji-fallback) {\n      font-size: 0px;\n    }\n\n    &:not(.editor-emoji-fallback)::before {\n      content: attr(data-emoji-shortname);\n      display: block;\n      box-sizing: border-box;\n      width: auto;\n      position: absolute;\n      top: 100%;\n      left: 50%;\n      transform: translate(-50%, ", "px);\n\n      // packages/css-packs/reduced-ui-pack/src/tooltip.js:25\n      color: ", ";\n      background-color: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      max-width: ", "px;\n      border-radius: ", "px;\n      overflow: hidden;\n      padding: ", "px ", "px;\n      pointer-events: none;\n      text-decoration: none;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      z-index: 10000;\n\n      opacity: 0; // invisible by default\n      transition: opacity 0.35s; // (durationStep * 14)\n    }\n\n    &:not(.editor-emoji-fallback):hover::before {\n      opacity: 1;\n      transition: opacity 0s 0.35s; // (durationStep * 14)\n    }\n\n    &.", " {\n      z-index: 2;\n      border-radius: 2px;\n      ", "\n    }\n  }\n"])), (0, _constants.borderRadius)(), _colors.N20, marginDistance, _colors.N0, _colors.N900, (0, _editorSharedStyles.relativeFontSizeToBase16)(fontSize), lineHeight, maxWidth, (0, _constants.borderRadius)(), topAndBottomPadding, leftAndRightTextPadding, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
-exports.emojiStylesNext = emojiStylesNext;
+exports.emojiStyles = emojiStyles;

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

@@ -40,10 +40,10 @@ var EXPAND_ICON_COLOR = function EXPAND_ICON_COLOR(props) {
 };
 
 var ACTIVE_STATE_BACKGROUND_COLOR = (0, _components.themed)({
-  dark: "#0C294F"
+  dark: "#0C294F4B"
 });
 var ACTIVE_STATE_BORDER = (0, _components.themed)({
-  dark: "1px solid #4794ff"
+  dark: "1px solid #4794ff4B"
 });
 var ACTIVE_STATE_BORDER_RADIUS = (0, _components.themed)({
   dark: '3px'

package/dist/cjs/plugins/extension/ui/styles.js

@@ -13,7 +13,9 @@ var _react = require("@emotion/react");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
-var extensionStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .extensionView-content-wrap,\n  .bodiedExtensionView-content-wrap {\n    margin: ", " 0;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    &:not(.danger).", " {\n      & > span > .extension-container {\n        ", "\n      }\n    }\n\n    &.danger > span > .extension-container {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n\n    &.inline {\n      word-wrap: break-all;\n    }\n  }\n\n  .extensionView-content-wrap .extension-container {\n    overflow: hidden;\n  }\n\n  .bodiedExtensionView-content-wrap\n    .extensionView-content-wrap\n    .extension-container {\n    width: 100%;\n    max-width: 100%; // ensure width can't go over 100%;\n  }\n"])), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackground);
+var extensionStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .extensionView-content-wrap,\n  .bodiedExtensionView-content-wrap {\n    margin: ", " 0;\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n\n    &:last-of-type {\n      margin-bottom: 0;\n    }\n\n    &:not(.danger).", " {\n      & > span > .extension-container {\n        ", "\n      }\n    }\n\n    &.danger > span > .extension-container {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n      background-color: ", ";\n    }\n\n    &.inline {\n      word-wrap: break-all;\n    }\n  }\n\n  .extensionView-content-wrap .extension-container {\n    overflow: hidden;\n  }\n\n  .bodiedExtensionView-content-wrap\n    .extensionView-content-wrap\n    .extension-container {\n    width: 100%;\n    max-width: 100%; // ensure width can't go over 100%;\n  }\n"])), _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedBorderSize, (0, _tokens.token)('color.border.danger', _editorSharedStyles.akEditorDeleteBorder), (0, _tokens.token)('color.background.danger', _editorSharedStyles.akEditorDeleteBackground));
 exports.extensionStyles = extensionStyles;