@atlaskit/editor-common 83.0.4 → 83.1.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/monitoring/error.js +1 -1
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/cjs/ui-menu/ArrowKeyNavigationProvider/ColorPaletteArrowKeyNavigationProvider/index.js +5 -2
- package/dist/cjs/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js +11 -4
- package/dist/cjs/ui-menu/ArrowKeyNavigationProvider/index.js +8 -4
- package/dist/cjs/ui-menu/DropdownMenu/index.js +9 -2
- package/dist/cjs/ui-react/with-react-editor-view-outer-listeners.js +5 -2
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/es2019/ui-menu/ArrowKeyNavigationProvider/ColorPaletteArrowKeyNavigationProvider/index.js +5 -2
- package/dist/es2019/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js +11 -4
- package/dist/es2019/ui-menu/ArrowKeyNavigationProvider/index.js +6 -2
- package/dist/es2019/ui-menu/DropdownMenu/index.js +10 -2
- package/dist/es2019/ui-react/with-react-editor-view-outer-listeners.js +5 -2
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/esm/ui-menu/ArrowKeyNavigationProvider/ColorPaletteArrowKeyNavigationProvider/index.js +5 -2
- package/dist/esm/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js +11 -4
- package/dist/esm/ui-menu/ArrowKeyNavigationProvider/index.js +8 -4
- package/dist/esm/ui-menu/DropdownMenu/index.js +9 -2
- package/dist/esm/ui-react/with-react-editor-view-outer-listeners.js +5 -2
- package/dist/types/collab/index.d.ts +26 -0
- package/dist/types/ui-menu/ArrowKeyNavigationProvider/ColorPaletteArrowKeyNavigationProvider/index.d.ts +1 -1
- package/dist/types/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.d.ts +1 -1
- package/dist/types/ui-menu/ArrowKeyNavigationProvider/types.d.ts +2 -0
- package/dist/types/ui-react/ReactEditorViewContext.d.ts +1 -0
- package/dist/types-ts4.5/collab/index.d.ts +26 -0
- package/dist/types-ts4.5/ui-menu/ArrowKeyNavigationProvider/ColorPaletteArrowKeyNavigationProvider/index.d.ts +1 -1
- package/dist/types-ts4.5/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.d.ts +1 -1
- package/dist/types-ts4.5/ui-menu/ArrowKeyNavigationProvider/types.d.ts +2 -0
- package/dist/types-ts4.5/ui-react/ReactEditorViewContext.d.ts +1 -0
- package/package.json +4 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/editor-common
|
|
2
2
|
|
|
3
|
+
## 83.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#114806](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114806)
|
|
8
|
+
[`d3310bbf372ec`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d3310bbf372ec) -
|
|
9
|
+
[ux] The keyboard navigation for the main toolbar
|
|
10
|
+
- [#114811](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114811)
|
|
11
|
+
[`ad0d2f10ef71b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ad0d2f10ef71b) -
|
|
12
|
+
CONFONBO-3268: Changes for the experiment Teammate Presence: expose 2 new collab events to add
|
|
13
|
+
statuses (viewing/editing) to Confluence
|
|
14
|
+
|
|
3
15
|
## 83.0.4
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
17
17
|
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 && Object.prototype.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; }
|
|
18
18
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
19
19
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
20
|
-
var packageVersion = "83.0
|
|
20
|
+
var packageVersion = "83.1.0";
|
|
21
21
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
22
22
|
// Remove URL as it has UGC
|
|
23
23
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -20,7 +20,7 @@ var _Layer = _interopRequireDefault(require("../Layer"));
|
|
|
20
20
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
21
21
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
22
22
|
var packageName = "@atlaskit/editor-common";
|
|
23
|
-
var packageVersion = "83.0
|
|
23
|
+
var packageVersion = "83.1.0";
|
|
24
24
|
var halfFocusRing = 1;
|
|
25
25
|
var dropOffset = '0, 8';
|
|
26
26
|
var DropList = /*#__PURE__*/function (_Component) {
|
package/dist/cjs/ui-menu/ArrowKeyNavigationProvider/ColorPaletteArrowKeyNavigationProvider/index.js
CHANGED
|
@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.ColorPaletteArrowKeyNavigationProvider = void 0;
|
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
11
12
|
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); }
|
|
12
13
|
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 && Object.prototype.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; }
|
|
13
14
|
/**
|
|
@@ -23,11 +24,13 @@ var ColorPaletteArrowKeyNavigationProvider = exports.ColorPaletteArrowKeyNavigat
|
|
|
23
24
|
handleClose = _ref.handleClose,
|
|
24
25
|
closeOnTab = _ref.closeOnTab,
|
|
25
26
|
editorRef = _ref.editorRef,
|
|
26
|
-
ignoreEscapeKey = _ref.ignoreEscapeKey
|
|
27
|
+
ignoreEscapeKey = _ref.ignoreEscapeKey,
|
|
28
|
+
popupsMountPoint = _ref.popupsMountPoint;
|
|
27
29
|
var wrapperRef = (0, _react.useRef)(null);
|
|
28
30
|
var currentSelectedColumnIndex = (0, _react.useRef)(selectedColumnIndex === -1 ? 0 : selectedColumnIndex);
|
|
29
31
|
var currentSelectedRowIndex = (0, _react.useRef)(selectedRowIndex === -1 ? 0 : selectedRowIndex);
|
|
30
|
-
var
|
|
32
|
+
var element = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-main-toolbar-navigation_osrty') && popupsMountPoint ? popupsMountPoint : editorRef.current;
|
|
33
|
+
var _useState = (0, _react.useState)(element),
|
|
31
34
|
_useState2 = (0, _slicedToArray2.default)(_useState, 1),
|
|
32
35
|
listenerTargetElement = _useState2[0];
|
|
33
36
|
var incrementRowIndex = function incrementRowIndex(rowElements, columnElements) {
|
|
@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.MenuArrowKeyNavigationProvider = void 0;
|
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
11
12
|
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); }
|
|
12
13
|
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 && Object.prototype.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; }
|
|
13
14
|
var hasEnabledItems = function hasEnabledItems(list) {
|
|
@@ -27,13 +28,15 @@ var MenuArrowKeyNavigationProvider = exports.MenuArrowKeyNavigationProvider = fu
|
|
|
27
28
|
keyDownHandlerContext = _ref.keyDownHandlerContext,
|
|
28
29
|
closeOnTab = _ref.closeOnTab,
|
|
29
30
|
onSelection = _ref.onSelection,
|
|
30
|
-
editorRef = _ref.editorRef
|
|
31
|
+
editorRef = _ref.editorRef,
|
|
32
|
+
popupsMountPoint = _ref.popupsMountPoint;
|
|
31
33
|
var wrapperRef = (0, _react.useRef)(null);
|
|
32
34
|
var _useState = (0, _react.useState)(-1),
|
|
33
35
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
34
36
|
currentSelectedItemIndex = _useState2[0],
|
|
35
37
|
setCurrentSelectedItemIndex = _useState2[1];
|
|
36
|
-
var
|
|
38
|
+
var element = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-main-toolbar-navigation_osrty') && popupsMountPoint ? [popupsMountPoint, editorRef.current] : [editorRef.current];
|
|
39
|
+
var _useState3 = (0, _react.useState)(element),
|
|
37
40
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 1),
|
|
38
41
|
listenerTargetElement = _useState4[0];
|
|
39
42
|
var incrementIndex = (0, _react.useCallback)(function (list) {
|
|
@@ -153,9 +156,13 @@ var MenuArrowKeyNavigationProvider = exports.MenuArrowKeyNavigationProvider = fu
|
|
|
153
156
|
return;
|
|
154
157
|
}
|
|
155
158
|
};
|
|
156
|
-
listenerTargetElement && listenerTargetElement.
|
|
159
|
+
listenerTargetElement && listenerTargetElement.forEach(function (elem) {
|
|
160
|
+
elem && elem.addEventListener('keydown', handleKeyDown);
|
|
161
|
+
});
|
|
157
162
|
return function () {
|
|
158
|
-
listenerTargetElement && listenerTargetElement.
|
|
163
|
+
listenerTargetElement && listenerTargetElement.forEach(function (elem) {
|
|
164
|
+
elem && elem.removeEventListener('keydown', handleKeyDown);
|
|
165
|
+
});
|
|
159
166
|
};
|
|
160
167
|
}, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex, listenerTargetElement]);
|
|
161
168
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -19,22 +19,26 @@ var ArrowKeyNavigationProvider = exports.ArrowKeyNavigationProvider = function A
|
|
|
19
19
|
restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
20
20
|
if (type === _types.ArrowKeyNavigationType.COLOR) {
|
|
21
21
|
return /*#__PURE__*/_react.default.createElement(_uiReact.ReactEditorViewContext.Consumer, null, function (_ref) {
|
|
22
|
-
var
|
|
22
|
+
var popupsMountPoint = _ref.popupsMountPoint,
|
|
23
|
+
editorView = _ref.editorView,
|
|
23
24
|
editorRef = _ref.editorRef;
|
|
24
25
|
return editorRef && /*#__PURE__*/_react.default.createElement(_ColorPaletteArrowKeyNavigationProvider.ColorPaletteArrowKeyNavigationProvider, (0, _extends2.default)({
|
|
25
26
|
selectedRowIndex: props.selectedRowIndex,
|
|
26
27
|
selectedColumnIndex: props.selectedColumnIndex,
|
|
27
28
|
isOpenedByKeyboard: props.isOpenedByKeyboard,
|
|
28
29
|
isPopupPositioned: props.isPopupPositioned,
|
|
29
|
-
editorRef: editorRef
|
|
30
|
+
editorRef: editorRef,
|
|
31
|
+
popupsMountPoint: popupsMountPoint
|
|
30
32
|
}, restProps), children);
|
|
31
33
|
});
|
|
32
34
|
}
|
|
33
35
|
return /*#__PURE__*/_react.default.createElement(_uiReact.ReactEditorViewContext.Consumer, null, function (_ref2) {
|
|
34
|
-
var
|
|
36
|
+
var popupsMountPoint = _ref2.popupsMountPoint,
|
|
37
|
+
editorView = _ref2.editorView,
|
|
35
38
|
editorRef = _ref2.editorRef;
|
|
36
39
|
return editorRef && /*#__PURE__*/_react.default.createElement(_MenuArrowKeyNavigationProvider.MenuArrowKeyNavigationProvider, (0, _extends2.default)({
|
|
37
|
-
editorRef: editorRef
|
|
40
|
+
editorRef: editorRef,
|
|
41
|
+
popupsMountPoint: popupsMountPoint
|
|
38
42
|
}, restProps), children);
|
|
39
43
|
});
|
|
40
44
|
};
|
|
@@ -244,14 +244,21 @@ var DropdownMenuWrapper = exports.default = /*#__PURE__*/function (_PureComponen
|
|
|
244
244
|
}, {
|
|
245
245
|
key: "componentDidUpdate",
|
|
246
246
|
value: function componentDidUpdate(previousProps) {
|
|
247
|
-
var
|
|
248
|
-
|
|
247
|
+
var _this$props3 = this.props,
|
|
248
|
+
mountTo = _this$props3.mountTo,
|
|
249
|
+
isOpen = _this$props3.isOpen;
|
|
250
|
+
var isOpenToggled = isOpen !== previousProps.isOpen;
|
|
251
|
+
if (isOpen && isOpenToggled) {
|
|
249
252
|
if (typeof this.props.shouldFocusFirstItem === 'function' && this.props.shouldFocusFirstItem()) {
|
|
250
253
|
var _this$state$target2;
|
|
251
254
|
var keyboardEvent = new KeyboardEvent('keydown', {
|
|
252
255
|
key: 'ArrowDown',
|
|
253
256
|
bubbles: true
|
|
254
257
|
});
|
|
258
|
+
if (mountTo && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-main-toolbar-navigation_osrty')) {
|
|
259
|
+
mountTo.dispatchEvent(keyboardEvent);
|
|
260
|
+
return;
|
|
261
|
+
}
|
|
255
262
|
(_this$state$target2 = this.state.target) === null || _this$state$target2 === void 0 || _this$state$target2.dispatchEvent(keyboardEvent);
|
|
256
263
|
}
|
|
257
264
|
}
|
|
@@ -17,6 +17,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
|
|
|
17
17
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
18
18
|
var _react = _interopRequireWildcard(require("react"));
|
|
19
19
|
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
20
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
20
21
|
var _ReactEditorViewContext = _interopRequireDefault(require("./ReactEditorViewContext"));
|
|
21
22
|
var _excluded = ["handleClickOutside", "handleEnterKeydown", "handleEscapeKeydown", "closeOnTab"];
|
|
22
23
|
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); }
|
|
@@ -79,7 +80,7 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
|
|
|
79
80
|
if (this.props.handleEscapeKeydown) {
|
|
80
81
|
var _this$props$editorRef;
|
|
81
82
|
// Attached event to the menu so that 'ESC' events from the opened menu also will be handled.
|
|
82
|
-
(((_this$props$editorRef = this.props.editorRef) === null || _this$props$editorRef === void 0 ? void 0 : _this$props$editorRef.current) || this.props.targetRef || document).addEventListener('keydown', this.handleKeydown, false);
|
|
83
|
+
((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-main-toolbar-navigation_osrty') && this.props.popupsMountPoint ? this.props.popupsMountPoint : undefined || ((_this$props$editorRef = this.props.editorRef) === null || _this$props$editorRef === void 0 ? void 0 : _this$props$editorRef.current) || this.props.targetRef || document).addEventListener('keydown', this.handleKeydown, false);
|
|
83
84
|
}
|
|
84
85
|
}
|
|
85
86
|
}, {
|
|
@@ -90,7 +91,7 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
|
|
|
90
91
|
}
|
|
91
92
|
if (this.props.handleEscapeKeydown) {
|
|
92
93
|
var _this$props$editorRef2;
|
|
93
|
-
(((_this$props$editorRef2 = this.props.editorRef) === null || _this$props$editorRef2 === void 0 ? void 0 : _this$props$editorRef2.current) || this.props.targetRef || document).removeEventListener('keydown', this.handleKeydown, false);
|
|
94
|
+
((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-main-toolbar-navigation_osrty') && this.props.popupsMountPoint ? this.props.popupsMountPoint : undefined || ((_this$props$editorRef2 = this.props.editorRef) === null || _this$props$editorRef2 === void 0 ? void 0 : _this$props$editorRef2.current) || this.props.targetRef || document).removeEventListener('keydown', this.handleKeydown, false);
|
|
94
95
|
}
|
|
95
96
|
}
|
|
96
97
|
}, {
|
|
@@ -123,11 +124,13 @@ function withReactEditorViewOuterListeners(Component) {
|
|
|
123
124
|
}, [isActiveProp]);
|
|
124
125
|
return /*#__PURE__*/_react.default.createElement(_ReactEditorViewContext.default.Consumer, null, function (_ref2) {
|
|
125
126
|
var editorView = _ref2.editorView,
|
|
127
|
+
popupsMountPoint = _ref2.popupsMountPoint,
|
|
126
128
|
editorRef = _ref2.editorRef;
|
|
127
129
|
return /*#__PURE__*/_react.default.createElement(WithOutsideClick, {
|
|
128
130
|
editorView: editorView,
|
|
129
131
|
editorRef: editorRef,
|
|
130
132
|
targetRef: props.targetRef,
|
|
133
|
+
popupsMountPoint: popupsMountPoint,
|
|
131
134
|
isActiveComponent: isActiveComponent,
|
|
132
135
|
handleClickOutside: handleClickOutside,
|
|
133
136
|
handleEnterKeydown: handleEnterKeydown,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { isFedRamp } from './environment';
|
|
2
2
|
const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
3
3
|
const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
4
|
-
const packageVersion = "83.0
|
|
4
|
+
const packageVersion = "83.1.0";
|
|
5
5
|
const sanitiseSentryEvents = (data, _hint) => {
|
|
6
6
|
// Remove URL as it has UGC
|
|
7
7
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -9,7 +9,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
|
|
|
9
9
|
import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
|
|
10
10
|
import Layer from '../Layer';
|
|
11
11
|
const packageName = "@atlaskit/editor-common";
|
|
12
|
-
const packageVersion = "83.0
|
|
12
|
+
const packageVersion = "83.1.0";
|
|
13
13
|
const halfFocusRing = 1;
|
|
14
14
|
const dropOffset = '0, 8';
|
|
15
15
|
class DropList extends Component {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { useLayoutEffect, useRef, useState } from 'react';
|
|
2
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
2
3
|
/**
|
|
3
4
|
* This component is a wrapper for color picker which listens to keydown events of children
|
|
4
5
|
* and handles arrow key navigation
|
|
@@ -12,12 +13,14 @@ export const ColorPaletteArrowKeyNavigationProvider = ({
|
|
|
12
13
|
handleClose,
|
|
13
14
|
closeOnTab,
|
|
14
15
|
editorRef,
|
|
15
|
-
ignoreEscapeKey
|
|
16
|
+
ignoreEscapeKey,
|
|
17
|
+
popupsMountPoint
|
|
16
18
|
}) => {
|
|
17
19
|
const wrapperRef = useRef(null);
|
|
18
20
|
const currentSelectedColumnIndex = useRef(selectedColumnIndex === -1 ? 0 : selectedColumnIndex);
|
|
19
21
|
const currentSelectedRowIndex = useRef(selectedRowIndex === -1 ? 0 : selectedRowIndex);
|
|
20
|
-
const
|
|
22
|
+
const element = getBooleanFF('platform.editor.a11y-main-toolbar-navigation_osrty') && popupsMountPoint ? popupsMountPoint : editorRef.current;
|
|
23
|
+
const [listenerTargetElement] = useState(element);
|
|
21
24
|
const incrementRowIndex = (rowElements, columnElements) => {
|
|
22
25
|
if (currentSelectedRowIndex.current === rowElements.length - 1) {
|
|
23
26
|
currentSelectedRowIndex.current = 0;
|
package/dist/es2019/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
|
|
2
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
2
3
|
const hasEnabledItems = list => list.some(item => item.getAttribute('aria-disabled') !== 'true');
|
|
3
4
|
|
|
4
5
|
/**
|
|
@@ -12,11 +13,13 @@ export const MenuArrowKeyNavigationProvider = ({
|
|
|
12
13
|
keyDownHandlerContext,
|
|
13
14
|
closeOnTab,
|
|
14
15
|
onSelection,
|
|
15
|
-
editorRef
|
|
16
|
+
editorRef,
|
|
17
|
+
popupsMountPoint
|
|
16
18
|
}) => {
|
|
17
19
|
const wrapperRef = useRef(null);
|
|
18
20
|
const [currentSelectedItemIndex, setCurrentSelectedItemIndex] = useState(-1);
|
|
19
|
-
const
|
|
21
|
+
const element = getBooleanFF('platform.editor.a11y-main-toolbar-navigation_osrty') && popupsMountPoint ? [popupsMountPoint, editorRef.current] : [editorRef.current];
|
|
22
|
+
const [listenerTargetElement] = useState(element);
|
|
20
23
|
const incrementIndex = useCallback(list => {
|
|
21
24
|
const currentIndex = currentSelectedItemIndex;
|
|
22
25
|
let nextIndex = (currentIndex + 1) % list.length;
|
|
@@ -134,9 +137,13 @@ export const MenuArrowKeyNavigationProvider = ({
|
|
|
134
137
|
return;
|
|
135
138
|
}
|
|
136
139
|
};
|
|
137
|
-
listenerTargetElement && listenerTargetElement.
|
|
140
|
+
listenerTargetElement && listenerTargetElement.forEach(function (elem) {
|
|
141
|
+
elem && elem.addEventListener('keydown', handleKeyDown);
|
|
142
|
+
});
|
|
138
143
|
return () => {
|
|
139
|
-
listenerTargetElement && listenerTargetElement.
|
|
144
|
+
listenerTargetElement && listenerTargetElement.forEach(function (elem) {
|
|
145
|
+
elem && elem.removeEventListener('keydown', handleKeyDown);
|
|
146
|
+
});
|
|
140
147
|
};
|
|
141
148
|
}, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex, listenerTargetElement]);
|
|
142
149
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -12,6 +12,7 @@ export const ArrowKeyNavigationProvider = props => {
|
|
|
12
12
|
} = props;
|
|
13
13
|
if (type === ArrowKeyNavigationType.COLOR) {
|
|
14
14
|
return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, ({
|
|
15
|
+
popupsMountPoint,
|
|
15
16
|
editorView,
|
|
16
17
|
editorRef
|
|
17
18
|
}) => editorRef && /*#__PURE__*/React.createElement(ColorPaletteArrowKeyNavigationProvider, _extends({
|
|
@@ -19,13 +20,16 @@ export const ArrowKeyNavigationProvider = props => {
|
|
|
19
20
|
selectedColumnIndex: props.selectedColumnIndex,
|
|
20
21
|
isOpenedByKeyboard: props.isOpenedByKeyboard,
|
|
21
22
|
isPopupPositioned: props.isPopupPositioned,
|
|
22
|
-
editorRef: editorRef
|
|
23
|
+
editorRef: editorRef,
|
|
24
|
+
popupsMountPoint: popupsMountPoint
|
|
23
25
|
}, restProps), children));
|
|
24
26
|
}
|
|
25
27
|
return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, ({
|
|
28
|
+
popupsMountPoint,
|
|
26
29
|
editorView,
|
|
27
30
|
editorRef
|
|
28
31
|
}) => editorRef && /*#__PURE__*/React.createElement(MenuArrowKeyNavigationProvider, _extends({
|
|
29
|
-
editorRef: editorRef
|
|
32
|
+
editorRef: editorRef,
|
|
33
|
+
popupsMountPoint: popupsMountPoint
|
|
30
34
|
}, restProps), children));
|
|
31
35
|
};
|
|
@@ -241,14 +241,22 @@ export default class DropdownMenuWrapper extends PureComponent {
|
|
|
241
241
|
}, children), isOpen ? this.renderDropdownMenu() : null);
|
|
242
242
|
}
|
|
243
243
|
componentDidUpdate(previousProps) {
|
|
244
|
-
const
|
|
245
|
-
|
|
244
|
+
const {
|
|
245
|
+
mountTo,
|
|
246
|
+
isOpen
|
|
247
|
+
} = this.props;
|
|
248
|
+
const isOpenToggled = isOpen !== previousProps.isOpen;
|
|
249
|
+
if (isOpen && isOpenToggled) {
|
|
246
250
|
if (typeof this.props.shouldFocusFirstItem === 'function' && this.props.shouldFocusFirstItem()) {
|
|
247
251
|
var _this$state$target2;
|
|
248
252
|
const keyboardEvent = new KeyboardEvent('keydown', {
|
|
249
253
|
key: 'ArrowDown',
|
|
250
254
|
bubbles: true
|
|
251
255
|
});
|
|
256
|
+
if (mountTo && getBooleanFF('platform.editor.a11y-main-toolbar-navigation_osrty')) {
|
|
257
|
+
mountTo.dispatchEvent(keyboardEvent);
|
|
258
|
+
return;
|
|
259
|
+
}
|
|
252
260
|
(_this$state$target2 = this.state.target) === null || _this$state$target2 === void 0 ? void 0 : _this$state$target2.dispatchEvent(keyboardEvent);
|
|
253
261
|
}
|
|
254
262
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import React, { PureComponent, useEffect, useState } from 'react';
|
|
3
3
|
import ReactDOM from 'react-dom';
|
|
4
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
4
5
|
import ReactEditorViewContext from './ReactEditorViewContext';
|
|
5
6
|
|
|
6
7
|
// This needs exporting to be used alongisde `withReactEditorViewOuterListeners`
|
|
@@ -50,7 +51,7 @@ class WithOutsideClick extends PureComponent {
|
|
|
50
51
|
if (this.props.handleEscapeKeydown) {
|
|
51
52
|
var _this$props$editorRef;
|
|
52
53
|
// Attached event to the menu so that 'ESC' events from the opened menu also will be handled.
|
|
53
|
-
(((_this$props$editorRef = this.props.editorRef) === null || _this$props$editorRef === void 0 ? void 0 : _this$props$editorRef.current) || this.props.targetRef || document).addEventListener('keydown', this.handleKeydown, false);
|
|
54
|
+
(getBooleanFF('platform.editor.a11y-main-toolbar-navigation_osrty') && this.props.popupsMountPoint ? this.props.popupsMountPoint : undefined || ((_this$props$editorRef = this.props.editorRef) === null || _this$props$editorRef === void 0 ? void 0 : _this$props$editorRef.current) || this.props.targetRef || document).addEventListener('keydown', this.handleKeydown, false);
|
|
54
55
|
}
|
|
55
56
|
}
|
|
56
57
|
componentWillUnmount() {
|
|
@@ -59,7 +60,7 @@ class WithOutsideClick extends PureComponent {
|
|
|
59
60
|
}
|
|
60
61
|
if (this.props.handleEscapeKeydown) {
|
|
61
62
|
var _this$props$editorRef2;
|
|
62
|
-
(((_this$props$editorRef2 = this.props.editorRef) === null || _this$props$editorRef2 === void 0 ? void 0 : _this$props$editorRef2.current) || this.props.targetRef || document).removeEventListener('keydown', this.handleKeydown, false);
|
|
63
|
+
(getBooleanFF('platform.editor.a11y-main-toolbar-navigation_osrty') && this.props.popupsMountPoint ? this.props.popupsMountPoint : undefined || ((_this$props$editorRef2 = this.props.editorRef) === null || _this$props$editorRef2 === void 0 ? void 0 : _this$props$editorRef2.current) || this.props.targetRef || document).removeEventListener('keydown', this.handleKeydown, false);
|
|
63
64
|
}
|
|
64
65
|
}
|
|
65
66
|
render() {
|
|
@@ -86,11 +87,13 @@ export default function withReactEditorViewOuterListeners(Component) {
|
|
|
86
87
|
}, [isActiveProp]);
|
|
87
88
|
return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, ({
|
|
88
89
|
editorView,
|
|
90
|
+
popupsMountPoint,
|
|
89
91
|
editorRef
|
|
90
92
|
}) => /*#__PURE__*/React.createElement(WithOutsideClick, {
|
|
91
93
|
editorView: editorView,
|
|
92
94
|
editorRef: editorRef,
|
|
93
95
|
targetRef: props.targetRef,
|
|
96
|
+
popupsMountPoint: popupsMountPoint,
|
|
94
97
|
isActiveComponent: isActiveComponent,
|
|
95
98
|
handleClickOutside: handleClickOutside,
|
|
96
99
|
handleEnterKeydown: handleEnterKeydown,
|
|
@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
7
7
|
import { isFedRamp } from './environment';
|
|
8
8
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
9
9
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
10
|
-
var packageVersion = "83.0
|
|
10
|
+
var packageVersion = "83.1.0";
|
|
11
11
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
12
12
|
// Remove URL as it has UGC
|
|
13
13
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
|
|
|
17
17
|
import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
|
|
18
18
|
import Layer from '../Layer';
|
|
19
19
|
var packageName = "@atlaskit/editor-common";
|
|
20
|
-
var packageVersion = "83.0
|
|
20
|
+
var packageVersion = "83.1.0";
|
|
21
21
|
var halfFocusRing = 1;
|
|
22
22
|
var dropOffset = '0, 8';
|
|
23
23
|
var DropList = /*#__PURE__*/function (_Component) {
|
package/dist/esm/ui-menu/ArrowKeyNavigationProvider/ColorPaletteArrowKeyNavigationProvider/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import React, { useLayoutEffect, useRef, useState } from 'react';
|
|
3
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
3
4
|
/**
|
|
4
5
|
* This component is a wrapper for color picker which listens to keydown events of children
|
|
5
6
|
* and handles arrow key navigation
|
|
@@ -13,11 +14,13 @@ export var ColorPaletteArrowKeyNavigationProvider = function ColorPaletteArrowKe
|
|
|
13
14
|
handleClose = _ref.handleClose,
|
|
14
15
|
closeOnTab = _ref.closeOnTab,
|
|
15
16
|
editorRef = _ref.editorRef,
|
|
16
|
-
ignoreEscapeKey = _ref.ignoreEscapeKey
|
|
17
|
+
ignoreEscapeKey = _ref.ignoreEscapeKey,
|
|
18
|
+
popupsMountPoint = _ref.popupsMountPoint;
|
|
17
19
|
var wrapperRef = useRef(null);
|
|
18
20
|
var currentSelectedColumnIndex = useRef(selectedColumnIndex === -1 ? 0 : selectedColumnIndex);
|
|
19
21
|
var currentSelectedRowIndex = useRef(selectedRowIndex === -1 ? 0 : selectedRowIndex);
|
|
20
|
-
var
|
|
22
|
+
var element = getBooleanFF('platform.editor.a11y-main-toolbar-navigation_osrty') && popupsMountPoint ? popupsMountPoint : editorRef.current;
|
|
23
|
+
var _useState = useState(element),
|
|
21
24
|
_useState2 = _slicedToArray(_useState, 1),
|
|
22
25
|
listenerTargetElement = _useState2[0];
|
|
23
26
|
var incrementRowIndex = function incrementRowIndex(rowElements, columnElements) {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
|
|
3
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
3
4
|
var hasEnabledItems = function hasEnabledItems(list) {
|
|
4
5
|
return list.some(function (item) {
|
|
5
6
|
return item.getAttribute('aria-disabled') !== 'true';
|
|
@@ -17,13 +18,15 @@ export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvi
|
|
|
17
18
|
keyDownHandlerContext = _ref.keyDownHandlerContext,
|
|
18
19
|
closeOnTab = _ref.closeOnTab,
|
|
19
20
|
onSelection = _ref.onSelection,
|
|
20
|
-
editorRef = _ref.editorRef
|
|
21
|
+
editorRef = _ref.editorRef,
|
|
22
|
+
popupsMountPoint = _ref.popupsMountPoint;
|
|
21
23
|
var wrapperRef = useRef(null);
|
|
22
24
|
var _useState = useState(-1),
|
|
23
25
|
_useState2 = _slicedToArray(_useState, 2),
|
|
24
26
|
currentSelectedItemIndex = _useState2[0],
|
|
25
27
|
setCurrentSelectedItemIndex = _useState2[1];
|
|
26
|
-
var
|
|
28
|
+
var element = getBooleanFF('platform.editor.a11y-main-toolbar-navigation_osrty') && popupsMountPoint ? [popupsMountPoint, editorRef.current] : [editorRef.current];
|
|
29
|
+
var _useState3 = useState(element),
|
|
27
30
|
_useState4 = _slicedToArray(_useState3, 1),
|
|
28
31
|
listenerTargetElement = _useState4[0];
|
|
29
32
|
var incrementIndex = useCallback(function (list) {
|
|
@@ -143,9 +146,13 @@ export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvi
|
|
|
143
146
|
return;
|
|
144
147
|
}
|
|
145
148
|
};
|
|
146
|
-
listenerTargetElement && listenerTargetElement.
|
|
149
|
+
listenerTargetElement && listenerTargetElement.forEach(function (elem) {
|
|
150
|
+
elem && elem.addEventListener('keydown', handleKeyDown);
|
|
151
|
+
});
|
|
147
152
|
return function () {
|
|
148
|
-
listenerTargetElement && listenerTargetElement.
|
|
153
|
+
listenerTargetElement && listenerTargetElement.forEach(function (elem) {
|
|
154
|
+
elem && elem.removeEventListener('keydown', handleKeyDown);
|
|
155
|
+
});
|
|
149
156
|
};
|
|
150
157
|
}, [currentSelectedItemIndex, wrapperRef, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, incrementIndex, decrementIndex, listenerTargetElement]);
|
|
151
158
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -12,22 +12,26 @@ export var ArrowKeyNavigationProvider = function ArrowKeyNavigationProvider(prop
|
|
|
12
12
|
restProps = _objectWithoutProperties(props, _excluded);
|
|
13
13
|
if (type === ArrowKeyNavigationType.COLOR) {
|
|
14
14
|
return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, function (_ref) {
|
|
15
|
-
var
|
|
15
|
+
var popupsMountPoint = _ref.popupsMountPoint,
|
|
16
|
+
editorView = _ref.editorView,
|
|
16
17
|
editorRef = _ref.editorRef;
|
|
17
18
|
return editorRef && /*#__PURE__*/React.createElement(ColorPaletteArrowKeyNavigationProvider, _extends({
|
|
18
19
|
selectedRowIndex: props.selectedRowIndex,
|
|
19
20
|
selectedColumnIndex: props.selectedColumnIndex,
|
|
20
21
|
isOpenedByKeyboard: props.isOpenedByKeyboard,
|
|
21
22
|
isPopupPositioned: props.isPopupPositioned,
|
|
22
|
-
editorRef: editorRef
|
|
23
|
+
editorRef: editorRef,
|
|
24
|
+
popupsMountPoint: popupsMountPoint
|
|
23
25
|
}, restProps), children);
|
|
24
26
|
});
|
|
25
27
|
}
|
|
26
28
|
return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, function (_ref2) {
|
|
27
|
-
var
|
|
29
|
+
var popupsMountPoint = _ref2.popupsMountPoint,
|
|
30
|
+
editorView = _ref2.editorView,
|
|
28
31
|
editorRef = _ref2.editorRef;
|
|
29
32
|
return editorRef && /*#__PURE__*/React.createElement(MenuArrowKeyNavigationProvider, _extends({
|
|
30
|
-
editorRef: editorRef
|
|
33
|
+
editorRef: editorRef,
|
|
34
|
+
popupsMountPoint: popupsMountPoint
|
|
31
35
|
}, restProps), children);
|
|
32
36
|
});
|
|
33
37
|
};
|
|
@@ -233,14 +233,21 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
|
|
|
233
233
|
}, {
|
|
234
234
|
key: "componentDidUpdate",
|
|
235
235
|
value: function componentDidUpdate(previousProps) {
|
|
236
|
-
var
|
|
237
|
-
|
|
236
|
+
var _this$props3 = this.props,
|
|
237
|
+
mountTo = _this$props3.mountTo,
|
|
238
|
+
isOpen = _this$props3.isOpen;
|
|
239
|
+
var isOpenToggled = isOpen !== previousProps.isOpen;
|
|
240
|
+
if (isOpen && isOpenToggled) {
|
|
238
241
|
if (typeof this.props.shouldFocusFirstItem === 'function' && this.props.shouldFocusFirstItem()) {
|
|
239
242
|
var _this$state$target2;
|
|
240
243
|
var keyboardEvent = new KeyboardEvent('keydown', {
|
|
241
244
|
key: 'ArrowDown',
|
|
242
245
|
bubbles: true
|
|
243
246
|
});
|
|
247
|
+
if (mountTo && getBooleanFF('platform.editor.a11y-main-toolbar-navigation_osrty')) {
|
|
248
|
+
mountTo.dispatchEvent(keyboardEvent);
|
|
249
|
+
return;
|
|
250
|
+
}
|
|
244
251
|
(_this$state$target2 = this.state.target) === null || _this$state$target2 === void 0 || _this$state$target2.dispatchEvent(keyboardEvent);
|
|
245
252
|
}
|
|
246
253
|
}
|
|
@@ -12,6 +12,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
|
|
|
12
12
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
13
13
|
import React, { PureComponent, useEffect, useState } from 'react';
|
|
14
14
|
import ReactDOM from 'react-dom';
|
|
15
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
15
16
|
import ReactEditorViewContext from './ReactEditorViewContext';
|
|
16
17
|
|
|
17
18
|
// This needs exporting to be used alongisde `withReactEditorViewOuterListeners`
|
|
@@ -70,7 +71,7 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
|
|
|
70
71
|
if (this.props.handleEscapeKeydown) {
|
|
71
72
|
var _this$props$editorRef;
|
|
72
73
|
// Attached event to the menu so that 'ESC' events from the opened menu also will be handled.
|
|
73
|
-
(((_this$props$editorRef = this.props.editorRef) === null || _this$props$editorRef === void 0 ? void 0 : _this$props$editorRef.current) || this.props.targetRef || document).addEventListener('keydown', this.handleKeydown, false);
|
|
74
|
+
(getBooleanFF('platform.editor.a11y-main-toolbar-navigation_osrty') && this.props.popupsMountPoint ? this.props.popupsMountPoint : undefined || ((_this$props$editorRef = this.props.editorRef) === null || _this$props$editorRef === void 0 ? void 0 : _this$props$editorRef.current) || this.props.targetRef || document).addEventListener('keydown', this.handleKeydown, false);
|
|
74
75
|
}
|
|
75
76
|
}
|
|
76
77
|
}, {
|
|
@@ -81,7 +82,7 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
|
|
|
81
82
|
}
|
|
82
83
|
if (this.props.handleEscapeKeydown) {
|
|
83
84
|
var _this$props$editorRef2;
|
|
84
|
-
(((_this$props$editorRef2 = this.props.editorRef) === null || _this$props$editorRef2 === void 0 ? void 0 : _this$props$editorRef2.current) || this.props.targetRef || document).removeEventListener('keydown', this.handleKeydown, false);
|
|
85
|
+
(getBooleanFF('platform.editor.a11y-main-toolbar-navigation_osrty') && this.props.popupsMountPoint ? this.props.popupsMountPoint : undefined || ((_this$props$editorRef2 = this.props.editorRef) === null || _this$props$editorRef2 === void 0 ? void 0 : _this$props$editorRef2.current) || this.props.targetRef || document).removeEventListener('keydown', this.handleKeydown, false);
|
|
85
86
|
}
|
|
86
87
|
}
|
|
87
88
|
}, {
|
|
@@ -114,11 +115,13 @@ export default function withReactEditorViewOuterListeners(Component) {
|
|
|
114
115
|
}, [isActiveProp]);
|
|
115
116
|
return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, function (_ref2) {
|
|
116
117
|
var editorView = _ref2.editorView,
|
|
118
|
+
popupsMountPoint = _ref2.popupsMountPoint,
|
|
117
119
|
editorRef = _ref2.editorRef;
|
|
118
120
|
return /*#__PURE__*/React.createElement(WithOutsideClick, {
|
|
119
121
|
editorView: editorView,
|
|
120
122
|
editorRef: editorRef,
|
|
121
123
|
targetRef: props.targetRef,
|
|
124
|
+
popupsMountPoint: popupsMountPoint,
|
|
122
125
|
isActiveComponent: isActiveComponent,
|
|
123
126
|
handleClickOutside: handleClickOutside,
|
|
124
127
|
handleEnterKeydown: handleEnterKeydown,
|
|
@@ -285,6 +285,17 @@ export interface CollabSendableSelection {
|
|
|
285
285
|
anchor?: number | string;
|
|
286
286
|
head?: number | string;
|
|
287
287
|
}
|
|
288
|
+
export type Activity = 'VIEWING' | 'EDITING';
|
|
289
|
+
export type CollabActivityData = {
|
|
290
|
+
activity: Activity;
|
|
291
|
+
userId?: string;
|
|
292
|
+
};
|
|
293
|
+
export type CollabActivityJoinPayload = CollabActivityData & {
|
|
294
|
+
type: 'activity:join';
|
|
295
|
+
};
|
|
296
|
+
export type CollabActivityAckPayload = CollabActivityData & {
|
|
297
|
+
type: 'activity:ack';
|
|
298
|
+
};
|
|
288
299
|
export interface CollabEventTelepointerData {
|
|
289
300
|
type: 'telepointer';
|
|
290
301
|
selection: CollabSendableSelection;
|
|
@@ -334,6 +345,21 @@ export type UserPermitType = {
|
|
|
334
345
|
};
|
|
335
346
|
export type CollabPermissionEventPayload = UserPermitType;
|
|
336
347
|
export interface CollabEvents {
|
|
348
|
+
/**
|
|
349
|
+
* Experimental Only: Teammate Presence (Confluence Land and Onboarding)
|
|
350
|
+
*
|
|
351
|
+
* This event is emitted when a new collaborator joins the session. The event carries information about
|
|
352
|
+
* the action the new collaborator is currently doing in the session, such as viewing or editing.
|
|
353
|
+
*/
|
|
354
|
+
'activity:join': CollabActivityJoinPayload;
|
|
355
|
+
/**
|
|
356
|
+
* Experimental Only: Teammate Presence (Confluence Land and Onboarding)
|
|
357
|
+
*
|
|
358
|
+
* This event is emitted by the existing collaborators in response to a new collaborator joining.
|
|
359
|
+
* It is used to inform the new collaborator about the current actions or states of the existing
|
|
360
|
+
* collaborators, such as viewing or editing.
|
|
361
|
+
*/
|
|
362
|
+
'activity:ack': CollabActivityAckPayload;
|
|
337
363
|
'metadata:changed': Metadata;
|
|
338
364
|
init: CollabInitPayload;
|
|
339
365
|
connected: CollabConnectedPayload;
|
|
@@ -4,4 +4,4 @@ import type { ColorPaletteArrowKeyNavigationProps } from '../types';
|
|
|
4
4
|
* This component is a wrapper for color picker which listens to keydown events of children
|
|
5
5
|
* and handles arrow key navigation
|
|
6
6
|
*/
|
|
7
|
-
export declare const ColorPaletteArrowKeyNavigationProvider: ({ children, selectedRowIndex, selectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, handleClose, closeOnTab, editorRef, ignoreEscapeKey, }: React.PropsWithChildren<Omit<ColorPaletteArrowKeyNavigationProps, 'type'>>) => JSX.Element;
|
|
7
|
+
export declare const ColorPaletteArrowKeyNavigationProvider: ({ children, selectedRowIndex, selectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, handleClose, closeOnTab, editorRef, ignoreEscapeKey, popupsMountPoint, }: React.PropsWithChildren<Omit<ColorPaletteArrowKeyNavigationProps, 'type'>>) => JSX.Element;
|
package/dist/types/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.d.ts
CHANGED
|
@@ -4,4 +4,4 @@ import type { MenuArrowKeyNavigationProviderProps } from '../types';
|
|
|
4
4
|
* This component is a wrapper of vertical menus which listens to keydown events of children
|
|
5
5
|
* and handles up/down arrow key navigation
|
|
6
6
|
*/
|
|
7
|
-
export declare const MenuArrowKeyNavigationProvider: ({ children, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, editorRef, }: React.PropsWithChildren<Omit<MenuArrowKeyNavigationProviderProps, 'type'>>) => JSX.Element;
|
|
7
|
+
export declare const MenuArrowKeyNavigationProvider: ({ children, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, editorRef, popupsMountPoint, }: React.PropsWithChildren<Omit<MenuArrowKeyNavigationProviderProps, 'type'>>) => JSX.Element;
|
|
@@ -22,6 +22,7 @@ export type ColorPaletteArrowKeyNavigationProps = ColorPaletteArrowKeyNavigation
|
|
|
22
22
|
closeOnTab?: boolean;
|
|
23
23
|
editorRef: React.RefObject<HTMLDivElement>;
|
|
24
24
|
ignoreEscapeKey?: boolean | false;
|
|
25
|
+
popupsMountPoint?: HTMLElement | undefined;
|
|
25
26
|
};
|
|
26
27
|
export type MenuArrowKeyNavigationOptions = {
|
|
27
28
|
type: ArrowKeyNavigationType.MENU;
|
|
@@ -34,6 +35,7 @@ export type MenuArrowKeyNavigationProviderProps = MenuArrowKeyNavigationOptions
|
|
|
34
35
|
onSelection?: (index: number) => void;
|
|
35
36
|
closeOnTab?: boolean;
|
|
36
37
|
editorRef: React.RefObject<HTMLDivElement>;
|
|
38
|
+
popupsMountPoint?: HTMLElement | undefined;
|
|
37
39
|
};
|
|
38
40
|
export type ArrowKeyNavigationProviderOptions = ColorPaletteArrowKeyNavigationOptions | MenuArrowKeyNavigationOptions;
|
|
39
41
|
export type ArrowKeyNavigationProviderProps = Omit<ColorPaletteArrowKeyNavigationProps, 'editorRef'> | Omit<MenuArrowKeyNavigationProviderProps, 'editorRef'>;
|
|
@@ -3,6 +3,7 @@ import { type EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
|
3
3
|
type ReactEditorViewContextProps = {
|
|
4
4
|
editorView?: EditorView;
|
|
5
5
|
editorRef?: React.RefObject<HTMLDivElement>;
|
|
6
|
+
popupsMountPoint?: HTMLElement | undefined;
|
|
6
7
|
};
|
|
7
8
|
declare const ReactEditorViewContext: React.Context<ReactEditorViewContextProps>;
|
|
8
9
|
export default ReactEditorViewContext;
|
|
@@ -285,6 +285,17 @@ export interface CollabSendableSelection {
|
|
|
285
285
|
anchor?: number | string;
|
|
286
286
|
head?: number | string;
|
|
287
287
|
}
|
|
288
|
+
export type Activity = 'VIEWING' | 'EDITING';
|
|
289
|
+
export type CollabActivityData = {
|
|
290
|
+
activity: Activity;
|
|
291
|
+
userId?: string;
|
|
292
|
+
};
|
|
293
|
+
export type CollabActivityJoinPayload = CollabActivityData & {
|
|
294
|
+
type: 'activity:join';
|
|
295
|
+
};
|
|
296
|
+
export type CollabActivityAckPayload = CollabActivityData & {
|
|
297
|
+
type: 'activity:ack';
|
|
298
|
+
};
|
|
288
299
|
export interface CollabEventTelepointerData {
|
|
289
300
|
type: 'telepointer';
|
|
290
301
|
selection: CollabSendableSelection;
|
|
@@ -334,6 +345,21 @@ export type UserPermitType = {
|
|
|
334
345
|
};
|
|
335
346
|
export type CollabPermissionEventPayload = UserPermitType;
|
|
336
347
|
export interface CollabEvents {
|
|
348
|
+
/**
|
|
349
|
+
* Experimental Only: Teammate Presence (Confluence Land and Onboarding)
|
|
350
|
+
*
|
|
351
|
+
* This event is emitted when a new collaborator joins the session. The event carries information about
|
|
352
|
+
* the action the new collaborator is currently doing in the session, such as viewing or editing.
|
|
353
|
+
*/
|
|
354
|
+
'activity:join': CollabActivityJoinPayload;
|
|
355
|
+
/**
|
|
356
|
+
* Experimental Only: Teammate Presence (Confluence Land and Onboarding)
|
|
357
|
+
*
|
|
358
|
+
* This event is emitted by the existing collaborators in response to a new collaborator joining.
|
|
359
|
+
* It is used to inform the new collaborator about the current actions or states of the existing
|
|
360
|
+
* collaborators, such as viewing or editing.
|
|
361
|
+
*/
|
|
362
|
+
'activity:ack': CollabActivityAckPayload;
|
|
337
363
|
'metadata:changed': Metadata;
|
|
338
364
|
init: CollabInitPayload;
|
|
339
365
|
connected: CollabConnectedPayload;
|
|
@@ -4,4 +4,4 @@ import type { ColorPaletteArrowKeyNavigationProps } from '../types';
|
|
|
4
4
|
* This component is a wrapper for color picker which listens to keydown events of children
|
|
5
5
|
* and handles arrow key navigation
|
|
6
6
|
*/
|
|
7
|
-
export declare const ColorPaletteArrowKeyNavigationProvider: ({ children, selectedRowIndex, selectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, handleClose, closeOnTab, editorRef, ignoreEscapeKey, }: React.PropsWithChildren<Omit<ColorPaletteArrowKeyNavigationProps, 'type'>>) => JSX.Element;
|
|
7
|
+
export declare const ColorPaletteArrowKeyNavigationProvider: ({ children, selectedRowIndex, selectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, handleClose, closeOnTab, editorRef, ignoreEscapeKey, popupsMountPoint, }: React.PropsWithChildren<Omit<ColorPaletteArrowKeyNavigationProps, 'type'>>) => JSX.Element;
|
|
@@ -4,4 +4,4 @@ import type { MenuArrowKeyNavigationProviderProps } from '../types';
|
|
|
4
4
|
* This component is a wrapper of vertical menus which listens to keydown events of children
|
|
5
5
|
* and handles up/down arrow key navigation
|
|
6
6
|
*/
|
|
7
|
-
export declare const MenuArrowKeyNavigationProvider: ({ children, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, editorRef, }: React.PropsWithChildren<Omit<MenuArrowKeyNavigationProviderProps, 'type'>>) => JSX.Element;
|
|
7
|
+
export declare const MenuArrowKeyNavigationProvider: ({ children, handleClose, disableArrowKeyNavigation, keyDownHandlerContext, closeOnTab, onSelection, editorRef, popupsMountPoint, }: React.PropsWithChildren<Omit<MenuArrowKeyNavigationProviderProps, 'type'>>) => JSX.Element;
|
|
@@ -22,6 +22,7 @@ export type ColorPaletteArrowKeyNavigationProps = ColorPaletteArrowKeyNavigation
|
|
|
22
22
|
closeOnTab?: boolean;
|
|
23
23
|
editorRef: React.RefObject<HTMLDivElement>;
|
|
24
24
|
ignoreEscapeKey?: boolean | false;
|
|
25
|
+
popupsMountPoint?: HTMLElement | undefined;
|
|
25
26
|
};
|
|
26
27
|
export type MenuArrowKeyNavigationOptions = {
|
|
27
28
|
type: ArrowKeyNavigationType.MENU;
|
|
@@ -34,6 +35,7 @@ export type MenuArrowKeyNavigationProviderProps = MenuArrowKeyNavigationOptions
|
|
|
34
35
|
onSelection?: (index: number) => void;
|
|
35
36
|
closeOnTab?: boolean;
|
|
36
37
|
editorRef: React.RefObject<HTMLDivElement>;
|
|
38
|
+
popupsMountPoint?: HTMLElement | undefined;
|
|
37
39
|
};
|
|
38
40
|
export type ArrowKeyNavigationProviderOptions = ColorPaletteArrowKeyNavigationOptions | MenuArrowKeyNavigationOptions;
|
|
39
41
|
export type ArrowKeyNavigationProviderProps = Omit<ColorPaletteArrowKeyNavigationProps, 'editorRef'> | Omit<MenuArrowKeyNavigationProviderProps, 'editorRef'>;
|
|
@@ -3,6 +3,7 @@ import { type EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
|
3
3
|
type ReactEditorViewContextProps = {
|
|
4
4
|
editorView?: EditorView;
|
|
5
5
|
editorRef?: React.RefObject<HTMLDivElement>;
|
|
6
|
+
popupsMountPoint?: HTMLElement | undefined;
|
|
6
7
|
};
|
|
7
8
|
declare const ReactEditorViewContext: React.Context<ReactEditorViewContextProps>;
|
|
8
9
|
export default ReactEditorViewContext;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-common",
|
|
3
|
-
"version": "83.0
|
|
3
|
+
"version": "83.1.0",
|
|
4
4
|
"description": "A package that contains common classes and components for editor and renderer",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -265,6 +265,9 @@
|
|
|
265
265
|
},
|
|
266
266
|
"platform.editor.a11y-table-context-menu_y4c9c": {
|
|
267
267
|
"type": "boolean"
|
|
268
|
+
},
|
|
269
|
+
"platform.editor.a11y-main-toolbar-navigation_osrty": {
|
|
270
|
+
"type": "boolean"
|
|
268
271
|
}
|
|
269
272
|
}
|
|
270
273
|
}
|