@atlaskit/editor-plugin-guideline 0.3.13 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-guideline
 
+## 0.4.1
+
+### Patch Changes
+
+- [`24e27147cbd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/24e27147cbd) - Added atlaskit docs to all existing plugins.
+
+## 0.4.0
+
+### Minor Changes
+
+- [`7f45581d141`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7f45581d141) - ED-19630 fixed guideline alignment issue.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.3.13
 
 ### Patch Changes

package/dist/cjs/guidelineContainer.js

@@ -29,8 +29,7 @@ var GuidelineContainer = function GuidelineContainer(props) {
   var _style;
   var guidelines = props.guidelines,
     height = props.height,
-    editorWidth = props.editorWidth,
-    centerOffset = props.centerOffset;
+    updateRect = props.updateRect;
   var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     offset = _useState2[0],
@@ -40,10 +39,18 @@ var GuidelineContainer = function GuidelineContainer(props) {
     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) {
+      var centerOffset = rect.width / 2 - 0.5;
+
       // X pixels from guideline container left to editor center.
-      setOffset(centerOffset - rect.x);
+      if (offset !== centerOffset) {
+        setOffset(centerOffset);
+      }
+      updateRect({
+        top: rect.top,
+        left: rect.left
+      });
     }
-  }, [centerOffset, guidelines, editorWidth]);
+  }, [updateRect, offset]);
   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,

package/dist/cjs/plugin.js

@@ -1,18 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.guidelinePlugin = exports.EMPTY_STATE = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _guidelineContainer = require("./guidelineContainer");
-var _utils = require("./utils");
-/** @jsx jsx */
-
+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 guidelineStyles = (0, _react.css)({
   position: 'absolute',
   width: '100%',
@@ -46,7 +47,7 @@ var guidelinePMPlugin = new _safePlugin.SafePlugin({
     apply: function apply(tr, currentPluginState) {
       var nextPluginState = tr.getMeta(key);
       if (nextPluginState) {
-        return nextPluginState;
+        return _objectSpread(_objectSpread({}, currentPluginState), nextPluginState);
       }
       return currentPluginState;
     }
@@ -62,14 +63,33 @@ var ContentComponent = function ContentComponent(_ref) {
   if (!widthState || !widthState.width || !widthState.lineLength || !guidelineState || !guidelineState.guidelines || guidelineState.guidelines.length === 0) {
     return null;
   }
+  var updateRect = function updateRect(_ref2) {
+    var top = _ref2.top,
+      left = _ref2.left;
+    var dispatch = editorView.dispatch,
+      state = editorView.state;
+    var _ref3 = guidelineState.rect || {},
+      prevTop = _ref3.top,
+      prevLeft = _ref3.left;
+    if (prevTop !== top || prevLeft !== left) {
+      var tr = state.tr.setMeta(key, {
+        rect: {
+          top: top,
+          left: left
+        }
+      });
+      dispatch(tr);
+      return true;
+    }
+  };
   return (0, _react.jsx)("div", {
     css: guidelineStyles
   }, (0, _react.jsx)(_guidelineContainer.GuidelineContainer, {
     guidelines: guidelineState.guidelines,
     height: editorView.dom.scrollHeight,
-    centerOffset: (0, _utils.getEditorCenterX)(editorView),
     width: widthState.width,
-    editorWidth: widthState.lineLength
+    editorWidth: widthState.lineLength,
+    updateRect: updateRect
   }));
 };
 var guidelinePlugin = function guidelinePlugin(options, api) {
@@ -92,8 +112,8 @@ var guidelinePlugin = function guidelinePlugin(options, api) {
         }
       }];
     },
-    contentComponent: function contentComponent(_ref2) {
-      var editorView = _ref2.editorView;
+    contentComponent: function contentComponent(_ref4) {
+      var editorView = _ref4.editorView;
       return (0, _react.jsx)(ContentComponent, {
         editorView: editorView,
         options: options,

package/dist/cjs/utils.js

@@ -4,20 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.innerGuidelines = exports.getEditorCenterX = void 0;
+exports.innerGuidelines = 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 - 0.5;
-};
-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;

package/dist/es2019/guidelineContainer.js

@@ -18,8 +18,7 @@ export const GuidelineContainer = props => {
   const {
     guidelines,
     height,
-    editorWidth,
-    centerOffset
+    updateRect
   } = props;
   const [offset, setOffset] = useState(0);
   const ref = useRef(null);
@@ -27,10 +26,18 @@ export const GuidelineContainer = props => {
     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) {
+      const centerOffset = rect.width / 2 - 0.5;
+
       // X pixels from guideline container left to editor center.
-      setOffset(centerOffset - rect.x);
+      if (offset !== centerOffset) {
+        setOffset(centerOffset);
+      }
+      updateRect({
+        top: rect.top,
+        left: rect.left
+      });
     }
-  }, [centerOffset, guidelines, editorWidth]);
+  }, [updateRect, offset]);
   const style = {
     [VAR_POSITION_OFFSET_X]: `${offset}px`,
     [VAR_POSITION_OFFSET_Y]: `0px`,

package/dist/es2019/plugin.js

@@ -5,7 +5,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { akEditorGridLineZIndex } from '@atlaskit/editor-shared-styles';
 import { GuidelineContainer } from './guidelineContainer';
-import { getEditorCenterX } from './utils';
 const guidelineStyles = css({
   position: 'absolute',
   width: '100%',
@@ -38,7 +37,10 @@ const guidelinePMPlugin = new SafePlugin({
     apply(tr, currentPluginState) {
       const nextPluginState = tr.getMeta(key);
       if (nextPluginState) {
-        return nextPluginState;
+        return {
+          ...currentPluginState,
+          ...nextPluginState
+        };
       }
       return currentPluginState;
     }
@@ -56,14 +58,37 @@ const ContentComponent = ({
   if (!widthState || !widthState.width || !widthState.lineLength || !guidelineState || !guidelineState.guidelines || guidelineState.guidelines.length === 0) {
     return null;
   }
+  const updateRect = ({
+    top,
+    left
+  }) => {
+    const {
+      dispatch,
+      state
+    } = editorView;
+    const {
+      top: prevTop,
+      left: prevLeft
+    } = guidelineState.rect || {};
+    if (prevTop !== top || prevLeft !== left) {
+      const tr = state.tr.setMeta(key, {
+        rect: {
+          top,
+          left
+        }
+      });
+      dispatch(tr);
+      return true;
+    }
+  };
   return jsx("div", {
     css: guidelineStyles
   }, jsx(GuidelineContainer, {
     guidelines: guidelineState.guidelines,
     height: editorView.dom.scrollHeight,
-    centerOffset: getEditorCenterX(editorView),
     width: widthState.width,
-    editorWidth: widthState.lineLength
+    editorWidth: widthState.lineLength,
+    updateRect: updateRect
   }));
 };
 export const guidelinePlugin = (options, api) => ({

package/dist/es2019/utils.js

@@ -1,14 +1,4 @@
 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 - 0.5;
-};
 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;

package/dist/esm/guidelineContainer.js

@@ -22,8 +22,7 @@ export var GuidelineContainer = function GuidelineContainer(props) {
   var _style;
   var guidelines = props.guidelines,
     height = props.height,
-    editorWidth = props.editorWidth,
-    centerOffset = props.centerOffset;
+    updateRect = props.updateRect;
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     offset = _useState2[0],
@@ -33,10 +32,18 @@ export var GuidelineContainer = function GuidelineContainer(props) {
     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) {
+      var centerOffset = rect.width / 2 - 0.5;
+
       // X pixels from guideline container left to editor center.
-      setOffset(centerOffset - rect.x);
+      if (offset !== centerOffset) {
+        setOffset(centerOffset);
+      }
+      updateRect({
+        top: rect.top,
+        left: rect.left
+      });
     }
-  }, [centerOffset, guidelines, editorWidth]);
+  }, [updateRect, offset]);
   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,

package/dist/esm/plugin.js

@@ -1,3 +1,6 @@
+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 { useSharedPluginState } from '@atlaskit/editor-common/hooks';
@@ -5,7 +8,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { akEditorGridLineZIndex } from '@atlaskit/editor-shared-styles';
 import { GuidelineContainer } from './guidelineContainer';
-import { getEditorCenterX } from './utils';
 var guidelineStyles = css({
   position: 'absolute',
   width: '100%',
@@ -38,7 +40,7 @@ var guidelinePMPlugin = new SafePlugin({
     apply: function apply(tr, currentPluginState) {
       var nextPluginState = tr.getMeta(key);
       if (nextPluginState) {
-        return nextPluginState;
+        return _objectSpread(_objectSpread({}, currentPluginState), nextPluginState);
       }
       return currentPluginState;
     }
@@ -54,14 +56,33 @@ var ContentComponent = function ContentComponent(_ref) {
   if (!widthState || !widthState.width || !widthState.lineLength || !guidelineState || !guidelineState.guidelines || guidelineState.guidelines.length === 0) {
     return null;
   }
+  var updateRect = function updateRect(_ref2) {
+    var top = _ref2.top,
+      left = _ref2.left;
+    var dispatch = editorView.dispatch,
+      state = editorView.state;
+    var _ref3 = guidelineState.rect || {},
+      prevTop = _ref3.top,
+      prevLeft = _ref3.left;
+    if (prevTop !== top || prevLeft !== left) {
+      var tr = state.tr.setMeta(key, {
+        rect: {
+          top: top,
+          left: left
+        }
+      });
+      dispatch(tr);
+      return true;
+    }
+  };
   return jsx("div", {
     css: guidelineStyles
   }, jsx(GuidelineContainer, {
     guidelines: guidelineState.guidelines,
     height: editorView.dom.scrollHeight,
-    centerOffset: getEditorCenterX(editorView),
     width: widthState.width,
-    editorWidth: widthState.lineLength
+    editorWidth: widthState.lineLength,
+    updateRect: updateRect
   }));
 };
 export var guidelinePlugin = function guidelinePlugin(options, api) {
@@ -84,8 +105,8 @@ export var guidelinePlugin = function guidelinePlugin(options, api) {
         }
       }];
     },
-    contentComponent: function contentComponent(_ref2) {
-      var editorView = _ref2.editorView;
+    contentComponent: function contentComponent(_ref4) {
+      var editorView = _ref4.editorView;
       return jsx(ContentComponent, {
         editorView: editorView,
         options: options,

package/dist/esm/utils.js

@@ -1,15 +1,5 @@
 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 - 0.5;
-};
 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;

package/dist/types/guidelineContainer.d.ts

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

package/dist/types/index.d.ts

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

package/dist/types/plugin.d.ts

@@ -1,11 +1,12 @@
-import { NextEditorPlugin } from '@atlaskit/editor-common/types';
-import type { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { DisplayGuideline, GuidelinePluginState } from './types';
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
+import type { DisplayGuideline, GuidelinePluginState } from './types';
 export declare const EMPTY_STATE: GuidelinePluginState;
-export declare const guidelinePlugin: NextEditorPlugin<'guideline', {
-    dependencies: [typeof widthPlugin];
+export type GuidelinePlugin = NextEditorPlugin<'guideline', {
+    dependencies: [WidthPlugin];
     sharedState: GuidelinePluginState | null;
     actions: {
         displayGuideline: DisplayGuideline;
     };
 }>;
+export declare const guidelinePlugin: GuidelinePlugin;

package/dist/types/types.d.ts

@@ -1 +1 @@
-export type { WidthTypes, Position, VerticalPosition, HorizontalPosition, GuidelineConfig, GuidelinePluginState, GuidelinePluginOptions, DisplayGuideline, DisplayGrid, } from '@atlaskit/editor-common/guideline';
+export type { WidthTypes, Position, VerticalPosition, HorizontalPosition, GuidelineConfig, GuidelineContainerRect, GuidelinePluginState, GuidelinePluginOptions, DisplayGuideline, DisplayGrid, } from '@atlaskit/editor-common/guideline';

package/dist/types/utils.d.ts

@@ -1,10 +1,2 @@
-import { EditorView } from '@atlaskit/editor-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;
+import type { GuidelineConfig } from './types';
 export declare const innerGuidelines: (editorContainerWidth: number, editorWidth?: number) => GuidelineConfig[];

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

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

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

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

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

@@ -1,13 +1,14 @@
-import { NextEditorPlugin } from '@atlaskit/editor-common/types';
-import type { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { DisplayGuideline, GuidelinePluginState } from './types';
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
+import type { DisplayGuideline, GuidelinePluginState } from './types';
 export declare const EMPTY_STATE: GuidelinePluginState;
-export declare const guidelinePlugin: NextEditorPlugin<'guideline', {
+export type GuidelinePlugin = NextEditorPlugin<'guideline', {
     dependencies: [
-        typeof widthPlugin
+        WidthPlugin
     ];
     sharedState: GuidelinePluginState | null;
     actions: {
         displayGuideline: DisplayGuideline;
     };
 }>;
+export declare const guidelinePlugin: GuidelinePlugin;

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

@@ -1 +1 @@
-export type { WidthTypes, Position, VerticalPosition, HorizontalPosition, GuidelineConfig, GuidelinePluginState, GuidelinePluginOptions, DisplayGuideline, DisplayGrid, } from '@atlaskit/editor-common/guideline';
+export type { WidthTypes, Position, VerticalPosition, HorizontalPosition, GuidelineConfig, GuidelineContainerRect, GuidelinePluginState, GuidelinePluginOptions, DisplayGuideline, DisplayGrid, } from '@atlaskit/editor-common/guideline';

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

@@ -1,10 +1,2 @@
-import { EditorView } from '@atlaskit/editor-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;
+import type { GuidelineConfig } from './types';
 export declare const innerGuidelines: (editorContainerWidth: number, editorWidth?: number) => GuidelineConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-guideline",
-  "version": "0.3.13",
+  "version": "0.4.1",
   "description": "guideline plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -23,12 +23,12 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^74.46.0",
+    "@atlaskit/editor-common": "^74.52.0",
     "@atlaskit/editor-plugin-width": "^0.1.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.6.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.14.0",
+    "@atlaskit/tokens": "^1.16.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },

package/report.api.md

@@ -17,14 +17,14 @@
 ```ts
 import { DisplayGuideline } 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';
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 
 // @public (undocumented)
-export const guidelinePlugin: NextEditorPlugin<
+export type GuidelinePlugin = NextEditorPlugin<
   'guideline',
   {
-    dependencies: [typeof widthPlugin];
+    dependencies: [WidthPlugin];
     sharedState: GuidelinePluginState | null;
     actions: {
       displayGuideline: DisplayGuideline;
@@ -32,6 +32,9 @@ export const guidelinePlugin: NextEditorPlugin<
   }
 >;
 
+// @public (undocumented)
+export const guidelinePlugin: GuidelinePlugin;
+
 // (No @packageDocumentation comment for this package)
 ```
 

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

@@ -1,23 +0,0 @@
-## API Report File for "@atlaskit/editor-plugin-guideline"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import { DisplayGuideline } 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)
-export const guidelinePlugin: NextEditorPlugin<'guideline', {
-    dependencies: [typeof widthPlugin];
-    sharedState: GuidelinePluginState | null;
-    actions: {
-        displayGuideline: DisplayGuideline;
-    };
-}>;
-
-// (No @packageDocumentation comment for this package)
-
-```