@atlaskit/editor-plugin-guideline 0.3.1 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-guideline
 
+## 0.3.3
+
+### Patch Changes
+
+- [`e118dc7562b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e118dc7562b) - ED-18897 guideline interface to use css tokens.
+
+## 0.3.2
+
+### Patch Changes
+
+- [`73b5128036b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/73b5128036b) - [ED-17082] Mark package as a singleton one
+- Updated dependencies
+
 ## 0.3.1
 
 ### Patch Changes

package/README.md

@@ -4,6 +4,101 @@ guideline plugin for @atlaskit/editor-core
 
 ## Usage
 
-`import EditorPluginGuideline from '@atlaskit/editor-plugin-guideline';`
+See `packages/editor/editor-plugin-guideline/src/types.ts` for detailed guideline config interface.
+
+Example usage:
+
+```
+pluginInjectionApi?.dependencies?.guideline?.actions?.displayGuideline(view)({
+  guidelines: [{
+    key: "guideline_01"
+    position: {
+      x: -100
+    }; // The position of the guideline
+    active: true,
+    style: "dashed",
+    color: "rgba(0, 0, 0, 0.2)"
+  }, 
+  {
+    key: "guideline_02"
+    position: {
+      x: 300
+    };
+    show: false,
+  }]
+});
+```  
+
+A guideline config consists of three parts:
+  - A unique key (required)
+  - Position (required)
+  - State/Style (optional)
+
+This plugin was designed to be "dumb". Meaning that it only contains very basic logics to render the guidelines. Commonly used configurations and utils will be reside in the `editor-common` package.
+
+
+
+## Position:
+
+The following diagram shows:
+- The layout of the guideline display area
+- The position of a guideline for a given X value.
+<pre>
+
+
+
+  │                   editor width                    │
+  │------------------- max 1800px --------------------│
+  │                                                   │
+  │          center line (when position x=0)          │
+  │                         │                         │
+  │--------- x < 0 ---------│--------- x > 0 ---------│
+  │                         │                         │
+  ┌────────────┬────────────┬────────────┬────────────┐
+  │            │            │            │            │
+  │            │            │            │            │
+  │            │            │            │            │
+  │            │-- 380px ---│--- 380px --│            │
+  │            │            │            │            │
+  │            │            │            │            │
+  │            │            │            │            │
+  └────────────┴────────────┴────────────┴────────────┘
+               │      editor content     │
+               │-------- max 760px ------│
+  │---------- or 1800px in full-width mode  ----------│
+               
+</pre>
+
+The position value is defined as follow:
+  `type Position = { x: number };`
+* When x is 0, a vertical line is displayed at the center of the editor (see the diagram above). 
+* A negative value will move the line to the left, up to minus half of the editor width.
+* A positive value will move the line to the right, up to half of the editor width.
+* If a `x` value is outside of the visible range, if will be ignored. (See the todo section)
+
+
+## State/Style
+
+We have the follow state/style configurations
+```
+type GuidelineConfig = {
+  ...
+  active?: boolean;
+  show?: boolean;
+  style?: 'dashed' | 'solid'; // default solid
+  color?: CSSToken;
+};
+```
+
+- `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
+
+## TODO
+- [ ] Add unit/vr tests
+- [ ] Handle guidelines which are outside of visitable range. 
+- [ ] Implement the Grid plug option, `shouldCalcBreakoutGridLines?: boolean;`
+- [ ] Retire the exist Grid plugin. and replace it with this plugin. Plugins currently use the grid plugin: media, table and card.
+- [ ] Investigate a better way to handle the `color` attribute, to avoid a fragmented experiences in the Editor.
 
-Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/editor/editor-plugin-guideline).

package/dist/cjs/guideline.js

@@ -1,19 +1,22 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Guideline = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-/** @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 BasicGuidelineStyles = (0, _react.css)({
   borderLeft: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30A, ")")),
   position: 'absolute',
   width: '1px',
   height: '100%',
   zIndex: 0,
+  transform: 'translateX(-50%)',
   opacity: 1,
   transition: 'border-color 0.15s linear, opacity 0.15s linear'
 });
@@ -31,13 +34,16 @@ var Guideline = function Guideline(props) {
     active = props.active,
     _props$show = props.show,
     show = _props$show === void 0 ? true : _props$show,
-    style = props.style;
+    style = props.style,
+    color = props.color;
   return (0, _react.jsx)("div", {
     css: [BasicGuidelineStyles, active && ActiveGuidelineStyles, !show && HiddenGuidelineStyles, style === 'dashed' && DashedGuidelineStyles],
     className: "guideline",
-    style: {
+    style: _objectSpread({
       left: "".concat(position, "px")
-    }
+    }, color && {
+      borderColor: "".concat(color)
+    })
   });
 };
 exports.Guideline = Guideline;

package/dist/cjs/version.json

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

package/dist/es2019/guideline.js

@@ -7,6 +7,7 @@ const BasicGuidelineStyles = css({
   width: '1px',
   height: '100%',
   zIndex: 0,
+  transform: 'translateX(-50%)',
   opacity: 1,
   transition: 'border-color 0.15s linear, opacity 0.15s linear'
 });
@@ -24,13 +25,17 @@ export const Guideline = props => {
     position,
     active,
     show = true,
-    style
+    style,
+    color
   } = props;
   return jsx("div", {
     css: [BasicGuidelineStyles, active && ActiveGuidelineStyles, !show && HiddenGuidelineStyles, style === 'dashed' && DashedGuidelineStyles],
     className: "guideline",
     style: {
-      left: `${position}px`
+      left: `${position}px`,
+      ...(color && {
+        borderColor: `${color}`
+      })
     }
   });
 };

package/dist/es2019/version.json

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

package/dist/esm/guideline.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 { B200, N30A } from '@atlaskit/theme/colors';
@@ -7,6 +10,7 @@ var BasicGuidelineStyles = css({
   width: '1px',
   height: '100%',
   zIndex: 0,
+  transform: 'translateX(-50%)',
   opacity: 1,
   transition: 'border-color 0.15s linear, opacity 0.15s linear'
 });
@@ -24,12 +28,15 @@ export var Guideline = function Guideline(props) {
     active = props.active,
     _props$show = props.show,
     show = _props$show === void 0 ? true : _props$show,
-    style = props.style;
+    style = props.style,
+    color = props.color;
   return jsx("div", {
     css: [BasicGuidelineStyles, active && ActiveGuidelineStyles, !show && HiddenGuidelineStyles, style === 'dashed' && DashedGuidelineStyles],
     className: "guideline",
-    style: {
+    style: _objectSpread({
       left: "".concat(position, "px")
-    }
+    }, color && {
+      borderColor: "".concat(color)
+    })
   });
 };

package/dist/esm/version.json

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

package/dist/types/guideline.d.ts

@@ -1,10 +1,12 @@
 /** @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 {};

package/dist/types/types.d.ts

@@ -1,4 +1,5 @@
 import { EditorView } from 'prosemirror-view';
+import { CSSToken } from '@atlaskit/tokens';
 export type Position = {
     x: number;
 };
@@ -8,7 +9,7 @@ type GuidelineConfig = {
     active?: boolean;
     show?: boolean;
     style?: 'dashed' | 'solid';
-    color?: string;
+    color?: CSSToken;
 };
 type GuidelinePluginState = {
     guidelines: GuidelineConfig[];

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

@@ -1,10 +1,12 @@
 /** @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 {};

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

@@ -1,4 +1,5 @@
 import { EditorView } from 'prosemirror-view';
+import { CSSToken } from '@atlaskit/tokens';
 export type Position = {
     x: number;
 };
@@ -8,7 +9,7 @@ type GuidelineConfig = {
     active?: boolean;
     show?: boolean;
     style?: 'dashed' | 'solid';
-    color?: string;
+    color?: CSSToken;
 };
 type GuidelinePluginState = {
     guidelines: GuidelineConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-guideline",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "guideline plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -8,7 +8,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "atlassian": {
-    "team": "Editor",
+    "team": "Editor Media Experience: Porygon",
+    "singleton": true,
     "releaseModel": "continuous"
   },
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
@@ -22,11 +23,11 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/editor-common": "^74.5.0",
+    "@atlaskit/editor-common": "^74.15.0",
     "@atlaskit/editor-plugin-width": "^0.1.0",
     "@atlaskit/editor-shared-styles": "^2.4.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.2",
+    "@atlaskit/tokens": "^1.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "prosemirror-state": "1.3.4",
@@ -36,12 +37,6 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/docs": "*",
-    "@atlaskit/editor-core": "^185.1.0",
-    "@atlaskit/editor-test-helpers": "^18.5.0",
-    "@atlaskit/ssr": "*",
-    "@atlaskit/visual-regression": "*",
-    "@atlaskit/webdriver-runner": "*",
     "@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,6 +15,7 @@
 <!--SECTION START: Main Entry Types-->
 
 ```ts
+import { CSSToken } from '@atlaskit/tokens';
 import { EditorView } from 'prosemirror-view';
 import { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
@@ -32,7 +33,7 @@ export type GuidelineConfig = {
   active?: boolean;
   show?: boolean;
   style?: 'dashed' | 'solid';
-  color?: string;
+  color?: CSSToken;
 };
 
 // @public (undocumented)

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

@@ -4,6 +4,7 @@
 
 ```ts
 
+import { CSSToken } from '@atlaskit/tokens';
 import { EditorView } from 'prosemirror-view';
 import { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
@@ -21,7 +22,7 @@ export type GuidelineConfig = {
     active?: boolean;
     show?: boolean;
     style?: 'dashed' | 'solid';
-    color?: string;
+    color?: CSSToken;
 };
 
 // @public (undocumented)