@atlaskit/editor-plugin-grid 0.1.0

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/editor-plugin-grid

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,7 @@
+# EditorPluginGrid
+
+Grid plugin for @atlaskit/editor-core
+
+## Usage
+
+`import { gridPlugin } from '@atlaskit/editor-plugin-grid';`

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "gridPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.gridPlugin;
+  }
+});
+var _plugin = require("./plugin");

package/dist/cjs/plugin.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridPlugin = exports.GRID_SIZE = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _prosemirrorState = require("prosemirror-state");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var GRID_SIZE = 12;
+exports.GRID_SIZE = GRID_SIZE;
+var key = new _prosemirrorState.PluginKey('gridPlugin');
+var createDisplayGrid = function createDisplayGrid(view) {
+  return function (props) {
+    var dispatch = view.dispatch,
+      state = view.state;
+    var tr = state.tr.setMeta(key, props);
+    dispatch(tr);
+    return true;
+  };
+};
+var sides = ['left', 'right'];
+var overflowHighlight = function overflowHighlight(highlights, side, start, size) {
+  if (!highlights.length) {
+    return false;
+  }
+  var minHighlight = highlights.reduce(function (prev, cur) {
+    return Math.min(prev, cur);
+  });
+  var maxHighlight = highlights.reduce(function (prev, cur) {
+    return Math.max(prev, cur);
+  });
+  if (side === 'left') {
+    return minHighlight < 0 && minHighlight <= -start && (typeof size === 'number' ? minHighlight >= -(start + size) : true);
+  } else {
+    return maxHighlight > GRID_SIZE && maxHighlight >= GRID_SIZE + start && (typeof size === 'number' ? maxHighlight <= GRID_SIZE + size : true);
+  }
+};
+var gutterGridLines = function gutterGridLines(editorMaxWidth, editorWidth, highlights, shouldCalcBreakoutGridLines) {
+  var gridLines = [];
+  if (!shouldCalcBreakoutGridLines) {
+    return gridLines;
+  }
+  var wideSpacing = (editorMaxWidth * _editorSharedStyles.breakoutWideScaleRatio - editorMaxWidth) / 2;
+  sides.forEach(function (side) {
+    gridLines.push( /*#__PURE__*/_react.default.createElement("div", {
+      key: side,
+      className: (0, _classnames.default)('gridLine', overflowHighlight(highlights, side, 0, 4) ? 'highlight' : ''),
+      style: (0, _defineProperty2.default)({
+        position: 'absolute'
+      }, side, "-".concat(wideSpacing, "px"))
+    }));
+    gridLines.push( /*#__PURE__*/_react.default.createElement("div", {
+      key: side + '-bk',
+      className: (0, _classnames.default)('gridLine', highlights.indexOf('full-width') > -1 ? 'highlight' : ''),
+      style: (0, _defineProperty2.default)({
+        position: 'absolute'
+      }, side, "-".concat((editorWidth - editorMaxWidth - _editorSharedStyles.akEditorBreakoutPadding) / 2, "px"))
+    }));
+  });
+  return gridLines;
+};
+var lineLengthGridLines = function lineLengthGridLines(highlights) {
+  var gridLines = [];
+  var gridSpacing = 100 / GRID_SIZE;
+  for (var i = 0; i <= GRID_SIZE; i++) {
+    var style = {
+      paddingLeft: "".concat(gridSpacing, "%")
+    };
+    gridLines.push( /*#__PURE__*/_react.default.createElement("div", {
+      key: i,
+      className: (0, _classnames.default)('gridLine', highlights.indexOf(i) > -1 ? 'highlight' : ''),
+      style: i < GRID_SIZE ? style : undefined
+    }));
+  }
+  return gridLines;
+};
+var Grid = function Grid(_ref3) {
+  var highlight = _ref3.highlight,
+    shouldCalcBreakoutGridLines = _ref3.shouldCalcBreakoutGridLines,
+    theme = _ref3.theme,
+    containerElement = _ref3.containerElement,
+    editorWidth = _ref3.editorWidth,
+    gridType = _ref3.gridType,
+    visible = _ref3.visible;
+  var editorMaxWidth = theme.layoutMaxWidth;
+  var gridLines = [].concat((0, _toConsumableArray2.default)(lineLengthGridLines(highlight)), (0, _toConsumableArray2.default)(gutterGridLines(editorMaxWidth, editorWidth, highlight, shouldCalcBreakoutGridLines)));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "gridParent"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('gridContainer', gridType),
+    style: {
+      height: "".concat(containerElement.scrollHeight, "px"),
+      display: visible ? 'block' : 'none'
+    },
+    "data-testid": "gridContainer"
+  }, gridLines));
+};
+var ThemedGrid = (0, _react2.withTheme)(Grid);
+var ContentComponent = function ContentComponent(_ref4) {
+  var _widthState$width, _gridState$gridType;
+  var api = _ref4.api,
+    editorView = _ref4.editorView,
+    options = _ref4.options;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'grid']),
+    widthState = _useSharedPluginState.widthState,
+    gridState = _useSharedPluginState.gridState;
+  if (!gridState) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(ThemedGrid, {
+    shouldCalcBreakoutGridLines: options && options.shouldCalcBreakoutGridLines,
+    editorWidth: (_widthState$width = widthState === null || widthState === void 0 ? void 0 : widthState.width) !== null && _widthState$width !== void 0 ? _widthState$width : _editorSharedStyles.akEditorFullPageMaxWidth,
+    containerElement: editorView.dom,
+    visible: gridState.visible,
+    gridType: (_gridState$gridType = gridState.gridType) !== null && _gridState$gridType !== void 0 ? _gridState$gridType : 'full',
+    highlight: gridState.highlight
+  });
+};
+var EMPTY_STATE = {
+  visible: false,
+  highlight: []
+};
+var gridPMPlugin = new _safePlugin.SafePlugin({
+  key: key,
+  state: {
+    init: function init() {
+      return EMPTY_STATE;
+    },
+    apply: function apply(tr, currentPluginState) {
+      var nextPluginState = tr.getMeta(key);
+      if (nextPluginState) {
+        return nextPluginState;
+      }
+      return currentPluginState;
+    }
+  }
+});
+var gridPlugin = function gridPlugin(options, api) {
+  return {
+    name: 'grid',
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return null;
+      }
+      return key.getState(editorState);
+    },
+    actions: {
+      displayGrid: createDisplayGrid
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'grid',
+        plugin: function plugin() {
+          return gridPMPlugin;
+        }
+      }];
+    },
+    contentComponent: function contentComponent(_ref5) {
+      var editorView = _ref5.editorView;
+      return /*#__PURE__*/_react.default.createElement(ContentComponent, {
+        editorView: editorView,
+        options: options,
+        api: api
+      });
+    }
+  };
+};
+exports.gridPlugin = gridPlugin;

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/editor-plugin-grid",
+	"version": "0.1.0",
+	"sideEffects": false
+}

package/dist/es2019/index.js

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

package/dist/es2019/plugin.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import { withTheme } from '@emotion/react';
+import classnames from 'classnames';
+import { PluginKey } from 'prosemirror-state';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { akEditorBreakoutPadding, akEditorFullPageMaxWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
+export const GRID_SIZE = 12;
+const key = new PluginKey('gridPlugin');
+const createDisplayGrid = view => props => {
+  const {
+    dispatch,
+    state
+  } = view;
+  const tr = state.tr.setMeta(key, props);
+  dispatch(tr);
+  return true;
+};
+const sides = ['left', 'right'];
+const overflowHighlight = (highlights, side, start, size) => {
+  if (!highlights.length) {
+    return false;
+  }
+  const minHighlight = highlights.reduce((prev, cur) => Math.min(prev, cur));
+  const maxHighlight = highlights.reduce((prev, cur) => Math.max(prev, cur));
+  if (side === 'left') {
+    return minHighlight < 0 && minHighlight <= -start && (typeof size === 'number' ? minHighlight >= -(start + size) : true);
+  } else {
+    return maxHighlight > GRID_SIZE && maxHighlight >= GRID_SIZE + start && (typeof size === 'number' ? maxHighlight <= GRID_SIZE + size : true);
+  }
+};
+const gutterGridLines = (editorMaxWidth, editorWidth, highlights, shouldCalcBreakoutGridLines) => {
+  const gridLines = [];
+  if (!shouldCalcBreakoutGridLines) {
+    return gridLines;
+  }
+  const wideSpacing = (editorMaxWidth * breakoutWideScaleRatio - editorMaxWidth) / 2;
+  sides.forEach(side => {
+    gridLines.push( /*#__PURE__*/React.createElement("div", {
+      key: side,
+      className: classnames('gridLine', overflowHighlight(highlights, side, 0, 4) ? 'highlight' : ''),
+      style: {
+        position: 'absolute',
+        [side]: `-${wideSpacing}px`
+      }
+    }));
+    gridLines.push( /*#__PURE__*/React.createElement("div", {
+      key: side + '-bk',
+      className: classnames('gridLine', highlights.indexOf('full-width') > -1 ? 'highlight' : ''),
+      style: {
+        position: 'absolute',
+        [side]: `-${(editorWidth - editorMaxWidth - akEditorBreakoutPadding) / 2}px`
+      }
+    }));
+  });
+  return gridLines;
+};
+const lineLengthGridLines = highlights => {
+  const gridLines = [];
+  const gridSpacing = 100 / GRID_SIZE;
+  for (let i = 0; i <= GRID_SIZE; i++) {
+    const style = {
+      paddingLeft: `${gridSpacing}%`
+    };
+    gridLines.push( /*#__PURE__*/React.createElement("div", {
+      key: i,
+      className: classnames('gridLine', highlights.indexOf(i) > -1 ? 'highlight' : ''),
+      style: i < GRID_SIZE ? style : undefined
+    }));
+  }
+  return gridLines;
+};
+const Grid = ({
+  highlight,
+  shouldCalcBreakoutGridLines,
+  theme,
+  containerElement,
+  editorWidth,
+  gridType,
+  visible
+}) => {
+  const editorMaxWidth = theme.layoutMaxWidth;
+  let gridLines = [...lineLengthGridLines(highlight), ...gutterGridLines(editorMaxWidth, editorWidth, highlight, shouldCalcBreakoutGridLines)];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "gridParent"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames('gridContainer', gridType),
+    style: {
+      height: `${containerElement.scrollHeight}px`,
+      display: visible ? 'block' : 'none'
+    },
+    "data-testid": "gridContainer"
+  }, gridLines));
+};
+const ThemedGrid = withTheme(Grid);
+const ContentComponent = ({
+  api,
+  editorView,
+  options
+}) => {
+  var _widthState$width, _gridState$gridType;
+  const {
+    widthState,
+    gridState
+  } = useSharedPluginState(api, ['width', 'grid']);
+  if (!gridState) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ThemedGrid, {
+    shouldCalcBreakoutGridLines: options && options.shouldCalcBreakoutGridLines,
+    editorWidth: (_widthState$width = widthState === null || widthState === void 0 ? void 0 : widthState.width) !== null && _widthState$width !== void 0 ? _widthState$width : akEditorFullPageMaxWidth,
+    containerElement: editorView.dom,
+    visible: gridState.visible,
+    gridType: (_gridState$gridType = gridState.gridType) !== null && _gridState$gridType !== void 0 ? _gridState$gridType : 'full',
+    highlight: gridState.highlight
+  });
+};
+const EMPTY_STATE = {
+  visible: false,
+  highlight: []
+};
+const gridPMPlugin = new SafePlugin({
+  key,
+  state: {
+    init() {
+      return EMPTY_STATE;
+    },
+    apply(tr, currentPluginState) {
+      const nextPluginState = tr.getMeta(key);
+      if (nextPluginState) {
+        return nextPluginState;
+      }
+      return currentPluginState;
+    }
+  }
+});
+export const gridPlugin = (options, api) => {
+  return {
+    name: 'grid',
+    getSharedState(editorState) {
+      if (!editorState) {
+        return null;
+      }
+      return key.getState(editorState);
+    },
+    actions: {
+      displayGrid: createDisplayGrid
+    },
+    pmPlugins() {
+      return [{
+        name: 'grid',
+        plugin: () => gridPMPlugin
+      }];
+    },
+    contentComponent: ({
+      editorView
+    }) => /*#__PURE__*/React.createElement(ContentComponent, {
+      editorView: editorView,
+      options: options,
+      api: api
+    })
+  };
+};

package/dist/es2019/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/editor-plugin-grid",
+	"version": "0.1.0",
+	"sideEffects": false
+}

package/dist/esm/index.js

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

package/dist/esm/plugin.js

@@ -0,0 +1,167 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { withTheme } from '@emotion/react';
+import classnames from 'classnames';
+import { PluginKey } from 'prosemirror-state';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { akEditorBreakoutPadding, akEditorFullPageMaxWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
+export var GRID_SIZE = 12;
+var key = new PluginKey('gridPlugin');
+var createDisplayGrid = function createDisplayGrid(view) {
+  return function (props) {
+    var dispatch = view.dispatch,
+      state = view.state;
+    var tr = state.tr.setMeta(key, props);
+    dispatch(tr);
+    return true;
+  };
+};
+var sides = ['left', 'right'];
+var overflowHighlight = function overflowHighlight(highlights, side, start, size) {
+  if (!highlights.length) {
+    return false;
+  }
+  var minHighlight = highlights.reduce(function (prev, cur) {
+    return Math.min(prev, cur);
+  });
+  var maxHighlight = highlights.reduce(function (prev, cur) {
+    return Math.max(prev, cur);
+  });
+  if (side === 'left') {
+    return minHighlight < 0 && minHighlight <= -start && (typeof size === 'number' ? minHighlight >= -(start + size) : true);
+  } else {
+    return maxHighlight > GRID_SIZE && maxHighlight >= GRID_SIZE + start && (typeof size === 'number' ? maxHighlight <= GRID_SIZE + size : true);
+  }
+};
+var gutterGridLines = function gutterGridLines(editorMaxWidth, editorWidth, highlights, shouldCalcBreakoutGridLines) {
+  var gridLines = [];
+  if (!shouldCalcBreakoutGridLines) {
+    return gridLines;
+  }
+  var wideSpacing = (editorMaxWidth * breakoutWideScaleRatio - editorMaxWidth) / 2;
+  sides.forEach(function (side) {
+    gridLines.push( /*#__PURE__*/React.createElement("div", {
+      key: side,
+      className: classnames('gridLine', overflowHighlight(highlights, side, 0, 4) ? 'highlight' : ''),
+      style: _defineProperty({
+        position: 'absolute'
+      }, side, "-".concat(wideSpacing, "px"))
+    }));
+    gridLines.push( /*#__PURE__*/React.createElement("div", {
+      key: side + '-bk',
+      className: classnames('gridLine', highlights.indexOf('full-width') > -1 ? 'highlight' : ''),
+      style: _defineProperty({
+        position: 'absolute'
+      }, side, "-".concat((editorWidth - editorMaxWidth - akEditorBreakoutPadding) / 2, "px"))
+    }));
+  });
+  return gridLines;
+};
+var lineLengthGridLines = function lineLengthGridLines(highlights) {
+  var gridLines = [];
+  var gridSpacing = 100 / GRID_SIZE;
+  for (var i = 0; i <= GRID_SIZE; i++) {
+    var style = {
+      paddingLeft: "".concat(gridSpacing, "%")
+    };
+    gridLines.push( /*#__PURE__*/React.createElement("div", {
+      key: i,
+      className: classnames('gridLine', highlights.indexOf(i) > -1 ? 'highlight' : ''),
+      style: i < GRID_SIZE ? style : undefined
+    }));
+  }
+  return gridLines;
+};
+var Grid = function Grid(_ref3) {
+  var highlight = _ref3.highlight,
+    shouldCalcBreakoutGridLines = _ref3.shouldCalcBreakoutGridLines,
+    theme = _ref3.theme,
+    containerElement = _ref3.containerElement,
+    editorWidth = _ref3.editorWidth,
+    gridType = _ref3.gridType,
+    visible = _ref3.visible;
+  var editorMaxWidth = theme.layoutMaxWidth;
+  var gridLines = [].concat(_toConsumableArray(lineLengthGridLines(highlight)), _toConsumableArray(gutterGridLines(editorMaxWidth, editorWidth, highlight, shouldCalcBreakoutGridLines)));
+  return /*#__PURE__*/React.createElement("div", {
+    className: "gridParent"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames('gridContainer', gridType),
+    style: {
+      height: "".concat(containerElement.scrollHeight, "px"),
+      display: visible ? 'block' : 'none'
+    },
+    "data-testid": "gridContainer"
+  }, gridLines));
+};
+var ThemedGrid = withTheme(Grid);
+var ContentComponent = function ContentComponent(_ref4) {
+  var _widthState$width, _gridState$gridType;
+  var api = _ref4.api,
+    editorView = _ref4.editorView,
+    options = _ref4.options;
+  var _useSharedPluginState = useSharedPluginState(api, ['width', 'grid']),
+    widthState = _useSharedPluginState.widthState,
+    gridState = _useSharedPluginState.gridState;
+  if (!gridState) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ThemedGrid, {
+    shouldCalcBreakoutGridLines: options && options.shouldCalcBreakoutGridLines,
+    editorWidth: (_widthState$width = widthState === null || widthState === void 0 ? void 0 : widthState.width) !== null && _widthState$width !== void 0 ? _widthState$width : akEditorFullPageMaxWidth,
+    containerElement: editorView.dom,
+    visible: gridState.visible,
+    gridType: (_gridState$gridType = gridState.gridType) !== null && _gridState$gridType !== void 0 ? _gridState$gridType : 'full',
+    highlight: gridState.highlight
+  });
+};
+var EMPTY_STATE = {
+  visible: false,
+  highlight: []
+};
+var gridPMPlugin = new SafePlugin({
+  key: key,
+  state: {
+    init: function init() {
+      return EMPTY_STATE;
+    },
+    apply: function apply(tr, currentPluginState) {
+      var nextPluginState = tr.getMeta(key);
+      if (nextPluginState) {
+        return nextPluginState;
+      }
+      return currentPluginState;
+    }
+  }
+});
+export var gridPlugin = function gridPlugin(options, api) {
+  return {
+    name: 'grid',
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return null;
+      }
+      return key.getState(editorState);
+    },
+    actions: {
+      displayGrid: createDisplayGrid
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'grid',
+        plugin: function plugin() {
+          return gridPMPlugin;
+        }
+      }];
+    },
+    contentComponent: function contentComponent(_ref5) {
+      var editorView = _ref5.editorView;
+      return /*#__PURE__*/React.createElement(ContentComponent, {
+        editorView: editorView,
+        options: options,
+        api: api
+      });
+    }
+  };
+};

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/editor-plugin-grid",
+	"version": "0.1.0",
+	"sideEffects": false
+}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { gridPlugin } from './plugin';
+export type { Highlights } from './types';

package/dist/types/plugin.d.ts

@@ -0,0 +1,22 @@
+import { EditorView } from 'prosemirror-view';
+import { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { widthPlugin } from '@atlaskit/editor-plugin-width';
+import type { GridPluginState } from './types';
+export declare const GRID_SIZE = 12;
+type Required<T> = {
+    [P in keyof T]-?: T[P];
+};
+type DisplayGrid = (props: Required<GridPluginState>) => boolean;
+type CreateDisplayGrid = (view: EditorView) => DisplayGrid;
+export interface GridPluginOptions {
+    shouldCalcBreakoutGridLines?: boolean;
+}
+export declare const gridPlugin: NextEditorPlugin<'grid', {
+    pluginConfiguration: GridPluginOptions | undefined;
+    dependencies: [typeof widthPlugin];
+    sharedState: GridPluginState | null;
+    actions: {
+        displayGrid: CreateDisplayGrid;
+    };
+}>;
+export {};

package/dist/types/types.d.ts

@@ -0,0 +1,8 @@
+import type { GridType } from '@atlaskit/editor-common/types';
+export type Highlights = Array<'wide' | 'full-width' | number>;
+export type GridPluginState = {
+    visible: boolean;
+    gridType?: GridType;
+    highlight: Highlights;
+};
+export type { GridType };

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

@@ -0,0 +1,2 @@
+export { gridPlugin } from './plugin';
+export type { Highlights } from './types';

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

@@ -0,0 +1,24 @@
+import { EditorView } from 'prosemirror-view';
+import { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { widthPlugin } from '@atlaskit/editor-plugin-width';
+import type { GridPluginState } from './types';
+export declare const GRID_SIZE = 12;
+type Required<T> = {
+    [P in keyof T]-?: T[P];
+};
+type DisplayGrid = (props: Required<GridPluginState>) => boolean;
+type CreateDisplayGrid = (view: EditorView) => DisplayGrid;
+export interface GridPluginOptions {
+    shouldCalcBreakoutGridLines?: boolean;
+}
+export declare const gridPlugin: NextEditorPlugin<'grid', {
+    pluginConfiguration: GridPluginOptions | undefined;
+    dependencies: [
+        typeof widthPlugin
+    ];
+    sharedState: GridPluginState | null;
+    actions: {
+        displayGrid: CreateDisplayGrid;
+    };
+}>;
+export {};

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

@@ -0,0 +1,8 @@
+import type { GridType } from '@atlaskit/editor-common/types';
+export type Highlights = Array<'wide' | 'full-width' | number>;
+export type GridPluginState = {
+    visible: boolean;
+    gridType?: GridType;
+    highlight: Highlights;
+};
+export type { GridType };

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@atlaskit/editor-plugin-grid",
+  "version": "0.1.0",
+  "description": "Grid plugin for @atlaskit/editor-core",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "atlassian": {
+    "team": "Editor",
+    "releaseModel": "scheduled"
+  },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": false,
+  "atlaskit:src": "src/index.ts",
+  "af:exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@atlaskit/editor-common": "^74.2.0",
+    "@atlaskit/editor-plugin-width": "^0.0.1",
+    "@atlaskit/editor-shared-styles": "^2.4.0",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/react": "^11.7.1",
+    "classnames": "^2.2.5",
+    "prosemirror-state": "1.3.4",
+    "prosemirror-view": "1.23.7"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "devDependencies": {
+    "@atlaskit/docs": "*",
+    "@atlaskit/editor-core": "^184.0.0",
+    "@atlaskit/editor-test-helpers": "^18.2.0",
+    "@atlaskit/ssr": "*",
+    "@atlaskit/visual-regression": "*",
+    "@atlaskit/webdriver-runner": "*",
+    "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
+    "@testing-library/react": "^12.1.5",
+    "react-dom": "^16.8.0",
+    "typescript": "~4.9.5",
+    "wait-for-expect": "^1.2.0"
+  },
+  "techstack": {
+    "@atlassian/frontend": {
+      "import-structure": [
+        "atlassian-conventions"
+      ],
+      "circular-dependencies": [
+        "file-and-folder-level"
+      ]
+    },
+    "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
+      "analytics": [
+        "analytics-next"
+      ],
+      "design-tokens": [
+        "color"
+      ],
+      "theming": [
+        "react-context"
+      ],
+      "ui-components": [
+        "lite-mode"
+      ],
+      "deprecation": [
+        "no-deprecated-imports"
+      ],
+      "styling": [
+        "static",
+        "emotion"
+      ]
+    }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+}

package/report.api.md

@@ -0,0 +1,78 @@
+<!-- API Report Version: 2.3 -->
+
+## API Report File for "@atlaskit/editor-plugin-grid"
+
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
+
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
+
+```ts
+import { EditorView } from 'prosemirror-view';
+import type { GridType } from '@atlaskit/editor-common/types';
+import { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { widthPlugin } from '@atlaskit/editor-plugin-width';
+
+// @public (undocumented)
+type CreateDisplayGrid = (view: EditorView) => DisplayGrid;
+
+// @public (undocumented)
+type DisplayGrid = (props: Required_2<GridPluginState>) => boolean;
+
+// @public (undocumented)
+export const gridPlugin: NextEditorPlugin<
+  'grid',
+  {
+    pluginConfiguration: GridPluginOptions | undefined;
+    dependencies: [typeof widthPlugin];
+    sharedState: GridPluginState | null;
+    actions: {
+      displayGrid: CreateDisplayGrid;
+    };
+  }
+>;
+
+// @public (undocumented)
+interface GridPluginOptions {
+  // (undocumented)
+  shouldCalcBreakoutGridLines?: boolean;
+}
+
+// @public (undocumented)
+type GridPluginState = {
+  visible: boolean;
+  gridType?: GridType;
+  highlight: Highlights;
+};
+
+// @public (undocumented)
+export type Highlights = Array<'full-width' | 'wide' | number>;
+
+// @public (undocumented)
+type Required_2<T> = {
+  [P in keyof T]-?: T[P];
+};
+
+// (No @packageDocumentation comment for this package)
+```
+
+<!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->