@atlaskit/editor-plugin-guideline 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @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

package/dist/cjs/guideline.js

@@ -14,21 +14,30 @@ var BasicGuidelineStyles = (0, _react.css)({
   width: '1px',
   height: '100%',
   zIndex: 0,
-  transition: 'border-color 0.15s linear'
+  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 positionToStyle = function positionToStyle(position) {
-  var left = position.left,
-    right = position.right;
-  return left ? {
-    left: left
-  } : {
-    right: right
-  };
-};
 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,
-    style: positionToStyle(props.position)
+    css: [BasicGuidelineStyles, active && ActiveGuidelineStyles, !show && HiddenGuidelineStyles, style === 'dashed' && DashedGuidelineStyles],
+    className: "guideline",
+    style: {
+      left: "".concat(position, "px")
+    }
   });
 };
 exports.Guideline = Guideline;

package/dist/cjs/guildelineContainer.js

@@ -5,15 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GuidelineContainer = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("@emotion/react");
+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");
-var _types = require("./types");
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */
-var guidelineContainerStyles = (0, _react.css)({
+/** @jsx jsx */
+
+var guidelineContainerStyles = (0, _react2.css)({
   position: 'fixed',
   height: '100vh',
   width: '100%',
@@ -22,52 +21,39 @@ var guidelineContainerStyles = (0, _react.css)({
   border: 'none',
   maxWidth: "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px")
 });
-var guidelineSubContainerStyles = (0, _react.css)({
-  position: 'relative'
-});
-var groupGuidelines = function groupGuidelines(guidelines) {
-  var _guidelines$reduce;
-  return guidelines.reduce(function (acc, curr) {
-    var areaKey = curr.position.containerArea || _types.GuidelineContainerArea.EditorContent;
-    var currentList = acc[areaKey];
-    return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, areaKey, [].concat((0, _toConsumableArray2.default)(currentList), [curr])));
-  }, (_guidelines$reduce = {}, (0, _defineProperty2.default)(_guidelines$reduce, _types.GuidelineContainerArea.EditorLeftMargin, []), (0, _defineProperty2.default)(_guidelines$reduce, _types.GuidelineContainerArea.EditorContent, []), (0, _defineProperty2.default)(_guidelines$reduce, _types.GuidelineContainerArea.EditorRightMargin, []), _guidelines$reduce));
-};
-var GuidelineSubContainer = function GuidelineSubContainer(props) {
-  return (0, _react.jsx)("div", {
-    css: guidelineSubContainerStyles,
-    "data-container-id": props.containerId
-  }, props.guidelines.map(function (guideline) {
-    return (0, _react.jsx)(_guideline.Guideline, {
-      key: guideline.key,
-      position: guideline.position
-    });
-  }));
-};
 var GuidelineContainer = function GuidelineContainer(props) {
   var guidelines = props.guidelines,
     height = props.height,
-    editorWidth = props.editorWidth;
-  if (guidelines.length === 0) {
-    return null;
-  }
-  var guidelineGroups = groupGuidelines(guidelines);
-  return (0, _react.jsx)("div", {
+    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,
-      gridTemplateColumns: "[left] auto [editor] ".concat(editorWidth, "px [right] auto")
+      height: height
     },
     "data-testid": "guidelineContainer"
-  }, (0, _react.jsx)(GuidelineSubContainer, {
-    containerId: _types.GuidelineContainerArea.EditorLeftMargin,
-    guidelines: guidelineGroups[_types.GuidelineContainerArea.EditorLeftMargin]
-  }), (0, _react.jsx)(GuidelineSubContainer, {
-    containerId: _types.GuidelineContainerArea.EditorContent,
-    guidelines: guidelineGroups[_types.GuidelineContainerArea.EditorContent]
-  }), (0, _react.jsx)(GuidelineSubContainer, {
-    containerId: _types.GuidelineContainerArea.EditorRightMargin,
-    guidelines: guidelineGroups[_types.GuidelineContainerArea.EditorRightMargin]
+  }, 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

@@ -10,6 +10,7 @@ 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)({
@@ -66,6 +67,7 @@ var ContentComponent = function ContentComponent(_ref) {
   }, (0, _react.jsx)(_guildelineContainer.GuidelineContainer, {
     guidelines: guidelineState.guidelines,
     height: editorView.dom.scrollHeight,
+    centerOffset: (0, _utils.getEditorCenterX)(editorView),
     containerWidth: widthState.containerWidth,
     editorWidth: widthState.lineLength
   }));

package/dist/cjs/types.js

@@ -2,12 +2,4 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
-exports.GuidelineContainerArea = void 0;
-var GuidelineContainerArea = /*#__PURE__*/function (GuidelineContainerArea) {
-  GuidelineContainerArea["EditorLeftMargin"] = "editorLeftMargin";
-  GuidelineContainerArea["EditorContent"] = "editorContent";
-  GuidelineContainerArea["EditorRightMargin"] = "editorRightMargin";
-  return GuidelineContainerArea;
-}({});
-exports.GuidelineContainerArea = GuidelineContainerArea;
+});

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.2.0",
+	"version": "0.3.0",
 	"sideEffects": false
 }

package/dist/es2019/guideline.js

@@ -1,26 +1,36 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { N30A } from '@atlaskit/theme/colors';
+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,
-  transition: 'border-color 0.15s linear'
+  opacity: 1,
+  transition: 'border-color 0.15s linear, opacity 0.15s linear'
 });
-const positionToStyle = position => {
+const ActiveGuidelineStyles = css({
+  borderColor: `var(--ds-border-focused, ${B200})`
+});
+const HiddenGuidelineStyles = css({
+  opacity: 0
+});
+const DashedGuidelineStyles = css({
+  borderLeftStyle: 'dashed'
+});
+export const Guideline = props => {
   const {
-    left,
-    right
-  } = position;
-  return left ? {
-    left
-  } : {
-    right
-  };
-};
-export const Guideline = props => jsx("div", {
-  css: BasicGuidelineStyles,
-  style: positionToStyle(props.position)
-});
+    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

@@ -1,8 +1,8 @@
 /** @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';
-import { GuidelineContainerArea as Areas } from './types';
 const guidelineContainerStyles = css({
   position: 'fixed',
   height: '100vh',
@@ -12,53 +12,37 @@ const guidelineContainerStyles = css({
   border: 'none',
   maxWidth: `${akEditorFullWidthLayoutWidth}px`
 });
-const guidelineSubContainerStyles = css({
-  position: 'relative'
-});
-const groupGuidelines = guidelines => guidelines.reduce((acc, curr) => {
-  const areaKey = curr.position.containerArea || Areas.EditorContent;
-  const currentList = acc[areaKey];
-  return {
-    ...acc,
-    [areaKey]: [...currentList, curr]
-  };
-}, {
-  [Areas.EditorLeftMargin]: [],
-  [Areas.EditorContent]: [],
-  [Areas.EditorRightMargin]: []
-});
-const GuidelineSubContainer = props => jsx("div", {
-  css: guidelineSubContainerStyles,
-  "data-container-id": props.containerId
-}, props.guidelines.map(guideline => jsx(Guideline, {
-  key: guideline.key,
-  position: guideline.position
-})));
 export const GuidelineContainer = props => {
   const {
     guidelines,
     height,
-    editorWidth
+    editorWidth,
+    centerOffset
   } = props;
-  if (guidelines.length === 0) {
-    return null;
-  }
-  const guidelineGroups = groupGuidelines(guidelines);
+  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,
-      gridTemplateColumns: `[left] auto [editor] ${editorWidth}px [right] auto`
+      height
     },
     "data-testid": "guidelineContainer"
-  }, jsx(GuidelineSubContainer, {
-    containerId: Areas.EditorLeftMargin,
-    guidelines: guidelineGroups[Areas.EditorLeftMargin]
-  }), jsx(GuidelineSubContainer, {
-    containerId: Areas.EditorContent,
-    guidelines: guidelineGroups[Areas.EditorContent]
-  }), jsx(GuidelineSubContainer, {
-    containerId: Areas.EditorRightMargin,
-    guidelines: guidelineGroups[Areas.EditorRightMargin]
+  }, 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

@@ -5,6 +5,7 @@ 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%',
@@ -60,6 +61,7 @@ const ContentComponent = ({
   }, jsx(GuidelineContainer, {
     guidelines: guidelineState.guidelines,
     height: editorView.dom.scrollHeight,
+    centerOffset: getEditorCenterX(editorView),
     containerWidth: widthState.containerWidth,
     editorWidth: widthState.lineLength
   }));

package/dist/es2019/types.js

@@ -1,6 +1 @@
-export let GuidelineContainerArea = /*#__PURE__*/function (GuidelineContainerArea) {
-  GuidelineContainerArea["EditorLeftMargin"] = "editorLeftMargin";
-  GuidelineContainerArea["EditorContent"] = "editorContent";
-  GuidelineContainerArea["EditorRightMargin"] = "editorRightMargin";
-  return GuidelineContainerArea;
-}({});
+export {};

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.2.0",
+	"version": "0.3.0",
 	"sideEffects": false
 }

package/dist/esm/guideline.js

@@ -1,26 +1,35 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { N30A } from '@atlaskit/theme/colors';
+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,
-  transition: 'border-color 0.15s linear'
+  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'
 });
-var positionToStyle = function positionToStyle(position) {
-  var left = position.left,
-    right = position.right;
-  return left ? {
-    left: left
-  } : {
-    right: right
-  };
-};
 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,
-    style: positionToStyle(props.position)
+    css: [BasicGuidelineStyles, active && ActiveGuidelineStyles, !show && HiddenGuidelineStyles, style === 'dashed' && DashedGuidelineStyles],
+    className: "guideline",
+    style: {
+      left: "".concat(position, "px")
+    }
   });
 };

package/dist/esm/guildelineContainer.js

@@ -1,12 +1,9 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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';
-import { GuidelineContainerArea as Areas } from './types';
 var guidelineContainerStyles = css({
   position: 'fixed',
   height: '100vh',
@@ -16,51 +13,38 @@ var guidelineContainerStyles = css({
   border: 'none',
   maxWidth: "".concat(akEditorFullWidthLayoutWidth, "px")
 });
-var guidelineSubContainerStyles = css({
-  position: 'relative'
-});
-var groupGuidelines = function groupGuidelines(guidelines) {
-  var _guidelines$reduce;
-  return guidelines.reduce(function (acc, curr) {
-    var areaKey = curr.position.containerArea || Areas.EditorContent;
-    var currentList = acc[areaKey];
-    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, areaKey, [].concat(_toConsumableArray(currentList), [curr])));
-  }, (_guidelines$reduce = {}, _defineProperty(_guidelines$reduce, Areas.EditorLeftMargin, []), _defineProperty(_guidelines$reduce, Areas.EditorContent, []), _defineProperty(_guidelines$reduce, Areas.EditorRightMargin, []), _guidelines$reduce));
-};
-var GuidelineSubContainer = function GuidelineSubContainer(props) {
-  return jsx("div", {
-    css: guidelineSubContainerStyles,
-    "data-container-id": props.containerId
-  }, props.guidelines.map(function (guideline) {
-    return jsx(Guideline, {
-      key: guideline.key,
-      position: guideline.position
-    });
-  }));
-};
 export var GuidelineContainer = function GuidelineContainer(props) {
   var guidelines = props.guidelines,
     height = props.height,
-    editorWidth = props.editorWidth;
-  if (guidelines.length === 0) {
-    return null;
-  }
-  var guidelineGroups = groupGuidelines(guidelines);
+    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,
-      gridTemplateColumns: "[left] auto [editor] ".concat(editorWidth, "px [right] auto")
+      height: height
     },
     "data-testid": "guidelineContainer"
-  }, jsx(GuidelineSubContainer, {
-    containerId: Areas.EditorLeftMargin,
-    guidelines: guidelineGroups[Areas.EditorLeftMargin]
-  }), jsx(GuidelineSubContainer, {
-    containerId: Areas.EditorContent,
-    guidelines: guidelineGroups[Areas.EditorContent]
-  }), jsx(GuidelineSubContainer, {
-    containerId: Areas.EditorRightMargin,
-    guidelines: guidelineGroups[Areas.EditorRightMargin]
+  }, 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

@@ -5,6 +5,7 @@ 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%',
@@ -58,6 +59,7 @@ var ContentComponent = function ContentComponent(_ref) {
   }, jsx(GuidelineContainer, {
     guidelines: guidelineState.guidelines,
     height: editorView.dom.scrollHeight,
+    centerOffset: getEditorCenterX(editorView),
     containerWidth: widthState.containerWidth,
     editorWidth: widthState.lineLength
   }));

package/dist/esm/types.js

@@ -1,6 +1 @@
-export var GuidelineContainerArea = /*#__PURE__*/function (GuidelineContainerArea) {
-  GuidelineContainerArea["EditorLeftMargin"] = "editorLeftMargin";
-  GuidelineContainerArea["EditorContent"] = "editorContent";
-  GuidelineContainerArea["EditorRightMargin"] = "editorRightMargin";
-  return GuidelineContainerArea;
-}({});
+export {};

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.2.0",
+	"version": "0.3.0",
 	"sideEffects": false
 }

package/dist/types/guideline.d.ts

@@ -1,8 +1,10 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { GuidelinePosition } from './types';
 type Props = {
-    position: GuidelinePosition;
+    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

@@ -1,11 +1,11 @@
-/** @jsx jsx */
 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 | null;
+export declare const GuidelineContainer: (props: ContainerProps) => jsx.JSX.Element;
 export {};

package/dist/types/types.d.ts

@@ -1,23 +1,10 @@
 import { EditorView } from 'prosemirror-view';
-type PositionValue = `${number}px` | `${number}%` | 0;
-type PositionSide = {
-    left: PositionValue;
-    right?: never;
-} | {
-    right: PositionValue;
-    left?: never;
+export type Position = {
+    x: number;
 };
-export declare enum GuidelineContainerArea {
-    EditorLeftMargin = "editorLeftMargin",
-    EditorContent = "editorContent",
-    EditorRightMargin = "editorRightMargin"
-}
-type GuidelinePosition = {
-    containerArea?: GuidelineContainerArea;
-} & PositionSide;
 type GuidelineConfig = {
     key: string;
-    position: GuidelinePosition;
+    position: Position;
     active?: boolean;
     show?: boolean;
     style?: 'dashed' | 'solid';
@@ -30,4 +17,4 @@ interface GuidelinePluginOptions {
 }
 type DisplayGrid = (props: Required<GuidelinePluginState>) => boolean;
 type DisplayGuideline = (view: EditorView) => DisplayGrid;
-export type { GuidelinePluginState, GuidelinePluginOptions, GuidelineConfig, GuidelinePosition, DisplayGuideline, };
+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

@@ -1,8 +1,10 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { GuidelinePosition } from './types';
 type Props = {
-    position: GuidelinePosition;
+    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

@@ -1,11 +1,11 @@
-/** @jsx jsx */
 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 | null;
+export declare const GuidelineContainer: (props: ContainerProps) => jsx.JSX.Element;
 export {};

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

@@ -1,23 +1,10 @@
 import { EditorView } from 'prosemirror-view';
-type PositionValue = `${number}px` | `${number}%` | 0;
-type PositionSide = {
-    left: PositionValue;
-    right?: never;
-} | {
-    right: PositionValue;
-    left?: never;
+export type Position = {
+    x: number;
 };
-export declare enum GuidelineContainerArea {
-    EditorLeftMargin = "editorLeftMargin",
-    EditorContent = "editorContent",
-    EditorRightMargin = "editorRightMargin"
-}
-type GuidelinePosition = {
-    containerArea?: GuidelineContainerArea;
-} & PositionSide;
 type GuidelineConfig = {
     key: string;
-    position: GuidelinePosition;
+    position: Position;
     active?: boolean;
     show?: boolean;
     style?: 'dashed' | 'solid';
@@ -30,4 +17,4 @@ interface GuidelinePluginOptions {
 }
 type DisplayGrid = (props: Required<GuidelinePluginState>) => boolean;
 type DisplayGuideline = (view: EditorView) => DisplayGrid;
-export type { GuidelinePluginState, GuidelinePluginOptions, GuidelineConfig, GuidelinePosition, DisplayGuideline, };
+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.2.0",
+  "version": "0.3.0",
   "description": "guideline plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -22,7 +22,7 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^74.3.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",
@@ -37,7 +37,7 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-core": "^185.0.0",
+    "@atlaskit/editor-core": "^185.1.0",
     "@atlaskit/editor-test-helpers": "^18.5.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",

package/dist/cjs/constants.js

@@ -1,17 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DEFAULT_GRIDS = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var DEFAULT_GRIDS = (0, _toConsumableArray2.default)(Array(13).keys()).map(function (index) {
-  return {
-    key: "grid_".concat(index),
-    position: {
-      left: "".concat(index * 100 / 12, "%")
-    }
-  };
-});
-exports.DEFAULT_GRIDS = DEFAULT_GRIDS;

package/dist/es2019/constants.js

@@ -1,6 +0,0 @@
-export const DEFAULT_GRIDS = [...Array(13).keys()].map(index => ({
-  key: `grid_${index}`,
-  position: {
-    left: `${index * 100 / 12}%`
-  }
-}));

package/dist/esm/constants.js

@@ -1,9 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-export var DEFAULT_GRIDS = _toConsumableArray(Array(13).keys()).map(function (index) {
-  return {
-    key: "grid_".concat(index),
-    position: {
-      left: "".concat(index * 100 / 12, "%")
-    }
-  };
-});

package/dist/types/constants.d.ts

@@ -1,2 +0,0 @@
-import { GuidelineConfig } from './types';
-export declare const DEFAULT_GRIDS: GuidelineConfig[];

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

@@ -1,2 +0,0 @@
-import { GuidelineConfig } from './types';
-export declare const DEFAULT_GRIDS: GuidelineConfig[];