@atlaskit/editor-common 82.2.2 → 82.4.0

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

@@ -119,6 +119,7 @@ var PanelTextInput = /*#__PURE__*/function (_PureComponent) {
         inputId = _this$props2.inputId;
       var value = this.state.value;
       return jsx("input", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         css: [panelTextInput, width !== undefined && panelTextInputWithCustomWidth(width)],
         role: role,
         "aria-autocomplete": ariaAutoComplete ? 'list' : undefined,

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

@@ -2,7 +2,9 @@ import { css } from '@emotion/react';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { B100, N100, N30, N400 } from '@atlaskit/theme/colors';
 // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var panelTextInput = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   'input&': {
     background: 'transparent',
     border: "2px solid ".concat("var(--ds-border, ".concat(N30, ")")),
@@ -10,11 +12,13 @@ export var panelTextInput = css({
     boxSizing: 'content-box',
     color: "var(--ds-text-subtle, ".concat(N400, ")"),
     flexGrow: 1,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     fontSize: relativeFontSizeToBase16(13),
     lineHeight: '20px',
     padding: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-400, 32px)", " ", "var(--ds-space-075, 6px)", " ", "var(--ds-space-100, 8px)"),
     minWidth: '145px',
     /* Hides IE10+ built-in [x] clear input button */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&::-ms-clear': {
       display: 'none'
     },
@@ -29,7 +33,9 @@ export var panelTextInput = css({
 });
 export var panelTextInputWithCustomWidth = function panelTextInputWithCustomWidth(width) {
   return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     'input&': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       width: "".concat(width, "px")
     }
   });

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

@@ -287,6 +287,7 @@ var Popup = /*#__PURE__*/function (_React$Component) {
         style: _objectSpread(_objectSpread({
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           position: 'absolute',
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           zIndex: this.props.zIndex || akEditorFloatingPanelZIndex
         }, position), this.props.style),
         "aria-label": ariaLabel,

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

@@ -14,10 +14,12 @@ import { getUnsupportedContent } from '../unsupported-content-helper';
 var blockNodeStyle = css({
   background: "var(--ds-background-disabled, ".concat(N30, ")"),
   border: "1px dashed ".concat("var(--ds-border-disabled, ".concat(N50, ")")),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   borderRadius: "".concat(borderRadius(), "px"),
   boxSizing: 'border-box',
   cursor: 'default',
   display: 'flex',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   fontSize: relativeFontSizeToBase16(fontSize()),
   margin: "var(--ds-space-100, 8px)".concat(" 0"),
   minHeight: '24px',

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

@@ -15,10 +15,12 @@ var inlineNodeStyle = css({
   alignItems: 'center',
   background: "var(--ds-background-disabled, ".concat(N30, ")"),
   border: "1px dashed ".concat("var(--ds-border-disabled, ".concat(N50, ")")),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   borderRadius: "".concat(borderRadius(), "px"),
   boxSizing: 'border-box',
   cursor: 'default',
   display: 'inline-flex',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   fontSize: relativeFontSizeToBase16(fontSize()),
   margin: "0 ".concat("var(--ds-space-025, 2px)"),
   minHeight: '24px',

package/dist/esm/ui/clear-next-sibling-margin-top.js

@@ -3,9 +3,11 @@ import { css } from '@emotion/react';
 
 // We use !important to ensure next sibling gets the margin reset no matter what
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var clearNextSiblingMarginTopStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& + *': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     marginTop: '0 !important'
   }
 });
@@ -13,7 +15,9 @@ var textElements = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 var nextSiblingBlockMarkContentSelectors = textElements.map(function (elem) {
   return "+ .fabric-editor-block-mark > ".concat(elem);
 }).join(',');
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var clearNextSiblingBlockMarkMarginTopStyle = css(_defineProperty({}, "".concat(nextSiblingBlockMarkContentSelectors), {
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
   marginTop: '0 !important'
 }));

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

@@ -11,15 +11,64 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N0 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { buttonStyle, buttonWrapperStyle } from './styles';
-var Color = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Color, _PureComponent);
-  var _super = _createSuper(Color);
-  function Color() {
+function FunctionalComponentColor(props) {
+  var autoFocus = props.autoFocus,
+    tabIndex = props.tabIndex,
+    value = props.value,
+    label = props.label,
+    isSelected = props.isSelected,
+    borderColor = props.borderColor,
+    _props$checkMarkColor = props.checkMarkColor,
+    checkMarkColor = _props$checkMarkColor === void 0 ? N0 : _props$checkMarkColor,
+    hexToPaletteColor = props.hexToPaletteColor,
+    decorator = props.decorator;
+  var colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
+  var onMouseDown = function onMouseDown(e) {
+    e.preventDefault();
+  };
+  var onClick = function onClick(e) {
+    var onClick = props.onClick,
+      value = props.value,
+      label = props.label;
+    e.preventDefault();
+    onClick(value, label);
+  };
+  return jsx(Tooltip, {
+    content: label
+  }, jsx("span", {
+    css: buttonWrapperStyle
+  }, jsx("button", {
+    type: "button",
+    css: buttonStyle,
+    "aria-label": label,
+    role: "radio",
+    "aria-checked": isSelected,
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    tabIndex: tabIndex
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: "".concat(isSelected ? 'selected' : ''),
+    style: {
+      backgroundColor: colorStyle || 'transparent',
+      border: "1px solid ".concat(borderColor)
+    },
+    autoFocus: autoFocus
+  }, !decorator && isSelected && jsx(EditorDoneIcon, {
+    primaryColor: checkMarkColor,
+    label: ""
+  }), decorator)));
+}
+var ClassComponentColor = /*#__PURE__*/function (_PureComponent) {
+  _inherits(ClassComponentColor, _PureComponent);
+  var _super = _createSuper(ClassComponentColor);
+  function ClassComponentColor() {
     var _this;
-    _classCallCheck(this, Color);
+    _classCallCheck(this, ClassComponentColor);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -37,7 +86,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
     });
     return _this;
   }
-  _createClass(Color, [{
+  _createClass(ClassComponentColor, [{
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
@@ -56,7 +105,9 @@ var Color = /*#__PURE__*/function (_PureComponent) {
       }, jsx("span", {
         css: buttonWrapperStyle
       }, jsx("button", {
-        type: "button",
+        type: "button"
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+        ,
         css: buttonStyle,
         "aria-label": label,
         role: "radio",
@@ -78,6 +129,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
       }))));
     }
   }]);
-  return Color;
+  return ClassComponentColor;
 }(PureComponent);
+var Color = getBooleanFF('platform.editor.transparent-diagonal-decorator') ? FunctionalComponentColor : ClassComponentColor;
 export default Color;

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

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { N0, N50, N900 } from '@atlaskit/theme/colors';
 /** this is not new usage - old code extracted from editor-core */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var buttonStyle = css({
   height: '26px',
   width: '26px',
@@ -16,6 +17,7 @@ export var buttonStyle = css({
 
 /** this is not new usage - old code extracted from editor-core */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var buttonWrapperStyle = css({
   border: '1px solid transparent',
   fontSize: 0,
@@ -24,6 +26,7 @@ export var buttonWrapperStyle = css({
   padding: "var(--ds-space-025, 2px)",
   borderRadius: '6px',
   '&:focus-within, &:focus, &:hover': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     borderColor: "".concat("var(--ds-border, ".concat(N50, ")"), " !important")
   }
 });

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

@@ -1,15 +1,51 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
 import { backgroundColorPalette } from '@atlaskit/adf-schema';
+import Icon from '@atlaskit/icon';
+import { useThemeObserver } from '@atlaskit/tokens';
 import { DEFAULT_BORDER_COLOR } from './common';
 import getColorMessage from './getColorMessage';
 import paletteMessages from './paletteMessages';
 import { mapPaletteColor } from './textColorPalette';
 export var REMOVE_HIGHLIGHT_COLOR = '#00000000';
+var DiagonalLineGlyph = function DiagonalLineGlyph() {
+  return jsx("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, jsx("rect", {
+    width: "24",
+    height: "24",
+    fill: "white",
+    fillOpacity: "0.01"
+  }), jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.2038 7.70388C17.5955 8.09565 17.5941 8.73128 17.2005 9.12127L9.1213 17.1277C8.73027 17.5152 8.09958 17.5138 7.71031 17.1245C7.31854 16.7328 7.31997 16.0971 7.71351 15.7071L15.7928 7.70069C16.1838 7.31318 16.8145 7.31461 17.2038 7.70388Z",
+    fill: "currentColor",
+    fillOpacity: "0.5"
+  }));
+};
+export var EditorDiagonalLineIcon = function EditorDiagonalLineIcon() {
+  var _useThemeObserver = useThemeObserver(),
+    colorMode = _useThemeObserver.colorMode;
+  var primaryColor = colorMode === 'dark' ? "var(--ds-background-accent-gray-bolder, #626F86)" : "var(--ds-background-accent-gray-subtle, #8590A2)";
+  return jsx(Icon, {
+    glyph: DiagonalLineGlyph,
+    label: "",
+    primaryColor: primaryColor
+  });
+};
 export var highlightColorPalette = [{
   value: REMOVE_HIGHLIGHT_COLOR,
   label: 'No color',
   // Mostly informative, only used for analytics
   border: DEFAULT_BORDER_COLOR,
-  message: getColorMessage(paletteMessages, 'no-color')
+  message: getColorMessage(paletteMessages, 'no-color'),
+  decorator: jsx(EditorDiagonalLineIcon, null)
 }];
 backgroundColorPalette.forEach(function (label, color) {
   highlightColorPalette.push(mapPaletteColor(label, color));

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

@@ -123,7 +123,7 @@ export default defineMessages({
   // Colors only used in highlight palette
   'no-color': {
     id: 'fabric.theme.no-color',
-    defaultMessage: 'Remove highlight',
+    defaultMessage: 'No highlight',
     description: 'Tooltip for the no color option in the highlight color palette in the main editor toolbar'
   },
   lime: {

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

@@ -54,6 +54,7 @@ var ColorPalette = function ColorPalette(props) {
   }, [palette, cols]);
   return jsx(React.Fragment, null, colorsPerRow.map(function (row) {
     return jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
       css: colorPaletteWrapper
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
@@ -64,7 +65,8 @@ var ColorPalette = function ColorPalette(props) {
       var value = _ref.value,
         label = _ref.label,
         border = _ref.border,
-        message = _ref.message;
+        message = _ref.message,
+        decorator = _ref.decorator;
       if (paletteColorTooltipMessages) {
         if (tokenTheme === 'dark') {
           message = getColorMessage(paletteColorTooltipMessages.dark, value.toUpperCase());
@@ -81,7 +83,8 @@ var ColorPalette = function ColorPalette(props) {
         onClick: onClick,
         isSelected: value === selectedColor,
         checkMarkColor: getCheckMarkColor(value, useIconToken),
-        hexToPaletteColor: hexToPaletteColor
+        hexToPaletteColor: hexToPaletteColor,
+        decorator: decorator
       });
     }));
   }));

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

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var colorPaletteWrapper = css({
   padding: "0 ".concat("var(--ds-space-100, 8px)"),
   /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */

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

@@ -25,6 +25,7 @@ var colorPickerExpandContainer = css({
 // Control the size of color picker buttons and preview
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4134
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 var colorPickerWrapper = function colorPickerWrapper() {
   return css({
     borderRadius: "var(--ds-border-radius, 3px)",
@@ -168,17 +169,23 @@ var ColorPickerButton = function ColorPickerButton(props) {
     return css({
       padding: "var(--ds-space-075, 6px)".concat(" 10px"),
       backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       height: "".concat(!!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) ? 'inherit' : ''),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
       '&:before': {
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
         alignSelf: 'center',
         content: "''",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         border: "1px solid ".concat(DEFAULT_BORDER_COLOR),
         borderRadius: "var(--ds-border-radius, 3px)",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         backgroundColor: currentColor || 'transparent',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         width: ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         height: ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px',
         padding: 0,
         margin: "0px ".concat("var(--ds-space-025, 2px)")

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

@@ -34,6 +34,7 @@ import { ArrowKeyNavigationProvider } from '../ArrowKeyNavigationProvider';
 import { ArrowKeyNavigationType } from '../ArrowKeyNavigationProvider/types';
 var wrapper = css({
   /* tooltip in ToolbarButton is display:block */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& > div > div': {
     display: 'flex'
   }

package/dist/esm/utils/annotation/index.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var canApplyAnnotationOnRange = function canApplyAnnotationOnRange(rangeSelection, doc, schema) {
   var from = rangeSelection.from,
@@ -89,4 +90,25 @@ export function containsAnyAnnotations(slice, state) {
     });
   });
   return hasAnnotation;
+}
+
+/**
+ * This returns a list of node names that are inline nodes in the range.
+ */
+export function getRangeInlineNodeNames(_ref) {
+  var doc = _ref.doc,
+    pos = _ref.pos;
+  if (!getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+    return undefined;
+  }
+  var nodeNames = new Set();
+  doc.nodesBetween(pos.from, pos.to, function (node) {
+    if (node.isInline) {
+      nodeNames.add(node.type.name);
+    }
+  });
+
+  // We sort the list alphabetically to make human consumption of the list easier (in tools like the analytics extension)
+  var sortedNames = _toConsumableArray(nodeNames).sort();
+  return sortedNames;
 }

package/dist/esm/utils/index.js

@@ -2,7 +2,7 @@ import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { hasDocAsParent } from './document';
 import { isEmptyParagraph } from './editor-core-utils';
 export { shouldAutoLinkifyMatch } from './should-auto-linkify-tld';
-export { canApplyAnnotationOnRange, containsAnyAnnotations, getAnnotationIdsFromRange, hasAnnotationMark } from './annotation';
+export { canApplyAnnotationOnRange, containsAnyAnnotations, getAnnotationIdsFromRange, hasAnnotationMark, getRangeInlineNodeNames } from './annotation';
 export { getExtensionLozengeData } from './macro';
 export { default as browser } from './browser';
 export { default as ErrorReporter } from './error-reporter';

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

@@ -1,6 +1,8 @@
-import type { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID } from './enums';
+import type { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, INPUT_METHOD } from './enums';
 import type { TrackAEP } from './utils';
-export type HighlightToolbarToggleAEP = TrackAEP<ACTION.OPENED | ACTION.CLOSED, ACTION_SUBJECT.TOOLBAR, ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR, undefined, undefined>;
+export type HighlightToolbarToggleAEP = TrackAEP<ACTION.OPENED | ACTION.CLOSED, ACTION_SUBJECT.TOOLBAR, ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR, {
+    inputMethod: INPUT_METHOD.TOOLBAR | INPUT_METHOD.SHORTCUT;
+}, undefined>;
 export type HighlightTextAEP = TrackAEP<ACTION.FORMATTED, ACTION_SUBJECT.TEXT, ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR, {
     newColor: string;
     previousColor: string;

package/dist/types/analytics/types/inline-comment-events.d.ts

@@ -6,6 +6,7 @@ export type AnnotationAEPAttributes = undefined | {} | AnnotationDraftAEPAttribu
 export type AnnotationDraftAEPAttributes = {
     inputMethod: INPUT_METHOD.TOOLBAR | INPUT_METHOD.SHORTCUT;
     overlap: number;
+    inlineNodeNames?: string[];
 };
 export type AnnotationResolvedAEPAttributes = {
     method: RESOLVE_METHOD;

package/dist/types/keymaps/index.d.ts

@@ -89,6 +89,7 @@ export declare const selectTable: Keymap;
 export declare const increaseMediaSize: Keymap;
 export declare const decreaseMediaSize: Keymap;
 export declare const activateVideoControls: Keymap;
+export declare const toggleHighlightPalette: Keymap;
 export declare function tooltip(keymap?: Keymap, description?: string): string | undefined;
 export declare const ToolTipContent: React.MemoExoticComponent<({ description, shortcutOverride, keymap, }: {
     description?: string | React.ReactNode;

package/dist/types/messages/help-dialog.d.ts

@@ -84,4 +84,9 @@ export declare const helpDialogMessages: {
         defaultMessage: string;
         description: string;
     };
+    highlightColor: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

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

@@ -285,6 +285,14 @@ export type FeatureFlags = {
      * @default false
      */
     commentsOnMediaAnalytics?: boolean;
+    /**
+     * @description
+     * Enables block elements drag and drop
+     *
+     * @see https://product-fabric.atlassian.net/browse/ED-22939
+     * @default false
+     */
+    elementDragAndDrop?: boolean;
 };
 export type FeatureFlagKey = keyof FeatureFlags;
 export type GetEditorFeatureFlags = () => FeatureFlags;

package/dist/types/ui-color/ColorPalette/Color/index.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { PureComponent } from 'react';
+import React, { PureComponent, type ReactElement } from 'react';
 import { jsx } from '@emotion/react';
 export interface Props {
     value: string;
@@ -11,10 +11,13 @@ export interface Props {
     checkMarkColor?: string;
     autoFocus?: boolean;
     hexToPaletteColor?: (hexColor: string) => string | undefined;
+    decorator?: ReactElement;
 }
-declare class Color extends PureComponent<Props> {
+declare function FunctionalComponentColor(props: Props): jsx.JSX.Element;
+declare class ClassComponentColor extends PureComponent<Props> {
     render(): jsx.JSX.Element;
     onMouseDown: (e: React.MouseEvent<{}>) => void;
     onClick: (e: React.MouseEvent<{}>) => void;
 }
+declare const Color: typeof ClassComponentColor | typeof FunctionalComponentColor;
 export default Color;

package/dist/types/ui-color/ColorPalette/Palettes/highlightColorPalette.d.ts

@@ -1,3 +1,6 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import type { PaletteColor } from './type';
 export declare const REMOVE_HIGHLIGHT_COLOR = "#00000000";
+export declare const EditorDiagonalLineIcon: () => jsx.JSX.Element;
 export declare const highlightColorPalette: Array<PaletteColor>;

package/dist/types/ui-color/ColorPalette/Palettes/type.d.ts

@@ -1,9 +1,11 @@
+import { type ReactElement } from 'react';
 import { type MessageDescriptor } from 'react-intl-next';
 export interface PaletteColor {
     value: string;
     label: string;
     border: string;
     message?: MessageDescriptor;
+    decorator?: ReactElement;
 }
 export type Palette = Array<PaletteColor>;
 export type PaletteTooltipMessages = {

package/dist/types/utils/annotation/index.d.ts

@@ -8,4 +8,14 @@ export declare const canApplyAnnotationOnRange: (rangeSelection: Range, doc: PMN
 export declare const getAnnotationIdsFromRange: (rangeSelection: Range, doc: PMNode, schema: Schema) => string[];
 export declare function hasAnnotationMark(node: PMNode, state: EditorState): boolean;
 export declare function containsAnyAnnotations(slice: Slice, state: EditorState): boolean;
+/**
+ * This returns a list of node names that are inline nodes in the range.
+ */
+export declare function getRangeInlineNodeNames({ doc, pos, }: {
+    doc: PMNode;
+    pos: {
+        from: number;
+        to: number;
+    };
+}): string[] | undefined;
 export {};

package/dist/types/utils/index.d.ts

@@ -2,7 +2,7 @@ import type { Node as PMNode, ResolvedPos, Schema } from '@atlaskit/editor-prose
 import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 export { shouldAutoLinkifyMatch } from './should-auto-linkify-tld';
-export { canApplyAnnotationOnRange, containsAnyAnnotations, getAnnotationIdsFromRange, hasAnnotationMark, } from './annotation';
+export { canApplyAnnotationOnRange, containsAnyAnnotations, getAnnotationIdsFromRange, hasAnnotationMark, getRangeInlineNodeNames, } from './annotation';
 export { getExtensionLozengeData } from './macro';
 export type { Params } from './macro';
 export { default as browser } from './browser';

package/dist/types-ts4.5/analytics/types/highlight-events.d.ts

@@ -1,6 +1,8 @@
-import type { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID } from './enums';
+import type { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, INPUT_METHOD } from './enums';
 import type { TrackAEP } from './utils';
-export type HighlightToolbarToggleAEP = TrackAEP<ACTION.OPENED | ACTION.CLOSED, ACTION_SUBJECT.TOOLBAR, ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR, undefined, undefined>;
+export type HighlightToolbarToggleAEP = TrackAEP<ACTION.OPENED | ACTION.CLOSED, ACTION_SUBJECT.TOOLBAR, ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR, {
+    inputMethod: INPUT_METHOD.TOOLBAR | INPUT_METHOD.SHORTCUT;
+}, undefined>;
 export type HighlightTextAEP = TrackAEP<ACTION.FORMATTED, ACTION_SUBJECT.TEXT, ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR, {
     newColor: string;
     previousColor: string;

package/dist/types-ts4.5/analytics/types/inline-comment-events.d.ts

@@ -6,6 +6,7 @@ export type AnnotationAEPAttributes = undefined | {} | AnnotationDraftAEPAttribu
 export type AnnotationDraftAEPAttributes = {
     inputMethod: INPUT_METHOD.TOOLBAR | INPUT_METHOD.SHORTCUT;
     overlap: number;
+    inlineNodeNames?: string[];
 };
 export type AnnotationResolvedAEPAttributes = {
     method: RESOLVE_METHOD;

package/dist/types-ts4.5/keymaps/index.d.ts

@@ -89,6 +89,7 @@ export declare const selectTable: Keymap;
 export declare const increaseMediaSize: Keymap;
 export declare const decreaseMediaSize: Keymap;
 export declare const activateVideoControls: Keymap;
+export declare const toggleHighlightPalette: Keymap;
 export declare function tooltip(keymap?: Keymap, description?: string): string | undefined;
 export declare const ToolTipContent: React.MemoExoticComponent<({ description, shortcutOverride, keymap, }: {
     description?: string | React.ReactNode;

package/dist/types-ts4.5/messages/help-dialog.d.ts

@@ -84,4 +84,9 @@ export declare const helpDialogMessages: {
         defaultMessage: string;
         description: string;
     };
+    highlightColor: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

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

@@ -285,6 +285,14 @@ export type FeatureFlags = {
      * @default false
      */
     commentsOnMediaAnalytics?: boolean;
+    /**
+     * @description
+     * Enables block elements drag and drop
+     *
+     * @see https://product-fabric.atlassian.net/browse/ED-22939
+     * @default false
+     */
+    elementDragAndDrop?: boolean;
 };
 export type FeatureFlagKey = keyof FeatureFlags;
 export type GetEditorFeatureFlags = () => FeatureFlags;

package/dist/types-ts4.5/ui-color/ColorPalette/Color/index.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { PureComponent } from 'react';
+import React, { PureComponent, type ReactElement } from 'react';
 import { jsx } from '@emotion/react';
 export interface Props {
     value: string;
@@ -11,10 +11,13 @@ export interface Props {
     checkMarkColor?: string;
     autoFocus?: boolean;
     hexToPaletteColor?: (hexColor: string) => string | undefined;
+    decorator?: ReactElement;
 }
-declare class Color extends PureComponent<Props> {
+declare function FunctionalComponentColor(props: Props): jsx.JSX.Element;
+declare class ClassComponentColor extends PureComponent<Props> {
     render(): jsx.JSX.Element;
     onMouseDown: (e: React.MouseEvent<{}>) => void;
     onClick: (e: React.MouseEvent<{}>) => void;
 }
+declare const Color: typeof ClassComponentColor | typeof FunctionalComponentColor;
 export default Color;

package/dist/types-ts4.5/ui-color/ColorPalette/Palettes/highlightColorPalette.d.ts

@@ -1,3 +1,6 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import type { PaletteColor } from './type';
 export declare const REMOVE_HIGHLIGHT_COLOR = "#00000000";
+export declare const EditorDiagonalLineIcon: () => jsx.JSX.Element;
 export declare const highlightColorPalette: Array<PaletteColor>;

package/dist/types-ts4.5/ui-color/ColorPalette/Palettes/type.d.ts

@@ -1,9 +1,11 @@
+import { type ReactElement } from 'react';
 import { type MessageDescriptor } from 'react-intl-next';
 export interface PaletteColor {
     value: string;
     label: string;
     border: string;
     message?: MessageDescriptor;
+    decorator?: ReactElement;
 }
 export type Palette = Array<PaletteColor>;
 export type PaletteTooltipMessages = {