@atlaskit/editor-core 193.23.1 → 193.24.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-core
 
+## 193.24.0
+
+### Minor Changes
+
+-   [#103169](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103169)
+    [`e9d45fc94064`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e9d45fc94064) -
+    [ux] [ED-23248] -
+
+    **@atlaskit/editor-core**: Added optional profilecardProvider to Mention plugin in universal
+    composable editor **@atlaskit/editor-plugin-mentions**: Made mentions render with profile cards
+    on click if the feature flag: `platform.editor.mentions-in-editor-popup-on-click` is turned on
+
+### Patch Changes
+
+-   [#103816](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103816)
+    [`3fb50173376f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3fb50173376f) -
+    [ED-23159] Added blending styling for when highlights overlap inline comments
+
 ## 193.23.1
 
 ### Patch Changes

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

@@ -527,6 +527,7 @@ var ReactEditorView = exports.ReactEditorView = /*#__PURE__*/function (_React$Co
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createEditor", function (assistiveLabel) {
       return /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: getUAPrefix(),
         key: "ProseMirror",
         ref: _this.handleEditorViewRef,

package/dist/cjs/presets/universal.js

@@ -71,7 +71,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @returns a full featured preset configured according to the provided props - basis for create-plugins-list
  */
 function createUniversalPreset(appearance, props, featureFlags, prevAppearance, createAnalyticsEvent) {
-  var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
+  var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
   var isMobile = appearance === 'mobile';
   var isComment = appearance === 'comment';
   var isChromeless = appearance === 'chromeless';
@@ -124,7 +124,8 @@ function createUniversalPreset(appearance, props, featureFlags, prevAppearance,
     sanitizePrivateContent: props.sanitizePrivateContent,
     insertDisplayName: (_props$mention$insert = (_props$mention = props.mention) === null || _props$mention === void 0 ? void 0 : _props$mention.insertDisplayName) !== null && _props$mention$insert !== void 0 ? _props$mention$insert : props.mentionInsertDisplayName,
     allowZeroWidthSpaceAfter: !isMobile,
-    HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent
+    HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent,
+    profilecardProvider: (_props$mention3 = props.mention) === null || _props$mention3 === void 0 ? void 0 : _props$mention3.profilecardProvider
   }], Boolean(props.mentionProvider)).maybeAdd(_emoji.emojiPlugin, Boolean(props.emojiProvider)).maybeAdd([_table.tablesPlugin, {
     tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : props.allowTables,
     tableResizingEnabled: ['full-page', 'full-width'].includes(appearance || ''),

package/dist/cjs/ui/Addon/ClickAreaMobile/index.js

@@ -84,7 +84,9 @@ var ClickAreaMobile = exports.default = /*#__PURE__*/function (_React$Component)
         css: clickWrapper({
           isExpanded: this.props.isExpanded,
           minHeight: this.props.minHeight
-        }),
+        })
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: "editor-click-wrapper",
         onClick: this.handleClick,
         ref: this.clickElementRef

package/dist/cjs/ui/Appearance/Chromeless.js

@@ -91,7 +91,9 @@ var Editor = exports.default = /*#__PURE__*/function (_React$Component) {
         ref: function ref(_ref2) {
           return _this.containerElement = _ref2;
         }
-      }, (0, _react2.jsx)(ContentArea, {
+      }, (0, _react2.jsx)(ContentArea
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      , {
         className: "ak-editor-content-area",
         featureFlags: featureFlags
       }, customContentComponents && 'before' in customContentComponents ? customContentComponents.before : customContentComponents, (0, _react2.jsx)(_PluginSlot.default, {

package/dist/cjs/ui/Appearance/Comment/Comment.js

@@ -155,7 +155,9 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       }, (0, _react2.jsx)("div", {
         css: [commentEditorStyles, (0, _react2.css)({
           minHeight: "".concat(minHeight, "px")
-        })],
+        })]
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: "akEditor",
         ref: _this.wrapperElementRef
       }, (0, _react2.jsx)(_Toolbar2.MainToolbar, {
@@ -196,7 +198,9 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           },
           css: maxHeight ? (0, _react2.css)({
             maxHeight: "".concat(maxHeight, "px")
-          }) : null,
+          }) : null
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+          ,
           className: (0, _classnames.default)('ak-editor-content-area', {
             'less-margin': width < _editorSharedStyles.akEditorMobileBreakoutPoint
           }),
@@ -348,7 +352,9 @@ var EditorNext = function EditorNext(props) {
   }, (0, _react2.jsx)("div", {
     css: [commentEditorStyles, (0, _react2.css)({
       minHeight: "".concat(minHeight, "px")
-    })],
+    })]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: "akEditor",
     ref: wrapperElementRef
   }, (0, _react2.jsx)(_Toolbar2.MainToolbar, {
@@ -389,7 +395,9 @@ var EditorNext = function EditorNext(props) {
       },
       css: maxHeight ? (0, _react2.css)({
         maxHeight: "".concat(maxHeight, "px")
-      }) : null,
+      }) : null
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: (0, _classnames.default)('ak-editor-content-area', {
         'less-margin': width < _editorSharedStyles.akEditorMobileBreakoutPoint
       }),

package/dist/cjs/ui/Appearance/Comment/Toolbar.js

@@ -53,7 +53,9 @@ var StickyToolbar = function StickyToolbar(props) {
       style: {
         top: "".concat(top, "px")
       },
-      "data-testid": "ak-editor-main-toolbar",
+      "data-testid": "ak-editor-main-toolbar"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: 'show-keyline'
     }, props.children)
   );

package/dist/cjs/ui/Appearance/FullPage/FullPage.js

@@ -69,7 +69,9 @@ var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
   }
   var isEditorToolbarHidden = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   return (0, _react2.jsx)(_ui.ContextPanelWidthProvider, null, (0, _react2.jsx)("div", {
-    css: _StyledComponents.fullPageEditorWrapper,
+    css: _StyledComponents.fullPageEditorWrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: "akEditor",
     ref: wrapperElementRef
   }, !isEditorToolbarHidden && (0, _react2.jsx)(_FullPageToolbar.FullPageToolbar, {

package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js

@@ -43,7 +43,9 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       return (0, _react2.jsx)("div", {
         css: [_StyledComponents.contentArea, props.isEditorToolbarHidden && _StyledComponents.contentAreaHeightNoToolbar, positionedOverEditor && _StyledComponents.positionedOverEditorStyle],
         "data-testid": CONTENT_AREA_TEST_ID
-      }, (0, _react2.jsx)(_StyledComponents.ScrollContainer, {
+      }, (0, _react2.jsx)(_StyledComponents.ScrollContainer
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      , {
         className: "fabric-editor-popup-scroll-parent",
         featureFlags: props.featureFlags,
         ref: scrollContainerRef
@@ -60,7 +62,9 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         "aria-label": props.intl.formatMessage(_messages.fullPageMessages.editableContentLabel),
         ref: contentAreaRef
       }, (0, _react2.jsx)("div", {
-        css: _StyledComponents.editorContentGutterStyle,
+        css: _StyledComponents.editorContentGutterStyle
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
         ref: contentAreaRef
       }, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, (0, _react2.jsx)(_PluginSlot.default, {

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

@@ -70,7 +70,7 @@ var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
 var contentStyles = function contentStyles(props) {
   return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n  .pm-table-header-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark,\n  .pm-table-cell-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n  .pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n    clear: both;\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, _styles.backgroundColorStyles, listsStyles, ruleStyles(), _media.mediaStyles, (0, _layout.layoutStyles)(props.viewMode), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _panel.panelStyles)(), mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(), _styles.smartCardStyles, _styles.smartCardSharedStyles, _date.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, (0, _aiPanels.aiPanelStyles)(props.colorMode), _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(props.colorMode), listsStyles, ruleStyles(), _media.mediaStyles, (0, _layout.layoutStyles)(props.viewMode), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _panel.panelStyles)(), mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(), _styles.smartCardStyles, _styles.smartCardSharedStyles, _date.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, (0, _aiPanels.aiPanelStyles)(props.colorMode), _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 var createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
@@ -92,11 +92,14 @@ var createEditorContentStyle = exports.createEditorContentStyle = function creat
         viewMode: viewMode
       });
     }, [theme, colorMode, featureFlags, viewMode]);
-    return (0, _react2.jsx)("div", {
-      className: className,
-      ref: ref,
-      css: [memoizedStyle, styles]
-    }, children);
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      (0, _react2.jsx)("div", {
+        className: className,
+        ref: ref,
+        css: [memoizedStyle, styles]
+      }, children)
+    );
   });
 };
 var _default = exports.default = createEditorContentStyle();

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

@@ -67,7 +67,9 @@ var WithFlash = exports.default = /*#__PURE__*/function (_React$Component) {
       return (
         // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
         (0, _react2.jsx)("div", {
-          css: animate ? flashWrapperAnimated : flashWrapper,
+          css: animate ? flashWrapperAnimated : flashWrapper
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+          ,
           className: this.toggle ? '-flash' : ''
         }, children)
       );

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "193.23.1";
+var version = exports.version = "193.24.0";

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

@@ -523,6 +523,7 @@ export class ReactEditorView extends React.Component {
     });
     _defineProperty(this, "createEditor", assistiveLabel => {
       return /*#__PURE__*/React.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: getUAPrefix(),
         key: "ProseMirror",
         ref: this.handleEditorViewRef,

package/dist/es2019/presets/universal.js

@@ -59,7 +59,7 @@ import { createDefaultPreset } from './default';
  * @returns a full featured preset configured according to the provided props - basis for create-plugins-list
  */
 export default function createUniversalPreset(appearance, props, featureFlags, prevAppearance, createAnalyticsEvent) {
-  var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
+  var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
   const isMobile = appearance === 'mobile';
   const isComment = appearance === 'comment';
   const isChromeless = appearance === 'chromeless';
@@ -113,7 +113,8 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
     sanitizePrivateContent: props.sanitizePrivateContent,
     insertDisplayName: (_props$mention$insert = (_props$mention = props.mention) === null || _props$mention === void 0 ? void 0 : _props$mention.insertDisplayName) !== null && _props$mention$insert !== void 0 ? _props$mention$insert : props.mentionInsertDisplayName,
     allowZeroWidthSpaceAfter: !isMobile,
-    HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent
+    HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent,
+    profilecardProvider: (_props$mention3 = props.mention) === null || _props$mention3 === void 0 ? void 0 : _props$mention3.profilecardProvider
   }], Boolean(props.mentionProvider)).maybeAdd(emojiPlugin, Boolean(props.emojiProvider)).maybeAdd([tablesPlugin, {
     tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : props.allowTables,
     tableResizingEnabled: ['full-page', 'full-width'].includes(appearance || ''),

package/dist/es2019/ui/Addon/ClickAreaMobile/index.js

@@ -61,7 +61,9 @@ export default class ClickAreaMobile extends React.Component {
       css: clickWrapper({
         isExpanded: this.props.isExpanded,
         minHeight: this.props.minHeight
-      }),
+      })
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: "editor-click-wrapper",
       onClick: this.handleClick,
       ref: this.clickElementRef

package/dist/es2019/ui/Appearance/Chromeless.js

@@ -66,7 +66,9 @@ export default class Editor extends React.Component {
         })],
         "data-testid": "chromeless-editor",
         ref: ref => this.containerElement = ref
-      }, jsx(ContentArea, {
+      }, jsx(ContentArea
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      , {
         className: "ak-editor-content-area",
         featureFlags: featureFlags
       }, customContentComponents && 'before' in customContentComponents ? customContentComponents.before : customContentComponents, jsx(PluginSlot, {

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -134,7 +134,9 @@ class Editor extends React.Component {
       }, jsx("div", {
         css: [commentEditorStyles, css({
           minHeight: `${minHeight}px`
-        })],
+        })]
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: "akEditor",
         ref: this.wrapperElementRef
       }, jsx(MainToolbar, {
@@ -174,7 +176,9 @@ class Editor extends React.Component {
           ref: ref => this.containerElement = ref,
           css: maxHeight ? css({
             maxHeight: `${maxHeight}px`
-          }) : null,
+          }) : null
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+          ,
           className: classnames('ak-editor-content-area', {
             'less-margin': width < akEditorMobileBreakoutPoint
           }),
@@ -318,7 +322,9 @@ const EditorNext = props => {
   }, jsx("div", {
     css: [commentEditorStyles, css({
       minHeight: `${minHeight}px`
-    })],
+    })]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: "akEditor",
     ref: wrapperElementRef
   }, jsx(MainToolbar, {
@@ -358,7 +364,9 @@ const EditorNext = props => {
       ref: ref => containerElement = ref,
       css: maxHeight ? css({
         maxHeight: `${maxHeight}px`
-      }) : null,
+      }) : null
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: classnames('ak-editor-content-area', {
         'less-margin': width < akEditorMobileBreakoutPoint
       }),

package/dist/es2019/ui/Appearance/Comment/Toolbar.js

@@ -84,7 +84,9 @@ const StickyToolbar = props => {
       style: {
         top: `${top}px`
       },
-      "data-testid": "ak-editor-main-toolbar",
+      "data-testid": "ak-editor-main-toolbar"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: 'show-keyline'
     }, props.children)
   );

package/dist/es2019/ui/Appearance/FullPage/FullPage.js

@@ -51,7 +51,9 @@ export const FullPageEditor = props => {
   }
   const isEditorToolbarHidden = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   return jsx(ContextPanelWidthProvider, null, jsx("div", {
-    css: fullPageEditorWrapper,
+    css: fullPageEditorWrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: "akEditor",
     ref: wrapperElementRef
   }, !isEditorToolbarHidden && jsx(FullPageToolbar, {

package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js

@@ -32,7 +32,9 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     return jsx("div", {
       css: [contentArea, props.isEditorToolbarHidden && contentAreaHeightNoToolbar, positionedOverEditor && positionedOverEditorStyle],
       "data-testid": CONTENT_AREA_TEST_ID
-    }, jsx(ScrollContainer, {
+    }, jsx(ScrollContainer
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: "fabric-editor-popup-scroll-parent",
       featureFlags: props.featureFlags,
       ref: scrollContainerRef
@@ -49,7 +51,9 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
       "aria-label": props.intl.formatMessage(messages.editableContentLabel),
       ref: contentAreaRef
     }, jsx("div", {
-      css: editorContentGutterStyle,
+      css: editorContentGutterStyle
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
       ref: contentAreaRef
     }, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, jsx(PluginSlot, {

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

@@ -184,7 +184,7 @@ const contentStyles = props => css`
   ${blocktypeStyles()}
   ${codeMarkSharedStyles()}
   ${textColorStyles}
-  ${backgroundColorStyles}
+  ${backgroundColorStyles(props.colorMode)}
   ${listsStyles}
   ${ruleStyles()}
   ${mediaStyles}
@@ -295,11 +295,14 @@ export const createEditorContentStyle = styles => {
       featureFlags,
       viewMode
     }), [theme, colorMode, featureFlags, viewMode]);
-    return jsx("div", {
-      className: className,
-      ref: ref,
-      css: [memoizedStyle, styles]
-    }, children);
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      jsx("div", {
+        className: className,
+        ref: ref,
+        css: [memoizedStyle, styles]
+      }, children)
+    );
   });
 };
 export default createEditorContentStyle();

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

@@ -46,7 +46,9 @@ export default class WithFlash extends React.Component {
     return (
       // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
       jsx("div", {
-        css: animate ? flashWrapperAnimated : flashWrapper,
+        css: animate ? flashWrapperAnimated : flashWrapper
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: this.toggle ? '-flash' : ''
       }, children)
     );

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "193.23.1";
+export const version = "193.24.0";

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

@@ -520,6 +520,7 @@ export var ReactEditorView = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "createEditor", function (assistiveLabel) {
       return /*#__PURE__*/React.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: getUAPrefix(),
         key: "ProseMirror",
         ref: _this.handleEditorViewRef,

package/dist/esm/presets/universal.js

@@ -63,7 +63,7 @@ import { createDefaultPreset } from './default';
  * @returns a full featured preset configured according to the provided props - basis for create-plugins-list
  */
 export default function createUniversalPreset(appearance, props, featureFlags, prevAppearance, createAnalyticsEvent) {
-  var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
+  var _featureFlags$lpLinkP, _props$media, _props$media2, _props$media3, _props$media4, _props$media5, _props$mention$insert, _props$mention, _props$mention2, _props$mention3, _props$collabEdit$EXP, _props$collabEdit, _props$linking, _props$linking2, _featureFlags$lpLinkP2, _props$linking3, _props$primaryToolbar;
   var isMobile = appearance === 'mobile';
   var isComment = appearance === 'comment';
   var isChromeless = appearance === 'chromeless';
@@ -116,7 +116,8 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
     sanitizePrivateContent: props.sanitizePrivateContent,
     insertDisplayName: (_props$mention$insert = (_props$mention = props.mention) === null || _props$mention === void 0 ? void 0 : _props$mention.insertDisplayName) !== null && _props$mention$insert !== void 0 ? _props$mention$insert : props.mentionInsertDisplayName,
     allowZeroWidthSpaceAfter: !isMobile,
-    HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent
+    HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent,
+    profilecardProvider: (_props$mention3 = props.mention) === null || _props$mention3 === void 0 ? void 0 : _props$mention3.profilecardProvider
   }], Boolean(props.mentionProvider)).maybeAdd(emojiPlugin, Boolean(props.emojiProvider)).maybeAdd([tablesPlugin, {
     tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : props.allowTables,
     tableResizingEnabled: ['full-page', 'full-width'].includes(appearance || ''),

package/dist/esm/ui/Addon/ClickAreaMobile/index.js

@@ -79,7 +79,9 @@ var ClickAreaMobile = /*#__PURE__*/function (_React$Component) {
         css: clickWrapper({
           isExpanded: this.props.isExpanded,
           minHeight: this.props.minHeight
-        }),
+        })
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: "editor-click-wrapper",
         onClick: this.handleClick,
         ref: this.clickElementRef

package/dist/esm/ui/Appearance/Chromeless.js

@@ -82,7 +82,9 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         ref: function ref(_ref2) {
           return _this.containerElement = _ref2;
         }
-      }, jsx(ContentArea, {
+      }, jsx(ContentArea
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      , {
         className: "ak-editor-content-area",
         featureFlags: featureFlags
       }, customContentComponents && 'before' in customContentComponents ? customContentComponents.before : customContentComponents, jsx(PluginSlot, {

package/dist/esm/ui/Appearance/Comment/Comment.js

@@ -146,7 +146,9 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       }, jsx("div", {
         css: [commentEditorStyles, css({
           minHeight: "".concat(minHeight, "px")
-        })],
+        })]
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: "akEditor",
         ref: _this.wrapperElementRef
       }, jsx(MainToolbar, {
@@ -187,7 +189,9 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           },
           css: maxHeight ? css({
             maxHeight: "".concat(maxHeight, "px")
-          }) : null,
+          }) : null
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+          ,
           className: classnames('ak-editor-content-area', {
             'less-margin': width < akEditorMobileBreakoutPoint
           }),
@@ -339,7 +343,9 @@ var EditorNext = function EditorNext(props) {
   }, jsx("div", {
     css: [commentEditorStyles, css({
       minHeight: "".concat(minHeight, "px")
-    })],
+    })]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: "akEditor",
     ref: wrapperElementRef
   }, jsx(MainToolbar, {
@@ -380,7 +386,9 @@ var EditorNext = function EditorNext(props) {
       },
       css: maxHeight ? css({
         maxHeight: "".concat(maxHeight, "px")
-      }) : null,
+      }) : null
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: classnames('ak-editor-content-area', {
         'less-margin': width < akEditorMobileBreakoutPoint
       }),

package/dist/esm/ui/Appearance/Comment/Toolbar.js

@@ -44,7 +44,9 @@ var StickyToolbar = function StickyToolbar(props) {
       style: {
         top: "".concat(top, "px")
       },
-      "data-testid": "ak-editor-main-toolbar",
+      "data-testid": "ak-editor-main-toolbar"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: 'show-keyline'
     }, props.children)
   );

package/dist/esm/ui/Appearance/FullPage/FullPage.js

@@ -58,7 +58,9 @@ export var FullPageEditor = function FullPageEditor(props) {
   }
   var isEditorToolbarHidden = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   return jsx(ContextPanelWidthProvider, null, jsx("div", {
-    css: fullPageEditorWrapper,
+    css: fullPageEditorWrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: "akEditor",
     ref: wrapperElementRef
   }, !isEditorToolbarHidden && jsx(FullPageToolbar, {

package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js

@@ -33,7 +33,9 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return jsx("div", {
         css: [contentArea, props.isEditorToolbarHidden && contentAreaHeightNoToolbar, positionedOverEditor && positionedOverEditorStyle],
         "data-testid": CONTENT_AREA_TEST_ID
-      }, jsx(ScrollContainer, {
+      }, jsx(ScrollContainer
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      , {
         className: "fabric-editor-popup-scroll-parent",
         featureFlags: props.featureFlags,
         ref: scrollContainerRef
@@ -50,7 +52,9 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
         "aria-label": props.intl.formatMessage(messages.editableContentLabel),
         ref: contentAreaRef
       }, jsx("div", {
-        css: editorContentGutterStyle,
+        css: editorContentGutterStyle
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
         ref: contentAreaRef
       }, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, jsx(PluginSlot, {

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

@@ -61,7 +61,7 @@ export var placeholderStyles = css({
 var contentStyles = function contentStyles(props) {
   return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n  .pm-table-header-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark,\n  .pm-table-cell-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n  .pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n    clear: both;\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), editorFontSize({
     theme: props.theme
-  }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, codeBlockStyles(), blocktypeStyles(), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles, listsStyles, ruleStyles(), mediaStyles, layoutStyles(props.viewMode), telepointerStyle, gapCursorStyles, tableStyles(props), panelStyles(), mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, statusStyles, annotationSharedStyles(), smartCardStyles, smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, resizerStyles, aiPanelStyles(props.colorMode), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, codeBlockStyles(), blocktypeStyles(), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(props.colorMode), listsStyles, ruleStyles(), mediaStyles, layoutStyles(props.viewMode), telepointerStyle, gapCursorStyles, tableStyles(props), panelStyles(), mentionsStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, statusStyles, annotationSharedStyles(), smartCardStyles, smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, resizerStyles, aiPanelStyles(props.colorMode), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 export var createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -83,11 +83,14 @@ export var createEditorContentStyle = function createEditorContentStyle(styles)
         viewMode: viewMode
       });
     }, [theme, colorMode, featureFlags, viewMode]);
-    return jsx("div", {
-      className: className,
-      ref: ref,
-      css: [memoizedStyle, styles]
-    }, children);
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      jsx("div", {
+        className: className,
+        ref: ref,
+        css: [memoizedStyle, styles]
+      }, children)
+    );
   });
 };
 export default createEditorContentStyle();

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

@@ -61,7 +61,9 @@ var WithFlash = /*#__PURE__*/function (_React$Component) {
       return (
         // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
         jsx("div", {
-          css: animate ? flashWrapperAnimated : flashWrapper,
+          css: animate ? flashWrapperAnimated : flashWrapper
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+          ,
           className: this.toggle ? '-flash' : ''
         }, children)
       );

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "193.23.1";
+export var version = "193.24.0";

package/docs/4-annotations.tsx

@@ -189,16 +189,22 @@ class SplitExample extends React.Component<{ initialAdf: object }> {
     return (
       <div
         style={{
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           display: 'flex',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           maxHeight: '400px',
         }}
       >
         <div
           style={{
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
             margin: token('space.100', '8px'),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
             padding: token('space.100', '8px'),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
             backgroundColor: N20,
             border: `1px solid ${N30}`,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
             flex: 1,
           }}
         >
@@ -206,8 +212,11 @@ class SplitExample extends React.Component<{ initialAdf: object }> {
         </div>
         <div
           style={{
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
             flex: 2,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
             overflow: 'auto',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
             margin: token('space.100', '8px'),
           }}
         >
@@ -235,8 +244,11 @@ These denote a comment thread about the given text, and are denoted by a yellow
 ${(
   <div
     style={{
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       margin: token('space.100', '8px'),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       padding: token('space.100', '8px'),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       backgroundColor: N20,
       border: `1px solid ${N30}`,
     }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "193.23.1",
+  "version": "193.24.0",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -45,7 +45,7 @@
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/analytics-next-stable-react-context": "1.0.1",
     "@atlaskit/button": "^17.17.0",
-    "@atlaskit/editor-common": "^81.0.0",
+    "@atlaskit/editor-common": "^81.1.0",
     "@atlaskit/editor-json-transformer": "^8.13.0",
     "@atlaskit/editor-plugins": "^2.7.0",
     "@atlaskit/editor-prosemirror": "4.0.1",
@@ -105,9 +105,10 @@
     "@atlaskit/modal-dialog": "^12.13.0",
     "@atlaskit/primitives": "^6.3.0",
     "@atlaskit/renderer": "^109.29.0",
-    "@atlaskit/select": "^17.9.0",
-    "@atlaskit/smart-card": "^27.0.0",
+    "@atlaskit/select": "^17.10.0",
+    "@atlaskit/smart-card": "^27.2.0",
     "@atlaskit/synchrony-test-helpers": "^2.4.0",
+    "@atlaskit/toggle": "^13.1.0",
     "@atlaskit/util-data-test": "^17.9.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/adf-schema-json": "^1.14.0",
@@ -347,6 +348,10 @@
     },
     "platform.editor.primary-toolbar-ordering": {
       "type": "boolean"
+    },
+    "platform.editor.mentions-in-editor-popup-on-click": {
+      "type": "boolean",
+      "referenceOnly": "true"
     }
   },
   "stricter": {