@atlaskit/editor-plugin-guideline 0.3.1 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/README.md +97 -2
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/version.json +1 -1
- package/package.json +5 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-guideline
|
|
2
2
|
|
|
3
|
+
## 0.3.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`73b5128036b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/73b5128036b) - [ED-17082] Mark package as a singleton one
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
|
|
3
10
|
## 0.3.1
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -4,6 +4,101 @@ guideline plugin for @atlaskit/editor-core
|
|
|
4
4
|
|
|
5
5
|
## Usage
|
|
6
6
|
|
|
7
|
-
`
|
|
7
|
+
See `packages/editor/editor-plugin-guideline/src/types.ts` for detailed guideline config interface.
|
|
8
|
+
|
|
9
|
+
Example usage:
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
pluginInjectionApi?.dependencies?.guideline?.actions?.displayGuideline(view)({
|
|
13
|
+
guidelines: [{
|
|
14
|
+
key: "guideline_01"
|
|
15
|
+
position: {
|
|
16
|
+
x: -100
|
|
17
|
+
}; // The position of the guideline
|
|
18
|
+
active: true,
|
|
19
|
+
style: "dashed",
|
|
20
|
+
color: "rgba(0, 0, 0, 0.2)"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
key: "guideline_02"
|
|
24
|
+
position: {
|
|
25
|
+
x: 300
|
|
26
|
+
};
|
|
27
|
+
show: false,
|
|
28
|
+
}]
|
|
29
|
+
});
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
A guideline config consists of three parts:
|
|
33
|
+
- A unique key (required)
|
|
34
|
+
- Position (required)
|
|
35
|
+
- State/Style (optional)
|
|
36
|
+
|
|
37
|
+
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.
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
## Position:
|
|
42
|
+
|
|
43
|
+
The following diagram shows:
|
|
44
|
+
- The layout of the guideline display area
|
|
45
|
+
- The position of a guideline for a given X value.
|
|
46
|
+
<pre>
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
│ editor width │
|
|
51
|
+
│------------------- max 1800px --------------------│
|
|
52
|
+
│ │
|
|
53
|
+
│ center line (when position x=0) │
|
|
54
|
+
│ │ │
|
|
55
|
+
│--------- x < 0 ---------│--------- x > 0 ---------│
|
|
56
|
+
│ │ │
|
|
57
|
+
┌────────────┬────────────┬────────────┬────────────┐
|
|
58
|
+
│ │ │ │ │
|
|
59
|
+
│ │ │ │ │
|
|
60
|
+
│ │ │ │ │
|
|
61
|
+
│ │-- 380px ---│--- 380px --│ │
|
|
62
|
+
│ │ │ │ │
|
|
63
|
+
│ │ │ │ │
|
|
64
|
+
│ │ │ │ │
|
|
65
|
+
└────────────┴────────────┴────────────┴────────────┘
|
|
66
|
+
│ editor content │
|
|
67
|
+
│-------- max 760px ------│
|
|
68
|
+
│---------- or 1800px in full-width mode ----------│
|
|
69
|
+
|
|
70
|
+
</pre>
|
|
71
|
+
|
|
72
|
+
The position value is defined as follow:
|
|
73
|
+
`type Position = { x: number };`
|
|
74
|
+
* When x is 0, a vertical line is displayed at the center of the editor (see the diagram above).
|
|
75
|
+
* A negative value will move the line to the left, up to minus half of the editor width.
|
|
76
|
+
* A positive value will move the line to the right, up to half of the editor width.
|
|
77
|
+
* If a `x` value is outside of the visible range, if will be ignored. (See the todo section)
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
## State/Style
|
|
81
|
+
|
|
82
|
+
We have the follow state/style configurations
|
|
83
|
+
```
|
|
84
|
+
type GuidelineConfig = {
|
|
85
|
+
...
|
|
86
|
+
active?: boolean;
|
|
87
|
+
show?: boolean;
|
|
88
|
+
style?: 'dashed' | 'solid'; // default solid
|
|
89
|
+
color?: string;
|
|
90
|
+
};
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
- `active` default `false`, equivalent to the `highlight` state in the `grid` plugin.
|
|
94
|
+
- `style` default `solid`, and we also support `dashed`
|
|
95
|
+
- `show` default `true` and you can also hide a guideline, could be useful when you need animations.
|
|
96
|
+
- `color`: default `undefined` you can override the color of a guideline with a valid `css` color
|
|
97
|
+
|
|
98
|
+
## TODO
|
|
99
|
+
- [ ] Add unit/vr tests
|
|
100
|
+
- [ ] Handle guidelines which are outside of visitable range.
|
|
101
|
+
- [ ] Implement the Grid plug option, `shouldCalcBreakoutGridLines?: boolean;`
|
|
102
|
+
- [ ] Retire the exist Grid plugin. and replace it with this plugin. Plugins currently use the grid plugin: media, table and card.
|
|
103
|
+
- [ ] Investigate a better way to handle the `color` attribute, to avoid a fragmented experiences in the Editor.
|
|
8
104
|
|
|
9
|
-
Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/editor/editor-plugin-guideline).
|
package/dist/cjs/version.json
CHANGED
package/dist/es2019/version.json
CHANGED
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-guideline",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.2",
|
|
4
4
|
"description": "guideline plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
"registry": "https://registry.npmjs.org/"
|
|
9
9
|
},
|
|
10
10
|
"atlassian": {
|
|
11
|
-
"team": "Editor",
|
|
11
|
+
"team": "Editor Media Experience: Porygon",
|
|
12
|
+
"singleton": true,
|
|
12
13
|
"releaseModel": "continuous"
|
|
13
14
|
},
|
|
14
15
|
"repository": "https://bitbucket.org/atlassian/atlassian-frontend",
|
|
@@ -22,11 +23,11 @@
|
|
|
22
23
|
".": "./src/index.ts"
|
|
23
24
|
},
|
|
24
25
|
"dependencies": {
|
|
25
|
-
"@atlaskit/editor-common": "^74.
|
|
26
|
+
"@atlaskit/editor-common": "^74.9.0",
|
|
26
27
|
"@atlaskit/editor-plugin-width": "^0.1.0",
|
|
27
28
|
"@atlaskit/editor-shared-styles": "^2.4.0",
|
|
28
29
|
"@atlaskit/theme": "^12.5.0",
|
|
29
|
-
"@atlaskit/tokens": "^1.
|
|
30
|
+
"@atlaskit/tokens": "^1.9.0",
|
|
30
31
|
"@babel/runtime": "^7.0.0",
|
|
31
32
|
"@emotion/react": "^11.7.1",
|
|
32
33
|
"prosemirror-state": "1.3.4",
|
|
@@ -36,12 +37,6 @@
|
|
|
36
37
|
"react": "^16.8.0"
|
|
37
38
|
},
|
|
38
39
|
"devDependencies": {
|
|
39
|
-
"@atlaskit/docs": "*",
|
|
40
|
-
"@atlaskit/editor-core": "^185.1.0",
|
|
41
|
-
"@atlaskit/editor-test-helpers": "^18.5.0",
|
|
42
|
-
"@atlaskit/ssr": "*",
|
|
43
|
-
"@atlaskit/visual-regression": "*",
|
|
44
|
-
"@atlaskit/webdriver-runner": "*",
|
|
45
40
|
"@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
|
|
46
41
|
"@testing-library/react": "^12.1.5",
|
|
47
42
|
"react-dom": "^16.8.0",
|