@atlaskit/editor-plugin-guideline 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1 +1,12 @@
 # @atlaskit/editor-plugin-guideline
+
+## 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/constants.js

@@ -0,0 +1,17 @@
+"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/cjs/guideline.js

@@ -0,0 +1,34 @@
+"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,
+  transition: 'border-color 0.15s linear'
+});
+var positionToStyle = function positionToStyle(position) {
+  var left = position.left,
+    right = position.right;
+  return left ? {
+    left: left
+  } : {
+    right: right
+  };
+};
+var Guideline = function Guideline(props) {
+  return (0, _react.jsx)("div", {
+    css: BasicGuidelineStyles,
+    style: positionToStyle(props.position)
+  });
+};
+exports.Guideline = Guideline;

package/dist/cjs/guildelineContainer.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 _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)({
+  position: 'fixed',
+  height: '100vh',
+  width: '100%',
+  display: 'grid',
+  pointerEvents: 'none',
+  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", {
+    css: guidelineContainerStyles,
+    style: {
+      height: height,
+      gridTemplateColumns: "[left] auto [editor] ".concat(editorWidth, "px [right] auto")
+    },
+    "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]
+  }));
+};
+exports.GuidelineContainer = GuidelineContainer;

package/dist/cjs/plugin.js

@@ -1,19 +1,41 @@
 "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");
+/** @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 +58,17 @@ 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,
+    containerWidth: widthState.containerWidth,
+    editorWidth: widthState.lineLength
+  }));
 };
 var guidelinePlugin = function guidelinePlugin(options, api) {
   return {
@@ -63,7 +92,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/types.js

@@ -2,4 +2,12 @@
 
 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/version.json

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

package/dist/es2019/constants.js

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

package/dist/es2019/guideline.js

@@ -0,0 +1,26 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { 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'
+});
+const positionToStyle = position => {
+  const {
+    left,
+    right
+  } = position;
+  return left ? {
+    left
+  } : {
+    right
+  };
+};
+export const Guideline = props => jsx("div", {
+  css: BasicGuidelineStyles,
+  style: positionToStyle(props.position)
+});

package/dist/es2019/guildelineContainer.js

@@ -0,0 +1,64 @@
+/** @jsx jsx */
+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',
+  width: '100%',
+  display: 'grid',
+  pointerEvents: 'none',
+  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
+  } = props;
+  if (guidelines.length === 0) {
+    return null;
+  }
+  const guidelineGroups = groupGuidelines(guidelines);
+  return jsx("div", {
+    css: guidelineContainerStyles,
+    style: {
+      height,
+      gridTemplateColumns: `[left] auto [editor] ${editorWidth}px [right] auto`
+    },
+    "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]
+  }));
+};

package/dist/es2019/plugin.js

@@ -1,10 +1,31 @@
-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';
+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 +52,17 @@ 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,
+    containerWidth: widthState.containerWidth,
+    editorWidth: widthState.lineLength
+  }));
 };
 export const guidelinePlugin = (options, api) => ({
   name: 'guideline',
@@ -55,7 +83,7 @@ export const guidelinePlugin = (options, api) => ({
   },
   contentComponent: ({
     editorView
-  }) => /*#__PURE__*/React.createElement(ContentComponent, {
+  }) => jsx(ContentComponent, {
     editorView: editorView,
     options: options,
     api: api

package/dist/es2019/types.js

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

package/dist/es2019/version.json

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

package/dist/esm/constants.js

@@ -0,0 +1,9 @@
+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/esm/guideline.js

@@ -0,0 +1,26 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { 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'
+});
+var positionToStyle = function positionToStyle(position) {
+  var left = position.left,
+    right = position.right;
+  return left ? {
+    left: left
+  } : {
+    right: right
+  };
+};
+export var Guideline = function Guideline(props) {
+  return jsx("div", {
+    css: BasicGuidelineStyles,
+    style: positionToStyle(props.position)
+  });
+};

package/dist/esm/guildelineContainer.js

@@ -0,0 +1,66 @@
+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; }
+/** @jsx jsx */
+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',
+  width: '100%',
+  display: 'grid',
+  pointerEvents: 'none',
+  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);
+  return jsx("div", {
+    css: guidelineContainerStyles,
+    style: {
+      height: height,
+      gridTemplateColumns: "[left] auto [editor] ".concat(editorWidth, "px [right] auto")
+    },
+    "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]
+  }));
+};

package/dist/esm/plugin.js

@@ -1,10 +1,31 @@
-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';
+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 +50,17 @@ 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,
+    containerWidth: widthState.containerWidth,
+    editorWidth: widthState.lineLength
+  }));
 };
 export var guidelinePlugin = function guidelinePlugin(options, api) {
   return {
@@ -56,7 +84,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/types.js

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

package/dist/esm/version.json

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

package/dist/types/constants.d.ts

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

package/dist/types/guideline.d.ts

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { GuidelinePosition } from './types';
+type Props = {
+    position: GuidelinePosition;
+};
+export declare const Guideline: (props: Props) => jsx.JSX.Element;
+export {};

package/dist/types/guildelineContainer.d.ts

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { GuidelineConfig } from './types';
+type ContainerProps = {
+    guidelines: GuidelineConfig[];
+    height: number;
+    containerWidth: number;
+    editorWidth: number;
+};
+export declare const GuidelineContainer: (props: ContainerProps) => jsx.JSX.Element | null;
+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,33 @@
 import { EditorView } from 'prosemirror-view';
-type Guideline = {
-    key?: string;
+type PositionValue = `${number}px` | `${number}%` | 0;
+type PositionSide = {
+    left: PositionValue;
+    right?: never;
+} | {
+    right: PositionValue;
+    left?: never;
+};
+export declare enum GuidelineContainerArea {
+    EditorLeftMargin = "editorLeftMargin",
+    EditorContent = "editorContent",
+    EditorRightMargin = "editorRightMargin"
+}
+type GuidelinePosition = {
+    containerArea?: GuidelineContainerArea;
+} & PositionSide;
+type GuidelineConfig = {
+    key: string;
+    position: GuidelinePosition;
     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, GuidelinePosition, DisplayGuideline, };

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

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

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

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { GuidelinePosition } from './types';
+type Props = {
+    position: GuidelinePosition;
+};
+export declare const Guideline: (props: Props) => jsx.JSX.Element;
+export {};

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

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { GuidelineConfig } from './types';
+type ContainerProps = {
+    guidelines: GuidelineConfig[];
+    height: number;
+    containerWidth: number;
+    editorWidth: number;
+};
+export declare const GuidelineContainer: (props: ContainerProps) => jsx.JSX.Element | null;
+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,33 @@
 import { EditorView } from 'prosemirror-view';
-type Guideline = {
-    key?: string;
+type PositionValue = `${number}px` | `${number}%` | 0;
+type PositionSide = {
+    left: PositionValue;
+    right?: never;
+} | {
+    right: PositionValue;
+    left?: never;
+};
+export declare enum GuidelineContainerArea {
+    EditorLeftMargin = "editorLeftMargin",
+    EditorContent = "editorContent",
+    EditorRightMargin = "editorRightMargin"
+}
+type GuidelinePosition = {
+    containerArea?: GuidelineContainerArea;
+} & PositionSide;
+type GuidelineConfig = {
+    key: string;
+    position: GuidelinePosition;
     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, GuidelinePosition, DisplayGuideline, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-guideline",
-  "version": "0.1.0",
+  "version": "0.2.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.3.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.0.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)
 ```