@atlaskit/editor-common 70.3.0 → 71.0.1

package/dist/es2019/ui-react/with-react-editor-view-outer-listeners.js

@@ -16,7 +16,15 @@ class WithOutsideClick extends PureComponent {
 
       if (!domNode || evt.target instanceof Node && !domNode.contains(evt.target)) {
         if (this.props.handleClickOutside) {
-          this.props.handleClickOutside(evt);
+          var _this$props$editorVie;
+
+          this.props.handleClickOutside(evt); //When the menus are closed by clicking outside the focus is set on editor.
+
+          if (!((_this$props$editorVie = this.props.editorView) !== null && _this$props$editorVie !== void 0 && _this$props$editorVie.hasFocus())) {
+            var _this$props$editorVie2;
+
+            (_this$props$editorVie2 = this.props.editorView) === null || _this$props$editorVie2 === void 0 ? void 0 : _this$props$editorVie2.focus();
+          }
         }
       }
     });
@@ -27,21 +35,16 @@ class WithOutsideClick extends PureComponent {
       }
 
       if (evt.code === 'Escape' && this.props.handleEscapeKeydown) {
-        var _this$props$editorVie;
-
         evt.preventDefault();
         evt.stopPropagation();
-        this.props.handleEscapeKeydown(evt);
-
-        if (!((_this$props$editorVie = this.props.editorView) !== null && _this$props$editorVie !== void 0 && _this$props$editorVie.hasFocus())) {
-          var _this$props$editorVie2;
-
-          (_this$props$editorVie2 = this.props.editorView) === null || _this$props$editorVie2 === void 0 ? void 0 : _this$props$editorVie2.focus();
-        }
+        this.props.handleEscapeKeydown(evt); //on 'Esc', Focus is handled in 'handleEscapeKeydown'.
 
         return false;
       } else if (evt.code === 'Enter' && this.props.handleEnterKeydown) {
         this.props.handleEnterKeydown(evt);
+      } else if (evt.code === 'Tab' && this.props.handleEscapeKeydown && this.props.closeonTab) {
+        //The menus should be closed when the tab is pressed as it takes the focus out of the menu
+        this.props.handleEscapeKeydown(evt);
       }
     });
   }
@@ -54,7 +57,8 @@ class WithOutsideClick extends PureComponent {
     if (this.props.handleEscapeKeydown) {
       var _this$props$editorRef;
 
-      (((_this$props$editorRef = this.props.editorRef) === null || _this$props$editorRef === void 0 ? void 0 : _this$props$editorRef.current) || document).addEventListener('keydown', this.handleKeydown, false);
+      //Attached event to the menu so that 'ESC' events from the opened menu also will be handled.
+      (((_this$props$editorRef = this.props.editorRef) === null || _this$props$editorRef === void 0 ? void 0 : _this$props$editorRef.current) || this.props.targetRef || document).addEventListener('keydown', this.handleKeydown, false);
     }
   }
 
@@ -66,7 +70,7 @@ class WithOutsideClick extends PureComponent {
     if (this.props.handleEscapeKeydown) {
       var _this$props$editorRef2;
 
-      (((_this$props$editorRef2 = this.props.editorRef) === null || _this$props$editorRef2 === void 0 ? void 0 : _this$props$editorRef2.current) || document).removeEventListener('keydown', this.handleKeydown, false);
+      (((_this$props$editorRef2 = this.props.editorRef) === null || _this$props$editorRef2 === void 0 ? void 0 : _this$props$editorRef2.current) || this.props.targetRef || document).removeEventListener('keydown', this.handleKeydown, false);
     }
   }
 
@@ -85,6 +89,7 @@ export default function withReactEditorViewOuterListeners(Component) {
     handleClickOutside,
     handleEnterKeydown,
     handleEscapeKeydown,
+    closeonTab,
     ...props
   }) => {
     const isActiveComponent = hasIsOpen(props) ? props.isOpen : true;
@@ -94,10 +99,12 @@ export default function withReactEditorViewOuterListeners(Component) {
     }) => /*#__PURE__*/React.createElement(WithOutsideClick, {
       editorView: editorView,
       editorRef: editorRef,
+      targetRef: props.targetRef,
       isActiveComponent: isActiveComponent,
       handleClickOutside: handleClickOutside,
       handleEnterKeydown: handleEnterKeydown,
-      handleEscapeKeydown: handleEscapeKeydown
+      handleEscapeKeydown: handleEscapeKeydown,
+      closeonTab: closeonTab
     }, /*#__PURE__*/React.createElement(Component, props)));
   };
 }

package/dist/es2019/utils/index.js

@@ -13,7 +13,7 @@ export { walkUpTreeUntil, unwrap, removeNestedEmptyEls, containsClassName, close
 export { default as ADFTraversor } from './traversor';
 export { analyticsEventKey, getAnalyticsAppearance, getAnalyticsEventSeverity, SEVERITY, getUnsupportedContentLevelData, UNSUPPORTED_CONTENT_LEVEL_SEVERITY, UNSUPPORTED_CONTENT_LEVEL_SEVERITY_THRESHOLD_DEFAULTS } from './analytics';
 export { findAndTrackUnsupportedContentNodes } from './track-unsupported-content';
-export { measureRender } from './performance/measure-render';
+export { getDistortedDurationMonitor, measureRender } from './performance/measure-render';
 export { startMeasure, stopMeasure, clearMeasure } from './performance/measure';
 export { measureTTI, getTTISeverity, TTI_SEVERITY_THRESHOLD_DEFAULTS, TTI_FROM_INVOCATION_SEVERITY_THRESHOLD_DEFAULTS } from './performance/measure-tti';
 export { isPerformanceAPIAvailable, isPerformanceObserverAvailable } from './performance/is-performance-api-available';

package/dist/es2019/utils/performance/measure-render.js

@@ -1,4 +1,41 @@
 import { isPerformanceAPIAvailable } from './is-performance-api-available';
+/**
+ * Monitors if a pages enters a visibility state which will lead to
+ * distorted duration measurements (where the measurement uses the
+ * requestAnimationFrame api).
+ */
+
+export function getDistortedDurationMonitor() {
+  // If an editor is rendered when the document is not visible -- the callback passed to
+  // requestAnimationFrame will not fire until the document becomes visible again.
+  //
+  // For the purposes of using performance measurement -- this behaviour means the events
+  // which have been fired in the background are not useful -- and lead to other events
+  // being hard to draw conclusions from.
+  //
+  // To mitigate this -- we detect this state -- and fire a seperate callback when the
+  // measurement has occured when the render was in the backgroun
+  let distortedDuration = document.visibilityState !== 'visible';
+
+  function handleVisibilityChange() {
+    if (document.visibilityState !== 'visible') {
+      distortedDuration = true;
+    }
+  }
+
+  document.addEventListener('visibilitychange', handleVisibilityChange);
+  return {
+    distortedDuration,
+
+    /**
+     * Cleans up the document visibility event listener
+     */
+    cleanup() {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    }
+
+  };
+}
 /**
  * Measures time it takes to render a frame including -> style, paint, layout and composition.
  *
@@ -37,29 +74,12 @@ onMeasureComplete) {
   const startMark = `[START]: ${measureName}`;
   const endMark = `[END]: ${measureName}`;
   const startTime = performance.now();
-  performance.mark(startMark); // If an editor is rendered when the document is not visible -- the callback passed to
-  // requestAnimationFrame will not fire until the document becomes visible again.
-  //
-  // For the purposes of using performance measurement -- this behaviour means the events
-  // which have been fired in the background are not useful -- and lead to other events
-  // being hard to draw conclusions from.
-  //
-  // To mitigate this -- we detect this state -- and fire a seperate callback when the
-  // measurement has occured when the render was in the backgroun
-
-  let distortedDuration = document.visibilityState !== 'visible';
-
-  function handleVisibilityChange() {
-    if (document.visibilityState !== 'visible') {
-      distortedDuration = true;
-    }
-  }
-
-  document.addEventListener('visibilitychange', handleVisibilityChange);
+  performance.mark(startMark);
+  let distortedDurationMonitor = getDistortedDurationMonitor();
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
       performance.mark(endMark);
-      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      distortedDurationMonitor.cleanup();
       const duration = performance.now() - startTime;
 
       try {
@@ -70,20 +90,20 @@ onMeasureComplete) {
           onMeasureComplete({
             duration,
             startTime,
-            distortedDuration
+            distortedDuration: distortedDurationMonitor.distortedDuration
           });
         } else {
           onMeasureComplete({
             duration: entry.duration,
             startTime: entry.startTime,
-            distortedDuration
+            distortedDuration: distortedDurationMonitor.distortedDuration
           });
         }
       } catch (e) {
         onMeasureComplete({
           duration,
           startTime,
-          distortedDuration
+          distortedDuration: distortedDurationMonitor.distortedDuration
         });
       }
 

package/dist/es2019/version.json

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

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

@@ -92,6 +92,7 @@ export var ACTION;
   ACTION["DEDUPE_MARKS_TRANSFORMED"] = "dedupeMarksTransformed";
   ACTION["NODES_MISSING_CONTENT_TRANSFORMED"] = "nodesMissingContentTransformed";
   ACTION["INDENTATION_MARKS_TRANSFORMED"] = "indentationMarksTransformed";
+  ACTION["INVALID_MEDIA_CONTENT_TRANSFORMED"] = "invalidMediaContentTransformed";
   ACTION["TOGGLE_EXPAND"] = "toggleExpand";
   ACTION["TRANSACTION_DISPATCHED"] = "transactionDispatched";
   ACTION["TRANSACTION_MUTATED_AFTER_DISPATCH"] = "transactionMutatedAfterDispatched";

package/dist/esm/keymaps/index.js

@@ -6,6 +6,7 @@ var _templateObject;
 import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { browser } from '../utils';
 export var addAltText = makeKeyMapWithCommon('Add Alt Text', 'Mod-Alt-y');
 export var toggleBold = makeKeyMapWithCommon('Bold', 'Mod-b');
@@ -69,18 +70,14 @@ export var paste = makeKeyMapWithCommon('Paste', 'Mod-v');
 export var altPaste = makeKeyMapWithCommon('Paste', 'Mod-Shift-v');
 export var find = makeKeyMapWithCommon('Find', 'Mod-f');
 export var alignLeft = makeKeyMapWithCommon('Align Left', 'Mod-Shift-l');
-export var alignRight = makeKeyMapWithCommon('Align Right', 'Mod-Shift-r');
 var arrowKeysMap = {
   // for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
   ARROWLEFT: "\u2190",
   ARROWRIGHT: "\u2192",
   ARROWUP: "\u2191",
   ARROWDOWN: "\u2193"
-}; // TOOD: https://product-fabric.atlassian.net/browse/DSP-4460
-
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
-var tooltipShortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 0 2px;\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: tooltip-shortcut;\n"])), N400);
+};
+var tooltipShortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 0 2px;\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: tooltip-shortcut;\n"])), token('color.background.inverse.subtle', N400));
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 function formatShortcut(keymap) {

package/dist/esm/messages/insert-block.js

@@ -20,13 +20,18 @@ export var toolbarInsertBlockMessages = defineMessages({
     defaultMessage: 'Insert a link',
     description: 'Insert a hyperlink'
   },
-  filesAndImages: {
-    id: 'fabric.editor.filesAndImages',
-    defaultMessage: 'Files & images',
-    description: 'Insert one or more files or images'
-  },
-  filesAndImagesDescription: {
-    id: 'fabric.editor.filesAndImages.description',
+  mediaFiles: {
+    id: 'fabric.editor.mediaFiles',
+    defaultMessage: 'Image, video, or file',
+    description: 'Insert one or more files, videos or images'
+  },
+  addMediaFiles: {
+    id: 'fabric.editor.addMediaFiles',
+    defaultMessage: 'Add image, video, or file',
+    description: 'Insert one or more files, videos or images'
+  },
+  mediaFilesDescription: {
+    id: 'fabric.editor.mediaFiles.description',
     defaultMessage: 'Add images and other files to your page',
     description: 'Insert one or more files or images'
   },

package/dist/esm/panel.js

@@ -1 +1 @@
-export { getPanelTypeBackground, darkPanelColors, getPanelDarkColor, panelSharedStyles, panelSharedStylesWithoutPrefix, PanelSharedCssClassName, PanelSharedSelectors, getPanelBackgroundDarkModeColors } from './styles/shared/panel';
+export { getPanelTypeBackground, getPanelTypeBackgroundNoTokens, darkPanelColors, getPanelDarkColor, panelSharedStyles, panelSharedStylesWithoutPrefix, PanelSharedCssClassName, PanelSharedSelectors, getPanelBackgroundDarkModeColors } from './styles/shared/panel';

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

@@ -12,23 +12,23 @@ export var CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTAINER: 'code-block',
   CODEBLOCK_START: 'code-block--start',
   CODEBLOCK_END: 'code-block--end',
+  CODEBLOCK_CONTENT_WRAPPER: 'code-block-content-wrapper',
   CODEBLOCK_LINE_NUMBER_GUTTER: 'line-number-gutter',
   CODEBLOCK_CONTENT: 'code-content',
   DS_CODEBLOCK: '[data-ds--code--code-block]'
 };
 export var codeBlockSharedStyles = function codeBlockSharedStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", "px;\n    counter-reset: line;\n    display: flex;\n    overflow-x: auto;\n\n    background-image: ", ";\n\n    --ds--code--bg-color: transparent;\n\n    background-repeat: no-repeat;\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    margin: ", " 0 0 0;\n    min-width: ", "px;\n    cursor: pointer;\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      top: 0px;\n      left: 0px;\n    }\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      bottom: 0px;\n      right: 0px;\n    }\n\n    .", " {\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          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\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        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, themed({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    background-color: ", ";\n    border-radius: ", "px;\n    margin: ", " 0 0 0;\n    font-family: ", ";\n    min-width: ", "px;\n    cursor: pointer;\n\n    --ds--code--bg-color: transparent;\n\n    /* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n    white-space: normal;\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      top: 0px;\n      left: 0px;\n    }\n\n    .", " {\n      position: absolute;\n      visibility: hidden;\n      height: 1.5rem;\n      bottom: 0px;\n      right: 0px;\n    }\n\n    .", " {\n      background-color: ", ";\n      display: flex;\n      border-radius: ", "px;\n      width: 100%;\n      counter-reset: line;\n      overflow-x: auto;\n\n      background-image: ", ";\n\n      background-repeat: no-repeat;\n      background-attachment: local, local, local, local, scroll, scroll;\n      background-size: 8px 100%, 8px 100%, 8px 100%, 8px 100%, 8px 100%,\n        8px 100%;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 0 0;\n\n      /* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n      overflow-y: hidden;\n    }\n\n    .", " {\n      flex-shrink: 0;\n      text-align: right;\n      background-color: ", ";\n      padding: ", "px;\n      position: relative;\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          color: ", ";\n          font-size: ", ";\n          line-height: 1.5rem;\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        color: ", ";\n        border-radius: ", "px;\n        margin: ", "px;\n        white-space: pre;\n        font-size: ", ";\n        line-height: 1.5rem;\n      }\n    }\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, token('elevation.surface.raised', 'transparent'), borderRadius(), blockNodesVerticalMargin, akEditorCodeFontFamily, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, themed({
     light: token('color.background.neutral', N20),
     dark: token('color.background.neutral', DN50)
   })(props), borderRadius(), overflowShadow({
     // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     background: themed({
-      light: N20,
-      dark: DN50
+      light: token('color.background.neutral', N20),
+      dark: token('color.background.neutral', DN50)
     })(props),
     width: '8px'
-  }), akEditorCodeFontFamily, blockNodesVerticalMargin, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, themed({
+  }), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, themed({
     light: token('color.background.neutral', N30),
     dark: token('color.background.neutral', DN20)
   })(props), gridSize(), themed({

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

@@ -3,8 +3,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 var _templateObject, _templateObject2;
 
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4066
 import { css } from '@emotion/react';
 import { PanelType } from '@atlaskit/adf-schema';
 import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
@@ -13,7 +11,19 @@ import { emojiImage, emojiSprite } from '@atlaskit/emoji';
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+var tokenPanelColor = {
+  info: 'color.background.information',
+  note: 'color.background.discovery',
+  tip: 'color.background.success',
+  success: 'color.background.success',
+  warning: 'color.background.warning',
+  error: 'color.background.danger'
+};
 var 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,
@@ -23,7 +33,7 @@ var lightPanelColor = {
 };
 export var darkPanelColors = {
   // standard panels
-  info: '#0C294F',
+  info: "#0C294F",
   error: "#441C13",
   warning: "#413001",
   tip: "#052E21",
@@ -83,26 +93,31 @@ export var darkPanelColors = {
   LightGray: '#5A6977',
   TextColor: '#D9DDE3'
 };
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
 var lightIconColor = {
-  info: colors.B400,
-  note: colors.P400,
-  tip: colors.G400,
-  success: colors.G400,
-  warning: colors.Y400,
-  error: colors.R400
+  info: token('color.icon.information', colors.B400),
+  note: token('color.icon.discovery', colors.P400),
+  tip: token('color.icon.success', colors.G400),
+  success: token('color.icon.success', colors.G400),
+  warning: token('color.icon.warning', colors.Y400),
+  error: token('color.icon.danger', colors.R400)
 };
 var darkIconColor = {
-  info: colors.B100,
-  note: colors.P100,
-  tip: colors.G200,
-  success: colors.G200,
-  warning: colors.Y100,
-  error: colors.R200
+  info: token('color.icon.information', colors.B100),
+  note: token('color.icon.discovery', colors.P100),
+  tip: token('color.icon.success', colors.G200),
+  success: token('color.icon.success', colors.G200),
+  warning: token('color.icon.warning', colors.Y100),
+  error: token('color.icon.danger', colors.R200)
 }; // New custom icons are a little smaller than predefined icons.
 // To fix alignment issues with custom icons, vertical alignment is updated.
 
 var panelEmojiSpriteVerticalAlignment = -(gridSize() * 3 - akEditorCustomIconSize) / 2;
-var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1;
+var panelEmojiImageVerticalAlignment = panelEmojiSpriteVerticalAlignment - 1; // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 var 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 var getPanelDarkColor = function getPanelDarkColor(panelColor) {
   var colorObject = panelDarkModeColors.find(function (color) {
@@ -160,9 +175,10 @@ var iconDynamicStyles = function iconDynamicStyles(panelType) {
     })(props);
     return "\n    color: ".concat(color, ";\n  ");
   };
-};
+}; // Provides the color without tokens, used when converting to a custom panel
 
-export var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
+
+export var getPanelTypeBackgroundNoTokens = function getPanelTypeBackgroundNoTokens(panelType) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var light = lightPanelColor[panelType];
   var dark = darkPanelColors[panelType];
@@ -172,6 +188,21 @@ export var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
   })(props);
   return background || 'none';
 };
+export var getPanelTypeBackground = function getPanelTypeBackground(panelType) {
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-4066
+
+  /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
+  var light = token(tokenPanelColor[panelType], lightPanelColor[panelType]);
+  var dark = token(tokenPanelColor[panelType], darkPanelColors[panelType]);
+  /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
+
+  var background = themed({
+    light: light,
+    dark: dark
+  })(props);
+  return background || 'none';
+};
 
 var mainDynamicStyles = function mainDynamicStyles(panelType) {
   return function (props) {

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

@@ -4,15 +4,15 @@ var _templateObject;
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4118
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4153
 import { css } from '@emotion/react';
 import { tableCellContentDomSelector, tableCellSelector, tableHeaderSelector, tablePrefixSelector } from '@atlaskit/adf-schema';
-import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorWideLayoutWidth, getTableCellBackgroundDarkModeColors, overflowShadow } from '@atlaskit/editor-shared-styles';
+import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, akEditorSelectedNodeClassName, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, akEditorTableToolbar, akEditorTableToolbarDark, akEditorWideLayoutWidth, getTableCellBackgroundDarkModeColors, overflowShadow } from '@atlaskit/editor-shared-styles';
 import { DN20 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { gridSize } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 import browser from '../../utils/browser';
+import { CodeBlockSharedCssClassName } from './code-block';
 export var tableMarginTop = 24;
 export var tableMarginBottom = 16;
 export var tableMarginSides = 8;
@@ -38,7 +38,7 @@ export var TableSharedCssClassName = {
 };
 
 var tableSharedStyle = function tableSharedStyle(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-of-type > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  .", " > table {\n    margin: ", "px 0 0 0;\n  }\n\n  .", " > table,\n  .", " > table {\n    margin: ", "px ", "px 0 0;\n  }\n\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: ", ";\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > :first-child:not(style),\n        > style:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]) {\n          .code-block {\n            background-image: ", ";\n            background-attachment: local, scroll, scroll;\n            background-position: 100% 0, 100% 0, 0 0;\n            background-color: ", ";\n\n            .line-number-gutter {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableMarginTop, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, themed({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-of-type > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  .", " > table {\n    margin: ", "px 0 0 0;\n  }\n\n  .", " > table,\n  .", " > table {\n    margin: ", "px ", "px 0 0;\n  }\n\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: ", ";\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > :first-child:not(style),\n        > style:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]):not(.danger) {\n          .", ":not(.danger) {\n            background-color: ", ";\n\n            :not(.", ") {\n              box-shadow: 0px 0px 0px 1px\n                ", ";\n            }\n\n            .", " {\n              background-image: ", ";\n\n              background-color: ", ";\n            }\n\n            .", " {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableMarginTop, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, themed({
     light: token('color.border', akEditorTableBorder),
     dark: token('color.border', akEditorTableBorderDark)
   })(props), token('color.background.neutral.subtle', 'white'), tableCellMinWidth, themed({
@@ -49,22 +49,25 @@ var tableSharedStyle = function tableSharedStyle(props) {
   })(props), themed({
     light: token('color.background.neutral', akEditorTableToolbar),
     dark: token('color.background.neutral', akEditorTableToolbarDark)
-  })(props), overflowShadow({
+  })(props), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, themed({
+    light: token('elevation.surface.raised', 'rgb(235, 237, 240)'),
+    dark: token('elevation.surface.raised', 'rgb(36, 47, 66)')
+  })(props), akEditorSelectedNodeClassName, token('color.border', 'transparent'), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, overflowShadow({
     background: themed({
-      light: 'rgb(235, 237, 240)',
-      dark: 'rgb(36, 47, 66)'
+      light: token('color.background.neutral', 'rgb(235, 237, 240)'),
+      dark: token('color.background.neutral', 'rgb(36, 47, 66)')
     })(props),
     width: "".concat(gridSize(), "px")
   }), themed({
     light: token('color.background.neutral', 'rgb(235, 237, 240)'),
     dark: token('color.background.neutral', 'rgb(36, 47, 66)')
-  })(props), themed({
+  })(props), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, themed({
     light: token('color.background.neutral', 'rgb(226, 229, 233)'),
     dark: token('color.background.neutral', DN20)
   })(props), overflowShadow({
     background: themed({
-      light: 'rgb(235, 237, 240)',
-      dark: 'rgb(36, 47, 66)'
+      light: token('color.background.neutral', 'rgb(235, 237, 240)'),
+      dark: token('color.background.neutral', 'rgb(36, 47, 66)')
     })(props),
     width: "".concat(gridSize(), "px")
   }), themed({

package/dist/esm/styles/shared/text-color.js

@@ -3,4 +3,4 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import { css } from '@emotion/react';
-export var textColorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .fabric-text-color-mark {\n    color: var(--custom-text-color, inherit);\n  }\n\n  a .fabric-text-color-mark {\n    color: unset;\n  }\n"])));
+export var textColorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .fabric-text-color-mark {\n    color: var(--custom-palette-color, inherit);\n  }\n\n  a .fabric-text-color-mark {\n    color: unset;\n  }\n"])));

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

@@ -23,7 +23,7 @@ import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "70.3.0";
+var packageVersion = "71.0.1";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat(gridSize(), "px");
 

package/dist/esm/ui-color/ColorPalette/Color/index.js

@@ -13,6 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** @jsx jsx */
 import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
+import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import { N0 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
@@ -61,7 +62,9 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           isSelected = _this$props2.isSelected,
           borderColor = _this$props2.borderColor,
           _this$props2$checkMar = _this$props2.checkMarkColor,
-          checkMarkColor = _this$props2$checkMar === void 0 ? N0 : _this$props2$checkMar;
+          checkMarkColor = _this$props2$checkMar === void 0 ? N0 : _this$props2$checkMar,
+          useDesignTokens = _this$props2.useDesignTokens;
+      var colorStyle = useDesignTokens ? hexToEditorTextPaletteColor(value) : value;
       return jsx(Tooltip, {
         content: label
       }, jsx("span", {
@@ -76,7 +79,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
         tabIndex: tabIndex,
         className: "".concat(isSelected ? 'selected' : ''),
         style: {
-          backgroundColor: value || 'transparent',
+          backgroundColor: colorStyle || 'transparent',
           border: "1px solid ".concat(borderColor)
         },
         autoFocus: autoFocus

package/dist/esm/ui-color/ColorPalette/index.js

@@ -4,6 +4,7 @@ import { jsx } from '@emotion/react';
 import chromatism from 'chromatism';
 import { injectIntl } from 'react-intl-next';
 import { N0, N500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import Color from './Color';
 import { colorPaletteWrapper } from './styles';
 
@@ -14,10 +15,21 @@ import { colorPaletteWrapper } from './styles';
  * @param color color string, suppports HEX, RGB, RGBA etc.
  * @return Highest contrast color in pool
  */
-function getContrastColor(color, pool) {
-  return pool.sort(function (a, b) {
+function getCheckMarkColor(color, textPalette) {
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  var contrastColor = [N0, N500].sort(function (a, b) {
     return chromatism.difference(b, color) - chromatism.difference(a, color);
   })[0];
+
+  if (!textPalette) {
+    return contrastColor;
+  } // Use of these token comes from guidance from designers in the Design System team
+  // they are only intended for use with text colors (and there are different tokens
+  // planned to be used when this extended to be used with other palettes).
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+
+
+  return contrastColor === N0 ? token('color.icon.inverse', N0) : token('color.icon', N500);
 }
 
 var ColorPalette = function ColorPalette(props) {
@@ -27,7 +39,9 @@ var ColorPalette = function ColorPalette(props) {
       onClick = props.onClick,
       selectedColor = props.selectedColor,
       className = props.className,
-      formatMessage = props.intl.formatMessage;
+      formatMessage = props.intl.formatMessage,
+      _props$textPalette = props.textPalette,
+      textPalette = _props$textPalette === void 0 ? false : _props$textPalette;
   var colorsPerRow = React.useMemo(function () {
     return palette.reduce(function (resultArray, item, index) {
       var chunkIndex = Math.floor(index / cols);
@@ -54,14 +68,9 @@ var ColorPalette = function ColorPalette(props) {
         borderColor: border,
         label: message ? formatMessage(message) : label,
         onClick: onClick,
-        isSelected: value === selectedColor
-        /** this is not new usage - old code extracted from editor-core */
-
-        /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-        ,
-        checkMarkColor: getContrastColor(value, [N0, N500])
-        /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
-
+        isSelected: value === selectedColor,
+        checkMarkColor: getCheckMarkColor(value, textPalette),
+        useDesignTokens: textPalette === true
       });
     }));
   }));