@atlaskit/editor-plugin-show-diff 17.1.0 → 17.1.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 17.1.1
+
+### Patch Changes
+
+- [`296193f8a499b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/296193f8a499b) -
+  Keep table diff indicators aligned with the visible table edge when the viewport narrows and the
+  table scrolls horizontally, behind platform_editor_ai_show_diff_patch_2.
+- Updated dependencies
+
 ## 17.1.0
 
 ### Minor Changes

package/dist/cjs/pm-plugins/decorations/createAnchorDecorationWidgets.js

@@ -88,6 +88,17 @@ var edgeCases = function edgeCases(doc, from) {
         if (!node.firstChild) {
           return undefined;
         }
+        if ((0, _fg.fg)('platform_editor_ai_show_diff_patch_2')) {
+          // The row retains its full width when the table scrolls. Centering that
+          // width against the editor would push the anchor off-screen. Measure the
+          // visible container's edge instead, including start-aligned tables.
+          return {
+            beforePos: beforePos,
+            measurePos: beforePos,
+            measureSelector: '.pm-table-container',
+            measureLeft: true
+          };
+        }
 
         // Measure the first row (`nodeStart` is just inside the table, i.e. the
         // position of the first row): its width matches the table's.
@@ -175,19 +186,28 @@ var createLeftAnchorWidget = exports.createLeftAnchorWidget = function createLef
       var nodeDOM = view.nodeDOM(edgeCase.measurePos);
       var dom = edgeCase.measureSelector && nodeDOM instanceof HTMLElement ? (_nodeDOM$querySelecto = nodeDOM.querySelector(edgeCase.measureSelector)) !== null && _nodeDOM$querySelecto !== void 0 ? _nodeDOM$querySelecto : nodeDOM : nodeDOM;
       if (dom instanceof HTMLElement) {
-        // The left anchor only needs the container width so the
-        // IndicatorBar can align against the block's horizontal extent.
-        anchor.style.setProperty('width', "".concat(dom.offsetWidth, "px"));
+        var updateAnchor = function updateAnchor() {
+          if (getPos() === undefined) {
+            return;
+          }
+          if (edgeCase.measureLeft) {
+            var left = dom.getBoundingClientRect().left - wrapper.getBoundingClientRect().left;
+            anchor.style.setProperty('left', "".concat(left, "px"));
+            anchor.style.setProperty('transform', 'none');
+          }
+          anchor.style.setProperty('width', "".concat(dom.offsetWidth, "px"));
+        };
+        // Align against the block's horizontal extent.
+        updateAnchor();
 
         // Observe the measured element for size changes (e.g. page
         // resize) so the indicator stays aligned. CCI-17981
         if (!leftResizeObserver) {
-          leftResizeObserver = new ResizeObserver(function () {
-            if (getPos() !== undefined) {
-              anchor.style.setProperty('width', "".concat(dom.offsetWidth, "px"));
-            }
-          });
+          leftResizeObserver = new ResizeObserver(updateAnchor);
           leftResizeObserver.observe(dom);
+          if (edgeCase.measureLeft) {
+            leftResizeObserver.observe(wrapper);
+          }
         }
       }
     };

package/dist/es2019/pm-plugins/decorations/createAnchorDecorationWidgets.js

@@ -79,6 +79,17 @@ const edgeCases = (doc, from) => {
         if (!node.firstChild) {
           return undefined;
         }
+        if (fg('platform_editor_ai_show_diff_patch_2')) {
+          // The row retains its full width when the table scrolls. Centering that
+          // width against the editor would push the anchor off-screen. Measure the
+          // visible container's edge instead, including start-aligned tables.
+          return {
+            beforePos,
+            measurePos: beforePos,
+            measureSelector: '.pm-table-container',
+            measureLeft: true
+          };
+        }
 
         // Measure the first row (`nodeStart` is just inside the table, i.e. the
         // position of the first row): its width matches the table's.
@@ -169,19 +180,28 @@ export const createLeftAnchorWidget = ({
       const nodeDOM = view.nodeDOM(edgeCase.measurePos);
       const dom = edgeCase.measureSelector && nodeDOM instanceof HTMLElement ? (_nodeDOM$querySelecto = nodeDOM.querySelector(edgeCase.measureSelector)) !== null && _nodeDOM$querySelecto !== void 0 ? _nodeDOM$querySelecto : nodeDOM : nodeDOM;
       if (dom instanceof HTMLElement) {
-        // The left anchor only needs the container width so the
-        // IndicatorBar can align against the block's horizontal extent.
-        anchor.style.setProperty('width', `${dom.offsetWidth}px`);
+        const updateAnchor = () => {
+          if (getPos() === undefined) {
+            return;
+          }
+          if (edgeCase.measureLeft) {
+            const left = dom.getBoundingClientRect().left - wrapper.getBoundingClientRect().left;
+            anchor.style.setProperty('left', `${left}px`);
+            anchor.style.setProperty('transform', 'none');
+          }
+          anchor.style.setProperty('width', `${dom.offsetWidth}px`);
+        };
+        // Align against the block's horizontal extent.
+        updateAnchor();
 
         // Observe the measured element for size changes (e.g. page
         // resize) so the indicator stays aligned. CCI-17981
         if (!leftResizeObserver) {
-          leftResizeObserver = new ResizeObserver(() => {
-            if (getPos() !== undefined) {
-              anchor.style.setProperty('width', `${dom.offsetWidth}px`);
-            }
-          });
+          leftResizeObserver = new ResizeObserver(updateAnchor);
           leftResizeObserver.observe(dom);
+          if (edgeCase.measureLeft) {
+            leftResizeObserver.observe(wrapper);
+          }
         }
       }
     };

package/dist/esm/pm-plugins/decorations/createAnchorDecorationWidgets.js

@@ -82,6 +82,17 @@ var edgeCases = function edgeCases(doc, from) {
         if (!node.firstChild) {
           return undefined;
         }
+        if (fg('platform_editor_ai_show_diff_patch_2')) {
+          // The row retains its full width when the table scrolls. Centering that
+          // width against the editor would push the anchor off-screen. Measure the
+          // visible container's edge instead, including start-aligned tables.
+          return {
+            beforePos: beforePos,
+            measurePos: beforePos,
+            measureSelector: '.pm-table-container',
+            measureLeft: true
+          };
+        }
 
         // Measure the first row (`nodeStart` is just inside the table, i.e. the
         // position of the first row): its width matches the table's.
@@ -169,19 +180,28 @@ export var createLeftAnchorWidget = function createLeftAnchorWidget(_ref) {
       var nodeDOM = view.nodeDOM(edgeCase.measurePos);
       var dom = edgeCase.measureSelector && nodeDOM instanceof HTMLElement ? (_nodeDOM$querySelecto = nodeDOM.querySelector(edgeCase.measureSelector)) !== null && _nodeDOM$querySelecto !== void 0 ? _nodeDOM$querySelecto : nodeDOM : nodeDOM;
       if (dom instanceof HTMLElement) {
-        // The left anchor only needs the container width so the
-        // IndicatorBar can align against the block's horizontal extent.
-        anchor.style.setProperty('width', "".concat(dom.offsetWidth, "px"));
+        var updateAnchor = function updateAnchor() {
+          if (getPos() === undefined) {
+            return;
+          }
+          if (edgeCase.measureLeft) {
+            var left = dom.getBoundingClientRect().left - wrapper.getBoundingClientRect().left;
+            anchor.style.setProperty('left', "".concat(left, "px"));
+            anchor.style.setProperty('transform', 'none');
+          }
+          anchor.style.setProperty('width', "".concat(dom.offsetWidth, "px"));
+        };
+        // Align against the block's horizontal extent.
+        updateAnchor();
 
         // Observe the measured element for size changes (e.g. page
         // resize) so the indicator stays aligned. CCI-17981
         if (!leftResizeObserver) {
-          leftResizeObserver = new ResizeObserver(function () {
-            if (getPos() !== undefined) {
-              anchor.style.setProperty('width', "".concat(dom.offsetWidth, "px"));
-            }
-          });
+          leftResizeObserver = new ResizeObserver(updateAnchor);
           leftResizeObserver.observe(dom);
+          if (edgeCase.measureLeft) {
+            leftResizeObserver.observe(wrapper);
+          }
         }
       }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "17.1.0",
+	"version": "17.1.1",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -39,7 +39,7 @@
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
-		"@atlaskit/tmp-editor-statsig": "^200.0.0",
+		"@atlaskit/tmp-editor-statsig": "^201.0.0",
 		"@atlaskit/tokens": "^18.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",