@atlaskit/renderer 137.1.8 → 137.1.10

package/dist/es2019/ui/Expand.js

@@ -13,7 +13,7 @@ import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset } fr
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
-import { ExpandBodyProvider, useExpandBody } from './expand-body';
+import { ExpandBodyProvider, useExpandBody } from './utils/expand-body';
 import _uniqueId from 'lodash/uniqueId';
 import { injectIntl } from 'react-intl';
 import { MODE, PLATFORM } from '../analytics/events';
@@ -220,17 +220,36 @@ function Expand({
   rendererContentMode,
   node
 }) {
+  var _ancestorBody$reveale;
   const ancestorBody = useExpandBody();
-  const [expanded, setExpanded] = 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.
+  const ownRevealedByFind = useRef(null);
+  if (!ownRevealedByFind.current) {
+    ownRevealedByFind.current = new WeakSet();
+  }
+  const 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.
+   */
+  const revealedByFindOnMount = node !== undefined && revealedByFind.has(node);
+  const [expanded, setExpanded] = useState(revealedByFindOnMount);
   const [focused, setFocused] = useState(false);
   /**
    * PGXT-9021: once opened, the body stays rendered even if the reader closes the expand again.
    * 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.
    */
-  const [hasBeenExpanded, setHasBeenExpanded] = useState(false);
+  const [hasBeenExpanded, setHasBeenExpanded] = useState(revealedByFindOnMount);
   const isMobile = false;
   const label = intl.formatMessage(expanded ? expandMessages.collapseNode : expandMessages.expandNode);
   const {
@@ -250,9 +269,15 @@ function Expand({
   // 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.
   const openWithAncestors = useCallback(() => {
+    // 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 ? 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
@@ -330,8 +355,9 @@ function Expand({
   const revealed = expanded || hasBeenExpanded || !node || supportsHiddenUntilFound === false || !isExperimentEnabled('platform_editor_defer_collapsed_expand_body');
   const expandBody = useMemo(() => ({
     revealed,
-    openWithAncestors
-  }), [revealed, openWithAncestors]);
+    openWithAncestors,
+    revealedByFind
+  }), [revealed, openWithAncestors, revealedByFind]);
   return jsx(Container, {
     "data-testid": `expand-container-${nodeType}-${id}`,
     "data-node-type": nodeType,

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

@@ -28,7 +28,7 @@ export function BreakoutSSRInlineScript({
   }
   const id = Math.floor(Math.random() * (9999999999 - 9999 + 1)) + 9999;
   const shouldSkipScript = {
-    table: fg('platform-ssr-table-resize')
+    table: true
   };
   return /*#__PURE__*/React.createElement("script", {
     "data-breakout-script-id": id
@@ -100,7 +100,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/es2019/ui/Renderer/index.js

@@ -60,7 +60,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.1;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "137.1.7";
+const packageVersion = "137.1.9";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -776,7 +776,7 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
   //
 
   // allowRendererContainerStyles is not needed for comment container styling as container should always be set for comments
-  if (appearance === 'comment' && isTopLevelRenderer && fg('platform-ssr-table-resize')) {
+  if (appearance === 'comment' && isTopLevelRenderer) {
     return jsx("div", {
       css: setAsQueryContainerStyles
     }, renderer);
@@ -789,7 +789,7 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
   return (appearance === 'full-page' || appearance === 'full-width' || (expValEqualsNoExposure('editor_tinymce_full_width_mode', 'isEnabled', true) || 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 && fg('platform-ssr-table-resize') ? jsx("div", {
+  isTopLevelRenderer && allowRendererContainerStyles ? jsx("div", {
     css: setAsQueryContainerStyles
   }, renderer) : renderer;
 });

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

@@ -0,0 +1,198 @@
+import React, { createContext, isValidElement, useContext } from 'react';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { BLOCK_SEPARATOR, getBlockSearchText, getTableStandInParts, holdsRevealableContent, isExpandNode } from './expand-search-text';
+const ExpandBodyContext = /*#__PURE__*/createContext(null);
+export const ExpandBodyProvider = ExpandBodyContext.Provider;
+export const useExpandBody = () => 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.
+ */
+export const ExpandBodyBlock = ({
+  children,
+  searchText
+}) => {
+  const body = useExpandBody();
+  if (searchText === undefined || body === null || body.revealed) {
+    return /*#__PURE__*/React.createElement(React.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.
+ */
+export const withExpandBodyBlock = (node, ancestors, index, serialized) => {
+  const parent = ancestors[ancestors.length - 1];
+  if (!parent || !isExpandNode(parent)) {
+    return serialized;
+  }
+  if (!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) {
+    const parts = 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(part => typeof part === 'string') ? /*#__PURE__*/React.createElement(ExpandBodyBlock, {
+      key: `expand-body-block-${index}`,
+      searchText: parts.join('')
+    }, serialized) : /*#__PURE__*/React.createElement(ExpandBodyTable, {
+      key: `expand-body-table-${index}`,
+      node: node
+    }, serialized);
+  }
+  if (holdsRevealableContent(node)) {
+    return serialized;
+  }
+  const searchText = getBlockSearchText(node);
+  if (searchText === undefined) {
+    return serialized;
+  }
+  return /*#__PURE__*/React.createElement(ExpandBodyBlock, {
+    key: `expand-body-block-${index}`,
+    searchText: searchText
+  }, serialized);
+};
+const isRow = child => /*#__PURE__*/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.
+ */
+const rowsOf = (serialized, rowCount) => {
+  const rows = [];
+  const collect = node => {
+    React.Children.toArray(node).forEach(child => {
+      if (! /*#__PURE__*/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.
+ */
+export const ExpandBodyTable = ({
+  children,
+  node
+}) => {
+  const body = useExpandBody();
+  if (body === null || body.revealed) {
+    return children;
+  }
+  const 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 getTableStandInParts(node).map(part => 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.createElement("table", {
+    key: `expand-body-row-${part}`
+  }, /*#__PURE__*/React.createElement("tbody", null, rows[part])));
+};
+
+/** Whatever the serializer produced for one child: an element, a string, an array of either. */
+
+const searchTextOf = child => /*#__PURE__*/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.
+ */
+export const 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.
+  const hasRun = children.some((child, index) => index > 0 && searchTextOf(child) !== undefined && searchTextOf(children[index - 1]) !== undefined);
+  if (!hasRun) {
+    return children;
+  }
+  const merged = [];
+  let run = [];
+  const endRun = () => {
+    if (run.length === 0) {
+      return;
+    }
+    if (run.length === 1) {
+      merged.push(run[0]);
+    } else {
+      var _key;
+      const text = run.map(searchTextOf).filter(Boolean).join(BLOCK_SEPARATOR);
+      // The blocks themselves, not the wrappers around them: nesting the wrappers would show
+      // each block's text again inside the joined run.
+      const blocks = run.map(child => child.props.children);
+      merged.push( /*#__PURE__*/React.createElement(ExpandBodyBlock, {
+        key: (_key = run[0].key) !== null && _key !== void 0 ? _key : undefined,
+        searchText: text
+      }, blocks));
+    }
+    run = [];
+  };
+  children.forEach(child => {
+    if (searchTextOf(child) === undefined) {
+      endRun();
+      merged.push(child);
+      return;
+    }
+    run.push(child);
+  });
+  endRun();
+  return merged;
+};

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

@@ -117,4 +117,42 @@ export const getBlockSearchText = node => {
     searchTextCache.set(node, cached);
   }
   return (_cached = 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.
+ */
+
+const 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.
+ */
+export const getTableStandInParts = table => {
+  const cached = tableStandInCache.get(table);
+  if (cached !== undefined) {
+    return cached;
+  }
+  const parts = [];
+  table.forEach((row, _offset, index) => {
+    const text = holdsRevealableContent(row) ? undefined : getBlockSearchText(row);
+    if (text === undefined) {
+      parts.push(index);
+      return;
+    }
+    const last = parts[parts.length - 1];
+    if (typeof last === 'string') {
+      parts[parts.length - 1] = `${last}${BLOCK_SEPARATOR}${text}`;
+      return;
+    }
+    parts.push(text);
+  });
+  tableStandInCache.set(table, parts);
+  return parts;
 };

package/dist/esm/react/index.js

@@ -11,7 +11,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/esm/react/nodes/table/colgroup.js

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

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

@@ -109,8 +109,6 @@ export var StickyTable = function StickyTable(_ref) {
     tableNode = _ref.tableNode,
     rendererAppearance = _ref.rendererAppearance,
     allowTableResizing = _ref.allowTableResizing,
-    _ref$fixTableSSRResiz = _ref.fixTableSSRResizing,
-    fixTableSSRResizing = _ref$fixTableSSRResiz === void 0 ? false : _ref$fixTableSSRResiz,
     allowFixedColumnWidthOption = _ref.allowFixedColumnWidthOption;
   var styles;
   /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
@@ -146,7 +144,7 @@ export var StickyTable = function StickyTable(_ref) {
       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
@@ -164,7 +162,7 @@ export var StickyTable = function StickyTable(_ref) {
       renderWidth: renderWidth,
       tableNode: tableNode,
       rendererAppearance: rendererAppearance,
-      fixTableSSRResizing: fixTableSSRResizing,
+      fixTableSSRResizing: true,
       allowFixedColumnWidthOption: allowFixedColumnWidthOption
     },
     /**

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

@@ -32,21 +32,10 @@ export var Table = /*#__PURE__*/React.memo(function (_ref) {
   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;
   }
   var tableLayout = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout;
   var tableDisplayMode = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.displayMode;