@atlaskit/editor-core 212.0.0 → 212.1.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-core
 
+## 212.1.0
+
+### Minor Changes
+
+- [`4edb2aee0da9c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4edb2aee0da9c) -
+  Add conditionalHooksFactory and migrate usage of useSharedPluginStateSelector to useEditorToolbar
+  and useSharedPluginStateWithSelector
+
+### Patch Changes
+
+- [`c0656bad0f992`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c0656bad0f992) -
+  EDITOR-1389 fix table container width behind platform_editor_table_container_width_fix
+- [`f0662cd7a143e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f0662cd7a143e) -
+  Internal changes to how borders are applied.
+- Updated dependencies
+
+## 212.0.1
+
+### Patch Changes
+
+- [`88eddbfa8aadd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/88eddbfa8aadd) -
+  clean up FF of static emotion for editor
+- Updated dependencies
+
 ## 212.0.0
 
 ### Patch Changes

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

@@ -5,7 +5,8 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ContentArea = exports.ChromelessEditorContainer = void 0;
+exports.ChromelessEditorContainer = ChromelessEditorContainer;
+exports.default = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -15,12 +16,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _scrollbar = require("@atlaskit/editor-shared-styles/scrollbar");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _ContentStyles = require("../ContentStyles");
 var _EditorContentContainer = _interopRequireDefault(require("../EditorContentContainer/EditorContentContainer"));
 var _PluginSlot = _interopRequireDefault(require("../PluginSlot"));
 var _WithFlash = _interopRequireDefault(require("../WithFlash"));
@@ -50,30 +46,6 @@ var scrollbarStylesNew = (0, _react2.css)({
     backgroundColor: "var(--ds-background-neutral-bold-hovered, #2C3E5D)"
   }
 });
-var chromelessEditorStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '20px',
-  height: 'auto',
-  overflowX: 'hidden',
-  overflowY: 'auto'
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-_scrollbar.scrollbarStyles, {
-  maxWidth: 'inherit',
-  boxSizing: 'border-box',
-  wordWrap: 'break-word',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  'div > .ProseMirror': {
-    outline: 'none',
-    whiteSpace: 'pre-wrap',
-    padding: 0,
-    margin: 0,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '& > :last-child': {
-      paddingBottom: "var(--ds-space-100, 0.5em)"
-    }
-  }
-});
 var chromelessEditorStylesNew = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '20px',
@@ -104,14 +76,6 @@ var extraSpaceLastLineFix = (0, _react2.css)({
     }
   }
 });
-var ContentArea = exports.ContentArea = (0, _ContentStyles.createEditorContentStyle)();
-ContentArea.displayName = 'ContentArea';
-var EditorContainer = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
-  return (0, _experiments.editorExperiment)('platform_editor_core_static_emotion', true, {
-    exposure: true
-  });
-}, _EditorContentContainer.default, ContentArea);
-
 /**
  * Render the editor in a chromeless appearance.
  * Example use is the inline comment editor, which doesn't have editor toolbar
@@ -161,7 +125,7 @@ var Editor = exports.default = /*#__PURE__*/function (_React$Component) {
         containerRef: function containerRef(ref) {
           return _this.containerElement = ref;
         }
-      }, (0, _react2.jsx)(EditorContainer
+      }, (0, _react2.jsx)(_EditorContentContainer.default
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       , {
         className: "ak-editor-content-area",
@@ -213,7 +177,7 @@ function RenderWithPluginState(_ref2) {
     maxContentSize: maxContentSize
   }));
 }
-function ChromelessEditorContainerNext(_ref3) {
+function ChromelessEditorContainer(_ref3) {
   var maxHeight = _ref3.maxHeight,
     minHeight = _ref3.minHeight,
     children = _ref3.children,
@@ -228,29 +192,4 @@ function ChromelessEditorContainerNext(_ref3) {
     id: "chromeless-editor",
     ref: containerRef
   }, children);
-}
-function ChromelessEditorContainerOld(_ref4) {
-  var maxHeight = _ref4.maxHeight,
-    minHeight = _ref4.minHeight,
-    children = _ref4.children,
-    containerRef = _ref4.containerRef;
-  return (0, _react2.jsx)("div", {
-    css: [chromelessEditorStyles, maxHeight &&
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    (0, _react2.css)({
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      maxHeight: "".concat(maxHeight, "px")
-    }),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    (0, _react2.css)({
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      minHeight: "".concat(minHeight, "px")
-    }), (0, _platformFeatureFlags.fg)('platform_fix_extra_space_last_line_comment_editor') && extraSpaceLastLineFix],
-    "data-testid": "chromeless-editor",
-    id: "chromeless-editor",
-    ref: containerRef
-  }, children);
-}
-var ChromelessEditorContainer = exports.ChromelessEditorContainer = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
-  return (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion', 'isEnabled', true);
-}, ChromelessEditorContainerNext, ChromelessEditorContainerOld);
+}

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

@@ -17,17 +17,13 @@ var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = _interopRequireDefault(require("@atlaskit/editor-common/messages"));
-var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
-var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _ClickAreaBlock = _interopRequireDefault(require("../../Addon/ClickAreaBlock"));
 var _contentComponentWrapper = require("../../Addon/ClickAreaBlock/contentComponentWrapper");
-var _ContentStyles = require("../../ContentStyles");
 var _EditorContentContainer = _interopRequireDefault(require("../../EditorContentContainer/EditorContentContainer"));
 var _PluginSlot = _interopRequireDefault(require("../../PluginSlot"));
 var _getPrimaryToolbarComponents = require("../../Toolbar/getPrimaryToolbarComponents");
@@ -44,7 +40,6 @@ var _templateObject;
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var CommentEditorMargin = 14;
 var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 490;
 var commentEditorStyles = (0, _react2.css)({
   display: 'flex',
@@ -63,27 +58,6 @@ var commentEditorStyles = (0, _react2.css)({
   maxWidth: 'inherit',
   wordWrap: 'break-word'
 });
-var ContentArea = (0, _ContentStyles.createEditorContentStyle)((0, _react2.css)({
-  flexGrow: 1,
-  overflowX: 'clip',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '24px',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.ProseMirror': {
-    margin: "var(--ds-space-150, 12px)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.gridParent': {
-    marginLeft: "var(--ds-space-025, 2px)",
-    marginRight: "var(--ds-space-025, 2px)",
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    width: "calc(100% + ".concat(CommentEditorMargin - _styles.GRID_GUTTER, "px)")
-  },
-  padding: "var(--ds-space-250, 20px)"
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-_commonStyles.tableCommentEditorStyles));
-ContentArea.displayName = 'ContentArea';
 var secondaryToolbarStyles = (0, _react2.css)({
   boxSizing: 'border-box',
   justifyContent: 'flex-end',
@@ -113,11 +87,6 @@ var mainToolbarCustomComponentsSlotStyleTwoLineToolbarNew = (0, _react2.css)((0,
   paddingRight: 0
 }));
 var appearance = 'comment';
-var EditorContainer = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
-  return (0, _experiments.editorExperiment)('platform_editor_core_static_emotion', true, {
-    exposure: true
-  });
-}, _EditorContentContainer.default, ContentArea);
 var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEditorWithIntl(props) {
   var editorAPI = props.editorAPI;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(editorAPI, ['maxContentSize', 'primaryToolbar', 'editorViewMode'], function (states) {
@@ -268,7 +237,7 @@ var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEdit
     editorDisabled: disabled
   }, (0, _react2.jsx)(_ui.WidthConsumer, null, function (_ref) {
     var width = _ref.width;
-    return (0, _react2.jsx)(EditorContainer, {
+    return (0, _react2.jsx)(_EditorContentContainer.default, {
       ref: containerElement,
       css: [maxHeight ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ScrollContainer = exports.FullPageContentArea = exports.EDITOR_CONTAINER = exports.CONTENT_AREA_TEST_ID = void 0;
+exports.FullPageContentArea = exports.EDITOR_CONTAINER = exports.CONTENT_AREA_TEST_ID = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -16,15 +16,12 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _messages = require("@atlaskit/editor-common/messages");
 var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _scrollbar = require("@atlaskit/editor-shared-styles/scrollbar");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _ClickAreaBlock = _interopRequireDefault(require("../../Addon/ClickAreaBlock"));
 var _contentComponentWrapper = require("../../Addon/ClickAreaBlock/contentComponentWrapper");
-var _ContentStyles = require("../../ContentStyles");
 var _ContextPanel = require("../../ContextPanel");
 var _EditorContentContainer = _interopRequireDefault(require("../../EditorContentContainer/EditorContentContainer"));
 var _PluginSlot = _interopRequireDefault(require("../../PluginSlot"));
@@ -331,26 +328,6 @@ var contentAreaHeightNoToolbar = (0, _react2.css)({
 });
 var CONTENT_AREA_TEST_ID = exports.CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 var EDITOR_CONTAINER = exports.EDITOR_CONTAINER = 'ak-editor-container';
-var scrollStyles = (0, _react2.css)({
-  flexGrow: 1,
-  height: '100%',
-  overflowY: 'scroll',
-  position: 'relative',
-  display: 'flex',
-  flexDirection: 'column',
-  scrollBehavior: 'smooth'
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-_scrollbar.scrollbarStyles);
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var ScrollContainer = exports.ScrollContainer = (0, _ContentStyles.createEditorContentStyle)(scrollStyles);
-ScrollContainer.displayName = 'ScrollContainer';
-var EditorContainer = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
-  return (0, _experiments.editorExperiment)('platform_editor_core_static_emotion', true, {
-    exposure: true
-  });
-}, _EditorContentContainer.default, ScrollContainer);
 var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _contentAreaRef$curre;
   var theme = (0, _react2.useTheme)();
@@ -395,7 +372,7 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     _StyledComponents.contentAreaWrapper,
     "data-testid": EDITOR_CONTAINER,
     "data-editor-container": 'true'
-  }, (0, _react2.jsx)(EditorContainer
+  }, (0, _react2.jsx)(_EditorContentContainer.default
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: "fabric-editor-popup-scroll-parent",

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

@@ -164,10 +164,12 @@ var firstFloatingToolbarButtonStyles = (0, _react2.css)({
 // The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
 var akEditorBreakpointForSmallDevice = "1266px";
 
-// We are going to deprecate this in near future
-// Currently, we are migrating content styles in packages/editor/editor-core/src/ui/EditorContentContainer.tsx
-// 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
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required
+/**
+ * @deprecated
+ * DO NOT USE THIS WILL BE REMOVED SOON.
+ * use this instead: packages/editor/editor-core/src/ui/EditorContentContainer.tsx
+ */
 var legacyContentStyles = function legacyContentStyles(props) {
   return (0, _react2.css)(_templateObject0 || (_templateObject0 = (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--resizer-handle-spacing: 12px;\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\t--ak-editor--breakout-min-width: 100%;\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\t--ak-editor--breakout-min-width: 0px;\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", "\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.ProseMirror-hideselection {\n\t\tcaret-color: transparent;\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\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\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, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t\t\t\t@container editor-area (max-width: ", "px) {\n\t\t\t\t\t--ak-editor--large-gutter-padding: ", "px;\n\t\t\t\t}\n\t\t\t"])), _editorSharedStyles.akEditorFullPageNarrowBreakout, _editorSharedStyles.akEditorGutterPaddingReduced) : null, (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme

package/dist/cjs/ui/ContentStyles/tasks-and-decisions.js

@@ -17,7 +17,7 @@ var taskDecisionStyles = exports.taskDecisionStyles = (0, _react.css)({
   '.ak-editor-selected-node > [data-decision-wrapper], ol[data-node-type="decisionList"].ak-editor-selected-node':
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
   [{
-    borderRadius: '4px'
+    borderRadius: "var(--ds-radius-small, 4px)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
   (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket])],

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

@@ -358,7 +358,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _mediaStyles.mediaAlignmentStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _tableStyles.tableLayoutFixes,
+    _tableStyles.tableLayoutFixes, (0, _expValEquals.expValEquals)('platform_editor_table_container_width_fix', 'isEnabled', true)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    && _tableStyles.tableContainerStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _link.hyperLinkFloatingToolbarStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

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

@@ -19,7 +19,7 @@ var blocktypeStyles = exports.blocktypeStyles = (0, _react.css)({
       width: '100%',
       display: 'inline-block',
       paddingLeft: "var(--ds-space-200, 16px)",
-      borderLeftWidth: '2px',
+      borderLeftWidth: "var(--ds-border-width-selected, 2px)",
       borderLeftStyle: 'solid',
       borderLeftColor: "var(--ds-border, #091E4224)",
       margin: '0.75rem 0 0 0',

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

@@ -16,7 +16,7 @@ var expandStyles = exports.expandStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ak-editor-expand': {
     // sharedExpandStyles.containerStyles({ expanded: false, focused: false })(),
-    borderWidth: '1px',
+    borderWidth: "var(--ds-border-width, 1px)",
     borderStyle: 'solid',
     borderColor: 'transparent',
     borderRadius: "var(--ds-radius-small, 4px)",

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableLayoutFixes = exports.tableCommentEditorStyles = exports.tableCommentEditorMarginOverride = void 0;
+exports.tableLayoutFixes = exports.tableContainerStyles = exports.tableCommentEditorStyles = exports.tableCommentEditorMarginOverride = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _scrollbarStyles = require("./scrollbarStyles");
@@ -32,4 +32,27 @@ var tableCommentEditorMarginOverride = exports.tableCommentEditorMarginOverride
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
-var tableCommentEditorStyles = exports.tableCommentEditorStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror .pm-table-wrapper > table", [tableCommentEditorMarginOverride, _scrollbarStyles.scrollbarStyles]));
+var tableCommentEditorStyles = exports.tableCommentEditorStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror .pm-table-wrapper > table", [tableCommentEditorMarginOverride, _scrollbarStyles.scrollbarStyles]));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var tableContainerStyles = exports.tableContainerStyles = (0, _react.css)({
+  /* Fix for HOT-119925: Ensure table containers have proper width constraints and overflow handling */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror .pm-table-wrapper': {
+    maxWidth: '100%',
+    overflowX: 'auto',
+    overflowY: 'visible',
+    // Ensure the wrapper doesn't grow beyond its container
+    width: '100%',
+    boxSizing: 'border-box'
+  },
+  /* Fix for HOT-119925: Ensure table elements are responsive and don't overflow */
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror .pm-table-wrapper table': {
+    maxWidth: '100%',
+    width: '100%',
+    tableLayout: 'fixed',
+    // Ensure tables can be scrolled horizontally if needed
+    minWidth: 'auto'
+  }
+});

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

@@ -77,7 +77,7 @@ var tasksAndDecisionsStyles = exports.tasksAndDecisionsStyles = (0, _react.css)(
 var decisionStyles = exports.decisionStyles = (0, _react.css)((_css = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css, ".".concat(akEditorSelectedNodeClassName, " > [data-decision-wrapper], ol[data-node-type='decisionList'].").concat(akEditorSelectedNodeClassName),
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
 [{
-  borderRadius: '4px'
+  borderRadius: "var(--ds-radius-small, 4px)"
 },
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
 _selectionStyles.boxShadowSelectionStyles,

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

@@ -6,11 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ToolbarNext = exports.Toolbar = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _types = require("@atlaskit/editor-common/types");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _editorToolbarModel = require("@atlaskit/editor-toolbar-model");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _ToolbarInner = require("./ToolbarInner");
 /**
  * *Warning:* With `platform_editor_toolbar_aifc` enabled this component is no longer used and is replaced with `<ToolbarNext />`.
@@ -35,6 +38,26 @@ var Toolbar = exports.Toolbar = function Toolbar(props) {
     containerElement: props.containerElement
   });
 };
+var usePluginState = (0, _platformFeatureFlagsReact.conditionalHooksFactory)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_3', 'isEnabled', true);
+}, function (api) {
+  return (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity', 'editorViewMode', 'userPreferences'], function (state) {
+    var _state$connectivitySt, _state$editorViewMode, _state$userPreference;
+    return {
+      connectivityStateMode: (_state$connectivitySt = state.connectivityState) === null || _state$connectivitySt === void 0 ? void 0 : _state$connectivitySt.mode,
+      editorViewMode: (_state$editorViewMode = state.editorViewModeState) === null || _state$editorViewMode === void 0 ? void 0 : _state$editorViewMode.mode,
+      editorToolbarDockingPreference: (_state$userPreference = state.userPreferencesState) === null || _state$userPreference === void 0 || (_state$userPreference = _state$userPreference.preferences) === null || _state$userPreference === void 0 ? void 0 : _state$userPreference.toolbarDockingPosition
+    };
+  });
+}, function (api) {
+  var connectivityStateMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'connectivity.mode');
+  return {
+    connectivityStateMode: connectivityStateMode,
+    editorViewMode: undefined,
+    editorToolbarDockingPreference: undefined
+  };
+});
+
 /**
  * Renders a primary toolbar, driven by components registed by `editor-plugin-toolbar`. `ToolbarModelRenderer` will just
  * render the toolbar structure, the design is driven per component registered including the toolbar itself.
@@ -50,11 +73,16 @@ var ToolbarNext = exports.ToolbarNext = function ToolbarNext(_ref) {
     editorAppearance = _ref.editorAppearance,
     popupsBoundariesElement = _ref.popupsBoundariesElement,
     popupsScrollableElement = _ref.popupsScrollableElement;
-  var connectivityStateMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(editorAPI, 'connectivity.mode');
+  var _usePluginState = usePluginState(editorAPI),
+    connectivityStateMode = _usePluginState.connectivityStateMode,
+    editorViewMode = _usePluginState.editorViewMode,
+    editorToolbarDockingPreference = _usePluginState.editorToolbarDockingPreference;
   var isOffline = connectivityStateMode === 'offline';
   return /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
     editorView: editorView !== null && editorView !== void 0 ? editorView : null,
-    editorAppearance: editorAppearance
+    editorAppearance: editorAppearance,
+    editorViewMode: editorViewMode,
+    editorToolbarDockingPreference: editorToolbarDockingPreference
   }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarUIProvider, {
     api: editorAPI,
     isDisabled: isOffline,

package/dist/cjs/ui/Toolbar/ToolbarWithSizeDetector.js

@@ -29,7 +29,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-// Remove when platform_editor_core_static_emotion is cleaned up
+// Remove when platform_editor_core_static_emotion_non_central is cleaned up
 var toolbar = (0, _react2.css)((0, _defineProperty2.default)({
   width: '100%',
   position: 'relative'
@@ -40,7 +40,7 @@ var toolbar = (0, _react2.css)((0, _defineProperty2.default)({
   margin: "0 ".concat("var(--ds-space-200, 16px)")
 }));
 
-// Rename to toolbar when platform_editor_core_static_emotion is cleaned up
+// Rename to toolbar when platform_editor_core_static_emotion_non_central is cleaned up
 var staticToolbar = (0, _react2.css)({
   width: '100%',
   position: 'relative'

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

package/dist/es2019/index.js

@@ -36,6 +36,13 @@ export { getNodesCount } from './utils/getNodesCount';
 export { default as measurements } from './utils/performance/measure-enum';
 export { createFeatureFlagsFromProps } from './utils/feature-flags-from-props';
 export { default as EditorActions } from './actions';
-export { createEditorContentStyle } from './ui/ContentStyles';
+export {
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required
+/**
+ * @deprecated
+ * DO NOT USE THIS WILL BE REMOVED SOON.
+ * use this instead: packages/editor/editor-core/src/ui/EditorContentContainer.tsx
+ */
+createEditorContentStyle } from './ui/ContentStyles';
 export { getDefaultPresetOptionsFromEditorProps } from './create-editor/create-plugins-list';
 export { ReactEditorView } from './create-editor/ReactEditorView';

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

@@ -8,12 +8,7 @@ import React, { Fragment } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { createEditorContentStyle } from '../ContentStyles';
 import EditorContentContainer from '../EditorContentContainer/EditorContentContainer';
 import PluginSlot from '../PluginSlot';
 import WithFlash from '../WithFlash';
@@ -37,30 +32,6 @@ const scrollbarStylesNew = css({
     backgroundColor: "var(--ds-background-neutral-bold-hovered, #2C3E5D)"
   }
 });
-const chromelessEditorStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '20px',
-  height: 'auto',
-  overflowX: 'hidden',
-  overflowY: 'auto'
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-scrollbarStyles, {
-  maxWidth: 'inherit',
-  boxSizing: 'border-box',
-  wordWrap: 'break-word',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  'div > .ProseMirror': {
-    outline: 'none',
-    whiteSpace: 'pre-wrap',
-    padding: 0,
-    margin: 0,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    '& > :last-child': {
-      paddingBottom: "var(--ds-space-100, 0.5em)"
-    }
-  }
-});
 const chromelessEditorStylesNew = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '20px',
@@ -91,12 +62,6 @@ const extraSpaceLastLineFix = css({
     }
   }
 });
-export const ContentArea = createEditorContentStyle();
-ContentArea.displayName = 'ContentArea';
-const EditorContainer = componentWithCondition(() => editorExperiment('platform_editor_core_static_emotion', true, {
-  exposure: true
-}), EditorContentContainer, ContentArea);
-
 /**
  * Render the editor in a chromeless appearance.
  * Example use is the inline comment editor, which doesn't have editor toolbar
@@ -140,7 +105,7 @@ export default class Editor extends React.Component {
         maxHeight: maxHeight,
         minHeight: minHeight,
         containerRef: ref => this.containerElement = ref
-      }, jsx(EditorContainer
+      }, jsx(EditorContentContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       , {
         className: "ak-editor-content-area",
@@ -188,7 +153,7 @@ function RenderWithPluginState({
     maxContentSize
   }));
 }
-function ChromelessEditorContainerNext({
+export function ChromelessEditorContainer({
   maxHeight,
   minHeight,
   children,
@@ -204,28 +169,4 @@ function ChromelessEditorContainerNext({
     id: "chromeless-editor",
     ref: containerRef
   }, children);
-}
-function ChromelessEditorContainerOld({
-  maxHeight,
-  minHeight,
-  children,
-  containerRef
-}) {
-  return jsx("div", {
-    css: [chromelessEditorStyles, maxHeight &&
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css({
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      maxHeight: `${maxHeight}px`
-    }),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css({
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      minHeight: `${minHeight}px`
-    }), fg('platform_fix_extra_space_last_line_comment_editor') && extraSpaceLastLineFix],
-    "data-testid": "chromeless-editor",
-    id: "chromeless-editor",
-    ref: containerRef
-  }, children);
-}
-export const ChromelessEditorContainer = componentWithCondition(() => expValEquals('platform_editor_core_static_emotion', 'isEnabled', true), ChromelessEditorContainerNext, ChromelessEditorContainerOld);
+}