@atlaskit/editor-plugin-guideline 0.3.4 → 0.3.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-guideline
 
+## 0.3.6
+
+### Patch Changes
+
+- [`3d065399b07`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3d065399b07) - ED-18969 refactor guideline plugin interface.
+
+## 0.3.5
+
+### Patch Changes
+
+- [`e8885f55db6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e8885f55db6) - ED-18969 implement relative guides support
+
 ## 0.3.4
 
 ### Patch Changes

package/README.md

@@ -85,15 +85,19 @@ type GuidelineConfig = {
   ...
   active?: boolean;
   show?: boolean;
-  style?: 'dashed' | 'solid'; // default solid
-  color?: CSSToken;
+  styles: {
+    lineStyle?: 'dashed' | 'solid'; // default solid
+    color?: CSSToken;
+    capStyle?: 'line'
+  }
 };
 ```
 
 - `active` default `false`, equivalent to the `highlight` state in the `grid` plugin.
-- `style` default `solid`, and we also support `dashed`
 - `show` default `true` and you can also hide a guideline, could be useful when you need animations.
-- `color`: default `undefined` you can override the color of a guideline with a valid `css` color
+- `styles.color`: default `undefined` you can override the color of a guideline with a valid `css` color
+- `styles.lineStyle` default `solid`, and we also support `dashed`
+- `styles.capStyle` default undefined, and support `line`
 
 ## TODO
 - [ ] Add unit/vr tests

package/dist/cjs/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VAR_POSITION_OFFSET_Y = exports.VAR_POSITION_OFFSET_X = void 0;
+var VAR_POSITION_OFFSET_X = '--guideline-offset-x';
+exports.VAR_POSITION_OFFSET_X = VAR_POSITION_OFFSET_X;
+var VAR_POSITION_OFFSET_Y = '--guideline-offset-y';
+exports.VAR_POSITION_OFFSET_Y = VAR_POSITION_OFFSET_Y;

package/dist/cjs/guideline.js

@@ -7,43 +7,86 @@ Object.defineProperty(exports, "__esModule", {
 exports.Guideline = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
+var _guideline = require("@atlaskit/editor-common/guideline");
 var _colors = require("@atlaskit/theme/colors");
+var _positionStyles = require("./positionStyles");
 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 BasicGuidelineStyles = (0, _react.css)({
-  borderLeft: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30A, ")")),
+var basicGuidelineStyles = (0, _react.css)({
   position: 'absolute',
-  width: '1px',
-  height: '100%',
   zIndex: 0,
-  transform: 'translateX(-50%)',
   opacity: 1,
-  transition: 'border-color 0.15s linear, opacity 0.15s linear'
+  transition: 'border-color 0.15s linear, opacity 0.15s linear',
+  borderColor: "".concat("var(--ds-border, ".concat(_colors.N30A, ")")),
+  borderStyle: 'solid'
+});
+var verticalStyles = (0, _react.css)({
+  borderWidth: "0 0 0 1px",
+  width: '1px',
+  height: '100%',
+  transform: 'translateX(-50%)'
+});
+var horizontalStyles = (0, _react.css)({
+  borderWidth: "1px 0 0 0",
+  width: '100%',
+  height: '1px',
+  transform: 'translateY(-50%)'
 });
-var ActiveGuidelineStyles = (0, _react.css)({
-  borderColor: "var(--ds-border-focused, ".concat(_colors.B200, ")")
+var activeGuidelineStyles = (0, _react.css)({
+  borderColor: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
+  '&:before, &:after': {
+    backgroundColor: "var(--ds-border-focused, ".concat(_colors.B200, ")")
+  }
 });
-var HiddenGuidelineStyles = (0, _react.css)({
+var hiddenGuidelineStyles = (0, _react.css)({
   opacity: 0
 });
-var DashedGuidelineStyles = (0, _react.css)({
+var dashedGuidelineStyles = (0, _react.css)({
   borderLeftStyle: 'dashed'
 });
+var verticalCapStyles = (0, _react.css)({
+  '&:before, &:after': {
+    backgroundColor: "var(--ds-border, ".concat(_colors.N30A, ")"),
+    content: '""',
+    position: 'absolute',
+    height: '10px',
+    width: '1px',
+    transform: 'translateY(-50%)'
+  },
+  '&:after': {
+    right: 0
+  }
+});
+var horizontalCapStyles = (0, _react.css)({
+  '&:before, &:after': {
+    backgroundColor: "".concat("var(--ds-border, ".concat(_colors.N30A, ")")),
+    content: '""',
+    position: 'absolute',
+    height: '1px',
+    width: '10px',
+    transform: 'translateX(-50%)'
+  },
+  '&:after': {
+    bottom: 0
+  }
+});
 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,
-    color = props.color;
+    _props$styles = props.styles,
+    styles = _props$styles === void 0 ? {} : _props$styles;
+  var isVerticalPos = (0, _guideline.isVerticalPosition)(position);
+  var lineStyle = styles.lineStyle,
+    color = styles.color,
+    capStyle = styles.capStyle;
   return (0, _react.jsx)("div", {
-    css: [BasicGuidelineStyles, active && ActiveGuidelineStyles, !show && HiddenGuidelineStyles, style === 'dashed' && DashedGuidelineStyles],
-    className: "guideline",
-    style: _objectSpread({
-      left: "".concat(position, "px")
-    }, color && {
+    css: [basicGuidelineStyles, isVerticalPos ? verticalStyles : horizontalStyles, capStyle === 'line' && (isVerticalPos ? horizontalCapStyles : verticalCapStyles), active && activeGuidelineStyles, !show && hiddenGuidelineStyles, lineStyle === 'dashed' && dashedGuidelineStyles],
+    style: _objectSpread(_objectSpread({}, color && {
       borderColor: "".concat(color)
-    })
+    }), (0, _positionStyles.getPositionStyles)(position)),
+    className: "guideline"
   });
 };
 exports.Guideline = Guideline;

package/dist/cjs/{guildelineContainer.js → guidelineContainer.js}

@@ -5,13 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GuidelineContainer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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 _constants = require("./constants");
 var _guideline = require("./guideline");
+var _excluded = ["key"];
 /** @jsx jsx */
-
 var guidelineContainerStyles = (0, _react2.css)({
   position: 'fixed',
   height: '100vh',
@@ -22,6 +26,7 @@ var guidelineContainerStyles = (0, _react2.css)({
   maxWidth: "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px")
 });
 var GuidelineContainer = function GuidelineContainer(props) {
+  var _style;
   var guidelines = props.guidelines,
     height = props.height,
     editorWidth = props.editorWidth,
@@ -39,21 +44,18 @@ var GuidelineContainer = function GuidelineContainer(props) {
       setOffset(centerOffset - rect.x);
     }
   }, [centerOffset, guidelines, editorWidth]);
+  var style = (_style = {}, (0, _defineProperty2.default)(_style, _constants.VAR_POSITION_OFFSET_X, "".concat(offset, "px")), (0, _defineProperty2.default)(_style, _constants.VAR_POSITION_OFFSET_Y, "0px"), (0, _defineProperty2.default)(_style, "height", height), _style);
   return (0, _react2.jsx)("div", {
     ref: ref,
     css: guidelineContainerStyles,
-    style: {
-      height: height
-    },
+    style: style,
     "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
-    });
+    var key = guideline.key,
+      guidelineProps = (0, _objectWithoutProperties2.default)(guideline, _excluded);
+    return (0, _react2.jsx)(_guideline.Guideline, (0, _extends2.default)({
+      key: key
+    }, guidelineProps));
   }));
 };
 exports.GuidelineContainer = GuidelineContainer;

package/dist/cjs/plugin.js

@@ -9,7 +9,7 @@ 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 _guidelineContainer = require("./guidelineContainer");
 var _utils = require("./utils");
 /** @jsx jsx */
 
@@ -64,7 +64,7 @@ var ContentComponent = function ContentComponent(_ref) {
   }
   return (0, _react.jsx)("div", {
     css: guidelineStyles
-  }, (0, _react.jsx)(_guildelineContainer.GuidelineContainer, {
+  }, (0, _react.jsx)(_guidelineContainer.GuidelineContainer, {
     guidelines: guidelineState.guidelines,
     height: editorView.dom.scrollHeight,
     centerOffset: (0, _utils.getEditorCenterX)(editorView),

package/dist/cjs/positionStyles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isNumber = exports.getPositionStyles = void 0;
+var _guideline = require("@atlaskit/editor-common/guideline");
+var _constants = require("./constants");
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
+
+var isNumber = function isNumber(x) {
+  return typeof x === 'number' && !isNaN(x) && isFinite(x);
+};
+exports.isNumber = isNumber;
+var getXPosition = function getXPosition(pixel) {
+  return isNumber(pixel) ? "calc(".concat(pixel, "px + var(").concat(_constants.VAR_POSITION_OFFSET_X, ", '0px'))") : 'unset';
+};
+var getYPosition = function getYPosition(pixel) {
+  return isNumber(pixel) ? "calc(".concat(pixel, "px + var(").concat(_constants.VAR_POSITION_OFFSET_Y, ", '0px'))") : 'unset';
+};
+var getPositionStyles = function getPositionStyles(pos) {
+  var _pos$y, _pos$x;
+  return (0, _guideline.isVerticalPosition)(pos) ? {
+    left: getXPosition(pos.x),
+    top: getYPosition((_pos$y = pos.y) === null || _pos$y === void 0 ? void 0 : _pos$y.start),
+    height: pos.y ? "".concat(pos.y.end - pos.y.start, "px") : '100%'
+  } : {
+    top: getYPosition(pos.y),
+    left: getXPosition((_pos$x = pos.x) === null || _pos$x === void 0 ? void 0 : _pos$x.start),
+    width: pos.x ? "".concat(pos.x.end - pos.x.start, "px") : '100%'
+  };
+};
+exports.getPositionStyles = getPositionStyles;

package/dist/cjs/version.json

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

package/dist/es2019/constants.js

@@ -0,0 +1,2 @@
+export const VAR_POSITION_OFFSET_X = '--guideline-offset-x';
+export const VAR_POSITION_OFFSET_Y = '--guideline-offset-y';

package/dist/es2019/guideline.js

@@ -1,41 +1,87 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
+import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
 import { B200, N30A } from '@atlaskit/theme/colors';
-const BasicGuidelineStyles = css({
-  borderLeft: `1px solid ${`var(--ds-border, ${N30A})`}`,
+import { getPositionStyles } from './positionStyles';
+const basicGuidelineStyles = css({
   position: 'absolute',
-  width: '1px',
-  height: '100%',
   zIndex: 0,
-  transform: 'translateX(-50%)',
   opacity: 1,
-  transition: 'border-color 0.15s linear, opacity 0.15s linear'
+  transition: 'border-color 0.15s linear, opacity 0.15s linear',
+  borderColor: `${`var(--ds-border, ${N30A})`}`,
+  borderStyle: 'solid'
+});
+const verticalStyles = css({
+  borderWidth: `0 0 0 1px`,
+  width: '1px',
+  height: '100%',
+  transform: 'translateX(-50%)'
 });
-const ActiveGuidelineStyles = css({
-  borderColor: `var(--ds-border-focused, ${B200})`
+const horizontalStyles = css({
+  borderWidth: `1px 0 0 0`,
+  width: '100%',
+  height: '1px',
+  transform: 'translateY(-50%)'
 });
-const HiddenGuidelineStyles = css({
+const activeGuidelineStyles = css({
+  borderColor: `var(--ds-border-focused, ${B200})`,
+  '&:before, &:after': {
+    backgroundColor: `var(--ds-border-focused, ${B200})`
+  }
+});
+const hiddenGuidelineStyles = css({
   opacity: 0
 });
-const DashedGuidelineStyles = css({
+const dashedGuidelineStyles = css({
   borderLeftStyle: 'dashed'
 });
+const verticalCapStyles = css({
+  '&:before, &:after': {
+    backgroundColor: `var(--ds-border, ${N30A})`,
+    content: '""',
+    position: 'absolute',
+    height: '10px',
+    width: '1px',
+    transform: 'translateY(-50%)'
+  },
+  '&:after': {
+    right: 0
+  }
+});
+const horizontalCapStyles = css({
+  '&:before, &:after': {
+    backgroundColor: `${`var(--ds-border, ${N30A})`}`,
+    content: '""',
+    position: 'absolute',
+    height: '1px',
+    width: '10px',
+    transform: 'translateX(-50%)'
+  },
+  '&:after': {
+    bottom: 0
+  }
+});
 export const Guideline = props => {
   const {
     position,
     active,
     show = true,
-    style,
-    color
+    styles = {}
   } = props;
+  const isVerticalPos = isVerticalPosition(position);
+  const {
+    lineStyle,
+    color,
+    capStyle
+  } = styles;
   return jsx("div", {
-    css: [BasicGuidelineStyles, active && ActiveGuidelineStyles, !show && HiddenGuidelineStyles, style === 'dashed' && DashedGuidelineStyles],
-    className: "guideline",
+    css: [basicGuidelineStyles, isVerticalPos ? verticalStyles : horizontalStyles, capStyle === 'line' && (isVerticalPos ? horizontalCapStyles : verticalCapStyles), active && activeGuidelineStyles, !show && hiddenGuidelineStyles, lineStyle === 'dashed' && dashedGuidelineStyles],
     style: {
-      left: `${position}px`,
       ...(color && {
         borderColor: `${color}`
-      })
-    }
+      }),
+      ...getPositionStyles(position)
+    },
+    className: "guideline"
   });
 };

package/dist/es2019/{guildelineContainer.js → guidelineContainer.js}

@@ -1,7 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useLayoutEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { VAR_POSITION_OFFSET_X, VAR_POSITION_OFFSET_Y } from './constants';
 import { Guideline } from './guideline';
 const guidelineContainerStyles = css({
   position: 'fixed',
@@ -29,20 +31,23 @@ export const GuidelineContainer = props => {
       setOffset(centerOffset - rect.x);
     }
   }, [centerOffset, guidelines, editorWidth]);
+  const style = {
+    [VAR_POSITION_OFFSET_X]: `${offset}px`,
+    [VAR_POSITION_OFFSET_Y]: `0px`,
+    height
+  };
   return jsx("div", {
     ref: ref,
     css: guidelineContainerStyles,
-    style: {
-      height
-    },
+    style: style,
     "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
-    });
+    const {
+      key,
+      ...guidelineProps
+    } = guideline;
+    return jsx(Guideline, _extends({
+      key: key
+    }, guidelineProps));
   }));
 };

package/dist/es2019/plugin.js

@@ -4,7 +4,7 @@ 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 { GuidelineContainer } from './guidelineContainer';
 import { getEditorCenterX } from './utils';
 const guidelineStyles = css({
   position: 'absolute',

package/dist/es2019/positionStyles.js

@@ -0,0 +1,19 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
+
+import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
+import { VAR_POSITION_OFFSET_X, VAR_POSITION_OFFSET_Y } from './constants';
+export const isNumber = x => typeof x === 'number' && !isNaN(x) && isFinite(x);
+const getXPosition = pixel => isNumber(pixel) ? `calc(${pixel}px + var(${VAR_POSITION_OFFSET_X}, '0px'))` : 'unset';
+const getYPosition = pixel => isNumber(pixel) ? `calc(${pixel}px + var(${VAR_POSITION_OFFSET_Y}, '0px'))` : 'unset';
+export const getPositionStyles = pos => {
+  var _pos$y, _pos$x;
+  return isVerticalPosition(pos) ? {
+    left: getXPosition(pos.x),
+    top: getYPosition((_pos$y = pos.y) === null || _pos$y === void 0 ? void 0 : _pos$y.start),
+    height: pos.y ? `${pos.y.end - pos.y.start}px` : '100%'
+  } : {
+    top: getYPosition(pos.y),
+    left: getXPosition((_pos$x = pos.x) === null || _pos$x === void 0 ? void 0 : _pos$x.start),
+    width: pos.x ? `${pos.x.end - pos.x.start}px` : '100%'
+  };
+};

package/dist/es2019/version.json

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

package/dist/esm/constants.js

@@ -0,0 +1,2 @@
+export var VAR_POSITION_OFFSET_X = '--guideline-offset-x';
+export var VAR_POSITION_OFFSET_Y = '--guideline-offset-y';

package/dist/esm/guideline.js

@@ -3,40 +3,83 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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; }
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
+import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
 import { B200, N30A } from '@atlaskit/theme/colors';
-var BasicGuidelineStyles = css({
-  borderLeft: "1px solid ".concat("var(--ds-border, ".concat(N30A, ")")),
+import { getPositionStyles } from './positionStyles';
+var basicGuidelineStyles = css({
   position: 'absolute',
-  width: '1px',
-  height: '100%',
   zIndex: 0,
-  transform: 'translateX(-50%)',
   opacity: 1,
-  transition: 'border-color 0.15s linear, opacity 0.15s linear'
+  transition: 'border-color 0.15s linear, opacity 0.15s linear',
+  borderColor: "".concat("var(--ds-border, ".concat(N30A, ")")),
+  borderStyle: 'solid'
+});
+var verticalStyles = css({
+  borderWidth: "0 0 0 1px",
+  width: '1px',
+  height: '100%',
+  transform: 'translateX(-50%)'
+});
+var horizontalStyles = css({
+  borderWidth: "1px 0 0 0",
+  width: '100%',
+  height: '1px',
+  transform: 'translateY(-50%)'
 });
-var ActiveGuidelineStyles = css({
-  borderColor: "var(--ds-border-focused, ".concat(B200, ")")
+var activeGuidelineStyles = css({
+  borderColor: "var(--ds-border-focused, ".concat(B200, ")"),
+  '&:before, &:after': {
+    backgroundColor: "var(--ds-border-focused, ".concat(B200, ")")
+  }
 });
-var HiddenGuidelineStyles = css({
+var hiddenGuidelineStyles = css({
   opacity: 0
 });
-var DashedGuidelineStyles = css({
+var dashedGuidelineStyles = css({
   borderLeftStyle: 'dashed'
 });
+var verticalCapStyles = css({
+  '&:before, &:after': {
+    backgroundColor: "var(--ds-border, ".concat(N30A, ")"),
+    content: '""',
+    position: 'absolute',
+    height: '10px',
+    width: '1px',
+    transform: 'translateY(-50%)'
+  },
+  '&:after': {
+    right: 0
+  }
+});
+var horizontalCapStyles = css({
+  '&:before, &:after': {
+    backgroundColor: "".concat("var(--ds-border, ".concat(N30A, ")")),
+    content: '""',
+    position: 'absolute',
+    height: '1px',
+    width: '10px',
+    transform: 'translateX(-50%)'
+  },
+  '&:after': {
+    bottom: 0
+  }
+});
 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,
-    color = props.color;
+    _props$styles = props.styles,
+    styles = _props$styles === void 0 ? {} : _props$styles;
+  var isVerticalPos = isVerticalPosition(position);
+  var lineStyle = styles.lineStyle,
+    color = styles.color,
+    capStyle = styles.capStyle;
   return jsx("div", {
-    css: [BasicGuidelineStyles, active && ActiveGuidelineStyles, !show && HiddenGuidelineStyles, style === 'dashed' && DashedGuidelineStyles],
-    className: "guideline",
-    style: _objectSpread({
-      left: "".concat(position, "px")
-    }, color && {
+    css: [basicGuidelineStyles, isVerticalPos ? verticalStyles : horizontalStyles, capStyle === 'line' && (isVerticalPos ? horizontalCapStyles : verticalCapStyles), active && activeGuidelineStyles, !show && hiddenGuidelineStyles, lineStyle === 'dashed' && dashedGuidelineStyles],
+    style: _objectSpread(_objectSpread({}, color && {
       borderColor: "".concat(color)
-    })
+    }), getPositionStyles(position)),
+    className: "guideline"
   });
 };

package/dist/esm/{guildelineContainer.js → guidelineContainer.js}

@@ -1,8 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["key"];
 /** @jsx jsx */
 import { useLayoutEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { VAR_POSITION_OFFSET_X, VAR_POSITION_OFFSET_Y } from './constants';
 import { Guideline } from './guideline';
 var guidelineContainerStyles = css({
   position: 'fixed',
@@ -14,6 +19,7 @@ var guidelineContainerStyles = css({
   maxWidth: "".concat(akEditorFullWidthLayoutWidth, "px")
 });
 export var GuidelineContainer = function GuidelineContainer(props) {
+  var _style;
   var guidelines = props.guidelines,
     height = props.height,
     editorWidth = props.editorWidth,
@@ -31,20 +37,17 @@ export var GuidelineContainer = function GuidelineContainer(props) {
       setOffset(centerOffset - rect.x);
     }
   }, [centerOffset, guidelines, editorWidth]);
+  var style = (_style = {}, _defineProperty(_style, VAR_POSITION_OFFSET_X, "".concat(offset, "px")), _defineProperty(_style, VAR_POSITION_OFFSET_Y, "0px"), _defineProperty(_style, "height", height), _style);
   return jsx("div", {
     ref: ref,
     css: guidelineContainerStyles,
-    style: {
-      height: height
-    },
+    style: style,
     "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
-    });
+    var key = guideline.key,
+      guidelineProps = _objectWithoutProperties(guideline, _excluded);
+    return jsx(Guideline, _extends({
+      key: key
+    }, guidelineProps));
   }));
 };

package/dist/esm/plugin.js

@@ -4,7 +4,7 @@ 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 { GuidelineContainer } from './guidelineContainer';
 import { getEditorCenterX } from './utils';
 var guidelineStyles = css({
   position: 'absolute',

package/dist/esm/positionStyles.js

@@ -0,0 +1,25 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
+
+import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
+import { VAR_POSITION_OFFSET_X, VAR_POSITION_OFFSET_Y } from './constants';
+export var isNumber = function isNumber(x) {
+  return typeof x === 'number' && !isNaN(x) && isFinite(x);
+};
+var getXPosition = function getXPosition(pixel) {
+  return isNumber(pixel) ? "calc(".concat(pixel, "px + var(").concat(VAR_POSITION_OFFSET_X, ", '0px'))") : 'unset';
+};
+var getYPosition = function getYPosition(pixel) {
+  return isNumber(pixel) ? "calc(".concat(pixel, "px + var(").concat(VAR_POSITION_OFFSET_Y, ", '0px'))") : 'unset';
+};
+export var getPositionStyles = function getPositionStyles(pos) {
+  var _pos$y, _pos$x;
+  return isVerticalPosition(pos) ? {
+    left: getXPosition(pos.x),
+    top: getYPosition((_pos$y = pos.y) === null || _pos$y === void 0 ? void 0 : _pos$y.start),
+    height: pos.y ? "".concat(pos.y.end - pos.y.start, "px") : '100%'
+  } : {
+    top: getYPosition(pos.y),
+    left: getXPosition((_pos$x = pos.x) === null || _pos$x === void 0 ? void 0 : _pos$x.start),
+    width: pos.x ? "".concat(pos.x.end - pos.x.start, "px") : '100%'
+  };
+};

package/dist/esm/version.json

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

package/dist/types/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const VAR_POSITION_OFFSET_X = "--guideline-offset-x";
+export declare const VAR_POSITION_OFFSET_Y = "--guideline-offset-y";

package/dist/types/guideline.d.ts

@@ -1,12 +1,4 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { CSSToken } from '@atlaskit/tokens';
-type Props = {
-    position: number;
-    active?: boolean;
-    show?: boolean;
-    style?: 'dashed' | 'solid';
-    color?: CSSToken;
-};
-export declare const Guideline: (props: Props) => jsx.JSX.Element;
-export {};
+import { GuidelineConfig } from './types';
+export declare const Guideline: (props: Omit<GuidelineConfig, 'key'>) => jsx.JSX.Element;

package/dist/types/positionStyles.d.ts

@@ -0,0 +1,4 @@
+import type { CSSProperties } from 'react';
+import { Position } from './types';
+export declare const isNumber: (x: unknown) => x is number;
+export declare const getPositionStyles: (pos: Position) => CSSProperties;

package/dist/types/types.d.ts

@@ -1,21 +1 @@
-import { EditorView } from 'prosemirror-view';
-import { CSSToken } from '@atlaskit/tokens';
-export type Position = {
-    x: number;
-};
-type GuidelineConfig = {
-    key: string;
-    position: Position;
-    active?: boolean;
-    show?: boolean;
-    style?: 'dashed' | 'solid';
-    color?: CSSToken;
-};
-type GuidelinePluginState = {
-    guidelines: GuidelineConfig[];
-};
-interface GuidelinePluginOptions {
-}
-type DisplayGrid = (props: Required<GuidelinePluginState>) => boolean;
-type DisplayGuideline = (view: EditorView) => DisplayGrid;
-export type { GuidelinePluginState, GuidelinePluginOptions, GuidelineConfig, DisplayGuideline, };
+export type { WidthTypes, Position, VerticalPosition, HorizontalPosition, GuidelineConfig, GuidelinePluginState, GuidelinePluginOptions, DisplayGuideline, DisplayGrid, } from '@atlaskit/editor-common/guideline';

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

@@ -0,0 +1,2 @@
+export declare const VAR_POSITION_OFFSET_X = "--guideline-offset-x";
+export declare const VAR_POSITION_OFFSET_Y = "--guideline-offset-y";

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

@@ -1,12 +1,4 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { CSSToken } from '@atlaskit/tokens';
-type Props = {
-    position: number;
-    active?: boolean;
-    show?: boolean;
-    style?: 'dashed' | 'solid';
-    color?: CSSToken;
-};
-export declare const Guideline: (props: Props) => jsx.JSX.Element;
-export {};
+import { GuidelineConfig } from './types';
+export declare const Guideline: (props: Omit<GuidelineConfig, 'key'>) => jsx.JSX.Element;

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

@@ -0,0 +1,4 @@
+import type { CSSProperties } from 'react';
+import { Position } from './types';
+export declare const isNumber: (x: unknown) => x is number;
+export declare const getPositionStyles: (pos: Position) => CSSProperties;

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

@@ -1,21 +1 @@
-import { EditorView } from 'prosemirror-view';
-import { CSSToken } from '@atlaskit/tokens';
-export type Position = {
-    x: number;
-};
-type GuidelineConfig = {
-    key: string;
-    position: Position;
-    active?: boolean;
-    show?: boolean;
-    style?: 'dashed' | 'solid';
-    color?: CSSToken;
-};
-type GuidelinePluginState = {
-    guidelines: GuidelineConfig[];
-};
-interface GuidelinePluginOptions {
-}
-type DisplayGrid = (props: Required<GuidelinePluginState>) => boolean;
-type DisplayGuideline = (view: EditorView) => DisplayGrid;
-export type { GuidelinePluginState, GuidelinePluginOptions, GuidelineConfig, DisplayGuideline, };
+export type { WidthTypes, Position, VerticalPosition, HorizontalPosition, GuidelineConfig, GuidelinePluginState, GuidelinePluginOptions, DisplayGuideline, DisplayGrid, } from '@atlaskit/editor-common/guideline';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-guideline",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "guideline plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -23,11 +23,11 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^74.15.0",
+    "@atlaskit/editor-common": "^74.26.0",
     "@atlaskit/editor-plugin-width": "^0.1.0",
-    "@atlaskit/editor-shared-styles": "^2.4.0",
+    "@atlaskit/editor-shared-styles": "^2.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "prosemirror-state": "1.3.4",
@@ -37,6 +37,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
+    "@af/visual-regression": "*",
     "@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",

package/report.api.md

@@ -15,26 +15,13 @@
 <!--SECTION START: Main Entry Types-->
 
 ```ts
-import { CSSToken } from '@atlaskit/tokens';
-import { EditorView } from 'prosemirror-view';
+import { DisplayGuideline } from '@atlaskit/editor-common/guideline';
+import { GuidelineConfig } from '@atlaskit/editor-common/guideline';
+import { GuidelinePluginState } from '@atlaskit/editor-common/guideline';
 import { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
 
-// @public (undocumented)
-type DisplayGrid = (props: Required<GuidelinePluginState>) => boolean;
-
-// @public (undocumented)
-type DisplayGuideline = (view: EditorView) => DisplayGrid;
-
-// @public (undocumented)
-export type GuidelineConfig = {
-  key: string;
-  position: Position;
-  active?: boolean;
-  show?: boolean;
-  style?: 'dashed' | 'solid';
-  color?: CSSToken;
-};
+export { GuidelineConfig };
 
 // @public (undocumented)
 export const guidelinePlugin: NextEditorPlugin<
@@ -48,16 +35,6 @@ export const guidelinePlugin: NextEditorPlugin<
   }
 >;
 
-// @public (undocumented)
-type GuidelinePluginState = {
-  guidelines: GuidelineConfig[];
-};
-
-// @public (undocumented)
-type Position = {
-  x: number;
-};
-
 // (No @packageDocumentation comment for this package)
 ```
 

package/tmp/api-report-tmp.d.ts

@@ -4,26 +4,13 @@
 
 ```ts
 
-import { CSSToken } from '@atlaskit/tokens';
-import { EditorView } from 'prosemirror-view';
+import { DisplayGuideline } from '@atlaskit/editor-common/guideline';
+import { GuidelineConfig } from '@atlaskit/editor-common/guideline';
+import { GuidelinePluginState } from '@atlaskit/editor-common/guideline';
 import { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
 
-// @public (undocumented)
-type DisplayGrid = (props: Required<GuidelinePluginState>) => boolean;
-
-// @public (undocumented)
-type DisplayGuideline = (view: EditorView) => DisplayGrid;
-
-// @public (undocumented)
-export type GuidelineConfig = {
-    key: string;
-    position: Position;
-    active?: boolean;
-    show?: boolean;
-    style?: 'dashed' | 'solid';
-    color?: CSSToken;
-};
+export { GuidelineConfig }
 
 // @public (undocumented)
 export const guidelinePlugin: NextEditorPlugin<'guideline', {
@@ -34,16 +21,6 @@ export const guidelinePlugin: NextEditorPlugin<'guideline', {
     };
 }>;
 
-// @public (undocumented)
-type GuidelinePluginState = {
-    guidelines: GuidelineConfig[];
-};
-
-// @public (undocumented)
-type Position = {
-    x: number;
-};
-
 // (No @packageDocumentation comment for this package)
 
 ```