@atlaskit/editor-common 112.18.1 → 112.18.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-common
 
+## 112.18.3
+
+### Patch Changes
+
+- [`0a265af52321f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0a265af52321f) -
+  Clean up stale feature flag platform_editor_extension_styles, keeping the enabled code path
+- [`3f798d9934a76`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3f798d9934a76) -
+  [ux] EDITOR-5487 skip react portal initial render when hydration for toc extension node view
+- Updated dependencies
+
+## 112.18.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 112.18.1
 
 ### Patch Changes

package/dist/cjs/extensibility/Extension/Extension/index.js

@@ -143,7 +143,6 @@ function ExtensionWithPluginState(props) {
       setIsNodeHovered(didHover);
     }
   };
-  var extensionContentStyles = (0, _expValEquals.expValEquals)('platform_editor_extension_styles', 'isEnabled', true) ? _styles2.extensionContent : _styles2.content;
   return (0, _react2.jsx)(_react.Fragment, null, !showLegacyContentHeader && showMacroInteractionDesignUpdates && !isLivePageViewMode && (0, _react2.jsx)(_Lozenge.default, {
     isNodeSelected: isNodeSelected,
     isNodeHovered: isNodeHovered,
@@ -218,7 +217,7 @@ function ExtensionWithPluginState(props) {
     "data-testid": "extension-content"
     // 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: extensionContentStyles
+    css: _styles2.extensionContent
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: contentClassNames

package/dist/cjs/extensibility/ExtensionNodeWrapper.js

@@ -78,7 +78,9 @@ var ExtensionNodeWrapper = exports.ExtensionNodeWrapper = function ExtensionNode
     relative: showMacroInteractionDesignUpdates
   });
   return (0, _react2.jsx)("span", {
+    "data-testId": "extension-node-wrapper"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
     className: wrapperClassNames,
     css: [styles, (0, _expValEquals.expValEquals)('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles]
   }, children, nodeType === 'inlineExtension' && _whitespace.ZERO_WIDTH_SPACE);

package/dist/cjs/extensibility/extensionNodeView.js

@@ -12,9 +12,11 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _coreUtils = require("../core-utils");
 var _reactNodeView = _interopRequireDefault(require("../react-node-view"));
 var _Extension = require("./Extension");
 var _ExtensionNodeWrapper = require("./ExtensionNodeWrapper");
@@ -28,8 +30,23 @@ function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototyp
 // project whilst investigating block nodes. We will revisit the Extension node view there too.
 var ExtensionNode = exports.ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
   function ExtensionNode() {
+    var _this;
     (0, _classCallCheck2.default)(this, ExtensionNode);
-    return _callSuper(this, ExtensionNode, arguments);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ExtensionNode, [].concat(args));
+    /**
+     * Track whether we found and are reusing SSR'd DOM.
+     * When true, we skip React Portal rendering on first init to preserve SSR content.
+     */
+    (0, _defineProperty2.default)(_this, "didReuseSsrDom", false);
+    /**
+     * Track whether this is the first init call.
+     * SSR content preservation only happens on the very first init.
+     */
+    (0, _defineProperty2.default)(_this, "isFirstInit", true);
+    return _this;
   }
   (0, _inherits2.default)(ExtensionNode, _ReactNodeView);
   return (0, _createClass2.default)(ExtensionNode, [{
@@ -47,6 +64,15 @@ var ExtensionNode = exports.ExtensionNode = /*#__PURE__*/function (_ReactNodeVie
     key: "createDomRef",
     value: function createDomRef() {
       if (!(0, _platformFeatureFlags.fg)('confluence_connect_macro_preset_height')) {
+        // Try to reuse SSR'd DOM node on first init only
+        // This preserves SSR content and avoids TTVC mutations during hydration
+        if (!(0, _coreUtils.isSSR)() && this.isFirstInit && this.node.type.name === 'extension' && this.node.attrs.extensionKey === 'toc' && (0, _expValEquals.expValEquals)('platform_editor_hydration_skip_react_portal', 'isEnabled', true)) {
+          var ssrElement = this.findSSRElement();
+          if (ssrElement) {
+            this.didReuseSsrDom = true;
+            return ssrElement;
+          }
+        }
         return _superPropGet(ExtensionNode, "createDomRef", this, 3)([]);
       }
       if (!this.node.isInline) {
@@ -62,6 +88,83 @@ var ExtensionNode = exports.ExtensionNode = /*#__PURE__*/function (_ReactNodeVie
       return htmlElement;
     }
 
+    /**
+     * Cache for SSR element lookup to avoid repeated DOM queries.
+     * undefined = not yet searched, null = searched but not found, HTMLElement = found
+     */
+  }, {
+    key: "findSSRElement",
+    value:
+    /**
+     * Attempts to find an existing SSR'd DOM element for this extension node by extensionKey and localId
+     * which should uniquely identify the
+     * extension node within the editor content.
+     *
+     * @returns The SSR'd element if found, otherwise null
+     */
+    function findSSRElement() {
+      if (this.cachedSsrElement !== undefined) {
+        return this.cachedSsrElement || null;
+      }
+      var extensionKey = this.node.attrs.extensionKey;
+      var localId = this.node.attrs.localId;
+      var editorDom = this.view.dom;
+      if (extensionKey && localId) {
+        var selector = "[extensionkey=\"".concat(extensionKey, "\"][localid=\"").concat(localId, "\"]");
+        var element = editorDom.querySelector(selector);
+        if (element && element instanceof HTMLElement) {
+          this.cachedSsrElement = element;
+          return element;
+        }
+      }
+      this.cachedSsrElement = null;
+      return null;
+    }
+
+    /**
+     * Override init() to skip React Portal rendering on first init if we're reusing SSR'd DOM.
+     * This preserves the SSR content without React unnecessarily re-rendering it.
+     */
+  }, {
+    key: "init",
+    value: function init() {
+      if (!(0, _expValEquals.expValEquals)('platform_editor_hydration_skip_react_portal', 'isEnabled', true)) {
+        _superPropGet(ExtensionNode, "init", this, 3)([]);
+      } else {
+        if (!(0, _coreUtils.isSSR)() && this.node.type.name === 'extension' && this.node.attrs.extensionKey === 'toc') {
+          var ssrElement = this.findSSRElement();
+          var shouldSkipInitRender = ssrElement !== null;
+          _superPropGet(ExtensionNode, "init", this, 3)([shouldSkipInitRender]);
+          if (shouldSkipInitRender) {
+            this.isFirstInit = false;
+          }
+        } else {
+          _superPropGet(ExtensionNode, "init", this, 3)([]);
+        }
+      }
+      return this;
+    }
+  }, {
+    key: "update",
+    value: function update(node, decorations, _innerDecorations) {
+      var validUpdate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : function () {
+        return true;
+      };
+      // Remove extensionNodeWrapper aka span.relative if we previously reused SSR DOM
+      // control is back to React afterwards
+      if (this.didReuseSsrDom && (0, _expValEquals.expValEquals)('platform_editor_hydration_skip_react_portal', 'isEnabled', true)) {
+        var ssrElement = this.findSSRElement();
+        if (ssrElement) {
+          var extensionNodeWrapper = ssrElement.querySelector('[data-testId="extension-node-wrapper"]');
+          if (extensionNodeWrapper) {
+            extensionNodeWrapper.remove();
+          }
+          this.didReuseSsrDom = false;
+        }
+      }
+      return _superPropGet(ExtensionNode, "update", this, 3)([node, decorations, _innerDecorations, validUpdate]);
+    }
+
     /**
      * When interacting with input elements inside an extension's body, the events
      * bubble up to the editor and get handled by it. This almost always gets in the way
@@ -85,6 +188,9 @@ var ExtensionNode = exports.ExtensionNode = /*#__PURE__*/function (_ReactNodeVie
       if (this.node.isInline) {
         return;
       }
+      if (this.didReuseSsrDom) {
+        return;
+      }
       var contentDomWrapper = document.createElement('div');
       contentDomWrapper.className = "".concat(this.node.type.name, "-content-dom-wrapper");
       var isBodiedExtension = this.node.type.name === 'bodiedExtension';
@@ -112,6 +218,11 @@ var ExtensionNode = exports.ExtensionNode = /*#__PURE__*/function (_ReactNodeVie
     key: "render",
     value: function render(props, forwardRef) {
       var _props$extensionNodeV;
+      // If we reused SSR'd DOM on first init, don't render React Portal
+      // The SSR content is already perfect and doesn't need re-rendering
+      if (this.didReuseSsrDom && this.isFirstInit) {
+        return null;
+      }
       return /*#__PURE__*/_react.default.createElement(_ExtensionNodeWrapper.ExtensionNodeWrapper, {
         nodeType: this.node.type.name,
         macroInteractionDesignFeatureFlags: props.macroInteractionDesignFeatureFlags

package/dist/cjs/monitoring/error.js

@@ -19,7 +19,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 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 = "112.18.0";
+var packageVersion = "112.18.2";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -79,6 +79,7 @@ var ReactNodeView = exports.default = /*#__PURE__*/function () {
     key: "init",
     value: function init() {
       var _this2 = this;
+      var shouldSkipInitRender = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       this.domRef = this.createDomRef();
       this.setDomAttrs(this.node, this.domRef);
       var _ref = this.getContentDOM() || {
@@ -105,9 +106,11 @@ var ReactNodeView = exports.default = /*#__PURE__*/function () {
       trackingEnabled && (0, _utils.startMeasureReactNodeViewRendered)({
         nodeTypeName: this.node.type.name
       });
-      this.renderReactComponent(function () {
-        return _this2.render(_this2.reactComponentProps, _this2.handleRef);
-      });
+      if (!shouldSkipInitRender) {
+        this.renderReactComponent(function () {
+          return _this2.render(_this2.reactComponentProps, _this2.handleRef);
+        });
+      }
       trackingEnabled && (0, _utils.stopMeasureReactNodeViewRendered)({
         nodeTypeName: this.node.type.name,
         dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,

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

@@ -24,7 +24,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 = "112.18.0";
+var packageVersion = "112.18.2";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

package/dist/es2019/extensibility/Extension/Extension/index.js

@@ -18,7 +18,7 @@ import { shouldExtensionBreakout } from '../../utils/should-extension-breakout';
 import ExtensionLozenge from '../Lozenge';
 import { overlay } from '../styles';
 import { isEmptyBodiedMacro } from './extension-utils';
-import { content, contentWrapper, extensionContent, header, overflowWrapperStyles, widerLayoutClassName, wrapperStyleInheritedCursor } from './styles';
+import { contentWrapper, extensionContent, header, overflowWrapperStyles, widerLayoutClassName, wrapperStyleInheritedCursor } from './styles';
 const hoverStyles = css({
   '&:hover': {
     boxShadow: `0 0 0 1px ${"var(--ds-border-input, #8C8F97)"}`
@@ -143,7 +143,6 @@ function ExtensionWithPluginState(props) {
       setIsNodeHovered(didHover);
     }
   };
-  const extensionContentStyles = expValEquals('platform_editor_extension_styles', 'isEnabled', true) ? extensionContent : content;
   return jsx(Fragment, null, !showLegacyContentHeader && showMacroInteractionDesignUpdates && !isLivePageViewMode && jsx(ExtensionLozenge, {
     isNodeSelected: isNodeSelected,
     isNodeHovered: isNodeHovered,
@@ -214,7 +213,7 @@ function ExtensionWithPluginState(props) {
     "data-testid": "extension-content"
     // 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: extensionContentStyles
+    css: extensionContent
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: contentClassNames

package/dist/es2019/extensibility/ExtensionNodeWrapper.js

@@ -72,7 +72,9 @@ export const ExtensionNodeWrapper = ({
     relative: showMacroInteractionDesignUpdates
   });
   return jsx("span", {
+    "data-testId": "extension-node-wrapper"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
     className: wrapperClassNames,
     css: [styles, expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles]
   }, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE);

package/dist/es2019/extensibility/extensionNodeView.js

@@ -1,6 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { isSSR } from '../core-utils';
 import ReactNodeView from '../react-node-view';
 import { Extension } from './Extension';
 import { ExtensionNodeWrapper } from './ExtensionNodeWrapper';
@@ -10,6 +12,19 @@ import { ExtensionNodeWrapper } from './ExtensionNodeWrapper';
 // The ReactNodeView api will be visited in the second phase of the selections
 // project whilst investigating block nodes. We will revisit the Extension node view there too.
 export class ExtensionNode extends ReactNodeView {
+  constructor(...args) {
+    super(...args);
+    /**
+     * Track whether we found and are reusing SSR'd DOM.
+     * When true, we skip React Portal rendering on first init to preserve SSR content.
+     */
+    _defineProperty(this, "didReuseSsrDom", false);
+    /**
+     * Track whether this is the first init call.
+     * SSR content preservation only happens on the very first init.
+     */
+    _defineProperty(this, "isFirstInit", true);
+  }
   ignoreMutation(mutation) {
     // Extensions can perform async operations that will change the DOM.
     // To avoid having their tree rebuilt, we need to ignore the mutation
@@ -21,6 +36,15 @@ export class ExtensionNode extends ReactNodeView {
   // Reserve height by setting a minimum height for the extension node view element
   createDomRef() {
     if (!fg('confluence_connect_macro_preset_height')) {
+      // Try to reuse SSR'd DOM node on first init only
+      // This preserves SSR content and avoids TTVC mutations during hydration
+      if (!isSSR() && this.isFirstInit && this.node.type.name === 'extension' && this.node.attrs.extensionKey === 'toc' && expValEquals('platform_editor_hydration_skip_react_portal', 'isEnabled', true)) {
+        const ssrElement = this.findSSRElement();
+        if (ssrElement) {
+          this.didReuseSsrDom = true;
+          return ssrElement;
+        }
+      }
       return super.createDomRef();
     }
     if (!this.node.isInline) {
@@ -36,6 +60,74 @@ export class ExtensionNode extends ReactNodeView {
     return htmlElement;
   }
 
+  /**
+   * Cache for SSR element lookup to avoid repeated DOM queries.
+   * undefined = not yet searched, null = searched but not found, HTMLElement = found
+   */
+
+  /**
+   * Attempts to find an existing SSR'd DOM element for this extension node by extensionKey and localId
+   * which should uniquely identify the
+   * extension node within the editor content.
+   *
+   * @returns The SSR'd element if found, otherwise null
+   */
+  findSSRElement() {
+    if (this.cachedSsrElement !== undefined) {
+      return this.cachedSsrElement || null;
+    }
+    const extensionKey = this.node.attrs.extensionKey;
+    const localId = this.node.attrs.localId;
+    const editorDom = this.view.dom;
+    if (extensionKey && localId) {
+      const selector = `[extensionkey="${extensionKey}"][localid="${localId}"]`;
+      const element = editorDom.querySelector(selector);
+      if (element && element instanceof HTMLElement) {
+        this.cachedSsrElement = element;
+        return element;
+      }
+    }
+    this.cachedSsrElement = null;
+    return null;
+  }
+
+  /**
+   * Override init() to skip React Portal rendering on first init if we're reusing SSR'd DOM.
+   * This preserves the SSR content without React unnecessarily re-rendering it.
+   */
+  init() {
+    if (!expValEquals('platform_editor_hydration_skip_react_portal', 'isEnabled', true)) {
+      super.init();
+    } else {
+      if (!isSSR() && this.node.type.name === 'extension' && this.node.attrs.extensionKey === 'toc') {
+        const ssrElement = this.findSSRElement();
+        const shouldSkipInitRender = ssrElement !== null;
+        super.init(shouldSkipInitRender);
+        if (shouldSkipInitRender) {
+          this.isFirstInit = false;
+        }
+      } else {
+        super.init();
+      }
+    }
+    return this;
+  }
+  update(node, decorations, _innerDecorations, validUpdate = () => true) {
+    // Remove extensionNodeWrapper aka span.relative if we previously reused SSR DOM
+    // control is back to React afterwards
+    if (this.didReuseSsrDom && expValEquals('platform_editor_hydration_skip_react_portal', 'isEnabled', true)) {
+      const ssrElement = this.findSSRElement();
+      if (ssrElement) {
+        const extensionNodeWrapper = ssrElement.querySelector('[data-testId="extension-node-wrapper"]');
+        if (extensionNodeWrapper) {
+          extensionNodeWrapper.remove();
+        }
+        this.didReuseSsrDom = false;
+      }
+    }
+    return super.update(node, decorations, _innerDecorations, validUpdate);
+  }
+
   /**
    * When interacting with input elements inside an extension's body, the events
    * bubble up to the editor and get handled by it. This almost always gets in the way
@@ -55,6 +147,9 @@ export class ExtensionNode extends ReactNodeView {
     if (this.node.isInline) {
       return;
     }
+    if (this.didReuseSsrDom) {
+      return;
+    }
     const contentDomWrapper = document.createElement('div');
     contentDomWrapper.className = `${this.node.type.name}-content-dom-wrapper`;
     const isBodiedExtension = this.node.type.name === 'bodiedExtension';
@@ -80,6 +175,11 @@ export class ExtensionNode extends ReactNodeView {
   }
   render(props, forwardRef) {
     var _props$extensionNodeV;
+    // If we reused SSR'd DOM on first init, don't render React Portal
+    // The SSR content is already perfect and doesn't need re-rendering
+    if (this.didReuseSsrDom && this.isFirstInit) {
+      return null;
+    }
     return /*#__PURE__*/React.createElement(ExtensionNodeWrapper, {
       nodeType: this.node.type.name,
       macroInteractionDesignFeatureFlags: props.macroInteractionDesignFeatureFlags

package/dist/es2019/monitoring/error.js

@@ -4,7 +4,7 @@ import { isFedRamp } from './environment';
 import { normaliseSentryBreadcrumbs, SERIALIZABLE_ATTRIBUTES } from './normalise-sentry-breadcrumbs';
 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 = "112.18.0";
+const packageVersion = "112.18.2";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -51,7 +51,7 @@ export default class ReactNodeView {
    * constructor, which leads to some methods being undefined during the
    * first render.
    */
-  init() {
+  init(shouldSkipInitRender = false) {
     this.domRef = this.createDomRef();
     this.setDomAttrs(this.node, this.domRef);
     const {
@@ -80,7 +80,9 @@ export default class ReactNodeView {
     trackingEnabled && startMeasureReactNodeViewRendered({
       nodeTypeName: this.node.type.name
     });
-    this.renderReactComponent(() => this.render(this.reactComponentProps, this.handleRef));
+    if (!shouldSkipInitRender) {
+      this.renderReactComponent(() => this.render(this.reactComponentProps, this.handleRef));
+    }
     trackingEnabled && stopMeasureReactNodeViewRendered({
       nodeTypeName: this.node.type.name,
       dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,

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

@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "112.18.0";
+const packageVersion = "112.18.2";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

package/dist/esm/extensibility/Extension/Extension/index.js

@@ -23,7 +23,7 @@ import { shouldExtensionBreakout } from '../../utils/should-extension-breakout';
 import ExtensionLozenge from '../Lozenge';
 import { overlay } from '../styles';
 import { isEmptyBodiedMacro } from './extension-utils';
-import { content, contentWrapper, extensionContent, header, overflowWrapperStyles, widerLayoutClassName, wrapperStyleInheritedCursor } from './styles';
+import { contentWrapper, extensionContent, header, overflowWrapperStyles, widerLayoutClassName, wrapperStyleInheritedCursor } from './styles';
 var hoverStyles = css({
   '&:hover': {
     boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8C8F97)")
@@ -136,7 +136,6 @@ function ExtensionWithPluginState(props) {
       setIsNodeHovered(didHover);
     }
   };
-  var extensionContentStyles = expValEquals('platform_editor_extension_styles', 'isEnabled', true) ? extensionContent : content;
   return jsx(Fragment, null, !showLegacyContentHeader && showMacroInteractionDesignUpdates && !isLivePageViewMode && jsx(ExtensionLozenge, {
     isNodeSelected: isNodeSelected,
     isNodeHovered: isNodeHovered,
@@ -211,7 +210,7 @@ function ExtensionWithPluginState(props) {
     "data-testid": "extension-content"
     // 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: extensionContentStyles
+    css: extensionContent
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: contentClassNames

package/dist/esm/extensibility/ExtensionNodeWrapper.js

@@ -70,7 +70,9 @@ export var ExtensionNodeWrapper = function ExtensionNodeWrapper(_ref) {
     relative: showMacroInteractionDesignUpdates
   });
   return jsx("span", {
+    "data-testId": "extension-node-wrapper"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
     className: wrapperClassNames,
     css: [styles, expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles]
   }, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE);

package/dist/esm/extensibility/extensionNodeView.js

@@ -4,12 +4,14 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _get from "@babel/runtime/helpers/get";
 import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { isSSR } from '../core-utils';
 import ReactNodeView from '../react-node-view';
 import { Extension } from './Extension';
 import { ExtensionNodeWrapper } from './ExtensionNodeWrapper';
@@ -20,8 +22,23 @@ import { ExtensionNodeWrapper } from './ExtensionNodeWrapper';
 // project whilst investigating block nodes. We will revisit the Extension node view there too.
 export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
   function ExtensionNode() {
+    var _this;
     _classCallCheck(this, ExtensionNode);
-    return _callSuper(this, ExtensionNode, arguments);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ExtensionNode, [].concat(args));
+    /**
+     * Track whether we found and are reusing SSR'd DOM.
+     * When true, we skip React Portal rendering on first init to preserve SSR content.
+     */
+    _defineProperty(_this, "didReuseSsrDom", false);
+    /**
+     * Track whether this is the first init call.
+     * SSR content preservation only happens on the very first init.
+     */
+    _defineProperty(_this, "isFirstInit", true);
+    return _this;
   }
   _inherits(ExtensionNode, _ReactNodeView);
   return _createClass(ExtensionNode, [{
@@ -39,6 +56,15 @@ export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
     key: "createDomRef",
     value: function createDomRef() {
       if (!fg('confluence_connect_macro_preset_height')) {
+        // Try to reuse SSR'd DOM node on first init only
+        // This preserves SSR content and avoids TTVC mutations during hydration
+        if (!isSSR() && this.isFirstInit && this.node.type.name === 'extension' && this.node.attrs.extensionKey === 'toc' && expValEquals('platform_editor_hydration_skip_react_portal', 'isEnabled', true)) {
+          var ssrElement = this.findSSRElement();
+          if (ssrElement) {
+            this.didReuseSsrDom = true;
+            return ssrElement;
+          }
+        }
         return _superPropGet(ExtensionNode, "createDomRef", this, 3)([]);
       }
       if (!this.node.isInline) {
@@ -54,6 +80,83 @@ export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
       return htmlElement;
     }
 
+    /**
+     * Cache for SSR element lookup to avoid repeated DOM queries.
+     * undefined = not yet searched, null = searched but not found, HTMLElement = found
+     */
+  }, {
+    key: "findSSRElement",
+    value:
+    /**
+     * Attempts to find an existing SSR'd DOM element for this extension node by extensionKey and localId
+     * which should uniquely identify the
+     * extension node within the editor content.
+     *
+     * @returns The SSR'd element if found, otherwise null
+     */
+    function findSSRElement() {
+      if (this.cachedSsrElement !== undefined) {
+        return this.cachedSsrElement || null;
+      }
+      var extensionKey = this.node.attrs.extensionKey;
+      var localId = this.node.attrs.localId;
+      var editorDom = this.view.dom;
+      if (extensionKey && localId) {
+        var selector = "[extensionkey=\"".concat(extensionKey, "\"][localid=\"").concat(localId, "\"]");
+        var element = editorDom.querySelector(selector);
+        if (element && element instanceof HTMLElement) {
+          this.cachedSsrElement = element;
+          return element;
+        }
+      }
+      this.cachedSsrElement = null;
+      return null;
+    }
+
+    /**
+     * Override init() to skip React Portal rendering on first init if we're reusing SSR'd DOM.
+     * This preserves the SSR content without React unnecessarily re-rendering it.
+     */
+  }, {
+    key: "init",
+    value: function init() {
+      if (!expValEquals('platform_editor_hydration_skip_react_portal', 'isEnabled', true)) {
+        _superPropGet(ExtensionNode, "init", this, 3)([]);
+      } else {
+        if (!isSSR() && this.node.type.name === 'extension' && this.node.attrs.extensionKey === 'toc') {
+          var ssrElement = this.findSSRElement();
+          var shouldSkipInitRender = ssrElement !== null;
+          _superPropGet(ExtensionNode, "init", this, 3)([shouldSkipInitRender]);
+          if (shouldSkipInitRender) {
+            this.isFirstInit = false;
+          }
+        } else {
+          _superPropGet(ExtensionNode, "init", this, 3)([]);
+        }
+      }
+      return this;
+    }
+  }, {
+    key: "update",
+    value: function update(node, decorations, _innerDecorations) {
+      var validUpdate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : function () {
+        return true;
+      };
+      // Remove extensionNodeWrapper aka span.relative if we previously reused SSR DOM
+      // control is back to React afterwards
+      if (this.didReuseSsrDom && expValEquals('platform_editor_hydration_skip_react_portal', 'isEnabled', true)) {
+        var ssrElement = this.findSSRElement();
+        if (ssrElement) {
+          var extensionNodeWrapper = ssrElement.querySelector('[data-testId="extension-node-wrapper"]');
+          if (extensionNodeWrapper) {
+            extensionNodeWrapper.remove();
+          }
+          this.didReuseSsrDom = false;
+        }
+      }
+      return _superPropGet(ExtensionNode, "update", this, 3)([node, decorations, _innerDecorations, validUpdate]);
+    }
+
     /**
      * When interacting with input elements inside an extension's body, the events
      * bubble up to the editor and get handled by it. This almost always gets in the way
@@ -77,6 +180,9 @@ export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
       if (this.node.isInline) {
         return;
       }
+      if (this.didReuseSsrDom) {
+        return;
+      }
       var contentDomWrapper = document.createElement('div');
       contentDomWrapper.className = "".concat(this.node.type.name, "-content-dom-wrapper");
       var isBodiedExtension = this.node.type.name === 'bodiedExtension';
@@ -104,6 +210,11 @@ export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
     key: "render",
     value: function render(props, forwardRef) {
       var _props$extensionNodeV;
+      // If we reused SSR'd DOM on first init, don't render React Portal
+      // The SSR content is already perfect and doesn't need re-rendering
+      if (this.didReuseSsrDom && this.isFirstInit) {
+        return null;
+      }
       return /*#__PURE__*/React.createElement(ExtensionNodeWrapper, {
         nodeType: this.node.type.name,
         macroInteractionDesignFeatureFlags: props.macroInteractionDesignFeatureFlags

package/dist/esm/monitoring/error.js

@@ -10,7 +10,7 @@ import { isFedRamp } from './environment';
 import { normaliseSentryBreadcrumbs, SERIALIZABLE_ATTRIBUTES } from './normalise-sentry-breadcrumbs';
 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 = "112.18.0";
+var packageVersion = "112.18.2";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -61,6 +61,7 @@ var ReactNodeView = /*#__PURE__*/function () {
     key: "init",
     value: function init() {
       var _this2 = this;
+      var shouldSkipInitRender = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       this.domRef = this.createDomRef();
       this.setDomAttrs(this.node, this.domRef);
       var _ref = this.getContentDOM() || {
@@ -87,9 +88,11 @@ var ReactNodeView = /*#__PURE__*/function () {
       trackingEnabled && startMeasureReactNodeViewRendered({
         nodeTypeName: this.node.type.name
       });
-      this.renderReactComponent(function () {
-        return _this2.render(_this2.reactComponentProps, _this2.handleRef);
-      });
+      if (!shouldSkipInitRender) {
+        this.renderReactComponent(function () {
+          return _this2.render(_this2.reactComponentProps, _this2.handleRef);
+        });
+      }
       trackingEnabled && stopMeasureReactNodeViewRendered({
         nodeTypeName: this.node.type.name,
         dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,

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

@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "112.18.0";
+var packageVersion = "112.18.2";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = keyframes({

package/dist/types/analytics/types/ai-streaming.d.ts

@@ -15,11 +15,17 @@ type AIStreamingNoDocChangeAEP = OperationalAEP<ACTION.NO_DOC_CHANGE_FOUND, ACTI
 }>;
 type AIStreamingInvalidCommandAEP = OperationalAEP<ACTION.INVALID_COMMAND_FOUND, ACTION_SUBJECT.AI_STREAMING, ACTION_SUBJECT_ID.EXPERIENCE_APPLICATION, {
     ancestors?: string[];
+    anchorNodeType?: string;
+    destinationParentNodeType?: string;
     errorMessage?: string;
     errorStack?: string;
     fragments?: string[];
+    parentNodeType?: string;
     repaired: boolean;
+    sourceNodeType?: string;
+    sourceParentNodeType?: string;
     success: boolean;
+    validationReason?: string;
 }>;
 type AIStreamingUpdateStreamError = OperationalAEP<ACTION.ERRORED, ACTION_SUBJECT.AI_STREAMING, ACTION_SUBJECT_ID.UPDATE_STREAM, {
     docSize: number;

package/dist/types/extensibility/extensionNodeView.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import type { Decoration, DecorationSource, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { EventDispatcher } from '../event-dispatcher';
 import type { ExtensionHandlers } from '../extensions';
 import type { PortalProviderAPI } from '../portal';
@@ -25,11 +25,40 @@ interface ReactExtensionNodeProps {
     showUpdatedLivePages1PBodiedExtensionUI?: (node: ADFEntity) => boolean;
 }
 export declare class ExtensionNode<AdditionalParams = unknown> extends ReactNodeView<ReactExtensionNodeProps & AdditionalParams> {
+    /**
+     * Track whether we found and are reusing SSR'd DOM.
+     * When true, we skip React Portal rendering on first init to preserve SSR content.
+     */
+    private didReuseSsrDom;
+    /**
+     * Track whether this is the first init call.
+     * SSR content preservation only happens on the very first init.
+     */
+    private isFirstInit;
     ignoreMutation(mutation: MutationRecord | {
         target: Node;
         type: 'selection';
     }): boolean;
     createDomRef(): HTMLElement;
+    /**
+     * Cache for SSR element lookup to avoid repeated DOM queries.
+     * undefined = not yet searched, null = searched but not found, HTMLElement = found
+     */
+    private cachedSsrElement;
+    /**
+     * Attempts to find an existing SSR'd DOM element for this extension node by extensionKey and localId
+     * which should uniquely identify the
+     * extension node within the editor content.
+     *
+     * @returns The SSR'd element if found, otherwise null
+     */
+    private findSSRElement;
+    /**
+     * Override init() to skip React Portal rendering on first init if we're reusing SSR'd DOM.
+     * This preserves the SSR content without React unnecessarily re-rendering it.
+     */
+    init(): this;
+    update(node: PmNode, decorations: ReadonlyArray<Decoration>, _innerDecorations?: DecorationSource, validUpdate?: (currentNode: PmNode, newNode: PmNode) => boolean): boolean;
     /**
      * When interacting with input elements inside an extension's body, the events
      * bubble up to the editor and get handled by it. This almost always gets in the way

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

@@ -32,7 +32,7 @@ export default class ReactNodeView<P = ReactComponentProps> implements NodeView
      * constructor, which leads to some methods being undefined during the
      * first render.
      */
-    init(): this;
+    init(shouldSkipInitRender?: boolean): this;
     private renderReactComponent;
     createDomRef(): HTMLElement;
     getContentDOM(): {

package/dist/types-ts4.5/analytics/types/ai-streaming.d.ts

@@ -15,11 +15,17 @@ type AIStreamingNoDocChangeAEP = OperationalAEP<ACTION.NO_DOC_CHANGE_FOUND, ACTI
 }>;
 type AIStreamingInvalidCommandAEP = OperationalAEP<ACTION.INVALID_COMMAND_FOUND, ACTION_SUBJECT.AI_STREAMING, ACTION_SUBJECT_ID.EXPERIENCE_APPLICATION, {
     ancestors?: string[];
+    anchorNodeType?: string;
+    destinationParentNodeType?: string;
     errorMessage?: string;
     errorStack?: string;
     fragments?: string[];
+    parentNodeType?: string;
     repaired: boolean;
+    sourceNodeType?: string;
+    sourceParentNodeType?: string;
     success: boolean;
+    validationReason?: string;
 }>;
 type AIStreamingUpdateStreamError = OperationalAEP<ACTION.ERRORED, ACTION_SUBJECT.AI_STREAMING, ACTION_SUBJECT_ID.UPDATE_STREAM, {
     docSize: number;

package/dist/types-ts4.5/extensibility/extensionNodeView.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import type { Decoration, DecorationSource, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { EventDispatcher } from '../event-dispatcher';
 import type { ExtensionHandlers } from '../extensions';
 import type { PortalProviderAPI } from '../portal';
@@ -25,11 +25,40 @@ interface ReactExtensionNodeProps {
     showUpdatedLivePages1PBodiedExtensionUI?: (node: ADFEntity) => boolean;
 }
 export declare class ExtensionNode<AdditionalParams = unknown> extends ReactNodeView<ReactExtensionNodeProps & AdditionalParams> {
+    /**
+     * Track whether we found and are reusing SSR'd DOM.
+     * When true, we skip React Portal rendering on first init to preserve SSR content.
+     */
+    private didReuseSsrDom;
+    /**
+     * Track whether this is the first init call.
+     * SSR content preservation only happens on the very first init.
+     */
+    private isFirstInit;
     ignoreMutation(mutation: MutationRecord | {
         target: Node;
         type: 'selection';
     }): boolean;
     createDomRef(): HTMLElement;
+    /**
+     * Cache for SSR element lookup to avoid repeated DOM queries.
+     * undefined = not yet searched, null = searched but not found, HTMLElement = found
+     */
+    private cachedSsrElement;
+    /**
+     * Attempts to find an existing SSR'd DOM element for this extension node by extensionKey and localId
+     * which should uniquely identify the
+     * extension node within the editor content.
+     *
+     * @returns The SSR'd element if found, otherwise null
+     */
+    private findSSRElement;
+    /**
+     * Override init() to skip React Portal rendering on first init if we're reusing SSR'd DOM.
+     * This preserves the SSR content without React unnecessarily re-rendering it.
+     */
+    init(): this;
+    update(node: PmNode, decorations: ReadonlyArray<Decoration>, _innerDecorations?: DecorationSource, validUpdate?: (currentNode: PmNode, newNode: PmNode) => boolean): boolean;
     /**
      * When interacting with input elements inside an extension's body, the events
      * bubble up to the editor and get handled by it. This almost always gets in the way

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

@@ -32,7 +32,7 @@ export default class ReactNodeView<P = ReactComponentProps> implements NodeView
      * constructor, which leads to some methods being undefined during the
      * first render.
      */
-    init(): this;
+    init(shouldSkipInitRender?: boolean): this;
     private renderReactComponent;
     createDomRef(): HTMLElement;
     getContentDOM(): {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "112.18.1",
+	"version": "112.18.3",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,9 +36,9 @@
 		"@atlaskit/analytics-listeners": "^10.0.0",
 		"@atlaskit/analytics-namespaced-context": "^7.2.0",
 		"@atlaskit/analytics-next": "^11.2.0",
-		"@atlaskit/atlassian-context": "^0.7.0",
+		"@atlaskit/atlassian-context": "^0.8.0",
 		"@atlaskit/browser-apis": "^0.0.1",
-		"@atlaskit/button": "^23.10.0",
+		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/custom-steps": "^0.16.0",
@@ -53,7 +53,7 @@
 		"@atlaskit/emoji": "^69.10.0",
 		"@atlaskit/icon": "^34.0.0",
 		"@atlaskit/icon-object": "^7.5.0",
-		"@atlaskit/link": "^3.3.0",
+		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/link-datasource": "^4.34.0",
 		"@atlaskit/link-picker": "^4.2.0",
 		"@atlaskit/media-card": "^79.16.0",
@@ -70,16 +70,16 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/primitives": "^18.1.0",
-		"@atlaskit/profilecard": "^24.47.0",
+		"@atlaskit/profilecard": "^24.48.0",
 		"@atlaskit/prosemirror-history": "^0.2.0",
 		"@atlaskit/react-ufo": "^5.11.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/smart-card": "^43.31.0",
 		"@atlaskit/smart-user-picker": "^9.2.0",
-		"@atlaskit/spinner": "^19.0.0",
+		"@atlaskit/spinner": "^19.1.0",
 		"@atlaskit/task-decision": "^19.3.0",
-		"@atlaskit/textfield": "^8.2.0",
-		"@atlaskit/tmp-editor-statsig": "^54.4.0",
+		"@atlaskit/textfield": "^8.3.0",
+		"@atlaskit/tmp-editor-statsig": "^55.0.0",
 		"@atlaskit/tokens": "^11.4.0",
 		"@atlaskit/tooltip": "^21.1.0",
 		"@atlaskit/width-detector": "^5.0.0",