@atlaskit/editor-core 165.0.0 → 166.0.0

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

@@ -7,7 +7,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 const frozenEditorPluginKey = new PluginKey('frozenEditor');
 const DEFAULT_KEYSTROKE_SAMPLING_LIMIT = 100;
 const DEFAULT_SLOW_THRESHOLD = 300;
@@ -18,13 +18,13 @@ const DEFAULT_TRACK_SEVERITY_ENABLED = false;
 export const DEFAULT_TRACK_SEVERITY_THRESHOLD_NORMAL = 100;
 export const DEFAULT_TRACK_SEVERITY_THRESHOLD_DEGRADED = 500;
 
-const dispatchLongTaskEvent = (dispatchAnalyticsEvent, view, time, allowCountNodes, interactionType, severity) => {
+const dispatchLongTaskEvent = (dispatchAnalyticsEvent, view, time, getNodeCount, interactionType, severity) => {
   var _getContextIdentifier;
 
   const {
     state
   } = view;
-  const nodesCount = allowCountNodes ? countNodes(view.state) : {};
+  const nodesCount = getNodeCount(state);
   return dispatchAnalyticsEvent({
     action: ACTION.BROWSER_FREEZE,
     actionSubject: ACTION_SUBJECT.EDITOR,
@@ -42,8 +42,8 @@ const dispatchLongTaskEvent = (dispatchAnalyticsEvent, view, time, allowCountNod
 };
 
 export default ((dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, ufo) => {
-  let keystrokeCount = 0;
   let interactionType;
+  let inputLatencyTracker = null;
 
   if (browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackInteractionType) {
     interactionType = setInteractionType(BROWSER_FREEZE_INTERACTION_TYPE.LOADING);
@@ -53,6 +53,20 @@ export default ((dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, u
   const slowThreshold = inputTracking && typeof inputTracking.slowThreshold === 'number' ? inputTracking.slowThreshold : DEFAULT_SLOW_THRESHOLD;
   const freezeThreshold = inputTracking && typeof inputTracking.freezeThreshold === 'number' ? inputTracking.freezeThreshold : DEFAULT_FREEZE_THRESHOLD;
   const allowCountNodes = inputTracking && inputTracking.countNodes;
+  let prevNodeCountState = null;
+  let prevNodeCount = {}; // Cache the result as we were calling this multiple times
+  // and has potential to be expensive
+
+  const getNodeCount = state => {
+    if (state === prevNodeCountState) {
+      return prevNodeCount;
+    }
+
+    prevNodeCount = allowCountNodes ? countNodes(state) : {};
+    prevNodeCountState = state;
+    return prevNodeCount;
+  };
+
   const shouldTrackSeverity = (inputTracking === null || inputTracking === void 0 ? void 0 : inputTracking.trackSeverity) || DEFAULT_TRACK_SEVERITY_ENABLED;
   const severityThresholdNormal = (inputTracking === null || inputTracking === void 0 ? void 0 : inputTracking.severityNormalThreshold) || DEFAULT_TRACK_SEVERITY_THRESHOLD_NORMAL;
   const severityThresholdDegraded = (inputTracking === null || inputTracking === void 0 ? void 0 : inputTracking.severityDegradedThreshold) || DEFAULT_TRACK_SEVERITY_THRESHOLD_DEGRADED;
@@ -60,85 +74,18 @@ export default ((dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, u
     key: frozenEditorPluginKey,
     props: isPerformanceAPIAvailable() ? {
       handleTextInput(view) {
-        const {
-          state
-        } = view;
-        const 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;
         }
 
-        const experienceStore = ufo ? ExperienceStore.getInstance(view) : undefined;
-        const trackTyping = samplingRate && ++keystrokeCount === samplingRate;
-
-        if (trackTyping) {
-          experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.start(EditorExperience.typing);
-        }
-
         requestAnimationFrame(() => {
-          const diff = getTimeSince(now);
-
-          if (diff > slowThreshold) {
-            const 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: {
-                  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
-              });
-            }
-
-            experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.addMetadata(EditorExperience.typing, {
-              slowInput: true
-            });
-          }
-
-          if (trackTyping) {
-            var _getContextIdentifier4;
+          var _inputLatencyTracker2;
 
-            const nodesCount = allowCountNodes ? countNodes(view.state) : {};
-            keystrokeCount = 0;
-            const severity = shouldTrackSeverity ? getAnalyticsEventSeverity(diff, severityThresholdNormal, severityThresholdDegraded) : undefined;
-
-            if (inputTracking !== null && inputTracking !== void 0 && inputTracking.enabled) {
-              var _getContextIdentifier3;
-
-              const payload = {
-                action: ACTION.INPUT_PERF_SAMPLING,
-                actionSubject: ACTION_SUBJECT.EDITOR,
-                attributes: {
-                  time: diff,
-                  nodeSize: state.doc.nodeSize,
-                  ...nodesCount,
-                  participants: getParticipantsCount(state),
-                  objectId: (_getContextIdentifier3 = getContextIdentifier(state)) === null || _getContextIdentifier3 === void 0 ? void 0 : _getContextIdentifier3.objectId,
-                  severity
-                },
-                eventType: EVENT_TYPE.OPERATIONAL
-              };
-              dispatchAnalyticsEvent(payload);
-            }
-
-            experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.success(EditorExperience.typing, {
-              nodeSize: state.doc.nodeSize,
-              ...nodesCount,
-              participants: getParticipantsCount(state),
-              objectId: (_getContextIdentifier4 = getContextIdentifier(state)) === null || _getContextIdentifier4 === void 0 ? void 0 : _getContextIdentifier4.objectId,
-              time: diff,
-              severity
-            });
-          }
+          (_inputLatencyTracker2 = inputLatencyTracker) === null || _inputLatencyTracker2 === void 0 ? void 0 : _inputLatencyTracker2.end();
         });
         return false;
       },
@@ -160,6 +107,116 @@ export default ((dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, u
         return {};
       }
 
+      const experienceStore = ufo ? ExperienceStore.getInstance(view) : undefined;
+
+      if (inputTracking !== null && inputTracking !== void 0 && inputTracking.enabled) {
+        inputLatencyTracker = new InputLatencyTracker({
+          samplingRate,
+          slowThreshold,
+          normalThreshold: severityThresholdNormal,
+          degradedThreshold: severityThresholdDegraded,
+          onSampleStart: () => {
+            experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.start(EditorExperience.typing);
+          },
+          onSampleEnd: (time, {
+            isSlow,
+            severity
+          }) => {
+            var _getContextIdentifier2;
+
+            const {
+              state
+            } = view;
+            const 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, {
+              nodeSize: state.doc.nodeSize,
+              ...nodesCount,
+              participants: getParticipantsCount(state),
+              objectId: (_getContextIdentifier2 = getContextIdentifier(state)) === null || _getContextIdentifier2 === void 0 ? void 0 : _getContextIdentifier2.objectId,
+              time,
+              severity: shouldTrackSeverity ? severity : undefined
+            });
+          },
+          dispatchSample: (time, severity) => {
+            var _getContextIdentifier3;
+
+            const {
+              state
+            } = view;
+            const nodesCount = getNodeCount(state);
+            const samplePayload = {
+              action: ACTION.INPUT_PERF_SAMPLING,
+              actionSubject: ACTION_SUBJECT.EDITOR,
+              attributes: {
+                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: ({
+            mean,
+            median,
+            sampleSize
+          }, severity) => {
+            var _getContextIdentifier4;
+
+            const {
+              state
+            } = view;
+            const nodeCount = getNodeCount(state);
+            const averagePayload = {
+              action: ACTION.INPUT_PERF_SAMPLING_AVG,
+              actionSubject: ACTION_SUBJECT.EDITOR,
+              attributes: {
+                mean,
+                median,
+                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: time => {
+            var _getContextIdentifier5;
+
+            const {
+              state
+            } = view;
+            const nodesCount = getNodeCount(state);
+            dispatchAnalyticsEvent({
+              action: ACTION.SLOW_INPUT,
+              actionSubject: ACTION_SUBJECT.EDITOR,
+              attributes: {
+                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
+            });
+          }
+        });
+      }
+
       let observer;
 
       try {
@@ -172,7 +229,7 @@ export default ((dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, u
             } = perfEntries[i];
 
             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 +241,10 @@ export default ((dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, u
 
       return {
         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/es2019/plugins/base/utils/input-latency-tracking.js

@@ -0,0 +1,128 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { getTimeSince } from '../../../utils/performance/get-performance-timing';
+import { getAnalyticsEventSeverity } from '@atlaskit/editor-common/utils';
+export default class InputLatencyTracker {
+  constructor({
+    samplingRate,
+    slowThreshold,
+    normalThreshold,
+    degradedThreshold,
+    dispatchAverage,
+    dispatchSample,
+    onSampleStart,
+    onSampleEnd,
+    onSlowInput
+  }) {
+    _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;
+  }
+
+  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);
+    }
+  }
+
+  end() {
+    if (this.currentStart === null) {
+      return;
+    }
+
+    let isSlow = false;
+    const 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,
+        severity: this.severity(time)
+      });
+    }
+  }
+
+  flush() {
+    if (this.samples.length === 0) {
+      return;
+    }
+
+    this.dispatch();
+    this.samples = [];
+    this.total = 0;
+  }
+
+  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
+
+    const median = this.getMedian();
+    (_this$dispatchAverage = this.dispatchAverage) === null || _this$dispatchAverage === void 0 ? void 0 : _this$dispatchAverage.call(this, {
+      mean: this.getMean(),
+      median,
+      sampleSize: this.samples.length
+    }, this.severity(median));
+  }
+
+  push(latency) {
+    this.samples.push(latency);
+    this.total += latency;
+  }
+
+  severity(time) {
+    return getAnalyticsEventSeverity(time, this.normalThreshold, this.degradedThreshold);
+  }
+
+  getLast() {
+    return this.samples[this.samples.length - 1];
+  }
+
+  getMean() {
+    return this.total / this.samples.length;
+  }
+
+  getMedian() {
+    if (this.samples.length === 1) {
+      return this.samples[0];
+    }
+
+    this.samples.sort((a, b) => a - b);
+    const middle = (this.samples.length + 1) / 2;
+    const floorMiddle = Math.floor(middle);
+    const remainder = middle % floorMiddle;
+
+    if (remainder === 0) {
+      return this.samples[middle - 1];
+    }
+
+    const left = this.samples[floorMiddle - 1];
+    const right = this.samples[floorMiddle];
+    return (left + right) / 2;
+  }
+
+}

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

@@ -3,6 +3,7 @@ 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';
+import { token } from '@atlaskit/tokens';
 export const smartCardStyles = css`
   .${SmartCardSharedCssClassName.INLINE_CARD_CONTAINER} {
     max-width: calc(100% - 20px);
@@ -32,7 +33,8 @@ export const smartCardStyles = css`
 
     &.danger {
       .${SmartCardSharedCssClassName.LOADER_WRAPPER} > a {
-        box-shadow: 0 0 0 1px ${akEditorDeleteBorder};
+        box-shadow: 0 0 0 1px
+          ${token('color.border.danger', akEditorDeleteBorder)};
         /* EDM-1717: box-shadow Safari fix start */
         z-index: 2;
         /* EDM-1717: box-shadow Safari fix end */
@@ -56,7 +58,8 @@ export const smartCardStyles = css`
 
     &.danger {
       .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
-        box-shadow: 0 0 0 1px ${akEditorDeleteBorder} !important;
+        box-shadow: 0 0 0 1px
+          ${token('color.border.danger', akEditorDeleteBorder)} !important;
       }
     }
   }
@@ -82,12 +85,13 @@ export const smartCardStyles = css`
 
     &.danger {
       .media-card-frame::after {
-        box-shadow: 0 0 0 1px ${akEditorDeleteBorder} !important;
-        background: ${akEditorDeleteBackground} !important;
+        box-shadow: 0 0 0 1px
+          ${token('color.border.danger', akEditorDeleteBorder)} !important;
+        background: ${token('color.background.danger', akEditorDeleteBackground)} !important;
       }
       .richMedia-resize-handle-right::after,
       .richMedia-resize-handle-left::after {
-        background: ${akEditorDeleteBorder};
+        background: ${token('color.border.danger', akEditorDeleteBorder)};
       }
     }
   }

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

@@ -2,6 +2,7 @@ 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 const highlightingCodeBlockStyles = props => css`
@@ -132,15 +133,16 @@ export const highlightingCodeBlockStyles = props => css`
 
   /* Danger when top level node */
   .ProseMirror .danger.code-block {
-    box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
+    box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
+      ${token('color.border.danger', akEditorDeleteBorder)};
 
     .${codeBlockClassNames.gutter} {
       background-color: ${colors.R75};
-      color: ${akEditorDeleteIconColor};
+      color: ${token('color.text.danger', akEditorDeleteIconColor)};
     }
 
     .${codeBlockClassNames.content} {
-      background-color: ${akEditorDeleteBackground};
+      background-color: ${token('color.background.danger', akEditorDeleteBackground)};
     }
   }
 
@@ -148,7 +150,7 @@ export const highlightingCodeBlockStyles = props => css`
   .ProseMirror .danger .code-block {
     .${codeBlockClassNames.gutter} {
       background-color: rgba(255, 143, 115, 0.5);
-      color: ${akEditorDeleteIconColor};
+      color: ${token('color.text.danger', akEditorDeleteIconColor)};
     }
 
     .${codeBlockClassNames.content} {
@@ -247,15 +249,16 @@ export const codeBlockStyles = props => css`
 
   /* Danger when top level node */
   .ProseMirror .danger.code-block {
-    box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
+    box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
+      ${token('color.border.danger', akEditorDeleteBorder)};
 
     .${codeBlockClassNames.gutter} {
       background-color: ${colors.R75};
-      color: ${akEditorDeleteIconColor};
+      color: ${token('color.text.danger', akEditorDeleteIconColor)};
     }
 
     .${codeBlockClassNames.content} {
-      background-color: ${akEditorDeleteBackground};
+      background-color: ${token('color.background.danger', akEditorDeleteBackground)};
     }
   }
 
@@ -263,7 +266,7 @@ export const codeBlockStyles = props => css`
   .ProseMirror .danger .code-block {
     .${codeBlockClassNames.gutter} {
       background-color: rgba(255, 143, 115, 0.5);
-      color: ${akEditorDeleteIconColor};
+      color: ${token('color.text.danger', akEditorDeleteIconColor)};
     }
 
     .${codeBlockClassNames.content} {

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

@@ -12,14 +12,19 @@ export const TELEPOINTER_DIM_CLASS = 'telepointer-dim';
  * Returns position where it's possible to place a decoration.
  */
 
-const getValidPos = (tr, pos) => {
-  const resolvedPos = tr.doc.resolve(pos);
-  const 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 const getValidPos = (tr, pos) => {
+  const endOfDocPos = tr.doc.nodeSize - 2;
 
-  const forwardSelection = Selection.findFrom(resolvedPos, 1, true);
-  return backwardSelection ? backwardSelection.from : forwardSelection ? forwardSelection.from : pos;
-};
+  if (pos <= endOfDocPos) {
+    const resolvedPos = tr.doc.resolve(pos);
+    const backwardSelection = Selection.findFrom(resolvedPos, -1, true); // if there's no correct cursor position before the `pos`, we try to find it after the `pos`
+
+    const forwardSelection = Selection.findFrom(resolvedPos, 1, true);
+    return backwardSelection ? backwardSelection.from : forwardSelection ? forwardSelection.from : pos;
+  }
 
+  return endOfDocPos;
+};
 export class PluginState {
   // eslint-disable-next-line no-console
   get decorations() {
@@ -100,12 +105,22 @@ export class PluginState {
           remove = remove.concat(oldPointers);
         }
 
+        const endOfDocPos = tr.doc.nodeSize - 2;
         const {
           anchor,
           head
         } = telepointerData.selection;
-        const rawFrom = anchor < head ? anchor : head;
-        const rawTo = anchor >= head ? anchor : head;
+        let rawFrom = anchor < head ? anchor : head;
+        let rawTo = anchor >= head ? anchor : head;
+
+        if (rawFrom > endOfDocPos) {
+          rawFrom = endOfDocPos;
+        }
+
+        if (rawTo > endOfDocPos) {
+          rawTo = endOfDocPos;
+        }
+
         const isSelection = rawTo - rawFrom > 0;
         let from = 1;
         let to = 1;

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

@@ -1,5 +1,6 @@
 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 const dateStyles = css`
   .${DateSharedCssClassName.DATE_CONTAINER} {
@@ -19,7 +20,8 @@ export const dateStyles = css`
     .${DateSharedCssClassName.DATE_CONTAINER}.${akEditorSelectedNodeClassName}
       .${DateSharedCssClassName.DATE_WRAPPER}
       > span {
-      box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
+      box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
+        ${token('color.border.danger', akEditorDeleteBorder)};
     }
   }
 `;