@atlaskit/editor-plugin-grid 11.0.8 → 11.0.12

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/editor-plugin-grid
 
+## 11.0.12
+
+### Patch Changes
+
+- [`62bea93a6f5eb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/62bea93a6f5eb) -
+  Add the `platform_editor_external_embed_grid_fix` experiment and use it to align editor grid
+  guidelines to the editor viewport while resizing external embeds.
+- Updated dependencies
+
+## 11.0.11
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.0.10
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.0.9
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.0.8
 
 ### Patch Changes

package/dist/cjs/gridPlugin.js

@@ -20,6 +20,8 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var GRID_SIZE = exports.GRID_SIZE = 12;
+// Matches the existing `.gridParent` 12px left + 12px right gutter expansion.
+var GRID_GUTTER_WIDTH = 24;
 var key = new _state.PluginKey('gridPlugin');
 var createDisplayGrid = function createDisplayGrid(view) {
   return function (props) {
@@ -103,6 +105,7 @@ var GridLegacy = function GridLegacy(_ref3) {
     containerElement = _ref3.containerElement,
     editorWidth = _ref3.editorWidth,
     gridType = _ref3.gridType,
+    overlayWidth = _ref3.overlayWidth,
     visible = _ref3.visible;
   var editorMaxWidth = theme.layoutMaxWidth;
   var gridLines = [].concat((0, _toConsumableArray2.default)(lineLengthGridLines(highlight)), (0, _toConsumableArray2.default)(gutterGridLines(editorMaxWidth, editorWidth, highlight, shouldCalcBreakoutGridLines)));
@@ -116,7 +119,8 @@ var GridLegacy = function GridLegacy(_ref3) {
       className: (0, _classnames.default)('gridContainer', gridType),
       style: {
         height: "".concat(containerElement.scrollHeight, "px"),
-        display: visible ? 'block' : 'none'
+        display: visible ? 'block' : 'none',
+        width: overlayWidth === undefined ? undefined : "".concat(overlayWidth, "px")
       },
       "data-testid": "gridContainer"
     }, gridLines))
@@ -128,6 +132,7 @@ var GridNext = function GridNext(_ref4) {
     containerElement = _ref4.containerElement,
     editorWidth = _ref4.editorWidth,
     gridType = _ref4.gridType,
+    overlayWidth = _ref4.overlayWidth,
     visible = _ref4.visible;
   var editorMaxWidth = _editorSharedStyles.akEditorDefaultLayoutWidth;
   var gridLines = [].concat((0, _toConsumableArray2.default)(lineLengthGridLines(highlight)), (0, _toConsumableArray2.default)(gutterGridLines(editorMaxWidth, editorWidth, highlight, shouldCalcBreakoutGridLines)));
@@ -141,7 +146,8 @@ var GridNext = function GridNext(_ref4) {
       className: (0, _classnames.default)('gridContainer', gridType),
       style: {
         height: "".concat(containerElement.scrollHeight, "px"),
-        display: visible ? 'block' : 'none'
+        display: visible ? 'block' : 'none',
+        width: overlayWidth === undefined ? undefined : "".concat(overlayWidth, "px")
       },
       "data-testid": "gridContainer"
     }, gridLines))
@@ -169,6 +175,9 @@ var ContentComponent = function ContentComponent(_ref5) {
     visible = _useSharedPluginState.visible,
     gridType = _useSharedPluginState.gridType,
     highlight = _useSharedPluginState.highlight;
+  var overlayWidth = _react.default.useMemo(function () {
+    return (0, _expValEquals.expValEquals)('platform_editor_external_embed_grid_fix', 'isEnabled', true) ? (editorView.dom.getBoundingClientRect().width || width || _editorSharedStyles.akEditorFullPageMaxWidth) + GRID_GUTTER_WIDTH : undefined;
+  }, [editorView.dom, width]);
   if (!visible || !highlight) {
     return null;
   }
@@ -181,7 +190,8 @@ var ContentComponent = function ContentComponent(_ref5) {
     containerElement: editorView.dom,
     visible: visible,
     gridType: gridType !== null && gridType !== void 0 ? gridType : 'full',
-    highlight: highlight
+    highlight: highlight,
+    overlayWidth: overlayWidth
   });
 };
 var EMPTY_STATE = {

package/dist/es2019/gridPlugin.js

@@ -11,6 +11,8 @@ import { akEditorBreakoutPadding, akEditorDefaultLayoutWidth, akEditorFullPageMa
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export const GRID_SIZE = 12;
+// Matches the existing `.gridParent` 12px left + 12px right gutter expansion.
+const GRID_GUTTER_WIDTH = 24;
 const key = new PluginKey('gridPlugin');
 const createDisplayGrid = view => props => {
   const {
@@ -95,6 +97,7 @@ const GridLegacy = ({
   containerElement,
   editorWidth,
   gridType,
+  overlayWidth,
   visible
 }) => {
   const editorMaxWidth = theme.layoutMaxWidth;
@@ -109,7 +112,8 @@ const GridLegacy = ({
       className: classnames('gridContainer', gridType),
       style: {
         height: `${containerElement.scrollHeight}px`,
-        display: visible ? 'block' : 'none'
+        display: visible ? 'block' : 'none',
+        width: overlayWidth === undefined ? undefined : `${overlayWidth}px`
       },
       "data-testid": "gridContainer"
     }, gridLines))
@@ -121,6 +125,7 @@ const GridNext = ({
   containerElement,
   editorWidth,
   gridType,
+  overlayWidth,
   visible
 }) => {
   const editorMaxWidth = akEditorDefaultLayoutWidth;
@@ -135,7 +140,8 @@ const GridNext = ({
       className: classnames('gridContainer', gridType),
       style: {
         height: `${containerElement.scrollHeight}px`,
-        display: visible ? 'block' : 'none'
+        display: visible ? 'block' : 'none',
+        width: overlayWidth === undefined ? undefined : `${overlayWidth}px`
       },
       "data-testid": "gridContainer"
     }, gridLines))
@@ -163,6 +169,7 @@ const ContentComponent = ({
     gridType,
     highlight
   } = useSharedPluginStateWithSelector(api, ['width', 'grid'], selector);
+  const overlayWidth = React.useMemo(() => expValEquals('platform_editor_external_embed_grid_fix', 'isEnabled', true) ? (editorView.dom.getBoundingClientRect().width || width || akEditorFullPageMaxWidth) + GRID_GUTTER_WIDTH : undefined, [editorView.dom, width]);
   if (!visible || !highlight) {
     return null;
   }
@@ -175,7 +182,8 @@ const ContentComponent = ({
     containerElement: editorView.dom,
     visible: visible,
     gridType: gridType !== null && gridType !== void 0 ? gridType : 'full',
-    highlight: highlight
+    highlight: highlight,
+    overlayWidth: overlayWidth
   });
 };
 const EMPTY_STATE = {

package/dist/esm/gridPlugin.js

@@ -13,6 +13,8 @@ import { akEditorBreakoutPadding, akEditorDefaultLayoutWidth, akEditorFullPageMa
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export var GRID_SIZE = 12;
+// Matches the existing `.gridParent` 12px left + 12px right gutter expansion.
+var GRID_GUTTER_WIDTH = 24;
 var key = new PluginKey('gridPlugin');
 var createDisplayGrid = function createDisplayGrid(view) {
   return function (props) {
@@ -96,6 +98,7 @@ var GridLegacy = function GridLegacy(_ref3) {
     containerElement = _ref3.containerElement,
     editorWidth = _ref3.editorWidth,
     gridType = _ref3.gridType,
+    overlayWidth = _ref3.overlayWidth,
     visible = _ref3.visible;
   var editorMaxWidth = theme.layoutMaxWidth;
   var gridLines = [].concat(_toConsumableArray(lineLengthGridLines(highlight)), _toConsumableArray(gutterGridLines(editorMaxWidth, editorWidth, highlight, shouldCalcBreakoutGridLines)));
@@ -109,7 +112,8 @@ var GridLegacy = function GridLegacy(_ref3) {
       className: classnames('gridContainer', gridType),
       style: {
         height: "".concat(containerElement.scrollHeight, "px"),
-        display: visible ? 'block' : 'none'
+        display: visible ? 'block' : 'none',
+        width: overlayWidth === undefined ? undefined : "".concat(overlayWidth, "px")
       },
       "data-testid": "gridContainer"
     }, gridLines))
@@ -121,6 +125,7 @@ var GridNext = function GridNext(_ref4) {
     containerElement = _ref4.containerElement,
     editorWidth = _ref4.editorWidth,
     gridType = _ref4.gridType,
+    overlayWidth = _ref4.overlayWidth,
     visible = _ref4.visible;
   var editorMaxWidth = akEditorDefaultLayoutWidth;
   var gridLines = [].concat(_toConsumableArray(lineLengthGridLines(highlight)), _toConsumableArray(gutterGridLines(editorMaxWidth, editorWidth, highlight, shouldCalcBreakoutGridLines)));
@@ -134,7 +139,8 @@ var GridNext = function GridNext(_ref4) {
       className: classnames('gridContainer', gridType),
       style: {
         height: "".concat(containerElement.scrollHeight, "px"),
-        display: visible ? 'block' : 'none'
+        display: visible ? 'block' : 'none',
+        width: overlayWidth === undefined ? undefined : "".concat(overlayWidth, "px")
       },
       "data-testid": "gridContainer"
     }, gridLines))
@@ -162,6 +168,9 @@ var ContentComponent = function ContentComponent(_ref5) {
     visible = _useSharedPluginState.visible,
     gridType = _useSharedPluginState.gridType,
     highlight = _useSharedPluginState.highlight;
+  var overlayWidth = React.useMemo(function () {
+    return expValEquals('platform_editor_external_embed_grid_fix', 'isEnabled', true) ? (editorView.dom.getBoundingClientRect().width || width || akEditorFullPageMaxWidth) + GRID_GUTTER_WIDTH : undefined;
+  }, [editorView.dom, width]);
   if (!visible || !highlight) {
     return null;
   }
@@ -174,7 +183,8 @@ var ContentComponent = function ContentComponent(_ref5) {
     containerElement: editorView.dom,
     visible: visible,
     gridType: gridType !== null && gridType !== void 0 ? gridType : 'full',
-    highlight: highlight
+    highlight: highlight,
+    overlayWidth: overlayWidth
   });
 };
 var EMPTY_STATE = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-grid",
-	"version": "11.0.8",
+	"version": "11.0.12",
 	"description": "Grid plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -25,13 +25,13 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.11.0",
 		"@atlaskit/platform-feature-flags-react": "^0.5.0",
-		"@atlaskit/tmp-editor-statsig": "^95.0.0",
+		"@atlaskit/tmp-editor-statsig": "^99.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"classnames": "^2.2.5"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^115.10.0",
+		"@atlaskit/editor-common": "^115.13.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},