@atlaskit/editor-core 165.0.0 → 166.0.2

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

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

@@ -5,14 +5,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 const emojiToTypeaheadItem = (emoji, emojiProvider) => ({
   title: emoji.shortName || '',
@@ -181,12 +180,7 @@ const emojiPlugin = options => {
     pmPlugins() {
       return [{
         name: 'emoji',
-        plugin: ({
-          providerFactory,
-          dispatch,
-          portalProviderAPI,
-          eventDispatcher
-        }) => emojiPluginFactory(dispatch, providerFactory, portalProviderAPI, eventDispatcher, options)
+        plugin: pmPluginFactoryParams => createEmojiPlugin(pmPluginFactoryParams)
       }, {
         name: 'emojiAsciiInputRule',
         plugin: ({
@@ -271,7 +265,7 @@ export const 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: {
@@ -294,14 +288,14 @@ export function emojiPluginFactory(dispatch, providerFactory, portalProviderAPI,
             newPluginState = { ...pluginState,
               emojiProvider: params.provider
             };
-            dispatch(emojiPluginKey, newPluginState);
+            pmPluginFactoryParams.dispatch(emojiPluginKey, newPluginState);
             return newPluginState;
 
           case ACTIONS.SET_ASCII_MAP:
             newPluginState = { ...pluginState,
               asciiMap: params.asciiMap
             };
-            dispatch(emojiPluginKey, newPluginState);
+            pmPluginFactoryParams.dispatch(emojiPluginKey, newPluginState);
             return newPluginState;
         }
 
@@ -311,12 +305,13 @@ export function emojiPluginFactory(dispatch, providerFactory, portalProviderAPI,
     },
     props: {
       nodeViews: {
-        emoji(node, view, getPos) {
-          const featureFlags = getFeatureFlags(view.state);
-          const createEmojiNodeView = featureFlags !== null && featureFlags !== void 0 && featureFlags.nextEmojiNodeView ? emojiNodeViewNext(providerFactory, options) : emojiNodeView(portalProviderAPI, eventDispatcher, providerFactory, options);
-          return createEmojiNodeView(node, view, getPos);
-        }
-
+        emoji: getInlineNodeViewProducer({
+          pmPluginFactoryParams,
+          Component: EmojiNodeView,
+          extraComponentProps: {
+            providerFactory: pmPluginFactoryParams.providerFactory
+          }
+        })
       }
     },
 
@@ -340,11 +335,11 @@ export function emojiPluginFactory(dispatch, providerFactory, portalProviderAPI,
         return;
       };
 
-      providerFactory.subscribe('emojiProvider', providerHandler);
+      pmPluginFactoryParams.providerFactory.subscribe('emojiProvider', providerHandler);
       return {
         destroy() {
-          if (providerFactory) {
-            providerFactory.unsubscribe('emojiProvider', providerHandler);
+          if (pmPluginFactoryParams.providerFactory) {
+            pmPluginFactoryParams.providerFactory.unsubscribe('emojiProvider', providerHandler);
           }
         }
 

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

@@ -1,34 +1,15 @@
 import React from 'react';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
 import Emoji from '../ui/Emoji';
-import { ReactNodeView } from '../../../nodeviews';
-export class EmojiNodeView extends ReactNodeView {
-  createDomRef() {
-    return super.createDomRef();
-  }
-
-  render(props) {
-    const {
-      providerFactory,
-      options
-    } = props;
-    const {
-      shortName,
-      id,
-      text
-    } = this.node.attrs;
-    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);
-  }
-
-}
-export default function emojiNodeView(portalProviderAPI, eventDispatcher, providerFactory, options) {
-  return (node, view, getPos) => new EmojiNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {
-    providerFactory,
-    options
-  }).init();
+export function EmojiNodeView(props) {
+  const {
+    shortName,
+    id,
+    text
+  } = props.node.attrs;
+  return /*#__PURE__*/React.createElement(Emoji, {
+    providers: props.providerFactory,
+    id: id,
+    shortName: shortName,
+    fallback: text
+  });
 }

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

@@ -1,8 +1,6 @@
 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';
+import { SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const emojiStyles = css`
   .${EmojiSharedCssClassName.EMOJI_CONTAINER} {
     display: inline-block;
@@ -24,83 +22,4 @@ export const emojiStyles = css`
       }
     }
   }
-`;
-const grid = gridSize() / 2;
-const fontSize = fontSizeSmall();
-const lineHeight = 4 * grid / fontSize;
-const maxWidth = 105 * grid; // ~420px
-
-const leftAndRightTextPadding = 2 * grid;
-const topAndBottomPadding = grid / 4;
-const marginDistance = 2 * grid;
-export const emojiStylesNext = css`
-  .editor-emoji {
-    position: relative;
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    background-repeat: none;
-    background-size: contain;
-    cursor: pointer;
-    vertical-align: middle;
-
-    &.editor-emoji-loading {
-      border-radius: ${borderRadius()}px;
-      background: ${N20};
-    }
-
-    &.editor-emoji-fallback {
-      display: inline;
-      background: transparent;
-      vertical-align: baseline;
-    }
-
-    &.ProseMirror-selectednode:empty {
-      outline: none;
-    }
-
-    &:not(.editor-emoji-fallback) {
-      font-size: 0px;
-    }
-
-    &:not(.editor-emoji-fallback)::before {
-      content: attr(data-emoji-shortname);
-      display: block;
-      box-sizing: border-box;
-      width: auto;
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      transform: translate(-50%, ${marginDistance}px);
-
-      // packages/css-packs/reduced-ui-pack/src/tooltip.js:25
-      color: ${N0};
-      background-color: ${N900};
-      font-size: ${relativeFontSizeToBase16(fontSize)};
-      line-height: ${lineHeight};
-      max-width: ${maxWidth}px;
-      border-radius: ${borderRadius()}px;
-      overflow: hidden;
-      padding: ${topAndBottomPadding}px ${leftAndRightTextPadding}px;
-      pointer-events: none;
-      text-decoration: none;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      z-index: 10000;
-
-      opacity: 0; // invisible by default
-      transition: opacity 0.35s; // (durationStep * 14)
-    }
-
-    &:not(.editor-emoji-fallback):hover::before {
-      opacity: 1;
-      transition: opacity 0s 0.35s; // (durationStep * 14)
-    }
-
-    &.${akEditorSelectedNodeClassName} {
-      z-index: 2;
-      border-radius: 2px;
-      ${getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow])}
-    }
-  }
 `;

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

@@ -19,10 +19,10 @@ const EXPAND_ICON_COLOR = props => css`
 `;
 
 const ACTIVE_STATE_BACKGROUND_COLOR = themed({
-  dark: `#0C294F`
+  dark: `#0C294F4B`
 });
 const ACTIVE_STATE_BORDER = themed({
-  dark: `1px solid #4794ff`
+  dark: `1px solid #4794ff4B`
 });
 const ACTIVE_STATE_BORDER_RADIUS = themed({
   dark: '3px'

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

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { blockNodesVerticalMargin, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import { token } from '@atlaskit/tokens';
 export const extensionStyles = css`
   .extensionView-content-wrap,
   .bodiedExtensionView-content-wrap {
@@ -20,8 +21,9 @@ export const extensionStyles = css`
     }
 
     &.danger > span > .extension-container {
-      box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
-      background-color: ${akEditorDeleteBackground};
+      box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
+        ${token('color.border.danger', akEditorDeleteBorder)};
+      background-color: ${token('color.background.danger', akEditorDeleteBackground)};
     }
 
     &.inline {