@atlaskit/editor-plugin-guideline 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -1 +1,23 @@
 # @atlaskit/editor-plugin-guideline
+
+## 0.3.0
+
+### Minor Changes
+
+- [`d7aa08972c6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d7aa08972c6) - add style handler for the editor guideline plugin
+- [`1dadcae5b09`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1dadcae5b09) - COLLAB-2623 Updated API to newest interface and added utils to create default gridlines
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.2.0
+
+### Minor Changes
+
+- [`d8f19b90c43`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d8f19b90c43) - COLLAB-2622 Update editor-plugin-guideline to support position config.
+
+### Patch Changes
+
+- [`2625e4baea0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2625e4baea0) - COLLAB-2622 Setup React components for future works.
+- Updated dependencies

package/dist/cjs/guideline.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Guideline = void 0;
+var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+/** @jsx jsx */
+
+var BasicGuidelineStyles = (0, _react.css)({
+  borderLeft: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30A, ")")),
+  position: 'absolute',
+  width: '1px',
+  height: '100%',
+  zIndex: 0,
+  opacity: 1,
+  transition: 'border-color 0.15s linear, opacity 0.15s linear'
+});
+var ActiveGuidelineStyles = (0, _react.css)({
+  borderColor: "var(--ds-border-focused, ".concat(_colors.B200, ")")
+});
+var HiddenGuidelineStyles = (0, _react.css)({
+  opacity: 0
+});
+var DashedGuidelineStyles = (0, _react.css)({
+  borderLeftStyle: 'dashed'
+});
+var Guideline = function Guideline(props) {
+  var position = props.position,
+    active = props.active,
+    _props$show = props.show,
+    show = _props$show === void 0 ? true : _props$show,
+    style = props.style;
+  return (0, _react.jsx)("div", {
+    css: [BasicGuidelineStyles, active && ActiveGuidelineStyles, !show && HiddenGuidelineStyles, style === 'dashed' && DashedGuidelineStyles],
+    className: "guideline",
+    style: {
+      left: "".concat(position, "px")
+    }
+  });
+};
+exports.Guideline = Guideline;

package/dist/cjs/guildelineContainer.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GuidelineContainer = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _guideline = require("./guideline");
+/** @jsx jsx */
+
+var guidelineContainerStyles = (0, _react2.css)({
+  position: 'fixed',
+  height: '100vh',
+  width: '100%',
+  display: 'grid',
+  pointerEvents: 'none',
+  border: 'none',
+  maxWidth: "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px")
+});
+var GuidelineContainer = function GuidelineContainer(props) {
+  var guidelines = props.guidelines,
+    height = props.height,
+    editorWidth = props.editorWidth,
+    centerOffset = props.centerOffset;
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    offset = _useState2[0],
+    setOffset = _useState2[1];
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    var _ref$current;
+    var rect = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect();
+    if (rect) {
+      // X pixels from guideline container left to editor center.
+      setOffset(centerOffset - rect.x);
+    }
+  }, [centerOffset, guidelines, editorWidth]);
+  return (0, _react2.jsx)("div", {
+    ref: ref,
+    css: guidelineContainerStyles,
+    style: {
+      height: height
+    },
+    "data-testid": "guidelineContainer"
+  }, guidelines.map(function (guideline) {
+    return (0, _react2.jsx)(_guideline.Guideline, {
+      key: guideline.key,
+      position: guideline.position.x + offset,
+      active: guideline.active,
+      show: guideline.show,
+      style: guideline.style
+    });
+  }));
+};
+exports.GuidelineContainer = GuidelineContainer;

package/dist/cjs/plugin.js

@@ -1,19 +1,42 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.guidelinePlugin = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.guidelinePlugin = exports.EMPTY_STATE = void 0;
+var _react = require("@emotion/react");
 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 _guildelineContainer = require("./guildelineContainer");
+var _utils = require("./utils");
+/** @jsx jsx */
+
+var guidelineStyles = (0, _react.css)({
+  position: 'absolute',
+  width: '100%',
+  left: 0,
+  right: 0,
+  transform: "scale(1)",
+  zIndex: "".concat(_editorSharedStyles.akEditorGridLineZIndex, ";"),
+  display: 'flex',
+  justifyContent: 'center'
+});
 var key = new _prosemirrorState.PluginKey('guidelinePlugin');
-var displayGuideline = function displayGuideline(_view) {};
+var displayGuideline = function displayGuideline(view) {
+  return function (props) {
+    var dispatch = view.dispatch,
+      state = view.state;
+    var tr = state.tr.setMeta(key, props);
+    dispatch(tr);
+    return true;
+  };
+};
 var EMPTY_STATE = {
   guidelines: []
 };
+exports.EMPTY_STATE = EMPTY_STATE;
 var guidelinePMPlugin = new _safePlugin.SafePlugin({
   key: key,
   state: {
@@ -36,10 +59,18 @@ var ContentComponent = function ContentComponent(_ref) {
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'guideline']),
     widthState = _useSharedPluginState.widthState,
     guidelineState = _useSharedPluginState.guidelineState;
-  if (!guidelineState || !widthState) {
+  if (!widthState || !widthState.containerWidth || !widthState.lineLength || !guidelineState || !guidelineState.guidelines || guidelineState.guidelines.length === 0) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement("div", null);
+  return (0, _react.jsx)("div", {
+    css: guidelineStyles
+  }, (0, _react.jsx)(_guildelineContainer.GuidelineContainer, {
+    guidelines: guidelineState.guidelines,
+    height: editorView.dom.scrollHeight,
+    centerOffset: (0, _utils.getEditorCenterX)(editorView),
+    containerWidth: widthState.containerWidth,
+    editorWidth: widthState.lineLength
+  }));
 };
 var guidelinePlugin = function guidelinePlugin(options, api) {
   return {
@@ -63,7 +94,7 @@ var guidelinePlugin = function guidelinePlugin(options, api) {
     },
     contentComponent: function contentComponent(_ref2) {
       var editorView = _ref2.editorView;
-      return /*#__PURE__*/_react.default.createElement(ContentComponent, {
+      return (0, _react.jsx)(ContentComponent, {
         editorView: editorView,
         options: options,
         api: api

package/dist/cjs/utils.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.innerGuidelines = exports.getEditorCenterX = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+/**
+ * This function calculates the Editor's x axis of the center point
+ * in relation to the viewport
+ * @param editorView
+ * @returns x axis in number
+ */
+var getEditorCenterX = function getEditorCenterX(editorView) {
+  var editorRect = editorView.dom.getBoundingClientRect();
+  return editorRect.width / 2 + editorRect.x;
+};
+exports.getEditorCenterX = getEditorCenterX;
+var defaultGrids = [-6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6];
+var innerGuidelines = function innerGuidelines(editorContainerWidth) {
+  var editorWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _editorSharedStyles.akEditorDefaultLayoutWidth;
+  var wideSpacing = editorWidth * _editorSharedStyles.breakoutWideScaleRatio / 2;
+  var fullWidthPadding = (_editorSharedStyles.akEditorBreakoutPadding + editorWidth - _editorSharedStyles.akEditorDefaultLayoutWidth) / 2;
+  var containerWidth = Math.min(editorContainerWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth) / 2 - fullWidthPadding;
+  var fullWidthGuidelines = [{
+    key: "full_width_left",
+    position: {
+      x: -containerWidth
+    }
+  }, {
+    key: "full_width_right",
+    position: {
+      x: containerWidth
+    }
+  }];
+  var wideGuidelines = [{
+    key: "wide_left",
+    position: {
+      x: -wideSpacing
+    }
+  }, {
+    key: "wide_right",
+    position: {
+      x: wideSpacing
+    }
+  }];
+  var gridGuidelines = defaultGrids.map(function (val, index) {
+    return {
+      key: "grid_".concat(index),
+      position: {
+        x: val / 12 * editorWidth
+      }
+    };
+  });
+  return [].concat((0, _toConsumableArray2.default)(gridGuidelines), wideGuidelines, fullWidthGuidelines);
+};
+exports.innerGuidelines = innerGuidelines;

package/dist/cjs/version.json

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

package/dist/es2019/guideline.js

@@ -0,0 +1,36 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { B200, N30A } from '@atlaskit/theme/colors';
+const BasicGuidelineStyles = css({
+  borderLeft: `1px solid ${`var(--ds-border, ${N30A})`}`,
+  position: 'absolute',
+  width: '1px',
+  height: '100%',
+  zIndex: 0,
+  opacity: 1,
+  transition: 'border-color 0.15s linear, opacity 0.15s linear'
+});
+const ActiveGuidelineStyles = css({
+  borderColor: `var(--ds-border-focused, ${B200})`
+});
+const HiddenGuidelineStyles = css({
+  opacity: 0
+});
+const DashedGuidelineStyles = css({
+  borderLeftStyle: 'dashed'
+});
+export const Guideline = props => {
+  const {
+    position,
+    active,
+    show = true,
+    style
+  } = props;
+  return jsx("div", {
+    css: [BasicGuidelineStyles, active && ActiveGuidelineStyles, !show && HiddenGuidelineStyles, style === 'dashed' && DashedGuidelineStyles],
+    className: "guideline",
+    style: {
+      left: `${position}px`
+    }
+  });
+};

package/dist/es2019/guildelineContainer.js

@@ -0,0 +1,48 @@
+/** @jsx jsx */
+import { useLayoutEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { Guideline } from './guideline';
+const guidelineContainerStyles = css({
+  position: 'fixed',
+  height: '100vh',
+  width: '100%',
+  display: 'grid',
+  pointerEvents: 'none',
+  border: 'none',
+  maxWidth: `${akEditorFullWidthLayoutWidth}px`
+});
+export const GuidelineContainer = props => {
+  const {
+    guidelines,
+    height,
+    editorWidth,
+    centerOffset
+  } = props;
+  const [offset, setOffset] = useState(0);
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    var _ref$current;
+    const rect = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect();
+    if (rect) {
+      // X pixels from guideline container left to editor center.
+      setOffset(centerOffset - rect.x);
+    }
+  }, [centerOffset, guidelines, editorWidth]);
+  return jsx("div", {
+    ref: ref,
+    css: guidelineContainerStyles,
+    style: {
+      height
+    },
+    "data-testid": "guidelineContainer"
+  }, guidelines.map(guideline => {
+    return jsx(Guideline, {
+      key: guideline.key,
+      position: guideline.position.x + offset,
+      active: guideline.active,
+      show: guideline.show,
+      style: guideline.style
+    });
+  }));
+};

package/dist/es2019/plugin.js

@@ -1,10 +1,32 @@
-import React from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { PluginKey } from 'prosemirror-state';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { akEditorGridLineZIndex } from '@atlaskit/editor-shared-styles';
+import { GuidelineContainer } from './guildelineContainer';
+import { getEditorCenterX } from './utils';
+const guidelineStyles = css({
+  position: 'absolute',
+  width: '100%',
+  left: 0,
+  right: 0,
+  transform: `scale(1)`,
+  zIndex: `${akEditorGridLineZIndex};`,
+  display: 'flex',
+  justifyContent: 'center'
+});
 const key = new PluginKey('guidelinePlugin');
-const displayGuideline = _view => {};
-const EMPTY_STATE = {
+const displayGuideline = view => props => {
+  const {
+    dispatch,
+    state
+  } = view;
+  const tr = state.tr.setMeta(key, props);
+  dispatch(tr);
+  return true;
+};
+export const EMPTY_STATE = {
   guidelines: []
 };
 const guidelinePMPlugin = new SafePlugin({
@@ -31,10 +53,18 @@ const ContentComponent = ({
     widthState,
     guidelineState
   } = useSharedPluginState(api, ['width', 'guideline']);
-  if (!guidelineState || !widthState) {
+  if (!widthState || !widthState.containerWidth || !widthState.lineLength || !guidelineState || !guidelineState.guidelines || guidelineState.guidelines.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", null);
+  return jsx("div", {
+    css: guidelineStyles
+  }, jsx(GuidelineContainer, {
+    guidelines: guidelineState.guidelines,
+    height: editorView.dom.scrollHeight,
+    centerOffset: getEditorCenterX(editorView),
+    containerWidth: widthState.containerWidth,
+    editorWidth: widthState.lineLength
+  }));
 };
 export const guidelinePlugin = (options, api) => ({
   name: 'guideline',
@@ -55,7 +85,7 @@ export const guidelinePlugin = (options, api) => ({
   },
   contentComponent: ({
     editorView
-  }) => /*#__PURE__*/React.createElement(ContentComponent, {
+  }) => jsx(ContentComponent, {
     editorView: editorView,
     options: options,
     api: api

package/dist/es2019/utils.js

@@ -0,0 +1,46 @@
+import { akEditorBreakoutPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
+/**
+ * This function calculates the Editor's x axis of the center point
+ * in relation to the viewport
+ * @param editorView
+ * @returns x axis in number
+ */
+export const getEditorCenterX = editorView => {
+  const editorRect = editorView.dom.getBoundingClientRect();
+  return editorRect.width / 2 + editorRect.x;
+};
+const defaultGrids = [-6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6];
+export const innerGuidelines = (editorContainerWidth, editorWidth = akEditorDefaultLayoutWidth) => {
+  const wideSpacing = editorWidth * breakoutWideScaleRatio / 2;
+  const fullWidthPadding = (akEditorBreakoutPadding + editorWidth - akEditorDefaultLayoutWidth) / 2;
+  const containerWidth = Math.min(editorContainerWidth, akEditorFullWidthLayoutWidth) / 2 - fullWidthPadding;
+  const fullWidthGuidelines = [{
+    key: `full_width_left`,
+    position: {
+      x: -containerWidth
+    }
+  }, {
+    key: `full_width_right`,
+    position: {
+      x: containerWidth
+    }
+  }];
+  const wideGuidelines = [{
+    key: `wide_left`,
+    position: {
+      x: -wideSpacing
+    }
+  }, {
+    key: `wide_right`,
+    position: {
+      x: wideSpacing
+    }
+  }];
+  const gridGuidelines = defaultGrids.map((val, index) => ({
+    key: `grid_${index}`,
+    position: {
+      x: val / 12 * editorWidth
+    }
+  }));
+  return [...gridGuidelines, ...wideGuidelines, ...fullWidthGuidelines];
+};

package/dist/es2019/version.json

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

package/dist/esm/guideline.js

@@ -0,0 +1,35 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { B200, N30A } from '@atlaskit/theme/colors';
+var BasicGuidelineStyles = css({
+  borderLeft: "1px solid ".concat("var(--ds-border, ".concat(N30A, ")")),
+  position: 'absolute',
+  width: '1px',
+  height: '100%',
+  zIndex: 0,
+  opacity: 1,
+  transition: 'border-color 0.15s linear, opacity 0.15s linear'
+});
+var ActiveGuidelineStyles = css({
+  borderColor: "var(--ds-border-focused, ".concat(B200, ")")
+});
+var HiddenGuidelineStyles = css({
+  opacity: 0
+});
+var DashedGuidelineStyles = css({
+  borderLeftStyle: 'dashed'
+});
+export var Guideline = function Guideline(props) {
+  var position = props.position,
+    active = props.active,
+    _props$show = props.show,
+    show = _props$show === void 0 ? true : _props$show,
+    style = props.style;
+  return jsx("div", {
+    css: [BasicGuidelineStyles, active && ActiveGuidelineStyles, !show && HiddenGuidelineStyles, style === 'dashed' && DashedGuidelineStyles],
+    className: "guideline",
+    style: {
+      left: "".concat(position, "px")
+    }
+  });
+};

package/dist/esm/guildelineContainer.js

@@ -0,0 +1,50 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+import { useLayoutEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { Guideline } from './guideline';
+var guidelineContainerStyles = css({
+  position: 'fixed',
+  height: '100vh',
+  width: '100%',
+  display: 'grid',
+  pointerEvents: 'none',
+  border: 'none',
+  maxWidth: "".concat(akEditorFullWidthLayoutWidth, "px")
+});
+export var GuidelineContainer = function GuidelineContainer(props) {
+  var guidelines = props.guidelines,
+    height = props.height,
+    editorWidth = props.editorWidth,
+    centerOffset = props.centerOffset;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    offset = _useState2[0],
+    setOffset = _useState2[1];
+  var ref = useRef(null);
+  useLayoutEffect(function () {
+    var _ref$current;
+    var rect = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect();
+    if (rect) {
+      // X pixels from guideline container left to editor center.
+      setOffset(centerOffset - rect.x);
+    }
+  }, [centerOffset, guidelines, editorWidth]);
+  return jsx("div", {
+    ref: ref,
+    css: guidelineContainerStyles,
+    style: {
+      height: height
+    },
+    "data-testid": "guidelineContainer"
+  }, guidelines.map(function (guideline) {
+    return jsx(Guideline, {
+      key: guideline.key,
+      position: guideline.position.x + offset,
+      active: guideline.active,
+      show: guideline.show,
+      style: guideline.style
+    });
+  }));
+};

package/dist/esm/plugin.js

@@ -1,10 +1,32 @@
-import React from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { PluginKey } from 'prosemirror-state';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { akEditorGridLineZIndex } from '@atlaskit/editor-shared-styles';
+import { GuidelineContainer } from './guildelineContainer';
+import { getEditorCenterX } from './utils';
+var guidelineStyles = css({
+  position: 'absolute',
+  width: '100%',
+  left: 0,
+  right: 0,
+  transform: "scale(1)",
+  zIndex: "".concat(akEditorGridLineZIndex, ";"),
+  display: 'flex',
+  justifyContent: 'center'
+});
 var key = new PluginKey('guidelinePlugin');
-var displayGuideline = function displayGuideline(_view) {};
-var EMPTY_STATE = {
+var displayGuideline = function displayGuideline(view) {
+  return function (props) {
+    var dispatch = view.dispatch,
+      state = view.state;
+    var tr = state.tr.setMeta(key, props);
+    dispatch(tr);
+    return true;
+  };
+};
+export var EMPTY_STATE = {
   guidelines: []
 };
 var guidelinePMPlugin = new SafePlugin({
@@ -29,10 +51,18 @@ var ContentComponent = function ContentComponent(_ref) {
   var _useSharedPluginState = useSharedPluginState(api, ['width', 'guideline']),
     widthState = _useSharedPluginState.widthState,
     guidelineState = _useSharedPluginState.guidelineState;
-  if (!guidelineState || !widthState) {
+  if (!widthState || !widthState.containerWidth || !widthState.lineLength || !guidelineState || !guidelineState.guidelines || guidelineState.guidelines.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", null);
+  return jsx("div", {
+    css: guidelineStyles
+  }, jsx(GuidelineContainer, {
+    guidelines: guidelineState.guidelines,
+    height: editorView.dom.scrollHeight,
+    centerOffset: getEditorCenterX(editorView),
+    containerWidth: widthState.containerWidth,
+    editorWidth: widthState.lineLength
+  }));
 };
 export var guidelinePlugin = function guidelinePlugin(options, api) {
   return {
@@ -56,7 +86,7 @@ export var guidelinePlugin = function guidelinePlugin(options, api) {
     },
     contentComponent: function contentComponent(_ref2) {
       var editorView = _ref2.editorView;
-      return /*#__PURE__*/React.createElement(ContentComponent, {
+      return jsx(ContentComponent, {
         editorView: editorView,
         options: options,
         api: api

package/dist/esm/utils.js

@@ -0,0 +1,50 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { akEditorBreakoutPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
+/**
+ * This function calculates the Editor's x axis of the center point
+ * in relation to the viewport
+ * @param editorView
+ * @returns x axis in number
+ */
+export var getEditorCenterX = function getEditorCenterX(editorView) {
+  var editorRect = editorView.dom.getBoundingClientRect();
+  return editorRect.width / 2 + editorRect.x;
+};
+var defaultGrids = [-6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6];
+export var innerGuidelines = function innerGuidelines(editorContainerWidth) {
+  var editorWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : akEditorDefaultLayoutWidth;
+  var wideSpacing = editorWidth * breakoutWideScaleRatio / 2;
+  var fullWidthPadding = (akEditorBreakoutPadding + editorWidth - akEditorDefaultLayoutWidth) / 2;
+  var containerWidth = Math.min(editorContainerWidth, akEditorFullWidthLayoutWidth) / 2 - fullWidthPadding;
+  var fullWidthGuidelines = [{
+    key: "full_width_left",
+    position: {
+      x: -containerWidth
+    }
+  }, {
+    key: "full_width_right",
+    position: {
+      x: containerWidth
+    }
+  }];
+  var wideGuidelines = [{
+    key: "wide_left",
+    position: {
+      x: -wideSpacing
+    }
+  }, {
+    key: "wide_right",
+    position: {
+      x: wideSpacing
+    }
+  }];
+  var gridGuidelines = defaultGrids.map(function (val, index) {
+    return {
+      key: "grid_".concat(index),
+      position: {
+        x: val / 12 * editorWidth
+      }
+    };
+  });
+  return [].concat(_toConsumableArray(gridGuidelines), wideGuidelines, fullWidthGuidelines);
+};

package/dist/esm/version.json

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

package/dist/types/guideline.d.ts

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+type Props = {
+    position: number;
+    active?: boolean;
+    show?: boolean;
+    style?: 'dashed' | 'solid';
+};
+export declare const Guideline: (props: Props) => jsx.JSX.Element;
+export {};

package/dist/types/guildelineContainer.d.ts

@@ -0,0 +1,11 @@
+import { jsx } from '@emotion/react';
+import { GuidelineConfig } from './types';
+type ContainerProps = {
+    guidelines: GuidelineConfig[];
+    height: number;
+    centerOffset: number;
+    containerWidth: number;
+    editorWidth: number;
+};
+export declare const GuidelineContainer: (props: ContainerProps) => jsx.JSX.Element;
+export {};

package/dist/types/index.d.ts

@@ -1 +1,2 @@
 export { guidelinePlugin } from './plugin';
+export type { GuidelineConfig } from './types';

package/dist/types/plugin.d.ts

@@ -1,6 +1,7 @@
 import { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
 import { DisplayGuideline, GuidelinePluginState } from './types';
+export declare const EMPTY_STATE: GuidelinePluginState;
 export declare const guidelinePlugin: NextEditorPlugin<'guideline', {
     dependencies: [typeof widthPlugin];
     sharedState: GuidelinePluginState | null;

package/dist/types/types.d.ts

@@ -1,15 +1,20 @@
 import { EditorView } from 'prosemirror-view';
-type Guideline = {
-    key?: string;
+export type Position = {
+    x: number;
+};
+type GuidelineConfig = {
+    key: string;
+    position: Position;
     active?: boolean;
     show?: boolean;
     style?: 'dashed' | 'solid';
     color?: string;
 };
 type GuidelinePluginState = {
-    guidelines: Guideline[];
+    guidelines: GuidelineConfig[];
 };
 interface GuidelinePluginOptions {
 }
-type DisplayGuideline = (view: EditorView) => void;
-export type { GuidelinePluginState, GuidelinePluginOptions, Guideline, DisplayGuideline, };
+type DisplayGrid = (props: Required<GuidelinePluginState>) => boolean;
+type DisplayGuideline = (view: EditorView) => DisplayGrid;
+export type { GuidelinePluginState, GuidelinePluginOptions, GuidelineConfig, DisplayGuideline, };

package/dist/types/utils.d.ts

@@ -0,0 +1,10 @@
+import { EditorView } from 'prosemirror-view';
+import { GuidelineConfig } from './types';
+/**
+ * This function calculates the Editor's x axis of the center point
+ * in relation to the viewport
+ * @param editorView
+ * @returns x axis in number
+ */
+export declare const getEditorCenterX: (editorView: EditorView) => number;
+export declare const innerGuidelines: (editorContainerWidth: number, editorWidth?: number) => GuidelineConfig[];

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

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+type Props = {
+    position: number;
+    active?: boolean;
+    show?: boolean;
+    style?: 'dashed' | 'solid';
+};
+export declare const Guideline: (props: Props) => jsx.JSX.Element;
+export {};

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

@@ -0,0 +1,11 @@
+import { jsx } from '@emotion/react';
+import { GuidelineConfig } from './types';
+type ContainerProps = {
+    guidelines: GuidelineConfig[];
+    height: number;
+    centerOffset: number;
+    containerWidth: number;
+    editorWidth: number;
+};
+export declare const GuidelineContainer: (props: ContainerProps) => jsx.JSX.Element;
+export {};

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

@@ -1 +1,2 @@
 export { guidelinePlugin } from './plugin';
+export type { GuidelineConfig } from './types';

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

@@ -1,6 +1,7 @@
 import { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
 import { DisplayGuideline, GuidelinePluginState } from './types';
+export declare const EMPTY_STATE: GuidelinePluginState;
 export declare const guidelinePlugin: NextEditorPlugin<'guideline', {
     dependencies: [
         typeof widthPlugin

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

@@ -1,15 +1,20 @@
 import { EditorView } from 'prosemirror-view';
-type Guideline = {
-    key?: string;
+export type Position = {
+    x: number;
+};
+type GuidelineConfig = {
+    key: string;
+    position: Position;
     active?: boolean;
     show?: boolean;
     style?: 'dashed' | 'solid';
     color?: string;
 };
 type GuidelinePluginState = {
-    guidelines: Guideline[];
+    guidelines: GuidelineConfig[];
 };
 interface GuidelinePluginOptions {
 }
-type DisplayGuideline = (view: EditorView) => void;
-export type { GuidelinePluginState, GuidelinePluginOptions, Guideline, DisplayGuideline, };
+type DisplayGrid = (props: Required<GuidelinePluginState>) => boolean;
+type DisplayGuideline = (view: EditorView) => DisplayGrid;
+export type { GuidelinePluginState, GuidelinePluginOptions, GuidelineConfig, DisplayGuideline, };

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

@@ -0,0 +1,10 @@
+import { EditorView } from 'prosemirror-view';
+import { GuidelineConfig } from './types';
+/**
+ * This function calculates the Editor's x axis of the center point
+ * in relation to the viewport
+ * @param editorView
+ * @returns x axis in number
+ */
+export declare const getEditorCenterX: (editorView: EditorView) => number;
+export declare const innerGuidelines: (editorContainerWidth: number, editorWidth?: number) => GuidelineConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-guideline",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "guideline plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -22,9 +22,13 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^74.2.0",
+    "@atlaskit/editor-common": "^74.4.0",
     "@atlaskit/editor-plugin-width": "^0.0.1",
+    "@atlaskit/editor-shared-styles": "^2.4.0",
+    "@atlaskit/theme": "^12.5.0",
+    "@atlaskit/tokens": "^1.4.2",
     "@babel/runtime": "^7.0.0",
+    "@emotion/react": "^11.7.1",
     "prosemirror-state": "1.3.4",
     "prosemirror-view": "1.23.7"
   },
@@ -33,8 +37,8 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-core": "^184.0.0",
-    "@atlaskit/editor-test-helpers": "^18.2.0",
+    "@atlaskit/editor-core": "^185.1.0",
+    "@atlaskit/editor-test-helpers": "^18.5.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",

package/report.api.md

@@ -20,17 +20,31 @@ import { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
 
 // @public (undocumented)
-type DisplayGuideline = (view: EditorView) => void;
+type DisplayGrid = (props: Required<GuidelinePluginState>) => boolean;
 
 // @public (undocumented)
-type Guideline = {
-  key?: string;
+type DisplayGuideline = (view: EditorView) => DisplayGrid;
+
+// @public (undocumented)
+export type GuidelineConfig = {
+  key: string;
+  position: GuidelinePosition;
   active?: boolean;
   show?: boolean;
   style?: 'dashed' | 'solid';
   color?: string;
 };
 
+// @public (undocumented)
+enum GuidelineContainerArea {
+  // (undocumented)
+  EditorContent = 'editorContent',
+  // (undocumented)
+  EditorLeftMargin = 'editorLeftMargin',
+  // (undocumented)
+  EditorRightMargin = 'editorRightMargin',
+}
+
 // @public (undocumented)
 export const guidelinePlugin: NextEditorPlugin<
   'guideline',
@@ -45,9 +59,28 @@ export const guidelinePlugin: NextEditorPlugin<
 
 // @public (undocumented)
 type GuidelinePluginState = {
-  guidelines: Guideline[];
+  guidelines: GuidelineConfig[];
 };
 
+// @public (undocumented)
+type GuidelinePosition = {
+  containerArea?: GuidelineContainerArea;
+} & PositionSide;
+
+// @public (undocumented)
+type PositionSide =
+  | {
+      left: PositionValue;
+      right?: never;
+    }
+  | {
+      right: PositionValue;
+      left?: never;
+    };
+
+// @public (undocumented)
+type PositionValue = 0 | `${number}%` | `${number}px`;
+
 // (No @packageDocumentation comment for this package)
 ```