@atlaskit/editor-core 207.11.1 → 207.11.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-core
 
+## 207.11.2
+
+### Patch Changes
+
+- [#160456](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160456)
+  [`f1c9353c46649`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f1c9353c46649) -
+  [ux] ED-28026 fix resize handle styles for pragmatic-dnd resizer
+- Updated dependencies
+
 ## 207.11.1
 
 ### Patch Changes

package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js

@@ -9,7 +9,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _browser = require("@atlaskit/editor-common/browser");
-var _collab = require("@atlaskit/editor-common/collab");
 var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
 var _styles2 = require("@atlaskit/editor-plugins/block-type/styles");
@@ -51,6 +50,7 @@ var _rule = require("./styles/rule");
 var _shadowStyles = require("./styles/shadowStyles");
 var _smartCardStyles = require("./styles/smartCardStyles");
 var _tasksAndDecisionsStyles = require("./styles/tasksAndDecisionsStyles");
+var _telepointerStyles = require("./styles/telepointerStyles");
 var _textColorStyles = require("./styles/textColorStyles");
 var _unsupportedStyles = require("./styles/unsupportedStyles");
 var _whitespaceStyles = require("./styles/whitespaceStyles");
@@ -104,7 +104,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
 
 // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
 var contentStyles = function contentStyles() {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  ", ";\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  // Switch between the two icons based on the visual refresh feature gate\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _whitespaceStyles.whitespaceStyles, _styles.listsSharedStyles, _indentationStyles.indentationStyles, _shadowStyles.shadowStyles, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, _codeBlockStyles.codeBlockStyles, (0, _styles2.blocktypeStyles)(), _codeMarkStyles.codeMarkStyles, _textColorStyles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, _list.listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel.panelStyles)(), _mentions.mentionsStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _gridStyles.gridStyles, _blockMarksStyles.blockMarksStyles, _dateStyles.dateStyles, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */\n  ", "\n\n  ", ";\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  // Switch between the two icons based on the visual refresh feature gate\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _whitespaceStyles.whitespaceStyles, _styles.listsSharedStyles, _indentationStyles.indentationStyles, _shadowStyles.shadowStyles, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, _codeBlockStyles.codeBlockStyles, (0, _styles2.blocktypeStyles)(), _codeMarkStyles.codeMarkStyles, _textColorStyles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, _list.listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _telepointerStyles.telepointerStyle : _telepointerStyles.telepointerStyleWithInitialOnly, _telepointerStyles.telepointerColorAndCommonStyle, _selection.gapCursorStyles, (0, _panel.panelStyles)(), _mentions.mentionsStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _gridStyles.gridStyles, _blockMarksStyles.blockMarksStyles, _dateStyles.dateStyles, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && _tasksAndDecisions.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
     exposure: false

package/dist/cjs/ui/EditorContentContainer/styles/resizerStyles.js

@@ -164,6 +164,57 @@ var resizerStyles = exports.resizerStyles = (0, _react.css)((0, _defineProperty2
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 var pragmaticResizerStyles = exports.pragmaticResizerStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.fabric-editor-breakout-mark': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="codeBlock"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-left': {
+        left: '-12px'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-right': {
+        right: '-12px'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle': {
+        height: 'calc(100% - 12px)'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="expand"]), &:has([data-prosemirror-node-name="layoutSection"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-left': {
+        left: '-32px'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-right': {
+        right: '-32px'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="expand"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle': {
+        height: 'calc(100% - 4px)'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="layoutSection"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle': {
+        height: 'calc(100% - 8px)'
+      }
+    },
+    // the first node in the document always has margin-top = 0
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has(.first-node-in-document)': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle': {
+        height: '100%'
+      }
+    }
+  },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.pm-breakout-resize-handle': {
     position: 'relative',
@@ -172,7 +223,7 @@ var pragmaticResizerStyles = exports.pragmaticResizerStyles = (0, _react.css)({
     justifyContent: 'center',
     height: '100%',
     width: 7,
-    alignSelf: 'center',
+    alignSelf: 'end',
     gridRow: 1,
     gridColumn: 1,
     cursor: 'col-resize',
@@ -188,13 +239,11 @@ var pragmaticResizerStyles = exports.pragmaticResizerStyles = (0, _react.css)({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.pm-breakout-resize-handle-left': {
-    justifySelf: 'start',
-    left: -20
+    justifySelf: 'start'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.pm-breakout-resize-handle-right': {
-    justifySelf: 'end',
-    right: -20
+    justifySelf: 'end'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.pm-breakout-resize-handle-inner': {

package/dist/cjs/ui/EditorContentContainer/styles/telepointerStyles.js

@@ -0,0 +1,207 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.telepointerStyleWithInitialOnly = exports.telepointerStyle = exports.telepointerColorAndCommonStyle = void 0;
+var _react = require("@emotion/react");
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
+/* eslint-disable @atlaskit/ui-styling-standard/no-exported-styles */
+/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
+
+var pulseIn = (0, _react.keyframes)({
+  '0%, 100%': {
+    transform: 'scaleX(0)',
+    opacity: 0
+  },
+  '13%': {
+    transform: 'scaleX(1.4) scaleY(1.4)',
+    opacity: 1
+  },
+  '20%, 85%': {
+    transform: 'scaleX(1) scaleY(1)',
+    opacity: 1
+  }
+});
+var pulseOut = (0, _react.keyframes)({
+  '0%, 90%, 100%': {
+    transform: 'scaleX(1)',
+    opacity: 1
+  },
+  '10%, 80%': {
+    transform: 'scaleX(0)',
+    opacity: 0
+  }
+});
+var telepointerColorAndCommonStyle = exports.telepointerColorAndCommonStyle = (0, _react.css)({
+  '.ProseMirror .telepointer': {
+    position: 'relative',
+    transition: 'opacity 200ms',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&.telepointer-selection:not(.inlineNodeView)': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: 1.2,
+      pointerEvents: 'none',
+      userSelect: 'none'
+    },
+    '&.telepointer-dim': {
+      opacity: 0.2
+    },
+    '&.color-0': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-red-bolder, #C9372C)"
+    },
+    '&.color-1': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-blue-bolder, #0C66E4)"
+    },
+    '&.color-2': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-green-bolder, #1F845A)"
+    },
+    '&.color-3': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-yellow-bolder, #946F00)"
+    },
+    '&.color-4': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-purple-bolder, #6E5DC6)"
+    },
+    '&.color-5': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-magenta-bolder, #AE4787)"
+    },
+    '&.color-6': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-teal-bolder, #227D9B)"
+    },
+    '&.color-7': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-orange-bolder, #C25100)"
+    },
+    '&.color-8': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-lime-bolder, #5B7F24)"
+    },
+    '&.color-9': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-gray-bolder, #626F86)"
+    },
+    '&.color-10': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-blue-subtle, #579DFF)"
+    },
+    '&.color-11': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-red-subtle, #F87168)"
+    },
+    '&.color-12': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-orange-subtle, #FEA362)"
+    },
+    '&.color-13': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-yellow-subtle, #F5CD47)"
+    },
+    '&.color-14': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-green-subtle, #4BCE97)"
+    },
+    '&.color-15': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-teal-subtle, #6CC3E0)"
+    },
+    '&.color-16': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-purple-subtle, #9F8FEF)"
+    },
+    '&.color-17': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-magenta-subtle, #E774BB)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    'html:not([data-color-mode=dark]) &': {
+      '--telepointer-participant-background-first-stop': '-850000%',
+      '--telepointer-participant-background-second-stop': '150000%'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    'html[data-color-mode=dark] &': {
+      '--telepointer-participant-background-first-stop': '-800000%',
+      '--telepointer-participant-background-second-stop': '200000%'
+    },
+    '&[class*="color-"]': {
+      background: 'linear-gradient(to bottom, var(--telepointer-participant-bg-color) var(--telepointer-participant-background-first-stop), transparent var(--telepointer-participant-background-second-stop))',
+      '&::after': {
+        backgroundColor: 'var(--telepointer-participant-bg-color)',
+        color: 'var(--telepointer-participant-text-color)',
+        borderColor: 'var(--telepointer-participant-bg-color)'
+      }
+    }
+  }
+});
+var telepointerStyle = exports.telepointerStyle = (0, _react.css)({
+  '.ProseMirror .telepointer': {
+    '&.telepointer-selection-badge': {
+      '.telepointer-initial, .telepointer-fullname': {
+        position: 'absolute',
+        display: 'block',
+        userSelect: 'none',
+        whiteSpace: 'pre',
+        top: -14,
+        left: 0,
+        font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+        paddingLeft: "var(--ds-space-050, 4px)",
+        paddingRight: "var(--ds-space-050, 4px)",
+        color: "var(--ds-text-inverse, #FFFFFF)",
+        borderRadius: '0 2px 2px 0'
+      },
+      '.telepointer-initial': {
+        opacity: 1,
+        transition: 'opacity 0.15s ease-out'
+      },
+      '.telepointer-fullname': {
+        opacity: 0,
+        transform: 'scaleX(0)',
+        transformOrigin: 'top left',
+        transition: 'transform 0.15s ease-out, opacity 0.15s ease-out'
+      }
+    },
+    '&.telepointer-pulse-animate': {
+      '.telepointer-initial': {
+        animation: "".concat(pulseOut, " 2s ease-in-out")
+      },
+      '.telepointer-fullname': {
+        animation: "".concat(pulseIn, " 2s ease-in-out")
+      }
+    },
+    '&:hover': {
+      '.telepointer-initial': {
+        opacity: 0,
+        transitionDelay: '150ms'
+      },
+      '.telepointer-fullname': {
+        transform: 'scaleX(1)',
+        opacity: 1,
+        zIndex: 1
+      }
+    }
+  }
+});
+var telepointerStyleWithInitialOnly = exports.telepointerStyleWithInitialOnly = (0, _react.css)({
+  '.ProseMirror .telepointer': {
+    '&.telepointer-selection-badge::after': {
+      content: 'attr(data-initial)',
+      position: 'absolute',
+      display: 'block',
+      top: -14,
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      fontSize: '0.5625rem',
+      padding: "var(--ds-space-025, 2px)",
+      color: "var(--ds-text-inverse, #FFFFFF)",
+      left: 0,
+      borderRadius: '2px 2px 2px 0',
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: 'initial'
+    }
+  }
+});

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 = "207.11.1";
+var version = exports.version = "207.11.2";

package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js

@@ -10,7 +10,6 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx, useTheme } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/browser';
-import { telepointerStyle, telepointerStyleWithInitialOnly } from '@atlaskit/editor-common/collab';
 import { gapCursorStyles } from '@atlaskit/editor-common/selection';
 import { GRID_GUTTER, listsSharedStyles } from '@atlaskit/editor-common/styles';
 import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
@@ -52,6 +51,7 @@ import { ruleStyles } from './styles/rule';
 import { shadowStyles } from './styles/shadowStyles';
 import { linkingVisualRefreshV1Styles, smartCardStyles, smartLinksInLivePagesStyles, smartLinksInLivePagesStylesOld } from './styles/smartCardStyles';
 import { tasksAndDecisionsStyles } from './styles/tasksAndDecisionsStyles';
+import { telepointerColorAndCommonStyle, telepointerStyle, telepointerStyleWithInitialOnly } from './styles/telepointerStyles';
 import { textColorStyles } from './styles/textColorStyles';
 import { unsupportedStyles } from './styles/unsupportedStyles';
 import { whitespaceStyles } from './styles/whitespaceStyles';
@@ -224,6 +224,10 @@ const contentStyles = () => css`
   ${mediaStyles}
 
   ${fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly}
+
+  /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */
+  ${telepointerColorAndCommonStyle}
+
   ${gapCursorStyles};
 
 	${panelStyles()}

package/dist/es2019/ui/EditorContentContainer/styles/resizerStyles.js

@@ -209,6 +209,57 @@ export const resizerStyles = css({
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export const pragmaticResizerStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.fabric-editor-breakout-mark': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="codeBlock"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-left': {
+        left: '-12px'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-right': {
+        right: '-12px'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle': {
+        height: 'calc(100% - 12px)'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="expand"]), &:has([data-prosemirror-node-name="layoutSection"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-left': {
+        left: '-32px'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-right': {
+        right: '-32px'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="expand"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle': {
+        height: 'calc(100% - 4px)'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="layoutSection"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle': {
+        height: 'calc(100% - 8px)'
+      }
+    },
+    // the first node in the document always has margin-top = 0
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has(.first-node-in-document)': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle': {
+        height: '100%'
+      }
+    }
+  },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.pm-breakout-resize-handle': {
     position: 'relative',
@@ -217,7 +268,7 @@ export const pragmaticResizerStyles = css({
     justifyContent: 'center',
     height: '100%',
     width: 7,
-    alignSelf: 'center',
+    alignSelf: 'end',
     gridRow: 1,
     gridColumn: 1,
     cursor: 'col-resize',
@@ -233,13 +284,11 @@ export const pragmaticResizerStyles = css({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.pm-breakout-resize-handle-left': {
-    justifySelf: 'start',
-    left: -20
+    justifySelf: 'start'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.pm-breakout-resize-handle-right': {
-    justifySelf: 'end',
-    right: -20
+    justifySelf: 'end'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.pm-breakout-resize-handle-inner': {

package/dist/es2019/ui/EditorContentContainer/styles/telepointerStyles.js

@@ -0,0 +1,200 @@
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
+/* eslint-disable @atlaskit/ui-styling-standard/no-exported-styles */
+/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
+import { css, keyframes } from '@emotion/react';
+const pulseIn = keyframes({
+  '0%, 100%': {
+    transform: 'scaleX(0)',
+    opacity: 0
+  },
+  '13%': {
+    transform: 'scaleX(1.4) scaleY(1.4)',
+    opacity: 1
+  },
+  '20%, 85%': {
+    transform: 'scaleX(1) scaleY(1)',
+    opacity: 1
+  }
+});
+const pulseOut = keyframes({
+  '0%, 90%, 100%': {
+    transform: 'scaleX(1)',
+    opacity: 1
+  },
+  '10%, 80%': {
+    transform: 'scaleX(0)',
+    opacity: 0
+  }
+});
+export const telepointerColorAndCommonStyle = css({
+  '.ProseMirror .telepointer': {
+    position: 'relative',
+    transition: 'opacity 200ms',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&.telepointer-selection:not(.inlineNodeView)': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: 1.2,
+      pointerEvents: 'none',
+      userSelect: 'none'
+    },
+    '&.telepointer-dim': {
+      opacity: 0.2
+    },
+    '&.color-0': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-red-bolder, #C9372C)"
+    },
+    '&.color-1': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-blue-bolder, #0C66E4)"
+    },
+    '&.color-2': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-green-bolder, #1F845A)"
+    },
+    '&.color-3': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-yellow-bolder, #946F00)"
+    },
+    '&.color-4': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-purple-bolder, #6E5DC6)"
+    },
+    '&.color-5': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-magenta-bolder, #AE4787)"
+    },
+    '&.color-6': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-teal-bolder, #227D9B)"
+    },
+    '&.color-7': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-orange-bolder, #C25100)"
+    },
+    '&.color-8': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-lime-bolder, #5B7F24)"
+    },
+    '&.color-9': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-gray-bolder, #626F86)"
+    },
+    '&.color-10': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-blue-subtle, #579DFF)"
+    },
+    '&.color-11': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-red-subtle, #F87168)"
+    },
+    '&.color-12': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-orange-subtle, #FEA362)"
+    },
+    '&.color-13': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-yellow-subtle, #F5CD47)"
+    },
+    '&.color-14': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-green-subtle, #4BCE97)"
+    },
+    '&.color-15': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-teal-subtle, #6CC3E0)"
+    },
+    '&.color-16': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-purple-subtle, #9F8FEF)"
+    },
+    '&.color-17': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-magenta-subtle, #E774BB)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    'html:not([data-color-mode=dark]) &': {
+      '--telepointer-participant-background-first-stop': '-850000%',
+      '--telepointer-participant-background-second-stop': '150000%'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    'html[data-color-mode=dark] &': {
+      '--telepointer-participant-background-first-stop': '-800000%',
+      '--telepointer-participant-background-second-stop': '200000%'
+    },
+    '&[class*="color-"]': {
+      background: 'linear-gradient(to bottom, var(--telepointer-participant-bg-color) var(--telepointer-participant-background-first-stop), transparent var(--telepointer-participant-background-second-stop))',
+      '&::after': {
+        backgroundColor: 'var(--telepointer-participant-bg-color)',
+        color: 'var(--telepointer-participant-text-color)',
+        borderColor: 'var(--telepointer-participant-bg-color)'
+      }
+    }
+  }
+});
+export const telepointerStyle = css({
+  '.ProseMirror .telepointer': {
+    '&.telepointer-selection-badge': {
+      '.telepointer-initial, .telepointer-fullname': {
+        position: 'absolute',
+        display: 'block',
+        userSelect: 'none',
+        whiteSpace: 'pre',
+        top: -14,
+        left: 0,
+        font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+        paddingLeft: "var(--ds-space-050, 4px)",
+        paddingRight: "var(--ds-space-050, 4px)",
+        color: "var(--ds-text-inverse, #FFFFFF)",
+        borderRadius: '0 2px 2px 0'
+      },
+      '.telepointer-initial': {
+        opacity: 1,
+        transition: 'opacity 0.15s ease-out'
+      },
+      '.telepointer-fullname': {
+        opacity: 0,
+        transform: 'scaleX(0)',
+        transformOrigin: 'top left',
+        transition: 'transform 0.15s ease-out, opacity 0.15s ease-out'
+      }
+    },
+    '&.telepointer-pulse-animate': {
+      '.telepointer-initial': {
+        animation: `${pulseOut} 2s ease-in-out`
+      },
+      '.telepointer-fullname': {
+        animation: `${pulseIn} 2s ease-in-out`
+      }
+    },
+    '&:hover': {
+      '.telepointer-initial': {
+        opacity: 0,
+        transitionDelay: '150ms'
+      },
+      '.telepointer-fullname': {
+        transform: 'scaleX(1)',
+        opacity: 1,
+        zIndex: 1
+      }
+    }
+  }
+});
+export const telepointerStyleWithInitialOnly = css({
+  '.ProseMirror .telepointer': {
+    '&.telepointer-selection-badge::after': {
+      content: 'attr(data-initial)',
+      position: 'absolute',
+      display: 'block',
+      top: -14,
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      fontSize: '0.5625rem',
+      padding: "var(--ds-space-025, 2px)",
+      color: "var(--ds-text-inverse, #FFFFFF)",
+      left: 0,
+      borderRadius: '2px 2px 2px 0',
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: 'initial'
+    }
+  }
+});

package/dist/es2019/version-wrapper.js

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

package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js

@@ -12,7 +12,6 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx, useTheme } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/browser';
-import { telepointerStyle, telepointerStyleWithInitialOnly } from '@atlaskit/editor-common/collab';
 import { gapCursorStyles } from '@atlaskit/editor-common/selection';
 import { GRID_GUTTER, listsSharedStyles } from '@atlaskit/editor-common/styles';
 import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
@@ -54,6 +53,7 @@ import { ruleStyles } from './styles/rule';
 import { shadowStyles } from './styles/shadowStyles';
 import { linkingVisualRefreshV1Styles, smartCardStyles, smartLinksInLivePagesStyles, smartLinksInLivePagesStylesOld } from './styles/smartCardStyles';
 import { tasksAndDecisionsStyles } from './styles/tasksAndDecisionsStyles';
+import { telepointerColorAndCommonStyle, telepointerStyle, telepointerStyleWithInitialOnly } from './styles/telepointerStyles';
 import { textColorStyles } from './styles/textColorStyles';
 import { unsupportedStyles } from './styles/unsupportedStyles';
 import { whitespaceStyles } from './styles/whitespaceStyles';
@@ -98,7 +98,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
 
 // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
 var contentStyles = function contentStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  ", ";\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  // Switch between the two icons based on the visual refresh feature gate\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, whitespaceStyles, listsSharedStyles, indentationStyles, shadowStyles, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles, blocktypeStyles(), codeMarkStyles, textColorStyles, backgroundColorStyles, listsStyles, ruleStyles, mediaStyles, fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, tasksAndDecisionsStyles, gridStyles, blockMarksStyles, dateStyles, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */\n  ", "\n\n  ", ";\n\n\t", "\n\n\t", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  // Switch between the two icons based on the visual refresh feature gate\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, whitespaceStyles, listsSharedStyles, indentationStyles, shadowStyles, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles, blocktypeStyles(), codeMarkStyles, textColorStyles, backgroundColorStyles, listsStyles, ruleStyles, mediaStyles, fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, telepointerColorAndCommonStyle, gapCursorStyles, panelStyles(), mentionsStyles, tasksAndDecisionsStyles, gridStyles, blockMarksStyles, dateStyles, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
     exposure: false
   }) && vanillaTaskItemStyles, editorExperiment('platform_editor_vanilla_dom', true, {
     exposure: false

package/dist/esm/ui/EditorContentContainer/styles/resizerStyles.js

@@ -156,6 +156,57 @@ export var resizerStyles = css(_defineProperty(_defineProperty(_defineProperty(_
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export var pragmaticResizerStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.fabric-editor-breakout-mark': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="codeBlock"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-left': {
+        left: '-12px'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-right': {
+        right: '-12px'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle': {
+        height: 'calc(100% - 12px)'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="expand"]), &:has([data-prosemirror-node-name="layoutSection"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-left': {
+        left: '-32px'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle-right': {
+        right: '-32px'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="expand"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle': {
+        height: 'calc(100% - 4px)'
+      }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has([data-prosemirror-node-name="layoutSection"])': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle': {
+        height: 'calc(100% - 8px)'
+      }
+    },
+    // the first node in the document always has margin-top = 0
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&:has(.first-node-in-document)': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '> .pm-breakout-resize-handle': {
+        height: '100%'
+      }
+    }
+  },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.pm-breakout-resize-handle': {
     position: 'relative',
@@ -164,7 +215,7 @@ export var pragmaticResizerStyles = css({
     justifyContent: 'center',
     height: '100%',
     width: 7,
-    alignSelf: 'center',
+    alignSelf: 'end',
     gridRow: 1,
     gridColumn: 1,
     cursor: 'col-resize',
@@ -180,13 +231,11 @@ export var pragmaticResizerStyles = css({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.pm-breakout-resize-handle-left': {
-    justifySelf: 'start',
-    left: -20
+    justifySelf: 'start'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.pm-breakout-resize-handle-right': {
-    justifySelf: 'end',
-    right: -20
+    justifySelf: 'end'
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.pm-breakout-resize-handle-inner': {

package/dist/esm/ui/EditorContentContainer/styles/telepointerStyles.js

@@ -0,0 +1,200 @@
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
+/* eslint-disable @atlaskit/ui-styling-standard/no-exported-styles */
+/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
+import { css, keyframes } from '@emotion/react';
+var pulseIn = keyframes({
+  '0%, 100%': {
+    transform: 'scaleX(0)',
+    opacity: 0
+  },
+  '13%': {
+    transform: 'scaleX(1.4) scaleY(1.4)',
+    opacity: 1
+  },
+  '20%, 85%': {
+    transform: 'scaleX(1) scaleY(1)',
+    opacity: 1
+  }
+});
+var pulseOut = keyframes({
+  '0%, 90%, 100%': {
+    transform: 'scaleX(1)',
+    opacity: 1
+  },
+  '10%, 80%': {
+    transform: 'scaleX(0)',
+    opacity: 0
+  }
+});
+export var telepointerColorAndCommonStyle = css({
+  '.ProseMirror .telepointer': {
+    position: 'relative',
+    transition: 'opacity 200ms',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '&.telepointer-selection:not(.inlineNodeView)': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: 1.2,
+      pointerEvents: 'none',
+      userSelect: 'none'
+    },
+    '&.telepointer-dim': {
+      opacity: 0.2
+    },
+    '&.color-0': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-red-bolder, #C9372C)"
+    },
+    '&.color-1': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-blue-bolder, #0C66E4)"
+    },
+    '&.color-2': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-green-bolder, #1F845A)"
+    },
+    '&.color-3': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-yellow-bolder, #946F00)"
+    },
+    '&.color-4': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-purple-bolder, #6E5DC6)"
+    },
+    '&.color-5': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-magenta-bolder, #AE4787)"
+    },
+    '&.color-6': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-teal-bolder, #227D9B)"
+    },
+    '&.color-7': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-orange-bolder, #C25100)"
+    },
+    '&.color-8': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-lime-bolder, #5B7F24)"
+    },
+    '&.color-9': {
+      '--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-gray-bolder, #626F86)"
+    },
+    '&.color-10': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-blue-subtle, #579DFF)"
+    },
+    '&.color-11': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-red-subtle, #F87168)"
+    },
+    '&.color-12': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-orange-subtle, #FEA362)"
+    },
+    '&.color-13': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-yellow-subtle, #F5CD47)"
+    },
+    '&.color-14': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-green-subtle, #4BCE97)"
+    },
+    '&.color-15': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-teal-subtle, #6CC3E0)"
+    },
+    '&.color-16': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-purple-subtle, #9F8FEF)"
+    },
+    '&.color-17': {
+      '--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #091E42)",
+      '--telepointer-participant-bg-color': "var(--ds-background-accent-magenta-subtle, #E774BB)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    'html:not([data-color-mode=dark]) &': {
+      '--telepointer-participant-background-first-stop': '-850000%',
+      '--telepointer-participant-background-second-stop': '150000%'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
+    'html[data-color-mode=dark] &': {
+      '--telepointer-participant-background-first-stop': '-800000%',
+      '--telepointer-participant-background-second-stop': '200000%'
+    },
+    '&[class*="color-"]': {
+      background: 'linear-gradient(to bottom, var(--telepointer-participant-bg-color) var(--telepointer-participant-background-first-stop), transparent var(--telepointer-participant-background-second-stop))',
+      '&::after': {
+        backgroundColor: 'var(--telepointer-participant-bg-color)',
+        color: 'var(--telepointer-participant-text-color)',
+        borderColor: 'var(--telepointer-participant-bg-color)'
+      }
+    }
+  }
+});
+export var telepointerStyle = css({
+  '.ProseMirror .telepointer': {
+    '&.telepointer-selection-badge': {
+      '.telepointer-initial, .telepointer-fullname': {
+        position: 'absolute',
+        display: 'block',
+        userSelect: 'none',
+        whiteSpace: 'pre',
+        top: -14,
+        left: 0,
+        font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+        paddingLeft: "var(--ds-space-050, 4px)",
+        paddingRight: "var(--ds-space-050, 4px)",
+        color: "var(--ds-text-inverse, #FFFFFF)",
+        borderRadius: '0 2px 2px 0'
+      },
+      '.telepointer-initial': {
+        opacity: 1,
+        transition: 'opacity 0.15s ease-out'
+      },
+      '.telepointer-fullname': {
+        opacity: 0,
+        transform: 'scaleX(0)',
+        transformOrigin: 'top left',
+        transition: 'transform 0.15s ease-out, opacity 0.15s ease-out'
+      }
+    },
+    '&.telepointer-pulse-animate': {
+      '.telepointer-initial': {
+        animation: "".concat(pulseOut, " 2s ease-in-out")
+      },
+      '.telepointer-fullname': {
+        animation: "".concat(pulseIn, " 2s ease-in-out")
+      }
+    },
+    '&:hover': {
+      '.telepointer-initial': {
+        opacity: 0,
+        transitionDelay: '150ms'
+      },
+      '.telepointer-fullname': {
+        transform: 'scaleX(1)',
+        opacity: 1,
+        zIndex: 1
+      }
+    }
+  }
+});
+export var telepointerStyleWithInitialOnly = css({
+  '.ProseMirror .telepointer': {
+    '&.telepointer-selection-badge::after': {
+      content: 'attr(data-initial)',
+      position: 'absolute',
+      display: 'block',
+      top: -14,
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      fontSize: '0.5625rem',
+      padding: "var(--ds-space-025, 2px)",
+      color: "var(--ds-text-inverse, #FFFFFF)",
+      left: 0,
+      borderRadius: '2px 2px 2px 0',
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: 'initial'
+    }
+  }
+});

package/dist/esm/version-wrapper.js

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

package/dist/types/ui/EditorContentContainer/styles/telepointerStyles.d.ts

@@ -0,0 +1,3 @@
+export declare const telepointerColorAndCommonStyle: import("@emotion/react").SerializedStyles;
+export declare const telepointerStyle: import("@emotion/react").SerializedStyles;
+export declare const telepointerStyleWithInitialOnly: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/EditorContentContainer/styles/telepointerStyles.d.ts

@@ -0,0 +1,3 @@
+export declare const telepointerColorAndCommonStyle: import("@emotion/react").SerializedStyles;
+export declare const telepointerStyle: import("@emotion/react").SerializedStyles;
+export declare const telepointerStyleWithInitialOnly: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "207.11.1",
+	"version": "207.11.2",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -50,11 +50,11 @@
 		"@atlaskit/editor-json-transformer": "^8.24.0",
 		"@atlaskit/editor-performance-metrics": "^2.1.0",
 		"@atlaskit/editor-plugin-quick-insert": "^2.5.0",
-		"@atlaskit/editor-plugins": "^9.0.0",
+		"@atlaskit/editor-plugins": "^9.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/emoji": "^69.2.0",
-		"@atlaskit/icon": "^26.3.0",
+		"@atlaskit/icon": "^26.4.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/media-card": "^79.3.0",
 		"@atlaskit/mention": "^24.2.0",
@@ -62,9 +62,9 @@
 		"@atlaskit/platform-feature-flags-react": "^0.2.0",
 		"@atlaskit/react-ufo": "^3.13.0",
 		"@atlaskit/task-decision": "^19.2.0",
-		"@atlaskit/tmp-editor-statsig": "^5.1.0",
+		"@atlaskit/tmp-editor-statsig": "^5.2.0",
 		"@atlaskit/tokens": "^4.9.0",
-		"@atlaskit/tooltip": "^20.1.0",
+		"@atlaskit/tooltip": "^20.2.0",
 		"@atlaskit/width-detector": "^5.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -92,7 +92,7 @@
 		"@atlaskit/analytics-listeners": "^9.0.0",
 		"@atlaskit/collab-provider": "^10.16.0",
 		"@atlaskit/editor-plugin-annotation": "^2.9.0",
-		"@atlaskit/editor-plugin-card": "^6.3.0",
+		"@atlaskit/editor-plugin-card": "^6.4.0",
 		"@atlaskit/editor-plugin-list": "^4.2.0",
 		"@atlaskit/editor-plugin-paste": "^3.3.0",
 		"@atlaskit/link-provider": "^3.1.0",
@@ -151,10 +151,6 @@
 		"cc_complexit_fe_improve_node_validation": {
 			"type": "boolean"
 		},
-		"platform_editor_scroll_into_view_tr_steps": {
-			"type": "boolean",
-			"referenceOnly": true
-		},
 		"platform_editor_reduce_scroll_jump_on_editor_start": {
 			"type": "boolean"
 		},