@atlaskit/editor-plugin-breakout 2.2.6 → 2.3.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 +17 -0
- package/dist/cjs/breakoutPlugin.js +1 -1
- package/dist/cjs/editor-commands/set-breakout-width.js +3 -2
- package/dist/cjs/pm-plugins/resizer-callbacks.js +2 -1
- package/dist/cjs/pm-plugins/resizing-plugin.js +93 -1
- package/dist/es2019/breakoutPlugin.js +1 -1
- package/dist/es2019/editor-commands/set-breakout-width.js +3 -2
- package/dist/es2019/pm-plugins/resizer-callbacks.js +2 -1
- package/dist/es2019/pm-plugins/resizing-plugin.js +96 -1
- package/dist/esm/breakoutPlugin.js +1 -1
- package/dist/esm/editor-commands/set-breakout-width.js +3 -2
- package/dist/esm/pm-plugins/resizer-callbacks.js +2 -1
- package/dist/esm/pm-plugins/resizing-plugin.js +93 -1
- package/dist/types/editor-commands/set-breakout-width.d.ts +2 -2
- package/dist/types/pm-plugins/resizing-plugin.d.ts +2 -1
- package/dist/types-ts4.5/editor-commands/set-breakout-width.d.ts +2 -2
- package/dist/types-ts4.5/pm-plugins/resizing-plugin.d.ts +2 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-breakout
|
|
2
2
|
|
|
3
|
+
## 2.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#158239](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/158239)
|
|
8
|
+
[`c2caa0af876e0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c2caa0af876e0) -
|
|
9
|
+
[ux] ED-28028 add breakout mark to expands, codeblocks and layouts for new resizing experience
|
|
10
|
+
behind the platform_editor_breakout_resizing experiment
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [#159213](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159213)
|
|
15
|
+
[`75e3b93e94f8c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/75e3b93e94f8c) -
|
|
16
|
+
[ED-28069] this change is retaining the breakout mode when setting the breakout width when using
|
|
17
|
+
the new resizing experience behind the platform_editor_breakout_resizing experiment.
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 2.2.6
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -178,7 +178,7 @@ var breakoutPlugin = exports.breakoutPlugin = function breakoutPlugin(_ref3) {
|
|
|
178
178
|
return [{
|
|
179
179
|
name: 'breakout-resizing',
|
|
180
180
|
plugin: function plugin() {
|
|
181
|
-
return (0, _resizingPlugin.createResizingPlugin)(api);
|
|
181
|
+
return (0, _resizingPlugin.createResizingPlugin)(api, options);
|
|
182
182
|
}
|
|
183
183
|
}];
|
|
184
184
|
}
|
|
@@ -5,14 +5,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.setBreakoutWidth = setBreakoutWidth;
|
|
7
7
|
// TODO: ED-28029 - add fixes for expands and codeblocks
|
|
8
|
-
function setBreakoutWidth(width, pos, isLivePage) {
|
|
8
|
+
function setBreakoutWidth(width, mode, pos, isLivePage) {
|
|
9
9
|
return function (state, dispatch) {
|
|
10
10
|
var node = state.doc.nodeAt(pos);
|
|
11
11
|
if (!node) {
|
|
12
12
|
return false;
|
|
13
13
|
}
|
|
14
14
|
var tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, [state.schema.marks.breakout.create({
|
|
15
|
-
width: width
|
|
15
|
+
width: width,
|
|
16
|
+
mode: mode
|
|
16
17
|
})]);
|
|
17
18
|
if (dispatch) {
|
|
18
19
|
dispatch(tr);
|
|
@@ -61,13 +61,14 @@ function createResizerCallbacks(_ref2) {
|
|
|
61
61
|
if (pos === undefined) {
|
|
62
62
|
return;
|
|
63
63
|
}
|
|
64
|
+
var mode = mark.attrs.mode;
|
|
64
65
|
var initialWidth = mark.attrs.width;
|
|
65
66
|
var newWidth = getProposedWidth({
|
|
66
67
|
initialWidth: initialWidth,
|
|
67
68
|
location: location,
|
|
68
69
|
api: api
|
|
69
70
|
});
|
|
70
|
-
(0, _setBreakoutWidth.setBreakoutWidth)(newWidth, pos)(view.state, view.dispatch);
|
|
71
|
+
(0, _setBreakoutWidth.setBreakoutWidth)(newWidth, mode, pos)(view.state, view.dispatch);
|
|
71
72
|
contentDOM.style.removeProperty(_resizingMarkView.LOCAL_RESIZE_PROPERTY);
|
|
72
73
|
view.dispatch(view.state.tr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false));
|
|
73
74
|
api === null || api === void 0 || api.core.actions.execute((_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default'));
|
|
@@ -5,10 +5,48 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.resizingPluginKey = exports.createResizingPlugin = void 0;
|
|
7
7
|
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
8
|
+
var _utils = require("@atlaskit/editor-common/utils");
|
|
9
|
+
var _document = require("@atlaskit/editor-common/utils/document");
|
|
8
10
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
11
|
+
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
9
12
|
var _resizingMarkView = require("./resizing-mark-view");
|
|
13
|
+
var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
|
|
14
|
+
var node = _ref.node,
|
|
15
|
+
pos = _ref.pos,
|
|
16
|
+
newState = _ref.newState,
|
|
17
|
+
newTr = _ref.newTr,
|
|
18
|
+
breakoutResizableNodes = _ref.breakoutResizableNodes,
|
|
19
|
+
isFullWidthEnabled = _ref.isFullWidthEnabled;
|
|
20
|
+
var updatedDocChanged = false;
|
|
21
|
+
var updatedTr = newTr;
|
|
22
|
+
if (breakoutResizableNodes.has(node.type)) {
|
|
23
|
+
var breakout = newState.schema.marks.breakout;
|
|
24
|
+
var breakoutMark = node.marks.find(function (mark) {
|
|
25
|
+
return mark.type === breakout;
|
|
26
|
+
});
|
|
27
|
+
if (!breakoutMark) {
|
|
28
|
+
var width = isFullWidthEnabled ? _editorSharedStyles.akEditorFullWidthLayoutWidth : _editorSharedStyles.akEditorDefaultLayoutWidth;
|
|
29
|
+
updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
|
|
30
|
+
width: width
|
|
31
|
+
})]);
|
|
32
|
+
updatedDocChanged = true;
|
|
33
|
+
} else if ((breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === null || (breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === undefined) {
|
|
34
|
+
var mode = breakoutMark.attrs.mode;
|
|
35
|
+
var newWidth = mode === 'wide' ? _editorSharedStyles.akEditorCalculatedWideLayoutWidth : _editorSharedStyles.akEditorFullWidthLayoutWidth;
|
|
36
|
+
updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
|
|
37
|
+
width: newWidth,
|
|
38
|
+
mode: mode
|
|
39
|
+
})]);
|
|
40
|
+
updatedDocChanged = true;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
return {
|
|
44
|
+
updatedTr: updatedTr,
|
|
45
|
+
updatedDocChanged: updatedDocChanged
|
|
46
|
+
};
|
|
47
|
+
};
|
|
10
48
|
var resizingPluginKey = exports.resizingPluginKey = new _state.PluginKey('breakout-resizing');
|
|
11
|
-
var createResizingPlugin = exports.createResizingPlugin = function createResizingPlugin(api) {
|
|
49
|
+
var createResizingPlugin = exports.createResizingPlugin = function createResizingPlugin(api, options) {
|
|
12
50
|
return new _safePlugin.SafePlugin({
|
|
13
51
|
key: resizingPluginKey,
|
|
14
52
|
props: {
|
|
@@ -17,6 +55,60 @@ var createResizingPlugin = exports.createResizingPlugin = function createResizin
|
|
|
17
55
|
return new _resizingMarkView.ResizingMarkView(mark, view, api);
|
|
18
56
|
}
|
|
19
57
|
}
|
|
58
|
+
},
|
|
59
|
+
appendTransaction: function appendTransaction(transactions, oldState, newState) {
|
|
60
|
+
var newTr = newState.tr;
|
|
61
|
+
var hasDocChanged = false;
|
|
62
|
+
var _newState$schema$node = newState.schema.nodes,
|
|
63
|
+
expand = _newState$schema$node.expand,
|
|
64
|
+
codeBlock = _newState$schema$node.codeBlock,
|
|
65
|
+
layoutSection = _newState$schema$node.layoutSection;
|
|
66
|
+
var breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
|
|
67
|
+
var isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
|
|
68
|
+
if ((0, _document.isReplaceDocOperation)(transactions, oldState)) {
|
|
69
|
+
newState.doc.forEach(function (node, pos) {
|
|
70
|
+
var _addBreakoutToResizab = addBreakoutToResizableNode({
|
|
71
|
+
node: node,
|
|
72
|
+
pos: pos,
|
|
73
|
+
newState: newState,
|
|
74
|
+
newTr: newTr,
|
|
75
|
+
breakoutResizableNodes: breakoutResizableNodes,
|
|
76
|
+
isFullWidthEnabled: isFullWidthEnabled
|
|
77
|
+
}),
|
|
78
|
+
updatedTr = _addBreakoutToResizab.updatedTr,
|
|
79
|
+
updatedDocChanged = _addBreakoutToResizab.updatedDocChanged;
|
|
80
|
+
newTr = updatedTr;
|
|
81
|
+
hasDocChanged = hasDocChanged || updatedDocChanged;
|
|
82
|
+
});
|
|
83
|
+
} else {
|
|
84
|
+
transactions.forEach(function (tr) {
|
|
85
|
+
var isAddingResizableNodes = tr.steps.some(function (step) {
|
|
86
|
+
return (0, _utils.stepAddsOneOf)(step, breakoutResizableNodes);
|
|
87
|
+
});
|
|
88
|
+
if (isAddingResizableNodes) {
|
|
89
|
+
var changedNodes = (0, _document.getChangedNodes)(tr);
|
|
90
|
+
changedNodes.forEach(function (_ref2) {
|
|
91
|
+
var node = _ref2.node,
|
|
92
|
+
pos = _ref2.pos;
|
|
93
|
+
var _addBreakoutToResizab2 = addBreakoutToResizableNode({
|
|
94
|
+
node: node,
|
|
95
|
+
pos: pos,
|
|
96
|
+
newState: newState,
|
|
97
|
+
newTr: newTr,
|
|
98
|
+
breakoutResizableNodes: breakoutResizableNodes,
|
|
99
|
+
isFullWidthEnabled: isFullWidthEnabled
|
|
100
|
+
}),
|
|
101
|
+
updatedTr = _addBreakoutToResizab2.updatedTr,
|
|
102
|
+
updatedDocChanged = _addBreakoutToResizab2.updatedDocChanged;
|
|
103
|
+
newTr = updatedTr;
|
|
104
|
+
hasDocChanged = hasDocChanged || updatedDocChanged;
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
if (hasDocChanged) {
|
|
110
|
+
return newTr;
|
|
111
|
+
}
|
|
20
112
|
}
|
|
21
113
|
});
|
|
22
114
|
};
|
|
@@ -171,7 +171,7 @@ export const breakoutPlugin = ({
|
|
|
171
171
|
if (editorExperiment('platform_editor_breakout_resizing', true)) {
|
|
172
172
|
return [{
|
|
173
173
|
name: 'breakout-resizing',
|
|
174
|
-
plugin: () => createResizingPlugin(api)
|
|
174
|
+
plugin: () => createResizingPlugin(api, options)
|
|
175
175
|
}];
|
|
176
176
|
}
|
|
177
177
|
return [{
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
// TODO: ED-28029 - add fixes for expands and codeblocks
|
|
2
|
-
export function setBreakoutWidth(width, pos, isLivePage) {
|
|
2
|
+
export function setBreakoutWidth(width, mode, pos, isLivePage) {
|
|
3
3
|
return (state, dispatch) => {
|
|
4
4
|
const node = state.doc.nodeAt(pos);
|
|
5
5
|
if (!node) {
|
|
6
6
|
return false;
|
|
7
7
|
}
|
|
8
8
|
const tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, [state.schema.marks.breakout.create({
|
|
9
|
-
width
|
|
9
|
+
width,
|
|
10
|
+
mode
|
|
10
11
|
})]);
|
|
11
12
|
if (dispatch) {
|
|
12
13
|
dispatch(tr);
|
|
@@ -59,13 +59,14 @@ export function createResizerCallbacks({
|
|
|
59
59
|
if (pos === undefined) {
|
|
60
60
|
return;
|
|
61
61
|
}
|
|
62
|
+
const mode = mark.attrs.mode;
|
|
62
63
|
const initialWidth = mark.attrs.width;
|
|
63
64
|
const newWidth = getProposedWidth({
|
|
64
65
|
initialWidth,
|
|
65
66
|
location,
|
|
66
67
|
api
|
|
67
68
|
});
|
|
68
|
-
setBreakoutWidth(newWidth, pos)(view.state, view.dispatch);
|
|
69
|
+
setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
|
|
69
70
|
contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
|
|
70
71
|
view.dispatch(view.state.tr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false));
|
|
71
72
|
api === null || api === void 0 ? void 0 : api.core.actions.execute((_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default'));
|
|
@@ -1,8 +1,47 @@
|
|
|
1
1
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
+
import { stepAddsOneOf } from '@atlaskit/editor-common/utils';
|
|
3
|
+
import { getChangedNodes, isReplaceDocOperation } from '@atlaskit/editor-common/utils/document';
|
|
2
4
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
5
|
+
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
3
6
|
import { ResizingMarkView } from './resizing-mark-view';
|
|
7
|
+
const addBreakoutToResizableNode = ({
|
|
8
|
+
node,
|
|
9
|
+
pos,
|
|
10
|
+
newState,
|
|
11
|
+
newTr,
|
|
12
|
+
breakoutResizableNodes,
|
|
13
|
+
isFullWidthEnabled
|
|
14
|
+
}) => {
|
|
15
|
+
let updatedDocChanged = false;
|
|
16
|
+
let updatedTr = newTr;
|
|
17
|
+
if (breakoutResizableNodes.has(node.type)) {
|
|
18
|
+
const {
|
|
19
|
+
breakout
|
|
20
|
+
} = newState.schema.marks;
|
|
21
|
+
const breakoutMark = node.marks.find(mark => mark.type === breakout);
|
|
22
|
+
if (!breakoutMark) {
|
|
23
|
+
const width = isFullWidthEnabled ? akEditorFullWidthLayoutWidth : akEditorDefaultLayoutWidth;
|
|
24
|
+
updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
|
|
25
|
+
width: width
|
|
26
|
+
})]);
|
|
27
|
+
updatedDocChanged = true;
|
|
28
|
+
} else if ((breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === null || (breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === undefined) {
|
|
29
|
+
const mode = breakoutMark.attrs.mode;
|
|
30
|
+
const newWidth = mode === 'wide' ? akEditorCalculatedWideLayoutWidth : akEditorFullWidthLayoutWidth;
|
|
31
|
+
updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
|
|
32
|
+
width: newWidth,
|
|
33
|
+
mode: mode
|
|
34
|
+
})]);
|
|
35
|
+
updatedDocChanged = true;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
return {
|
|
39
|
+
updatedTr,
|
|
40
|
+
updatedDocChanged
|
|
41
|
+
};
|
|
42
|
+
};
|
|
4
43
|
export const resizingPluginKey = new PluginKey('breakout-resizing');
|
|
5
|
-
export const createResizingPlugin = api => {
|
|
44
|
+
export const createResizingPlugin = (api, options) => {
|
|
6
45
|
return new SafePlugin({
|
|
7
46
|
key: resizingPluginKey,
|
|
8
47
|
props: {
|
|
@@ -11,6 +50,62 @@ export const createResizingPlugin = api => {
|
|
|
11
50
|
return new ResizingMarkView(mark, view, api);
|
|
12
51
|
}
|
|
13
52
|
}
|
|
53
|
+
},
|
|
54
|
+
appendTransaction(transactions, oldState, newState) {
|
|
55
|
+
let newTr = newState.tr;
|
|
56
|
+
let hasDocChanged = false;
|
|
57
|
+
const {
|
|
58
|
+
expand,
|
|
59
|
+
codeBlock,
|
|
60
|
+
layoutSection
|
|
61
|
+
} = newState.schema.nodes;
|
|
62
|
+
const breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
|
|
63
|
+
const isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
|
|
64
|
+
if (isReplaceDocOperation(transactions, oldState)) {
|
|
65
|
+
newState.doc.forEach((node, pos) => {
|
|
66
|
+
const {
|
|
67
|
+
updatedTr,
|
|
68
|
+
updatedDocChanged
|
|
69
|
+
} = addBreakoutToResizableNode({
|
|
70
|
+
node,
|
|
71
|
+
pos,
|
|
72
|
+
newState,
|
|
73
|
+
newTr,
|
|
74
|
+
breakoutResizableNodes,
|
|
75
|
+
isFullWidthEnabled
|
|
76
|
+
});
|
|
77
|
+
newTr = updatedTr;
|
|
78
|
+
hasDocChanged = hasDocChanged || updatedDocChanged;
|
|
79
|
+
});
|
|
80
|
+
} else {
|
|
81
|
+
transactions.forEach(tr => {
|
|
82
|
+
const isAddingResizableNodes = tr.steps.some(step => stepAddsOneOf(step, breakoutResizableNodes));
|
|
83
|
+
if (isAddingResizableNodes) {
|
|
84
|
+
const changedNodes = getChangedNodes(tr);
|
|
85
|
+
changedNodes.forEach(({
|
|
86
|
+
node,
|
|
87
|
+
pos
|
|
88
|
+
}) => {
|
|
89
|
+
const {
|
|
90
|
+
updatedTr,
|
|
91
|
+
updatedDocChanged
|
|
92
|
+
} = addBreakoutToResizableNode({
|
|
93
|
+
node,
|
|
94
|
+
pos,
|
|
95
|
+
newState,
|
|
96
|
+
newTr,
|
|
97
|
+
breakoutResizableNodes,
|
|
98
|
+
isFullWidthEnabled
|
|
99
|
+
});
|
|
100
|
+
newTr = updatedTr;
|
|
101
|
+
hasDocChanged = hasDocChanged || updatedDocChanged;
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
if (hasDocChanged) {
|
|
107
|
+
return newTr;
|
|
108
|
+
}
|
|
14
109
|
}
|
|
15
110
|
});
|
|
16
111
|
};
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
// TODO: ED-28029 - add fixes for expands and codeblocks
|
|
2
|
-
export function setBreakoutWidth(width, pos, isLivePage) {
|
|
2
|
+
export function setBreakoutWidth(width, mode, pos, isLivePage) {
|
|
3
3
|
return function (state, dispatch) {
|
|
4
4
|
var node = state.doc.nodeAt(pos);
|
|
5
5
|
if (!node) {
|
|
6
6
|
return false;
|
|
7
7
|
}
|
|
8
8
|
var tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, [state.schema.marks.breakout.create({
|
|
9
|
-
width: width
|
|
9
|
+
width: width,
|
|
10
|
+
mode: mode
|
|
10
11
|
})]);
|
|
11
12
|
if (dispatch) {
|
|
12
13
|
dispatch(tr);
|
|
@@ -55,13 +55,14 @@ export function createResizerCallbacks(_ref2) {
|
|
|
55
55
|
if (pos === undefined) {
|
|
56
56
|
return;
|
|
57
57
|
}
|
|
58
|
+
var mode = mark.attrs.mode;
|
|
58
59
|
var initialWidth = mark.attrs.width;
|
|
59
60
|
var newWidth = getProposedWidth({
|
|
60
61
|
initialWidth: initialWidth,
|
|
61
62
|
location: location,
|
|
62
63
|
api: api
|
|
63
64
|
});
|
|
64
|
-
setBreakoutWidth(newWidth, pos)(view.state, view.dispatch);
|
|
65
|
+
setBreakoutWidth(newWidth, mode, pos)(view.state, view.dispatch);
|
|
65
66
|
contentDOM.style.removeProperty(LOCAL_RESIZE_PROPERTY);
|
|
66
67
|
view.dispatch(view.state.tr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false));
|
|
67
68
|
api === null || api === void 0 || api.core.actions.execute((_api$userIntent2 = api.userIntent) === null || _api$userIntent2 === void 0 ? void 0 : _api$userIntent2.commands.setCurrentUserIntent('default'));
|
|
@@ -1,8 +1,46 @@
|
|
|
1
1
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
+
import { stepAddsOneOf } from '@atlaskit/editor-common/utils';
|
|
3
|
+
import { getChangedNodes, isReplaceDocOperation } from '@atlaskit/editor-common/utils/document';
|
|
2
4
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
5
|
+
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
3
6
|
import { ResizingMarkView } from './resizing-mark-view';
|
|
7
|
+
var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
|
|
8
|
+
var node = _ref.node,
|
|
9
|
+
pos = _ref.pos,
|
|
10
|
+
newState = _ref.newState,
|
|
11
|
+
newTr = _ref.newTr,
|
|
12
|
+
breakoutResizableNodes = _ref.breakoutResizableNodes,
|
|
13
|
+
isFullWidthEnabled = _ref.isFullWidthEnabled;
|
|
14
|
+
var updatedDocChanged = false;
|
|
15
|
+
var updatedTr = newTr;
|
|
16
|
+
if (breakoutResizableNodes.has(node.type)) {
|
|
17
|
+
var breakout = newState.schema.marks.breakout;
|
|
18
|
+
var breakoutMark = node.marks.find(function (mark) {
|
|
19
|
+
return mark.type === breakout;
|
|
20
|
+
});
|
|
21
|
+
if (!breakoutMark) {
|
|
22
|
+
var width = isFullWidthEnabled ? akEditorFullWidthLayoutWidth : akEditorDefaultLayoutWidth;
|
|
23
|
+
updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
|
|
24
|
+
width: width
|
|
25
|
+
})]);
|
|
26
|
+
updatedDocChanged = true;
|
|
27
|
+
} else if ((breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === null || (breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === undefined) {
|
|
28
|
+
var mode = breakoutMark.attrs.mode;
|
|
29
|
+
var newWidth = mode === 'wide' ? akEditorCalculatedWideLayoutWidth : akEditorFullWidthLayoutWidth;
|
|
30
|
+
updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
|
|
31
|
+
width: newWidth,
|
|
32
|
+
mode: mode
|
|
33
|
+
})]);
|
|
34
|
+
updatedDocChanged = true;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
return {
|
|
38
|
+
updatedTr: updatedTr,
|
|
39
|
+
updatedDocChanged: updatedDocChanged
|
|
40
|
+
};
|
|
41
|
+
};
|
|
4
42
|
export var resizingPluginKey = new PluginKey('breakout-resizing');
|
|
5
|
-
export var createResizingPlugin = function createResizingPlugin(api) {
|
|
43
|
+
export var createResizingPlugin = function createResizingPlugin(api, options) {
|
|
6
44
|
return new SafePlugin({
|
|
7
45
|
key: resizingPluginKey,
|
|
8
46
|
props: {
|
|
@@ -11,6 +49,60 @@ export var createResizingPlugin = function createResizingPlugin(api) {
|
|
|
11
49
|
return new ResizingMarkView(mark, view, api);
|
|
12
50
|
}
|
|
13
51
|
}
|
|
52
|
+
},
|
|
53
|
+
appendTransaction: function appendTransaction(transactions, oldState, newState) {
|
|
54
|
+
var newTr = newState.tr;
|
|
55
|
+
var hasDocChanged = false;
|
|
56
|
+
var _newState$schema$node = newState.schema.nodes,
|
|
57
|
+
expand = _newState$schema$node.expand,
|
|
58
|
+
codeBlock = _newState$schema$node.codeBlock,
|
|
59
|
+
layoutSection = _newState$schema$node.layoutSection;
|
|
60
|
+
var breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
|
|
61
|
+
var isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
|
|
62
|
+
if (isReplaceDocOperation(transactions, oldState)) {
|
|
63
|
+
newState.doc.forEach(function (node, pos) {
|
|
64
|
+
var _addBreakoutToResizab = addBreakoutToResizableNode({
|
|
65
|
+
node: node,
|
|
66
|
+
pos: pos,
|
|
67
|
+
newState: newState,
|
|
68
|
+
newTr: newTr,
|
|
69
|
+
breakoutResizableNodes: breakoutResizableNodes,
|
|
70
|
+
isFullWidthEnabled: isFullWidthEnabled
|
|
71
|
+
}),
|
|
72
|
+
updatedTr = _addBreakoutToResizab.updatedTr,
|
|
73
|
+
updatedDocChanged = _addBreakoutToResizab.updatedDocChanged;
|
|
74
|
+
newTr = updatedTr;
|
|
75
|
+
hasDocChanged = hasDocChanged || updatedDocChanged;
|
|
76
|
+
});
|
|
77
|
+
} else {
|
|
78
|
+
transactions.forEach(function (tr) {
|
|
79
|
+
var isAddingResizableNodes = tr.steps.some(function (step) {
|
|
80
|
+
return stepAddsOneOf(step, breakoutResizableNodes);
|
|
81
|
+
});
|
|
82
|
+
if (isAddingResizableNodes) {
|
|
83
|
+
var changedNodes = getChangedNodes(tr);
|
|
84
|
+
changedNodes.forEach(function (_ref2) {
|
|
85
|
+
var node = _ref2.node,
|
|
86
|
+
pos = _ref2.pos;
|
|
87
|
+
var _addBreakoutToResizab2 = addBreakoutToResizableNode({
|
|
88
|
+
node: node,
|
|
89
|
+
pos: pos,
|
|
90
|
+
newState: newState,
|
|
91
|
+
newTr: newTr,
|
|
92
|
+
breakoutResizableNodes: breakoutResizableNodes,
|
|
93
|
+
isFullWidthEnabled: isFullWidthEnabled
|
|
94
|
+
}),
|
|
95
|
+
updatedTr = _addBreakoutToResizab2.updatedTr,
|
|
96
|
+
updatedDocChanged = _addBreakoutToResizab2.updatedDocChanged;
|
|
97
|
+
newTr = updatedTr;
|
|
98
|
+
hasDocChanged = hasDocChanged || updatedDocChanged;
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
if (hasDocChanged) {
|
|
104
|
+
return newTr;
|
|
105
|
+
}
|
|
14
106
|
}
|
|
15
107
|
});
|
|
16
108
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import type { Command } from '@atlaskit/editor-common/types';
|
|
2
|
-
export declare function setBreakoutWidth(width: number, pos: number, isLivePage?: boolean): Command;
|
|
1
|
+
import type { BreakoutMode, Command } from '@atlaskit/editor-common/types';
|
|
2
|
+
export declare function setBreakoutWidth(width: number, mode: BreakoutMode, pos: number, isLivePage?: boolean): Command;
|
|
@@ -2,5 +2,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
|
2
2
|
import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
3
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
4
4
|
import { BreakoutPlugin } from '../breakoutPluginType';
|
|
5
|
+
import type { BreakoutPluginOptions } from '../breakoutPluginType';
|
|
5
6
|
export declare const resizingPluginKey: PluginKey<any>;
|
|
6
|
-
export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined) => SafePlugin<any>;
|
|
7
|
+
export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, options?: BreakoutPluginOptions) => SafePlugin<any>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import type { Command } from '@atlaskit/editor-common/types';
|
|
2
|
-
export declare function setBreakoutWidth(width: number, pos: number, isLivePage?: boolean): Command;
|
|
1
|
+
import type { BreakoutMode, Command } from '@atlaskit/editor-common/types';
|
|
2
|
+
export declare function setBreakoutWidth(width: number, mode: BreakoutMode, pos: number, isLivePage?: boolean): Command;
|
|
@@ -2,5 +2,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
|
2
2
|
import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
3
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
4
4
|
import { BreakoutPlugin } from '../breakoutPluginType';
|
|
5
|
+
import type { BreakoutPluginOptions } from '../breakoutPluginType';
|
|
5
6
|
export declare const resizingPluginKey: PluginKey<any>;
|
|
6
|
-
export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined) => SafePlugin<any>;
|
|
7
|
+
export declare const createResizingPlugin: (api: ExtractInjectionAPI<BreakoutPlugin> | undefined, options?: BreakoutPluginOptions) => SafePlugin<any>;
|