@atlaskit/editor-common 70.2.1 → 71.0.0

package/dist/es2019/ui-menu/MenuArrowKeyNavigationProvider/index.js

@@ -0,0 +1,146 @@
+import React, { useLayoutEffect, useRef } from 'react';
+
+/**
+ * This component is a wrapper of vertical menus which listens to keydown events of children
+ * and handles up/down arrow key navigation
+ */
+export const MenuArrowKeyNavigationProvider = ({
+  children,
+  handleClose,
+  disableArrowKeyNavigation,
+  keyDownHandlerContext,
+  closeonTab
+}) => {
+  const wrapperRef = useRef(null);
+  const currentSelectedItemIndex = useRef(-1);
+
+  const incrementIndex = list => {
+    if (currentSelectedItemIndex.current === list.length - 1 || currentSelectedItemIndex.current === -1) {
+      currentSelectedItemIndex.current = 0;
+    } else {
+      currentSelectedItemIndex.current = currentSelectedItemIndex.current + 1;
+    }
+  };
+
+  const decrementIndex = list => {
+    if (currentSelectedItemIndex.current === 0 || currentSelectedItemIndex.current === -1) {
+      currentSelectedItemIndex.current = list.length - 1;
+    } else {
+      currentSelectedItemIndex.current = currentSelectedItemIndex.current - 1;
+    }
+  };
+
+  useLayoutEffect(() => {
+    if (disableArrowKeyNavigation) {
+      return;
+    }
+    /**
+     * To handle the key events on the list
+     * @param event
+     */
+
+
+    const handleKeyDown = event => {
+      var _wrapperRef$current, _focusableElements$cu, _focusableElements$cu2;
+
+      const targetElement = event.target; //Tab key on menu items can be handled in the parent components of dropdown menus with KeydownHandlerContext
+
+      if (event.key === 'Tab' && closeonTab) {
+        handleClose(event);
+        keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleTab();
+        return;
+      } //To trap the focus inside the toolbar using left and right arrow keys
+
+
+      const focusableElements = getEnabledElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+
+      if (!focusableElements || (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0) {
+        return;
+      }
+
+      if (!((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(targetElement))) {
+        currentSelectedItemIndex.current = -1;
+      }
+
+      switch (event.key) {
+        case 'ArrowDown':
+          //If ArrowDown pressed
+          //If on last item
+          // Focus last item
+          //Else
+          // Focus next item
+          incrementIndex(focusableElements);
+          (_focusableElements$cu = focusableElements[currentSelectedItemIndex.current]) === null || _focusableElements$cu === void 0 ? void 0 : _focusableElements$cu.focus();
+          event.preventDefault();
+          break;
+
+        case 'ArrowUp':
+          //ArrowUP pressed
+          //If on First item
+          // Focus last item
+          //Else
+          // Focus previous item
+          decrementIndex(focusableElements);
+          (_focusableElements$cu2 = focusableElements[currentSelectedItemIndex.current]) === null || _focusableElements$cu2 === void 0 ? void 0 : _focusableElements$cu2.focus();
+          event.preventDefault();
+          break;
+        //ArrowLeft/Right on the menu should close the menus
+        //then logic to retain the focus can be handled in the parent components with KeydownHandlerContext
+
+        case 'ArrowLeft':
+          //Filter out the events from outside the menu
+          if (!targetElement.closest('.custom-key-handler-wrapper')) {
+            return;
+          }
+
+          handleClose(event);
+          keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowLeft();
+          break;
+
+        case 'ArrowRight':
+          //Filter out the events from outside the menu
+          if (!targetElement.closest('.custom-key-handler-wrapper')) {
+            return;
+          }
+
+          handleClose(event);
+          keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowRight();
+          break;
+
+        case 'Escape':
+          handleClose(event);
+          break;
+
+        default:
+          return;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeonTab]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "custom-key-handler-wrapper",
+    ref: wrapperRef
+  }, children);
+};
+
+function getFocusableElements(rootNode) {
+  if (!rootNode) {
+    return [];
+  }
+
+  const focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, div[tabindex="-1"]') || [];
+  return Array.from(focusableModalElements);
+}
+/**
+ * This method filters out all the disabled menu items
+ */
+
+
+function getEnabledElements(rootNode) {
+  const focusableElements = getFocusableElements(rootNode);
+  return focusableElements.filter(element => !element.querySelector('[role="button"][aria-disabled="true"]') && !element.querySelector('[role="menuitem"][aria-disabled="true"]'));
+}

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.2.1",
+	"version": "71.0.0",
 	"sideEffects": false
 }

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

@@ -24,6 +24,7 @@ export var ACTION;
   ACTION["CLICKED"] = "clicked";
   ACTION["CLOSED"] = "closed";
   ACTION["COMMITTED"] = "committed";
+  ACTION["CONNECTED_NODES"] = "connectedNodes";
   ACTION["CONVERTED"] = "converted";
   ACTION["COPIED"] = "copied";
   ACTION["CUT"] = "cut";
@@ -31,6 +32,8 @@ export var ACTION;
   ACTION["DECREMENTED"] = "decremented";
   ACTION["DELETED"] = "deleted";
   ACTION["DISCARDED_INVALID_STEPS_FROM_TRANSACTION"] = "discardedInvalidStepsFromTransaction";
+  ACTION["DISCONNECTED_SOURCE"] = "disconnectedSource";
+  ACTION["DISCONNECTED_TARGET"] = "disconnectedTarget";
   ACTION["DISMISSED"] = "dismissed";
   ACTION["DISPATCHED_INVALID_TRANSACTION"] = "dispatchedInvalidTransaction";
   ACTION["DISPATCHED_VALID_TRANSACTION"] = "dispatchedValidTransaction";
@@ -54,11 +57,13 @@ export var ACTION;
   ACTION["INCREMENTED"] = "incremented";
   ACTION["INDENTED"] = "indented";
   ACTION["INITIALISED"] = "initialised";
+  ACTION["INITIALISED_FRAGMENT_MARK"] = "initialisedFragmentMark";
   ACTION["INPUT_PERF_SAMPLING"] = "inputPerfSampling";
   ACTION["INPUT_PERF_SAMPLING_AVG"] = "inputPerfSamplingAvg";
   ACTION["INSERTED"] = "inserted";
   ACTION["INVALID_DOCUMENT_ENCOUNTERED"] = "invalidDocumentEncountered";
   ACTION["INVOKED"] = "invoked";
+  ACTION["GOT_CONNECTIONS"] = "gotConnections";
   ACTION["LANGUAGE_SELECTED"] = "languageSelected";
   ACTION["LIST_ITEM_JOINED"] = "listItemJoined";
   ACTION["MATCHED"] = "matched";
@@ -87,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";
@@ -95,6 +101,9 @@ export var ACTION;
   ACTION["UNLINK"] = "unlinked";
   ACTION["UNSUPPORTED_CONTENT_ENCOUNTERED"] = "unsupportedContentEncountered";
   ACTION["UPDATED"] = "updated";
+  ACTION["UPDATED_FRAGMENT_MARK_NAME"] = "updatedFragmentMarkName";
+  ACTION["UPDATED_SOURCE"] = "updatedSource";
+  ACTION["UPDATED_TARGET"] = "updatedTarget";
   ACTION["UPLOAD_EXTERNAL_FAIL"] = "uploadExternalFailed";
   ACTION["VIEWED"] = "viewed";
   ACTION["VISITED"] = "visited";
@@ -242,7 +251,7 @@ export var ACTION_SUBJECT_ID;
   ACTION_SUBJECT_ID["FORMAT_SUB"] = "subscript";
   ACTION_SUBJECT_ID["FORMAT_SUPER"] = "superscript";
   ACTION_SUBJECT_ID["FORMAT_UNDERLINE"] = "underline";
-  ACTION_SUBJECT_ID["FRAGMENT_MARKS"] = "fragmentMarks";
+  ACTION_SUBJECT_ID["FRAGMENT_MARK"] = "fragmentMark";
   ACTION_SUBJECT_ID["GOTO_SMART_LINK_SETTINGS"] = "goToSmartLinkSettings";
   ACTION_SUBJECT_ID["HELP_QUICK_INSERT"] = "helpQuickInsert";
   ACTION_SUBJECT_ID["HYPERLINK"] = "hyperlink";

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