@atlaskit/editor-core 164.0.3 → 166.0.0

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

@@ -0,0 +1,149 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { getTimeSince } from '../../../utils/performance/get-performance-timing';
+import { getAnalyticsEventSeverity } from '@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;
+
+    _classCallCheck(this, InputLatencyTracker);
+
+    _defineProperty(this, "samples", []);
+
+    _defineProperty(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;
+  }
+
+  _createClass(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 = 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 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;
+}();
+
+export { InputLatencyTracker as default };

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

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

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

@@ -6,10 +6,11 @@ import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { blockNodesVerticalMargin, akEditorTableCellMinWidth, akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, SelectionStyle, getSelectionStyles, akEditorCodeFontFamily, akEditorSelectedNodeClassName, overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { codeBlockClassNames } from './ui/class-names';
 export var highlightingCodeBlockStyles = function highlightingCodeBlockStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), overflowShadow({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), overflowShadow({
     background: themed({
       light: colors.N20,
       dark: colors.DN50
@@ -30,10 +31,10 @@ export var highlightingCodeBlockStyles = function highlightingCodeBlockStyles(pr
   })(props), codeBlockClassNames.highlighting, relativeFontSizeToBase16(fontSize()), codeBlockClassNames.content, relativeFontSizeToBase16(fontSize()), borderRadius(), gridSize(), codeBlockClassNames.highlighting, themed({
     light: colors.N800,
     dark: colors.DN500
-  })(props), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, akEditorDeleteBorder, codeBlockClassNames.gutter, colors.R75, akEditorDeleteIconColor, codeBlockClassNames.content, akEditorDeleteBackground, codeBlockClassNames.gutter, akEditorDeleteIconColor, codeBlockClassNames.content);
+  })(props), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, token('color.border.danger', akEditorDeleteBorder), codeBlockClassNames.gutter, colors.R75, token('color.text.danger', akEditorDeleteIconColor), codeBlockClassNames.content, token('color.background.danger', akEditorDeleteBackground), codeBlockClassNames.gutter, token('color.text.danger', akEditorDeleteIconColor), codeBlockClassNames.content);
 };
 export var codeBlockStyles = function codeBlockStyles(props) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), overflowShadow({
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), overflowShadow({
     background: themed({
       light: colors.N20,
       dark: colors.DN50
@@ -51,5 +52,5 @@ export var codeBlockStyles = function codeBlockStyles(props) {
   })(props), codeBlockClassNames.content, relativeFontSizeToBase16(fontSize()), themed({
     light: colors.N800,
     dark: colors.DN800
-  })(props), borderRadius(), gridSize(), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, akEditorDeleteBorder, codeBlockClassNames.gutter, colors.R75, akEditorDeleteIconColor, codeBlockClassNames.content, akEditorDeleteBackground, codeBlockClassNames.gutter, akEditorDeleteIconColor, codeBlockClassNames.content);
+  })(props), borderRadius(), gridSize(), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, token('color.border.danger', akEditorDeleteBorder), codeBlockClassNames.gutter, colors.R75, token('color.text.danger', akEditorDeleteIconColor), codeBlockClassNames.content, token('color.background.danger', akEditorDeleteBackground), codeBlockClassNames.gutter, token('color.text.danger', akEditorDeleteIconColor), codeBlockClassNames.content);
 };

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

@@ -16,14 +16,19 @@ export var TELEPOINTER_DIM_CLASS = 'telepointer-dim';
  * Returns position where it's possible to place a decoration.
  */
 
-var getValidPos = function getValidPos(tr, pos) {
-  var resolvedPos = tr.doc.resolve(pos);
-  var backwardSelection = Selection.findFrom(resolvedPos, -1, true); // if there's no correct cursor position before the `pos`, we try to find it after the `pos`
+export var getValidPos = function getValidPos(tr, pos) {
+  var endOfDocPos = tr.doc.nodeSize - 2;
 
-  var forwardSelection = Selection.findFrom(resolvedPos, 1, true);
-  return backwardSelection ? backwardSelection.from : forwardSelection ? forwardSelection.from : pos;
-};
+  if (pos <= endOfDocPos) {
+    var resolvedPos = tr.doc.resolve(pos);
+    var backwardSelection = 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 = Selection.findFrom(resolvedPos, 1, true);
+    return backwardSelection ? backwardSelection.from : forwardSelection ? forwardSelection.from : pos;
+  }
 
+  return endOfDocPos;
+};
 export var PluginState = /*#__PURE__*/function () {
   function PluginState(decorations, participants, sessionId) {
     var collabInitalised = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
@@ -117,11 +122,21 @@ export 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/esm/plugins/date/styles.js

@@ -4,5 +4,6 @@ var _templateObject;
 
 import { css } from '@emotion/react';
 import { DateSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { token } from '@atlaskit/tokens';
 import { SelectionStyle, getSelectionStyles, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-export var dateStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), DateSharedCssClassName.DATE_CONTAINER, DateSharedCssClassName.DATE_WRAPPER, akEditorSelectedNodeClassName, DateSharedCssClassName.DATE_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), DateSharedCssClassName.DATE_CONTAINER, akEditorSelectedNodeClassName, DateSharedCssClassName.DATE_WRAPPER, akEditorSelectedBorderSize, akEditorDeleteBorder);
+export var dateStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), DateSharedCssClassName.DATE_CONTAINER, DateSharedCssClassName.DATE_WRAPPER, akEditorSelectedNodeClassName, DateSharedCssClassName.DATE_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), DateSharedCssClassName.DATE_CONTAINER, akEditorSelectedNodeClassName, DateSharedCssClassName.DATE_WRAPPER, akEditorSelectedBorderSize, token('color.border.danger', akEditorDeleteBorder));

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

@@ -11,14 +11,13 @@ import { emoji } from '@atlaskit/adf-schema';
 import { Fragment } from 'prosemirror-model';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import { EmojiTypeAheadItem, SearchSort, recordSelectionSucceededSli, recordSelectionFailedSli } from '@atlaskit/emoji';
+import { getInlineNodeViewProducer } from '../../nodeviews/getInlineNodeViewProducer';
 import { inputRulePlugin as asciiInputRulePlugin } from './pm-plugins/ascii-input-rules';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD } from '../analytics';
 import { IconEmoji } from '../quick-insert/assets';
-import emojiNodeView from './nodeviews/emoji';
-import emojiNodeViewNext from './nodeviews/emoji-next';
+import { EmojiNodeView } from './nodeviews/emoji';
 import { EmojiContextProvider } from './ui/EmojiContextProvider';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
-import { getFeatureFlags } from '../feature-flags-context';
 import { openTypeAheadAtCursor } from '../type-ahead/transforms/open-typeahead-at-cursor';
 export var emojiToTypeaheadItem = function emojiToTypeaheadItem(emoji, emojiProvider) {
   return {
@@ -184,26 +183,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 asciiInputRulePlugin(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.emoji),
@@ -280,7 +275,7 @@ export var emojiPluginKey = new PluginKey('emojiPlugin');
 export function getEmojiPluginState(state) {
   return emojiPluginKey.getState(state) || {};
 }
-export function emojiPluginFactory(dispatch, providerFactory, portalProviderAPI, eventDispatcher, options) {
+export function createEmojiPlugin(pmPluginFactoryParams) {
   return new SafePlugin({
     key: emojiPluginKey,
     state: {
@@ -288,12 +283,12 @@ export function emojiPluginFactory(dispatch, providerFactory, portalProviderAPI,
         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;
 
@@ -302,14 +297,14 @@ export function emojiPluginFactory(dispatch, providerFactory, portalProviderAPI,
             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;
         }
 
@@ -318,11 +313,13 @@ export function emojiPluginFactory(dispatch, providerFactory, portalProviderAPI,
     },
     props: {
       nodeViews: {
-        emoji: function emoji(node, view, getPos) {
-          var featureFlags = getFeatureFlags(view.state);
-          var createEmojiNodeView = featureFlags !== null && featureFlags !== void 0 && featureFlags.nextEmojiNodeView ? emojiNodeViewNext(providerFactory, options) : emojiNodeView(portalProviderAPI, eventDispatcher, providerFactory, options);
-          return createEmojiNodeView(node, view, getPos);
-        }
+        emoji: getInlineNodeViewProducer({
+          pmPluginFactoryParams: pmPluginFactoryParams,
+          Component: EmojiNodeView,
+          extraComponentProps: {
+            providerFactory: pmPluginFactoryParams.providerFactory
+          }
+        })
       }
     },
     view: function view(editorView) {
@@ -347,11 +344,11 @@ export function emojiPluginFactory(dispatch, providerFactory, portalProviderAPI,
         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/esm/plugins/emoji/nodeviews/emoji.js

@@ -1,59 +1,14 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _get from "@babel/runtime/helpers/get";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
-
 import React from 'react';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import Emoji from '../ui/Emoji';
-import { ReactNodeView } from '../../../nodeviews';
-export var EmojiNodeView = /*#__PURE__*/function (_ReactNodeView) {
-  _inherits(EmojiNodeView, _ReactNodeView);
-
-  var _super = _createSuper(EmojiNodeView);
-
-  function EmojiNodeView() {
-    _classCallCheck(this, EmojiNodeView);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(EmojiNodeView, [{
-    key: "createDomRef",
-    value: function createDomRef() {
-      return _get(_getPrototypeOf(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Emoji, {
-        providers: providerFactory,
-        id: id,
-        shortName: shortName,
-        fallback: text
-      }), options && options.allowZeroWidthSpaceAfter && ZERO_WIDTH_SPACE);
-    }
-  }]);
-
-  return EmojiNodeView;
-}(ReactNodeView);
-export default function emojiNodeView(portalProviderAPI, eventDispatcher, providerFactory, options) {
-  return function (node, view, getPos) {
-    return new EmojiNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
-      providerFactory: providerFactory,
-      options: options
-    }).init();
-  };
+export 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.createElement(Emoji, {
+    providers: props.providerFactory,
+    id: id,
+    shortName: shortName,
+    fallback: text
+  });
 }

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

@@ -1,19 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
 import { css } from '@emotion/react';
-import { N0, N20, N900 } from '@atlaskit/theme/colors';
-import { borderRadius, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
 import { EmojiSharedCssClassName } from '@atlaskit/editor-common/emoji';
-import { SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-export var emojiStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), EmojiSharedCssClassName.EMOJI_CONTAINER, EmojiSharedCssClassName.EMOJI_NODE, EmojiSharedCssClassName.EMOJI_IMAGE, akEditorSelectedNodeClassName, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow]));
-var grid = gridSize() / 2;
-var fontSize = fontSizeSmall();
-var lineHeight = 4 * grid / fontSize;
-var maxWidth = 105 * grid; // ~420px
-
-var leftAndRightTextPadding = 2 * grid;
-var topAndBottomPadding = grid / 4;
-var marginDistance = 2 * grid;
-export var emojiStylesNext = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), borderRadius(), N20, marginDistance, N0, N900, relativeFontSizeToBase16(fontSize), lineHeight, maxWidth, borderRadius(), topAndBottomPadding, leftAndRightTextPadding, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow]));
+import { SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+export var emojiStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), EmojiSharedCssClassName.EMOJI_CONTAINER, EmojiSharedCssClassName.EMOJI_NODE, EmojiSharedCssClassName.EMOJI_IMAGE, akEditorSelectedNodeClassName, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow]));

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

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

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

@@ -4,4 +4,5 @@ var _templateObject;
 
 import { css } from '@emotion/react';
 import { blockNodesVerticalMargin, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-export var extensionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), blockNodesVerticalMargin, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground);
+import { token } from '@atlaskit/tokens';
+export var extensionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), blockNodesVerticalMargin, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedBorderSize, token('color.border.danger', akEditorDeleteBorder), token('color.background.danger', akEditorDeleteBackground));