@atlaskit/editor-common 87.9.0 → 87.10.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-common
 
+## 87.10.0
+
+### Minor Changes
+
+- [#129411](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129411)
+  [`175fc1454a8a4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/175fc1454a8a4) -
+  [ux] Migrate typography with new ADS token and primitive and remove feature gate
+
+### Patch Changes
+
+- [#119417](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119417)
+  [`8cb3eccfd2a71`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8cb3eccfd2a71) -
+  Fix table resizing in SSR and hydration
+- [`79a3024b0907a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/79a3024b0907a) -
+  ED-24535 Used generic ignore mutation for lazy node view
+- Updated dependencies
+
+## 87.9.1
+
+### Patch Changes
+
+- [`46b889c01d03e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/46b889c01d03e) -
+  [ux] Clean up Reaact 18 Feature Flags
+
 ## 87.9.0
 
 ### Minor Changes

package/dist/cjs/element-browser/components/ElementList/EmptyState.js

@@ -8,7 +8,6 @@ exports.default = EmptyState;
 var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _new = require("@atlaskit/button/new");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _NotFoundIllustration = _interopRequireDefault(require("./NotFoundIllustration"));
 /**
@@ -23,7 +22,7 @@ function EmptyState(_ref) {
     css: emptyStateWrapper,
     "data-testid": "empty-state-wrapper"
   }, (0, _react.jsx)(_NotFoundIllustration.default, null), (0, _react.jsx)("div", {
-    css: [emptyStateHeading, (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? emptyStateHeadingFontToken : emptyStateHeadingFont]
+    css: emptyStateHeading
   }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, {
     id: "fabric.editor.elementbrowser.search.empty-state.heading",
     defaultMessage: "Nothing matches your search",
@@ -47,16 +46,8 @@ function EmptyState(_ref) {
     description: "Empty state sub-heading external link"
   })))));
 }
-var emptyStateHeadingFontToken = (0, _react.css)({
-  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-});
-var emptyStateHeadingFont = (0, _react.css)({
-  fontSize: '1.42857em',
-  lineHeight: 1.2,
-  fontWeight: 500,
-  letterSpacing: '-0.008em'
-});
 var emptyStateHeading = (0, _react.css)({
+  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   color: "var(--ds-text, rgb(23, 43, 77))",
   marginTop: "var(--ds-space-300, 24px)"
 });

package/dist/cjs/lazy-node-view/index.js

@@ -76,10 +76,7 @@ var withLazyLoading = exports.withLazyLoading = function withLazyLoading(_ref) {
   var nodeName = _ref.nodeName,
     loader = _ref.loader,
     getNodeViewOptions = _ref.getNodeViewOptions,
-    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
-    _ref$lazyNodeViewOpti = _ref.lazyNodeViewOptions,
-    _ref$lazyNodeViewOpti2 = _ref$lazyNodeViewOpti === void 0 ? {} : _ref$lazyNodeViewOpti,
-    ignoreMutationDelegate = _ref$lazyNodeViewOpti2.ignoreMutationDelegate;
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
   var createLazyNodeView = function createLazyNodeView(node, view, getPos, decorations) {
     var _node$type;
     var requestedNodes = requestedNodesPerEditorView.get(view);
@@ -88,9 +85,7 @@ var withLazyLoading = exports.withLazyLoading = function withLazyLoading(_ref) {
     }
     var wasAlreadyRequested = requestedNodes.has(nodeName);
     if (wasAlreadyRequested) {
-      return new _nodeView.LazyNodeView(node, view, getPos, {
-        ignoreMutationDelegate: ignoreMutationDelegate
-      });
+      return new _nodeView.LazyNodeView(node, view, getPos);
     }
     requestedNodes.add(nodeName);
     loader().then(function (nodeViewFuncModule) {
@@ -114,9 +109,7 @@ var withLazyLoading = exports.withLazyLoading = function withLazyLoading(_ref) {
       //   },
       // });
     }
-    return new _nodeView.LazyNodeView(node, view, getPos, {
-      ignoreMutationDelegate: ignoreMutationDelegate
-    });
+    return new _nodeView.LazyNodeView(node, view, getPos);
   };
   return createLazyNodeView;
 };

package/dist/cjs/lazy-node-view/node-view.js

@@ -16,9 +16,8 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var LazyNodeView = exports.LazyNodeView = /*#__PURE__*/function () {
   function LazyNodeView(node, view, getPos) {
     var _node$type;
-    var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
     (0, _classCallCheck2.default)(this, LazyNodeView);
-    this.ignoreMutationDelegate = options === null || options === void 0 ? void 0 : options.ignoreMutationDelegate;
+    this.node = node;
     if (typeof ((_node$type = node.type) === null || _node$type === void 0 || (_node$type = _node$type.spec) === null || _node$type === void 0 ? void 0 : _node$type.toDOM) !== 'function') {
       this.dom = document.createElement('div');
       return;
@@ -39,8 +38,10 @@ var LazyNodeView = exports.LazyNodeView = /*#__PURE__*/function () {
   (0, _createClass2.default)(LazyNodeView, [{
     key: "ignoreMutation",
     value: function ignoreMutation(mutation) {
-      var _this$ignoreMutationD;
-      return !!((_this$ignoreMutationD = this.ignoreMutationDelegate) !== null && _this$ignoreMutationD !== void 0 && _this$ignoreMutationD.call(this, mutation));
+      if (this.node.type.isTextblock) {
+        return false;
+      }
+      return true;
     }
   }]);
   return LazyNodeView;

package/dist/cjs/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -26,10 +26,8 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _ = _interopRequireDefault(require("@atlaskit/icon-object/glyph/page/16"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../../analytics");
 var _ui = require("../../../ui");
@@ -77,17 +75,11 @@ var containerPadding = (0, _react2.css)({
 var textLabelMargin = (0, _react2.css)({
   marginTop: "var(--ds-space-150, 12px)"
 });
-var inputLabelFontToken = (0, _react2.css)({
-  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-medium, 500)"
-});
-var inputLabelFont = (0, _react2.css)({
-  fontSize: "".concat((0, _constants.fontSizeSmall)(), "px"),
-  fontWeight: 500
-});
 var inputLabel = (0, _react2.css)({
   color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-  paddingBottom: "var(--ds-space-050, 4px)"
+  paddingBottom: "var(--ds-space-050, 4px)",
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-medium, 500)"
 });
 var inputWrapperPosition = (0, _react2.css)({
   position: 'relative'
@@ -861,7 +853,7 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         ref: this.wrapperRef
       }, (0, _react2.jsx)("label", {
         htmlFor: linkSearchInputId,
-        css: [inputLabel, (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? inputLabelFontToken : inputLabelFont]
+        css: inputLabel
       }, formatMessage(messages.linkVisibleLabel)), (0, _react2.jsx)("div", {
         css: [_ToolbarComponents.inputWrapper, inputWrapperPosition]
       }, screenReaderText && (0, _react2.jsx)(_ui.Announcer, {
@@ -905,7 +897,7 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         primaryColor: "var(--ds-icon-subtle, #626F86)"
       }))))), (0, _react2.jsx)("label", {
         htmlFor: displayTextInputId,
-        css: [inputLabel, textLabelMargin, (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? inputLabelFontToken : inputLabelFont]
+        css: [inputLabel, textLabelMargin]
       }, formatMessage(messages.textVisibleLabel)), (0, _react2.jsx)("div", {
         css: [_ToolbarComponents.inputWrapper, inputWrapperPosition]
       }, (0, _react2.jsx)(_ui.PanelTextInput, {

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "87.9.0";
+var packageVersion = "87.10.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "87.9.0";
+var packageVersion = "87.10.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -7,12 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.WidthProvider = exports.WidthContext = exports.WidthConsumer = void 0;
 exports.createWidthContext = createWidthContext;
+exports.getBodyWidth = void 0;
 exports.getBreakpoint = getBreakpoint;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _widthDetector = require("@atlaskit/width-detector");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -61,7 +63,7 @@ var Provider = WidthContext.Provider,
  *
  * @returns {number} The width of the document body or 0 if the document is undefined.
  */
-var getBodyWidth = (0, _memoizeOne.default)(function () {
+var getBodyWidth = exports.getBodyWidth = (0, _memoizeOne.default)(function () {
   var _document$body$offset, _document$body;
   return typeof document !== 'undefined' ? (_document$body$offset = (_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 0 : 0;
 });
@@ -69,17 +71,23 @@ var WidthProvider = exports.WidthProvider = function WidthProvider(_ref) {
   var className = _ref.className,
     shouldCheckExistingValue = _ref.shouldCheckExistingValue,
     children = _ref.children;
-  var existingContextValue = _react.default.useContext(WidthContext);
-  var _React$useState = _react.default.useState(getBodyWidth),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    width = _React$useState2[0],
-    setWidth = _React$useState2[1];
-  var widthRef = _react.default.useRef(width);
-  var isMountedRef = _react.default.useRef(true);
-  var providerValue = _react.default.useMemo(function () {
+  var shouldFixTableResizing = Boolean((0, _platformFeatureFlags.fg)('platform-fix-table-ssr-resizing'));
+  var containerRef = (0, _react.useRef)(null);
+  var existingContextValue = (0, _react.useContext)(WidthContext);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isInitialWidthUpdated = _useState2[0],
+    setIsInitialWidthUpdated = _useState2[1];
+  var _useState3 = (0, _react.useState)(getBodyWidth),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    width = _useState4[0],
+    setWidth = _useState4[1];
+  var widthRef = (0, _react.useRef)(width);
+  var isMountedRef = (0, _react.useRef)(true);
+  var providerValue = (0, _react.useMemo)(function () {
     return createWidthContext(width);
   }, [width]);
-  var updateWidth = _react.default.useMemo(function () {
+  var updateWidth = (0, _react.useMemo)(function () {
     return (0, _rafSchd.default)(function (nextWidth) {
       var currentWidth = widthRef.current || 0;
       // Ignore changes that are less than SCROLLBAR_WIDTH, otherwise it can cause infinite re-scaling
@@ -95,22 +103,44 @@ var WidthProvider = exports.WidthProvider = function WidthProvider(_ref) {
     });
   }, []);
   var skipWidthDetection = shouldCheckExistingValue && existingContextValue.width > 0;
-  _react.default.useLayoutEffect(function () {
+  (0, _react.useLayoutEffect)(function () {
     isMountedRef.current = true;
+    if (shouldFixTableResizing && !isInitialWidthUpdated) {
+      // useLayoutEffect is not run in SSR mode
+      // The visibility change for SSR is done in packages/editor/renderer/src/ui/Renderer/breakout-ssr.tsx
+      setIsInitialWidthUpdated(true);
+      if (containerRef.current) {
+        setWidth(containerRef.current.offsetWidth);
+      }
+    }
     return function () {
       isMountedRef.current = false;
     };
-  }, []);
-  return (
+  }, [isInitialWidthUpdated, shouldFixTableResizing, width]);
+  return (0, _react2.jsx)("div", {
+    css: styles
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    (0, _react2.jsx)("div", {
-      css: styles,
-      className: className
-    }, !skipWidthDetection && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_widthDetector.WidthObserver, {
-      setWidth: updateWidth,
-      offscreen: true
-    }), (0, _react2.jsx)(Provider, {
-      value: providerValue
-    }, children)), skipWidthDetection && children)
-  );
+    ,
+    className: className,
+    ref: containerRef
+    // Using style not css prop because we need to also reset these style in SSR
+    // It is done in packages/editor/renderer/src/ui/Renderer/breakout-ssr.tsx
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Intended
+    ,
+    style: shouldFixTableResizing && !isInitialWidthUpdated ? {
+      // Width is initialized with body width but in Confluence this is too wide as side nav takes some space.
+      // Putting the div into hidden until we can get the correct width.
+      // Only setting the visibility so children still takes space which will make scrollbar to correct appear.
+      // Scrollbar has width too it needs to be taken into account otherwise table is going to shrink after appeared.
+      visibility: 'hidden',
+      // Because the body width is too wide, the horizontal scrollbar gonna shown
+      // Temporary hide it until we get the correct width
+      overflowX: 'hidden'
+    } : {}
+  }, !skipWidthDetection && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_widthDetector.WidthObserver, {
+    setWidth: updateWidth,
+    offscreen: true
+  }), (0, _react2.jsx)(Provider, {
+    value: providerValue
+  }, children)), skipWidthDetection && children);
 };

package/dist/cjs/ui-menu/ColorPickerButton/index.js

@@ -11,14 +11,12 @@ var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../analytics");
 var _uiColor = require("../../ui-color");
 var _uiReact = require("../../ui-react");
 var _Popup = _interopRequireDefault(require("../../ui/Popup"));
-var _withOuterListeners = _interopRequireDefault(require("../../ui/with-outer-listeners"));
 var _ArrowKeyNavigationProvider = require("../ArrowKeyNavigationProvider");
 var _types = require("../ArrowKeyNavigationProvider/types");
 /**
@@ -50,7 +48,6 @@ var colorPickerWrapper = function colorPickerWrapper() {
 };
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
-var ColorPaletteWithListeners = (0, _withOuterListeners.default)(_uiColor.ColorPalette);
 var ColorPaletteWithReactViewListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_uiColor.ColorPalette);
 var ColorPickerButton = function ColorPickerButton(props) {
   var buttonRef = _react.default.useRef(null);
@@ -164,18 +161,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
       isOpenedByKeyboard: isOpenedByKeyboard,
       isPopupPositioned: isPopupPositioned,
       ignoreEscapeKey: props.returnEscToButton
-    }, (0, _platformFeatureFlags.fg)('react_18_color_picker_concurrent_mode') ? (0, _react2.jsx)(ColorPaletteWithReactViewListeners, {
-      cols: props.cols,
-      selectedColor: selectedColor,
-      onClick: onColorSelected,
-      handleClickOutside: togglePopup,
-      handleEscapeKeydown: handleEsc,
-      paletteOptions: {
-        palette: props.colorPalette,
-        hexToPaletteColor: props.hexToPaletteColor,
-        paletteColorTooltipMessages: props.paletteColorTooltipMessages
-      }
-    }) : (0, _react2.jsx)(ColorPaletteWithListeners, {
+    }, (0, _react2.jsx)(ColorPaletteWithReactViewListeners, {
       cols: props.cols,
       selectedColor: selectedColor,
       onClick: onColorSelected,

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

@@ -6,7 +6,6 @@
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { LinkButton } from '@atlaskit/button/new';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import NotFoundIllustration from './NotFoundIllustration';
 export default function EmptyState({
@@ -16,7 +15,7 @@ export default function EmptyState({
     css: emptyStateWrapper,
     "data-testid": "empty-state-wrapper"
   }, jsx(NotFoundIllustration, null), jsx("div", {
-    css: [emptyStateHeading, fg('platform_editor_migration_icon_and_typography') ? emptyStateHeadingFontToken : emptyStateHeadingFont]
+    css: emptyStateHeading
   }, jsx(FormattedMessage, {
     id: "fabric.editor.elementbrowser.search.empty-state.heading",
     defaultMessage: "Nothing matches your search",
@@ -40,16 +39,8 @@ export default function EmptyState({
     description: "Empty state sub-heading external link"
   })))));
 }
-const emptyStateHeadingFontToken = css({
-  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-});
-const emptyStateHeadingFont = css({
-  fontSize: '1.42857em',
-  lineHeight: 1.2,
-  fontWeight: 500,
-  letterSpacing: '-0.008em'
-});
 const emptyStateHeading = css({
+  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   color: "var(--ds-text, rgb(23, 43, 77))",
   marginTop: "var(--ds-space-300, 24px)"
 });

package/dist/es2019/lazy-node-view/index.js

@@ -65,10 +65,7 @@ export const withLazyLoading = ({
   nodeName,
   loader,
   getNodeViewOptions,
-  dispatchAnalyticsEvent,
-  lazyNodeViewOptions: {
-    ignoreMutationDelegate
-  } = {}
+  dispatchAnalyticsEvent
 }) => {
   const createLazyNodeView = (node, view, getPos, decorations) => {
     var _node$type, _node$type$spec;
@@ -78,9 +75,7 @@ export const withLazyLoading = ({
     }
     const wasAlreadyRequested = requestedNodes.has(nodeName);
     if (wasAlreadyRequested) {
-      return new LazyNodeView(node, view, getPos, {
-        ignoreMutationDelegate
-      });
+      return new LazyNodeView(node, view, getPos);
     }
     requestedNodes.add(nodeName);
     loader().then(nodeViewFuncModule => {
@@ -104,9 +99,7 @@ export const withLazyLoading = ({
       //   },
       // });
     }
-    return new LazyNodeView(node, view, getPos, {
-      ignoreMutationDelegate
-    });
+    return new LazyNodeView(node, view, getPos);
   };
   return createLazyNodeView;
 };

package/dist/es2019/lazy-node-view/node-view.js

@@ -5,9 +5,9 @@ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
  * A NodeView that serves as a placeholder until the actual NodeView is loaded.
  */
 export class LazyNodeView {
-  constructor(node, view, getPos, options = {}) {
+  constructor(node, view, getPos) {
     var _node$type, _node$type$spec;
-    this.ignoreMutationDelegate = options === null || options === void 0 ? void 0 : options.ignoreMutationDelegate;
+    this.node = node;
     if (typeof ((_node$type = node.type) === null || _node$type === void 0 ? void 0 : (_node$type$spec = _node$type.spec) === null || _node$type$spec === void 0 ? void 0 : _node$type$spec.toDOM) !== 'function') {
       this.dom = document.createElement('div');
       return;
@@ -26,7 +26,9 @@ export class LazyNodeView {
     }
   }
   ignoreMutation(mutation) {
-    var _this$ignoreMutationD;
-    return !!((_this$ignoreMutationD = this.ignoreMutationDelegate) !== null && _this$ignoreMutationD !== void 0 && _this$ignoreMutationD.call(this, mutation));
+    if (this.node.type.isTextblock) {
+      return false;
+    }
+    return true;
   }
 }

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -15,10 +15,8 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Pressable, xcss } from '@atlaskit/primitives';
 import { N200 } from '@atlaskit/theme/colors';
-import { fontSizeSmall } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, INPUT_METHOD } from '../../../analytics';
 import { Announcer, PanelTextInput } from '../../../ui';
@@ -60,17 +58,11 @@ const containerPadding = css({
 const textLabelMargin = css({
   marginTop: "var(--ds-space-150, 12px)"
 });
-const inputLabelFontToken = css({
-  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-medium, 500)"
-});
-const inputLabelFont = css({
-  fontSize: `${fontSizeSmall()}px`,
-  fontWeight: 500
-});
 const inputLabel = css({
   color: `var(--ds-text-subtlest, ${N200})`,
-  paddingBottom: "var(--ds-space-050, 4px)"
+  paddingBottom: "var(--ds-space-050, 4px)",
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-medium, 500)"
 });
 const inputWrapperPosition = css({
   position: 'relative'
@@ -703,7 +695,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       ref: this.wrapperRef
     }, jsx("label", {
       htmlFor: linkSearchInputId,
-      css: [inputLabel, fg('platform_editor_migration_icon_and_typography') ? inputLabelFontToken : inputLabelFont]
+      css: inputLabel
     }, formatMessage(messages.linkVisibleLabel)), jsx("div", {
       css: [inputWrapper, inputWrapperPosition]
     }, screenReaderText && jsx(Announcer, {
@@ -745,7 +737,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       primaryColor: "var(--ds-icon-subtle, #626F86)"
     }))))), jsx("label", {
       htmlFor: displayTextInputId,
-      css: [inputLabel, textLabelMargin, fg('platform_editor_migration_icon_and_typography') ? inputLabelFontToken : inputLabelFont]
+      css: [inputLabel, textLabelMargin]
     }, formatMessage(messages.textVisibleLabel)), jsx("div", {
       css: [inputWrapper, inputWrapperPosition]
     }, jsx(PanelTextInput, {

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "87.9.0";
+const packageVersion = "87.10.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

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

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

@@ -2,12 +2,13 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { Fragment } from 'react';
+import React, { Fragment, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import memoizeOne from 'memoize-one';
 import rafSchedule from 'raf-schd';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { WidthObserver } from '@atlaskit/width-detector';
 const styles = css({
   position: 'relative',
@@ -47,7 +48,7 @@ const {
  *
  * @returns {number} The width of the document body or 0 if the document is undefined.
  */
-const getBodyWidth = memoizeOne(() => {
+export const getBodyWidth = memoizeOne(() => {
   var _document$body$offset, _document$body;
   return typeof document !== 'undefined' ? (_document$body$offset = (_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 0 : 0;
 });
@@ -56,12 +57,15 @@ export const WidthProvider = ({
   shouldCheckExistingValue,
   children
 }) => {
-  const existingContextValue = React.useContext(WidthContext);
-  const [width, setWidth] = React.useState(getBodyWidth);
-  const widthRef = React.useRef(width);
-  const isMountedRef = React.useRef(true);
-  const providerValue = React.useMemo(() => createWidthContext(width), [width]);
-  const updateWidth = React.useMemo(() => {
+  const shouldFixTableResizing = Boolean(fg('platform-fix-table-ssr-resizing'));
+  const containerRef = useRef(null);
+  const existingContextValue = useContext(WidthContext);
+  const [isInitialWidthUpdated, setIsInitialWidthUpdated] = useState(false);
+  const [width, setWidth] = useState(getBodyWidth);
+  const widthRef = useRef(width);
+  const isMountedRef = useRef(true);
+  const providerValue = useMemo(() => createWidthContext(width), [width]);
+  const updateWidth = useMemo(() => {
     return rafSchedule(nextWidth => {
       const currentWidth = widthRef.current || 0;
       // Ignore changes that are less than SCROLLBAR_WIDTH, otherwise it can cause infinite re-scaling
@@ -77,23 +81,45 @@ export const WidthProvider = ({
     });
   }, []);
   const skipWidthDetection = shouldCheckExistingValue && existingContextValue.width > 0;
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     isMountedRef.current = true;
+    if (shouldFixTableResizing && !isInitialWidthUpdated) {
+      // useLayoutEffect is not run in SSR mode
+      // The visibility change for SSR is done in packages/editor/renderer/src/ui/Renderer/breakout-ssr.tsx
+      setIsInitialWidthUpdated(true);
+      if (containerRef.current) {
+        setWidth(containerRef.current.offsetWidth);
+      }
+    }
     return () => {
       isMountedRef.current = false;
     };
-  }, []);
-  return (
+  }, [isInitialWidthUpdated, shouldFixTableResizing, width]);
+  return jsx("div", {
+    css: styles
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    jsx("div", {
-      css: styles,
-      className: className
-    }, !skipWidthDetection && jsx(Fragment, null, jsx(WidthObserver, {
-      setWidth: updateWidth,
-      offscreen: true
-    }), jsx(Provider, {
-      value: providerValue
-    }, children)), skipWidthDetection && children)
-  );
+    ,
+    className: className,
+    ref: containerRef
+    // Using style not css prop because we need to also reset these style in SSR
+    // It is done in packages/editor/renderer/src/ui/Renderer/breakout-ssr.tsx
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Intended
+    ,
+    style: shouldFixTableResizing && !isInitialWidthUpdated ? {
+      // Width is initialized with body width but in Confluence this is too wide as side nav takes some space.
+      // Putting the div into hidden until we can get the correct width.
+      // Only setting the visibility so children still takes space which will make scrollbar to correct appear.
+      // Scrollbar has width too it needs to be taken into account otherwise table is going to shrink after appeared.
+      visibility: 'hidden',
+      // Because the body width is too wide, the horizontal scrollbar gonna shown
+      // Temporary hide it until we get the correct width
+      overflowX: 'hidden'
+    } : {}
+  }, !skipWidthDetection && jsx(Fragment, null, jsx(WidthObserver, {
+    setWidth: updateWidth,
+    offscreen: true
+  }), jsx(Provider, {
+    value: providerValue
+  }, children)), skipWidthDetection && children);
 };
 export { Consumer as WidthConsumer };

package/dist/es2019/ui-menu/ColorPickerButton/index.js

@@ -9,14 +9,12 @@ import { css, jsx } from '@emotion/react';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
 import { ColorPalette, DEFAULT_BORDER_COLOR, getSelectedRowAndColumnFromPalette } from '../../ui-color';
 import { withReactEditorViewOuterListeners } from '../../ui-react';
 import { default as Popup } from '../../ui/Popup';
-import { default as withOuterListeners } from '../../ui/with-outer-listeners';
 import { ArrowKeyNavigationProvider } from '../ArrowKeyNavigationProvider';
 import { ArrowKeyNavigationType } from '../ArrowKeyNavigationProvider/types';
 
@@ -40,7 +38,6 @@ const colorPickerWrapper = () => css({
 });
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
-const ColorPaletteWithListeners = withOuterListeners(ColorPalette);
 const ColorPaletteWithReactViewListeners = withReactEditorViewOuterListeners(ColorPalette);
 const ColorPickerButton = props => {
   const buttonRef = React.useRef(null);
@@ -144,18 +141,7 @@ const ColorPickerButton = props => {
       isOpenedByKeyboard: isOpenedByKeyboard,
       isPopupPositioned: isPopupPositioned,
       ignoreEscapeKey: props.returnEscToButton
-    }, fg('react_18_color_picker_concurrent_mode') ? jsx(ColorPaletteWithReactViewListeners, {
-      cols: props.cols,
-      selectedColor: selectedColor,
-      onClick: onColorSelected,
-      handleClickOutside: togglePopup,
-      handleEscapeKeydown: handleEsc,
-      paletteOptions: {
-        palette: props.colorPalette,
-        hexToPaletteColor: props.hexToPaletteColor,
-        paletteColorTooltipMessages: props.paletteColorTooltipMessages
-      }
-    }) : jsx(ColorPaletteWithListeners, {
+    }, jsx(ColorPaletteWithReactViewListeners, {
       cols: props.cols,
       selectedColor: selectedColor,
       onClick: onColorSelected,

package/dist/esm/element-browser/components/ElementList/EmptyState.js

@@ -6,7 +6,6 @@
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { LinkButton } from '@atlaskit/button/new';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import NotFoundIllustration from './NotFoundIllustration';
 export default function EmptyState(_ref) {
@@ -15,7 +14,7 @@ export default function EmptyState(_ref) {
     css: emptyStateWrapper,
     "data-testid": "empty-state-wrapper"
   }, jsx(NotFoundIllustration, null), jsx("div", {
-    css: [emptyStateHeading, fg('platform_editor_migration_icon_and_typography') ? emptyStateHeadingFontToken : emptyStateHeadingFont]
+    css: emptyStateHeading
   }, jsx(FormattedMessage, {
     id: "fabric.editor.elementbrowser.search.empty-state.heading",
     defaultMessage: "Nothing matches your search",
@@ -39,16 +38,8 @@ export default function EmptyState(_ref) {
     description: "Empty state sub-heading external link"
   })))));
 }
-var emptyStateHeadingFontToken = css({
-  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-});
-var emptyStateHeadingFont = css({
-  fontSize: '1.42857em',
-  lineHeight: 1.2,
-  fontWeight: 500,
-  letterSpacing: '-0.008em'
-});
 var emptyStateHeading = css({
+  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   color: "var(--ds-text, rgb(23, 43, 77))",
   marginTop: "var(--ds-space-300, 24px)"
 });

package/dist/esm/lazy-node-view/index.js

@@ -65,10 +65,7 @@ export var withLazyLoading = function withLazyLoading(_ref) {
   var nodeName = _ref.nodeName,
     loader = _ref.loader,
     getNodeViewOptions = _ref.getNodeViewOptions,
-    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
-    _ref$lazyNodeViewOpti = _ref.lazyNodeViewOptions,
-    _ref$lazyNodeViewOpti2 = _ref$lazyNodeViewOpti === void 0 ? {} : _ref$lazyNodeViewOpti,
-    ignoreMutationDelegate = _ref$lazyNodeViewOpti2.ignoreMutationDelegate;
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
   var createLazyNodeView = function createLazyNodeView(node, view, getPos, decorations) {
     var _node$type;
     var requestedNodes = requestedNodesPerEditorView.get(view);
@@ -77,9 +74,7 @@ export var withLazyLoading = function withLazyLoading(_ref) {
     }
     var wasAlreadyRequested = requestedNodes.has(nodeName);
     if (wasAlreadyRequested) {
-      return new LazyNodeView(node, view, getPos, {
-        ignoreMutationDelegate: ignoreMutationDelegate
-      });
+      return new LazyNodeView(node, view, getPos);
     }
     requestedNodes.add(nodeName);
     loader().then(function (nodeViewFuncModule) {
@@ -103,9 +98,7 @@ export var withLazyLoading = function withLazyLoading(_ref) {
       //   },
       // });
     }
-    return new LazyNodeView(node, view, getPos, {
-      ignoreMutationDelegate: ignoreMutationDelegate
-    });
+    return new LazyNodeView(node, view, getPos);
   };
   return createLazyNodeView;
 };

package/dist/esm/lazy-node-view/node-view.js

@@ -9,9 +9,8 @@ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 export var LazyNodeView = /*#__PURE__*/function () {
   function LazyNodeView(node, view, getPos) {
     var _node$type;
-    var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
     _classCallCheck(this, LazyNodeView);
-    this.ignoreMutationDelegate = options === null || options === void 0 ? void 0 : options.ignoreMutationDelegate;
+    this.node = node;
     if (typeof ((_node$type = node.type) === null || _node$type === void 0 || (_node$type = _node$type.spec) === null || _node$type === void 0 ? void 0 : _node$type.toDOM) !== 'function') {
       this.dom = document.createElement('div');
       return;
@@ -32,8 +31,10 @@ export var LazyNodeView = /*#__PURE__*/function () {
   _createClass(LazyNodeView, [{
     key: "ignoreMutation",
     value: function ignoreMutation(mutation) {
-      var _this$ignoreMutationD;
-      return !!((_this$ignoreMutationD = this.ignoreMutationDelegate) !== null && _this$ignoreMutationD !== void 0 && _this$ignoreMutationD.call(this, mutation));
+      if (this.node.type.isTextblock) {
+        return false;
+      }
+      return true;
     }
   }]);
   return LazyNodeView;

package/dist/esm/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -27,10 +27,8 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Pressable, xcss } from '@atlaskit/primitives';
 import { N200 } from '@atlaskit/theme/colors';
-import { fontSizeSmall } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, INPUT_METHOD } from '../../../analytics';
 import { Announcer, PanelTextInput } from '../../../ui';
@@ -72,17 +70,11 @@ var containerPadding = css({
 var textLabelMargin = css({
   marginTop: "var(--ds-space-150, 12px)"
 });
-var inputLabelFontToken = css({
-  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-medium, 500)"
-});
-var inputLabelFont = css({
-  fontSize: "".concat(fontSizeSmall(), "px"),
-  fontWeight: 500
-});
 var inputLabel = css({
   color: "var(--ds-text-subtlest, ".concat(N200, ")"),
-  paddingBottom: "var(--ds-space-050, 4px)"
+  paddingBottom: "var(--ds-space-050, 4px)",
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-medium, 500)"
 });
 var inputWrapperPosition = css({
   position: 'relative'
@@ -856,7 +848,7 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         ref: this.wrapperRef
       }, jsx("label", {
         htmlFor: linkSearchInputId,
-        css: [inputLabel, fg('platform_editor_migration_icon_and_typography') ? inputLabelFontToken : inputLabelFont]
+        css: inputLabel
       }, formatMessage(messages.linkVisibleLabel)), jsx("div", {
         css: [inputWrapper, inputWrapperPosition]
       }, screenReaderText && jsx(Announcer, {
@@ -900,7 +892,7 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         primaryColor: "var(--ds-icon-subtle, #626F86)"
       }))))), jsx("label", {
         htmlFor: displayTextInputId,
-        css: [inputLabel, textLabelMargin, fg('platform_editor_migration_icon_and_typography') ? inputLabelFontToken : inputLabelFont]
+        css: [inputLabel, textLabelMargin]
       }, formatMessage(messages.textVisibleLabel)), jsx("div", {
         css: [inputWrapper, inputWrapperPosition]
       }, jsx(PanelTextInput, {

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "87.9.0";
+var packageVersion = "87.10.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -20,7 +20,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "87.9.0";
+var packageVersion = "87.10.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -3,12 +3,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { Fragment } from 'react';
+import React, { Fragment, useContext, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import memoizeOne from 'memoize-one';
 import rafSchedule from 'raf-schd';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { WidthObserver } from '@atlaskit/width-detector';
 var styles = css({
   position: 'relative',
@@ -48,7 +49,7 @@ var Provider = WidthContext.Provider,
  *
  * @returns {number} The width of the document body or 0 if the document is undefined.
  */
-var getBodyWidth = memoizeOne(function () {
+export var getBodyWidth = memoizeOne(function () {
   var _document$body$offset, _document$body;
   return typeof document !== 'undefined' ? (_document$body$offset = (_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 0 : 0;
 });
@@ -56,17 +57,23 @@ export var WidthProvider = function WidthProvider(_ref) {
   var className = _ref.className,
     shouldCheckExistingValue = _ref.shouldCheckExistingValue,
     children = _ref.children;
-  var existingContextValue = React.useContext(WidthContext);
-  var _React$useState = React.useState(getBodyWidth),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    width = _React$useState2[0],
-    setWidth = _React$useState2[1];
-  var widthRef = React.useRef(width);
-  var isMountedRef = React.useRef(true);
-  var providerValue = React.useMemo(function () {
+  var shouldFixTableResizing = Boolean(fg('platform-fix-table-ssr-resizing'));
+  var containerRef = useRef(null);
+  var existingContextValue = useContext(WidthContext);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isInitialWidthUpdated = _useState2[0],
+    setIsInitialWidthUpdated = _useState2[1];
+  var _useState3 = useState(getBodyWidth),
+    _useState4 = _slicedToArray(_useState3, 2),
+    width = _useState4[0],
+    setWidth = _useState4[1];
+  var widthRef = useRef(width);
+  var isMountedRef = useRef(true);
+  var providerValue = useMemo(function () {
     return createWidthContext(width);
   }, [width]);
-  var updateWidth = React.useMemo(function () {
+  var updateWidth = useMemo(function () {
     return rafSchedule(function (nextWidth) {
       var currentWidth = widthRef.current || 0;
       // Ignore changes that are less than SCROLLBAR_WIDTH, otherwise it can cause infinite re-scaling
@@ -82,23 +89,45 @@ export var WidthProvider = function WidthProvider(_ref) {
     });
   }, []);
   var skipWidthDetection = shouldCheckExistingValue && existingContextValue.width > 0;
-  React.useLayoutEffect(function () {
+  useLayoutEffect(function () {
     isMountedRef.current = true;
+    if (shouldFixTableResizing && !isInitialWidthUpdated) {
+      // useLayoutEffect is not run in SSR mode
+      // The visibility change for SSR is done in packages/editor/renderer/src/ui/Renderer/breakout-ssr.tsx
+      setIsInitialWidthUpdated(true);
+      if (containerRef.current) {
+        setWidth(containerRef.current.offsetWidth);
+      }
+    }
     return function () {
       isMountedRef.current = false;
     };
-  }, []);
-  return (
+  }, [isInitialWidthUpdated, shouldFixTableResizing, width]);
+  return jsx("div", {
+    css: styles
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    jsx("div", {
-      css: styles,
-      className: className
-    }, !skipWidthDetection && jsx(Fragment, null, jsx(WidthObserver, {
-      setWidth: updateWidth,
-      offscreen: true
-    }), jsx(Provider, {
-      value: providerValue
-    }, children)), skipWidthDetection && children)
-  );
+    ,
+    className: className,
+    ref: containerRef
+    // Using style not css prop because we need to also reset these style in SSR
+    // It is done in packages/editor/renderer/src/ui/Renderer/breakout-ssr.tsx
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Intended
+    ,
+    style: shouldFixTableResizing && !isInitialWidthUpdated ? {
+      // Width is initialized with body width but in Confluence this is too wide as side nav takes some space.
+      // Putting the div into hidden until we can get the correct width.
+      // Only setting the visibility so children still takes space which will make scrollbar to correct appear.
+      // Scrollbar has width too it needs to be taken into account otherwise table is going to shrink after appeared.
+      visibility: 'hidden',
+      // Because the body width is too wide, the horizontal scrollbar gonna shown
+      // Temporary hide it until we get the correct width
+      overflowX: 'hidden'
+    } : {}
+  }, !skipWidthDetection && jsx(Fragment, null, jsx(WidthObserver, {
+    setWidth: updateWidth,
+    offscreen: true
+  }), jsx(Provider, {
+    value: providerValue
+  }, children)), skipWidthDetection && children);
 };
 export { Consumer as WidthConsumer };

package/dist/esm/ui-menu/ColorPickerButton/index.js

@@ -10,14 +10,12 @@ import { css, jsx } from '@emotion/react';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
 import { ColorPalette, DEFAULT_BORDER_COLOR, getSelectedRowAndColumnFromPalette } from '../../ui-color';
 import { withReactEditorViewOuterListeners } from '../../ui-react';
 import { default as Popup } from '../../ui/Popup';
-import { default as withOuterListeners } from '../../ui/with-outer-listeners';
 import { ArrowKeyNavigationProvider } from '../ArrowKeyNavigationProvider';
 import { ArrowKeyNavigationType } from '../ArrowKeyNavigationProvider/types';
 
@@ -43,7 +41,6 @@ var colorPickerWrapper = function colorPickerWrapper() {
 };
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
-var ColorPaletteWithListeners = withOuterListeners(ColorPalette);
 var ColorPaletteWithReactViewListeners = withReactEditorViewOuterListeners(ColorPalette);
 var ColorPickerButton = function ColorPickerButton(props) {
   var buttonRef = React.useRef(null);
@@ -157,18 +154,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
       isOpenedByKeyboard: isOpenedByKeyboard,
       isPopupPositioned: isPopupPositioned,
       ignoreEscapeKey: props.returnEscToButton
-    }, fg('react_18_color_picker_concurrent_mode') ? jsx(ColorPaletteWithReactViewListeners, {
-      cols: props.cols,
-      selectedColor: selectedColor,
-      onClick: onColorSelected,
-      handleClickOutside: togglePopup,
-      handleEscapeKeydown: handleEsc,
-      paletteOptions: {
-        palette: props.colorPalette,
-        hexToPaletteColor: props.hexToPaletteColor,
-        paletteColorTooltipMessages: props.paletteColorTooltipMessages
-      }
-    }) : jsx(ColorPaletteWithListeners, {
+    }, jsx(ColorPaletteWithReactViewListeners, {
       cols: props.cols,
       selectedColor: selectedColor,
       onClick: onColorSelected,

package/dist/types/lazy-node-view/index.d.ts

@@ -1,7 +1,7 @@
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { DispatchAnalyticsEvent } from '../analytics';
-import type { IgnoreMutationParam, NodeViewConstructor } from './types';
+import type { NodeViewConstructor } from './types';
 export { convertToInlineCss } from './css-helper';
 export type { NodeViewConstructor };
 /**
@@ -20,9 +20,6 @@ export type LazyLoadingProps<NodeViewOptions> = {
     loader: () => Promise<CreateReactNodeViewProps<NodeViewOptions>>;
     getNodeViewOptions: () => NodeViewOptions;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
-    lazyNodeViewOptions?: {
-        ignoreMutationDelegate?: (mutation: IgnoreMutationParam) => boolean;
-    };
 };
 /**
  * 📢 Public: Any EditorPlugin can use this function
@@ -64,4 +61,4 @@ export type LazyLoadingProps<NodeViewOptions> = {
  *
  * // Then, use `lazyTableView` in ProseMirror editor setup to enhance 'table' nodes with lazy loading
  */
-export declare const withLazyLoading: <Options>({ nodeName, loader, getNodeViewOptions, dispatchAnalyticsEvent, lazyNodeViewOptions: { ignoreMutationDelegate }, }: LazyLoadingProps<Options>) => NodeViewConstructor;
+export declare const withLazyLoading: <Options>({ nodeName, loader, getNodeViewOptions, dispatchAnalyticsEvent, }: LazyLoadingProps<Options>) => NodeViewConstructor;

package/dist/types/lazy-node-view/node-view.d.ts

@@ -1,6 +1,5 @@
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
-import type { IgnoreMutationParam } from './types';
 /**
  * 🧱 Internal: Editor FE Platform
  *
@@ -9,9 +8,10 @@ import type { IgnoreMutationParam } from './types';
 export declare class LazyNodeView implements NodeView {
     dom: Node;
     contentDOM?: HTMLElement;
-    private ignoreMutationDelegate?;
-    constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, options?: {
-        ignoreMutationDelegate?: (mutation: IgnoreMutationParam) => boolean;
-    });
-    ignoreMutation(mutation: IgnoreMutationParam): boolean;
+    private node;
+    constructor(node: PMNode, view: EditorView, getPos: () => number | undefined);
+    ignoreMutation(mutation: MutationRecord | {
+        type: 'selection';
+        target: Element;
+    }): boolean;
 }

package/dist/types/lazy-node-view/types.d.ts

@@ -1,12 +1,5 @@
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, DecorationSource, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
-/**
- * 🧱 Internal: Editor FE Platform
- */
-export type IgnoreMutationParam = MutationRecord | {
-    type: 'selection';
-    target: Element;
-};
 /**
  * 🧱 Internal: Editor FE Platform
  */

package/dist/types/ui/WidthProvider/index.d.ts

@@ -21,5 +21,18 @@ type WidthProviderProps = {
     shouldCheckExistingValue?: boolean;
     children?: React.ReactNode;
 };
+/**
+ * 🧱 Internal function: Editor FE Platform
+ *
+ * Returns the width of the document body.
+ *
+ * This function is memoized to avoid forcing a layout reflow multiple times.
+ * It uses `document.body.offsetWidth` as the source of the width, which can lead to
+ * a layout reflow if accessed repeatedly. To mitigate performance issues, the result
+ * is cached using `memoizeOne`.
+ *
+ * @returns {number} The width of the document body or 0 if the document is undefined.
+ */
+export declare const getBodyWidth: import("memoize-one").MemoizedFn<() => number>;
 export declare const WidthProvider: ({ className, shouldCheckExistingValue, children, }: WidthProviderProps) => jsx.JSX.Element;
 export { Consumer as WidthConsumer };

package/dist/types-ts4.5/lazy-node-view/index.d.ts

@@ -1,7 +1,7 @@
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { DispatchAnalyticsEvent } from '../analytics';
-import type { IgnoreMutationParam, NodeViewConstructor } from './types';
+import type { NodeViewConstructor } from './types';
 export { convertToInlineCss } from './css-helper';
 export type { NodeViewConstructor };
 /**
@@ -20,9 +20,6 @@ export type LazyLoadingProps<NodeViewOptions> = {
     loader: () => Promise<CreateReactNodeViewProps<NodeViewOptions>>;
     getNodeViewOptions: () => NodeViewOptions;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
-    lazyNodeViewOptions?: {
-        ignoreMutationDelegate?: (mutation: IgnoreMutationParam) => boolean;
-    };
 };
 /**
  * 📢 Public: Any EditorPlugin can use this function
@@ -64,4 +61,4 @@ export type LazyLoadingProps<NodeViewOptions> = {
  *
  * // Then, use `lazyTableView` in ProseMirror editor setup to enhance 'table' nodes with lazy loading
  */
-export declare const withLazyLoading: <Options>({ nodeName, loader, getNodeViewOptions, dispatchAnalyticsEvent, lazyNodeViewOptions: { ignoreMutationDelegate }, }: LazyLoadingProps<Options>) => NodeViewConstructor;
+export declare const withLazyLoading: <Options>({ nodeName, loader, getNodeViewOptions, dispatchAnalyticsEvent, }: LazyLoadingProps<Options>) => NodeViewConstructor;

package/dist/types-ts4.5/lazy-node-view/node-view.d.ts

@@ -1,6 +1,5 @@
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
-import type { IgnoreMutationParam } from './types';
 /**
  * 🧱 Internal: Editor FE Platform
  *
@@ -9,9 +8,10 @@ import type { IgnoreMutationParam } from './types';
 export declare class LazyNodeView implements NodeView {
     dom: Node;
     contentDOM?: HTMLElement;
-    private ignoreMutationDelegate?;
-    constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, options?: {
-        ignoreMutationDelegate?: (mutation: IgnoreMutationParam) => boolean;
-    });
-    ignoreMutation(mutation: IgnoreMutationParam): boolean;
+    private node;
+    constructor(node: PMNode, view: EditorView, getPos: () => number | undefined);
+    ignoreMutation(mutation: MutationRecord | {
+        type: 'selection';
+        target: Element;
+    }): boolean;
 }

package/dist/types-ts4.5/lazy-node-view/types.d.ts

@@ -1,12 +1,5 @@
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, DecorationSource, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
-/**
- * 🧱 Internal: Editor FE Platform
- */
-export type IgnoreMutationParam = MutationRecord | {
-    type: 'selection';
-    target: Element;
-};
 /**
  * 🧱 Internal: Editor FE Platform
  */

package/dist/types-ts4.5/ui/WidthProvider/index.d.ts

@@ -21,5 +21,18 @@ type WidthProviderProps = {
     shouldCheckExistingValue?: boolean;
     children?: React.ReactNode;
 };
+/**
+ * 🧱 Internal function: Editor FE Platform
+ *
+ * Returns the width of the document body.
+ *
+ * This function is memoized to avoid forcing a layout reflow multiple times.
+ * It uses `document.body.offsetWidth` as the source of the width, which can lead to
+ * a layout reflow if accessed repeatedly. To mitigate performance issues, the result
+ * is cached using `memoizeOne`.
+ *
+ * @returns {number} The width of the document body or 0 if the document is undefined.
+ */
+export declare const getBodyWidth: import("memoize-one").MemoizedFn<() => number>;
 export declare const WidthProvider: ({ className, shouldCheckExistingValue, children, }: WidthProviderProps) => jsx.JSX.Element;
 export { Consumer as WidthConsumer };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "87.9.0",
+	"version": "87.10.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -127,19 +127,19 @@
 		"@atlaskit/media-file-preview": "^0.6.0",
 		"@atlaskit/media-picker": "^66.4.0",
 		"@atlaskit/media-ui": "^25.10.0",
-		"@atlaskit/media-viewer": "48.7.0",
+		"@atlaskit/media-viewer": "48.7.1",
 		"@atlaskit/mention": "^23.2.0",
 		"@atlaskit/menu": "^2.12.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.0.0",
 		"@atlaskit/profilecard": "^19.17.0",
 		"@atlaskit/section-message": "^6.6.0",
-		"@atlaskit/smart-card": "^27.14.0",
+		"@atlaskit/smart-card": "^27.15.0",
 		"@atlaskit/smart-user-picker": "^6.10.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/task-decision": "^17.10.0",
 		"@atlaskit/textfield": "^6.5.0",
-		"@atlaskit/theme": "^12.12.0",
+		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tokens": "^1.58.0",
 		"@atlaskit/tooltip": "^18.7.0",
 		"@atlaskit/ufo": "^0.3.0",
@@ -251,9 +251,6 @@
 		"platform_editor_a11y_table_context_menu": {
 			"type": "boolean"
 		},
-		"react_18_color_picker_concurrent_mode": {
-			"type": "boolean"
-		},
 		"editor_inline_comments_paste_insert_nodes": {
 			"type": "boolean"
 		},
@@ -263,14 +260,14 @@
 		"editor_support_code_block_wrapping": {
 			"type": "boolean"
 		},
-		"platform_editor_migration_icon_and_typography": {
-			"type": "boolean"
-		},
 		"cc_page_experiences_live_search_wysiwyg": {
 			"type": "boolean"
 		},
 		"platform_editor_react_18_prosemirror_sel_resync": {
 			"type": "boolean"
+		},
+		"platform-fix-table-ssr-resizing": {
+			"type": "boolean"
 		}
 	}
 }