@atlaskit/editor-common 71.0.3 → 72.0.0

package/dist/cjs/utils/track-unsupported-content.js

@@ -9,7 +9,7 @@ exports.trackUnsupportedContentTooltipDisplayedFor = exports.fireUnsupportedEven
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _analytics = require("./analytics");
+var _analytics = require("../analytics");
 
 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; }
 
@@ -80,8 +80,6 @@ var findAndTrackUnsupportedContentNodes = function findAndTrackUnsupportedConten
         var _ref = mark.attrs || {},
             originalValue = _ref.originalValue;
 
-        var sanitizedAttrs = sanitizeAttributes(originalValue.attrs) || {};
-
         var _ref2 = originalValue || {},
             type = _ref2.type;
 
@@ -90,21 +88,19 @@ var findAndTrackUnsupportedContentNodes = function findAndTrackUnsupportedConten
           ancestry: ancestorHierarchy,
           parentType: parentType,
           marks: [],
-          attrs: sanitizedAttrs || {}
+          attrs: originalValue.attrs || {}
         };
         fireUnsupportedEvent(dispatchAnalyticsEvent, _analytics.ACTION_SUBJECT_ID.UNSUPPORTED_MARK, unsupportedNode);
       } else if (mark.type === unsupportedNodeAttribute) {
         var _ref3 = mark.attrs || {},
             unsupported = _ref3.unsupported;
 
-        var _sanitizedAttrs = sanitizeAttributes(unsupported) || {};
-
         var _unsupportedNodeAttribute = {
           type: nodeType.name || '',
           ancestry: ancestorHierarchy,
           parentType: parentType,
           marks: [],
-          attrs: _sanitizedAttrs || {}
+          attrs: unsupported || {}
         };
         fireUnsupportedEvent(dispatchAnalyticsEvent, _analytics.ACTION_SUBJECT_ID.UNSUPPORTED_NODE_ATTRIBUTE, _unsupportedNodeAttribute);
       }
@@ -128,8 +124,8 @@ var findAndTrackUnsupportedContentNodes = function findAndTrackUnsupportedConten
       type: type || '',
       ancestry: ancestorHierarchy,
       parentType: parentType,
-      marks: sanitizeMarks(marks) || [],
-      attrs: sanitizeAttributes(attrs) || {}
+      marks: marks || [],
+      attrs: attrs || {}
     };
     var actionSubjectId = nodeType === unsupportedInline ? _analytics.ACTION_SUBJECT_ID.UNSUPPORTED_INLINE : _analytics.ACTION_SUBJECT_ID.UNSUPPORTED_BLOCK;
     fireUnsupportedEvent(dispatchAnalyticsEvent, actionSubjectId, unsupportedNode);
@@ -143,22 +139,25 @@ var findAndTrackUnsupportedContentNodes = function findAndTrackUnsupportedConten
 
 exports.findAndTrackUnsupportedContentNodes = findAndTrackUnsupportedContentNodes;
 
-var fireUnsupportedEvent = function fireUnsupportedEvent(dispatchAnalyticsEvent, actionSubjectId) {
-  var unsupportedNode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var errorCode = arguments.length > 3 ? arguments[3] : undefined;
-  var attrs = {
-    unsupportedNode: unsupportedNode
+var fireUnsupportedEvent = function fireUnsupportedEvent(dispatchAnalyticsEvent, actionSubjectId, unsupportedNode, errorCode) {
+  var sanitizedAttrs = sanitizeAttributes(unsupportedNode.attrs);
+  var sanitizedMarks = sanitizeMarks(unsupportedNode.marks);
+  var sanitizedUnsupportedNode = {
+    type: unsupportedNode.type,
+    ancestry: unsupportedNode.ancestry,
+    parentType: unsupportedNode.parentType,
+    attrs: sanitizedAttrs,
+    marks: sanitizedMarks
   };
-
-  if (errorCode) {
-    attrs.errorCode = errorCode;
-  }
-
   var payload = {
     action: _analytics.ACTION.UNSUPPORTED_CONTENT_ENCOUNTERED,
     actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
     actionSubjectId: actionSubjectId,
-    attributes: attrs,
+    attributes: _objectSpread({
+      unsupportedNode: sanitizedUnsupportedNode
+    }, !!errorCode && {
+      errorCode: errorCode
+    }),
     eventType: _analytics.EVENT_TYPE.TRACK
   };
   dispatchAnalyticsEvent(payload);

package/dist/cjs/utils/validate-using-spec.js

@@ -8,7 +8,7 @@ exports.wrapWithUnsupported = wrapWithUnsupported;
 
 var _validator = require("@atlaskit/adf-utils/validator");
 
-var _analytics = require("./analytics");
+var _analytics = require("../analytics");
 
 var _trackUnsupportedContent = require("./track-unsupported-content");
 
@@ -120,7 +120,13 @@ function trackValidationError(dispatchAnalyticsEvent, error, entity) {
     return;
   }
 
-  (0, _trackUnsupportedContent.fireUnsupportedEvent)(dispatchAnalyticsEvent, _analytics.ACTION_SUBJECT_ID.UNSUPPORTED_ERROR, entity, error.code);
+  (0, _trackUnsupportedContent.fireUnsupportedEvent)(dispatchAnalyticsEvent, _analytics.ACTION_SUBJECT_ID.UNSUPPORTED_ERROR, {
+    type: entity.type || '',
+    ancestry: entity.ancestorHierarchy || '',
+    parentType: entity.parentType || '',
+    marks: entity.marks || [],
+    attrs: entity.attrs || {}
+  }, error.code);
 }
 
 var validateADFEntity = function validateADFEntity(schema, node, dispatchAnalyticsEvent) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "71.0.3",
+	"version": "72.0.0",
 	"sideEffects": false
 }

package/dist/es2019/analytics/types/enums.js

@@ -99,7 +99,7 @@ export let ACTION;
   ACTION["TYPING_FINISHED"] = "typingFinished";
   ACTION["TYPING_STARTED"] = "typingStarted";
   ACTION["UNLINK"] = "unlinked";
-  ACTION["UNSUPPORTED_CONTENT_ENCOUNTERED"] = "unsupportedContentEncountered";
+  ACTION["UNSUPPORTED_CONTENT_ENCOUNTERED"] = "unsupportedContentEncounteredV2";
   ACTION["UPDATED"] = "updated";
   ACTION["UPDATED_FRAGMENT_MARK_NAME"] = "updatedFragmentMarkName";
   ACTION["UPDATED_SOURCE"] = "updatedSource";
@@ -116,6 +116,16 @@ export let ACTION;
   ACTION["UFO_SESSION_COMPLETE"] = "ufoSessionComplete";
   ACTION["INVALID_PROSEMIRROR_DOCUMENT"] = "invalidProsemirrorDocument";
   ACTION["DOCUMENT_PROCESSING_ERROR"] = "documentProcessingError";
+  ACTION["RENDERER_TTI"] = "tti";
+  ACTION["CRASHED"] = "unhandledErrorCaught";
+  ACTION["SELECT_ALL_CAUGHT"] = "selectAllCaught";
+  ACTION["SELECT_ALL_ESCAPED"] = "selectAllEscaped";
+  ACTION["SORT_COLUMN"] = "sortedColumn";
+  ACTION["SORT_COLUMN_NOT_ALLOWED"] = "sortColumnNotAllowed";
+  ACTION["CREATE_NOT_ALLOWED"] = "createNotAllowed";
+  ACTION["UNSUPPORTED_CONTENT_LEVELS_TRACKING_SUCCEEDED"] = "unsupportedContentLevelsTrackingSucceeded";
+  ACTION["UNSUPPORTED_CONTENT_LEVELS_TRACKING_ERRORED"] = "unsupportedContentLevelsTrackingErrored";
+  ACTION["UNSUPPORTED_TOOLTIP_VIEWED"] = "viewed";
 })(ACTION || (ACTION = {}));
 
 export let INPUT_METHOD;
@@ -202,6 +212,10 @@ export let ACTION_SUBJECT;
   ACTION_SUBJECT["CREATE_LINK_INLINE_DIALOG"] = "createLinkInlineDialog";
   ACTION_SUBJECT["CODE_BLOCK"] = "codeBlock";
   ACTION_SUBJECT["REACT_EDITOR_VIEW"] = "reactEditorView";
+  ACTION_SUBJECT["RENDERER"] = "renderer";
+  ACTION_SUBJECT["ANCHOR_LINK"] = "anchorLink";
+  ACTION_SUBJECT["LINK"] = "link";
+  ACTION_SUBJECT["TOOLTIP"] = "tooltip";
 })(ACTION_SUBJECT || (ACTION_SUBJECT = {}));
 
 export let ACTION_SUBJECT_ID;
@@ -319,9 +333,14 @@ export let ACTION_SUBJECT_ID;
   ACTION_SUBJECT_ID["TYPEAHEAD_QUICK_INSERT"] = "quickInsertTypeAhead";
   ACTION_SUBJECT_ID["UNKNOWN_NODE"] = "unknownNode";
   ACTION_SUBJECT_ID["UNLINK"] = "unlink";
+  ACTION_SUBJECT_ID["HEADING_ANCHOR_LINK"] = "headingAnchorLink";
+  ACTION_SUBJECT_ID["UNSUPPORTED_ERROR"] = "unsupportedUnhandled";
+  ACTION_SUBJECT_ID["UNSUPPORTED_NODE_ATTRIBUTE"] = "unsupportedNodeAttribute";
   ACTION_SUBJECT_ID["UNSUPPORTED_BLOCK"] = "unsupportedBlock";
   ACTION_SUBJECT_ID["UNSUPPORTED_INLINE"] = "unsupportedInline";
   ACTION_SUBJECT_ID["UNSUPPORTED_MARK"] = "unsupportedMark";
+  ACTION_SUBJECT_ID["ON_UNSUPPORTED_INLINE"] = "onUnsupportedInline";
+  ACTION_SUBJECT_ID["ON_UNSUPPORTED_BLOCK"] = "onUnsupportedBlock";
 })(ACTION_SUBJECT_ID || (ACTION_SUBJECT_ID = {}));
 
 export let FLOATING_CONTROLS_TITLE;

package/dist/es2019/i18n/index.js

@@ -1,15 +1,16 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
- * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ * ED-16073:
+ * This was manually updated since the original `@atlaskit/i18n-tools` has been deprecated
  */
 export { default as zh } from './zh';
 export { default as zh_TW } from './zh_TW';
 export { default as cs } from './cs';
 export { default as da } from './da';
 export { default as nl } from './nl';
-export { default as et } from './et';
+export { default as en } from './en';
+export { default as en_GB } from './en_GB';
 export { default as fi } from './fi';
 export { default as fr } from './fr';
 export { default as de } from './de';

package/dist/es2019/i18n/languages.js

@@ -0,0 +1,34 @@
+/**
+ * NOTE:
+ *
+ * ED-16073:
+ * This was manually updated since the original `@atlaskit/i18n-tools` has been deprecated
+ */
+export default {
+  zh: 'Chinese (Simplified)',
+  zh_TW: 'Chinese (Traditional)',
+  cs: 'Czech',
+  da: 'Danish',
+  nl: 'Dutch',
+  en: 'English',
+  en_GB: 'English (United Kingdom)',
+  fi: 'Finnish',
+  fr: 'French',
+  de: 'German',
+  hu: 'Hungarian',
+  it: 'Italian',
+  ja: 'Japanese',
+  ko: 'Korean',
+  nb: 'Norwegian Bokmål',
+  pl: 'Polish',
+  pt_BR: 'Portuguese (Brazil)',
+  pt_PT: 'Portuguese (Portugal)',
+  ru: 'Russian',
+  sk: 'Slovak',
+  es: 'Spanish',
+  sv: 'Swedish',
+  th: 'Thai',
+  tr: 'Turkish',
+  uk: 'Ukrainian',
+  vi: 'Vietnamese'
+};

package/dist/es2019/keymaps/index.js

@@ -144,6 +144,53 @@ export function findShortcutByKeymap(keymap) {
 
   return keymap.windows;
 }
+export function getAriaKeyshortcuts(keymap) {
+  let keyShortcuts;
+
+  if (typeof keymap === 'string') {
+    keyShortcuts = keymap;
+  } else if (typeof keymap === 'object') {
+    keyShortcuts = keymap[browser.mac ? 'mac' : 'windows'];
+  }
+
+  if (keyShortcuts) {
+    return keyShortcuts.toLowerCase().split('-').map(modifier => {
+      switch (modifier) {
+        case 'cmd':
+          return 'Meta';
+
+        case 'ctrl':
+          return 'Control';
+
+        case 'alt':
+          return 'Alt';
+
+        case 'shift':
+          return 'Shift';
+
+        case 'enter':
+          return 'Enter';
+
+        case 'esc':
+          return 'Esc';
+
+        case 'tab':
+          return 'Tab';
+
+        case 'space':
+          return 'Space';
+
+        case 'backspace':
+          return 'Backspace';
+
+        default:
+          return modifier.split('').join(' ');
+      }
+    }).join('+');
+  } else {
+    return undefined;
+  }
+}
 const ALL = [toggleOrderedList, toggleBulletList, toggleBold, toggleItalic, toggleUnderline, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleCode, setNormalText, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleBlockQuote, insertNewLine, insertRule, splitCodeBlock, splitListItem, redo, undo, find, escape, enter, shiftEnter];
 export function makeKeymap(description, windows, mac, common) {
   return {

package/dist/es2019/styles/index.js

@@ -9,7 +9,7 @@ export { ruleSharedStyles } from './shared/rule';
 export { whitespaceSharedStyles } from './shared/whitespace';
 export { paragraphSharedStyles } from './shared/paragraph';
 export { linkSharedStyle } from './shared/link';
-export { listsSharedStyles, listPaddingLeftMarkerSpace } from './shared/lists';
+export { listsSharedStyles, listItemCounterPadding, getOrderedListInlineStyles } from './shared/lists';
 export { indentationSharedStyles } from './shared/indentation';
 export { blockMarksSharedStyles } from './shared/block-marks';
 export { codeMarkSharedStyles } from './shared/code-mark';

package/dist/es2019/styles/shared/annotation.js

@@ -15,14 +15,13 @@ const Y200a = 'rgba(255, 196, 0, 0.82)';
 const DY75a = 'rgba(111, 92, 37, 0.5)';
 const DY200 = '#82641c';
 export const AnnotationSharedCSSByState = props => ({
-  /* eslint-disable */
   focus: css`
     // Background is not coming through in confluence, suspecting to be caused by some specific combination of
     // emotion and token look up
 
     background: ${themed({
-    light: Y75,
-    dark: DY75
+    light: token('color.background.accent.yellow.subtler', Y75),
+    dark: token('color.background.accent.yellow.subtler', DY75)
   })(props)};
     border-bottom: 2px solid
       ${themed({
@@ -35,8 +34,8 @@ export const AnnotationSharedCSSByState = props => ({
   `,
   blur: css`
     background: ${themed({
-    light: Y75a,
-    dark: DY75a
+    light: token('color.background.accent.yellow.subtlest', Y75a),
+    dark: token('color.background.accent.yellow.subtlest', DY75a)
   })(props)};
     border-bottom: 2px solid
       ${themed({
@@ -45,8 +44,6 @@ export const AnnotationSharedCSSByState = props => ({
   })(props)};
     cursor: pointer;
   `
-  /* eslint-enable */
-
 });
 export const annotationSharedStyles = props => css`
   .ProseMirror {

package/dist/es2019/styles/shared/block-marks.js

@@ -6,7 +6,14 @@ export const blockMarksSharedStyles = css`
    */
   *:not(.fabric-editor-block-mark) >,
   /* For nested block marks apart from those with indentation mark */
-  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-of-type:not(.fabric-editor-indentation-mark),
+  *:not(.fabric-editor-block-mark) >
+    div.fabric-editor-block-mark:first-of-type
+    /* Do not remove the margin top for nodes inside indentation marks */
+      :not(.fabric-editor-indentation-mark)
+    /* Do not remove the margin top for nodes inside alignment marks */
+      :not(.fabric-editor-alignment),
+  // If first element inside a block node has alignment mark, then remove the margin-top
+  .fabric-editor-alignment:first-of-type:first-child,
   // If first document element has indentation mark remove margin-top
   .ProseMirror .fabric-editor-indentation-mark:first-of-type:first-child {
     p,

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

@@ -56,19 +56,20 @@ export const codeBlockSharedStyles = props => css`
       overflow-x: auto;
 
       background-image: ${overflowShadow({
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
   background: themed({
     light: token('color.background.neutral', N20),
     dark: token('color.background.neutral', DN50)
   })(props),
-  width: '8px'
+  leftCoverWidth: `${gridSize() * 3}px`
 })};
 
       background-repeat: no-repeat;
-      background-attachment: local, local, local, local, scroll, scroll;
-      background-size: 8px 100%, 8px 100%, 8px 100%, 8px 100%, 8px 100%,
-        8px 100%;
-      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 0 0;
+      background-attachment: local, local, local, local, scroll, scroll, scroll,
+        scroll;
+      background-size: ${gridSize() * 3}px 100%, ${gridSize() * 3}px 100%,
+        ${gridSize()}px 100%, ${gridSize()}px 100%, ${gridSize()}px 100%,
+        1px 100%, ${gridSize()}px 100%, 1px 100%;
+      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;
 
       /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */
       overflow-y: hidden;

package/dist/es2019/styles/shared/lists.js

@@ -1,14 +1,56 @@
 import { css } from '@emotion/react';
 import { bulletListSelector, orderedListSelector } from '@atlaskit/adf-schema';
 import browser from '../../utils/browser';
-export const listPaddingLeftMarkerSpace = 24;
+export const listItemCounterPadding = 24;
+var CSS_VAR_NAMES;
+
+(function (CSS_VAR_NAMES) {
+  CSS_VAR_NAMES["ITEM_COUNTER_PADDING"] = "--ed--list--item-counter--padding";
+})(CSS_VAR_NAMES || (CSS_VAR_NAMES = {}));
+
+const getItemCounterLeftPadding = itemCounterDigitsSize => {
+  // Previous padding-left was approximately 24px. We approximate that
+  // same value using "ch" units (which represent the width of a "0" digit
+  // character). We use "ch" so that this computed padding can now grow if
+  //  the font-size ever enlarges.
+  let paddingLeft = `2.385ch`;
+
+  if (itemCounterDigitsSize >= 3) {
+    // When there are 3 or more digits, we use a combination of "ch" units and
+    // pixel values so that while the computed padding grows if font-size ever
+    // enlarges, it doesn't over-scale with each digit (because of the fixed pixel
+    // portion of the computed value). This way, very large item counters will not
+    // become overly left-padded.
+    const fixedBasePx = 2;
+    paddingLeft = `calc(${itemCounterDigitsSize + 1}ch - ${fixedBasePx}px)`;
+  }
+
+  return paddingLeft;
+};
+
+const stringifyStyle = style => Object.entries(style).reduce((str, [key, value]) => `${str}${key}:${value};`, ``);
+
+export function getOrderedListInlineStyles(itemCounterDigitsSize, styleFormat) {
+  const style = {
+    [CSS_VAR_NAMES.ITEM_COUNTER_PADDING]: getItemCounterLeftPadding(itemCounterDigitsSize)
+  };
+
+  if (styleFormat === 'string') {
+    return stringifyStyle(style);
+  }
+
+  return style;
+}
 export const listsSharedStyles = css`
   /* =============== INDENTATION SPACING ========= */
 
   ul,
   ol {
     box-sizing: border-box;
-    padding-left: ${listPaddingLeftMarkerSpace}px;
+    padding-left: var(
+      ${CSS_VAR_NAMES.ITEM_COUNTER_PADDING},
+      ${listItemCounterPadding}px
+    );
 
     /*
     Firefox does not handle empty block element inside li tag.

package/dist/es2019/styles/shared/panel.js

@@ -1,5 +1,7 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css } from '@emotion/react';
 import { PanelType } from '@atlaskit/adf-schema';
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
 import { emojiImage, emojiSprite } from '@atlaskit/emoji';
@@ -16,9 +18,6 @@ const tokenPanelColor = {
   error: 'color.background.danger'
 };
 const lightPanelColor = {
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
-
-  /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
   info: colors.B50,
   note: colors.P50,
   tip: colors.G50,
@@ -88,8 +87,6 @@ export const darkPanelColors = {
   LightGray: '#5A6977',
   TextColor: '#D9DDE3'
 };
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
 const lightIconColor = {
   info: token('color.icon.information', colors.B400),
   note: token('color.icon.discovery', colors.P400),
@@ -111,13 +108,13 @@ const darkIconColor = {
 const panelEmojiSpriteVerticalAlignment = -(gridSize() * 3 - akEditorCustomIconSize) / 2;
 const panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1; // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
 
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+const panelDarkModeColors = [[colors.B50, darkPanelColors.B1200S], [colors.B75, darkPanelColors.B900], [colors.B100, darkPanelColors.B800S], [colors.N0, darkPanelColors.LightGray], [colors.N20, darkPanelColors.Gray], [colors.N60, darkPanelColors.DarkGray], [colors.T50, darkPanelColors.T1200S], [colors.T75, darkPanelColors.T900], [colors.T100, darkPanelColors.T900S], [colors.G50, darkPanelColors.G1200S], [colors.G75, darkPanelColors.G900], [colors.G200, darkPanelColors.G900S], [colors.Y50, darkPanelColors.Y1200S], [colors.Y75, darkPanelColors.Y900], [colors.Y200, darkPanelColors.Y800S], [colors.R50, darkPanelColors.R1200S], [colors.R75, darkPanelColors.R900], [colors.R100, darkPanelColors.R800S], [colors.P50, darkPanelColors.P1200S], [colors.P75, darkPanelColors.P900], [colors.P100, darkPanelColors.P800S]]; // used for custom panels
 
-const panelDarkModeColors = [[colors.B50, darkPanelColors.B1200S], [colors.B75, darkPanelColors.B900], [colors.B100, darkPanelColors.B800S], [colors.N0, darkPanelColors.LightGray], [colors.N20, darkPanelColors.Gray], [colors.N60, darkPanelColors.DarkGray], [colors.T50, darkPanelColors.T1200S], [colors.T75, darkPanelColors.T900], [colors.T100, darkPanelColors.T900S], [colors.G50, darkPanelColors.G1200S], [colors.G75, darkPanelColors.G900], [colors.G200, darkPanelColors.G900S], [colors.Y50, darkPanelColors.Y1200S], [colors.Y75, darkPanelColors.Y900], [colors.Y200, darkPanelColors.Y800S], [colors.R50, darkPanelColors.R1200S], [colors.R75, darkPanelColors.R900], [colors.R100, darkPanelColors.R800S], [colors.P50, darkPanelColors.P1200S], [colors.P75, darkPanelColors.P900], [colors.P100, darkPanelColors.P800S]];
 export const getPanelDarkColor = panelColor => {
   const colorObject = panelDarkModeColors.find(color => color[0] === panelColor || color[1] === panelColor);
   return colorObject ? colorObject[1] : darkPanelColors.B1200S;
-};
+}; // used for custom panels
+
 export const getPanelBackgroundDarkModeColors = panelDarkModeColors.map(([colorName, colorValue]) => getPanelDarkModeCSS(colorName, colorValue)).join('\n');
 export function getPanelDarkModeCSS(colorName, colorValue) {
   return `
@@ -183,10 +180,8 @@ export const getPanelTypeBackground = (panelType, props = {}) => {
   // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
 
   /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
-  const light = token(tokenPanelColor[panelType], lightPanelColor[panelType]);
+  const light = hexToEditorBackgroundPaletteColor(lightPanelColor[panelType]);
   const dark = token(tokenPanelColor[panelType], darkPanelColors[panelType]);
-  /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
-
   const background = themed({
     light,
     dark

package/dist/es2019/styles/shared/shadow.js

@@ -1,8 +1,8 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4116
 import { css } from '@emotion/react';
 import { akEditorShadowZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { shadowClassNames } from '../../ui/OverflowShadow';
 import { shadowObserverClassNames } from '../../ui/OverflowShadow/shadowObserver';
 const shadowWidth = 8;
@@ -41,7 +41,16 @@ const shadowSharedStyle = css`
   }
 
   & .${shadowClassNames.LEFT_SHADOW}::before {
-    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ${N40A} 100%);
+    background: linear-gradient(
+        to left,
+        transparent 0,
+        ${token('elevation.shadow.overflow.spread', N40A)} 100%
+      ),
+      linear-gradient(
+        to right,
+        ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0px,
+        transparent 1px
+      );
     top: 0px;
     left: 0;
     display: block;
@@ -49,14 +58,20 @@ const shadowSharedStyle = css`
 
   & .${shadowClassNames.RIGHT_SHADOW}::after {
     background: linear-gradient(
-      to right,
-      rgba(99, 114, 130, 0) 0,
-      ${N40A} 100%
-    );
+        to right,
+        transparent 0,
+        ${token('elevation.shadow.overflow.spread', N40A)} 100%
+      ),
+      linear-gradient(
+        to left,
+        ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0px,
+        transparent 1px
+      );
     left: calc(100% - ${shadowWidth}px);
     top: 0px;
     display: block;
   }
+
   & .${shadowObserverClassNames.SENTINEL_LEFT} {
     height: 100%;
     width: 0px;

package/dist/es2019/styles/shared/table.js

@@ -1,5 +1,4 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4118
 import { css } from '@emotion/react';
 import { tableCellContentDomSelector, tableCellSelector, tableHeaderSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
 import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, akEditorSelectedNodeClassName, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorWideLayoutWidth, getTableCellBackgroundDarkModeColors, overflowShadow } from '@atlaskit/editor-shared-styles';
@@ -158,7 +157,7 @@ const tableSharedStyle = props => css`
     light: token('color.background.neutral', 'rgb(235, 237, 240)'),
     dark: token('color.background.neutral', 'rgb(36, 47, 66)')
   })(props),
-  width: `${gridSize()}px`
+  leftCoverWidth: `${gridSize() * 3}px`
 })};
 
               background-color: ${themed({
@@ -181,7 +180,7 @@ const tableSharedStyle = props => css`
     light: token('color.background.neutral', 'rgb(235, 237, 240)'),
     dark: token('color.background.neutral', 'rgb(36, 47, 66)')
   })(props),
-  width: `${gridSize()}px`
+  leftCoverWidth: `${gridSize() * 3}px`
 })}!important;
 
               background-color: ${themed({

package/dist/es2019/types/next-editor-plugin.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/DropList/index.js

@@ -10,7 +10,7 @@ import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "71.0.3";
+const packageVersion = "72.0.0";
 const halfFocusRing = 1;
 const dropOffset = `0, ${gridSize()}px`;
 

package/dist/es2019/ui/Emoji/index.js

@@ -7,13 +7,16 @@ export default class EmojiNode extends PureComponent {
     super(props);
 
     _defineProperty(this, "renderWithProvider", providers => {
+      var _resourceConfig$optim;
+
       const {
         allowTextFallback,
         shortName,
         id,
         fallback,
         fitToHeight,
-        showTooltip
+        showTooltip,
+        resourceConfig
       } = this.props;
 
       if (allowTextFallback && !providers.emojiProvider) {
@@ -36,7 +39,13 @@ export default class EmojiNode extends PureComponent {
         },
         emojiProvider: providers.emojiProvider,
         showTooltip: showTooltip,
-        fitToHeight: fitToHeight
+        fitToHeight: fitToHeight,
+        optimistic: true,
+        optimisticImageURL: resourceConfig === null || resourceConfig === void 0 ? void 0 : (_resourceConfig$optim = resourceConfig.optimisticImageApi) === null || _resourceConfig$optim === void 0 ? void 0 : _resourceConfig$optim.getUrl({
+          id,
+          fallback,
+          shortName
+        })
       });
     });