@atlaskit/editor-plugin-layout 2.4.4 → 2.5.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 +12 -0
- package/dist/cjs/layoutPlugin.js +4 -2
- package/dist/cjs/nodeviews/index.js +16 -1
- package/dist/cjs/pm-plugins/main.js +9 -3
- package/dist/cjs/pm-plugins/utils/index.js +41 -1
- package/dist/es2019/layoutPlugin.js +4 -2
- package/dist/es2019/nodeviews/index.js +16 -1
- package/dist/es2019/pm-plugins/main.js +10 -3
- package/dist/es2019/pm-plugins/utils/index.js +39 -0
- package/dist/esm/layoutPlugin.js +4 -2
- package/dist/esm/nodeviews/index.js +16 -1
- package/dist/esm/pm-plugins/main.js +9 -3
- package/dist/esm/pm-plugins/utils/index.js +40 -0
- package/dist/types/pm-plugins/types.d.ts +1 -0
- package/dist/types/pm-plugins/utils/index.d.ts +10 -1
- package/dist/types-ts4.5/pm-plugins/types.d.ts +1 -0
- package/dist/types-ts4.5/pm-plugins/utils/index.d.ts +10 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-layout
|
|
2
2
|
|
|
3
|
+
## 2.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#137973](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137973)
|
|
8
|
+
[`5cc195689bfb2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5cc195689bfb2) -
|
|
9
|
+
ED-27400 add resize layout to single column layout
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
3
15
|
## 2.4.4
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/dist/cjs/layoutPlugin.js
CHANGED
|
@@ -63,8 +63,10 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
|
|
|
63
63
|
pos = _ref3.pos,
|
|
64
64
|
allowBreakout = _ref3.allowBreakout,
|
|
65
65
|
addSidebarLayouts = _ref3.addSidebarLayouts,
|
|
66
|
-
allowSingleColumnLayout = _ref3.allowSingleColumnLayout
|
|
67
|
-
|
|
66
|
+
allowSingleColumnLayout = _ref3.allowSingleColumnLayout,
|
|
67
|
+
isResizing = _ref3.isResizing;
|
|
68
|
+
var shouldHideToolbar = isResizing && (0, _experiments.editorExperiment)('single_column_layouts', true);
|
|
69
|
+
if (pos !== null && !shouldHideToolbar) {
|
|
68
70
|
return (0, _toolbar.buildToolbar)(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api);
|
|
69
71
|
}
|
|
70
72
|
return undefined;
|
|
@@ -17,6 +17,7 @@ var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/rea
|
|
|
17
17
|
var _resizer = require("@atlaskit/editor-common/resizer");
|
|
18
18
|
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
19
19
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
20
|
+
var _utils = require("../pm-plugins/utils");
|
|
20
21
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
21
22
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
22
23
|
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
|
|
@@ -68,6 +69,17 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
|
|
|
68
69
|
guidelines: guidelines
|
|
69
70
|
});
|
|
70
71
|
}, [pluginInjectionApi, view]);
|
|
72
|
+
|
|
73
|
+
// we want to hide the floating toolbar for other nodes.
|
|
74
|
+
// e.g. info panel inside the current layout section
|
|
75
|
+
var selectIntoCurrentLayout = (0, _react.useCallback)(function () {
|
|
76
|
+
var pos = getPos();
|
|
77
|
+
if (pos === undefined) {
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
// put the selection into the first column of the layout
|
|
81
|
+
(0, _utils.selectIntoLayout)(view, pos, 0);
|
|
82
|
+
}, [getPos, view]);
|
|
71
83
|
return /*#__PURE__*/_react.default.createElement(_resizer.BreakoutResizer, {
|
|
72
84
|
getRef: forwardRef,
|
|
73
85
|
getPos: getPos,
|
|
@@ -78,7 +90,10 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
|
|
|
78
90
|
parentRef: parentRef,
|
|
79
91
|
editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
|
|
80
92
|
displayGuidelines: (0, _experiments.editorExperiment)('single_column_layouts', true) ? displayGuidelines : undefined,
|
|
81
|
-
displayGapCursor: displayGapCursor
|
|
93
|
+
displayGapCursor: displayGapCursor,
|
|
94
|
+
onResizeStart: function onResizeStart() {
|
|
95
|
+
selectIntoCurrentLayout();
|
|
96
|
+
}
|
|
82
97
|
});
|
|
83
98
|
};
|
|
84
99
|
var toDOM = function toDOM() {
|
|
@@ -68,7 +68,8 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
|
|
|
68
68
|
allowBreakout: allowBreakout,
|
|
69
69
|
addSidebarLayouts: addSidebarLayouts,
|
|
70
70
|
selectedLayout: selectedLayout,
|
|
71
|
-
allowSingleColumnLayout: allowSingleColumnLayout
|
|
71
|
+
allowSingleColumnLayout: allowSingleColumnLayout,
|
|
72
|
+
isResizing: false
|
|
72
73
|
};
|
|
73
74
|
};
|
|
74
75
|
|
|
@@ -103,11 +104,14 @@ var _default = exports.default = function _default(options) {
|
|
|
103
104
|
init: function init(_, state) {
|
|
104
105
|
return getInitialPluginState(options, state);
|
|
105
106
|
},
|
|
106
|
-
apply: function apply(tr, pluginState,
|
|
107
|
+
apply: function apply(tr, pluginState, oldState, newState) {
|
|
108
|
+
var _tr$getMeta, _pluginKey$getState;
|
|
109
|
+
var isResizing = (0, _experiments.editorExperiment)('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = _pluginKey.pluginKey.getState(oldState)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.isResizing : false;
|
|
107
110
|
if (tr.docChanged || tr.selectionSet) {
|
|
108
111
|
var maybeLayoutSection = (0, _utils3.getMaybeLayoutSection)(newState);
|
|
109
112
|
var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
110
113
|
pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
|
|
114
|
+
isResizing: isResizing,
|
|
111
115
|
selectedLayout: (0, _actions.getSelectedLayout)(maybeLayoutSection && maybeLayoutSection.node,
|
|
112
116
|
// Ignored via go/ees005
|
|
113
117
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
@@ -115,7 +119,9 @@ var _default = exports.default = function _default(options) {
|
|
|
115
119
|
});
|
|
116
120
|
return newPluginState;
|
|
117
121
|
}
|
|
118
|
-
return pluginState
|
|
122
|
+
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
123
|
+
isResizing: isResizing
|
|
124
|
+
});
|
|
119
125
|
}
|
|
120
126
|
},
|
|
121
127
|
props: {
|
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.getMaybeLayoutSection = void 0;
|
|
6
|
+
exports.selectIntoLayout = exports.getMaybeLayoutSection = void 0;
|
|
7
|
+
var _selection = require("@atlaskit/editor-common/selection");
|
|
8
|
+
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
7
9
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
8
10
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
9
11
|
var getMaybeLayoutSection = exports.getMaybeLayoutSection = function getMaybeLayoutSection(state) {
|
|
@@ -15,4 +17,42 @@ var getMaybeLayoutSection = exports.getMaybeLayoutSection = function getMaybeLay
|
|
|
15
17
|
|
|
16
18
|
// When selection is on layoutColumn, we want to hide floating toolbar, hence don't return layoutSection node here
|
|
17
19
|
return isLayoutColumn ? undefined : (0, _utils.findParentNodeOfType)(layoutSection)(selection) || (0, _utils.findSelectedNodeOfType)([layoutSection])(selection);
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* The depth of the layout column inside the layout section.
|
|
24
|
+
* As per the current implementation, the layout column ALWAYS has a depth of 1.
|
|
25
|
+
*/
|
|
26
|
+
var LAYOUT_COLUMN_DEPTH = 1;
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* This helper function is used to select a position inside a layout section.
|
|
30
|
+
* @param view editor view instance
|
|
31
|
+
* @param posOfLayout the starting position of the layout
|
|
32
|
+
* @param childIndex the index of the child node in the layout section
|
|
33
|
+
* @returns Transaction or undefined
|
|
34
|
+
*/
|
|
35
|
+
var selectIntoLayout = exports.selectIntoLayout = function selectIntoLayout(view, posOfLayout) {
|
|
36
|
+
var _$maybeLayoutSection$;
|
|
37
|
+
var childIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
38
|
+
var $maybeLayoutSection = view.state.doc.resolve(posOfLayout);
|
|
39
|
+
if (((_$maybeLayoutSection$ = $maybeLayoutSection.nodeAfter) === null || _$maybeLayoutSection$ === void 0 ? void 0 : _$maybeLayoutSection$.type.name) === 'layoutSection') {
|
|
40
|
+
var _layoutSectionNode$fi;
|
|
41
|
+
// $maybeLayoutSection.posAtIndex(1, 1);
|
|
42
|
+
var layoutSectionNode = $maybeLayoutSection.nodeAfter;
|
|
43
|
+
|
|
44
|
+
// check if the childIndex is valid
|
|
45
|
+
if (childIndex < 0 || childIndex >= layoutSectionNode.childCount) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
var childPos = $maybeLayoutSection.posAtIndex(childIndex, LAYOUT_COLUMN_DEPTH);
|
|
49
|
+
var tr = view.state.tr;
|
|
50
|
+
var $selectionPos = tr.doc.resolve(childPos);
|
|
51
|
+
if (((_layoutSectionNode$fi = layoutSectionNode.firstChild) === null || _layoutSectionNode$fi === void 0 ? void 0 : _layoutSectionNode$fi.type.name) === 'paragraph') {
|
|
52
|
+
view.dispatch(tr.setSelection(_state.TextSelection.near($selectionPos)));
|
|
53
|
+
} else {
|
|
54
|
+
view.dispatch(tr.setSelection(_selection.GapCursorSelection.near($selectionPos)));
|
|
55
|
+
}
|
|
56
|
+
return tr;
|
|
57
|
+
}
|
|
18
58
|
};
|
|
@@ -53,9 +53,11 @@ export const layoutPlugin = ({
|
|
|
53
53
|
pos,
|
|
54
54
|
allowBreakout,
|
|
55
55
|
addSidebarLayouts,
|
|
56
|
-
allowSingleColumnLayout
|
|
56
|
+
allowSingleColumnLayout,
|
|
57
|
+
isResizing
|
|
57
58
|
} = pluginKey.getState(state);
|
|
58
|
-
|
|
59
|
+
const shouldHideToolbar = isResizing && editorExperiment('single_column_layouts', true);
|
|
60
|
+
if (pos !== null && !shouldHideToolbar) {
|
|
59
61
|
return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api);
|
|
60
62
|
}
|
|
61
63
|
return undefined;
|
|
@@ -4,6 +4,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
|
4
4
|
import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
|
|
5
5
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
6
6
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
7
|
+
import { selectIntoLayout } from '../pm-plugins/utils';
|
|
7
8
|
const isEmptyParagraph = node => {
|
|
8
9
|
return !!node && node.type.name === 'paragraph' && !node.childCount;
|
|
9
10
|
};
|
|
@@ -53,6 +54,17 @@ const LayoutBreakoutResizer = ({
|
|
|
53
54
|
guidelines
|
|
54
55
|
});
|
|
55
56
|
}, [pluginInjectionApi, view]);
|
|
57
|
+
|
|
58
|
+
// we want to hide the floating toolbar for other nodes.
|
|
59
|
+
// e.g. info panel inside the current layout section
|
|
60
|
+
const selectIntoCurrentLayout = useCallback(() => {
|
|
61
|
+
const pos = getPos();
|
|
62
|
+
if (pos === undefined) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
// put the selection into the first column of the layout
|
|
66
|
+
selectIntoLayout(view, pos, 0);
|
|
67
|
+
}, [getPos, view]);
|
|
56
68
|
return /*#__PURE__*/React.createElement(BreakoutResizer, {
|
|
57
69
|
getRef: forwardRef,
|
|
58
70
|
getPos: getPos,
|
|
@@ -63,7 +75,10 @@ const LayoutBreakoutResizer = ({
|
|
|
63
75
|
parentRef: parentRef,
|
|
64
76
|
editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
|
|
65
77
|
displayGuidelines: editorExperiment('single_column_layouts', true) ? displayGuidelines : undefined,
|
|
66
|
-
displayGapCursor: displayGapCursor
|
|
78
|
+
displayGapCursor: displayGapCursor,
|
|
79
|
+
onResizeStart: () => {
|
|
80
|
+
selectIntoCurrentLayout();
|
|
81
|
+
}
|
|
67
82
|
});
|
|
68
83
|
};
|
|
69
84
|
const toDOM = () => ['div', {
|
|
@@ -63,7 +63,8 @@ const getInitialPluginState = (options, state) => {
|
|
|
63
63
|
allowBreakout,
|
|
64
64
|
addSidebarLayouts,
|
|
65
65
|
selectedLayout,
|
|
66
|
-
allowSingleColumnLayout
|
|
66
|
+
allowSingleColumnLayout,
|
|
67
|
+
isResizing: false
|
|
67
68
|
};
|
|
68
69
|
};
|
|
69
70
|
|
|
@@ -95,12 +96,15 @@ export default (options => new SafePlugin({
|
|
|
95
96
|
key: pluginKey,
|
|
96
97
|
state: {
|
|
97
98
|
init: (_, state) => getInitialPluginState(options, state),
|
|
98
|
-
apply: (tr, pluginState,
|
|
99
|
+
apply: (tr, pluginState, oldState, newState) => {
|
|
100
|
+
var _tr$getMeta, _pluginKey$getState;
|
|
101
|
+
const isResizing = editorExperiment('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = pluginKey.getState(oldState)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.isResizing : false;
|
|
99
102
|
if (tr.docChanged || tr.selectionSet) {
|
|
100
103
|
const maybeLayoutSection = getMaybeLayoutSection(newState);
|
|
101
104
|
const newPluginState = {
|
|
102
105
|
...pluginState,
|
|
103
106
|
pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
|
|
107
|
+
isResizing,
|
|
104
108
|
selectedLayout: getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node,
|
|
105
109
|
// Ignored via go/ees005
|
|
106
110
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
@@ -108,7 +112,10 @@ export default (options => new SafePlugin({
|
|
|
108
112
|
};
|
|
109
113
|
return newPluginState;
|
|
110
114
|
}
|
|
111
|
-
return
|
|
115
|
+
return {
|
|
116
|
+
...pluginState,
|
|
117
|
+
isResizing
|
|
118
|
+
};
|
|
112
119
|
}
|
|
113
120
|
},
|
|
114
121
|
props: {
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { GapCursorSelection } from '@atlaskit/editor-common/selection';
|
|
2
|
+
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
1
3
|
import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
2
4
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
3
5
|
export const getMaybeLayoutSection = state => {
|
|
@@ -14,4 +16,41 @@ export const getMaybeLayoutSection = state => {
|
|
|
14
16
|
|
|
15
17
|
// When selection is on layoutColumn, we want to hide floating toolbar, hence don't return layoutSection node here
|
|
16
18
|
return isLayoutColumn ? undefined : findParentNodeOfType(layoutSection)(selection) || findSelectedNodeOfType([layoutSection])(selection);
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* The depth of the layout column inside the layout section.
|
|
23
|
+
* As per the current implementation, the layout column ALWAYS has a depth of 1.
|
|
24
|
+
*/
|
|
25
|
+
const LAYOUT_COLUMN_DEPTH = 1;
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* This helper function is used to select a position inside a layout section.
|
|
29
|
+
* @param view editor view instance
|
|
30
|
+
* @param posOfLayout the starting position of the layout
|
|
31
|
+
* @param childIndex the index of the child node in the layout section
|
|
32
|
+
* @returns Transaction or undefined
|
|
33
|
+
*/
|
|
34
|
+
export const selectIntoLayout = (view, posOfLayout, childIndex = 0) => {
|
|
35
|
+
var _$maybeLayoutSection$;
|
|
36
|
+
const $maybeLayoutSection = view.state.doc.resolve(posOfLayout);
|
|
37
|
+
if (((_$maybeLayoutSection$ = $maybeLayoutSection.nodeAfter) === null || _$maybeLayoutSection$ === void 0 ? void 0 : _$maybeLayoutSection$.type.name) === 'layoutSection') {
|
|
38
|
+
var _layoutSectionNode$fi;
|
|
39
|
+
// $maybeLayoutSection.posAtIndex(1, 1);
|
|
40
|
+
const layoutSectionNode = $maybeLayoutSection.nodeAfter;
|
|
41
|
+
|
|
42
|
+
// check if the childIndex is valid
|
|
43
|
+
if (childIndex < 0 || childIndex >= layoutSectionNode.childCount) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
const childPos = $maybeLayoutSection.posAtIndex(childIndex, LAYOUT_COLUMN_DEPTH);
|
|
47
|
+
const tr = view.state.tr;
|
|
48
|
+
const $selectionPos = tr.doc.resolve(childPos);
|
|
49
|
+
if (((_layoutSectionNode$fi = layoutSectionNode.firstChild) === null || _layoutSectionNode$fi === void 0 ? void 0 : _layoutSectionNode$fi.type.name) === 'paragraph') {
|
|
50
|
+
view.dispatch(tr.setSelection(TextSelection.near($selectionPos)));
|
|
51
|
+
} else {
|
|
52
|
+
view.dispatch(tr.setSelection(GapCursorSelection.near($selectionPos)));
|
|
53
|
+
}
|
|
54
|
+
return tr;
|
|
55
|
+
}
|
|
17
56
|
};
|
package/dist/esm/layoutPlugin.js
CHANGED
|
@@ -56,8 +56,10 @@ export var layoutPlugin = function layoutPlugin(_ref) {
|
|
|
56
56
|
pos = _ref3.pos,
|
|
57
57
|
allowBreakout = _ref3.allowBreakout,
|
|
58
58
|
addSidebarLayouts = _ref3.addSidebarLayouts,
|
|
59
|
-
allowSingleColumnLayout = _ref3.allowSingleColumnLayout
|
|
60
|
-
|
|
59
|
+
allowSingleColumnLayout = _ref3.allowSingleColumnLayout,
|
|
60
|
+
isResizing = _ref3.isResizing;
|
|
61
|
+
var shouldHideToolbar = isResizing && editorExperiment('single_column_layouts', true);
|
|
62
|
+
if (pos !== null && !shouldHideToolbar) {
|
|
61
63
|
return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api);
|
|
62
64
|
}
|
|
63
65
|
return undefined;
|
|
@@ -11,6 +11,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
|
11
11
|
import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
|
|
12
12
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
13
13
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
14
|
+
import { selectIntoLayout } from '../pm-plugins/utils';
|
|
14
15
|
var isEmptyParagraph = function isEmptyParagraph(node) {
|
|
15
16
|
return !!node && node.type.name === 'paragraph' && !node.childCount;
|
|
16
17
|
};
|
|
@@ -58,6 +59,17 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
|
|
|
58
59
|
guidelines: guidelines
|
|
59
60
|
});
|
|
60
61
|
}, [pluginInjectionApi, view]);
|
|
62
|
+
|
|
63
|
+
// we want to hide the floating toolbar for other nodes.
|
|
64
|
+
// e.g. info panel inside the current layout section
|
|
65
|
+
var selectIntoCurrentLayout = useCallback(function () {
|
|
66
|
+
var pos = getPos();
|
|
67
|
+
if (pos === undefined) {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
// put the selection into the first column of the layout
|
|
71
|
+
selectIntoLayout(view, pos, 0);
|
|
72
|
+
}, [getPos, view]);
|
|
61
73
|
return /*#__PURE__*/React.createElement(BreakoutResizer, {
|
|
62
74
|
getRef: forwardRef,
|
|
63
75
|
getPos: getPos,
|
|
@@ -68,7 +80,10 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
|
|
|
68
80
|
parentRef: parentRef,
|
|
69
81
|
editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
|
|
70
82
|
displayGuidelines: editorExperiment('single_column_layouts', true) ? displayGuidelines : undefined,
|
|
71
|
-
displayGapCursor: displayGapCursor
|
|
83
|
+
displayGapCursor: displayGapCursor,
|
|
84
|
+
onResizeStart: function onResizeStart() {
|
|
85
|
+
selectIntoCurrentLayout();
|
|
86
|
+
}
|
|
72
87
|
});
|
|
73
88
|
};
|
|
74
89
|
var toDOM = function toDOM() {
|
|
@@ -61,7 +61,8 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
|
|
|
61
61
|
allowBreakout: allowBreakout,
|
|
62
62
|
addSidebarLayouts: addSidebarLayouts,
|
|
63
63
|
selectedLayout: selectedLayout,
|
|
64
|
-
allowSingleColumnLayout: allowSingleColumnLayout
|
|
64
|
+
allowSingleColumnLayout: allowSingleColumnLayout,
|
|
65
|
+
isResizing: false
|
|
65
66
|
};
|
|
66
67
|
};
|
|
67
68
|
|
|
@@ -96,11 +97,14 @@ export default (function (options) {
|
|
|
96
97
|
init: function init(_, state) {
|
|
97
98
|
return getInitialPluginState(options, state);
|
|
98
99
|
},
|
|
99
|
-
apply: function apply(tr, pluginState,
|
|
100
|
+
apply: function apply(tr, pluginState, oldState, newState) {
|
|
101
|
+
var _tr$getMeta, _pluginKey$getState;
|
|
102
|
+
var isResizing = editorExperiment('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = pluginKey.getState(oldState)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.isResizing : false;
|
|
100
103
|
if (tr.docChanged || tr.selectionSet) {
|
|
101
104
|
var maybeLayoutSection = getMaybeLayoutSection(newState);
|
|
102
105
|
var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
103
106
|
pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
|
|
107
|
+
isResizing: isResizing,
|
|
104
108
|
selectedLayout: getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node,
|
|
105
109
|
// Ignored via go/ees005
|
|
106
110
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
@@ -108,7 +112,9 @@ export default (function (options) {
|
|
|
108
112
|
});
|
|
109
113
|
return newPluginState;
|
|
110
114
|
}
|
|
111
|
-
return pluginState
|
|
115
|
+
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
116
|
+
isResizing: isResizing
|
|
117
|
+
});
|
|
112
118
|
}
|
|
113
119
|
},
|
|
114
120
|
props: {
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { GapCursorSelection } from '@atlaskit/editor-common/selection';
|
|
2
|
+
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
1
3
|
import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
2
4
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
3
5
|
export var getMaybeLayoutSection = function getMaybeLayoutSection(state) {
|
|
@@ -9,4 +11,42 @@ export var getMaybeLayoutSection = function getMaybeLayoutSection(state) {
|
|
|
9
11
|
|
|
10
12
|
// When selection is on layoutColumn, we want to hide floating toolbar, hence don't return layoutSection node here
|
|
11
13
|
return isLayoutColumn ? undefined : findParentNodeOfType(layoutSection)(selection) || findSelectedNodeOfType([layoutSection])(selection);
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* The depth of the layout column inside the layout section.
|
|
18
|
+
* As per the current implementation, the layout column ALWAYS has a depth of 1.
|
|
19
|
+
*/
|
|
20
|
+
var LAYOUT_COLUMN_DEPTH = 1;
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* This helper function is used to select a position inside a layout section.
|
|
24
|
+
* @param view editor view instance
|
|
25
|
+
* @param posOfLayout the starting position of the layout
|
|
26
|
+
* @param childIndex the index of the child node in the layout section
|
|
27
|
+
* @returns Transaction or undefined
|
|
28
|
+
*/
|
|
29
|
+
export var selectIntoLayout = function selectIntoLayout(view, posOfLayout) {
|
|
30
|
+
var _$maybeLayoutSection$;
|
|
31
|
+
var childIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
32
|
+
var $maybeLayoutSection = view.state.doc.resolve(posOfLayout);
|
|
33
|
+
if (((_$maybeLayoutSection$ = $maybeLayoutSection.nodeAfter) === null || _$maybeLayoutSection$ === void 0 ? void 0 : _$maybeLayoutSection$.type.name) === 'layoutSection') {
|
|
34
|
+
var _layoutSectionNode$fi;
|
|
35
|
+
// $maybeLayoutSection.posAtIndex(1, 1);
|
|
36
|
+
var layoutSectionNode = $maybeLayoutSection.nodeAfter;
|
|
37
|
+
|
|
38
|
+
// check if the childIndex is valid
|
|
39
|
+
if (childIndex < 0 || childIndex >= layoutSectionNode.childCount) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
var childPos = $maybeLayoutSection.posAtIndex(childIndex, LAYOUT_COLUMN_DEPTH);
|
|
43
|
+
var tr = view.state.tr;
|
|
44
|
+
var $selectionPos = tr.doc.resolve(childPos);
|
|
45
|
+
if (((_layoutSectionNode$fi = layoutSectionNode.firstChild) === null || _layoutSectionNode$fi === void 0 ? void 0 : _layoutSectionNode$fi.type.name) === 'paragraph') {
|
|
46
|
+
view.dispatch(tr.setSelection(TextSelection.near($selectionPos)));
|
|
47
|
+
} else {
|
|
48
|
+
view.dispatch(tr.setSelection(GapCursorSelection.near($selectionPos)));
|
|
49
|
+
}
|
|
50
|
+
return tr;
|
|
51
|
+
}
|
|
12
52
|
};
|
|
@@ -1,3 +1,12 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
2
2
|
import { type ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
|
|
3
|
+
import { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
3
4
|
export declare const getMaybeLayoutSection: (state: EditorState) => ContentNodeWithPos | undefined;
|
|
5
|
+
/**
|
|
6
|
+
* This helper function is used to select a position inside a layout section.
|
|
7
|
+
* @param view editor view instance
|
|
8
|
+
* @param posOfLayout the starting position of the layout
|
|
9
|
+
* @param childIndex the index of the child node in the layout section
|
|
10
|
+
* @returns Transaction or undefined
|
|
11
|
+
*/
|
|
12
|
+
export declare const selectIntoLayout: (view: EditorView, posOfLayout: number, childIndex?: number) => import("prosemirror-state").Transaction | undefined;
|
|
@@ -1,3 +1,12 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
2
2
|
import { type ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
|
|
3
|
+
import { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
3
4
|
export declare const getMaybeLayoutSection: (state: EditorState) => ContentNodeWithPos | undefined;
|
|
5
|
+
/**
|
|
6
|
+
* This helper function is used to select a position inside a layout section.
|
|
7
|
+
* @param view editor view instance
|
|
8
|
+
* @param posOfLayout the starting position of the layout
|
|
9
|
+
* @param childIndex the index of the child node in the layout section
|
|
10
|
+
* @returns Transaction or undefined
|
|
11
|
+
*/
|
|
12
|
+
export declare const selectIntoLayout: (view: EditorView, posOfLayout: number, childIndex?: number) => import("prosemirror-state").Transaction | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-layout",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.5.0",
|
|
4
4
|
"description": "Layout plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@atlaskit/adf-schema": "^47.6.0",
|
|
37
|
-
"@atlaskit/editor-common": "^103.
|
|
37
|
+
"@atlaskit/editor-common": "^103.7.0",
|
|
38
38
|
"@atlaskit/editor-plugin-analytics": "^2.2.0",
|
|
39
39
|
"@atlaskit/editor-plugin-decorations": "^2.0.0",
|
|
40
40
|
"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
"@atlaskit/editor-plugin-width": "^3.0.0",
|
|
44
44
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
45
45
|
"@atlaskit/editor-shared-styles": "^3.4.0",
|
|
46
|
-
"@atlaskit/icon": "^25.
|
|
46
|
+
"@atlaskit/icon": "^25.6.0",
|
|
47
47
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
48
|
-
"@atlaskit/tmp-editor-statsig": "^4.
|
|
48
|
+
"@atlaskit/tmp-editor-statsig": "^4.8.0",
|
|
49
49
|
"@atlaskit/tokens": "^4.7.0",
|
|
50
50
|
"@babel/runtime": "^7.0.0",
|
|
51
51
|
"@emotion/react": "^11.7.1"
|