@atlaskit/editor-core 177.0.0 → 178.0.0

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

@@ -10,8 +10,8 @@ import ColorPalette from '../ColorPalette';
 import { DEFAULT_BORDER_COLOR } from '../ColorPalette/Palettes/common';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { editorAnalyticsChannel } from '../../plugins/analytics/consts';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plugins/analytics/types'; // helps adjusts position of popup
-
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plugins/analytics/types';
+// helps adjusts position of popup
 const colorPickerButtonWrapper = css`
   position: relative;
 `; // Control the size of color picker buttons and preview
@@ -100,6 +100,23 @@ const ColorPickerButton = props => {
   };
 
   const title = props.title || '';
+  const buttonStyle = css`
+    padding: 6px;
+    background-color: ${"var(--ds-background-neutral, transparent)"};
+    &:before {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      align-self: center;
+      content: '';
+      border: 1px solid ${DEFAULT_BORDER_COLOR};
+      border-radius: ${borderRadius()}px;
+      background-color: ${props.currentColor || 'transparent'};
+      width: ${((_props$size = props.size) === null || _props$size === void 0 ? void 0 : _props$size.width) || 14}px;
+      height: ${((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.height) || 14}px;
+      padding: 0;
+    }
+  `;
   return jsx("div", {
     css: colorPickerButtonWrapper
   }, jsx(Tooltip, {
@@ -110,13 +127,7 @@ const ColorPickerButton = props => {
     "aria-label": title,
     spacing: "compact",
     onClick: togglePopup,
-    style: {
-      backgroundColor: props.currentColor || 'transparent',
-      border: `1px solid ${DEFAULT_BORDER_COLOR}`,
-      width: `${((_props$size = props.size) === null || _props$size === void 0 ? void 0 : _props$size.width) || 20}px`,
-      height: `${((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.height) || 20}px`,
-      padding: 0
-    }
+    css: buttonStyle
   })), renderPopup());
 };
 

package/dist/es2019/ui/ConfigPanel/Fields/CheckboxGroup.js

@@ -5,7 +5,6 @@ import { Fragment, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { Checkbox as AKCheckbox } from '@atlaskit/checkbox';
 import { Field, Fieldset as AKFieldset } from '@atlaskit/form';
-import { token } from '@atlaskit/tokens';
 import { ValidationError } from '../types';
 import FieldMessages from '../FieldMessages';
 
@@ -16,7 +15,7 @@ function validate(value, isRequired) {
 }
 
 const requiredIndicator = css`
-  color: ${token('color.text.danger', '#bf2600')};
+  color: ${"var(--ds-text-danger, #bf2600)"};
 `;
 
 function CheckboxGroupInner({

package/dist/es2019/ui/ConfigPanel/Fields/Expand.js

@@ -3,14 +3,13 @@ import React, { useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { N40 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import Button from '@atlaskit/button';
 import { gridSize } from '@atlaskit/theme/constants';
 import { messages } from '../messages';
 export const expandContainer = css`
-  border-bottom: 1px solid ${token('color.border', N40)};
+  border-bottom: 1px solid ${`var(--ds-border, ${N40})`};
 `;
 export const expandControl = css`
   display: flex;

package/dist/es2019/ui/ConfigPanel/Fields/Fieldset.js

@@ -12,9 +12,8 @@ import { messages } from '../messages';
 import { getNameFromDuplicateField, isDuplicateField } from '../utils';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N40A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 const actionsWrapper = css`
-  border-top: 1px solid ${token('color.border', N40A)};
+  border-top: 1px solid ${`var(--ds-border, ${N40A})`};
   margin-top: ${gridSize() * 2}px;
   padding-top: ${gridSize() * 2}px;
 `;

package/dist/es2019/ui/ConfigPanel/Fields/common/RequiredIndicator.js

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { R500 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const requiredIndicator = css`
-  color: ${token('color.text.danger', R500)};
+  color: ${`var(--ds-text-danger, ${R500})`};
 `;

package/dist/es2019/ui/ConfigPanel/Header.js

@@ -7,7 +7,6 @@ import Button from '@atlaskit/button/custom-theme-button';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N200 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { messages } from './messages';
 const iconWidth = 40;
@@ -22,7 +21,7 @@ const itemIcon = css`
   width: ${iconWidth}px;
   height: ${iconWidth}px;
   overflow: hidden;
-  border: 1px solid ${token('color.border', 'rgba(223, 225, 229, 0.5)')}; /* N60 at 50% */
+  border: 1px solid ${"var(--ds-border, rgba(223, 225, 229, 0.5))"}; /* N60 at 50% */
   border-radius: ${borderRadius()}px;
   box-sizing: border-box;
 
@@ -55,7 +54,7 @@ const itemText = css`
   white-space: initial;
   .item-summary {
     font-size: ${relativeFontSizeToBase16(11.67)};
-    color: ${token('color.text.subtlest', N200)};
+    color: ${`var(--ds-text-subtlest, ${N200})`};
     margin-top: 4px;
 
     white-space: nowrap;

package/dist/es2019/ui/ConfigPanel/NestedForms/RemovableField.js

@@ -6,7 +6,6 @@ import { gridSize } from '@atlaskit/theme/constants';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import Tooltip from '@atlaskit/tooltip';
 import { N80, R300 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { messages } from '../messages';
 const removableFieldWrapper = css`
   position: relative;
@@ -21,10 +20,10 @@ const removeButtonWrapper = css`
   top: 0;
   cursor: pointer;
 
-  color: ${token('color.icon.subtle', N80)};
+  color: ${`var(--ds-icon-subtle, ${N80})`};
 
   &:hover {
-    color: ${token('color.icon.danger', R300)};
+    color: ${`var(--ds-icon-danger, ${R300})`};
   }
 `;
 

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

@@ -3,7 +3,6 @@ import React, { useMemo } from 'react';
 import { jsx, css, useTheme } from '@emotion/react';
 import { whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, shadowSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, annotationSharedStyles, smartCardSharedStyles, textColorStyles } from '@atlaskit/editor-common/styles';
 import { editorFontSize } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 import { unsupportedStyles } from '../../plugins/unsupported-content/styles';
 import { telepointerStyle } from '../../plugins/collab-edit/styles';
 import { gapCursorStyles } from '../../plugins/selection/gap-cursor/styles';
@@ -67,7 +66,7 @@ const contentStyles = props => css`
   }
 
   .ProseMirror-selectednode:empty {
-    outline: 2px solid ${token('color.border.focused', '#8cf')};
+    outline: 2px solid ${"var(--ds-border-focused, #8cf)"};
   }
 
   ${placeholderTextStyles}

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

@@ -13,7 +13,6 @@ import { pluginKey as contextPanelPluginKey } from '../../plugins/context-panel'
 import { pluginKey as widthPluginKey } from '../../plugins/width';
 import WithEditorActions from '../WithEditorActions';
 import { getChildBreakoutModes } from '../../utils/document';
-import { token } from '@atlaskit/tokens';
 const ANIM_SPEED_MS = 500;
 const EDITOR_WIDTH = akEditorDefaultLayoutWidth + akEditorBreakoutPadding;
 const WIDE_EDITOR_WIDTH = akEditorWideLayoutWidth + akEditorBreakoutPadding;
@@ -43,7 +42,7 @@ export const panel = css`
   height: 100%;
   transition: width ${ANIM_SPEED_MS}ms ${akEditorSwoopCubicBezier};
   overflow: hidden;
-  box-shadow: inset 2px 0 0 0 ${token('color.border', N30)};
+  box-shadow: inset 2px 0 0 0 ${`var(--ds-border, ${N30})`};
 `;
 export const content = css`
   transition: width 600ms ${akEditorSwoopCubicBezier};

package/dist/es2019/ui/ElementBrowser/InsertMenu.js

@@ -17,7 +17,6 @@ import { getFeaturedQuickInsertItems, searchQuickInsertItems } from '../../plugi
 import { insertItem } from '../../plugins/quick-insert/commands';
 import ElementBrowser from './components/ElementBrowserLoader';
 import { ELEMENT_ITEM_HEIGHT } from './constants';
-import { token } from '@atlaskit/tokens';
 
 const InsertMenu = ({
   editorView,
@@ -148,13 +147,13 @@ const insertMenuWrapper = (theme, itemCount) => css`
   itemCount
 })}px;
   background-color: ${themed({
-  light: token('elevation.surface.overlay', N0),
-  dark: token('elevation.surface.overlay', DN50)
+  light: `var(--ds-surface-overlay, ${N0})`,
+  dark: `var(--ds-surface-overlay, ${DN50})`
 })(theme)};
   border-radius: ${borderRadius()}px;
-  box-shadow: ${token('elevation.shadow.overlay', `0 0 0 1px ${N30A},
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 0 0 1px ${N30A},
     0 2px 1px ${N30A},
-    0 0 20px -6px ${N60A}`)};
+    0 0 20px -6px ${N60A}`})`};
 `;
 
 const itemBefore = css`

package/dist/es2019/ui/ElementBrowser/ModalElementBrowser.js

@@ -12,7 +12,6 @@ import ElementBrowser from './components/ElementBrowserLoader';
 import { getCategories } from './categories';
 import { MODAL_WRAPPER_PADDING } from './constants';
 import { messages } from './messages';
-import { token } from '@atlaskit/tokens';
 const actions = css`
   display: inline-flex;
   margin: 0 -4px;
@@ -28,8 +27,8 @@ const wrapper = css`
   padding: ${MODAL_WRAPPER_PADDING}px ${MODAL_WRAPPER_PADDING}px 0 10px;
   overflow: hidden;
   background-color: ${themed({
-  light: token('elevation.surface.overlay', N0),
-  dark: token('elevation.surface.overlay', DN50)
+  light: `var(--ds-surface-overlay, ${N0})`,
+  dark: `var(--ds-surface-overlay, ${DN50})`
 })()};
   border-radius: ${borderRadius()}px;
 `;

package/dist/es2019/ui/ElementBrowser/components/CategoryList.js

@@ -9,7 +9,6 @@ import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE } from '../constants';
 import useFocus from '../hooks/use-focus';
 import { fireAnalyticsEvent, EVENT_TYPE, ACTION_SUBJECT, ACTION_SUBJECT_ID, ACTION } from '../../../plugins/analytics';
-import { token } from '@atlaskit/tokens';
 
 function CategoryList({
   categories = [],
@@ -72,9 +71,9 @@ function CategoryListItem({
         marginLeft: '2px',
         height: '100%',
         width: '100%',
-        color: category.name !== selectedCategory ? token('color.text', N800) : token('color.text.selected', B400),
+        color: category.name !== selectedCategory ? `var(--ds-text, ${N800})` : `var(--ds-text-selected, ${B400})`,
         ...(category.name === selectedCategory && {
-          background: token('color.background.selected', B50)
+          background: `var(--ds-background-selected, ${B50})`
         })
       },
       ...rest

package/dist/es2019/ui/ElementBrowser/components/ElementList/ElementList.js

@@ -9,7 +9,6 @@ import { ButtonItem } from '@atlaskit/menu';
 import { B100, N200 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../../../plugins/analytics';
 import IconFallback from '../../../../plugins/quick-insert/assets/fallback';
@@ -238,7 +237,7 @@ const elementItemsWrapper = css`
 
     :focus {
       box-shadow: 0 0 0 ${ELEMENT_LIST_PADDING}px
-        ${token('color.border.focused', B100)};
+        ${`var(--ds-border-focused, ${B100})`};
     }
   }
   .ReactVirtualized__Collection__innerScrollContainer {
@@ -281,7 +280,7 @@ const itemDescription = css`
 
   overflow: hidden;
   font-size: ${relativeFontSizeToBase16(11.67)};
-  color: ${token('color.text.subtle', N200)};
+  color: ${`var(--ds-text-subtle, ${N200})`};
   margin-top: 2px;
 `;
 const itemText = css`

package/dist/es2019/ui/ElementBrowser/components/ElementList/EmptyState.js

@@ -3,7 +3,6 @@ import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import NotFoundIllustration from './NotFoundIllustration';
-import { token } from '@atlaskit/tokens';
 export default function EmptyState({
   onExternalLinkClick
 }) {
@@ -37,7 +36,7 @@ export default function EmptyState({
 const emptyStateHeading = css`
   font-size: 1.42857em;
   line-height: 1.2;
-  color: ${token('color.text', 'rgb(23, 43, 77)')};
+  color: ${"var(--ds-text, rgb(23, 43, 77))"};
   font-weight: 500;
   letter-spacing: -0.008em;
   margin-top: 28px;

package/dist/es2019/ui/ElementBrowser/components/ElementSearch.js

@@ -11,7 +11,6 @@ import { GRID_SIZE, SEARCH_ITEM_HEIGHT_WIDTH } from '../constants';
 import useFocus from '../hooks/use-focus';
 import { Modes } from '../types';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 
 function ElementSearch({
   onSearch,
@@ -102,7 +101,7 @@ const wrapperInline = css`
 `;
 const elementBeforeInput = css`
   margin: 1px 6px 0 8px;
-  color: ${token('color.icon', N200)};
+  color: ${`var(--ds-icon, ${N200})`};
 
   // Custom SearchIcon style
   span,

package/dist/es2019/ui/FloatingToolbar/styles.js

@@ -1,15 +1,14 @@
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export const container = height => css`
   border-radius: ${borderRadius()}px;
-  box-shadow: ${token('elevation.shadow.overlay', `0 12px 24px -6px ${N50A}, 0 0 1px ${N60A}`)};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 12px 24px -6px ${N50A}, 0 0 1px ${N60A}`})`};
   display: flex;
   align-items: center;
   box-sizing: border-box;
   padding: 4px 8px;
-  background-color: ${token('color.background.input', N0)};
+  background-color: ${`var(--ds-background-input, ${N0})`};
   ${height ? css`
         height: ${height}px;
       ` : ''};

package/dist/es2019/ui/LinkSearch/LinkSearchListItem.js

@@ -6,7 +6,6 @@ import { css, jsx } from '@emotion/react'; // AFP-2532 TODO: Fix automatic suppr
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { fontSizeSmall } from '@atlaskit/theme';
-import { token } from '@atlaskit/tokens';
 import { N20, N300, N800 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { getCorrectAltByIconUrl } from './listItemAlts';
@@ -20,20 +19,20 @@ export const container = css`
   margin-top: 0;
 `;
 export const containerSelected = css`
-  background-color: ${token('color.background.neutral.subtle.hovered', N20)};
+  background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N20})`};
 `;
 const nameWrapper = css`
   overflow: hidden;
 `;
 export const nameStyle = css`
-  color: ${token('color.text', N800)};
+  color: ${`var(--ds-text, ${N800})`};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: 20px;
 `;
 export const containerName = css`
-  color: ${token('color.text.subtlest', N300)};
+  color: ${`var(--ds-text-subtlest, ${N300})`};
   line-height: 14px;
   font-size: ${relativeFontSizeToBase16(fontSizeSmall())};
 `;

package/dist/es2019/ui/PanelTextInput/styles.js

@@ -1,15 +1,14 @@
 import { css } from '@emotion/react';
 import { N400, N100 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens'; // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
-
+// Normal .className gets overridden by input[type=text] hence this hack to produce input.className
 export const panelTextInput = css`
   input& {
     background: transparent;
     border: 0;
     border-radius: 0;
     box-sizing: content-box;
-    color: ${token('color.text.subtle', N400)};
+    color: ${`var(--ds-text-subtle, ${N400})`};
     flex-grow: 1;
     font-size: ${relativeFontSizeToBase16(13)};
     line-height: 20px;
@@ -26,7 +25,7 @@ export const panelTextInput = css`
     }
 
     &::placeholder {
-      color: ${token('color.text.subtlest', N100)};
+      color: ${`var(--ds-text-subtlest, ${N100})`};
     }
   }
 `;

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

@@ -23,7 +23,8 @@ export const ToolbarArrowKeyNavigationProvider = ({
   editorView,
   childComponentSelector,
   handleEscape,
-  disableArrowKeyNavigation
+  disableArrowKeyNavigation,
+  isShortcutToFocusToolbar
 }) => {
   const wrapperRef = useRef(null);
   const selectedItemIndex = useRef(0);
@@ -142,11 +143,35 @@ export const ToolbarArrowKeyNavigationProvider = ({
       }
     };
 
+    const globalKeyDownHandler = event => {
+      //To focus the first element in the toolbar
+      if (isShortcutToFocusToolbar(event)) {
+        var _filteredFocusableEle4, _filteredFocusableEle5;
+
+        const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+        (_filteredFocusableEle4 = filteredFocusableElements[0]) === null || _filteredFocusableEle4 === void 0 ? void 0 : _filteredFocusableEle4.focus();
+        (_filteredFocusableEle5 = filteredFocusableElements[0]) === null || _filteredFocusableEle5 === void 0 ? void 0 : _filteredFocusableEle5.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'nearest'
+        });
+      }
+    };
+
     element === null || element === void 0 ? void 0 : element.addEventListener('keydown', handleKeyDown);
+
+    if (isShortcutToFocusToolbar) {
+      document.addEventListener('keydown', globalKeyDownHandler);
+    }
+
     return () => {
       element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleKeyDown);
+
+      if (isShortcutToFocusToolbar) {
+        document.removeEventListener('keydown', globalKeyDownHandler);
+      }
     };
-  }, [selectedItemIndex, wrapperRef, editorView, disableArrowKeyNavigation, handleEscape, childComponentSelector, incrementIndex, decrementIndex]);
+  }, [selectedItemIndex, wrapperRef, editorView, disableArrowKeyNavigation, handleEscape, childComponentSelector, incrementIndex, decrementIndex, isShortcutToFocusToolbar]);
   return /*#__PURE__*/React.createElement("div", {
     className: "custom-key-handler-wrapper",
     ref: wrapperRef

package/dist/es2019/ui/ToolbarFeedback/styles.js

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N60A, N400, P400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 export const buttonContent = css`
   display: flex;
@@ -14,9 +13,9 @@ export const wrapper = css`
   margin-right: 0;
 `;
 export const confirmationPopup = css`
-  background: ${token('elevation.surface.overlay', '#fff')};
+  background: ${"var(--ds-surface-overlay, #fff)"};
   border-radius: ${borderRadius()}px;
-  box-shadow: ${token('elevation.shadow.overlay', `0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`)};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -29,7 +28,7 @@ export const confirmationText = css`
   font-size: ${relativeFontSizeToBase16(14)};
   word-spacing: 4px;
   line-height: 22px;
-  color: ${token('color.text.subtle', N400)};
+  color: ${`var(--ds-text-subtle, ${N400})`};
   margin-top: 30px;
   padding: 20px;
   & > div {
@@ -43,7 +42,7 @@ export const confirmationText = css`
   }
 `;
 export const confirmationHeader = css`
-  background-color: ${token('color.background.discovery.bold', P400)};
+  background-color: ${`var(--ds-background-discovery-bold, ${P400})`};
   height: 100px;
   width: 100%;
   display: inline-block;

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

@@ -4,21 +4,20 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { css, jsx, keyframes } from '@emotion/react';
 import { R100 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 const pulseBackground = keyframes`
   50% {
-    background-color: ${token('color.blanket.danger', R100)};
+    background-color: ${`var(--ds-blanket-danger, ${R100})`};
   }
 `;
 const pulseBackgroundReverse = keyframes`
   0% {
-    background-color: ${token('color.blanket.danger', R100)};
+    background-color: ${`var(--ds-blanket-danger, ${R100})`};
   }
   50% {
     background-color: auto;
   }
   100% {
-    background-color: ${token('color.blanket.danger', R100)};
+    background-color: ${`var(--ds-blanket-danger, ${R100})`};
   }
 `;
 const flashWrapper = css`

package/dist/es2019/ui/styles.js

@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 export { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 export { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 export const buttonGroupStyle = css`
@@ -12,7 +11,7 @@ export const buttonGroupStyle = css`
   }
 `;
 export const separatorStyles = css`
-  background: ${token('color.border', N30)};
+  background: ${`var(--ds-border, ${N30})`};
   width: 1px;
   height: 24px;
   display: inline-block;
@@ -58,8 +57,8 @@ export const buttonContentReducedSpacingStyle = css`
 `; // Taken from the style of inline dialog components
 
 export const dropShadow = css`
-  box-shadow: ${token('elevation.shadow.overlay', `0 0 1px rgba(9, 30, 66, 0.31),
-    0 4px 8px -2px rgba(9, 30, 66, 0.25)`)};
+  box-shadow: ${`var(--ds-shadow-overlay, ${`0 0 1px rgba(9, 30, 66, 0.31),
+    0 4px 8px -2px rgba(9, 30, 66, 0.25)`})`};
 `;
 export const clickSelectWrapperStyle = css`
   user-select: all;

package/dist/es2019/utils/performance/instrumented-plugin.js

@@ -11,18 +11,20 @@ export class InstrumentedPlugin extends SafePlugin {
         enabled: false
       },
       saferDispatchedTransactions = false,
+      saferDispatchedTransactionsAnalyticsOnly = false,
       dispatchAnalyticsEvent
     } = options;
-    const shouldOverrideApply = transactionTracking.enabled && transactionTracker || saferDispatchedTransactions;
+    const shouldOverrideApply = transactionTracking.enabled && transactionTracker || saferDispatchedTransactions || saferDispatchedTransactionsAnalyticsOnly;
 
     if (shouldOverrideApply && spec.state) {
       const originalApply = spec.state.apply.bind(spec.state);
 
       spec.state.apply = (aTr, value, oldState, newState) => {
         const self = this;
-        const tr = saferDispatchedTransactions ? new Proxy(aTr, freezeUnsafeTransactionProperties({
+        const tr = saferDispatchedTransactions || saferDispatchedTransactionsAnalyticsOnly ? new Proxy(aTr, freezeUnsafeTransactionProperties({
           dispatchAnalyticsEvent,
-          pluginKey: self.key
+          pluginKey: self.key,
+          analyticsOnly: saferDispatchedTransactionsAnalyticsOnly
         })) : aTr;
         const shouldTrackTransactions = transactionTracker === null || transactionTracker === void 0 ? void 0 : transactionTracker.shouldTrackTransaction(transactionTracking);
 

package/dist/es2019/utils/performance/safer-transactions.js

@@ -7,7 +7,8 @@ const isReadOnlyProperty = prop => ['doc', 'docs', 'steps', 'selection'].include
 
 export const freezeUnsafeTransactionProperties = ({
   dispatchAnalyticsEvent,
-  pluginKey
+  pluginKey,
+  analyticsOnly
 }) => {
   const isUnsafe = () => {
     if (dispatchAnalyticsEvent) {
@@ -17,11 +18,16 @@ export const freezeUnsafeTransactionProperties = ({
         eventType: EVENT_TYPE.OPERATIONAL,
         attributes: {
           pluginKey: pluginKey || 'unknown'
+        },
+        nonPrivacySafeAttributes: {
+          stack: new Error().stack
         }
       });
     }
 
-    throw new Error(UNSAFE_PROPERTY_SET_ERROR);
+    if (!analyticsOnly) {
+      throw new Error(UNSAFE_PROPERTY_SET_ERROR);
+    }
   };
 
   return {

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "177.0.0";
+export const version = "178.0.0";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "177.0.0",
+	"version": "178.0.0",
 	"sideEffects": false
 }

package/dist/esm/create-editor/ErrorBoundary.js

@@ -97,8 +97,10 @@ export var ErrorBoundaryWithEditorView = /*#__PURE__*/function (_React$Component
                   actionSubject: ACTION_SUBJECT.EDITOR,
                   eventType: EVENT_TYPE.OPERATIONAL,
                   attributes: {
-                    errorStack: errorStack,
                     errorId: sharedId
+                  },
+                  nonPrivacySafeAttributes: {
+                    errorStack: errorStack
                   }
                 });
 

package/dist/esm/create-editor/ReactEditorView.js

@@ -354,9 +354,10 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
 
       var nodes = findChangedNodesFromTransaction(unsafeTransaction);
       var changedNodesValid = validateNodes(nodes);
-      var transaction = _this.featureFlags.saferDispatchedTransactions ? new Proxy(unsafeTransaction, freezeUnsafeTransactionProperties({
+      var transaction = _this.featureFlags.saferDispatchedTransactions || _this.featureFlags.saferDispatchedTransactionsAnalyticsOnly ? new Proxy(unsafeTransaction, freezeUnsafeTransactionProperties({
         dispatchAnalyticsEvent: _this.dispatchAnalyticsEvent,
-        pluginKey: 'unknown-reacteditorview'
+        pluginKey: 'unknown-reacteditorview',
+        analyticsOnly: _this.featureFlags.saferDispatchedTransactionsAnalyticsOnly
       })) : unsafeTransaction;
 
       if (changedNodesValid) {