@atlaskit/editor-core 187.32.0 → 187.32.1
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/dist/cjs/plugins/floating-toolbar/ui/ScrollButtons.js +29 -24
- package/dist/cjs/plugins/floating-toolbar/ui/Toolbar.js +2 -2
- package/dist/cjs/plugins/media/utils/media-single.js +19 -4
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/plugins/floating-toolbar/ui/ScrollButtons.js +9 -4
- package/dist/es2019/plugins/floating-toolbar/ui/Toolbar.js +1 -1
- package/dist/es2019/plugins/media/utils/media-single.js +22 -4
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/plugins/floating-toolbar/ui/ScrollButtons.js +28 -23
- package/dist/esm/plugins/floating-toolbar/ui/Toolbar.js +1 -1
- package/dist/esm/plugins/media/utils/media-single.js +19 -4
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/plugins/floating-toolbar/ui/ScrollButtons.d.ts +3 -3
- package/dist/types/plugins/floating-toolbar/ui/Toolbar.d.ts +1 -2
- package/dist/types-ts4.5/plugins/floating-toolbar/ui/ScrollButtons.d.ts +3 -3
- package/dist/types-ts4.5/plugins/floating-toolbar/ui/Toolbar.d.ts +1 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 187.32.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`37624e80f01`](https://bitbucket.org/atlassian/atlassian-frontend/commits/37624e80f01) - NO-ISSUE Cancel animation frame debounced call when unmounting scroll buttons
|
|
8
|
+
- [`dc93b06778b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dc93b06778b) - Fix pasted mediaSingle nodes into parent nodes
|
|
9
|
+
|
|
3
10
|
## 187.32.0
|
|
4
11
|
|
|
5
12
|
### Minor Changes
|
|
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.
|
|
8
|
+
exports.ScrollButtons = void 0;
|
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
10
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
11
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
@@ -23,7 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
23
23
|
var toolbarScrollButtons = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: ", ";\n padding: ", " ", ";\n border-left: solid ", " 1px;\n flex-shrink: 0;\n align-items: center;\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(_colors.N30, ")"));
|
|
24
24
|
var LeftIcon = _chevronLeftLarge.default;
|
|
25
25
|
var RightIcon = _chevronRightLarge.default;
|
|
26
|
-
var
|
|
26
|
+
var ScrollButtons = function ScrollButtons(_ref) {
|
|
27
27
|
var intl = _ref.intl,
|
|
28
28
|
scrollContainerRef = _ref.scrollContainerRef,
|
|
29
29
|
node = _ref.node,
|
|
@@ -41,52 +41,56 @@ var _default = function _default(_ref) {
|
|
|
41
41
|
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
42
42
|
canScrollRight = _useState6[0],
|
|
43
43
|
setCanScrollRight = _useState6[1];
|
|
44
|
-
var
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
44
|
+
var setCanScrollDebounced = (0, _rafSchd.default)(function () {
|
|
45
|
+
// Refs are null before mounting and after unmount
|
|
46
|
+
if (!scrollContainerRef.current) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
var _scrollContainerRef$c = scrollContainerRef.current,
|
|
50
|
+
scrollLeft = _scrollContainerRef$c.scrollLeft,
|
|
51
|
+
scrollWidth = _scrollContainerRef$c.scrollWidth,
|
|
52
|
+
offsetWidth = _scrollContainerRef$c.offsetWidth;
|
|
49
53
|
setCanScrollLeft(scrollLeft > 0);
|
|
50
54
|
setCanScrollRight(scrollLeft + offsetWidth < scrollWidth - 1); // -1 to account for half pixel
|
|
51
55
|
});
|
|
52
56
|
|
|
53
57
|
var onScroll = function onScroll() {
|
|
54
|
-
return
|
|
58
|
+
return setCanScrollDebounced();
|
|
55
59
|
};
|
|
56
60
|
var scrollLeft = function scrollLeft() {
|
|
57
|
-
var _scrollContainerRef$
|
|
58
|
-
var
|
|
59
|
-
|
|
60
|
-
scrollContainerWidth =
|
|
61
|
-
var scrollLeft = ((_scrollContainerRef$
|
|
61
|
+
var _scrollContainerRef$c2, _scrollContainerRef$c3, _scrollContainerRef$c4;
|
|
62
|
+
var _ref2 = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.getBoundingClientRect()) || {},
|
|
63
|
+
_ref2$width = _ref2.width,
|
|
64
|
+
scrollContainerWidth = _ref2$width === void 0 ? 0 : _ref2$width;
|
|
65
|
+
var scrollLeft = ((_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollLeft) || 0;
|
|
62
66
|
|
|
63
67
|
// scroll to current position - scroll container width
|
|
64
68
|
var scrollTo = scrollLeft - scrollContainerWidth;
|
|
65
|
-
(_scrollContainerRef$
|
|
69
|
+
(_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.scrollTo({
|
|
66
70
|
top: 0,
|
|
67
71
|
left: scrollTo,
|
|
68
72
|
behavior: 'smooth'
|
|
69
73
|
});
|
|
70
74
|
};
|
|
71
75
|
var scrollRight = function scrollRight() {
|
|
72
|
-
var _scrollContainerRef$
|
|
73
|
-
var
|
|
74
|
-
|
|
75
|
-
scrollContainerWidth =
|
|
76
|
-
var scrollLeft = ((_scrollContainerRef$
|
|
76
|
+
var _scrollContainerRef$c5, _scrollContainerRef$c6, _scrollContainerRef$c7;
|
|
77
|
+
var _ref3 = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.getBoundingClientRect()) || {},
|
|
78
|
+
_ref3$width = _ref3.width,
|
|
79
|
+
scrollContainerWidth = _ref3$width === void 0 ? 0 : _ref3$width;
|
|
80
|
+
var scrollLeft = ((_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.scrollLeft) || 0;
|
|
77
81
|
|
|
78
82
|
// scroll to current position + scroll container width
|
|
79
83
|
var scrollTo = scrollLeft + scrollContainerWidth;
|
|
80
|
-
(_scrollContainerRef$
|
|
84
|
+
(_scrollContainerRef$c7 = scrollContainerRef.current) === null || _scrollContainerRef$c7 === void 0 ? void 0 : _scrollContainerRef$c7.scrollTo({
|
|
81
85
|
top: 0,
|
|
82
86
|
left: scrollTo,
|
|
83
87
|
behavior: 'smooth'
|
|
84
88
|
});
|
|
85
89
|
};
|
|
86
90
|
var resizeObserver = new ResizeObserver(function (t) {
|
|
87
|
-
var _scrollContainerRef$
|
|
88
|
-
var widthNeededToShowAllItems = ((_scrollContainerRef$
|
|
89
|
-
var availableSpace = (_scrollContainerRef$
|
|
91
|
+
var _scrollContainerRef$c8, _scrollContainerRef$c9, _scrollContainerRef$c10;
|
|
92
|
+
var widthNeededToShowAllItems = ((_scrollContainerRef$c8 = scrollContainerRef.current) === null || _scrollContainerRef$c8 === void 0 ? void 0 : _scrollContainerRef$c8.scrollWidth) || 0;
|
|
93
|
+
var availableSpace = (_scrollContainerRef$c9 = scrollContainerRef.current) === null || _scrollContainerRef$c9 === void 0 ? void 0 : (_scrollContainerRef$c10 = _scrollContainerRef$c9.parentNode) === null || _scrollContainerRef$c10 === void 0 ? void 0 : _scrollContainerRef$c10.offsetWidth;
|
|
90
94
|
if (availableSpace >= widthNeededToShowAllItems) {
|
|
91
95
|
setNeedScroll(false);
|
|
92
96
|
} else {
|
|
@@ -109,6 +113,7 @@ var _default = function _default(_ref) {
|
|
|
109
113
|
scrollContainerRefCurrent.removeEventListener('scroll', onScroll);
|
|
110
114
|
resizeObserver.unobserve(scrollContainerRefCurrent);
|
|
111
115
|
}
|
|
116
|
+
setCanScrollDebounced.cancel();
|
|
112
117
|
};
|
|
113
118
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
114
119
|
}, []);
|
|
@@ -142,4 +147,4 @@ var _default = function _default(_ref) {
|
|
|
142
147
|
disabled: !canScrollRight || disabled
|
|
143
148
|
})) : null;
|
|
144
149
|
};
|
|
145
|
-
exports.
|
|
150
|
+
exports.ScrollButtons = ScrollButtons;
|
|
@@ -36,7 +36,7 @@ var _EmojiPickerButton = require("./EmojiPickerButton");
|
|
|
36
36
|
var _reactIntlNext = require("react-intl-next");
|
|
37
37
|
var _messages = _interopRequireDefault(require("./messages"));
|
|
38
38
|
var _commands2 = require("@atlaskit/editor-plugin-table/commands");
|
|
39
|
-
var _ScrollButtons =
|
|
39
|
+
var _ScrollButtons = require("./ScrollButtons");
|
|
40
40
|
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
|
|
41
41
|
var _forceFocus = require("../pm-plugins/force-focus");
|
|
42
42
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
@@ -489,7 +489,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
|
|
|
489
489
|
mountRef: this.mountRef,
|
|
490
490
|
mounted: this.state.mounted,
|
|
491
491
|
featureFlags: this.props.featureFlags
|
|
492
|
-
}))), scrollable && (0, _react2.jsx)(_ScrollButtons.
|
|
492
|
+
}))), scrollable && (0, _react2.jsx)(_ScrollButtons.ScrollButtons, {
|
|
493
493
|
intl: intl,
|
|
494
494
|
scrollContainerRef: this.scrollContainerRef,
|
|
495
495
|
node: node,
|
|
@@ -185,14 +185,29 @@ function transformSliceForMedia(slice, schema) {
|
|
|
185
185
|
orderedList = _schema$nodes2.orderedList,
|
|
186
186
|
media = _schema$nodes2.media,
|
|
187
187
|
mediaInline = _schema$nodes2.mediaInline,
|
|
188
|
-
expand = _schema$nodes2.expand
|
|
188
|
+
expand = _schema$nodes2.expand,
|
|
189
|
+
nestedExpand = _schema$nodes2.nestedExpand;
|
|
189
190
|
return function (selection) {
|
|
190
191
|
var newSlice = slice;
|
|
191
|
-
if ((0, _utils.hasParentNodeOfType)([layoutSection, table, bulletList, orderedList, expand])(selection)) {
|
|
192
|
+
if ((0, _utils.hasParentNodeOfType)([layoutSection, table, bulletList, orderedList, expand, nestedExpand])(selection)) {
|
|
192
193
|
newSlice = (0, _slice.mapSlice)(newSlice, function (node) {
|
|
193
|
-
var
|
|
194
|
+
var extendedOrLegacyAttrs = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? {
|
|
195
|
+
layout: node.attrs.layout,
|
|
196
|
+
widthType: node.attrs.widthType,
|
|
197
|
+
width: node.attrs.width
|
|
198
|
+
} : {
|
|
194
199
|
layout: node.attrs.layout
|
|
195
|
-
}
|
|
200
|
+
};
|
|
201
|
+
var attrs = {};
|
|
202
|
+
if ((0, _utils.hasParentNodeOfType)([layoutSection, table])(selection)) {
|
|
203
|
+
// Supports layouts
|
|
204
|
+
attrs = _objectSpread({}, extendedOrLegacyAttrs);
|
|
205
|
+
} else if ((0, _utils.hasParentNodeOfType)([bulletList, orderedList, expand, nestedExpand])(selection)) {
|
|
206
|
+
// does not support other layouts
|
|
207
|
+
attrs = _objectSpread(_objectSpread({}, extendedOrLegacyAttrs), {}, {
|
|
208
|
+
layout: 'center'
|
|
209
|
+
});
|
|
210
|
+
}
|
|
196
211
|
return node.type.name === 'mediaSingle' ? mediaSingle.createChecked(attrs, node.content, node.marks) : node;
|
|
197
212
|
});
|
|
198
213
|
}
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.version = exports.nextMajorVersion = exports.name = void 0;
|
|
7
7
|
var name = "@atlaskit/editor-core";
|
|
8
8
|
exports.name = name;
|
|
9
|
-
var version = "187.32.
|
|
9
|
+
var version = "187.32.1";
|
|
10
10
|
exports.version = version;
|
|
11
11
|
var nextMajorVersion = function nextMajorVersion() {
|
|
12
12
|
return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
|
|
@@ -18,7 +18,7 @@ const toolbarScrollButtons = css`
|
|
|
18
18
|
`;
|
|
19
19
|
const LeftIcon = ChevronLeftLargeIcon;
|
|
20
20
|
const RightIcon = ChevronRightLargeIcon;
|
|
21
|
-
export
|
|
21
|
+
export const ScrollButtons = ({
|
|
22
22
|
intl,
|
|
23
23
|
scrollContainerRef,
|
|
24
24
|
node,
|
|
@@ -28,7 +28,11 @@ export default (({
|
|
|
28
28
|
const [needScroll, setNeedScroll] = useState(false);
|
|
29
29
|
const [canScrollLeft, setCanScrollLeft] = useState(true);
|
|
30
30
|
const [canScrollRight, setCanScrollRight] = useState(true);
|
|
31
|
-
const
|
|
31
|
+
const setCanScrollDebounced = rafSchedule(() => {
|
|
32
|
+
// Refs are null before mounting and after unmount
|
|
33
|
+
if (!scrollContainerRef.current) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
32
36
|
const {
|
|
33
37
|
scrollLeft,
|
|
34
38
|
scrollWidth,
|
|
@@ -38,7 +42,7 @@ export default (({
|
|
|
38
42
|
setCanScrollRight(scrollLeft + offsetWidth < scrollWidth - 1); // -1 to account for half pixel
|
|
39
43
|
});
|
|
40
44
|
|
|
41
|
-
const onScroll = () =>
|
|
45
|
+
const onScroll = () => setCanScrollDebounced();
|
|
42
46
|
const scrollLeft = () => {
|
|
43
47
|
var _scrollContainerRef$c, _scrollContainerRef$c2, _scrollContainerRef$c3;
|
|
44
48
|
const {
|
|
@@ -95,6 +99,7 @@ export default (({
|
|
|
95
99
|
scrollContainerRefCurrent.removeEventListener('scroll', onScroll);
|
|
96
100
|
resizeObserver.unobserve(scrollContainerRefCurrent);
|
|
97
101
|
}
|
|
102
|
+
setCanScrollDebounced.cancel();
|
|
98
103
|
};
|
|
99
104
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
100
105
|
}, []);
|
|
@@ -127,4 +132,4 @@ export default (({
|
|
|
127
132
|
onClick: scrollRight,
|
|
128
133
|
disabled: !canScrollRight || disabled
|
|
129
134
|
})) : null;
|
|
130
|
-
}
|
|
135
|
+
};
|
|
@@ -22,7 +22,7 @@ import { EmojiPickerButton } from './EmojiPickerButton';
|
|
|
22
22
|
import { injectIntl } from 'react-intl-next';
|
|
23
23
|
import messages from './messages';
|
|
24
24
|
import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
|
|
25
|
-
import ScrollButtons from './ScrollButtons';
|
|
25
|
+
import { ScrollButtons } from './ScrollButtons';
|
|
26
26
|
import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
|
|
27
27
|
import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
|
|
28
28
|
const ToolbarItems = /*#__PURE__*/React.memo(({
|
|
@@ -175,15 +175,33 @@ export function transformSliceForMedia(slice, schema) {
|
|
|
175
175
|
orderedList,
|
|
176
176
|
media,
|
|
177
177
|
mediaInline,
|
|
178
|
-
expand
|
|
178
|
+
expand,
|
|
179
|
+
nestedExpand
|
|
179
180
|
} = schema.nodes;
|
|
180
181
|
return selection => {
|
|
181
182
|
let newSlice = slice;
|
|
182
|
-
if (hasParentNodeOfType([layoutSection, table, bulletList, orderedList, expand])(selection)) {
|
|
183
|
+
if (hasParentNodeOfType([layoutSection, table, bulletList, orderedList, expand, nestedExpand])(selection)) {
|
|
183
184
|
newSlice = mapSlice(newSlice, node => {
|
|
184
|
-
const
|
|
185
|
+
const extendedOrLegacyAttrs = getBooleanFF('platform.editor.media.extended-resize-experience') ? {
|
|
186
|
+
layout: node.attrs.layout,
|
|
187
|
+
widthType: node.attrs.widthType,
|
|
188
|
+
width: node.attrs.width
|
|
189
|
+
} : {
|
|
185
190
|
layout: node.attrs.layout
|
|
186
|
-
}
|
|
191
|
+
};
|
|
192
|
+
let attrs = {};
|
|
193
|
+
if (hasParentNodeOfType([layoutSection, table])(selection)) {
|
|
194
|
+
// Supports layouts
|
|
195
|
+
attrs = {
|
|
196
|
+
...extendedOrLegacyAttrs
|
|
197
|
+
};
|
|
198
|
+
} else if (hasParentNodeOfType([bulletList, orderedList, expand, nestedExpand])(selection)) {
|
|
199
|
+
// does not support other layouts
|
|
200
|
+
attrs = {
|
|
201
|
+
...extendedOrLegacyAttrs,
|
|
202
|
+
layout: 'center'
|
|
203
|
+
};
|
|
204
|
+
}
|
|
187
205
|
return node.type.name === 'mediaSingle' ? mediaSingle.createChecked(attrs, node.content, node.marks) : node;
|
|
188
206
|
});
|
|
189
207
|
}
|
|
@@ -13,7 +13,7 @@ import rafSchedule from 'raf-schd';
|
|
|
13
13
|
var toolbarScrollButtons = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: ", ";\n padding: ", " ", ";\n border-left: solid ", " 1px;\n flex-shrink: 0;\n align-items: center;\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(N30, ")"));
|
|
14
14
|
var LeftIcon = ChevronLeftLargeIcon;
|
|
15
15
|
var RightIcon = ChevronRightLargeIcon;
|
|
16
|
-
export
|
|
16
|
+
export var ScrollButtons = function ScrollButtons(_ref) {
|
|
17
17
|
var intl = _ref.intl,
|
|
18
18
|
scrollContainerRef = _ref.scrollContainerRef,
|
|
19
19
|
node = _ref.node,
|
|
@@ -31,52 +31,56 @@ export default (function (_ref) {
|
|
|
31
31
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
32
32
|
canScrollRight = _useState6[0],
|
|
33
33
|
setCanScrollRight = _useState6[1];
|
|
34
|
-
var
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
34
|
+
var setCanScrollDebounced = rafSchedule(function () {
|
|
35
|
+
// Refs are null before mounting and after unmount
|
|
36
|
+
if (!scrollContainerRef.current) {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
var _scrollContainerRef$c = scrollContainerRef.current,
|
|
40
|
+
scrollLeft = _scrollContainerRef$c.scrollLeft,
|
|
41
|
+
scrollWidth = _scrollContainerRef$c.scrollWidth,
|
|
42
|
+
offsetWidth = _scrollContainerRef$c.offsetWidth;
|
|
39
43
|
setCanScrollLeft(scrollLeft > 0);
|
|
40
44
|
setCanScrollRight(scrollLeft + offsetWidth < scrollWidth - 1); // -1 to account for half pixel
|
|
41
45
|
});
|
|
42
46
|
|
|
43
47
|
var onScroll = function onScroll() {
|
|
44
|
-
return
|
|
48
|
+
return setCanScrollDebounced();
|
|
45
49
|
};
|
|
46
50
|
var scrollLeft = function scrollLeft() {
|
|
47
|
-
var _scrollContainerRef$
|
|
48
|
-
var
|
|
49
|
-
|
|
50
|
-
scrollContainerWidth =
|
|
51
|
-
var scrollLeft = ((_scrollContainerRef$
|
|
51
|
+
var _scrollContainerRef$c2, _scrollContainerRef$c3, _scrollContainerRef$c4;
|
|
52
|
+
var _ref2 = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.getBoundingClientRect()) || {},
|
|
53
|
+
_ref2$width = _ref2.width,
|
|
54
|
+
scrollContainerWidth = _ref2$width === void 0 ? 0 : _ref2$width;
|
|
55
|
+
var scrollLeft = ((_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollLeft) || 0;
|
|
52
56
|
|
|
53
57
|
// scroll to current position - scroll container width
|
|
54
58
|
var scrollTo = scrollLeft - scrollContainerWidth;
|
|
55
|
-
(_scrollContainerRef$
|
|
59
|
+
(_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.scrollTo({
|
|
56
60
|
top: 0,
|
|
57
61
|
left: scrollTo,
|
|
58
62
|
behavior: 'smooth'
|
|
59
63
|
});
|
|
60
64
|
};
|
|
61
65
|
var scrollRight = function scrollRight() {
|
|
62
|
-
var _scrollContainerRef$
|
|
63
|
-
var
|
|
64
|
-
|
|
65
|
-
scrollContainerWidth =
|
|
66
|
-
var scrollLeft = ((_scrollContainerRef$
|
|
66
|
+
var _scrollContainerRef$c5, _scrollContainerRef$c6, _scrollContainerRef$c7;
|
|
67
|
+
var _ref3 = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.getBoundingClientRect()) || {},
|
|
68
|
+
_ref3$width = _ref3.width,
|
|
69
|
+
scrollContainerWidth = _ref3$width === void 0 ? 0 : _ref3$width;
|
|
70
|
+
var scrollLeft = ((_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.scrollLeft) || 0;
|
|
67
71
|
|
|
68
72
|
// scroll to current position + scroll container width
|
|
69
73
|
var scrollTo = scrollLeft + scrollContainerWidth;
|
|
70
|
-
(_scrollContainerRef$
|
|
74
|
+
(_scrollContainerRef$c7 = scrollContainerRef.current) === null || _scrollContainerRef$c7 === void 0 ? void 0 : _scrollContainerRef$c7.scrollTo({
|
|
71
75
|
top: 0,
|
|
72
76
|
left: scrollTo,
|
|
73
77
|
behavior: 'smooth'
|
|
74
78
|
});
|
|
75
79
|
};
|
|
76
80
|
var resizeObserver = new ResizeObserver(function (t) {
|
|
77
|
-
var _scrollContainerRef$
|
|
78
|
-
var widthNeededToShowAllItems = ((_scrollContainerRef$
|
|
79
|
-
var availableSpace = (_scrollContainerRef$
|
|
81
|
+
var _scrollContainerRef$c8, _scrollContainerRef$c9, _scrollContainerRef$c10;
|
|
82
|
+
var widthNeededToShowAllItems = ((_scrollContainerRef$c8 = scrollContainerRef.current) === null || _scrollContainerRef$c8 === void 0 ? void 0 : _scrollContainerRef$c8.scrollWidth) || 0;
|
|
83
|
+
var availableSpace = (_scrollContainerRef$c9 = scrollContainerRef.current) === null || _scrollContainerRef$c9 === void 0 ? void 0 : (_scrollContainerRef$c10 = _scrollContainerRef$c9.parentNode) === null || _scrollContainerRef$c10 === void 0 ? void 0 : _scrollContainerRef$c10.offsetWidth;
|
|
80
84
|
if (availableSpace >= widthNeededToShowAllItems) {
|
|
81
85
|
setNeedScroll(false);
|
|
82
86
|
} else {
|
|
@@ -99,6 +103,7 @@ export default (function (_ref) {
|
|
|
99
103
|
scrollContainerRefCurrent.removeEventListener('scroll', onScroll);
|
|
100
104
|
resizeObserver.unobserve(scrollContainerRefCurrent);
|
|
101
105
|
}
|
|
106
|
+
setCanScrollDebounced.cancel();
|
|
102
107
|
};
|
|
103
108
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
104
109
|
}, []);
|
|
@@ -131,4 +136,4 @@ export default (function (_ref) {
|
|
|
131
136
|
onClick: scrollRight,
|
|
132
137
|
disabled: !canScrollRight || disabled
|
|
133
138
|
})) : null;
|
|
134
|
-
}
|
|
139
|
+
};
|
|
@@ -32,7 +32,7 @@ import { EmojiPickerButton } from './EmojiPickerButton';
|
|
|
32
32
|
import { injectIntl } from 'react-intl-next';
|
|
33
33
|
import messages from './messages';
|
|
34
34
|
import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
|
|
35
|
-
import ScrollButtons from './ScrollButtons';
|
|
35
|
+
import { ScrollButtons } from './ScrollButtons';
|
|
36
36
|
import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
|
|
37
37
|
import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
|
|
38
38
|
var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
|
|
@@ -171,14 +171,29 @@ export function transformSliceForMedia(slice, schema) {
|
|
|
171
171
|
orderedList = _schema$nodes2.orderedList,
|
|
172
172
|
media = _schema$nodes2.media,
|
|
173
173
|
mediaInline = _schema$nodes2.mediaInline,
|
|
174
|
-
expand = _schema$nodes2.expand
|
|
174
|
+
expand = _schema$nodes2.expand,
|
|
175
|
+
nestedExpand = _schema$nodes2.nestedExpand;
|
|
175
176
|
return function (selection) {
|
|
176
177
|
var newSlice = slice;
|
|
177
|
-
if (hasParentNodeOfType([layoutSection, table, bulletList, orderedList, expand])(selection)) {
|
|
178
|
+
if (hasParentNodeOfType([layoutSection, table, bulletList, orderedList, expand, nestedExpand])(selection)) {
|
|
178
179
|
newSlice = mapSlice(newSlice, function (node) {
|
|
179
|
-
var
|
|
180
|
+
var extendedOrLegacyAttrs = getBooleanFF('platform.editor.media.extended-resize-experience') ? {
|
|
181
|
+
layout: node.attrs.layout,
|
|
182
|
+
widthType: node.attrs.widthType,
|
|
183
|
+
width: node.attrs.width
|
|
184
|
+
} : {
|
|
180
185
|
layout: node.attrs.layout
|
|
181
|
-
}
|
|
186
|
+
};
|
|
187
|
+
var attrs = {};
|
|
188
|
+
if (hasParentNodeOfType([layoutSection, table])(selection)) {
|
|
189
|
+
// Supports layouts
|
|
190
|
+
attrs = _objectSpread({}, extendedOrLegacyAttrs);
|
|
191
|
+
} else if (hasParentNodeOfType([bulletList, orderedList, expand, nestedExpand])(selection)) {
|
|
192
|
+
// does not support other layouts
|
|
193
|
+
attrs = _objectSpread(_objectSpread({}, extendedOrLegacyAttrs), {}, {
|
|
194
|
+
layout: 'center'
|
|
195
|
+
});
|
|
196
|
+
}
|
|
182
197
|
return node.type.name === 'mediaSingle' ? mediaSingle.createChecked(attrs, node.content, node.marks) : node;
|
|
183
198
|
});
|
|
184
199
|
}
|
|
@@ -3,11 +3,11 @@ import React from 'react';
|
|
|
3
3
|
import { jsx } from '@emotion/react';
|
|
4
4
|
import type { Node } from '@atlaskit/editor-prosemirror/model';
|
|
5
5
|
import type { IntlShape } from 'react-intl-next';
|
|
6
|
-
|
|
6
|
+
interface ScrollButtonsProps {
|
|
7
7
|
intl: IntlShape;
|
|
8
8
|
scrollContainerRef: React.RefObject<HTMLDivElement>;
|
|
9
9
|
node: Node;
|
|
10
10
|
disabled: boolean;
|
|
11
11
|
}
|
|
12
|
-
declare const
|
|
13
|
-
export
|
|
12
|
+
export declare const ScrollButtons: ({ intl, scrollContainerRef, node, disabled, }: ScrollButtonsProps) => jsx.JSX.Element | null;
|
|
13
|
+
export {};
|
|
@@ -5,9 +5,8 @@ import type { Node } from '@atlaskit/editor-prosemirror/model';
|
|
|
5
5
|
import type { ExtensionProvider } from '@atlaskit/editor-common/extensions';
|
|
6
6
|
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
7
7
|
import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
|
|
8
|
-
import type { FloatingToolbarItem } from '@atlaskit/editor-common/types';
|
|
9
8
|
import type { WrappedComponentProps } from 'react-intl-next';
|
|
10
|
-
import type { FeatureFlags, PluginInjectionAPIWithDependencies, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
9
|
+
import type { FloatingToolbarItem, FeatureFlags, PluginInjectionAPIWithDependencies, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
11
10
|
import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
|
|
12
11
|
import type { contextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
|
|
13
12
|
export type Item = FloatingToolbarItem<Function>;
|
|
@@ -3,11 +3,11 @@ import React from 'react';
|
|
|
3
3
|
import { jsx } from '@emotion/react';
|
|
4
4
|
import type { Node } from '@atlaskit/editor-prosemirror/model';
|
|
5
5
|
import type { IntlShape } from 'react-intl-next';
|
|
6
|
-
|
|
6
|
+
interface ScrollButtonsProps {
|
|
7
7
|
intl: IntlShape;
|
|
8
8
|
scrollContainerRef: React.RefObject<HTMLDivElement>;
|
|
9
9
|
node: Node;
|
|
10
10
|
disabled: boolean;
|
|
11
11
|
}
|
|
12
|
-
declare const
|
|
13
|
-
export
|
|
12
|
+
export declare const ScrollButtons: ({ intl, scrollContainerRef, node, disabled, }: ScrollButtonsProps) => jsx.JSX.Element | null;
|
|
13
|
+
export {};
|
|
@@ -5,9 +5,8 @@ import type { Node } from '@atlaskit/editor-prosemirror/model';
|
|
|
5
5
|
import type { ExtensionProvider } from '@atlaskit/editor-common/extensions';
|
|
6
6
|
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
7
7
|
import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
|
|
8
|
-
import type { FloatingToolbarItem } from '@atlaskit/editor-common/types';
|
|
9
8
|
import type { WrappedComponentProps } from 'react-intl-next';
|
|
10
|
-
import type { FeatureFlags, PluginInjectionAPIWithDependencies, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
9
|
+
import type { FloatingToolbarItem, FeatureFlags, PluginInjectionAPIWithDependencies, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
11
10
|
import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
|
|
12
11
|
import type { contextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
|
|
13
12
|
export type Item = FloatingToolbarItem<Function>;
|