@atlaskit/editor-common 72.0.0 → 72.1.0

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

@@ -13,16 +13,7 @@ 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 = {
+var lightPanelColors = {
   info: colors.B50,
   note: colors.P50,
   tip: colors.G50,
@@ -93,20 +84,28 @@ export var darkPanelColors = {
   TextColor: '#D9DDE3'
 };
 var lightIconColor = {
-  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)
+  info: "var(--ds-icon-information, ".concat(colors.B400, ")"),
+  note: "var(--ds-icon-discovery, ".concat(colors.P400, ")"),
+  tip: "var(--ds-icon-success, ".concat(colors.G400, ")"),
+  success: "var(--ds-icon-success, ".concat(colors.G400, ")"),
+  warning: "var(--ds-icon-warning, ".concat(colors.Y400, ")"),
+  error: "var(--ds-icon-danger, ".concat(colors.R400, ")")
 };
 var darkIconColor = {
-  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)
+  info: "var(--ds-icon-information, ".concat(colors.B100, ")"),
+  note: "var(--ds-icon-discovery, ".concat(colors.P100, ")"),
+  tip: "var(--ds-icon-success, ".concat(colors.G200, ")"),
+  success: "var(--ds-icon-success, ".concat(colors.G200, ")"),
+  warning: "var(--ds-icon-warning, ".concat(colors.Y100, ")"),
+  error: "var(--ds-icon-danger, ".concat(colors.R200, ")")
+};
+var tokenDarkPanelColors = {
+  info: "var(--ds-background-information, ".concat(darkPanelColors['info'], ")"),
+  note: "var(--ds-background-discovery, ".concat(darkPanelColors['note'], ")"),
+  tip: "var(--ds-background-success, ".concat(darkPanelColors['tip'], ")"),
+  success: "var(--ds-background-success, ".concat(darkPanelColors['success'], ")"),
+  warning: "var(--ds-background-warning, ".concat(darkPanelColors['warning'], ")"),
+  error: "var(--ds-background-danger, ".concat(darkPanelColors['error'], ")")
 }; // New custom icons are a little smaller than predefined icons.
 // To fix alignment issues with custom icons, vertical alignment is updated.
 
@@ -177,7 +176,7 @@ var iconDynamicStyles = function iconDynamicStyles(panelType) {
 
 export var getPanelTypeBackgroundNoTokens = function getPanelTypeBackgroundNoTokens(panelType) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var light = lightPanelColor[panelType];
+  var light = lightPanelColors[panelType];
   var dark = darkPanelColors[panelType];
   var background = themed({
     light: light,
@@ -187,11 +186,9 @@ export var getPanelTypeBackgroundNoTokens = function getPanelTypeBackgroundNoTok
 };
 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
+  var light = hexToEditorBackgroundPaletteColor(lightPanelColors[panelType]); // hexToEditorBackgroundPaletteColor has a light mode as a fallback color - for legacy dark mode we define the tokens locally
 
-  /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
-  var light = hexToEditorBackgroundPaletteColor(lightPanelColor[panelType]);
-  var dark = token(tokenPanelColor[panelType], darkPanelColors[panelType]);
+  var dark = tokenDarkPanelColors[panelType];
   var background = themed({
     light: light,
     dark: dark

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

@@ -6,10 +6,9 @@ import { css } from '@emotion/react';
 import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
 import { DN50, N30A } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 var divider = themed({
-  light: token('color.border', N30A),
-  dark: token('color.border', DN50)
+  light: "var(--ds-border, ".concat(N30A, ")"),
+  dark: "var(--ds-border, ".concat(DN50, ")")
 }); // @see typography spreadsheet: https://docs.google.com/spreadsheets/d/1iYusRGCT4PoPfvxbJ8NrgjtfFgXLm5lpDWXzjua1W2E/edit#gid=93913128
 
 export var ruleSharedStyles = function ruleSharedStyles(props) {

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

@@ -6,7 +6,6 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { akEditorShadowZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { shadowClassNames } from '../../ui/OverflowShadow';
 import { shadowObserverClassNames } from '../../ui/OverflowShadow/shadowObserver';
 var shadowWidth = 8;
@@ -24,5 +23,5 @@ var shadowWidth = 8;
  *      background-attachment: local, local, scroll, scroll;
  */
 
-var shadowSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &\n    .", "::before,\n    .", "::after,\n    .", "::before,\n    .", "::after {\n    display: none;\n    position: absolute;\n    pointer-events: none;\n    z-index: ", ";\n    width: ", "px;\n    content: '';\n    /* Scrollbar is outside the content in IE, inset in other browsers. */\n    height: calc(100%);\n  }\n\n  & .", ", .", " {\n    position: relative;\n  }\n\n  & .", "::before {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    top: 0px;\n    left: 0;\n    display: block;\n  }\n\n  & .", "::after {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: calc(100% - ", "px);\n    top: 0px;\n    display: block;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n"])), shadowClassNames.RIGHT_SHADOW, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, shadowClassNames.LEFT_SHADOW, akEditorShadowZIndex, shadowWidth, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, shadowClassNames.LEFT_SHADOW, token('elevation.shadow.overflow.spread', N40A), token('elevation.shadow.overflow.perimeter', 'transparent'), shadowClassNames.RIGHT_SHADOW, token('elevation.shadow.overflow.spread', N40A), token('elevation.shadow.overflow.perimeter', 'transparent'), shadowWidth, shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT);
+var shadowSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &\n    .", "::before,\n    .", "::after,\n    .", "::before,\n    .", "::after {\n    display: none;\n    position: absolute;\n    pointer-events: none;\n    z-index: ", ";\n    width: ", "px;\n    content: '';\n    /* Scrollbar is outside the content in IE, inset in other browsers. */\n    height: calc(100%);\n  }\n\n  & .", ", .", " {\n    position: relative;\n  }\n\n  & .", "::before {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    top: 0px;\n    left: 0;\n    display: block;\n  }\n\n  & .", "::after {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", " 100%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: calc(100% - ", "px);\n    top: 0px;\n    display: block;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n"])), shadowClassNames.RIGHT_SHADOW, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, shadowClassNames.LEFT_SHADOW, akEditorShadowZIndex, shadowWidth, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, shadowClassNames.LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", shadowClassNames.RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", shadowWidth, shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT);
 export { shadowSharedStyle };

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

@@ -9,7 +9,6 @@ import { akEditorBreakoutPadding, akEditorFullWidthLayoutWidth, akEditorSelected
 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;
@@ -38,43 +37,43 @@ 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]):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({
-    light: token('color.border', akEditorTableBorder),
-    dark: token('color.border', akEditorTableBorderDark)
+    light: "var(--ds-border, ".concat(akEditorTableBorder, ")"),
+    dark: "var(--ds-border, ".concat(akEditorTableBorderDark, ")")
+  })(props), "var(--ds-background-neutral-subtle, white)", tableCellMinWidth, themed({
+    light: "var(--ds-border, ".concat(akEditorTableBorder, ")"),
+    dark: "var(--ds-border, ".concat(akEditorTableBorderDark, ")")
   })(props), tableCellPadding, browser.gecko || browser.ie || browser.mac && browser.chrome ? 'background-clip: padding-box;' : '', themed({
     dark: getTableCellBackgroundDarkModeColors
   })(props), themed({
-    light: token('color.background.neutral', akEditorTableToolbar),
-    dark: token('color.background.neutral', akEditorTableToolbarDark)
+    light: "var(--ds-background-neutral, ".concat(akEditorTableToolbar, ")"),
+    dark: "var(--ds-background-neutral, ".concat(akEditorTableToolbarDark, ")")
   })(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({
+    light: "var(--ds-surface-raised, rgb(235, 237, 240))",
+    dark: "var(--ds-surface-raised, rgb(36, 47, 66))"
+  })(props), akEditorSelectedNodeClassName, "var(--ds-border, transparent)", CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, overflowShadow({
     background: themed({
-      light: token('color.background.neutral', 'rgb(235, 237, 240)'),
-      dark: token('color.background.neutral', 'rgb(36, 47, 66)')
+      light: "var(--ds-background-neutral, rgb(235, 237, 240))",
+      dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
     })(props),
     leftCoverWidth: "".concat(gridSize() * 3, "px")
   }), themed({
-    light: token('color.background.neutral', 'rgb(235, 237, 240)'),
-    dark: token('color.background.neutral', 'rgb(36, 47, 66)')
+    light: "var(--ds-background-neutral, rgb(235, 237, 240))",
+    dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
   })(props), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, themed({
-    light: token('color.background.neutral', 'rgb(226, 229, 233)'),
-    dark: token('color.background.neutral', DN20)
+    light: "var(--ds-background-neutral, rgb(226, 229, 233))",
+    dark: "var(--ds-background-neutral, ".concat(DN20, ")")
   })(props), overflowShadow({
     background: themed({
-      light: token('color.background.neutral', 'rgb(235, 237, 240)'),
-      dark: token('color.background.neutral', 'rgb(36, 47, 66)')
+      light: "var(--ds-background-neutral, rgb(235, 237, 240))",
+      dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
     })(props),
     leftCoverWidth: "".concat(gridSize() * 3, "px")
   }), themed({
-    light: token('color.background.neutral', 'rgb(235, 237, 240)'),
-    dark: token('color.background.neutral', 'rgb(36, 47, 66)')
+    light: "var(--ds-background-neutral, rgb(235, 237, 240))",
+    dark: "var(--ds-background-neutral, rgb(36, 47, 66))"
   })(props), themed({
-    light: token('color.background.neutral', 'rgb(226, 229, 233)'),
-    dark: token('color.background.neutral', DN20)
+    light: "var(--ds-background-neutral, rgb(226, 229, 233))",
+    dark: "var(--ds-background-neutral, ".concat(DN20, ")")
   })(props));
 };
 

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

@@ -17,10 +17,9 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { N200, N400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
 import { messages } from './messages';
-var captionWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: 8px;\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), token('color.text.subtle', N400));
-var placeholderStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), token('color.text.subtlest', N200));
+var captionWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: 8px;\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), "var(--ds-text-subtle, ".concat(N400, ")"));
+var placeholderStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"));
 export var CaptionComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(CaptionComponent, _React$Component);
 

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

@@ -20,10 +20,9 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { DN50, DN600, N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "72.0.0";
+var packageVersion = "72.1.0";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat(gridSize(), "px");
 
@@ -49,11 +48,11 @@ var DropList = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "menuWrapper", function (theme) {
       return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      color: ", ";\n      background-color: ", ";\n      border-radius: ", "px;\n      box-shadow: 0 ", "px ", "px -", "px ", ",\n        0 0 1px ", ";\n      box-sizing: border-box;\n      overflow: auto;\n      padding: ", "px 0;\n      max-height: 90vh;\n    "])), themed({
-        light: token('color.text', N900),
-        dark: token('color.text', DN600)
+        light: "var(--ds-text, ".concat(N900, ")"),
+        dark: "var(--ds-text, ".concat(DN600, ")")
       })(theme), themed({
-        light: token('elevation.surface.overlay', N0),
-        dark: token('elevation.surface.overlay', DN50)
+        light: "var(--ds-surface-overlay, ".concat(N0, ")"),
+        dark: "var(--ds-surface-overlay, ".concat(DN50, ")")
       })(theme), borderRadius(), gridSize() / 2, gridSize(), gridSize() / 4, N50A, N60A, gridSize() / 2);
     });
 

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

@@ -13,7 +13,6 @@ import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, rel
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 export var messages = defineMessages({
   collapseNode: {
     id: 'fabric.editor.collapseNode',
@@ -37,16 +36,16 @@ export var messages = defineMessages({
   }
 });
 var BORDER_RADIUS = gridSize() / 2;
-var EXPAND_COLLAPSED_BACKGROUND = token('color.background.neutral.subtle', 'transparent');
+var EXPAND_COLLAPSED_BACKGROUND = "var(--ds-background-neutral-subtle, transparent)";
 var EXPAND_SELECTED_BACKGROUND = themed({
-  light: token('elevation.surface', 'rgba(255, 255, 255, 0.6)'),
-  dark: token('elevation.surface', 'rgba(9, 10, 11, 0.29)')
+  light: "var(--ds-surface, rgba(255, 255, 255, 0.6))",
+  dark: "var(--ds-surface, rgba(9, 10, 11, 0.29))"
 });
-var EXPAND_FOCUSED_BORDER_COLOR = token('color.border.focused', colors.B300);
+var EXPAND_FOCUSED_BORDER_COLOR = "var(--ds-border-focused, ".concat(colors.B300, ")");
 var EXPAND_COLLAPSED_BORDER_COLOR = 'transparent';
 var EXPAND_EXPANDED_BORDER_COLOR = themed({
-  light: token('color.border', colors.N40A),
-  dark: token('color.border', colors.DN50)
+  light: "var(--ds-border, ".concat(colors.N40A, ")"),
+  dark: "var(--ds-border, ".concat(colors.DN50, ")")
 });
 export var ExpandIconWrapper = function ExpandIconWrapper(_ref) {
   var children = _ref.children,
@@ -60,9 +59,9 @@ export var ExpandIconWrapper = function ExpandIconWrapper(_ref) {
 
 var expandIconWrapperStyle = function expandIconWrapperStyle(props) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    transition: transform 0.2s ", ";\n  }\n"])), themed({
-    light: token('color.icon', colors.N90),
-    dark: token('color.icon', '#d9dde3')
-  })(props), gridSize() / 2, token('color.background.neutral.subtle.hovered', colors.N30A), akEditorSwoopCubicBezier);
+    light: "var(--ds-icon, ".concat(colors.N90, ")"),
+    dark: "var(--ds-icon, #d9dde3)"
+  })(props), gridSize() / 2, "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"), akEditorSwoopCubicBezier);
 };
 
 var expandIconWrapperExpandedStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  svg {\n    transform: rotate(90deg);\n  }\n"])));
@@ -89,8 +88,8 @@ var containerStyles = function containerStyles(styleProps) {
   var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
   return function (themeProps) {
     return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", "px;\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", "px;\n\n    &:hover {\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4152\n      border: 1px solid\n        ", ";\n      background: ", ";\n    }\n\n    td > :not(style):first-child,\n    td > style:first-child + * {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps), margin, akEditorSwoopCubicBezier, akEditorSwoopCubicBezier, gridSize(), themed({
-      light: token('color.border', colors.N50A),
-      dark: token('color.border', colors.DN50)
+      light: "var(--ds-border, ".concat(colors.N50A, ")"),
+      dark: "var(--ds-border, ".concat(colors.DN50, ")")
     })(themeProps), EXPAND_SELECTED_BACKGROUND(themeProps));
   };
 };
@@ -103,18 +102,18 @@ var contentStyles = function contentStyles(styleProps) {
 
 var titleInputStyles = function titleInputStyles(props) {
   return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", "px;\n  width: 100%;\n\n  &::placeholder {\n    opacity: 0.6;\n    color: ", ";\n  }\n"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, themed({
-    light: token('color.text.subtlest', colors.N200A),
-    dark: token('color.text.subtlest', colors.DN600)
+    light: "var(--ds-text-subtlest, ".concat(colors.N200A, ")"),
+    dark: "var(--ds-text-subtlest, ".concat(colors.DN600, ")")
   })(props), gridSize() / 2, themed({
-    light: token('color.text.subtlest', colors.N200A),
-    dark: token('color.text.subtlest', colors.DN600)
+    light: "var(--ds-text-subtlest, ".concat(colors.N200A, ")"),
+    dark: "var(--ds-text-subtlest, ".concat(colors.DN600, ")")
   })(props));
 };
 
 var titleContainerStyles = function titleContainerStyles(props) {
   return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 0;\n  display: flex;\n  align-items: flex-start;\n  background: none;\n  border: none;\n  font-size: ", ";\n  width: 100%;\n  color: ", ";\n  overflow: hidden;\n  cursor: pointer;\n  // Prevent browser selection being inside the title container\n  user-select: none;\n\n  &:focus {\n    outline: 0;\n  }\n"])), relativeFontSizeToBase16(fontSize()), themed({
-    light: token('color.text.subtle', colors.N300A),
-    dark: token('color.text.subtle', colors.DN600)
+    light: "var(--ds-text-subtle, ".concat(colors.N300A, ")"),
+    dark: "var(--ds-text-subtle, ".concat(colors.DN600, ")")
   })(props));
 };
 

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

@@ -9,12 +9,11 @@ import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { G400, N200, R400 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
-import { token } from '@atlaskit/tokens';
-var errorColor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), token('color.text.danger', R400));
-var validColor = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), token('color.text.success', G400));
+var errorColor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-text-danger, ".concat(R400, ")"));
+var validColor = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-text-success, ".concat(G400, ")"));
 
 var messageStyle = function messageStyle(props) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), h200(props), token('color.text.subtlest', N200), gridSize() / 2);
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), h200(props), "var(--ds-text-subtlest, ".concat(N200, ")"), gridSize() / 2);
 };
 
 var iconWrapperStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: 4px;\n"])));

package/dist/esm/ui/PortalProvider/PortalProviderThemesProvider.js

@@ -28,16 +28,9 @@ export function PortalProviderThemeProviders(props) {
       mode: mode
     };
   }, [mode]);
-  return (
-    /*#__PURE__*/
-    // TODO: ED-15585
-    // import { ThemeProvider as DeprectateStyledComponentsProvider } from 'styled-components';
-    // <DeprectateStyledComponentsProvider theme={styledComponentsAndEmotionTheme}>
-    // </DeprectateStyledComponentsProvider>
-    React.createElement(ThemeProvider, {
-      theme: styledComponentsAndEmotionTheme
-    }, /*#__PURE__*/React.createElement(AtlaskitTheme.Provider, {
-      value: atlaskitTheme
-    }, children))
-  );
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: styledComponentsAndEmotionTheme
+  }, /*#__PURE__*/React.createElement(AtlaskitTheme.Provider, {
+    value: atlaskitTheme
+  }, children));
 }

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

@@ -10,13 +10,12 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
 import { N30, N50 } from '@atlaskit/theme/colors';
 import { borderRadius, fontSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION_SUBJECT_ID } from '../../analytics';
 import { unsupportedContentMessages } from '../../messages/unsupportedContent';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
-var blockNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), token('color.background.disabled', N30), token('color.border.disabled', N50), borderRadius(), relativeFontSizeToBase16(fontSize()));
+var blockNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), "var(--ds-background-disabled, ".concat(N30, ")"), "var(--ds-border-disabled, ".concat(N50, ")"), borderRadius(), relativeFontSizeToBase16(fontSize()));
 
 var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var node = _ref.node,

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

@@ -10,13 +10,12 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
 import { N30, N50 } from '@atlaskit/theme/colors';
 import { borderRadius, fontSize } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION_SUBJECT_ID } from '../../analytics';
 import { unsupportedContentMessages } from '../../messages/unsupportedContent';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
-var inlineNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 10px;\n  vertical-align: middle;\n  white-space: nowrap;\n"])), token('color.background.disabled', N30), token('color.border.disabled', N50), borderRadius(), relativeFontSizeToBase16(fontSize()));
+var inlineNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 10px;\n  vertical-align: middle;\n  white-space: nowrap;\n"])), "var(--ds-background-disabled, ".concat(N30, ")"), "var(--ds-border-disabled, ".concat(N50, ")"), borderRadius(), relativeFontSizeToBase16(fontSize()));
 
 var UnsupportedInlineNode = function UnsupportedInlineNode(_ref) {
   var node = _ref.node,

package/dist/esm/ui-color/ColorPalette/Palettes/textColorPalette.js

@@ -1,4 +1,4 @@
-import { colorPalette, colorPaletteExtended } from '@atlaskit/adf-schema';
+import { colorPalette } from '@atlaskit/adf-schema';
 import { DEFAULT_BORDER_COLOR } from './common';
 import getColorMessage from './getColorMessage';
 import paletteMessages from './paletteMessages';
@@ -16,10 +16,6 @@ var mapPaletteColor = function mapPaletteColor(label, color) {
 
 
 export var textColorPalette = [];
-export var textColorPaletteExtended = [];
 colorPalette.forEach(function (label, color) {
   textColorPalette.push(mapPaletteColor(label, color));
-});
-colorPaletteExtended.forEach(function (label, color) {
-  textColorPaletteExtended.push(mapPaletteColor(label, color));
 });

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

@@ -4,7 +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, useThemeObserver } from '@atlaskit/tokens';
+import { useThemeObserver } from '@atlaskit/tokens';
 import Color from './Color';
 import getColorMessage from './Palettes/getColorMessage';
 import { newDarkPalette, newLightPalette } from './Palettes/paletteMessagesTokenModeNames';
@@ -31,7 +31,7 @@ function getCheckMarkColor(color, textPalette) {
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 
 
-  return contrastColor === N0 ? token('color.icon.inverse', N0) : token('color.icon', N500);
+  return contrastColor === N0 ? "var(--ds-icon-inverse, ".concat(N0, ")") : "var(--ds-icon, ".concat(N500, ")");
 }
 
 var ColorPalette = function ColorPalette(props) {

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

@@ -4,5 +4,5 @@ export { default as cellBackgroundColorPalette } from './ColorPalette/Palettes/c
 export { default as colorPaletteMessages } from './ColorPalette/Palettes/paletteMessages';
 export { panelBackgroundPalette, panelDarkModeBackgroundPalette } from './ColorPalette/Palettes/panelBackgroundPalette';
 export { lightModeStatusColorPalette, darkModeStatusColorPalette } from './ColorPalette/Palettes/statusColorPalette';
-export { textColorPalette, textColorPaletteExtended } from './ColorPalette/Palettes/textColorPalette';
+export { textColorPalette } from './ColorPalette/Palettes/textColorPalette';
 export { DEFAULT_BORDER_COLOR } from './ColorPalette/Palettes/common';

package/dist/esm/ui-menu/DropdownMenu/index.js

@@ -23,14 +23,13 @@ import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CustomItem, MenuGroup } from '@atlaskit/menu';
 import { B100, DN600, DN80, N70, N900 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import { withReactEditorViewOuterListeners } from '../../ui-react';
 import DropList from '../../ui/DropList';
 import Popup from '../../ui/Popup';
 import { MenuArrowKeyNavigationProvider } from '../MenuArrowKeyNavigationProvider';
 var wrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
-var focusedMenuItemStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n  outline: none;\n"])), token('color.border.focused', B100));
+var focusedMenuItemStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n  outline: none;\n"])), "var(--ds-border-focused, ".concat(B100, ")"));
 
 var buttonStyles = function buttonStyles(isActive) {
   return function (theme) {
@@ -38,20 +37,20 @@ var buttonStyles = function buttonStyles(isActive) {
       /**
        * Hack for item to imitate old dropdown-menu selected styles
        */
-      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      > span,\n      > span:hover,\n      > span:active {\n        background: ", ";\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), token('color.background.selected', '#6c798f'), token('color.text', '#fff'), focusedMenuItemStyle);
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      > span,\n      > span:hover,\n      > span:active {\n        background: ", ";\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), "var(--ds-background-selected, #6c798f)", "var(--ds-text, #fff)", focusedMenuItemStyle);
     } else {
       return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      > span:hover[aria-disabled='false'] {\n        color: ", ";\n        background-color: ", ";\n      }\n      > span:active[aria-disabled='false'] {\n        background-color: ", ";\n      }\n      > span[aria-disabled='true'] {\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), themed({
-        light: token('color.text', N900),
-        dark: token('color.text', DN600)
+        light: "var(--ds-text, ".concat(N900, ")"),
+        dark: "var(--ds-text, ".concat(DN600, ")")
       })(theme), themed({
-        light: token('color.background.neutral.subtle.hovered', 'rgb(244, 245, 247)'),
-        dark: token('color.background.neutral.subtle.hovered', 'rgb(59, 71, 92)')
+        light: "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))",
+        dark: "var(--ds-background-neutral-subtle-hovered, rgb(59, 71, 92))"
       })(theme), themed({
-        light: token('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)'),
-        dark: token('color.background.neutral.subtle.pressed', 'rgb(179, 212, 255)')
+        light: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))",
+        dark: "var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))"
       })(theme), themed({
-        light: token('color.text.disabled', N70),
-        dark: token('color.text.disabled', DN80)
+        light: "var(--ds-text-disabled, ".concat(N70, ")"),
+        dark: "var(--ds-text-disabled, ".concat(DN80, ")")
       })(theme), focusedMenuItemStyle); // The deafut focus-visible style is removed to ensure consistency across browsers
     }
   };

package/dist/esm/version.json

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

package/dist/types/analytics/types/enums.d.ts

@@ -37,7 +37,7 @@ export declare enum ACTION {
     DISPATCHED_VALID_TRANSACTION = "dispatchedValidTransaction",
     EDITED = "edited",
     EDITOR_CRASHED = "unhandledErrorCaught",
-    EDITOR_CRASHED_ADDITIONAL_INFORMATION = "unhandledErrorCaughtAdditionalInfo",
+    EDITOR_CRASHED_ADDITIONAL_INFORMATION = "unhandledErrorCaughtAdditionalInfov2",
     EDITOR_MOUNTED = "mounted",
     EDITOR_TTI = "tti",
     EDITOR_CONTENT_RETRIEVAL_PERFORMED = "contentRetrievalPerformed",

package/dist/types/analytics/types/events.d.ts

@@ -109,9 +109,10 @@ export declare type ErrorEventAttributes = {
 };
 declare type ComponentCrashErrorAEP = OperationalAEP<ACTION.EDITOR_CRASHED, ACTION_SUBJECT.FLOATING_CONTEXTUAL_BUTTON | ACTION_SUBJECT.PLUGIN_SLOT | ACTION_SUBJECT.REACT_NODE_VIEW | ACTION_SUBJECT.TABLES_PLUGIN | ACTION_SUBJECT.FLOATING_TOOLBAR_PLUGIN | ACTION_SUBJECT.EDITOR, ACTION_SUBJECT_ID | FLOATING_CONTROLS_TITLE, ErrorEventAttributes, undefined>;
 declare type ComponentCrashAdditionalInfoErrorAEP = OperationalAEP<ACTION.EDITOR_CRASHED_ADDITIONAL_INFORMATION, ACTION_SUBJECT.EDITOR, undefined, {
-    errorStack: string;
     errorId: string;
-}, undefined>;
+}, {
+    errorStack: string;
+}>;
 declare type SmartLinkErrorAEP = OperationalAEP<ACTION.ERRORED, ACTION_SUBJECT.SMART_LINK, undefined, {
     error: string;
     errorStack?: string;

package/dist/types/analytics/types/experimental-events.d.ts

@@ -6,7 +6,6 @@ declare type ExperimentalAEP<Action, ActionSubject, ActionSubjectId, Attributes>
 }, undefined>;
 export interface TextColorSelectedAttr {
     color: string;
-    isNewColor: boolean;
 }
 export declare type TextColorSelectedAEP = ExperimentalAEP<ACTION.FORMATTED, ACTION_SUBJECT.TEXT, ACTION_SUBJECT_ID.FORMAT_COLOR, TextColorSelectedAttr>;
 export interface TextColorShowPaletteToggleAttr {

package/dist/types/analytics/types/general-events.d.ts

@@ -99,7 +99,9 @@ declare type DispatchedTransactionAEP = OperationalAEP<ACTION.TRANSACTION_DISPAT
 }, undefined>;
 declare type TransactionMutatedAEP = OperationalAEP<ACTION.TRANSACTION_MUTATED_AFTER_DISPATCH, ACTION_SUBJECT.EDITOR, undefined, {
     pluginKey: string;
-}, undefined>;
+}, {
+    stack: string | undefined;
+}>;
 declare type WithPluginStateCalledAEP = OperationalAEP<ACTION.WITH_PLUGIN_STATE_CALLED, ACTION_SUBJECT.EDITOR, undefined, {
     plugin: string;
     duration: number;

package/dist/types/types/feature-flags.d.ts

@@ -60,12 +60,13 @@ export declare type FeatureFlags = {
     placeholderBracketHint?: boolean;
     /**
      * @description
-     * Enable additional text colours within the colour palette.
+     * Whether placeholder hints were provided (`string[] => boolean`)
+     * Placeholder text values to display on new empty lines.
      *
-     * @see https://product-fabric.atlassian.net/l/c/YhyvfWqg
+     * @see https://product-fabric.atlassian.net/l/c/GG1Yv9cK
      * @default false
      */
-    moreTextColors?: boolean;
+    placeholderHints?: boolean;
     /**
      * @description
      * Enable find/replace functionality within the editor
@@ -219,13 +220,22 @@ export declare type FeatureFlags = {
      */
     twoLineEditorToolbar?: boolean;
     /**
-     * Prevent transactions from being mutated (e.g. apply, filterTransaction,
-     * appendTransaction) after being dispatched
+     * Prevent transactions from being mutated (e.g. apply, filterTransaction, appendTransaction) after being dispatched,
+     * will throw on transaction dispatch unless saferDispatchedTransactionsAnalyticsOnly is enabled.
      * @see https://product-fabric.atlassian.net/wiki/spaces/E/pages/3131836958/Editor+DACI+013+Avoid+content+loss+with+bad+transactions+Ghost+Steps
      * @see https://product-fabric.atlassian.net/browse/ED-14002
      * @default false
      */
     saferDispatchedTransactions?: boolean;
+    /**
+     * Detect when transaction is being mutated after being dispatched and emit analytics event if so (e.g. apply, filterTransaction,
+     * appendTransaction)
+     * @see https://product-fabric.atlassian.net/wiki/spaces/E/pages/3131836958/Editor+DACI+013+Avoid+content+loss+with+bad+transactions+Ghost+Steps
+     * @see https://product-fabric.atlassian.net/browse/ED-14002
+     * @see https://product-fabric.atlassian.net/wiki/spaces/AS/pages/3321201329/Rolling+out+safer-dispatched+transaction
+     * @default false
+     */
+    saferDispatchedTransactionsAnalyticsOnly?: boolean;
     /**
      * @description
      * Enable new collab service