@atlaskit/editor-core 165.0.0 → 166.0.2

package/dist/esm/plugins/base/pm-plugins/frozen-editor.js

@@ -13,7 +13,7 @@ import { getParticipantsCount } from '../../collab-edit/get-participants-count';
 import { countNodes } from '../../../utils/count-nodes';
 import { getContextIdentifier } from './context-identifier';
 import { setInteractionType } from '../utils/frozen-editor';
-import { getTimeSince } from '../../../utils/performance/get-performance-timing';
+import InputLatencyTracker from '../utils/input-latency-tracking';
 export var frozenEditorPluginKey = new PluginKey('frozenEditor');
 var DEFAULT_KEYSTROKE_SAMPLING_LIMIT = 100;
 var DEFAULT_SLOW_THRESHOLD = 300;
@@ -24,11 +24,11 @@ var DEFAULT_TRACK_SEVERITY_ENABLED = false;
 export var DEFAULT_TRACK_SEVERITY_THRESHOLD_NORMAL = 100;
 export var DEFAULT_TRACK_SEVERITY_THRESHOLD_DEGRADED = 500;
 
-var dispatchLongTaskEvent = function dispatchLongTaskEvent(dispatchAnalyticsEvent, view, time, allowCountNodes, interactionType, severity) {
+var dispatchLongTaskEvent = function dispatchLongTaskEvent(dispatchAnalyticsEvent, view, time, getNodeCount, interactionType, severity) {
   var _getContextIdentifier;
 
   var state = view.state;
-  var nodesCount = allowCountNodes ? countNodes(view.state) : {};
+  var nodesCount = getNodeCount(state);
   return dispatchAnalyticsEvent({
     action: ACTION.BROWSER_FREEZE,
     actionSubject: ACTION_SUBJECT.EDITOR,
@@ -46,8 +46,8 @@ var dispatchLongTaskEvent = function dispatchLongTaskEvent(dispatchAnalyticsEven
 };
 
 export default (function (dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, ufo) {
-  var keystrokeCount = 0;
   var interactionType;
+  var inputLatencyTracker = null;
 
   if (browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackInteractionType) {
     interactionType = setInteractionType(BROWSER_FREEZE_INTERACTION_TYPE.LOADING);
@@ -57,6 +57,20 @@ export default (function (dispatchAnalyticsEvent, inputTracking, browserFreezeTr
   var slowThreshold = inputTracking && typeof inputTracking.slowThreshold === 'number' ? inputTracking.slowThreshold : DEFAULT_SLOW_THRESHOLD;
   var freezeThreshold = inputTracking && typeof inputTracking.freezeThreshold === 'number' ? inputTracking.freezeThreshold : DEFAULT_FREEZE_THRESHOLD;
   var allowCountNodes = inputTracking && inputTracking.countNodes;
+  var prevNodeCountState = null;
+  var prevNodeCount = {}; // Cache the result as we were calling this multiple times
+  // and has potential to be expensive
+
+  var getNodeCount = function getNodeCount(state) {
+    if (state === prevNodeCountState) {
+      return prevNodeCount;
+    }
+
+    prevNodeCount = allowCountNodes ? countNodes(state) : {};
+    prevNodeCountState = state;
+    return prevNodeCount;
+  };
+
   var shouldTrackSeverity = (inputTracking === null || inputTracking === void 0 ? void 0 : inputTracking.trackSeverity) || DEFAULT_TRACK_SEVERITY_ENABLED;
   var severityThresholdNormal = (inputTracking === null || inputTracking === void 0 ? void 0 : inputTracking.severityNormalThreshold) || DEFAULT_TRACK_SEVERITY_THRESHOLD_NORMAL;
   var severityThresholdDegraded = (inputTracking === null || inputTracking === void 0 ? void 0 : inputTracking.severityDegradedThreshold) || DEFAULT_TRACK_SEVERITY_THRESHOLD_DEGRADED;
@@ -64,84 +78,18 @@ export default (function (dispatchAnalyticsEvent, inputTracking, browserFreezeTr
     key: frozenEditorPluginKey,
     props: isPerformanceAPIAvailable() ? {
       handleTextInput: function handleTextInput(view) {
-        var state = view.state;
-        var now = performance.now();
+        var _inputLatencyTracker;
+
+        (_inputLatencyTracker = inputLatencyTracker) === null || _inputLatencyTracker === void 0 ? void 0 : _inputLatencyTracker.start();
 
         if (browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackInteractionType) {
           interactionType = BROWSER_FREEZE_INTERACTION_TYPE.TYPING;
         }
 
-        var experienceStore = ufo ? ExperienceStore.getInstance(view) : undefined;
-        var trackTyping = samplingRate && ++keystrokeCount === samplingRate;
-
-        if (trackTyping) {
-          experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.start(EditorExperience.typing);
-        }
-
         requestAnimationFrame(function () {
-          var diff = getTimeSince(now);
-
-          if (diff > slowThreshold) {
-            var nodesCount = allowCountNodes ? countNodes(view.state) : {};
-
-            if (inputTracking !== null && inputTracking !== void 0 && inputTracking.enabled) {
-              var _getContextIdentifier2;
-
-              dispatchAnalyticsEvent({
-                action: ACTION.SLOW_INPUT,
-                actionSubject: ACTION_SUBJECT.EDITOR,
-                attributes: _objectSpread(_objectSpread({
-                  time: diff,
-                  nodeSize: state.doc.nodeSize
-                }, nodesCount), {}, {
-                  participants: getParticipantsCount(state),
-                  objectId: (_getContextIdentifier2 = getContextIdentifier(state)) === null || _getContextIdentifier2 === void 0 ? void 0 : _getContextIdentifier2.objectId
-                }),
-                eventType: EVENT_TYPE.OPERATIONAL
-              });
-            }
+          var _inputLatencyTracker2;
 
-            experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.addMetadata(EditorExperience.typing, {
-              slowInput: true
-            });
-          }
-
-          if (trackTyping) {
-            var _getContextIdentifier4;
-
-            var _nodesCount = allowCountNodes ? countNodes(view.state) : {};
-
-            keystrokeCount = 0;
-            var severity = shouldTrackSeverity ? getAnalyticsEventSeverity(diff, severityThresholdNormal, severityThresholdDegraded) : undefined;
-
-            if (inputTracking !== null && inputTracking !== void 0 && inputTracking.enabled) {
-              var _getContextIdentifier3;
-
-              var payload = {
-                action: ACTION.INPUT_PERF_SAMPLING,
-                actionSubject: ACTION_SUBJECT.EDITOR,
-                attributes: _objectSpread(_objectSpread({
-                  time: diff,
-                  nodeSize: state.doc.nodeSize
-                }, _nodesCount), {}, {
-                  participants: getParticipantsCount(state),
-                  objectId: (_getContextIdentifier3 = getContextIdentifier(state)) === null || _getContextIdentifier3 === void 0 ? void 0 : _getContextIdentifier3.objectId,
-                  severity: severity
-                }),
-                eventType: EVENT_TYPE.OPERATIONAL
-              };
-              dispatchAnalyticsEvent(payload);
-            }
-
-            experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.success(EditorExperience.typing, _objectSpread(_objectSpread({
-              nodeSize: state.doc.nodeSize
-            }, _nodesCount), {}, {
-              participants: getParticipantsCount(state),
-              objectId: (_getContextIdentifier4 = getContextIdentifier(state)) === null || _getContextIdentifier4 === void 0 ? void 0 : _getContextIdentifier4.objectId,
-              time: diff,
-              severity: severity
-            }));
-          }
+          (_inputLatencyTracker2 = inputLatencyTracker) === null || _inputLatencyTracker2 === void 0 ? void 0 : _inputLatencyTracker2.end();
         });
         return false;
       },
@@ -161,6 +109,106 @@ export default (function (dispatchAnalyticsEvent, inputTracking, browserFreezeTr
         return {};
       }
 
+      var experienceStore = ufo ? ExperienceStore.getInstance(_view) : undefined;
+
+      if (inputTracking !== null && inputTracking !== void 0 && inputTracking.enabled) {
+        inputLatencyTracker = new InputLatencyTracker({
+          samplingRate: samplingRate,
+          slowThreshold: slowThreshold,
+          normalThreshold: severityThresholdNormal,
+          degradedThreshold: severityThresholdDegraded,
+          onSampleStart: function onSampleStart() {
+            experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.start(EditorExperience.typing);
+          },
+          onSampleEnd: function onSampleEnd(time, _ref) {
+            var _getContextIdentifier2;
+
+            var isSlow = _ref.isSlow,
+                severity = _ref.severity;
+            var state = _view.state;
+            var nodesCount = getNodeCount(state);
+
+            if (isSlow) {
+              experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.addMetadata(EditorExperience.typing, {
+                slowInput: true
+              });
+            }
+
+            experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.success(EditorExperience.typing, _objectSpread(_objectSpread({
+              nodeSize: state.doc.nodeSize
+            }, nodesCount), {}, {
+              participants: getParticipantsCount(state),
+              objectId: (_getContextIdentifier2 = getContextIdentifier(state)) === null || _getContextIdentifier2 === void 0 ? void 0 : _getContextIdentifier2.objectId,
+              time: time,
+              severity: shouldTrackSeverity ? severity : undefined
+            }));
+          },
+          dispatchSample: function dispatchSample(time, severity) {
+            var _getContextIdentifier3;
+
+            var state = _view.state;
+            var nodesCount = getNodeCount(state);
+            var samplePayload = {
+              action: ACTION.INPUT_PERF_SAMPLING,
+              actionSubject: ACTION_SUBJECT.EDITOR,
+              attributes: _objectSpread(_objectSpread({
+                time: time,
+                nodeSize: state.doc.nodeSize
+              }, nodesCount), {}, {
+                participants: getParticipantsCount(state),
+                objectId: (_getContextIdentifier3 = getContextIdentifier(state)) === null || _getContextIdentifier3 === void 0 ? void 0 : _getContextIdentifier3.objectId,
+                severity: shouldTrackSeverity ? severity : undefined
+              }),
+              eventType: EVENT_TYPE.OPERATIONAL
+            };
+            dispatchAnalyticsEvent(samplePayload);
+          },
+          dispatchAverage: function dispatchAverage(_ref2, severity) {
+            var _getContextIdentifier4;
+
+            var mean = _ref2.mean,
+                median = _ref2.median,
+                sampleSize = _ref2.sampleSize;
+            var state = _view.state;
+            var nodeCount = getNodeCount(state);
+            var averagePayload = {
+              action: ACTION.INPUT_PERF_SAMPLING_AVG,
+              actionSubject: ACTION_SUBJECT.EDITOR,
+              attributes: _objectSpread(_objectSpread({
+                mean: mean,
+                median: median,
+                sampleSize: sampleSize
+              }, nodeCount), {}, {
+                nodeSize: state.doc.nodeSize,
+                severity: shouldTrackSeverity ? severity : undefined,
+                participants: getParticipantsCount(state),
+                objectId: (_getContextIdentifier4 = getContextIdentifier(state)) === null || _getContextIdentifier4 === void 0 ? void 0 : _getContextIdentifier4.objectId
+              }),
+              eventType: EVENT_TYPE.OPERATIONAL
+            };
+            dispatchAnalyticsEvent(averagePayload);
+          },
+          onSlowInput: function onSlowInput(time) {
+            var _getContextIdentifier5;
+
+            var state = _view.state;
+            var nodesCount = getNodeCount(state);
+            dispatchAnalyticsEvent({
+              action: ACTION.SLOW_INPUT,
+              actionSubject: ACTION_SUBJECT.EDITOR,
+              attributes: _objectSpread(_objectSpread({
+                time: time,
+                nodeSize: state.doc.nodeSize
+              }, nodesCount), {}, {
+                participants: getParticipantsCount(state),
+                objectId: (_getContextIdentifier5 = getContextIdentifier(state)) === null || _getContextIdentifier5 === void 0 ? void 0 : _getContextIdentifier5.objectId
+              }),
+              eventType: EVENT_TYPE.OPERATIONAL
+            });
+          }
+        });
+      }
+
       var observer;
 
       try {
@@ -171,7 +219,7 @@ export default (function (dispatchAnalyticsEvent, inputTracking, browserFreezeTr
             var duration = perfEntries[i].duration;
 
             if (duration > freezeThreshold) {
-              dispatchLongTaskEvent(dispatchAnalyticsEvent, _view, duration, allowCountNodes, browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackInteractionType ? interactionType : undefined, browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackSeverity ? getAnalyticsEventSeverity(duration, browserFreezeTracking.severityNormalThreshold || NORMAL_SEVERITY_THRESHOLD, browserFreezeTracking.severityDegradedThreshold || DEGRADED_SEVERITY_THRESHOLD) : undefined);
+              dispatchLongTaskEvent(dispatchAnalyticsEvent, _view, duration, getNodeCount, browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackInteractionType ? interactionType : undefined, browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackSeverity ? getAnalyticsEventSeverity(duration, browserFreezeTracking.severityNormalThreshold || NORMAL_SEVERITY_THRESHOLD, browserFreezeTracking.severityDegradedThreshold || DEGRADED_SEVERITY_THRESHOLD) : undefined);
             }
           }
         }); // register observer for long task notifications
@@ -184,9 +232,10 @@ export default (function (dispatchAnalyticsEvent, inputTracking, browserFreezeTr
 
       return {
         destroy: function destroy() {
-          if (observer) {
-            observer.disconnect();
-          }
+          var _inputLatencyTracker3;
+
+          (_inputLatencyTracker3 = inputLatencyTracker) === null || _inputLatencyTracker3 === void 0 ? void 0 : _inputLatencyTracker3.flush();
+          observer === null || observer === void 0 ? void 0 : observer.disconnect();
         }
       };
     }

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/index.js

@@ -1,6 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { collab } from 'prosemirror-collab';
 import { createPlugin, pluginKey } from './plugin';
 import { sendTransaction } from './events/send-transaction';

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/collab-edit/provider/channel.js

@@ -1,9 +1,9 @@
 import _typeof from "@babel/runtime/helpers/typeof";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { utils } from '@atlaskit/util-service-support';
 import { EventEmitter2 } from 'eventemitter2';
 import { getVersion, sendableSteps } from 'prosemirror-collab';

package/dist/esm/plugins/custom-autoformat/doc.js

@@ -1,5 +1,5 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { closeHistory } from 'prosemirror-history';
 import { processRawValue } from '../../utils';
 import { autoformatAction } from './utils';

package/dist/esm/plugins/custom-autoformat/index.js

@@ -1,6 +1,6 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 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; }
 

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));