@atlaskit/editor-core 208.7.3 → 208.8.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-core
 
+## 208.8.0
+
+### Minor Changes
+
+- [#180500](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/180500)
+  [`411796e8a55c6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/411796e8a55c6) -
+  [ux] Move code-bidi-warning plugin widget to be a vanilla-DOM implementation, instead of react, to
+  fix memory leaks.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 208.7.4
+
+### Patch Changes
+
+- [#180346](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/180346)
+  [`d00d1d362bd18`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d00d1d362bd18) -
+  ED-28086 Clean up platform_editor_no_cursor_on_live_doc_init
+- Updated dependencies
+
 ## 208.7.3
 
 ### Patch Changes

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

@@ -492,7 +492,7 @@ function ReactEditorView(props) {
       if ((0, _platformFeatureFlags.fg)('platform_editor_reduce_scroll_jump_on_editor_start')) {
         if (!mitigateScrollJump) {
           var liveDocWithContent = (__livePage || (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !(0, _document.isEmptyDocument)(editorView.state.doc);
-          if (!liveDocWithContent || !(0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init')) {
+          if (!liveDocWithContent) {
             focusTimeoutId.current = (0, _handleEditorFocus.handleEditorFocus)(editorView);
           }
           if ((0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('cc_editor_focus_before_editor_on_load')) {
@@ -503,7 +503,7 @@ function ReactEditorView(props) {
         }
       } else {
         var _liveDocWithContent = (__livePage || (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !(0, _document.isEmptyDocument)(editorView.state.doc);
-        if (!_liveDocWithContent || !(0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init')) {
+        if (!_liveDocWithContent) {
           focusTimeoutId.current = (0, _handleEditorFocus.handleEditorFocus)(editorView);
         }
       }
@@ -621,7 +621,7 @@ function ReactEditorView(props) {
         if (shouldFocus && view.props.editable && view.props.editable(view.state)) {
           if ((0, _platformFeatureFlags.fg)('platform_editor_reduce_scroll_jump_on_editor_start')) {
             if (!mitigateScrollJump) {
-              var isLivePageWithContent = (__livePage || (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !(0, _document.isEmptyDocument)(view.state.doc) && (0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init');
+              var isLivePageWithContent = (__livePage || (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !(0, _document.isEmptyDocument)(view.state.doc);
               if (!isLivePageWithContent && shouldFocus && view.props.editable && view.props.editable(view.state)) {
                 focusTimeoutId.current = (0, _handleEditorFocus.handleEditorFocus)(view);
               }
@@ -632,7 +632,7 @@ function ReactEditorView(props) {
               }
             }
           } else {
-            var _isLivePageWithContent = (__livePage || (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !(0, _document.isEmptyDocument)(view.state.doc) && (0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init');
+            var _isLivePageWithContent = (__livePage || (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !(0, _document.isEmptyDocument)(view.state.doc);
             if (!_isLivePageWithContent && shouldFocus && view.props.editable && view.props.editable(view.state)) {
               focusTimeoutId.current = (0, _handleEditorFocus.handleEditorFocus)(view);
             }
@@ -708,7 +708,7 @@ function ReactEditorView(props) {
           return !disabled;
         }
       });
-      var isLivePageWithContent = (__livePage || (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !(0, _document.isEmptyDocument)(viewRef.current.state.doc) && (0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init');
+      var isLivePageWithContent = (__livePage || (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !(0, _document.isEmptyDocument)(viewRef.current.state.doc);
       if (!disabled && shouldFocus && !isLivePageWithContent) {
         focusTimeoutId.current = (0, _handleEditorFocus.handleEditorFocus)(viewRef.current);
       }

package/dist/cjs/presets/default.js

@@ -66,7 +66,7 @@ function createDefaultPreset(options) {
     }
   }], function () {
     return (0, _platformFeatureFlags.fg)('platform_editor_use_preferences_plugin');
-  }).maybeAdd(_interaction.interactionPlugin, Boolean(options === null || options === void 0 ? void 0 : options.__livePage) ? (0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init') : (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)).add(_composition.compositionPlugin).add([_contextIdentifier.contextIdentifierPlugin, {
+  }).maybeAdd(_interaction.interactionPlugin, Boolean(options === null || options === void 0 ? void 0 : options.__livePage) || (0, _expValEquals.expValEquals)('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)).add(_composition.compositionPlugin).add([_contextIdentifier.contextIdentifierPlugin, {
     contextIdentifierProvider: options.contextIdentifierProvider
   }]).add([_base.basePlugin, options.base]).add(_decorations.decorationsPlugin).add([_typeAhead.typeAheadPlugin, options.typeAhead]).maybeAdd(_history.historyPlugin, Boolean(options.allowUndoRedoButtons)).add([_primaryToolbar.primaryToolbarPlugin, {
     contextualFormattingEnabled: isFullPage

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

@@ -419,9 +419,9 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     editorContentGutterStyle()]
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: (0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init') ? (0, _classnames.default)('ak-editor-content-area', 'appearance-full-page', {
+    className: (0, _classnames.default)('ak-editor-content-area', 'appearance-full-page', {
       'fabric-editor--full-width-mode': fullWidthMode
-    }) : ['ak-editor-content-area', 'appearance-full-page', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
+    }),
     ref: contentAreaRef
   }, !!props.customContentComponents && 'before' in props.customContentComponents ? (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents.before) : (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents), (0, _react2.jsx)(_PluginSlot.default, {
     editorView: props.editorView,

package/dist/cjs/ui/ContentStyles/code-bidi-warning.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.codeBidiWarningStyles = void 0;
+var _react = require("@emotion/react");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var codeBidiWarningStyles = exports.codeBidiWarningStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"]': {
+    display: 'inline-block'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-decorator"]': {
+    paddingInlineStart: "var(--ds-space-050, 4px)",
+    paddingInlineEnd: "var(--ds-space-050, 4px)",
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    fontStyle: 'normal',
+    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    paddingTop: '0.05rem',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    paddingBottom: '0.05rem',
+    color: "var(--ds-text-warning, #A54800)",
+    backgroundColor: "var(--ds-background-warning, #FFF7D6)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-decorator"]:hover': {
+    color: "var(--ds-text-warning, #A54800)",
+    backgroundColor: "var(--ds-background-warning-hovered, #F8E6A0)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-tooltip"]': {
+    visibility: 'hidden',
+    boxSizing: 'border-box',
+    width: '15pc',
+    backgroundColor: "var(--ds-background-neutral-bold, #44546F)",
+    color: "var(--ds-text-inverse, #FFFFFF)",
+    overflowWrap: 'break-word',
+    cursor: 'default',
+    borderRadius: "var(--ds-border-radius, 4px)",
+    margin: "var(--ds-space-0, 0px)",
+    padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)"),
+    position: 'fixed',
+    // The character label will be ~80px and this is positioned from the end of that label
+    // We also use this instead of top: 24px to make sure the tooltip maintains its initial position
+    // instead of being positioned relative to the viewport.
+    // We need to use position: fixed so that the tooltip bypasses the overflow settings of the code block
+    // and is always visible.
+    // We also offset a little extra here to account for the transition behavior (to replicate ADS fade-in-from-top)
+    transform: 'translate(calc(-50% - 40px), calc(24px - 4px))',
+    opacity: 0,
+    whiteSpace: 'normal',
+    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    zIndex: 9999,
+    // Exit animation timings
+    // - Mark invisible after 0.475s
+    // - After 0.3s, fade out and move up over 0.175s
+    transition: 'visibility 0s linear 0.475s, opacity 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s, transform 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"]:hover [data-bidi-component="code-bidi-warning-tooltip"]': {
+    visibility: 'visible',
+    transform: 'translate(calc(-50% - 40px), calc(24px))',
+    opacity: 1,
+    // Enter animation timings
+    // - Mark visible after 0.3s of hovering
+    // - After 0.3s, fade in over 0.175s
+    // - After 0.3s, move down over 0.35s
+    transition: 'visibility 0s linear 0.3s, opacity 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s, transform 0.35s cubic-bezier(0.15,1,0.3,1) 0.3s'
+  }
+});

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

@@ -27,6 +27,7 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tokens = require("@atlaskit/tokens");
 var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
 var _aiPanels = require("./ai-panels");
+var _codeBidiWarning = require("./code-bidi-warning");
 var _codeBlock = require("./code-block");
 var _date = require("./date");
 var _expand = require("./expand");
@@ -110,7 +111,7 @@ var mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding = (0, _reac
     padding: '1px 0.3em 1px 0.23em'
   }
 });
-var vanillaSelectionStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.danger {\n\t\t.editor-mention-primitive {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t.", " > .editor-mention-primitive,\n\t.", " > .editor-mention-primitive.mention-self,\n\t.", " > .editor-mention-primitive.mention-restricted {\n\t\t", "\n\t\t/* need to specify dark text colour because personal mentions\n\t       (in dark blue) have white text by default */\n\t\tcolor: ", "\n\t}\n"])), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)");
+var mentionSelectionStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.danger {\n\t\t.editor-mention-primitive {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t.", " > .editor-mention-primitive,\n\t.", " > .editor-mention-primitive.mention-self,\n\t.", " > .editor-mention-primitive.mention-restricted {\n\t\t", "\n\t\t/* need to specify dark text colour because personal mentions\n\t       (in dark blue) have white text by default */\n\t\tcolor: ", "\n\t}\n"])), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)");
 var mentionsStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t&.", " [data-mention-id] > span {\n\t\t\t", "\n\n\t\t\t/* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t> span\n\t\t\t> span\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t\t.", " > span > span > span {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)", _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, #091E420F)", "var(--ds-text-subtle, #44546F)");
 var listsStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\tli {\n\t\t\tposition: relative;\n\n\t\t\t> p:not(:first-child) {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\n\t\t\t/* In SSR the above rule will apply to all p tags because first-child would be a style tag.\n\t\t\tThe following rule resets the first p tag back to its original margin\n\t\t\tdefined in packages/editor/editor-common/src/styles/shared/paragraph.ts */\n\t\t\t> style:first-child + p {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n    /* This prevents https://product-fabric.atlassian.net/browse/ED-20924 */\n    &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t}\n"])), "var(--ds-space-050, 4px)", _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _browser.browser.safari ? _styles.codeBlockInListSafariFix : '');
 var emojiStyles = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tdisplay: inline-block;\n\t}\n\n\t.", ", .", " {\n\t\tbackground: no-repeat transparent;\n\t\tdisplay: inline-block;\n\t\theight: ", "px;\n\t\tmax-height: ", "px;\n\t\tcursor: pointer;\n\t\tvertical-align: middle;\n\t\tuser-select: all;\n\t}\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tborder-radius: 2px;\n\t\t\t", "\n\t\t}\n\t}\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _emoji.defaultEmojiHeight, _emoji.defaultEmojiHeight, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
@@ -166,11 +167,9 @@ var akEditorBreakpointForSmallDevice = "1266px";
 // Under editor experiment platform_editor_core_static_emotion
 // If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
 var legacyContentStyles = function legacyContentStyles(props) {
-  return (0, _react2.css)(_templateObject8 || (_templateObject8 = (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--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-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\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\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: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\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\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  /* Switch between the two icons based on the visual refresh feature gate */\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\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\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn 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.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     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, (0, _editorSharedStyles.editorFontSize)({
+  return (0, _react2.css)(_templateObject8 || (_templateObject8 = (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--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-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\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\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: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\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\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  /* Switch between the two icons based on the visual refresh feature gate */\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\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\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn 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.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     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, (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject9 || (_templateObject9 = (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)(_templateObject0 || (_templateObject0 = (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)", firstFloatingToolbarButtonStyles, _styles5.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') && _styles5.placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, 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, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, mentionNodeStyles, (0, _platformFeatureFlags.fg)('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
-    exposure: false
-  }) && vanillaSelectionStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_magenta_match') ? _styles3.findReplaceStylesNewMagenta : _styles3.findReplaceStylesNewYellow : _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _tasksAndDecisions.taskItemStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithVisualRefresh, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _status.statusNodeStyles)(), (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, _date.dateStyles, _date.dateNodeStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), (0, _styles.pragmaticStylesLayoutFirstNodeResizeHandleFix)(), (0, _styles.pragmaticResizerStylesForTooltip)(), (0, _aiPanels.aiPanelStyles)(props.colorMode), firstBlockNodeStylesNew, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
+  }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject9 || (_templateObject9 = (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)(_templateObject0 || (_templateObject0 = (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)", firstFloatingToolbarButtonStyles, _styles5.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') && _styles5.placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, 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, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, mentionNodeStyles, (0, _platformFeatureFlags.fg)('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding, mentionSelectionStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_magenta_match') ? _styles3.findReplaceStylesNewMagenta : _styles3.findReplaceStylesNewYellow : _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _tasksAndDecisions.taskItemStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithVisualRefresh, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _status.statusNodeStyles)(), (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, _date.dateStyles, _date.dateNodeStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), (0, _styles.pragmaticStylesLayoutFirstNodeResizeHandleFix)(), (0, _styles.pragmaticResizerStylesForTooltip)(), (0, _aiPanels.aiPanelStyles)(props.colorMode), firstBlockNodeStylesNew, (0, _platformFeatureFlags.fg)('platform_editor_vanilla_codebidi_warning') && _codeBidiWarning.codeBidiWarningStyles, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
 };
 var createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {

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

@@ -20,6 +20,7 @@ var _backgroundColorStyles = require("./styles/backgroundColorStyles");
 var _baseStyles = require("./styles/baseStyles");
 var _blockMarksStyles = require("./styles/blockMarksStyles");
 var _blockTypeStyles = require("./styles/blockTypeStyles");
+var _codeBidiWarningStyles = require("./styles/codeBidiWarningStyles");
 var _codeBlockStyles = require("./styles/codeBlockStyles");
 var _codeMarkStyles = require("./styles/codeMarkStyles");
 var _commentEditorStyles = require("./styles/commentEditorStyles");
@@ -327,7 +328,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _link.linkLegacyIconStylesFix,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    (0, _platformFeatureFlags.fg)('confluence_floating_toolbar_animation') && _selectionToolbarStyles.selectionToolbarAnimationStyles],
+    (0, _platformFeatureFlags.fg)('confluence_floating_toolbar_animation') && _selectionToolbarStyles.selectionToolbarAnimationStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    (0, _platformFeatureFlags.fg)('platform_editor_vanilla_codebidi_warning') && _codeBidiWarningStyles.codeBidiWarningStyles],
     "data-editor-scroll-container": isScrollable ? 'true' : undefined,
     "data-testid": "editor-content-container",
     style: {

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

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.codeBidiWarningStyles = void 0;
+var _react = require("@emotion/react");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var codeBidiWarningStyles = exports.codeBidiWarningStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"]': {
+    display: 'inline-block'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-decorator"]': {
+    paddingInlineStart: "var(--ds-space-050, 4px)",
+    paddingInlineEnd: "var(--ds-space-050, 4px)",
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    fontStyle: 'normal',
+    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    paddingTop: '0.05rem',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    paddingBottom: '0.05rem',
+    color: "var(--ds-text-warning, #A54800)",
+    backgroundColor: "var(--ds-background-warning, #FFF7D6)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-decorator"]:hover': {
+    color: "var(--ds-text-warning, #A54800)",
+    backgroundColor: "var(--ds-background-warning-hovered, #F8E6A0)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-tooltip"]': {
+    visibility: 'hidden',
+    boxSizing: 'border-box',
+    width: '15pc',
+    backgroundColor: "var(--ds-background-neutral-bold, #44546F)",
+    color: "var(--ds-text-inverse, #FFFFFF)",
+    overflowWrap: 'break-word',
+    cursor: 'default',
+    borderRadius: "var(--ds-border-radius, 4px)",
+    margin: "var(--ds-space-0, 0px)",
+    padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)"),
+    position: 'fixed',
+    // The character label will be ~80px and this is positioned from the end of that label
+    // We also use this instead of top: 24px to make sure the tooltip maintains its initial position
+    // instead of being positioned relative to the viewport.
+    // We need to use position: fixed so that the tooltip bypasses the overflow settings of the code block
+    // and is always visible.
+    // We also offset a little extra here to account for the transition behavior (to replicate ADS fade-in-from-top)
+    transform: 'translate(calc(-50% - 40px), calc(24px - 4px))',
+    opacity: 0,
+    whiteSpace: 'normal',
+    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    zIndex: 9999,
+    // Exit animation timings
+    // - Mark invisible after 0.475s
+    // - After 0.3s, fade out and move up over 0.175s
+    transition: 'visibility 0s linear 0.475s, opacity 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s, transform 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"]:hover [data-bidi-component="code-bidi-warning-tooltip"]': {
+    visibility: 'visible',
+    transform: 'translate(calc(-50% - 40px), calc(24px))',
+    opacity: 1,
+    // Enter animation timings
+    // - Mark visible after 0.3s of hovering
+    // - After 0.3s, fade in over 0.175s
+    // - After 0.3s, move down over 0.35s
+    transition: 'visibility 0s linear 0.3s, opacity 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s, transform 0.35s cubic-bezier(0.15,1,0.3,1) 0.3s'
+  }
+});

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

@@ -16,7 +16,7 @@ var emojiSelectionStyles = (0, _react.css)({
   borderRadius: '2px'
 });
 
-// Emoji styles from Emoji vanilla node view
+// Emoji node view styles
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 var emojiStyles = exports.emojiStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_CONTAINER), {
   display: 'inline-block'

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

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

@@ -459,7 +459,7 @@ export function ReactEditorView(props) {
       if (fg('platform_editor_reduce_scroll_jump_on_editor_start')) {
         if (!mitigateScrollJump) {
           const liveDocWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(editorView.state.doc);
-          if (!liveDocWithContent || !fg('platform_editor_no_cursor_on_live_doc_init')) {
+          if (!liveDocWithContent) {
             focusTimeoutId.current = handleEditorFocus(editorView);
           }
           if (expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true) && fg('cc_editor_focus_before_editor_on_load')) {
@@ -470,7 +470,7 @@ export function ReactEditorView(props) {
         }
       } else {
         const liveDocWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(editorView.state.doc);
-        if (!liveDocWithContent || !fg('platform_editor_no_cursor_on_live_doc_init')) {
+        if (!liveDocWithContent) {
           focusTimeoutId.current = handleEditorFocus(editorView);
         }
       }
@@ -568,7 +568,7 @@ export function ReactEditorView(props) {
         if (shouldFocus && view.props.editable && view.props.editable(view.state)) {
           if (fg('platform_editor_reduce_scroll_jump_on_editor_start')) {
             if (!mitigateScrollJump) {
-              const isLivePageWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(view.state.doc) && fg('platform_editor_no_cursor_on_live_doc_init');
+              const isLivePageWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(view.state.doc);
               if (!isLivePageWithContent && shouldFocus && view.props.editable && view.props.editable(view.state)) {
                 focusTimeoutId.current = handleEditorFocus(view);
               }
@@ -579,7 +579,7 @@ export function ReactEditorView(props) {
               }
             }
           } else {
-            const isLivePageWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(view.state.doc) && fg('platform_editor_no_cursor_on_live_doc_init');
+            const isLivePageWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(view.state.doc);
             if (!isLivePageWithContent && shouldFocus && view.props.editable && view.props.editable(view.state)) {
               focusTimeoutId.current = handleEditorFocus(view);
             }
@@ -653,7 +653,7 @@ export function ReactEditorView(props) {
       viewRef.current.setProps({
         editable: _state => !disabled
       });
-      const isLivePageWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(viewRef.current.state.doc) && fg('platform_editor_no_cursor_on_live_doc_init');
+      const isLivePageWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(viewRef.current.state.doc);
       if (!disabled && shouldFocus && !isLivePageWithContent) {
         focusTimeoutId.current = handleEditorFocus(viewRef.current);
       }

package/dist/es2019/presets/default.js

@@ -57,7 +57,7 @@ export function createDefaultPreset(options) {
     initialUserPreferences: {
       toolbarDockingPosition: isFullPage ? 'none' : 'top'
     }
-  }], () => fg('platform_editor_use_preferences_plugin')).maybeAdd(interactionPlugin, Boolean(options === null || options === void 0 ? void 0 : options.__livePage) ? fg('platform_editor_no_cursor_on_live_doc_init') : expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)).add(compositionPlugin).add([contextIdentifierPlugin, {
+  }], () => fg('platform_editor_use_preferences_plugin')).maybeAdd(interactionPlugin, Boolean(options === null || options === void 0 ? void 0 : options.__livePage) || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)).add(compositionPlugin).add([contextIdentifierPlugin, {
     contextIdentifierProvider: options.contextIdentifierProvider
   }]).add([basePlugin, options.base]).add(decorationsPlugin).add([typeAheadPlugin, options.typeAhead]).maybeAdd(historyPlugin, Boolean(options.allowUndoRedoButtons)).add([primaryToolbarPlugin, {
     contextualFormattingEnabled: isFullPage

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

@@ -400,9 +400,9 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
     editorContentGutterStyle()]
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: fg('platform_editor_no_cursor_on_live_doc_init') ? classnames('ak-editor-content-area', 'appearance-full-page', {
+    className: classnames('ak-editor-content-area', 'appearance-full-page', {
       'fabric-editor--full-width-mode': fullWidthMode
-    }) : ['ak-editor-content-area', 'appearance-full-page', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
+    }),
     ref: contentAreaRef
   }, !!props.customContentComponents && 'before' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.before) : contentComponentClickWrapper(props.customContentComponents), jsx(PluginSlot, {
     editorView: props.editorView,

package/dist/es2019/ui/ContentStyles/code-bidi-warning.js

@@ -0,0 +1,68 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const codeBidiWarningStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"]': {
+    display: 'inline-block'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-decorator"]': {
+    paddingInlineStart: "var(--ds-space-050, 4px)",
+    paddingInlineEnd: "var(--ds-space-050, 4px)",
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    fontStyle: 'normal',
+    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    paddingTop: '0.05rem',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    paddingBottom: '0.05rem',
+    color: "var(--ds-text-warning, #A54800)",
+    backgroundColor: "var(--ds-background-warning, #FFF7D6)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-decorator"]:hover': {
+    color: "var(--ds-text-warning, #A54800)",
+    backgroundColor: "var(--ds-background-warning-hovered, #F8E6A0)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-tooltip"]': {
+    visibility: 'hidden',
+    boxSizing: 'border-box',
+    width: '15pc',
+    backgroundColor: "var(--ds-background-neutral-bold, #44546F)",
+    color: "var(--ds-text-inverse, #FFFFFF)",
+    overflowWrap: 'break-word',
+    cursor: 'default',
+    borderRadius: "var(--ds-border-radius, 4px)",
+    margin: "var(--ds-space-0, 0px)",
+    padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-075, 6px)"}`,
+    position: 'fixed',
+    // The character label will be ~80px and this is positioned from the end of that label
+    // We also use this instead of top: 24px to make sure the tooltip maintains its initial position
+    // instead of being positioned relative to the viewport.
+    // We need to use position: fixed so that the tooltip bypasses the overflow settings of the code block
+    // and is always visible.
+    // We also offset a little extra here to account for the transition behavior (to replicate ADS fade-in-from-top)
+    transform: 'translate(calc(-50% - 40px), calc(24px - 4px))',
+    opacity: 0,
+    whiteSpace: 'normal',
+    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    zIndex: 9999,
+    // Exit animation timings
+    // - Mark invisible after 0.475s
+    // - After 0.3s, fade out and move up over 0.175s
+    transition: 'visibility 0s linear 0.475s, opacity 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s, transform 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"]:hover [data-bidi-component="code-bidi-warning-tooltip"]': {
+    visibility: 'visible',
+    transform: 'translate(calc(-50% - 40px), calc(24px))',
+    opacity: 1,
+    // Enter animation timings
+    // - Mark visible after 0.3s of hovering
+    // - After 0.3s, fade in over 0.175s
+    // - After 0.3s, move down over 0.35s
+    transition: 'visibility 0s linear 0.3s, opacity 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s, transform 0.35s cubic-bezier(0.15,1,0.3,1) 0.3s'
+  }
+});

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

@@ -29,6 +29,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
 import { aiPanelStyles } from './ai-panels';
+import { codeBidiWarningStyles } from './code-bidi-warning';
 import { codeBlockStyles } from './code-block';
 import { dateStyles, dateNodeStyles } from './date';
 import { expandStyles } from './expand';
@@ -120,7 +121,7 @@ const mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding = css({
     padding: '1px 0.3em 1px 0.23em'
   }
 });
-const vanillaSelectionStyles = css`
+const mentionSelectionStyles = css`
 	.danger {
 		.editor-mention-primitive {
 			box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px ${akEditorDeleteBorder};
@@ -402,9 +403,7 @@ const legacyContentStyles = props => css`
 	${mentionsStyles}
 	${mentionNodeStyles}
 	${fg('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding}
-	${editorExperiment('platform_editor_vanilla_dom', true, {
-  exposure: false
-}) && vanillaSelectionStyles}
+	${mentionSelectionStyles}
   ${emojiStyles}
   ${tasksAndDecisionsStyles}
   ${gridStyles}
@@ -435,6 +434,7 @@ const legacyContentStyles = props => css`
   ${pragmaticResizerStylesForTooltip()}
   ${aiPanelStyles(props.colorMode)}
   ${firstBlockNodeStylesNew}
+	${fg('platform_editor_vanilla_codebidi_warning') && codeBidiWarningStyles}
 
   .panelView-content-wrap {
 		box-sizing: border-box;

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

@@ -21,6 +21,7 @@ import { backgroundColorStyles } from './styles/backgroundColorStyles';
 import { baseStyles } from './styles/baseStyles';
 import { blockMarksStyles } from './styles/blockMarksStyles';
 import { blocktypeStyles, blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes, blocktypeStyles_fg_platform_editor_typography_ugc, blocktypeStyles_without_fg_platform_editor_typography_ugc } from './styles/blockTypeStyles';
+import { codeBidiWarningStyles } from './styles/codeBidiWarningStyles';
 import { codeBlockStyles, codeBgColorStyles, firstCodeBlockWithNoMargin, firstCodeBlockWithNoMarginOld } from './styles/codeBlockStyles';
 import { codeMarkStyles } from './styles/codeMarkStyles';
 import { commentEditorStyles } from './styles/commentEditorStyles';
@@ -322,7 +323,9 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     !fg('platform-visual-refresh-icons') && linkLegacyIconStylesFix,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    fg('confluence_floating_toolbar_animation') && selectionToolbarAnimationStyles],
+    fg('confluence_floating_toolbar_animation') && selectionToolbarAnimationStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    fg('platform_editor_vanilla_codebidi_warning') && codeBidiWarningStyles],
     "data-editor-scroll-container": isScrollable ? 'true' : undefined,
     "data-testid": "editor-content-container",
     style: {

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

@@ -0,0 +1,68 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const codeBidiWarningStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"]': {
+    display: 'inline-block'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-decorator"]': {
+    paddingInlineStart: "var(--ds-space-050, 4px)",
+    paddingInlineEnd: "var(--ds-space-050, 4px)",
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    fontStyle: 'normal',
+    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    paddingTop: '0.05rem',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    paddingBottom: '0.05rem',
+    color: "var(--ds-text-warning, #A54800)",
+    backgroundColor: "var(--ds-background-warning, #FFF7D6)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-decorator"]:hover': {
+    color: "var(--ds-text-warning, #A54800)",
+    backgroundColor: "var(--ds-background-warning-hovered, #F8E6A0)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-tooltip"]': {
+    visibility: 'hidden',
+    boxSizing: 'border-box',
+    width: '15pc',
+    backgroundColor: "var(--ds-background-neutral-bold, #44546F)",
+    color: "var(--ds-text-inverse, #FFFFFF)",
+    overflowWrap: 'break-word',
+    cursor: 'default',
+    borderRadius: "var(--ds-border-radius, 4px)",
+    margin: "var(--ds-space-0, 0px)",
+    padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-075, 6px)"}`,
+    position: 'fixed',
+    // The character label will be ~80px and this is positioned from the end of that label
+    // We also use this instead of top: 24px to make sure the tooltip maintains its initial position
+    // instead of being positioned relative to the viewport.
+    // We need to use position: fixed so that the tooltip bypasses the overflow settings of the code block
+    // and is always visible.
+    // We also offset a little extra here to account for the transition behavior (to replicate ADS fade-in-from-top)
+    transform: 'translate(calc(-50% - 40px), calc(24px - 4px))',
+    opacity: 0,
+    whiteSpace: 'normal',
+    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    zIndex: 9999,
+    // Exit animation timings
+    // - Mark invisible after 0.475s
+    // - After 0.3s, fade out and move up over 0.175s
+    transition: 'visibility 0s linear 0.475s, opacity 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s, transform 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"]:hover [data-bidi-component="code-bidi-warning-tooltip"]': {
+    visibility: 'visible',
+    transform: 'translate(calc(-50% - 40px), calc(24px))',
+    opacity: 1,
+    // Enter animation timings
+    // - Mark visible after 0.3s of hovering
+    // - After 0.3s, fade in over 0.175s
+    // - After 0.3s, move down over 0.35s
+    transition: 'visibility 0s linear 0.3s, opacity 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s, transform 0.35s cubic-bezier(0.15,1,0.3,1) 0.3s'
+  }
+});

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

@@ -7,7 +7,7 @@ const emojiSelectionStyles = css({
   borderRadius: '2px'
 });
 
-// Emoji styles from Emoji vanilla node view
+// Emoji node view styles
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export const emojiStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values

package/dist/es2019/version-wrapper.js

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

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

@@ -482,7 +482,7 @@ export function ReactEditorView(props) {
       if (fg('platform_editor_reduce_scroll_jump_on_editor_start')) {
         if (!mitigateScrollJump) {
           var liveDocWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(editorView.state.doc);
-          if (!liveDocWithContent || !fg('platform_editor_no_cursor_on_live_doc_init')) {
+          if (!liveDocWithContent) {
             focusTimeoutId.current = handleEditorFocus(editorView);
           }
           if (expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true) && fg('cc_editor_focus_before_editor_on_load')) {
@@ -493,7 +493,7 @@ export function ReactEditorView(props) {
         }
       } else {
         var _liveDocWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(editorView.state.doc);
-        if (!_liveDocWithContent || !fg('platform_editor_no_cursor_on_live_doc_init')) {
+        if (!_liveDocWithContent) {
           focusTimeoutId.current = handleEditorFocus(editorView);
         }
       }
@@ -611,7 +611,7 @@ export function ReactEditorView(props) {
         if (shouldFocus && view.props.editable && view.props.editable(view.state)) {
           if (fg('platform_editor_reduce_scroll_jump_on_editor_start')) {
             if (!mitigateScrollJump) {
-              var isLivePageWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(view.state.doc) && fg('platform_editor_no_cursor_on_live_doc_init');
+              var isLivePageWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(view.state.doc);
               if (!isLivePageWithContent && shouldFocus && view.props.editable && view.props.editable(view.state)) {
                 focusTimeoutId.current = handleEditorFocus(view);
               }
@@ -622,7 +622,7 @@ export function ReactEditorView(props) {
               }
             }
           } else {
-            var _isLivePageWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(view.state.doc) && fg('platform_editor_no_cursor_on_live_doc_init');
+            var _isLivePageWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(view.state.doc);
             if (!_isLivePageWithContent && shouldFocus && view.props.editable && view.props.editable(view.state)) {
               focusTimeoutId.current = handleEditorFocus(view);
             }
@@ -698,7 +698,7 @@ export function ReactEditorView(props) {
           return !disabled;
         }
       });
-      var isLivePageWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(viewRef.current.state.doc) && fg('platform_editor_no_cursor_on_live_doc_init');
+      var isLivePageWithContent = (__livePage || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)) && !isEmptyDocument(viewRef.current.state.doc);
       if (!disabled && shouldFocus && !isLivePageWithContent) {
         focusTimeoutId.current = handleEditorFocus(viewRef.current);
       }

package/dist/esm/presets/default.js

@@ -61,7 +61,7 @@ export function createDefaultPreset(options) {
     }
   }], function () {
     return fg('platform_editor_use_preferences_plugin');
-  }).maybeAdd(interactionPlugin, Boolean(options === null || options === void 0 ? void 0 : options.__livePage) ? fg('platform_editor_no_cursor_on_live_doc_init') : expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)).add(compositionPlugin).add([contextIdentifierPlugin, {
+  }).maybeAdd(interactionPlugin, Boolean(options === null || options === void 0 ? void 0 : options.__livePage) || expValEquals('platform_editor_no_cursor_on_edit_page_init', 'isEnabled', true)).add(compositionPlugin).add([contextIdentifierPlugin, {
     contextIdentifierProvider: options.contextIdentifierProvider
   }]).add([basePlugin, options.base]).add(decorationsPlugin).add([typeAheadPlugin, options.typeAhead]).maybeAdd(historyPlugin, Boolean(options.allowUndoRedoButtons)).add([primaryToolbarPlugin, {
     contextualFormattingEnabled: isFullPage

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

@@ -409,9 +409,9 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
     editorContentGutterStyle()]
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: fg('platform_editor_no_cursor_on_live_doc_init') ? classnames('ak-editor-content-area', 'appearance-full-page', {
+    className: classnames('ak-editor-content-area', 'appearance-full-page', {
       'fabric-editor--full-width-mode': fullWidthMode
-    }) : ['ak-editor-content-area', 'appearance-full-page', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
+    }),
     ref: contentAreaRef
   }, !!props.customContentComponents && 'before' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.before) : contentComponentClickWrapper(props.customContentComponents), jsx(PluginSlot, {
     editorView: props.editorView,

package/dist/esm/ui/ContentStyles/code-bidi-warning.js

@@ -0,0 +1,68 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var codeBidiWarningStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"]': {
+    display: 'inline-block'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-decorator"]': {
+    paddingInlineStart: "var(--ds-space-050, 4px)",
+    paddingInlineEnd: "var(--ds-space-050, 4px)",
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    fontStyle: 'normal',
+    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    paddingTop: '0.05rem',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    paddingBottom: '0.05rem',
+    color: "var(--ds-text-warning, #A54800)",
+    backgroundColor: "var(--ds-background-warning, #FFF7D6)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-decorator"]:hover': {
+    color: "var(--ds-text-warning, #A54800)",
+    backgroundColor: "var(--ds-background-warning-hovered, #F8E6A0)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-tooltip"]': {
+    visibility: 'hidden',
+    boxSizing: 'border-box',
+    width: '15pc',
+    backgroundColor: "var(--ds-background-neutral-bold, #44546F)",
+    color: "var(--ds-text-inverse, #FFFFFF)",
+    overflowWrap: 'break-word',
+    cursor: 'default',
+    borderRadius: "var(--ds-border-radius, 4px)",
+    margin: "var(--ds-space-0, 0px)",
+    padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)"),
+    position: 'fixed',
+    // The character label will be ~80px and this is positioned from the end of that label
+    // We also use this instead of top: 24px to make sure the tooltip maintains its initial position
+    // instead of being positioned relative to the viewport.
+    // We need to use position: fixed so that the tooltip bypasses the overflow settings of the code block
+    // and is always visible.
+    // We also offset a little extra here to account for the transition behavior (to replicate ADS fade-in-from-top)
+    transform: 'translate(calc(-50% - 40px), calc(24px - 4px))',
+    opacity: 0,
+    whiteSpace: 'normal',
+    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    zIndex: 9999,
+    // Exit animation timings
+    // - Mark invisible after 0.475s
+    // - After 0.3s, fade out and move up over 0.175s
+    transition: 'visibility 0s linear 0.475s, opacity 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s, transform 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"]:hover [data-bidi-component="code-bidi-warning-tooltip"]': {
+    visibility: 'visible',
+    transform: 'translate(calc(-50% - 40px), calc(24px))',
+    opacity: 1,
+    // Enter animation timings
+    // - Mark visible after 0.3s of hovering
+    // - After 0.3s, fade in over 0.175s
+    // - After 0.3s, move down over 0.35s
+    transition: 'visibility 0s linear 0.3s, opacity 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s, transform 0.35s cubic-bezier(0.15,1,0.3,1) 0.3s'
+  }
+});

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

@@ -31,6 +31,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
 import { aiPanelStyles } from './ai-panels';
+import { codeBidiWarningStyles } from './code-bidi-warning';
 import { codeBlockStyles } from './code-block';
 import { dateStyles, dateNodeStyles } from './date';
 import { expandStyles } from './expand';
@@ -104,7 +105,7 @@ var mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding = css({
     padding: '1px 0.3em 1px 0.23em'
   }
 });
-var vanillaSelectionStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t.danger {\n\t\t.editor-mention-primitive {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t.", " > .editor-mention-primitive,\n\t.", " > .editor-mention-primitive.mention-self,\n\t.", " > .editor-mention-primitive.mention-restricted {\n\t\t", "\n\t\t/* need to specify dark text colour because personal mentions\n\t       (in dark blue) have white text by default */\n\t\tcolor: ", "\n\t}\n"])), akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)");
+var mentionSelectionStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t.danger {\n\t\t.editor-mention-primitive {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t.", " > .editor-mention-primitive,\n\t.", " > .editor-mention-primitive.mention-self,\n\t.", " > .editor-mention-primitive.mention-restricted {\n\t\t", "\n\t\t/* need to specify dark text colour because personal mentions\n\t       (in dark blue) have white text by default */\n\t\tcolor: ", "\n\t}\n"])), akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)");
 var mentionsStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t.", " {\n\t\t&.", " [data-mention-id] > span {\n\t\t\t", "\n\n\t\t\t/* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t> span\n\t\t\t> span\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t\t.", " > span > span > span {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)", MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, #091E420F)", "var(--ds-text-subtle, #44546F)");
 var listsStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\tli {\n\t\t\tposition: relative;\n\n\t\t\t> p:not(:first-child) {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\n\t\t\t/* In SSR the above rule will apply to all p tags because first-child would be a style tag.\n\t\t\tThe following rule resets the first p tag back to its original margin\n\t\t\tdefined in packages/editor/editor-common/src/styles/shared/paragraph.ts */\n\t\t\t> style:first-child + p {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n    /* This prevents https://product-fabric.atlassian.net/browse/ED-20924 */\n    &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t}\n"])), "var(--ds-space-050, 4px)", blockNodesVerticalMargin, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, browser.safari ? codeBlockInListSafariFix : '');
 var emojiStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t.", " {\n\t\tdisplay: inline-block;\n\t}\n\n\t.", ", .", " {\n\t\tbackground: no-repeat transparent;\n\t\tdisplay: inline-block;\n\t\theight: ", "px;\n\t\tmax-height: ", "px;\n\t\tcursor: pointer;\n\t\tvertical-align: middle;\n\t\tuser-select: all;\n\t}\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tborder-radius: 2px;\n\t\t\t", "\n\t\t}\n\t}\n"])), EmojiSharedCssClassName.EMOJI_CONTAINER, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, defaultEmojiHeight, defaultEmojiHeight, akEditorSelectedNodeClassName, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow]));
@@ -160,11 +161,9 @@ var akEditorBreakpointForSmallDevice = "1266px";
 // Under editor experiment platform_editor_core_static_emotion
 // If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
 var legacyContentStyles = function legacyContentStyles(props) {
-  return css(_templateObject8 || (_templateObject8 = _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--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-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\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\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: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\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\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  /* Switch between the two icons based on the visual refresh feature gate */\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\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\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn 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.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
+  return css(_templateObject8 || (_templateObject8 = _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--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-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\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\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: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\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\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  /* Switch between the two icons based on the visual refresh feature gate */\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\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\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn 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.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
     theme: props.theme
-  }), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject9 || (_templateObject9 = _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(_templateObject0 || (_templateObject0 = _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)", firstFloatingToolbarButtonStyles, placeholderTextStyles, fg('platform_editor_system_fake_text_highlight_colour') && placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, mentionNodeStyles, fg('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding, editorExperiment('platform_editor_vanilla_dom', true, {
-    exposure: false
-  }) && vanillaSelectionStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? fg('platform_editor_find_and_replace_magenta_match') ? findReplaceStylesNewMagenta : findReplaceStylesNewYellow : findReplaceStyles, textHighlightStyle, taskDecisionStyles, taskItemStyles, fg('platform-visual-refresh-icons') && decisionIconWithVisualRefresh, !fg('platform-visual-refresh-icons') && decisionIconWithoutVisualRefresh, statusStyles, statusNodeStyles(), annotationSharedStyles(), smartCardStyles(), fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, dateStyles, dateNodeStyles, embedCardStyles(), unsupportedStyles, resizerStyles, pragmaticResizerStyles(), pragmaticStylesLayoutFirstNodeResizeHandleFix(), pragmaticResizerStylesForTooltip(), aiPanelStyles(props.colorMode), firstBlockNodeStylesNew, MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
+  }), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject9 || (_templateObject9 = _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(_templateObject0 || (_templateObject0 = _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)", firstFloatingToolbarButtonStyles, placeholderTextStyles, fg('platform_editor_system_fake_text_highlight_colour') && placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, mentionNodeStyles, fg('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding, mentionSelectionStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? fg('platform_editor_find_and_replace_magenta_match') ? findReplaceStylesNewMagenta : findReplaceStylesNewYellow : findReplaceStyles, textHighlightStyle, taskDecisionStyles, taskItemStyles, fg('platform-visual-refresh-icons') && decisionIconWithVisualRefresh, !fg('platform-visual-refresh-icons') && decisionIconWithoutVisualRefresh, statusStyles, statusNodeStyles(), annotationSharedStyles(), smartCardStyles(), fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, dateStyles, dateNodeStyles, embedCardStyles(), unsupportedStyles, resizerStyles, pragmaticResizerStyles(), pragmaticStylesLayoutFirstNodeResizeHandleFix(), pragmaticResizerStylesForTooltip(), aiPanelStyles(props.colorMode), firstBlockNodeStylesNew, fg('platform_editor_vanilla_codebidi_warning') && codeBidiWarningStyles, MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
 };
 export var createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/React.forwardRef(function (props, ref) {

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

@@ -21,6 +21,7 @@ import { backgroundColorStyles } from './styles/backgroundColorStyles';
 import { baseStyles } from './styles/baseStyles';
 import { blockMarksStyles } from './styles/blockMarksStyles';
 import { blocktypeStyles, blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes, blocktypeStyles_fg_platform_editor_typography_ugc, blocktypeStyles_without_fg_platform_editor_typography_ugc } from './styles/blockTypeStyles';
+import { codeBidiWarningStyles } from './styles/codeBidiWarningStyles';
 import { codeBlockStyles, codeBgColorStyles, firstCodeBlockWithNoMargin, firstCodeBlockWithNoMarginOld } from './styles/codeBlockStyles';
 import { codeMarkStyles } from './styles/codeMarkStyles';
 import { commentEditorStyles } from './styles/commentEditorStyles';
@@ -319,7 +320,9 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     !fg('platform-visual-refresh-icons') && linkLegacyIconStylesFix,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    fg('confluence_floating_toolbar_animation') && selectionToolbarAnimationStyles],
+    fg('confluence_floating_toolbar_animation') && selectionToolbarAnimationStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    fg('platform_editor_vanilla_codebidi_warning') && codeBidiWarningStyles],
     "data-editor-scroll-container": isScrollable ? 'true' : undefined,
     "data-testid": "editor-content-container",
     style: {

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

@@ -0,0 +1,68 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var codeBidiWarningStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"]': {
+    display: 'inline-block'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-decorator"]': {
+    paddingInlineStart: "var(--ds-space-050, 4px)",
+    paddingInlineEnd: "var(--ds-space-050, 4px)",
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    fontStyle: 'normal',
+    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    paddingTop: '0.05rem',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+    paddingBottom: '0.05rem',
+    color: "var(--ds-text-warning, #A54800)",
+    backgroundColor: "var(--ds-background-warning, #FFF7D6)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-decorator"]:hover': {
+    color: "var(--ds-text-warning, #A54800)",
+    backgroundColor: "var(--ds-background-warning-hovered, #F8E6A0)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"] [data-bidi-component="code-bidi-warning-tooltip"]': {
+    visibility: 'hidden',
+    boxSizing: 'border-box',
+    width: '15pc',
+    backgroundColor: "var(--ds-background-neutral-bold, #44546F)",
+    color: "var(--ds-text-inverse, #FFFFFF)",
+    overflowWrap: 'break-word',
+    cursor: 'default',
+    borderRadius: "var(--ds-border-radius, 4px)",
+    margin: "var(--ds-space-0, 0px)",
+    padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)"),
+    position: 'fixed',
+    // The character label will be ~80px and this is positioned from the end of that label
+    // We also use this instead of top: 24px to make sure the tooltip maintains its initial position
+    // instead of being positioned relative to the viewport.
+    // We need to use position: fixed so that the tooltip bypasses the overflow settings of the code block
+    // and is always visible.
+    // We also offset a little extra here to account for the transition behavior (to replicate ADS fade-in-from-top)
+    transform: 'translate(calc(-50% - 40px), calc(24px - 4px))',
+    opacity: 0,
+    whiteSpace: 'normal',
+    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    zIndex: 9999,
+    // Exit animation timings
+    // - Mark invisible after 0.475s
+    // - After 0.3s, fade out and move up over 0.175s
+    transition: 'visibility 0s linear 0.475s, opacity 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s, transform 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-prosemirror-node-name="code-bidi-warning"]:hover [data-bidi-component="code-bidi-warning-tooltip"]': {
+    visibility: 'visible',
+    transform: 'translate(calc(-50% - 40px), calc(24px))',
+    opacity: 1,
+    // Enter animation timings
+    // - Mark visible after 0.3s of hovering
+    // - After 0.3s, fade in over 0.175s
+    // - After 0.3s, move down over 0.35s
+    transition: 'visibility 0s linear 0.3s, opacity 0.175s cubic-bezier(0.15,1,0.3,1) 0.3s, transform 0.35s cubic-bezier(0.15,1,0.3,1) 0.3s'
+  }
+});

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

@@ -8,7 +8,7 @@ var emojiSelectionStyles = css({
   borderRadius: '2px'
 });
 
-// Emoji styles from Emoji vanilla node view
+// Emoji node view styles
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
 export var emojiStyles = css(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_CONTAINER), {
   display: 'inline-block'

package/dist/esm/version-wrapper.js

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

package/dist/types/ui/ContentStyles/code-bidi-warning.d.ts

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

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

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

package/dist/types-ts4.5/ui/ContentStyles/code-bidi-warning.d.ts

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "208.7.3",
+	"version": "208.8.0",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -45,7 +45,7 @@
 		"@atlaskit/analytics-next-stable-react-context": "1.0.1",
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/css": "^0.12.0",
-		"@atlaskit/editor-common": "^107.4.0",
+		"@atlaskit/editor-common": "^107.5.0",
 		"@atlaskit/editor-json-transformer": "^8.24.0",
 		"@atlaskit/editor-performance-metrics": "^2.1.0",
 		"@atlaskit/editor-plugin-quick-insert": "^2.6.0",
@@ -62,7 +62,7 @@
 		"@atlaskit/platform-feature-flags-react": "^0.2.0",
 		"@atlaskit/react-ufo": "^3.14.0",
 		"@atlaskit/task-decision": "^19.2.0",
-		"@atlaskit/tmp-editor-statsig": "^8.6.0",
+		"@atlaskit/tmp-editor-statsig": "^8.7.0",
 		"@atlaskit/tokens": "^5.4.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/width-detector": "^5.0.0",
@@ -92,7 +92,7 @@
 		"@atlaskit/analytics-listeners": "^9.0.0",
 		"@atlaskit/collab-provider": "^10.21.0",
 		"@atlaskit/editor-plugin-annotation": "^2.9.0",
-		"@atlaskit/editor-plugin-card": "^6.7.0",
+		"@atlaskit/editor-plugin-card": "^6.8.0",
 		"@atlaskit/editor-plugin-list": "^4.2.0",
 		"@atlaskit/editor-plugin-paste": "^3.3.0",
 		"@atlaskit/link-provider": "^3.4.0",
@@ -438,9 +438,6 @@
 			"type": "boolean",
 			"referenceOnly": true
 		},
-		"platform_editor_no_cursor_on_live_doc_init": {
-			"type": "boolean"
-		},
 		"platform_editor_controls_no_toolbar_space": {
 			"type": "boolean",
 			"referenceOnly": true
@@ -577,6 +574,9 @@
 		},
 		"platform_editor_find_and_replace_magenta_match": {
 			"type": "boolean"
+		},
+		"platform_editor_vanilla_codebidi_warning": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {