@atlaskit/renderer 137.1.8 → 137.1.10

package/dist/cjs/ui/Expand.js

@@ -17,7 +17,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
 var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
-var _expandBody = require("./expand-body");
+var _expandBody = require("./utils/expand-body");
 var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
 var _reactIntl = require("react-intl");
 var _events = require("../analytics/events");
@@ -219,6 +219,7 @@ function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
   });
 }
 function Expand(_ref) {
+  var _ancestorBody$reveale;
   var title = _ref.title,
     children = _ref.children,
     nodeType = _ref.nodeType,
@@ -229,7 +230,25 @@ function Expand(_ref) {
     rendererContentMode = _ref.rendererContentMode,
     node = _ref.node;
   var ancestorBody = (0, _expandBody.useExpandBody)();
-  var _useState = (0, _react2.useState)(false),
+
+  // Shared with every expand in the chain: the element that stood in for this expand and caught the
+  // find sits under an expand further out, and by the time this one mounts that element is gone.
+  //
+  // Built on first render rather than passed to `useRef`, which would evaluate and discard a new set
+  // on every render for the life of the expand.
+  var ownRevealedByFind = (0, _react2.useRef)(null);
+  if (!ownRevealedByFind.current) {
+    ownRevealedByFind.current = new WeakSet();
+  }
+  var revealedByFind = (_ancestorBody$reveale = ancestorBody === null || ancestorBody === void 0 ? void 0 : ancestorBody.revealedByFind) !== null && _ancestorBody$reveale !== void 0 ? _ancestorBody$reveale : ownRevealedByFind.current;
+  /**
+   * Browser find matched inside this expand while the expand above it was still collapsed, so it
+   * opens as soon as it mounts — otherwise the reader would watch the outer expand open onto a
+   * closed one, with the match nowhere to be seen. Empty on the server and on the first client
+   * render, so hydration cannot disagree; only a find on the client ever puts anything in it.
+   */
+  var revealedByFindOnMount = node !== undefined && revealedByFind.has(node);
+  var _useState = (0, _react2.useState)(revealedByFindOnMount),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     expanded = _useState2[0],
     setExpanded = _useState2[1];
@@ -242,9 +261,9 @@ function Expand(_ref) {
    * Throwing it away would re-run every macro and Forge fetch inside it on the next open, which is
    * slower and visibly reloads content the reader has already seen. We only wanted to save work on
    * the first page load, and by now that has happened. Starts false on both the server and the
-   * client, so hydration cannot disagree.
+   * first client render, so hydration cannot disagree.
    */
-  var _useState5 = (0, _react2.useState)(false),
+  var _useState5 = (0, _react2.useState)(revealedByFindOnMount),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     hasBeenExpanded = _useState6[0],
     setHasBeenExpanded = _useState6[1];
@@ -270,9 +289,15 @@ function Expand(_ref) {
   // inside other expands, those have to open too or the reader still cannot see it. Each expand
   // asks the one above it, so a single match opens the whole chain and nothing else.
   var openWithAncestors = (0, _react2.useCallback)(function () {
+    // Remembered before anything opens: a block above this expand may have been standing in for
+    // itself, and rendering it rebuilds this expand. Without this it would come back closed over
+    // the match the reader was just taken to.
+    if (node) {
+      revealedByFind.add(node);
+    }
     openBody();
     ancestorBody === null || ancestorBody === void 0 || ancestorBody.openWithAncestors();
-  }, [ancestorBody, openBody]);
+  }, [ancestorBody, node, openBody, revealedByFind]);
 
   // Feature-detect hidden="until-found" support via the beforematch event. Chrome 102+,
   // Firefox 139+ and Safari 26.2+ all have it; in a browser without it, hidden="until-found" is
@@ -354,9 +379,10 @@ function Expand(_ref) {
   var expandBody = (0, _react2.useMemo)(function () {
     return {
       revealed: revealed,
-      openWithAncestors: openWithAncestors
+      openWithAncestors: openWithAncestors,
+      revealedByFind: revealedByFind
     };
-  }, [revealed, openWithAncestors]);
+  }, [revealed, openWithAncestors, revealedByFind]);
   return (0, _react.jsx)(Container, {
     "data-testid": "expand-container-".concat(nodeType, "-").concat(id),
     "data-node-type": nodeType,

package/dist/cjs/ui/Renderer/breakout-ssr.js

@@ -37,7 +37,7 @@ function BreakoutSSRInlineScript(_ref) {
   }
   var id = Math.floor(Math.random() * (9999999999 - 9999 + 1)) + 9999;
   var shouldSkipScript = {
-    table: (0, _fg.fg)('platform-ssr-table-resize')
+    table: true
   };
   return /*#__PURE__*/_react.default.createElement("script", {
     "data-breakout-script-id": id
@@ -96,7 +96,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript, fla
         return;
       }
 
-      // Remove with feature gate 'platform-ssr-table-resize'
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       if (item.target.classList.contains('ak-renderer-document')) {

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

@@ -74,7 +74,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.1;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "137.1.7";
+var packageVersion = "137.1.9";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -784,7 +784,7 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
   //
 
   // allowRendererContainerStyles is not needed for comment container styling as container should always be set for comments
-  if (appearance === 'comment' && isTopLevelRenderer && (0, _fg.fg)('platform-ssr-table-resize')) {
+  if (appearance === 'comment' && isTopLevelRenderer) {
     return (0, _react2.jsx)("div", {
       css: setAsQueryContainerStyles
     }, renderer);
@@ -797,7 +797,7 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
   return (appearance === 'full-page' || appearance === 'full-width' || ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) && appearance === 'max') &&
   // In case of having excerpt-include on page there are multiple renderers nested.
   // Make sure only the root renderer is set to be query container.
-  isTopLevelRenderer && allowRendererContainerStyles && (0, _fg.fg)('platform-ssr-table-resize') ? (0, _react2.jsx)("div", {
+  isTopLevelRenderer && allowRendererContainerStyles ? (0, _react2.jsx)("div", {
     css: setAsQueryContainerStyles
   }, renderer) : renderer;
 });

package/dist/cjs/ui/utils/expand-body.js

@@ -0,0 +1,218 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withExpandBodyBlock = exports.useExpandBody = exports.mergeExpandBodyText = exports.ExpandBodyTable = exports.ExpandBodyProvider = exports.ExpandBodyBlock = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _expandSearchText = require("./expand-search-text");
+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 ExpandBodyContext = /*#__PURE__*/(0, _react.createContext)(null);
+var ExpandBodyProvider = exports.ExpandBodyProvider = ExpandBodyContext.Provider;
+var useExpandBody = exports.useExpandBody = function useExpandBody() {
+  return (0, _react.useContext)(ExpandBodyContext);
+};
+/**
+ * One or more neighbouring blocks of an expand's body. Shows their text until the expand is
+ * opened, then renders them. Falls back to rendering if there is no text, or if there is no
+ * expand above it.
+ *
+ * The text is rendered as-is, with no element around it. Nothing reads it but browser find,
+ * which only needs the characters to be in the DOM.
+ */
+var ExpandBodyBlock = exports.ExpandBodyBlock = function ExpandBodyBlock(_ref) {
+  var children = _ref.children,
+    searchText = _ref.searchText;
+  var body = useExpandBody();
+  if (searchText === undefined || body === null || body.revealed) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  }
+  return searchText;
+};
+
+/**
+ * Called for every node the serializer renders. If the node is a block of an expand's body,
+ * wraps it so it can show its text instead of rendering while that expand is collapsed.
+ * Everything else is returned untouched.
+ *
+ * A block holding an expand of its own is returned untouched, because standing in for the whole
+ * block would take that expand with it, and the expand needs an element of its own: the element
+ * browser find reveals is the only way we learn the match was inside it rather than higher up. A
+ * table is handed to `ExpandBodyTable`, which stands in for its own rows and keeps only the rows
+ * that hold an expand. Everything else — a panel, a list, an extension with stashed ADF — renders
+ * in full, so the reader searches once instead of once per level.
+ *
+ * `ancestors` is the node's ancestor chain, nearest last.
+ */
+var withExpandBodyBlock = exports.withExpandBodyBlock = function withExpandBodyBlock(node, ancestors, index, serialized) {
+  var parent = ancestors[ancestors.length - 1];
+  if (!parent || !(0, _expandSearchText.isExpandNode)(parent)) {
+    return serialized;
+  }
+  if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_defer_collapsed_expand_body')) {
+    return serialized;
+  }
+
+  // `serialized` is only null for a node the renderer has no component for, which a table is not.
+  // Such a table falls through to the paths below, which do not reach into it.
+  if (node.type.name === 'table' && serialized !== null) {
+    var parts = (0, _expandSearchText.getTableStandInParts)(node);
+
+    // With no row to keep, one string can stand in for the whole table — the table then renders
+    // nothing at all, and its text joins with the blocks either side of it.
+    return parts.every(function (part) {
+      return typeof part === 'string';
+    }) ? /*#__PURE__*/_react.default.createElement(ExpandBodyBlock, {
+      key: "expand-body-block-".concat(index),
+      searchText: parts.join('')
+    }, serialized) : /*#__PURE__*/_react.default.createElement(ExpandBodyTable, {
+      key: "expand-body-table-".concat(index),
+      node: node
+    }, serialized);
+  }
+  if ((0, _expandSearchText.holdsRevealableContent)(node)) {
+    return serialized;
+  }
+  var searchText = (0, _expandSearchText.getBlockSearchText)(node);
+  if (searchText === undefined) {
+    return serialized;
+  }
+  return /*#__PURE__*/_react.default.createElement(ExpandBodyBlock, {
+    key: "expand-body-block-".concat(index),
+    searchText: searchText
+  }, serialized);
+};
+var isRow = function isRow(child) {
+  return /*#__PURE__*/(0, _react.isValidElement)(child) && child.props.nodeType === 'tableRow';
+};
+
+/**
+ * The rows inside the serialized table, wherever they sit.
+ *
+ * What the serializer hands over is not reliably the element whose children are the rows. Marks are
+ * folded around the node afterwards, and a product's own serializer may wrap the rows themselves —
+ * Confluence's progressive renderer wraps every row but the first. Assuming either a depth or a set
+ * of direct children means any wrapper added later silently costs the saving, so the rows are found
+ * instead by the `nodeType` the serializer puts on every node.
+ *
+ * Descent stops at each row: a nested table's rows sit inside a row of this one, and would
+ * otherwise be counted among them.
+ *
+ * The count is only a consistency check. `getTableStandInParts` indexes the rows by position, so a
+ * partial match cannot be lined up and the table has to render instead.
+ */
+var rowsOf = function rowsOf(serialized, rowCount) {
+  var rows = [];
+  var _collect = function collect(node) {
+    _react.default.Children.toArray(node).forEach(function (child) {
+      if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
+        return;
+      }
+      if (isRow(child)) {
+        rows.push(child);
+        return;
+      }
+      _collect(child.props.children);
+    });
+  };
+  _collect(serialized);
+  return rows.length === rowCount ? rows : undefined;
+};
+
+/**
+ * A table in the body of a collapsed expand. Shows the text of its rows until the expand is opened,
+ * keeping the rows that hold an expand of their own — those need an element for find to reveal.
+ *
+ * Standing in for the whole table, the way an ordinary block does, would take that expand with it.
+ */
+var ExpandBodyTable = exports.ExpandBodyTable = function ExpandBodyTable(_ref2) {
+  var children = _ref2.children,
+    node = _ref2.node;
+  var body = useExpandBody();
+  if (body === null || body.revealed) {
+    return children;
+  }
+  var rows = rowsOf(children, node.childCount);
+  if (!rows) {
+    // Nothing is wrong: the table renders as it always did, only without the saving. Still worth
+    // saying, because a silent fallback looks exactly like the feature being switched off.
+    // Every environment but production says it: a wrapper added by a product is only ever seen
+    // once that product has deployed, which a `NODE_ENV` check never reaches.
+    if (process.env.CLOUD_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.info('@atlaskit/renderer: the rows of a table in a collapsed expand were not found, so the table renders in full rather than showing their text');
+    }
+    return children;
+  }
+  return (0, _expandSearchText.getTableStandInParts)(node).map(function (part) {
+    return typeof part === 'string' ? part :
+    /*#__PURE__*/
+    // A row cannot stand in the page on its own — `<tr>` is only valid inside a table — so it
+    // keeps the least table around it that makes the markup valid. None of this is laid out: the
+    // body is hidden until the reader or find opens the expand, and opening it renders the real
+    // table in place of all this.
+    _react.default.createElement("table", {
+      key: "expand-body-row-".concat(part)
+    }, /*#__PURE__*/_react.default.createElement("tbody", null, rows[part]));
+  });
+};
+
+/** Whatever the serializer produced for one child: an element, a string, an array of either. */
+
+var searchTextOf = function searchTextOf(child) {
+  return /*#__PURE__*/(0, _react.isValidElement)(child) && child.type === ExpandBodyBlock ? child.props.searchText : undefined;
+};
+
+/**
+ * Joins neighbouring blocks that are showing text into one, so a run of them is a single string in
+ * the DOM rather than one per block. A body of twenty paragraphs becomes one text node instead of
+ * twenty.
+ *
+ * A block that is being rendered — a nested expand, say — ends the run, because the text either
+ * side of it has to stay either side of it.
+ */
+var mergeExpandBodyText = exports.mergeExpandBodyText = function mergeExpandBodyText(children) {
+  // Called for every fragment in the document, and only an expand's body has anything to merge, so
+  // leave the array alone unless two neighbours are actually showing text.
+  var hasRun = children.some(function (child, index) {
+    return index > 0 && searchTextOf(child) !== undefined && searchTextOf(children[index - 1]) !== undefined;
+  });
+  if (!hasRun) {
+    return children;
+  }
+  var merged = [];
+  var run = [];
+  var endRun = function endRun() {
+    if (run.length === 0) {
+      return;
+    }
+    if (run.length === 1) {
+      merged.push(run[0]);
+    } else {
+      var _key;
+      var text = run.map(searchTextOf).filter(Boolean).join(_expandSearchText.BLOCK_SEPARATOR);
+      // The blocks themselves, not the wrappers around them: nesting the wrappers would show
+      // each block's text again inside the joined run.
+      var blocks = run.map(function (child) {
+        return child.props.children;
+      });
+      merged.push( /*#__PURE__*/_react.default.createElement(ExpandBodyBlock, {
+        key: (_key = run[0].key) !== null && _key !== void 0 ? _key : undefined,
+        searchText: text
+      }, blocks));
+    }
+    run = [];
+  };
+  children.forEach(function (child) {
+    if (searchTextOf(child) === undefined) {
+      endRun();
+      merged.push(child);
+      return;
+    }
+    run.push(child);
+  });
+  endRun();
+  return merged;
+};

package/dist/cjs/ui/utils/expand-search-text.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isExpandNode = exports.holdsRevealableContent = exports.getBlockSearchText = exports.BLOCK_SEPARATOR = void 0;
+exports.isExpandNode = exports.holdsRevealableContent = exports.getTableStandInParts = exports.getBlockSearchText = exports.BLOCK_SEPARATOR = void 0;
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 /**
  * Minimal structural view of an ADF entity. `parameters.nestedContent` holds raw ADF JSON rather
@@ -135,4 +135,42 @@ var getBlockSearchText = exports.getBlockSearchText = function getBlockSearchTex
     searchTextCache.set(node, cached);
   }
   return cached !== null && cached !== void 0 ? cached : undefined;
+};
+
+/**
+ * One piece of what a collapsed table shows: either the text of the rows being stood in for, or the
+ * index of a row that has to keep rendering.
+ */
+
+var tableStandInCache = new WeakMap();
+
+/**
+ * What a table inside a collapsed expand shows in place of rendering, in table order so that find
+ * walks it the way the reader reads it.
+ *
+ * A row keeps rendering when it holds an expand of its own, which needs a real element for browser
+ * find to reveal, or when its text carries an inline comment. Its text is left out of the runs
+ * either side of it, since the row itself puts that text in the DOM.
+ */
+var getTableStandInParts = exports.getTableStandInParts = function getTableStandInParts(table) {
+  var cached = tableStandInCache.get(table);
+  if (cached !== undefined) {
+    return cached;
+  }
+  var parts = [];
+  table.forEach(function (row, _offset, index) {
+    var text = holdsRevealableContent(row) ? undefined : getBlockSearchText(row);
+    if (text === undefined) {
+      parts.push(index);
+      return;
+    }
+    var last = parts[parts.length - 1];
+    if (typeof last === 'string') {
+      parts[parts.length - 1] = "".concat(last).concat(BLOCK_SEPARATOR).concat(text);
+      return;
+    }
+    parts.push(text);
+  });
+  tableStandInCache.set(table, parts);
+  return parts;
 };

package/dist/es2019/react/index.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { MarkType } from '@atlaskit/editor-prosemirror/model';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { mergeExpandBodyText, withExpandBodyBlock } from '../ui/expand-body';
+import { mergeExpandBodyText, withExpandBodyBlock } from '../ui/utils/expand-body';
 import { Doc, DocWithSelectAllTrap, isTextNode, isTextWrapper, mergeTextNodes, toReact } from './nodes';
 import TextWrapperComponent from './nodes/text-wrapper';
 import { isNestedHeaderLinksEnabled } from './utils/links';

package/dist/es2019/react/nodes/table/colgroup.js

@@ -259,11 +259,10 @@ const renderScaleDownColgroup = props => {
   }
   // scaling down
   else if (renderWidth < tableWidth && !isTableWidthFixed) {
-    const shouldTable100ScaleDown = rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width);
     scaleDownPercent = calcScalePercent({
       renderWidth,
       tableWidth,
-      maxScale: fg('platform-ssr-table-resize') ? maxScalingPercent : shouldTable100ScaleDown ? 1 : maxScalingPercent,
+      maxScale: maxScalingPercent,
       isNumberColumnEnabled: isNumberColumnEnabled
     });
   }

package/dist/es2019/react/nodes/table/sticky.js

@@ -123,7 +123,6 @@ export const StickyTable = ({
   tableNode,
   rendererAppearance,
   allowTableResizing,
-  fixTableSSRResizing = false,
   allowFixedColumnWidthOption
 }) => {
   let styles;
@@ -160,7 +159,7 @@ export const StickyTable = ({
       style: {
         width: tableWidth,
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        marginBottom: fixTableSSRResizing ? 0 : ''
+        marginBottom: 0
       }
     }, jsx("div", {
       ref: innerRef
@@ -178,7 +177,7 @@ export const StickyTable = ({
       renderWidth: renderWidth,
       tableNode: tableNode,
       rendererAppearance: rendererAppearance,
-      fixTableSSRResizing: fixTableSSRResizing,
+      fixTableSSRResizing: true,
       allowFixedColumnWidthOption: allowFixedColumnWidthOption
     },
     /**

package/dist/es2019/react/nodes/table/table.js

@@ -31,21 +31,10 @@ export const Table = /*#__PURE__*/React.memo(({
   if (rendererAppearance === 'comment' && allowTableResizing && tableNode && !((_tableNode$attrs = tableNode.attrs) !== null && _tableNode$attrs !== void 0 && _tableNode$attrs.width)) {
     tableWidth = 'inherit';
   }
-  if (rendererAppearance === 'comment' && !allowTableResizing) {
-    // in the case we have css container stylings,
-    // we don't need to calculate width here as this
-    // is done via css
-    if (!fg('platform-ssr-table-resize')) {
-      tableWidth = renderWidth;
-    }
-  }
-
   // for columns that are evenly distributed, do not return `colgroup` since existing table containerQuery
   // scales up the columns width. This ensures columns always have 42px.
   if (rendererAppearance === 'comment') {
-    if (fg('platform-ssr-table-resize')) {
-      tableColumnWidths = columnWidths && colWidthSum(columnWidths) ? columnWidths : undefined;
-    }
+    tableColumnWidths = columnWidths && colWidthSum(columnWidths) ? columnWidths : undefined;
   }
   const tableLayout = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout;
   const tableDisplayMode = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.displayMode;