@atlaskit/editor-plugin-grid 11.0.14 → 11.0.16

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-grid
 
+## 11.0.16
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.0.15
+
+### Patch Changes
+
+- [`0117f2bf00eb2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0117f2bf00eb2) -
+  Use editor line length rather than editor DOM width for the external embed grid guideline fix so
+  guidelines stay aligned in wide editor layouts.
+- Updated dependencies
+
 ## 11.0.14
 
 ### Patch Changes

package/dist/cjs/gridPlugin.js

@@ -158,9 +158,10 @@ var ThemedGrid = (0, _platformFeatureFlagsReact.componentWithCondition)(function
   return (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true) || (0, _expValEquals.expValEquals)('platform_editor_core_static_css', 'isEnabled', true);
 }, GridNext, ThemedGridLegacy);
 var selector = function selector(states) {
-  var _states$widthState, _states$gridState, _states$gridState2, _states$gridState3;
+  var _states$widthState, _states$widthState2, _states$gridState, _states$gridState2, _states$gridState3;
   return {
-    width: (_states$widthState = states.widthState) === null || _states$widthState === void 0 ? void 0 : _states$widthState.width,
+    lineLength: (_states$widthState = states.widthState) === null || _states$widthState === void 0 ? void 0 : _states$widthState.lineLength,
+    width: (_states$widthState2 = states.widthState) === null || _states$widthState2 === void 0 ? void 0 : _states$widthState2.width,
     visible: (_states$gridState = states.gridState) === null || _states$gridState === void 0 ? void 0 : _states$gridState.visible,
     gridType: (_states$gridState2 = states.gridState) === null || _states$gridState2 === void 0 ? void 0 : _states$gridState2.gridType,
     highlight: (_states$gridState3 = states.gridState) === null || _states$gridState3 === void 0 ? void 0 : _states$gridState3.highlight
@@ -171,13 +172,12 @@ var ContentComponent = function ContentComponent(_ref5) {
     editorView = _ref5.editorView,
     options = _ref5.options;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['width', 'grid'], selector),
+    lineLength = _useSharedPluginState.lineLength,
     width = _useSharedPluginState.width,
     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]);
+  var overlayWidth = (0, _expValEquals.expValEquals)('platform_editor_external_embed_grid_fix', 'isEnabled', true) ? (lineLength || width || _editorSharedStyles.akEditorFullPageMaxWidth) + GRID_GUTTER_WIDTH : undefined;
   if (!visible || !highlight) {
     return null;
   }

package/dist/es2019/gridPlugin.js

@@ -150,9 +150,10 @@ const GridNext = ({
 const ThemedGridLegacy = withTheme(GridLegacy);
 const ThemedGrid = componentWithCondition(() => expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true) || expValEquals('platform_editor_core_static_css', 'isEnabled', true), GridNext, ThemedGridLegacy);
 const selector = states => {
-  var _states$widthState, _states$gridState, _states$gridState2, _states$gridState3;
+  var _states$widthState, _states$widthState2, _states$gridState, _states$gridState2, _states$gridState3;
   return {
-    width: (_states$widthState = states.widthState) === null || _states$widthState === void 0 ? void 0 : _states$widthState.width,
+    lineLength: (_states$widthState = states.widthState) === null || _states$widthState === void 0 ? void 0 : _states$widthState.lineLength,
+    width: (_states$widthState2 = states.widthState) === null || _states$widthState2 === void 0 ? void 0 : _states$widthState2.width,
     visible: (_states$gridState = states.gridState) === null || _states$gridState === void 0 ? void 0 : _states$gridState.visible,
     gridType: (_states$gridState2 = states.gridState) === null || _states$gridState2 === void 0 ? void 0 : _states$gridState2.gridType,
     highlight: (_states$gridState3 = states.gridState) === null || _states$gridState3 === void 0 ? void 0 : _states$gridState3.highlight
@@ -164,12 +165,13 @@ const ContentComponent = ({
   options
 }) => {
   const {
+    lineLength,
     width,
     visible,
     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]);
+  const overlayWidth = expValEquals('platform_editor_external_embed_grid_fix', 'isEnabled', true) ? (lineLength || width || akEditorFullPageMaxWidth) + GRID_GUTTER_WIDTH : undefined;
   if (!visible || !highlight) {
     return null;
   }

package/dist/esm/gridPlugin.js

@@ -151,9 +151,10 @@ var ThemedGrid = componentWithCondition(function () {
   return expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true) || expValEquals('platform_editor_core_static_css', 'isEnabled', true);
 }, GridNext, ThemedGridLegacy);
 var selector = function selector(states) {
-  var _states$widthState, _states$gridState, _states$gridState2, _states$gridState3;
+  var _states$widthState, _states$widthState2, _states$gridState, _states$gridState2, _states$gridState3;
   return {
-    width: (_states$widthState = states.widthState) === null || _states$widthState === void 0 ? void 0 : _states$widthState.width,
+    lineLength: (_states$widthState = states.widthState) === null || _states$widthState === void 0 ? void 0 : _states$widthState.lineLength,
+    width: (_states$widthState2 = states.widthState) === null || _states$widthState2 === void 0 ? void 0 : _states$widthState2.width,
     visible: (_states$gridState = states.gridState) === null || _states$gridState === void 0 ? void 0 : _states$gridState.visible,
     gridType: (_states$gridState2 = states.gridState) === null || _states$gridState2 === void 0 ? void 0 : _states$gridState2.gridType,
     highlight: (_states$gridState3 = states.gridState) === null || _states$gridState3 === void 0 ? void 0 : _states$gridState3.highlight
@@ -164,13 +165,12 @@ var ContentComponent = function ContentComponent(_ref5) {
     editorView = _ref5.editorView,
     options = _ref5.options;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['width', 'grid'], selector),
+    lineLength = _useSharedPluginState.lineLength,
     width = _useSharedPluginState.width,
     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]);
+  var overlayWidth = expValEquals('platform_editor_external_embed_grid_fix', 'isEnabled', true) ? (lineLength || width || akEditorFullPageMaxWidth) + GRID_GUTTER_WIDTH : undefined;
   if (!visible || !highlight) {
     return null;
   }

package/gridPlugin/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/gridPlugin.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/gridPlugin.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/gridPlugin.d.ts"
 }

package/gridPluginType/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/gridPluginType.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/gridPluginType.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/gridPluginType.d.ts"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-grid",
-	"version": "11.0.14",
+	"version": "11.0.16",
 	"description": "Grid plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -25,7 +25,7 @@
 		"@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": "^101.0.0",
+		"@atlaskit/tmp-editor-statsig": "^103.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"classnames": "^2.2.5"

package/types/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/types.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/types.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/types.d.ts"
 }

package/dist/types-ts4.5/entry-points/gridPlugin.d.ts

@@ -1 +0,0 @@
-export { gridPlugin } from '../gridPlugin';

package/dist/types-ts4.5/entry-points/gridPluginType.d.ts

@@ -1 +0,0 @@
-export type { GridPlugin, GridPluginDependencies, GridPluginSharedState, GridPluginActions, GridPluginConfiguration, } from '../gridPluginType';

package/dist/types-ts4.5/entry-points/types.d.ts

@@ -1 +0,0 @@
-export type { CreateDisplayGrid, Highlights, GridPluginOptions, GridPluginState, } from '../types/index';

package/dist/types-ts4.5/gridPlugin.d.ts

@@ -1,7 +0,0 @@
-import type { GridPlugin } from './gridPluginType';
-export declare const GRID_SIZE = 12;
-/**
- * Grid plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
- * from `@atlaskit/editor-core`.
- */
-export declare const gridPlugin: GridPlugin;

package/dist/types-ts4.5/gridPluginType.d.ts

@@ -1,17 +0,0 @@
-import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
-import type { CreateDisplayGrid, GridPluginOptions, GridPluginState } from './types';
-export type GridPluginConfiguration = GridPluginOptions | undefined;
-export type GridPluginDependencies = [
-    WidthPlugin
-];
-export type GridPluginSharedState = GridPluginState | null;
-export type GridPluginActions = {
-    displayGrid: CreateDisplayGrid;
-};
-export type GridPlugin = NextEditorPlugin<'grid', {
-    actions: GridPluginActions;
-    dependencies: GridPluginDependencies;
-    pluginConfiguration: GridPluginConfiguration;
-    sharedState: GridPluginSharedState;
-}>;

package/dist/types-ts4.5/index.d.ts

@@ -1,3 +0,0 @@
-export { gridPlugin } from './gridPlugin';
-export type { GridPlugin, GridPluginDependencies, GridPluginSharedState, GridPluginActions, GridPluginConfiguration, } from './gridPluginType';
-export type { CreateDisplayGrid, Highlights, GridPluginOptions, GridPluginState } from './types';

package/dist/types-ts4.5/types/index.d.ts

@@ -1,17 +0,0 @@
-import type { GridType } from '@atlaskit/editor-common/types';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export type Highlights = Array<'wide' | 'full-width' | number>;
-export type GridPluginState = {
-    gridType?: GridType;
-    highlight: Highlights;
-    visible: boolean;
-};
-type Required<T> = {
-    [P in keyof T]-?: T[P];
-};
-type DisplayGrid = (props: Required<GridPluginState>) => boolean;
-export type CreateDisplayGrid = (view: EditorView) => DisplayGrid;
-export interface GridPluginOptions {
-    shouldCalcBreakoutGridLines?: boolean;
-}
-export {};