@atlaskit/editor-common 82.0.1 → 82.1.1

package/dist/cjs/utils/validator.js

@@ -252,30 +252,36 @@ var getValidNode = exports.getValidNode = function getValidNode(originalNode) {
       case 'date':
         {
           if (attrs && attrs.timestamp) {
-            return {
+            return _objectSpread({
               type: type,
               attrs: attrs
-            };
+            }, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz') ? {
+              marks: marks
+            } : {});
           }
           break;
         }
       case 'status':
         {
           if (attrs && attrs.text && attrs.color) {
-            return {
+            return _objectSpread({
               type: type,
               attrs: attrs
-            };
+            }, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz') ? {
+              marks: marks
+            } : {});
           }
           break;
         }
       case 'emoji':
         {
           if (attrs && attrs.shortName) {
-            return {
+            return _objectSpread({
               type: type,
               attrs: attrs
-            };
+            }, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz') ? {
+              marks: marks
+            } : {});
           }
           break;
         }
@@ -292,26 +298,15 @@ var getValidNode = exports.getValidNode = function getValidNode(originalNode) {
         }
       case 'inlineCard':
         {
-          if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes')) {
-            var inlineCardNode = {
-              type: type
-            };
-            if (attrs && (attrs.datasource && !attrs.url || attrs.url && (0, _adfSchema.isSafeUrl)(attrs.url) || attrs.data && attrs.data.url && (0, _adfSchema.isSafeUrl)(attrs.data.url))) {
-              inlineCardNode.attrs = _objectSpread({}, attrs);
-            }
-            if (marks) {
-              inlineCardNode.marks = (0, _toConsumableArray2.default)(marks);
-            }
-            return inlineCardNode;
-          } else {
-            if (attrs && (attrs.datasource && !attrs.url || attrs.url && (0, _adfSchema.isSafeUrl)(attrs.url) || attrs.data && attrs.data.url && (0, _adfSchema.isSafeUrl)(attrs.data.url))) {
-              return {
-                type: type,
-                attrs: attrs
-              };
-            }
-            break;
+          if (attrs && (attrs.datasource && !attrs.url || attrs.url && (0, _adfSchema.isSafeUrl)(attrs.url) || attrs.data && attrs.data.url && (0, _adfSchema.isSafeUrl)(attrs.data.url))) {
+            return _objectSpread({
+              type: type,
+              attrs: attrs
+            }, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes') ? {
+              marks: marks
+            } : {});
           }
+          break;
         }
       case 'blockCard':
         {
@@ -507,14 +502,16 @@ var getValidNode = exports.getValidNode = function getValidNode(originalNode) {
             mentionText = text || '@unknown';
           }
           if (mentionText && mentionId) {
-            var mentionNode = {
+            var mentionNode = _objectSpread({
               type: type,
               attrs: {
                 id: mentionId,
                 text: mentionText,
                 accessLevel: ''
               }
-            };
+            }, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz') ? {
+              marks: marks
+            } : {});
             if (mentionAccess) {
               mentionNode.attrs.accessLevel = mentionAccess;
             }

package/dist/es2019/element-browser/components/ElementList/ElementList.js

@@ -2,7 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import React, { Fragment, memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import { Grid } from 'react-virtualized';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
+import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
 import { Collection } from 'react-virtualized/dist/commonjs/Collection';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
@@ -14,7 +16,7 @@ import { borderRadius } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../../analytics';
 import { IconFallback } from '../../../quick-insert';
-import { ELEMENT_LIST_PADDING, SCROLLBAR_WIDTH } from '../../constants';
+import { ELEMENT_ITEM_HEIGHT, ELEMENT_ITEM_PADDING, ELEMENT_LIST_PADDING, SCROLLBAR_WIDTH } from '../../constants';
 import useContainerWidth from '../../hooks/use-container-width';
 import useFocus from '../../hooks/use-focus';
 import { Modes } from '../../types';
@@ -43,6 +45,7 @@ function ElementList({
   mode,
   selectedItemIndex,
   focusedItemIndex,
+  columnCount,
   setColumnCount,
   createAnalyticsEvent,
   emptyStateHandler,
@@ -81,6 +84,22 @@ function ElementList({
       }
     });
   }, [createAnalyticsEvent]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const cache = new CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: ELEMENT_ITEM_HEIGHT,
+    minHeight: ELEMENT_ITEM_HEIGHT
+  });
+  const columnWidth = (containerWidth - ELEMENT_ITEM_PADDING * 2) / columnCount;
+  const rowCount = Math.ceil(items.length / columnCount);
+  const rowHeight = ({
+    index
+  }) => cache.rowHeight({
+    index
+  }) <= ELEMENT_ITEM_HEIGHT ? ELEMENT_ITEM_HEIGHT : cache.rowHeight({
+    index
+  }) + ELEMENT_ITEM_PADDING * 2;
   const cellRenderer = useMemo(() => ({
     index,
     key,
@@ -127,6 +146,60 @@ function ElementList({
       setFocusedItemIndex: setFocusedItemIndex
     }, props)));
   }, [items, fullMode, selectedItemIndex, focusedItemIndex, selectedCategoryIndex, setFocusedCategoryIndex, setFocusedItemIndex, props]);
+  const gridCellRenderer = useMemo(() => ({
+    columnIndex,
+    key,
+    parent,
+    rowIndex,
+    style
+  }) => {
+    const index = rowIndex * columnCount + columnIndex;
+    if (items[index] == null) {
+      return;
+    }
+    return index > items.length - 1 ? null : jsx(CellMeasurer, {
+      cache: cache,
+      key: key,
+      rowIndex: rowIndex,
+      columnIndex: columnIndex,
+      parent: parent
+    }, jsx("div", {
+      style: style,
+      key: key,
+      className: "element-item-wrapper",
+      css: elementItemWrapper,
+      onKeyDown: getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? e => {
+        if (e.key === 'Tab') {
+          if (e.shiftKey && index === 0) {
+            if (setFocusedCategoryIndex) {
+              if (!!selectedCategoryIndex) {
+                setFocusedCategoryIndex(selectedCategoryIndex);
+              } else {
+                setFocusedCategoryIndex(0);
+              }
+              e.preventDefault();
+            }
+          }
+          // before focus jumps from elements list we need to rerender react-virtualized collection.
+          // Otherwise on the next render 'scrollToCell' will have same cached value
+          // and collection will not be scrolled to top.
+          // So Tab press on category will not work anymore due to invisible 1-t element.
+          else if (index === items.length - 2) {
+            setFocusedItemIndex(items.length - 1);
+          }
+        }
+      } : undefined
+    }, jsx(MemoizedElementItem, _extends({
+      inlineMode: !fullMode,
+      index: index,
+      item: items[index],
+      selected: selectedItemIndex === index,
+      focus: focusedItemIndex === index,
+      setFocusedItemIndex: setFocusedItemIndex
+    }, props))));
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [cache, items, fullMode, selectedItemIndex, columnCount, focusedItemIndex, selectedCategoryIndex, setFocusedCategoryIndex, setFocusedItemIndex, props]);
   return jsx(Fragment, null, jsx(ContainerWidthMonitor, null), jsx("div", {
     css: elementItemsWrapper,
     "data-testid": "element-items",
@@ -144,7 +217,28 @@ function ElementList({
     disableWidth: true
   }, ({
     height
-  }) => jsx(Collection, {
+  }) => getBooleanFF('platform.editor.a11y-element-browser') ? jsx(Grid, _extends({
+    cellRenderer: gridCellRenderer,
+    height: height,
+    width: containerWidth - ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
+    /**
+     * Refresh Grid on WidthObserver value change.
+     * Length of the items used to force re-render to solve Firefox bug with react-virtualized retaining
+     * scroll position after updating the data. If new data has different number of cells, a re-render
+     * is forced to prevent the scroll position render bug.
+     */,
+    key: containerWidth + items.length,
+    rowHeight: rowHeight,
+    rowCount: rowCount,
+    columnCount: columnCount,
+    columnWidth: columnWidth,
+    deferredMeasurementCache: cache
+  }, selectedItemIndex && {
+    scrollToCell: {
+      rowIndex: selectedItemIndex / columnCount,
+      columnIndex: selectedItemIndex % columnCount
+    }
+  })) : jsx(Collection, {
     cellCount: items.length,
     cellRenderer: cellRenderer,
     cellSizeAndPositionGetter: cellSizeAndPositionGetter(containerWidth - ELEMENT_LIST_PADDING * 2, scrollbarWidth),
@@ -272,14 +366,14 @@ const elementItemsWrapper = css({
   justifyContent: 'flex-start',
   overflow: 'hidden',
   padding: "var(--ds-space-025, 2px)",
-  '.ReactVirtualized__Collection': {
+  '.ReactVirtualized__Collection, .ReactVirtualized__Grid': {
     borderRadius: '3px',
     outline: 'none',
-    ':focus': {
+    '&:focus': {
       boxShadow: `0 0 0 ${ELEMENT_LIST_PADDING}px ${`var(--ds-border-focused, ${B100})`}`
     }
   },
-  '.ReactVirtualized__Collection__innerScrollContainer': {
+  '.ReactVirtualized__Collection__innerScrollContainer, .ReactVirtualized__Grid__innerScrollContainer': {
     "div[class='element-item-wrapper']:last-child": {
       paddingBottom: "var(--ds-space-050, 4px)"
     }
@@ -288,7 +382,7 @@ const elementItemsWrapper = css({
 const elementItemWrapper = css({
   div: {
     button: {
-      height: '75px',
+      minHeight: '75px',
       alignItems: 'flex-start',
       padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"} 11px`
     }

package/dist/es2019/element-browser/components/StatelessElementBrowser.js

@@ -75,7 +75,7 @@ const mobileCategoryListWrapper = css({
   padding: `${"var(--ds-space-200, 8px)"} 0 ${"var(--ds-space-200, 16px)"} 0`,
   minHeight: `${GRID_SIZE * 4}px`,
   overflow: '-moz-scrollbars-none',
-  '::-webkit-scrollbar': {
+  '&::-webkit-scrollbar': {
     display: 'none'
   },
   scrollbarWidth: 'none',
@@ -208,6 +208,7 @@ function StatelessElementBrowser(props) {
     focusedCategoryIndex: focusedCategoryIndex,
     setFocusedCategoryIndex: setFocusedCategoryIndex,
     focusOnSearch: focusOnSearch,
+    columnCount: columnCount,
     setColumnCount: setColumnCount,
     setFocusOnSearch: setFocusOnSearch,
     onKeyPress: onItemsEnterTabKeyPress,
@@ -220,6 +221,7 @@ function StatelessElementBrowser(props) {
     setFocusedItemIndex: setFocusedItemIndex,
     focusOnSearch: focusOnSearch,
     setColumnCount: setColumnCount,
+    columnCount: columnCount,
     setFocusOnSearch: setFocusOnSearch,
     onKeyPress: onItemsEnterTabKeyPress,
     onKeyDown: onKeyDown,
@@ -246,6 +248,7 @@ function MobileBrowser({
   setFocusedCategoryIndex,
   focusOnSearch,
   focusOnViewMore,
+  columnCount,
   setColumnCount,
   setFocusOnSearch,
   onKeyPress,
@@ -290,6 +293,7 @@ function MobileBrowser({
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
+    columnCount: columnCount,
     setColumnCount: setColumnCount,
     createAnalyticsEvent: createAnalyticsEvent,
     emptyStateHandler: emptyStateHandler,
@@ -317,6 +321,7 @@ function DesktopBrowser({
   setFocusedCategoryIndex,
   selectedCategoryIndex,
   focusOnSearch,
+  columnCount,
   setColumnCount,
   setFocusOnSearch,
   onKeyPress,
@@ -375,6 +380,7 @@ function DesktopBrowser({
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
+    columnCount: columnCount,
     setColumnCount: setColumnCount,
     createAnalyticsEvent: createAnalyticsEvent,
     emptyStateHandler: emptyStateHandler,

package/dist/es2019/element-browser/constants.js

@@ -20,4 +20,5 @@ export const INLINE_SIDEBAR_HEIGHT = '54px';
 export const SEARCH_ITEM_HEIGHT_WIDTH = '20px';
 export const SCROLLBAR_WIDTH = 15;
 export const ELEMENT_LIST_PADDING = 2;
-export const ELEMENT_ITEM_HEIGHT = 75;
+export const ELEMENT_ITEM_HEIGHT = 75;
+export const ELEMENT_ITEM_PADDING = 10;

package/dist/es2019/mark/commands.js

@@ -157,7 +157,14 @@ export const applyMarkOnRange = (from, to, removeMark, mark, tr) => {
     getBooleanFF('platform.editor.simplify-inline-cards-in-code-blocks_jw6t1') ? transformNonTextNodesToText(from, to, tr) : transformSmartCharsMentionsAndEmojis(from, to, tr);
   }
   tr.doc.nodesBetween(tr.mapping.map(from), tr.mapping.map(to), (node, pos) => {
-    if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
+    if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+      if (!node.isText) {
+        const isAllowedInlineNode = ['emoji', 'status', 'date', 'mention', 'inlineCard'].includes(node.type.name);
+        if (!isAllowedInlineNode) {
+          return true;
+        }
+      }
+    } else if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
       if (!node.isText && node.type !== inlineCard) {
         return true;
       }

package/dist/es2019/messages/card.js

@@ -145,6 +145,11 @@ export const messages = defineMessages({
     defaultMessage: 'Configure link',
     description: 'An icon shown when hovering over inline smart link to inform user they can click the icon to configure the links appearance.'
   },
+  inlineGoToLink: {
+    id: 'fabric.editor.inlineGoToLink',
+    defaultMessage: 'Go to link',
+    description: 'An option in the configure link dropdown that informs the user they can click the option to open the link'
+  },
   datasourceConfluenceSearch: {
     id: 'fabric.editor.datasource.confluenceSearch',
     defaultMessage: 'Insert Confluence list',

package/dist/es2019/monitoring/environment.js

@@ -0,0 +1,16 @@
+const FEDRAMP_MODERATE = 'fedramp-moderate';
+
+// To determine whether an instance is a FedRAMP instance
+// Copied from platform/packages/uip/atl-context/src/services/is-fedramp/index.tsx
+// We cannot import the same-named function from @atlassian/atl-context due to editor-common being a public package (and atl-context being private)
+// TODO: Seek alternatives
+export function isFedRamp() {
+  var _globalThis$location, _globalThis$location$;
+  // MICROS_PERIMETER is already used by few products, so we need to keep it for backward compatibility
+  const env = globalThis.MICROS_PERIMETER || globalThis.UNSAFE_ATL_CONTEXT_BOUNDARY;
+  if (env) {
+    return env === FEDRAMP_MODERATE;
+  }
+  const matches = (_globalThis$location = globalThis.location) === null || _globalThis$location === void 0 ? void 0 : (_globalThis$location$ = _globalThis$location.hostname) === null || _globalThis$location$ === void 0 ? void 0 : _globalThis$location$.match(/atlassian-us-gov-mod\.(com|net)|atlassian-us-gov\.(com|net)|atlassian-fex\.(com|net)|atlassian-stg-fedm\.(com|net)/);
+  return matches ? matches.length > 0 : false;
+}

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,7 @@
+import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "82.0.1";
+const packageVersion = "82.1.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it
@@ -25,7 +26,7 @@ export const logException = async (error, tags) => {
       ExtraErrorData
     } = await import( /* webpackChunkName: "@atlaskit-internal_editor-sentryintegrations" */'@sentry/integrations');
     const sentryOptions = {
-      dsn: SENTRY_DSN,
+      dsn: isFedRamp() ? undefined : SENTRY_DSN,
       release: `${packageName}@${packageVersion}`,
       environment: (_process$env$CLOUD_EN = process.env.CLOUD_ENV) !== null && _process$env$CLOUD_EN !== void 0 ? _process$env$CLOUD_EN : 'unknown',
       ignoreErrors: [

package/dist/es2019/styles/shared/annotation.js

@@ -13,51 +13,78 @@ export const BlockAnnotationSharedClassNames = {
   blur: `${blockAnnotationPrefix}-blur`,
   draft: `${blockAnnotationPrefix}-draft`
 };
-const Y75a = 'rgba(255, 240, 179, 0.5)';
+const Yellow100 = 'rgb(255, 247, 214)';
 const Y200a = 'rgba(255, 196, 0, 0.82)';
-export const AnnotationSharedCSSByState = () => getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? {
-  focus: css({
-    background: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
-    borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y300})`}`,
-    boxShadow: `var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`,
-    cursor: 'pointer',
-    '&:has(.card)': {
-      fontSize: '1.5rem',
-      lineHeight: '1.2rem',
-      '& > *': {
-        fontSize: '16px'
-      }
-    }
-  }),
-  blur: css({
-    background: `var(--ds-background-accent-yellow-subtlest, ${Y75a})`,
-    borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y200a})`}`,
-    cursor: 'pointer',
-    '&:has(.card)': {
-      fontSize: '1.5rem',
-      lineHeight: '1.2rem',
-      '& > *': {
-        fontSize: '16px'
-      }
-    }
-  })
-} : {
-  focus: css({
-    // Background is not coming through in confluence, suspecting to be caused by some specific combination of
-    // emotion and token look up
-    background: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
-    borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y300})`}`,
-    // TODO: https://product-fabric.atlassian.net/browse/DSP-4147
-    boxShadow: `var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`,
-    cursor: 'pointer'
-  }),
-  blur: css({
-    background: `var(--ds-background-accent-yellow-subtlest, ${Y75a})`,
-    borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y200a})`}`,
-    cursor: 'pointer'
-  })
+export const AnnotationSharedCSSByState = () => {
+  if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+    return {
+      focus: css({
+        background: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
+        borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y300})`}`,
+        boxShadow: `var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`,
+        cursor: 'pointer',
+        padding: '1.5px 0',
+        '&:has(.card)': {
+          padding: '4.5px 0 3px 0'
+        }
+      }),
+      blur: css({
+        background: `var(--ds-background-accent-yellow-subtlest, ${Yellow100})`,
+        borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y200a})`}`,
+        cursor: 'pointer',
+        padding: '1.5px 0',
+        '&:has(.card)': {
+          padding: '4.5px 0 3px 0'
+        }
+      })
+    };
+  } else if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
+    return {
+      focus: css({
+        background: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
+        borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y300})`}`,
+        boxShadow: `var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`,
+        cursor: 'pointer',
+        '&:has(.card)': {
+          fontSize: '1.5rem',
+          lineHeight: '1.2rem',
+          '& > *': {
+            fontSize: '16px'
+          }
+        }
+      }),
+      blur: css({
+        background: `var(--ds-background-accent-yellow-subtlest, ${Yellow100})`,
+        borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y200a})`}`,
+        cursor: 'pointer',
+        '&:has(.card)': {
+          fontSize: '1.5rem',
+          lineHeight: '1.2rem',
+          '& > *': {
+            fontSize: '16px'
+          }
+        }
+      })
+    };
+  } else {
+    return {
+      focus: css({
+        // Background is not coming through in confluence, suspecting to be caused by some specific combination of
+        // emotion and token look up
+        background: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
+        borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y300})`}`,
+        // TODO: https://product-fabric.atlassian.net/browse/DSP-4147
+        boxShadow: `var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`,
+        cursor: 'pointer'
+      }),
+      blur: css({
+        background: `var(--ds-background-accent-yellow-subtlest, ${Yellow100})`,
+        borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y200a})`}`,
+        cursor: 'pointer'
+      })
+    };
+  }
 };
-
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState()` is not safe in object syntax
 export const annotationSharedStyles = () => css`
 	.ProseMirror {

package/dist/es2019/styles/shared/background-color.js

@@ -1,12 +1,12 @@
 import { css } from '@emotion/react';
-export const backgroundColorStyles = colorMode => css({
+export const backgroundColorStyles = css({
   '.fabric-background-color-mark': {
     backgroundColor: 'var(--custom-palette-color, inherit)'
   },
   'a .fabric-background-color-mark': {
     backgroundColor: 'unset'
   },
-  '.fabric-background-color-mark .ak-editor-annotation, .fabric-background-color-mark [data-mark-type="annotation"]': {
-    mixBlendMode: colorMode === 'dark' ? 'color-dodge' : 'multiply'
+  '.fabric-background-color-mark .ak-editor-annotation': {
+    backgroundColor: 'unset'
   }
 });

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

@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "82.0.1";
+const packageVersion = "82.1.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -21,9 +21,17 @@ export const canApplyAnnotationOnRange = (rangeSelection, doc, schema) => {
     // or if we're leaf and not text
 
     if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
-      if (node.isInline && !node.isText && node.type !== inlineCard || node.isLeaf && !node.isText && node.type !== inlineCard || node.isText && !(parent !== null && parent !== void 0 && parent.type.allowsMarkType(schema.marks.annotation))) {
-        foundInvalid = true;
-        return false;
+      if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz')) {
+        const isAllowedInlineNode = ['emoji', 'status', 'date', 'mention', 'inlineCard'].includes(node.type.name);
+        if (node.isInline && !node.isText && !isAllowedInlineNode || node.isLeaf && !node.isText && !isAllowedInlineNode || node.isText && !(parent !== null && parent !== void 0 && parent.type.allowsMarkType(schema.marks.annotation))) {
+          foundInvalid = true;
+          return false;
+        }
+      } else {
+        if (node.isInline && !node.isText && node.type !== inlineCard || node.isLeaf && !node.isText && node.type !== inlineCard || node.isText && !(parent !== null && parent !== void 0 && parent.type.allowsMarkType(schema.marks.annotation))) {
+          foundInvalid = true;
+          return false;
+        }
       }
     } else {
       if (node.isInline && !node.isText || node.isLeaf && !node.isText || node.isText && !(parent !== null && parent !== void 0 && parent.type.allowsMarkType(schema.marks.annotation))) {

package/dist/es2019/utils/validator.js

@@ -235,7 +235,10 @@ export const getValidNode = (originalNode, schema = defaultSchema, adfStage = 'f
           if (attrs && attrs.timestamp) {
             return {
               type,
-              attrs
+              attrs,
+              ...(getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz') ? {
+                marks
+              } : {})
             };
           }
           break;
@@ -245,7 +248,10 @@ export const getValidNode = (originalNode, schema = defaultSchema, adfStage = 'f
           if (attrs && attrs.text && attrs.color) {
             return {
               type,
-              attrs
+              attrs,
+              ...(getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz') ? {
+                marks
+              } : {})
             };
           }
           break;
@@ -255,7 +261,10 @@ export const getValidNode = (originalNode, schema = defaultSchema, adfStage = 'f
           if (attrs && attrs.shortName) {
             return {
               type,
-              attrs
+              attrs,
+              ...(getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz') ? {
+                marks
+              } : {})
             };
           }
           break;
@@ -273,28 +282,16 @@ export const getValidNode = (originalNode, schema = defaultSchema, adfStage = 'f
         }
       case 'inlineCard':
         {
-          if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes')) {
-            let inlineCardNode = {
-              type
+          if (attrs && (attrs.datasource && !attrs.url || attrs.url && isSafeUrl(attrs.url) || attrs.data && attrs.data.url && isSafeUrl(attrs.data.url))) {
+            return {
+              type,
+              attrs,
+              ...(getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? {
+                marks
+              } : {})
             };
-            if (attrs && (attrs.datasource && !attrs.url || attrs.url && isSafeUrl(attrs.url) || attrs.data && attrs.data.url && isSafeUrl(attrs.data.url))) {
-              inlineCardNode.attrs = {
-                ...attrs
-              };
-            }
-            if (marks) {
-              inlineCardNode.marks = [...marks];
-            }
-            return inlineCardNode;
-          } else {
-            if (attrs && (attrs.datasource && !attrs.url || attrs.url && isSafeUrl(attrs.url) || attrs.data && attrs.data.url && isSafeUrl(attrs.data.url))) {
-              return {
-                type,
-                attrs
-              };
-            }
-            break;
           }
+          break;
         }
       case 'blockCard':
         {
@@ -500,7 +497,10 @@ export const getValidNode = (originalNode, schema = defaultSchema, adfStage = 'f
                 id: mentionId,
                 text: mentionText,
                 accessLevel: ''
-              }
+              },
+              ...(getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes-round-2_ctuxz') ? {
+                marks
+              } : {})
             };
             if (mentionAccess) {
               mentionNode.attrs.accessLevel = mentionAccess;