@atlaskit/editor-plugin-breakout 2.3.2 → 2.4.0
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 +19 -0
- package/dist/cjs/pm-plugins/get-guidelines.js +81 -0
- package/dist/cjs/pm-plugins/resizer-callbacks.js +22 -13
- package/dist/es2019/pm-plugins/get-guidelines.js +73 -0
- package/dist/es2019/pm-plugins/resizer-callbacks.js +21 -13
- package/dist/esm/pm-plugins/get-guidelines.js +75 -0
- package/dist/esm/pm-plugins/resizer-callbacks.js +21 -13
- package/dist/types/breakoutPluginType.d.ts +3 -1
- package/dist/types/pm-plugins/get-guidelines.d.ts +4 -0
- package/dist/types/pm-plugins/resizer-callbacks.d.ts +4 -0
- package/dist/types-ts4.5/breakoutPluginType.d.ts +3 -1
- package/dist/types-ts4.5/pm-plugins/get-guidelines.d.ts +4 -0
- package/dist/types-ts4.5/pm-plugins/resizer-callbacks.d.ts +4 -0
- package/package.json +5 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-breakout
|
|
2
2
|
|
|
3
|
+
## 2.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#159900](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159900)
|
|
8
|
+
[`d70a10b069ade`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d70a10b069ade) -
|
|
9
|
+
[ux] [ED-28027] add guidelines while resizing under the new experience behind the
|
|
10
|
+
platform_editor_breakout_resizing experiment
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
16
|
+
## 2.3.3
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
|
|
3
22
|
## 2.3.2
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getGuidelines = void 0;
|
|
7
|
+
var _styles = require("@atlaskit/editor-common/styles");
|
|
8
|
+
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
9
|
+
var _resizerCallbacks = require("./resizer-callbacks");
|
|
10
|
+
var GUIDELINE_KEYS = {
|
|
11
|
+
lineLength: 'grid',
|
|
12
|
+
wide: 'wide',
|
|
13
|
+
fullWidth: 'full_width'
|
|
14
|
+
};
|
|
15
|
+
var roundToNearest = function roundToNearest(value) {
|
|
16
|
+
var interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
|
|
17
|
+
return Math.round(value / interval) * interval;
|
|
18
|
+
};
|
|
19
|
+
var getGuidelines = exports.getGuidelines = function getGuidelines(isResizing, newWidth, getEditorWidth, nodeType) {
|
|
20
|
+
var guidelines = [];
|
|
21
|
+
if (!isResizing) {
|
|
22
|
+
return guidelines;
|
|
23
|
+
}
|
|
24
|
+
var innerPaddingOffset = 0;
|
|
25
|
+
if (nodeType && nodeType.name === 'expand') {
|
|
26
|
+
innerPaddingOffset = _styles.resizerHandleThumbWidth;
|
|
27
|
+
}
|
|
28
|
+
var _ref = getEditorWidth() || {},
|
|
29
|
+
width = _ref.width,
|
|
30
|
+
lineLength = _ref.lineLength;
|
|
31
|
+
// TODO: ED-28109 - use breakoutWideScaleRatio to calculate wide guideline
|
|
32
|
+
var wide = _editorSharedStyles.akEditorCalculatedWideLayoutWidth;
|
|
33
|
+
var fullWidth = width ? Math.min(_resizerCallbacks.WIDTHS.MAX, width - 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() - _editorSharedStyles.akEditorGutterPadding) : undefined;
|
|
34
|
+
if (lineLength) {
|
|
35
|
+
guidelines.push({
|
|
36
|
+
key: "".concat(GUIDELINE_KEYS.lineLength, "_left"),
|
|
37
|
+
position: {
|
|
38
|
+
x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
|
|
39
|
+
},
|
|
40
|
+
active: newWidth === lineLength
|
|
41
|
+
});
|
|
42
|
+
guidelines.push({
|
|
43
|
+
key: "".concat(GUIDELINE_KEYS.lineLength, "_right"),
|
|
44
|
+
position: {
|
|
45
|
+
x: roundToNearest(lineLength / 2 + innerPaddingOffset)
|
|
46
|
+
},
|
|
47
|
+
active: newWidth === lineLength
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
guidelines.push({
|
|
51
|
+
key: "".concat(GUIDELINE_KEYS.wide, "_left"),
|
|
52
|
+
position: {
|
|
53
|
+
x: -roundToNearest(wide / 2 + innerPaddingOffset)
|
|
54
|
+
},
|
|
55
|
+
active: newWidth === wide
|
|
56
|
+
});
|
|
57
|
+
guidelines.push({
|
|
58
|
+
key: "".concat(GUIDELINE_KEYS.wide, "_right"),
|
|
59
|
+
position: {
|
|
60
|
+
x: roundToNearest(wide / 2 + innerPaddingOffset)
|
|
61
|
+
},
|
|
62
|
+
active: newWidth === wide
|
|
63
|
+
});
|
|
64
|
+
if (fullWidth) {
|
|
65
|
+
guidelines.push({
|
|
66
|
+
key: "".concat(GUIDELINE_KEYS.fullWidth, "_left"),
|
|
67
|
+
position: {
|
|
68
|
+
x: -roundToNearest(fullWidth / 2 + innerPaddingOffset)
|
|
69
|
+
},
|
|
70
|
+
active: newWidth === fullWidth
|
|
71
|
+
});
|
|
72
|
+
guidelines.push({
|
|
73
|
+
key: "".concat(GUIDELINE_KEYS.fullWidth, "_right"),
|
|
74
|
+
position: {
|
|
75
|
+
x: roundToNearest(fullWidth / 2 + innerPaddingOffset)
|
|
76
|
+
},
|
|
77
|
+
active: newWidth === fullWidth
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
return guidelines;
|
|
81
|
+
};
|
|
@@ -3,13 +3,14 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
exports.WIDTHS = void 0;
|
|
6
7
|
exports.createResizerCallbacks = createResizerCallbacks;
|
|
7
8
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
8
|
-
var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
|
|
9
9
|
var _setBreakoutWidth = require("../editor-commands/set-breakout-width");
|
|
10
|
+
var _getGuidelines = require("./get-guidelines");
|
|
10
11
|
var _resizingMarkView = require("./resizing-mark-view");
|
|
11
12
|
var RESIZE_RATIO = 2;
|
|
12
|
-
var WIDTHS = {
|
|
13
|
+
var WIDTHS = exports.WIDTHS = {
|
|
13
14
|
MIN: 760,
|
|
14
15
|
MAX: 1800
|
|
15
16
|
};
|
|
@@ -32,16 +33,21 @@ function createResizerCallbacks(_ref2) {
|
|
|
32
33
|
view = _ref2.view,
|
|
33
34
|
mark = _ref2.mark,
|
|
34
35
|
api = _ref2.api;
|
|
36
|
+
var node = null;
|
|
37
|
+
var getEditorWidth = function getEditorWidth() {
|
|
38
|
+
var _api$width;
|
|
39
|
+
return api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState();
|
|
40
|
+
};
|
|
35
41
|
return {
|
|
36
42
|
onDragStart: function onDragStart() {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
// TODO: ED-28027 - add guidelines
|
|
40
|
-
api === null || api === void 0 || api.core.actions.execute((_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
|
|
41
|
-
});
|
|
43
|
+
var _api$userIntent;
|
|
44
|
+
api === null || api === void 0 || api.core.actions.execute((_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
|
|
42
45
|
view.dispatch(view.state.tr.setMeta('is-resizer-resizing', true));
|
|
46
|
+
var pos = view.posAtDOM(dom, 0);
|
|
47
|
+
node = view.state.doc.nodeAt(pos);
|
|
43
48
|
},
|
|
44
49
|
onDrag: function onDrag(_ref3) {
|
|
50
|
+
var _node, _api$guideline;
|
|
45
51
|
var location = _ref3.location;
|
|
46
52
|
var initialWidth = mark.attrs.width;
|
|
47
53
|
var newWidth = getProposedWidth({
|
|
@@ -49,17 +55,20 @@ function createResizerCallbacks(_ref2) {
|
|
|
49
55
|
location: location,
|
|
50
56
|
api: api
|
|
51
57
|
});
|
|
58
|
+
var guidelines = (0, _getGuidelines.getGuidelines)(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
|
|
59
|
+
api === null || api === void 0 || (_api$guideline = api.guideline) === null || _api$guideline === void 0 || (_api$guideline = _api$guideline.actions) === null || _api$guideline === void 0 || _api$guideline.displayGuideline(view)({
|
|
60
|
+
guidelines: guidelines
|
|
61
|
+
});
|
|
52
62
|
contentDOM.style.setProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
|
|
53
63
|
},
|
|
54
64
|
onDrop: function onDrop(_ref4) {
|
|
55
|
-
var _api$userIntent2;
|
|
65
|
+
var _api$guideline2, _api$userIntent2;
|
|
56
66
|
var location = _ref4.location;
|
|
57
|
-
|
|
58
|
-
|
|
67
|
+
var guidelines = (0, _getGuidelines.getGuidelines)(false, 0, getEditorWidth);
|
|
68
|
+
api === null || api === void 0 || (_api$guideline2 = api.guideline) === null || _api$guideline2 === void 0 || (_api$guideline2 = _api$guideline2.actions) === null || _api$guideline2 === void 0 || _api$guideline2.displayGuideline(view)({
|
|
69
|
+
guidelines: guidelines
|
|
70
|
+
});
|
|
59
71
|
var pos = view.posAtDOM(dom, 0);
|
|
60
|
-
if (pos === undefined) {
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
72
|
var mode = mark.attrs.mode;
|
|
64
73
|
var initialWidth = mark.attrs.width;
|
|
65
74
|
var newWidth = getProposedWidth({
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
|
|
2
|
+
import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
3
|
+
import { WIDTHS } from './resizer-callbacks';
|
|
4
|
+
const GUIDELINE_KEYS = {
|
|
5
|
+
lineLength: 'grid',
|
|
6
|
+
wide: 'wide',
|
|
7
|
+
fullWidth: 'full_width'
|
|
8
|
+
};
|
|
9
|
+
const roundToNearest = (value, interval = 0.5) => Math.round(value / interval) * interval;
|
|
10
|
+
export const getGuidelines = (isResizing, newWidth, getEditorWidth, nodeType) => {
|
|
11
|
+
const guidelines = [];
|
|
12
|
+
if (!isResizing) {
|
|
13
|
+
return guidelines;
|
|
14
|
+
}
|
|
15
|
+
let innerPaddingOffset = 0;
|
|
16
|
+
if (nodeType && nodeType.name === 'expand') {
|
|
17
|
+
innerPaddingOffset = resizerHandleThumbWidth;
|
|
18
|
+
}
|
|
19
|
+
const {
|
|
20
|
+
width,
|
|
21
|
+
lineLength
|
|
22
|
+
} = getEditorWidth() || {};
|
|
23
|
+
// TODO: ED-28109 - use breakoutWideScaleRatio to calculate wide guideline
|
|
24
|
+
const wide = akEditorCalculatedWideLayoutWidth;
|
|
25
|
+
const fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding) : undefined;
|
|
26
|
+
if (lineLength) {
|
|
27
|
+
guidelines.push({
|
|
28
|
+
key: `${GUIDELINE_KEYS.lineLength}_left`,
|
|
29
|
+
position: {
|
|
30
|
+
x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
|
|
31
|
+
},
|
|
32
|
+
active: newWidth === lineLength
|
|
33
|
+
});
|
|
34
|
+
guidelines.push({
|
|
35
|
+
key: `${GUIDELINE_KEYS.lineLength}_right`,
|
|
36
|
+
position: {
|
|
37
|
+
x: roundToNearest(lineLength / 2 + innerPaddingOffset)
|
|
38
|
+
},
|
|
39
|
+
active: newWidth === lineLength
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
guidelines.push({
|
|
43
|
+
key: `${GUIDELINE_KEYS.wide}_left`,
|
|
44
|
+
position: {
|
|
45
|
+
x: -roundToNearest(wide / 2 + innerPaddingOffset)
|
|
46
|
+
},
|
|
47
|
+
active: newWidth === wide
|
|
48
|
+
});
|
|
49
|
+
guidelines.push({
|
|
50
|
+
key: `${GUIDELINE_KEYS.wide}_right`,
|
|
51
|
+
position: {
|
|
52
|
+
x: roundToNearest(wide / 2 + innerPaddingOffset)
|
|
53
|
+
},
|
|
54
|
+
active: newWidth === wide
|
|
55
|
+
});
|
|
56
|
+
if (fullWidth) {
|
|
57
|
+
guidelines.push({
|
|
58
|
+
key: `${GUIDELINE_KEYS.fullWidth}_left`,
|
|
59
|
+
position: {
|
|
60
|
+
x: -roundToNearest(fullWidth / 2 + innerPaddingOffset)
|
|
61
|
+
},
|
|
62
|
+
active: newWidth === fullWidth
|
|
63
|
+
});
|
|
64
|
+
guidelines.push({
|
|
65
|
+
key: `${GUIDELINE_KEYS.fullWidth}_right`,
|
|
66
|
+
position: {
|
|
67
|
+
x: roundToNearest(fullWidth / 2 + innerPaddingOffset)
|
|
68
|
+
},
|
|
69
|
+
active: newWidth === fullWidth
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
return guidelines;
|
|
73
|
+
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { akEditorGutterPaddingDynamic, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
|
|
2
|
-
import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
|
|
3
2
|
import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
|
|
3
|
+
import { getGuidelines } from './get-guidelines';
|
|
4
4
|
import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
|
|
5
5
|
const RESIZE_RATIO = 2;
|
|
6
|
-
const WIDTHS = {
|
|
6
|
+
export const WIDTHS = {
|
|
7
7
|
MIN: 760,
|
|
8
8
|
MAX: 1800
|
|
9
9
|
};
|
|
@@ -28,36 +28,44 @@ export function createResizerCallbacks({
|
|
|
28
28
|
mark,
|
|
29
29
|
api
|
|
30
30
|
}) {
|
|
31
|
+
let node = null;
|
|
32
|
+
const getEditorWidth = () => {
|
|
33
|
+
var _api$width;
|
|
34
|
+
return api === null || api === void 0 ? void 0 : (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState();
|
|
35
|
+
};
|
|
31
36
|
return {
|
|
32
37
|
onDragStart: () => {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
// TODO: ED-28027 - add guidelines
|
|
36
|
-
api === null || api === void 0 ? void 0 : api.core.actions.execute((_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
|
|
37
|
-
});
|
|
38
|
+
var _api$userIntent;
|
|
39
|
+
api === null || api === void 0 ? void 0 : api.core.actions.execute((_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
|
|
38
40
|
view.dispatch(view.state.tr.setMeta('is-resizer-resizing', true));
|
|
41
|
+
const pos = view.posAtDOM(dom, 0);
|
|
42
|
+
node = view.state.doc.nodeAt(pos);
|
|
39
43
|
},
|
|
40
44
|
onDrag: ({
|
|
41
45
|
location
|
|
42
46
|
}) => {
|
|
47
|
+
var _node, _api$guideline, _api$guideline$action;
|
|
43
48
|
const initialWidth = mark.attrs.width;
|
|
44
49
|
const newWidth = getProposedWidth({
|
|
45
50
|
initialWidth,
|
|
46
51
|
location,
|
|
47
52
|
api
|
|
48
53
|
});
|
|
54
|
+
const guidelines = getGuidelines(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
|
|
55
|
+
api === null || api === void 0 ? void 0 : (_api$guideline = api.guideline) === null || _api$guideline === void 0 ? void 0 : (_api$guideline$action = _api$guideline.actions) === null || _api$guideline$action === void 0 ? void 0 : _api$guideline$action.displayGuideline(view)({
|
|
56
|
+
guidelines
|
|
57
|
+
});
|
|
49
58
|
contentDOM.style.setProperty(LOCAL_RESIZE_PROPERTY, `${newWidth}px`);
|
|
50
59
|
},
|
|
51
60
|
onDrop({
|
|
52
61
|
location
|
|
53
62
|
}) {
|
|
54
|
-
var _api$userIntent2;
|
|
55
|
-
|
|
56
|
-
|
|
63
|
+
var _api$guideline2, _api$guideline2$actio, _api$userIntent2;
|
|
64
|
+
const guidelines = getGuidelines(false, 0, getEditorWidth);
|
|
65
|
+
api === null || api === void 0 ? void 0 : (_api$guideline2 = api.guideline) === null || _api$guideline2 === void 0 ? void 0 : (_api$guideline2$actio = _api$guideline2.actions) === null || _api$guideline2$actio === void 0 ? void 0 : _api$guideline2$actio.displayGuideline(view)({
|
|
66
|
+
guidelines
|
|
67
|
+
});
|
|
57
68
|
const pos = view.posAtDOM(dom, 0);
|
|
58
|
-
if (pos === undefined) {
|
|
59
|
-
return;
|
|
60
|
-
}
|
|
61
69
|
const mode = mark.attrs.mode;
|
|
62
70
|
const initialWidth = mark.attrs.width;
|
|
63
71
|
const newWidth = getProposedWidth({
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
|
|
2
|
+
import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
3
|
+
import { WIDTHS } from './resizer-callbacks';
|
|
4
|
+
var GUIDELINE_KEYS = {
|
|
5
|
+
lineLength: 'grid',
|
|
6
|
+
wide: 'wide',
|
|
7
|
+
fullWidth: 'full_width'
|
|
8
|
+
};
|
|
9
|
+
var roundToNearest = function roundToNearest(value) {
|
|
10
|
+
var interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
|
|
11
|
+
return Math.round(value / interval) * interval;
|
|
12
|
+
};
|
|
13
|
+
export var getGuidelines = function getGuidelines(isResizing, newWidth, getEditorWidth, nodeType) {
|
|
14
|
+
var guidelines = [];
|
|
15
|
+
if (!isResizing) {
|
|
16
|
+
return guidelines;
|
|
17
|
+
}
|
|
18
|
+
var innerPaddingOffset = 0;
|
|
19
|
+
if (nodeType && nodeType.name === 'expand') {
|
|
20
|
+
innerPaddingOffset = resizerHandleThumbWidth;
|
|
21
|
+
}
|
|
22
|
+
var _ref = getEditorWidth() || {},
|
|
23
|
+
width = _ref.width,
|
|
24
|
+
lineLength = _ref.lineLength;
|
|
25
|
+
// TODO: ED-28109 - use breakoutWideScaleRatio to calculate wide guideline
|
|
26
|
+
var wide = akEditorCalculatedWideLayoutWidth;
|
|
27
|
+
var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding) : undefined;
|
|
28
|
+
if (lineLength) {
|
|
29
|
+
guidelines.push({
|
|
30
|
+
key: "".concat(GUIDELINE_KEYS.lineLength, "_left"),
|
|
31
|
+
position: {
|
|
32
|
+
x: -roundToNearest(lineLength / 2 + innerPaddingOffset)
|
|
33
|
+
},
|
|
34
|
+
active: newWidth === lineLength
|
|
35
|
+
});
|
|
36
|
+
guidelines.push({
|
|
37
|
+
key: "".concat(GUIDELINE_KEYS.lineLength, "_right"),
|
|
38
|
+
position: {
|
|
39
|
+
x: roundToNearest(lineLength / 2 + innerPaddingOffset)
|
|
40
|
+
},
|
|
41
|
+
active: newWidth === lineLength
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
guidelines.push({
|
|
45
|
+
key: "".concat(GUIDELINE_KEYS.wide, "_left"),
|
|
46
|
+
position: {
|
|
47
|
+
x: -roundToNearest(wide / 2 + innerPaddingOffset)
|
|
48
|
+
},
|
|
49
|
+
active: newWidth === wide
|
|
50
|
+
});
|
|
51
|
+
guidelines.push({
|
|
52
|
+
key: "".concat(GUIDELINE_KEYS.wide, "_right"),
|
|
53
|
+
position: {
|
|
54
|
+
x: roundToNearest(wide / 2 + innerPaddingOffset)
|
|
55
|
+
},
|
|
56
|
+
active: newWidth === wide
|
|
57
|
+
});
|
|
58
|
+
if (fullWidth) {
|
|
59
|
+
guidelines.push({
|
|
60
|
+
key: "".concat(GUIDELINE_KEYS.fullWidth, "_left"),
|
|
61
|
+
position: {
|
|
62
|
+
x: -roundToNearest(fullWidth / 2 + innerPaddingOffset)
|
|
63
|
+
},
|
|
64
|
+
active: newWidth === fullWidth
|
|
65
|
+
});
|
|
66
|
+
guidelines.push({
|
|
67
|
+
key: "".concat(GUIDELINE_KEYS.fullWidth, "_right"),
|
|
68
|
+
position: {
|
|
69
|
+
x: roundToNearest(fullWidth / 2 + innerPaddingOffset)
|
|
70
|
+
},
|
|
71
|
+
active: newWidth === fullWidth
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
return guidelines;
|
|
75
|
+
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { akEditorGutterPaddingDynamic, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
|
|
2
|
-
import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
|
|
3
2
|
import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
|
|
3
|
+
import { getGuidelines } from './get-guidelines';
|
|
4
4
|
import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
|
|
5
5
|
var RESIZE_RATIO = 2;
|
|
6
|
-
var WIDTHS = {
|
|
6
|
+
export var WIDTHS = {
|
|
7
7
|
MIN: 760,
|
|
8
8
|
MAX: 1800
|
|
9
9
|
};
|
|
@@ -26,16 +26,21 @@ export function createResizerCallbacks(_ref2) {
|
|
|
26
26
|
view = _ref2.view,
|
|
27
27
|
mark = _ref2.mark,
|
|
28
28
|
api = _ref2.api;
|
|
29
|
+
var node = null;
|
|
30
|
+
var getEditorWidth = function getEditorWidth() {
|
|
31
|
+
var _api$width;
|
|
32
|
+
return api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState();
|
|
33
|
+
};
|
|
29
34
|
return {
|
|
30
35
|
onDragStart: function onDragStart() {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
// TODO: ED-28027 - add guidelines
|
|
34
|
-
api === null || api === void 0 || api.core.actions.execute((_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
|
|
35
|
-
});
|
|
36
|
+
var _api$userIntent;
|
|
37
|
+
api === null || api === void 0 || api.core.actions.execute((_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
|
|
36
38
|
view.dispatch(view.state.tr.setMeta('is-resizer-resizing', true));
|
|
39
|
+
var pos = view.posAtDOM(dom, 0);
|
|
40
|
+
node = view.state.doc.nodeAt(pos);
|
|
37
41
|
},
|
|
38
42
|
onDrag: function onDrag(_ref3) {
|
|
43
|
+
var _node, _api$guideline;
|
|
39
44
|
var location = _ref3.location;
|
|
40
45
|
var initialWidth = mark.attrs.width;
|
|
41
46
|
var newWidth = getProposedWidth({
|
|
@@ -43,17 +48,20 @@ export function createResizerCallbacks(_ref2) {
|
|
|
43
48
|
location: location,
|
|
44
49
|
api: api
|
|
45
50
|
});
|
|
51
|
+
var guidelines = getGuidelines(true, newWidth, getEditorWidth, (_node = node) === null || _node === void 0 ? void 0 : _node.type);
|
|
52
|
+
api === null || api === void 0 || (_api$guideline = api.guideline) === null || _api$guideline === void 0 || (_api$guideline = _api$guideline.actions) === null || _api$guideline === void 0 || _api$guideline.displayGuideline(view)({
|
|
53
|
+
guidelines: guidelines
|
|
54
|
+
});
|
|
46
55
|
contentDOM.style.setProperty(LOCAL_RESIZE_PROPERTY, "".concat(newWidth, "px"));
|
|
47
56
|
},
|
|
48
57
|
onDrop: function onDrop(_ref4) {
|
|
49
|
-
var _api$userIntent2;
|
|
58
|
+
var _api$guideline2, _api$userIntent2;
|
|
50
59
|
var location = _ref4.location;
|
|
51
|
-
|
|
52
|
-
|
|
60
|
+
var guidelines = getGuidelines(false, 0, getEditorWidth);
|
|
61
|
+
api === null || api === void 0 || (_api$guideline2 = api.guideline) === null || _api$guideline2 === void 0 || (_api$guideline2 = _api$guideline2.actions) === null || _api$guideline2 === void 0 || _api$guideline2.displayGuideline(view)({
|
|
62
|
+
guidelines: guidelines
|
|
63
|
+
});
|
|
53
64
|
var pos = view.posAtDOM(dom, 0);
|
|
54
|
-
if (pos === undefined) {
|
|
55
|
-
return;
|
|
56
|
-
}
|
|
57
65
|
var mode = mark.attrs.mode;
|
|
58
66
|
var initialWidth = mark.attrs.width;
|
|
59
67
|
var newWidth = getProposedWidth({
|
|
@@ -2,6 +2,7 @@ import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/t
|
|
|
2
2
|
import { type BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
|
|
3
3
|
import { type EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
|
|
4
4
|
import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
|
|
5
|
+
import { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
|
|
5
6
|
import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
|
|
6
7
|
import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
|
|
7
8
|
import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
|
|
@@ -18,7 +19,8 @@ export type BreakoutPluginDependencies = [
|
|
|
18
19
|
OptionalPlugin<EditorDisabledPlugin>,
|
|
19
20
|
OptionalPlugin<BlockControlsPlugin>,
|
|
20
21
|
OptionalPlugin<InteractionPlugin>,
|
|
21
|
-
OptionalPlugin<UserIntentPlugin
|
|
22
|
+
OptionalPlugin<UserIntentPlugin>,
|
|
23
|
+
OptionalPlugin<GuidelinePlugin>
|
|
22
24
|
];
|
|
23
25
|
export type BreakoutPlugin = NextEditorPlugin<'breakout', {
|
|
24
26
|
pluginConfiguration: BreakoutPluginOptions | undefined;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { GuidelineConfig } from '@atlaskit/editor-common/guideline';
|
|
2
|
+
import { EditorContainerWidth } from '@atlaskit/editor-common/types';
|
|
3
|
+
import { NodeType } from '@atlaskit/editor-prosemirror/model';
|
|
4
|
+
export declare const getGuidelines: (isResizing: boolean, newWidth: number, getEditorWidth: () => EditorContainerWidth | undefined, nodeType?: NodeType | undefined) => GuidelineConfig[];
|
|
@@ -3,6 +3,10 @@ import { Mark } from '@atlaskit/editor-prosemirror/model';
|
|
|
3
3
|
import { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
4
4
|
import { BaseEventPayload, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
|
|
5
5
|
import { BreakoutPlugin } from '../breakoutPluginType';
|
|
6
|
+
export declare const WIDTHS: {
|
|
7
|
+
MIN: number;
|
|
8
|
+
MAX: number;
|
|
9
|
+
};
|
|
6
10
|
export declare function createResizerCallbacks({ dom, contentDOM, view, mark, api, }: {
|
|
7
11
|
dom: HTMLElement;
|
|
8
12
|
contentDOM: HTMLElement;
|
|
@@ -2,6 +2,7 @@ import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/t
|
|
|
2
2
|
import { type BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
|
|
3
3
|
import { type EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
|
|
4
4
|
import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
|
|
5
|
+
import { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
|
|
5
6
|
import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
|
|
6
7
|
import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
|
|
7
8
|
import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
|
|
@@ -18,7 +19,8 @@ export type BreakoutPluginDependencies = [
|
|
|
18
19
|
OptionalPlugin<EditorDisabledPlugin>,
|
|
19
20
|
OptionalPlugin<BlockControlsPlugin>,
|
|
20
21
|
OptionalPlugin<InteractionPlugin>,
|
|
21
|
-
OptionalPlugin<UserIntentPlugin
|
|
22
|
+
OptionalPlugin<UserIntentPlugin>,
|
|
23
|
+
OptionalPlugin<GuidelinePlugin>
|
|
22
24
|
];
|
|
23
25
|
export type BreakoutPlugin = NextEditorPlugin<'breakout', {
|
|
24
26
|
pluginConfiguration: BreakoutPluginOptions | undefined;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { GuidelineConfig } from '@atlaskit/editor-common/guideline';
|
|
2
|
+
import { EditorContainerWidth } from '@atlaskit/editor-common/types';
|
|
3
|
+
import { NodeType } from '@atlaskit/editor-prosemirror/model';
|
|
4
|
+
export declare const getGuidelines: (isResizing: boolean, newWidth: number, getEditorWidth: () => EditorContainerWidth | undefined, nodeType?: NodeType | undefined) => GuidelineConfig[];
|
|
@@ -3,6 +3,10 @@ import { Mark } from '@atlaskit/editor-prosemirror/model';
|
|
|
3
3
|
import { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
4
4
|
import { BaseEventPayload, ElementDragType } from '@atlaskit/pragmatic-drag-and-drop/types';
|
|
5
5
|
import { BreakoutPlugin } from '../breakoutPluginType';
|
|
6
|
+
export declare const WIDTHS: {
|
|
7
|
+
MIN: number;
|
|
8
|
+
MAX: number;
|
|
9
|
+
};
|
|
6
10
|
export declare function createResizerCallbacks({ dom, contentDOM, view, mark, api, }: {
|
|
7
11
|
dom: HTMLElement;
|
|
8
12
|
contentDOM: HTMLElement;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-breakout",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.0",
|
|
4
4
|
"description": "Breakout plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -34,20 +34,21 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@atlaskit/adf-schema": "^47.6.0",
|
|
37
|
-
"@atlaskit/editor-common": "^
|
|
37
|
+
"@atlaskit/editor-common": "^106.1.0",
|
|
38
38
|
"@atlaskit/editor-plugin-block-controls": "^3.15.0",
|
|
39
39
|
"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
|
|
40
40
|
"@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
|
|
41
|
+
"@atlaskit/editor-plugin-guideline": "^2.0.0",
|
|
41
42
|
"@atlaskit/editor-plugin-interaction": "^1.1.0",
|
|
42
43
|
"@atlaskit/editor-plugin-user-intent": "^0.1.0",
|
|
43
44
|
"@atlaskit/editor-plugin-width": "^3.0.0",
|
|
44
45
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
45
46
|
"@atlaskit/editor-shared-styles": "^3.4.0",
|
|
46
|
-
"@atlaskit/icon": "^26.
|
|
47
|
+
"@atlaskit/icon": "^26.4.0",
|
|
47
48
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
48
49
|
"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
|
|
49
50
|
"@atlaskit/theme": "^18.0.0",
|
|
50
|
-
"@atlaskit/tmp-editor-statsig": "^5.
|
|
51
|
+
"@atlaskit/tmp-editor-statsig": "^5.5.0",
|
|
51
52
|
"@atlaskit/tokens": "^4.9.0",
|
|
52
53
|
"@babel/runtime": "^7.0.0",
|
|
53
54
|
"@emotion/react": "^11.7.1"
|