@atlaskit/editor-plugin-floating-toolbar 3.3.4 → 3.3.6
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/ui/ScrollButton.js +148 -0
- package/dist/cjs/ui/ScrollButtons.js +1 -0
- package/dist/cjs/ui/Toolbar.js +29 -12
- package/dist/es2019/ui/ScrollButton.js +133 -0
- package/dist/es2019/ui/ScrollButtons.js +1 -0
- package/dist/es2019/ui/Toolbar.js +29 -12
- package/dist/esm/ui/ScrollButton.js +138 -0
- package/dist/esm/ui/ScrollButtons.js +1 -0
- package/dist/esm/ui/Toolbar.js +29 -12
- package/dist/types/ui/ScrollButton.d.ts +12 -0
- package/dist/types-ts4.5/ui/ScrollButton.d.ts +12 -0
- package/package.json +13 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-floating-toolbar
|
|
2
2
|
|
|
3
|
+
## 3.3.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#135586](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135586)
|
|
8
|
+
[`3aeba66081612`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3aeba66081612) -
|
|
9
|
+
ED-26593 Add missing i18n for editor control
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 3.3.5
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#134885](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134885)
|
|
17
|
+
[`0d61709802162`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d61709802162) -
|
|
18
|
+
[ux] [ED-27312] Implement new scroll left/right buttons for scrollable floating toolbars
|
|
19
|
+
|
|
3
20
|
## 3.3.4
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.ScrollButton = void 0;
|
|
9
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _bindEventListener = require("bind-event-listener");
|
|
12
|
+
var _rafSchd = _interopRequireDefault(require("raf-schd"));
|
|
13
|
+
var _new = require("@atlaskit/button/new");
|
|
14
|
+
var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
|
|
15
|
+
var _chevronLeftChevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-left--chevron-left-large"));
|
|
16
|
+
var _chevronRightChevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-right--chevron-right-large"));
|
|
17
|
+
var _primitives = require("@atlaskit/primitives");
|
|
18
|
+
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); }
|
|
19
|
+
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; }
|
|
20
|
+
var rightSideStyles = (0, _primitives.xcss)({
|
|
21
|
+
borderLeft: "solid ".concat("var(--ds-border, #091E4224)", " 1px"),
|
|
22
|
+
right: 'space.0',
|
|
23
|
+
borderTopRightRadius: '3px',
|
|
24
|
+
borderBottomRightRadius: '3px'
|
|
25
|
+
});
|
|
26
|
+
var leftSideStyles = (0, _primitives.xcss)({
|
|
27
|
+
borderRight: "solid ".concat("var(--ds-border, #091E4224)", " 1px"),
|
|
28
|
+
left: 'space.0',
|
|
29
|
+
borderTopLeftRadius: '3px',
|
|
30
|
+
borderBottomLeftRadius: '3px'
|
|
31
|
+
});
|
|
32
|
+
var buttonCommonStyles = (0, _primitives.xcss)({
|
|
33
|
+
backgroundColor: 'elevation.surface.overlay',
|
|
34
|
+
zIndex: '1',
|
|
35
|
+
position: 'absolute'
|
|
36
|
+
});
|
|
37
|
+
var ScrollButton = exports.ScrollButton = function ScrollButton(_ref) {
|
|
38
|
+
var intl = _ref.intl,
|
|
39
|
+
scrollContainerRef = _ref.scrollContainerRef,
|
|
40
|
+
node = _ref.node,
|
|
41
|
+
disabled = _ref.disabled,
|
|
42
|
+
side = _ref.side;
|
|
43
|
+
var _useState = (0, _react.useState)(false),
|
|
44
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
45
|
+
needScroll = _useState2[0],
|
|
46
|
+
setNeedScroll = _useState2[1];
|
|
47
|
+
var _useState3 = (0, _react.useState)(true),
|
|
48
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
49
|
+
canScrollToSide = _useState4[0],
|
|
50
|
+
setCanScrollToSide = _useState4[1];
|
|
51
|
+
var setCanScrollDebounced = (0, _rafSchd.default)(function () {
|
|
52
|
+
// Refs are null before mounting and after unmount
|
|
53
|
+
if (!scrollContainerRef.current) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
var _scrollContainerRef$c = scrollContainerRef.current,
|
|
57
|
+
scrollLeft = _scrollContainerRef$c.scrollLeft,
|
|
58
|
+
scrollWidth = _scrollContainerRef$c.scrollWidth,
|
|
59
|
+
offsetWidth = _scrollContainerRef$c.offsetWidth;
|
|
60
|
+
setCanScrollToSide(
|
|
61
|
+
// -1 to account for pixel rounding error
|
|
62
|
+
side === 'left' ? scrollLeft > 0 : scrollLeft < scrollWidth - offsetWidth - 1);
|
|
63
|
+
});
|
|
64
|
+
var onScroll = function onScroll() {
|
|
65
|
+
setCanScrollDebounced();
|
|
66
|
+
};
|
|
67
|
+
var onClick = function onClick() {
|
|
68
|
+
var _scrollContainerRef$c2, _scrollContainerRef$c3, _scrollContainerRef$c4;
|
|
69
|
+
var _ref2 = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.getBoundingClientRect()) || {},
|
|
70
|
+
_ref2$width = _ref2.width,
|
|
71
|
+
scrollContainerWidth = _ref2$width === void 0 ? 0 : _ref2$width;
|
|
72
|
+
var scrollLeft = ((_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollLeft) || 0;
|
|
73
|
+
var scrollTo = side === 'left' ? scrollLeft - scrollContainerWidth : scrollLeft + scrollContainerWidth;
|
|
74
|
+
(_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 || _scrollContainerRef$c4.scrollTo({
|
|
75
|
+
top: 0,
|
|
76
|
+
left: scrollTo,
|
|
77
|
+
behavior: 'smooth'
|
|
78
|
+
});
|
|
79
|
+
};
|
|
80
|
+
var resizeObserver = new ResizeObserver(function (t) {
|
|
81
|
+
var _scrollContainerRef$c5, _scrollContainerRef$c6;
|
|
82
|
+
var widthNeededToShowAllItems = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.scrollWidth) || 0;
|
|
83
|
+
var parentNode = (_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.parentNode;
|
|
84
|
+
var availableSpace = -1;
|
|
85
|
+
if (parentNode instanceof HTMLElement) {
|
|
86
|
+
availableSpace = parentNode.offsetWidth;
|
|
87
|
+
}
|
|
88
|
+
if (availableSpace === -1) {
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
if (availableSpace >= widthNeededToShowAllItems) {
|
|
92
|
+
setNeedScroll(false);
|
|
93
|
+
} else {
|
|
94
|
+
setNeedScroll(true);
|
|
95
|
+
onScroll();
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
(0, _react.useEffect)(function () {
|
|
99
|
+
onScroll();
|
|
100
|
+
var scrollContainerRefCurrent = scrollContainerRef.current;
|
|
101
|
+
var unbind;
|
|
102
|
+
if (scrollContainerRefCurrent) {
|
|
103
|
+
// Adding/removing scroll button depending on scroll position
|
|
104
|
+
unbind = (0, _bindEventListener.bind)(scrollContainerRefCurrent, {
|
|
105
|
+
type: 'scroll',
|
|
106
|
+
listener: onScroll
|
|
107
|
+
});
|
|
108
|
+
|
|
109
|
+
// watch for toolbar resize and show/hide scroll buttons if needed
|
|
110
|
+
resizeObserver.observe(scrollContainerRefCurrent);
|
|
111
|
+
}
|
|
112
|
+
return function () {
|
|
113
|
+
if (scrollContainerRefCurrent) {
|
|
114
|
+
var _unbind;
|
|
115
|
+
(_unbind = unbind) === null || _unbind === void 0 || _unbind();
|
|
116
|
+
resizeObserver.unobserve(scrollContainerRefCurrent);
|
|
117
|
+
}
|
|
118
|
+
setCanScrollDebounced.cancel();
|
|
119
|
+
};
|
|
120
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
121
|
+
}, []);
|
|
122
|
+
(0, _react.useEffect)(function () {
|
|
123
|
+
var scrollContainerRefCurrent = scrollContainerRef.current;
|
|
124
|
+
if (scrollContainerRefCurrent) {
|
|
125
|
+
var _scrollContainerRefCu;
|
|
126
|
+
// reset scroll position when switching from one node with toolbar to another
|
|
127
|
+
// scroll to made optional as it may not be rendered in testing env
|
|
128
|
+
(_scrollContainerRefCu = scrollContainerRefCurrent.scrollTo) === null || _scrollContainerRefCu === void 0 || _scrollContainerRefCu.call(scrollContainerRefCurrent, {
|
|
129
|
+
left: 0
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
}, [node.type, scrollContainerRef]);
|
|
133
|
+
var Icon = side === 'left' ? _chevronLeftChevronLeftLarge.default : _chevronRightChevronRightLarge.default;
|
|
134
|
+
return needScroll && (side === 'left' && canScrollToSide || side === 'right' && canScrollToSide) && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
|
|
135
|
+
padding: "space.050",
|
|
136
|
+
xcss: [side === 'left' ? leftSideStyles : rightSideStyles, buttonCommonStyles]
|
|
137
|
+
}, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
|
|
138
|
+
appearance: "subtle",
|
|
139
|
+
label: intl.formatMessage(side === 'left' ? _floatingToolbar.messages.floatingToolbarScrollLeft : _floatingToolbar.messages.floatingToolbarScrollRight),
|
|
140
|
+
onClick: onClick,
|
|
141
|
+
isDisabled: disabled,
|
|
142
|
+
icon: Icon,
|
|
143
|
+
isTooltipDisabled: false,
|
|
144
|
+
tooltip: {
|
|
145
|
+
position: 'top'
|
|
146
|
+
}
|
|
147
|
+
}));
|
|
148
|
+
};
|
|
@@ -36,6 +36,7 @@ var toolbarScrollButtons = (0, _react2.css)({
|
|
|
36
36
|
});
|
|
37
37
|
var LeftIcon = _chevronLeftChevronLeftLarge.default;
|
|
38
38
|
var RightIcon = _chevronRightChevronRightLarge.default;
|
|
39
|
+
// Remove this component (replaced by ScrollButton) as part of platform_editor_controls clean up
|
|
39
40
|
var ScrollButtons = exports.ScrollButtons = function ScrollButtons(_ref) {
|
|
40
41
|
var intl = _ref.intl,
|
|
41
42
|
scrollContainerRef = _ref.scrollContainerRef,
|
package/dist/cjs/ui/Toolbar.js
CHANGED
|
@@ -19,6 +19,7 @@ var _react2 = require("@emotion/react");
|
|
|
19
19
|
var _reactIntlNext = require("react-intl-next");
|
|
20
20
|
var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
|
|
21
21
|
var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
|
|
22
|
+
var _messages = _interopRequireDefault(require("@atlaskit/editor-common/messages"));
|
|
22
23
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
23
24
|
var _uiColor = require("@atlaskit/editor-common/ui-color");
|
|
24
25
|
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
|
|
@@ -33,6 +34,7 @@ var _Dropdown = _interopRequireDefault(require("./Dropdown"));
|
|
|
33
34
|
var _EmojiPickerButton = require("./EmojiPickerButton");
|
|
34
35
|
var _ExtensionsPlaceholder = require("./ExtensionsPlaceholder");
|
|
35
36
|
var _Input = require("./Input");
|
|
37
|
+
var _ScrollButton = require("./ScrollButton");
|
|
36
38
|
var _ScrollButtons = require("./ScrollButtons");
|
|
37
39
|
var _Select = _interopRequireDefault(require("./Select"));
|
|
38
40
|
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); }
|
|
@@ -86,7 +88,8 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
|
|
|
86
88
|
node = _ref.node,
|
|
87
89
|
setDisableScroll = _ref.setDisableScroll,
|
|
88
90
|
mountRef = _ref.mountRef,
|
|
89
|
-
api = _ref.api
|
|
91
|
+
api = _ref.api,
|
|
92
|
+
intl = _ref.intl;
|
|
90
93
|
var emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
|
|
91
94
|
var renderItem = function renderItem(item, idx) {
|
|
92
95
|
var _api$contextPanel, _api$extension;
|
|
@@ -124,13 +127,15 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
|
|
|
124
127
|
icon: item.icon ? item.iconFallback ? (0, _react2.jsx)(ButtonIcon, {
|
|
125
128
|
color: getIconColor(item.disabled, item.selected),
|
|
126
129
|
spacing: "spacious",
|
|
127
|
-
label: item.title,
|
|
130
|
+
label: (0, _platformFeatureFlags.fg)('editor_a11y_remove_redundant_wrap_icon_label') ? undefined : item.title,
|
|
128
131
|
LEGACY_fallbackIcon: item.iconFallback,
|
|
129
132
|
LEGACY_primaryColor: "currentColor",
|
|
130
|
-
Legacy_secondaryColor: "var(--ds-surface, #FFFFFF)"
|
|
133
|
+
Legacy_secondaryColor: "var(--ds-surface, #FFFFFF)",
|
|
134
|
+
"aria-hidden": (0, _platformFeatureFlags.fg)('editor_a11y_remove_redundant_wrap_icon_label') ? true : false // Icon is described by the button for screen readers
|
|
131
135
|
}) : (0, _react2.jsx)(ButtonIcon, {
|
|
132
|
-
|
|
133
|
-
|
|
136
|
+
spacing: "spacious",
|
|
137
|
+
label: (0, _platformFeatureFlags.fg)('editor_a11y_remove_redundant_wrap_icon_label') ? undefined : item.title,
|
|
138
|
+
"aria-hidden": (0, _platformFeatureFlags.fg)('editor_a11y_remove_redundant_wrap_icon_label') ? true : false // Icon is described by the button for screen readers
|
|
134
139
|
}) : undefined,
|
|
135
140
|
iconAfter: item.iconAfter ? (0, _react2.jsx)(item.iconAfter, {
|
|
136
141
|
label: ""
|
|
@@ -183,10 +188,8 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
|
|
|
183
188
|
}
|
|
184
189
|
case 'overflow-dropdown':
|
|
185
190
|
return (0, _react2.jsx)(_Dropdown.default, {
|
|
186
|
-
key: idx
|
|
187
|
-
|
|
188
|
-
,
|
|
189
|
-
title: 'Show more items',
|
|
191
|
+
key: idx,
|
|
192
|
+
title: intl.formatMessage(_messages.default.viewMore),
|
|
190
193
|
icon: (0, _react2.jsx)(_showMoreHorizontal.default, {
|
|
191
194
|
label: "",
|
|
192
195
|
spacing: "spacious"
|
|
@@ -646,6 +649,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
|
|
|
646
649
|
intl = _this$props2.intl,
|
|
647
650
|
scrollable = _this$props2.scrollable,
|
|
648
651
|
mediaAssistiveMessage = _this$props2.mediaAssistiveMessage;
|
|
652
|
+
var isEditorControlsEnabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
|
|
653
|
+
var isEditorControlsPatch2Enabled = isEditorControlsEnabled && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2');
|
|
649
654
|
if (!items || !items.length) {
|
|
650
655
|
return null;
|
|
651
656
|
}
|
|
@@ -677,10 +682,16 @@ var Toolbar = /*#__PURE__*/function (_Component) {
|
|
|
677
682
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
678
683
|
,
|
|
679
684
|
className: className,
|
|
680
|
-
onMouseDown:
|
|
685
|
+
onMouseDown: isEditorControlsEnabled ? this.captureMouseEvent : undefined
|
|
681
686
|
}, (0, _react2.jsx)(_ui.Announcer, {
|
|
682
687
|
text: mediaAssistiveMessage ? "".concat(mediaAssistiveMessage, ", ").concat(intl.formatMessage(_floatingToolbar.messages.floatingToolbarAnnouncer)) : intl.formatMessage(_floatingToolbar.messages.floatingToolbarAnnouncer),
|
|
683
688
|
delay: 250
|
|
689
|
+
}), scrollable && isEditorControlsPatch2Enabled && (0, _react2.jsx)(_ScrollButton.ScrollButton, {
|
|
690
|
+
intl: intl,
|
|
691
|
+
scrollContainerRef: this.scrollContainerRef,
|
|
692
|
+
node: node,
|
|
693
|
+
disabled: this.state.scrollDisabled,
|
|
694
|
+
side: "left"
|
|
684
695
|
}), (0, _react2.jsx)("div", {
|
|
685
696
|
"data-testid": "floating-toolbar-items",
|
|
686
697
|
ref: this.scrollContainerRef
|
|
@@ -700,12 +711,18 @@ var Toolbar = /*#__PURE__*/function (_Component) {
|
|
|
700
711
|
setDisableScroll: this.setDisableScroll.bind(this),
|
|
701
712
|
mountRef: this.mountRef,
|
|
702
713
|
mounted: this.state.mounted
|
|
703
|
-
}))), scrollable && (0, _react2.jsx)(
|
|
714
|
+
}))), scrollable && (isEditorControlsPatch2Enabled ? (0, _react2.jsx)(_ScrollButton.ScrollButton, {
|
|
715
|
+
intl: intl,
|
|
716
|
+
scrollContainerRef: this.scrollContainerRef,
|
|
717
|
+
node: node,
|
|
718
|
+
disabled: this.state.scrollDisabled,
|
|
719
|
+
side: "right"
|
|
720
|
+
}) : (0, _react2.jsx)(_ScrollButtons.ScrollButtons, {
|
|
704
721
|
intl: intl,
|
|
705
722
|
scrollContainerRef: this.scrollContainerRef,
|
|
706
723
|
node: node,
|
|
707
724
|
disabled: this.state.scrollDisabled
|
|
708
|
-
})), (0, _react2.jsx)("div", {
|
|
725
|
+
}))), (0, _react2.jsx)("div", {
|
|
709
726
|
ref: this.mountRef
|
|
710
727
|
})));
|
|
711
728
|
}
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import React, { useEffect, useState } from 'react';
|
|
2
|
+
import { bind } from 'bind-event-listener';
|
|
3
|
+
import rafSchedule from 'raf-schd';
|
|
4
|
+
import { IconButton } from '@atlaskit/button/new';
|
|
5
|
+
import { messages } from '@atlaskit/editor-common/floating-toolbar';
|
|
6
|
+
import ChevronLeftLargeIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
|
|
7
|
+
import ChevronRightLargeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
|
|
8
|
+
import { Box, xcss } from '@atlaskit/primitives';
|
|
9
|
+
const rightSideStyles = xcss({
|
|
10
|
+
borderLeft: `solid ${"var(--ds-border, #091E4224)"} 1px`,
|
|
11
|
+
right: 'space.0',
|
|
12
|
+
borderTopRightRadius: '3px',
|
|
13
|
+
borderBottomRightRadius: '3px'
|
|
14
|
+
});
|
|
15
|
+
const leftSideStyles = xcss({
|
|
16
|
+
borderRight: `solid ${"var(--ds-border, #091E4224)"} 1px`,
|
|
17
|
+
left: 'space.0',
|
|
18
|
+
borderTopLeftRadius: '3px',
|
|
19
|
+
borderBottomLeftRadius: '3px'
|
|
20
|
+
});
|
|
21
|
+
const buttonCommonStyles = xcss({
|
|
22
|
+
backgroundColor: 'elevation.surface.overlay',
|
|
23
|
+
zIndex: '1',
|
|
24
|
+
position: 'absolute'
|
|
25
|
+
});
|
|
26
|
+
export const ScrollButton = ({
|
|
27
|
+
intl,
|
|
28
|
+
scrollContainerRef,
|
|
29
|
+
node,
|
|
30
|
+
disabled,
|
|
31
|
+
side
|
|
32
|
+
}) => {
|
|
33
|
+
const [needScroll, setNeedScroll] = useState(false);
|
|
34
|
+
const [canScrollToSide, setCanScrollToSide] = useState(true);
|
|
35
|
+
const setCanScrollDebounced = rafSchedule(() => {
|
|
36
|
+
// Refs are null before mounting and after unmount
|
|
37
|
+
if (!scrollContainerRef.current) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
const {
|
|
41
|
+
scrollLeft,
|
|
42
|
+
scrollWidth,
|
|
43
|
+
offsetWidth
|
|
44
|
+
} = scrollContainerRef.current;
|
|
45
|
+
setCanScrollToSide(
|
|
46
|
+
// -1 to account for pixel rounding error
|
|
47
|
+
side === 'left' ? scrollLeft > 0 : scrollLeft < scrollWidth - offsetWidth - 1);
|
|
48
|
+
});
|
|
49
|
+
const onScroll = () => {
|
|
50
|
+
setCanScrollDebounced();
|
|
51
|
+
};
|
|
52
|
+
const onClick = () => {
|
|
53
|
+
var _scrollContainerRef$c, _scrollContainerRef$c2, _scrollContainerRef$c3;
|
|
54
|
+
const {
|
|
55
|
+
width: scrollContainerWidth = 0
|
|
56
|
+
} = ((_scrollContainerRef$c = scrollContainerRef.current) === null || _scrollContainerRef$c === void 0 ? void 0 : _scrollContainerRef$c.getBoundingClientRect()) || {};
|
|
57
|
+
const scrollLeft = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.scrollLeft) || 0;
|
|
58
|
+
const scrollTo = side === 'left' ? scrollLeft - scrollContainerWidth : scrollLeft + scrollContainerWidth;
|
|
59
|
+
(_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollTo({
|
|
60
|
+
top: 0,
|
|
61
|
+
left: scrollTo,
|
|
62
|
+
behavior: 'smooth'
|
|
63
|
+
});
|
|
64
|
+
};
|
|
65
|
+
const resizeObserver = new ResizeObserver(t => {
|
|
66
|
+
var _scrollContainerRef$c4, _scrollContainerRef$c5;
|
|
67
|
+
const widthNeededToShowAllItems = ((_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.scrollWidth) || 0;
|
|
68
|
+
const parentNode = (_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.parentNode;
|
|
69
|
+
let availableSpace = -1;
|
|
70
|
+
if (parentNode instanceof HTMLElement) {
|
|
71
|
+
availableSpace = parentNode.offsetWidth;
|
|
72
|
+
}
|
|
73
|
+
if (availableSpace === -1) {
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
if (availableSpace >= widthNeededToShowAllItems) {
|
|
77
|
+
setNeedScroll(false);
|
|
78
|
+
} else {
|
|
79
|
+
setNeedScroll(true);
|
|
80
|
+
onScroll();
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
useEffect(() => {
|
|
84
|
+
onScroll();
|
|
85
|
+
const scrollContainerRefCurrent = scrollContainerRef.current;
|
|
86
|
+
let unbind;
|
|
87
|
+
if (scrollContainerRefCurrent) {
|
|
88
|
+
// Adding/removing scroll button depending on scroll position
|
|
89
|
+
unbind = bind(scrollContainerRefCurrent, {
|
|
90
|
+
type: 'scroll',
|
|
91
|
+
listener: onScroll
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
// watch for toolbar resize and show/hide scroll buttons if needed
|
|
95
|
+
resizeObserver.observe(scrollContainerRefCurrent);
|
|
96
|
+
}
|
|
97
|
+
return () => {
|
|
98
|
+
if (scrollContainerRefCurrent) {
|
|
99
|
+
var _unbind;
|
|
100
|
+
(_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
|
|
101
|
+
resizeObserver.unobserve(scrollContainerRefCurrent);
|
|
102
|
+
}
|
|
103
|
+
setCanScrollDebounced.cancel();
|
|
104
|
+
};
|
|
105
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
106
|
+
}, []);
|
|
107
|
+
useEffect(() => {
|
|
108
|
+
const scrollContainerRefCurrent = scrollContainerRef.current;
|
|
109
|
+
if (scrollContainerRefCurrent) {
|
|
110
|
+
var _scrollContainerRefCu;
|
|
111
|
+
// reset scroll position when switching from one node with toolbar to another
|
|
112
|
+
// scroll to made optional as it may not be rendered in testing env
|
|
113
|
+
(_scrollContainerRefCu = scrollContainerRefCurrent.scrollTo) === null || _scrollContainerRefCu === void 0 ? void 0 : _scrollContainerRefCu.call(scrollContainerRefCurrent, {
|
|
114
|
+
left: 0
|
|
115
|
+
});
|
|
116
|
+
}
|
|
117
|
+
}, [node.type, scrollContainerRef]);
|
|
118
|
+
const Icon = side === 'left' ? ChevronLeftLargeIcon : ChevronRightLargeIcon;
|
|
119
|
+
return needScroll && (side === 'left' && canScrollToSide || side === 'right' && canScrollToSide) && /*#__PURE__*/React.createElement(Box, {
|
|
120
|
+
padding: "space.050",
|
|
121
|
+
xcss: [side === 'left' ? leftSideStyles : rightSideStyles, buttonCommonStyles]
|
|
122
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
123
|
+
appearance: "subtle",
|
|
124
|
+
label: intl.formatMessage(side === 'left' ? messages.floatingToolbarScrollLeft : messages.floatingToolbarScrollRight),
|
|
125
|
+
onClick: onClick,
|
|
126
|
+
isDisabled: disabled,
|
|
127
|
+
icon: Icon,
|
|
128
|
+
isTooltipDisabled: false,
|
|
129
|
+
tooltip: {
|
|
130
|
+
position: 'top'
|
|
131
|
+
}
|
|
132
|
+
}));
|
|
133
|
+
};
|
|
@@ -24,6 +24,7 @@ const toolbarScrollButtons = css({
|
|
|
24
24
|
});
|
|
25
25
|
const LeftIcon = ChevronLeftLargeIcon;
|
|
26
26
|
const RightIcon = ChevronRightLargeIcon;
|
|
27
|
+
// Remove this component (replaced by ScrollButton) as part of platform_editor_controls clean up
|
|
27
28
|
export const ScrollButtons = ({
|
|
28
29
|
intl,
|
|
29
30
|
scrollContainerRef,
|
|
@@ -12,6 +12,7 @@ import { css, jsx } from '@emotion/react';
|
|
|
12
12
|
import { injectIntl } from 'react-intl-next';
|
|
13
13
|
import ButtonGroup from '@atlaskit/button/button-group';
|
|
14
14
|
import { areSameItems, messages } from '@atlaskit/editor-common/floating-toolbar';
|
|
15
|
+
import commonMessages from '@atlaskit/editor-common/messages';
|
|
15
16
|
import { Announcer, FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
|
|
16
17
|
import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
|
|
17
18
|
import { ColorPickerButton, ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
|
|
@@ -26,6 +27,7 @@ import Dropdown from './Dropdown';
|
|
|
26
27
|
import { EmojiPickerButton } from './EmojiPickerButton';
|
|
27
28
|
import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
|
|
28
29
|
import { Input } from './Input';
|
|
30
|
+
import { ScrollButton } from './ScrollButton';
|
|
29
31
|
import { ScrollButtons } from './ScrollButtons';
|
|
30
32
|
import Select from './Select';
|
|
31
33
|
export function groupItems(items) {
|
|
@@ -74,7 +76,8 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
|
|
|
74
76
|
node,
|
|
75
77
|
setDisableScroll,
|
|
76
78
|
mountRef,
|
|
77
|
-
api
|
|
79
|
+
api,
|
|
80
|
+
intl
|
|
78
81
|
}) => {
|
|
79
82
|
const emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
|
|
80
83
|
const renderItem = (item, idx) => {
|
|
@@ -113,13 +116,15 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
|
|
|
113
116
|
icon: item.icon ? item.iconFallback ? jsx(ButtonIcon, {
|
|
114
117
|
color: getIconColor(item.disabled, item.selected),
|
|
115
118
|
spacing: "spacious",
|
|
116
|
-
label: item.title,
|
|
119
|
+
label: fg('editor_a11y_remove_redundant_wrap_icon_label') ? undefined : item.title,
|
|
117
120
|
LEGACY_fallbackIcon: item.iconFallback,
|
|
118
121
|
LEGACY_primaryColor: "currentColor",
|
|
119
|
-
Legacy_secondaryColor: "var(--ds-surface, #FFFFFF)"
|
|
122
|
+
Legacy_secondaryColor: "var(--ds-surface, #FFFFFF)",
|
|
123
|
+
"aria-hidden": fg('editor_a11y_remove_redundant_wrap_icon_label') ? true : false // Icon is described by the button for screen readers
|
|
120
124
|
}) : jsx(ButtonIcon, {
|
|
121
|
-
|
|
122
|
-
|
|
125
|
+
spacing: "spacious",
|
|
126
|
+
label: fg('editor_a11y_remove_redundant_wrap_icon_label') ? undefined : item.title,
|
|
127
|
+
"aria-hidden": fg('editor_a11y_remove_redundant_wrap_icon_label') ? true : false // Icon is described by the button for screen readers
|
|
123
128
|
}) : undefined,
|
|
124
129
|
iconAfter: item.iconAfter ? jsx(item.iconAfter, {
|
|
125
130
|
label: ""
|
|
@@ -160,10 +165,8 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
|
|
|
160
165
|
}
|
|
161
166
|
case 'overflow-dropdown':
|
|
162
167
|
return jsx(Dropdown, {
|
|
163
|
-
key: idx
|
|
164
|
-
|
|
165
|
-
,
|
|
166
|
-
title: 'Show more items',
|
|
168
|
+
key: idx,
|
|
169
|
+
title: intl.formatMessage(commonMessages.viewMore),
|
|
167
170
|
icon: jsx(ShowMoreHorizontalIcon, {
|
|
168
171
|
label: "",
|
|
169
172
|
spacing: "spacious"
|
|
@@ -600,6 +603,8 @@ class Toolbar extends Component {
|
|
|
600
603
|
scrollable,
|
|
601
604
|
mediaAssistiveMessage
|
|
602
605
|
} = this.props;
|
|
606
|
+
const isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
|
|
607
|
+
const isEditorControlsPatch2Enabled = isEditorControlsEnabled && fg('platform_editor_controls_patch_2');
|
|
603
608
|
if (!items || !items.length) {
|
|
604
609
|
return null;
|
|
605
610
|
}
|
|
@@ -627,10 +632,16 @@ class Toolbar extends Component {
|
|
|
627
632
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
628
633
|
,
|
|
629
634
|
className: className,
|
|
630
|
-
onMouseDown:
|
|
635
|
+
onMouseDown: isEditorControlsEnabled ? this.captureMouseEvent : undefined
|
|
631
636
|
}, jsx(Announcer, {
|
|
632
637
|
text: mediaAssistiveMessage ? `${mediaAssistiveMessage}, ${intl.formatMessage(messages.floatingToolbarAnnouncer)}` : intl.formatMessage(messages.floatingToolbarAnnouncer),
|
|
633
638
|
delay: 250
|
|
639
|
+
}), scrollable && isEditorControlsPatch2Enabled && jsx(ScrollButton, {
|
|
640
|
+
intl: intl,
|
|
641
|
+
scrollContainerRef: this.scrollContainerRef,
|
|
642
|
+
node: node,
|
|
643
|
+
disabled: this.state.scrollDisabled,
|
|
644
|
+
side: "left"
|
|
634
645
|
}), jsx("div", {
|
|
635
646
|
"data-testid": "floating-toolbar-items",
|
|
636
647
|
ref: this.scrollContainerRef
|
|
@@ -650,12 +661,18 @@ class Toolbar extends Component {
|
|
|
650
661
|
setDisableScroll: this.setDisableScroll.bind(this),
|
|
651
662
|
mountRef: this.mountRef,
|
|
652
663
|
mounted: this.state.mounted
|
|
653
|
-
}))), scrollable && jsx(
|
|
664
|
+
}))), scrollable && (isEditorControlsPatch2Enabled ? jsx(ScrollButton, {
|
|
665
|
+
intl: intl,
|
|
666
|
+
scrollContainerRef: this.scrollContainerRef,
|
|
667
|
+
node: node,
|
|
668
|
+
disabled: this.state.scrollDisabled,
|
|
669
|
+
side: "right"
|
|
670
|
+
}) : jsx(ScrollButtons, {
|
|
654
671
|
intl: intl,
|
|
655
672
|
scrollContainerRef: this.scrollContainerRef,
|
|
656
673
|
node: node,
|
|
657
674
|
disabled: this.state.scrollDisabled
|
|
658
|
-
})), jsx("div", {
|
|
675
|
+
}))), jsx("div", {
|
|
659
676
|
ref: this.mountRef
|
|
660
677
|
})));
|
|
661
678
|
}
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
+
import React, { useEffect, useState } from 'react';
|
|
3
|
+
import { bind } from 'bind-event-listener';
|
|
4
|
+
import rafSchedule from 'raf-schd';
|
|
5
|
+
import { IconButton } from '@atlaskit/button/new';
|
|
6
|
+
import { messages } from '@atlaskit/editor-common/floating-toolbar';
|
|
7
|
+
import ChevronLeftLargeIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
|
|
8
|
+
import ChevronRightLargeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
|
|
9
|
+
import { Box, xcss } from '@atlaskit/primitives';
|
|
10
|
+
var rightSideStyles = xcss({
|
|
11
|
+
borderLeft: "solid ".concat("var(--ds-border, #091E4224)", " 1px"),
|
|
12
|
+
right: 'space.0',
|
|
13
|
+
borderTopRightRadius: '3px',
|
|
14
|
+
borderBottomRightRadius: '3px'
|
|
15
|
+
});
|
|
16
|
+
var leftSideStyles = xcss({
|
|
17
|
+
borderRight: "solid ".concat("var(--ds-border, #091E4224)", " 1px"),
|
|
18
|
+
left: 'space.0',
|
|
19
|
+
borderTopLeftRadius: '3px',
|
|
20
|
+
borderBottomLeftRadius: '3px'
|
|
21
|
+
});
|
|
22
|
+
var buttonCommonStyles = xcss({
|
|
23
|
+
backgroundColor: 'elevation.surface.overlay',
|
|
24
|
+
zIndex: '1',
|
|
25
|
+
position: 'absolute'
|
|
26
|
+
});
|
|
27
|
+
export var ScrollButton = function ScrollButton(_ref) {
|
|
28
|
+
var intl = _ref.intl,
|
|
29
|
+
scrollContainerRef = _ref.scrollContainerRef,
|
|
30
|
+
node = _ref.node,
|
|
31
|
+
disabled = _ref.disabled,
|
|
32
|
+
side = _ref.side;
|
|
33
|
+
var _useState = useState(false),
|
|
34
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
35
|
+
needScroll = _useState2[0],
|
|
36
|
+
setNeedScroll = _useState2[1];
|
|
37
|
+
var _useState3 = useState(true),
|
|
38
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
39
|
+
canScrollToSide = _useState4[0],
|
|
40
|
+
setCanScrollToSide = _useState4[1];
|
|
41
|
+
var setCanScrollDebounced = rafSchedule(function () {
|
|
42
|
+
// Refs are null before mounting and after unmount
|
|
43
|
+
if (!scrollContainerRef.current) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
var _scrollContainerRef$c = scrollContainerRef.current,
|
|
47
|
+
scrollLeft = _scrollContainerRef$c.scrollLeft,
|
|
48
|
+
scrollWidth = _scrollContainerRef$c.scrollWidth,
|
|
49
|
+
offsetWidth = _scrollContainerRef$c.offsetWidth;
|
|
50
|
+
setCanScrollToSide(
|
|
51
|
+
// -1 to account for pixel rounding error
|
|
52
|
+
side === 'left' ? scrollLeft > 0 : scrollLeft < scrollWidth - offsetWidth - 1);
|
|
53
|
+
});
|
|
54
|
+
var onScroll = function onScroll() {
|
|
55
|
+
setCanScrollDebounced();
|
|
56
|
+
};
|
|
57
|
+
var onClick = function onClick() {
|
|
58
|
+
var _scrollContainerRef$c2, _scrollContainerRef$c3, _scrollContainerRef$c4;
|
|
59
|
+
var _ref2 = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.getBoundingClientRect()) || {},
|
|
60
|
+
_ref2$width = _ref2.width,
|
|
61
|
+
scrollContainerWidth = _ref2$width === void 0 ? 0 : _ref2$width;
|
|
62
|
+
var scrollLeft = ((_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollLeft) || 0;
|
|
63
|
+
var scrollTo = side === 'left' ? scrollLeft - scrollContainerWidth : scrollLeft + scrollContainerWidth;
|
|
64
|
+
(_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 || _scrollContainerRef$c4.scrollTo({
|
|
65
|
+
top: 0,
|
|
66
|
+
left: scrollTo,
|
|
67
|
+
behavior: 'smooth'
|
|
68
|
+
});
|
|
69
|
+
};
|
|
70
|
+
var resizeObserver = new ResizeObserver(function (t) {
|
|
71
|
+
var _scrollContainerRef$c5, _scrollContainerRef$c6;
|
|
72
|
+
var widthNeededToShowAllItems = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.scrollWidth) || 0;
|
|
73
|
+
var parentNode = (_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.parentNode;
|
|
74
|
+
var availableSpace = -1;
|
|
75
|
+
if (parentNode instanceof HTMLElement) {
|
|
76
|
+
availableSpace = parentNode.offsetWidth;
|
|
77
|
+
}
|
|
78
|
+
if (availableSpace === -1) {
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
if (availableSpace >= widthNeededToShowAllItems) {
|
|
82
|
+
setNeedScroll(false);
|
|
83
|
+
} else {
|
|
84
|
+
setNeedScroll(true);
|
|
85
|
+
onScroll();
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
useEffect(function () {
|
|
89
|
+
onScroll();
|
|
90
|
+
var scrollContainerRefCurrent = scrollContainerRef.current;
|
|
91
|
+
var unbind;
|
|
92
|
+
if (scrollContainerRefCurrent) {
|
|
93
|
+
// Adding/removing scroll button depending on scroll position
|
|
94
|
+
unbind = bind(scrollContainerRefCurrent, {
|
|
95
|
+
type: 'scroll',
|
|
96
|
+
listener: onScroll
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
// watch for toolbar resize and show/hide scroll buttons if needed
|
|
100
|
+
resizeObserver.observe(scrollContainerRefCurrent);
|
|
101
|
+
}
|
|
102
|
+
return function () {
|
|
103
|
+
if (scrollContainerRefCurrent) {
|
|
104
|
+
var _unbind;
|
|
105
|
+
(_unbind = unbind) === null || _unbind === void 0 || _unbind();
|
|
106
|
+
resizeObserver.unobserve(scrollContainerRefCurrent);
|
|
107
|
+
}
|
|
108
|
+
setCanScrollDebounced.cancel();
|
|
109
|
+
};
|
|
110
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
111
|
+
}, []);
|
|
112
|
+
useEffect(function () {
|
|
113
|
+
var scrollContainerRefCurrent = scrollContainerRef.current;
|
|
114
|
+
if (scrollContainerRefCurrent) {
|
|
115
|
+
var _scrollContainerRefCu;
|
|
116
|
+
// reset scroll position when switching from one node with toolbar to another
|
|
117
|
+
// scroll to made optional as it may not be rendered in testing env
|
|
118
|
+
(_scrollContainerRefCu = scrollContainerRefCurrent.scrollTo) === null || _scrollContainerRefCu === void 0 || _scrollContainerRefCu.call(scrollContainerRefCurrent, {
|
|
119
|
+
left: 0
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
}, [node.type, scrollContainerRef]);
|
|
123
|
+
var Icon = side === 'left' ? ChevronLeftLargeIcon : ChevronRightLargeIcon;
|
|
124
|
+
return needScroll && (side === 'left' && canScrollToSide || side === 'right' && canScrollToSide) && /*#__PURE__*/React.createElement(Box, {
|
|
125
|
+
padding: "space.050",
|
|
126
|
+
xcss: [side === 'left' ? leftSideStyles : rightSideStyles, buttonCommonStyles]
|
|
127
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
128
|
+
appearance: "subtle",
|
|
129
|
+
label: intl.formatMessage(side === 'left' ? messages.floatingToolbarScrollLeft : messages.floatingToolbarScrollRight),
|
|
130
|
+
onClick: onClick,
|
|
131
|
+
isDisabled: disabled,
|
|
132
|
+
icon: Icon,
|
|
133
|
+
isTooltipDisabled: false,
|
|
134
|
+
tooltip: {
|
|
135
|
+
position: 'top'
|
|
136
|
+
}
|
|
137
|
+
}));
|
|
138
|
+
};
|
|
@@ -25,6 +25,7 @@ var toolbarScrollButtons = css({
|
|
|
25
25
|
});
|
|
26
26
|
var LeftIcon = ChevronLeftLargeIcon;
|
|
27
27
|
var RightIcon = ChevronRightLargeIcon;
|
|
28
|
+
// Remove this component (replaced by ScrollButton) as part of platform_editor_controls clean up
|
|
28
29
|
export var ScrollButtons = function ScrollButtons(_ref) {
|
|
29
30
|
var intl = _ref.intl,
|
|
30
31
|
scrollContainerRef = _ref.scrollContainerRef,
|
package/dist/esm/ui/Toolbar.js
CHANGED
|
@@ -19,6 +19,7 @@ import { css, jsx } from '@emotion/react';
|
|
|
19
19
|
import { injectIntl } from 'react-intl-next';
|
|
20
20
|
import ButtonGroup from '@atlaskit/button/button-group';
|
|
21
21
|
import { areSameItems, messages } from '@atlaskit/editor-common/floating-toolbar';
|
|
22
|
+
import commonMessages from '@atlaskit/editor-common/messages';
|
|
22
23
|
import { Announcer, FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
|
|
23
24
|
import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
|
|
24
25
|
import { ColorPickerButton, ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
|
|
@@ -33,6 +34,7 @@ import Dropdown from './Dropdown';
|
|
|
33
34
|
import { EmojiPickerButton } from './EmojiPickerButton';
|
|
34
35
|
import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
|
|
35
36
|
import { Input } from './Input';
|
|
37
|
+
import { ScrollButton } from './ScrollButton';
|
|
36
38
|
import { ScrollButtons } from './ScrollButtons';
|
|
37
39
|
import Select from './Select';
|
|
38
40
|
export function groupItems(items) {
|
|
@@ -79,7 +81,8 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
79
81
|
node = _ref.node,
|
|
80
82
|
setDisableScroll = _ref.setDisableScroll,
|
|
81
83
|
mountRef = _ref.mountRef,
|
|
82
|
-
api = _ref.api
|
|
84
|
+
api = _ref.api,
|
|
85
|
+
intl = _ref.intl;
|
|
83
86
|
var emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
|
|
84
87
|
var renderItem = function renderItem(item, idx) {
|
|
85
88
|
var _api$contextPanel, _api$extension;
|
|
@@ -117,13 +120,15 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
117
120
|
icon: item.icon ? item.iconFallback ? jsx(ButtonIcon, {
|
|
118
121
|
color: getIconColor(item.disabled, item.selected),
|
|
119
122
|
spacing: "spacious",
|
|
120
|
-
label: item.title,
|
|
123
|
+
label: fg('editor_a11y_remove_redundant_wrap_icon_label') ? undefined : item.title,
|
|
121
124
|
LEGACY_fallbackIcon: item.iconFallback,
|
|
122
125
|
LEGACY_primaryColor: "currentColor",
|
|
123
|
-
Legacy_secondaryColor: "var(--ds-surface, #FFFFFF)"
|
|
126
|
+
Legacy_secondaryColor: "var(--ds-surface, #FFFFFF)",
|
|
127
|
+
"aria-hidden": fg('editor_a11y_remove_redundant_wrap_icon_label') ? true : false // Icon is described by the button for screen readers
|
|
124
128
|
}) : jsx(ButtonIcon, {
|
|
125
|
-
|
|
126
|
-
|
|
129
|
+
spacing: "spacious",
|
|
130
|
+
label: fg('editor_a11y_remove_redundant_wrap_icon_label') ? undefined : item.title,
|
|
131
|
+
"aria-hidden": fg('editor_a11y_remove_redundant_wrap_icon_label') ? true : false // Icon is described by the button for screen readers
|
|
127
132
|
}) : undefined,
|
|
128
133
|
iconAfter: item.iconAfter ? jsx(item.iconAfter, {
|
|
129
134
|
label: ""
|
|
@@ -176,10 +181,8 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
176
181
|
}
|
|
177
182
|
case 'overflow-dropdown':
|
|
178
183
|
return jsx(Dropdown, {
|
|
179
|
-
key: idx
|
|
180
|
-
|
|
181
|
-
,
|
|
182
|
-
title: 'Show more items',
|
|
184
|
+
key: idx,
|
|
185
|
+
title: intl.formatMessage(commonMessages.viewMore),
|
|
183
186
|
icon: jsx(ShowMoreHorizontalIcon, {
|
|
184
187
|
label: "",
|
|
185
188
|
spacing: "spacious"
|
|
@@ -639,6 +642,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
|
|
|
639
642
|
intl = _this$props2.intl,
|
|
640
643
|
scrollable = _this$props2.scrollable,
|
|
641
644
|
mediaAssistiveMessage = _this$props2.mediaAssistiveMessage;
|
|
645
|
+
var isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
|
|
646
|
+
var isEditorControlsPatch2Enabled = isEditorControlsEnabled && fg('platform_editor_controls_patch_2');
|
|
642
647
|
if (!items || !items.length) {
|
|
643
648
|
return null;
|
|
644
649
|
}
|
|
@@ -670,10 +675,16 @@ var Toolbar = /*#__PURE__*/function (_Component) {
|
|
|
670
675
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
671
676
|
,
|
|
672
677
|
className: className,
|
|
673
|
-
onMouseDown:
|
|
678
|
+
onMouseDown: isEditorControlsEnabled ? this.captureMouseEvent : undefined
|
|
674
679
|
}, jsx(Announcer, {
|
|
675
680
|
text: mediaAssistiveMessage ? "".concat(mediaAssistiveMessage, ", ").concat(intl.formatMessage(messages.floatingToolbarAnnouncer)) : intl.formatMessage(messages.floatingToolbarAnnouncer),
|
|
676
681
|
delay: 250
|
|
682
|
+
}), scrollable && isEditorControlsPatch2Enabled && jsx(ScrollButton, {
|
|
683
|
+
intl: intl,
|
|
684
|
+
scrollContainerRef: this.scrollContainerRef,
|
|
685
|
+
node: node,
|
|
686
|
+
disabled: this.state.scrollDisabled,
|
|
687
|
+
side: "left"
|
|
677
688
|
}), jsx("div", {
|
|
678
689
|
"data-testid": "floating-toolbar-items",
|
|
679
690
|
ref: this.scrollContainerRef
|
|
@@ -693,12 +704,18 @@ var Toolbar = /*#__PURE__*/function (_Component) {
|
|
|
693
704
|
setDisableScroll: this.setDisableScroll.bind(this),
|
|
694
705
|
mountRef: this.mountRef,
|
|
695
706
|
mounted: this.state.mounted
|
|
696
|
-
}))), scrollable && jsx(
|
|
707
|
+
}))), scrollable && (isEditorControlsPatch2Enabled ? jsx(ScrollButton, {
|
|
708
|
+
intl: intl,
|
|
709
|
+
scrollContainerRef: this.scrollContainerRef,
|
|
710
|
+
node: node,
|
|
711
|
+
disabled: this.state.scrollDisabled,
|
|
712
|
+
side: "right"
|
|
713
|
+
}) : jsx(ScrollButtons, {
|
|
697
714
|
intl: intl,
|
|
698
715
|
scrollContainerRef: this.scrollContainerRef,
|
|
699
716
|
node: node,
|
|
700
717
|
disabled: this.state.scrollDisabled
|
|
701
|
-
})), jsx("div", {
|
|
718
|
+
}))), jsx("div", {
|
|
702
719
|
ref: this.mountRef
|
|
703
720
|
})));
|
|
704
721
|
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { IntlShape } from 'react-intl-next';
|
|
3
|
+
import type { Node } from '@atlaskit/editor-prosemirror/model';
|
|
4
|
+
type ScrollButtonProps = {
|
|
5
|
+
intl: IntlShape;
|
|
6
|
+
scrollContainerRef: React.RefObject<HTMLDivElement>;
|
|
7
|
+
node: Node;
|
|
8
|
+
disabled: boolean;
|
|
9
|
+
side: 'left' | 'right';
|
|
10
|
+
};
|
|
11
|
+
export declare const ScrollButton: ({ intl, scrollContainerRef, node, disabled, side, }: ScrollButtonProps) => false | React.JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { IntlShape } from 'react-intl-next';
|
|
3
|
+
import type { Node } from '@atlaskit/editor-prosemirror/model';
|
|
4
|
+
type ScrollButtonProps = {
|
|
5
|
+
intl: IntlShape;
|
|
6
|
+
scrollContainerRef: React.RefObject<HTMLDivElement>;
|
|
7
|
+
node: Node;
|
|
8
|
+
disabled: boolean;
|
|
9
|
+
side: 'left' | 'right';
|
|
10
|
+
};
|
|
11
|
+
export declare const ScrollButton: ({ intl, scrollContainerRef, node, disabled, side, }: ScrollButtonProps) => false | React.JSX.Element;
|
|
12
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-floating-toolbar",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.6",
|
|
4
4
|
"description": "Floating toolbar plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"@atlaskit/adf-utils": "^19.19.0",
|
|
29
29
|
"@atlaskit/button": "^23.0.0",
|
|
30
30
|
"@atlaskit/checkbox": "^17.0.0",
|
|
31
|
-
"@atlaskit/editor-common": "^102.
|
|
31
|
+
"@atlaskit/editor-common": "^102.18.0",
|
|
32
32
|
"@atlaskit/editor-palette": "^2.1.0",
|
|
33
33
|
"@atlaskit/editor-plugin-block-controls": "^3.8.0",
|
|
34
34
|
"@atlaskit/editor-plugin-context-panel": "^4.0.0",
|
|
@@ -36,23 +36,24 @@
|
|
|
36
36
|
"@atlaskit/editor-plugin-decorations": "^2.0.0",
|
|
37
37
|
"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
|
|
38
38
|
"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
|
|
39
|
-
"@atlaskit/editor-plugin-emoji": "^3.
|
|
39
|
+
"@atlaskit/editor-plugin-emoji": "^3.4.0",
|
|
40
40
|
"@atlaskit/editor-plugin-extension": "^5.1.0",
|
|
41
41
|
"@atlaskit/editor-plugin-table": "^10.5.0",
|
|
42
42
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
43
43
|
"@atlaskit/emoji": "^69.0.0",
|
|
44
|
-
"@atlaskit/icon": "^25.
|
|
44
|
+
"@atlaskit/icon": "^25.5.0",
|
|
45
45
|
"@atlaskit/menu": "^3.2.0",
|
|
46
46
|
"@atlaskit/modal-dialog": "^14.1.0",
|
|
47
47
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
48
|
-
"@atlaskit/primitives": "^14.
|
|
48
|
+
"@atlaskit/primitives": "^14.3.0",
|
|
49
49
|
"@atlaskit/select": "^20.0.0",
|
|
50
50
|
"@atlaskit/theme": "^18.0.0",
|
|
51
51
|
"@atlaskit/tmp-editor-statsig": "^4.6.0",
|
|
52
|
-
"@atlaskit/tokens": "^4.
|
|
52
|
+
"@atlaskit/tokens": "^4.6.0",
|
|
53
53
|
"@atlaskit/tooltip": "^20.0.0",
|
|
54
54
|
"@babel/runtime": "^7.0.0",
|
|
55
55
|
"@emotion/react": "^11.7.1",
|
|
56
|
+
"bind-event-listener": "^3.0.0",
|
|
56
57
|
"lodash": "^4.17.21",
|
|
57
58
|
"raf-schd": "^4.0.3",
|
|
58
59
|
"react-intl-next": "npm:react-intl@^5.18.1",
|
|
@@ -125,11 +126,17 @@
|
|
|
125
126
|
"forge-ui-macro-autoconvert": {
|
|
126
127
|
"type": "boolean"
|
|
127
128
|
},
|
|
129
|
+
"editor_a11y_remove_redundant_wrap_icon_label": {
|
|
130
|
+
"type": "boolean"
|
|
131
|
+
},
|
|
128
132
|
"platform_editor_fix_floating_toolbar_scrollbar": {
|
|
129
133
|
"type": "boolean"
|
|
130
134
|
},
|
|
131
135
|
"platform_editor_controls_patch_1": {
|
|
132
136
|
"type": "boolean"
|
|
137
|
+
},
|
|
138
|
+
"platform_editor_controls_patch_2": {
|
|
139
|
+
"type": "boolean"
|
|
133
140
|
}
|
|
134
141
|
}
|
|
135
142
|
}
|