@atlaskit/editor-plugin-code-block 19.0.8 → 19.0.10
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 +14 -0
- package/dist/cjs/ui/CodeBlockLanguagePicker.js +5 -15
- package/dist/cjs/ui/LanguagePicker.compiled.css +0 -4
- package/dist/cjs/ui/LanguagePicker.js +13 -30
- package/dist/es2019/ui/CodeBlockLanguagePicker.js +5 -15
- package/dist/es2019/ui/LanguagePicker.compiled.css +0 -4
- package/dist/es2019/ui/LanguagePicker.js +13 -30
- package/dist/esm/ui/CodeBlockLanguagePicker.js +5 -15
- package/dist/esm/ui/LanguagePicker.compiled.css +0 -4
- package/dist/esm/ui/LanguagePicker.js +13 -30
- package/package.json +3 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-code-block
|
|
2
2
|
|
|
3
|
+
## 19.0.10
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`b615f1183f88d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b615f1183f88d) -
|
|
8
|
+
Clean up feature gate `platform_editor_code_block_ga_patch_1`
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 19.0.9
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 19.0.8
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.CodeBlockLanguagePicker = void 0;
|
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
12
11
|
var _editorCommands = require("../editor-commands");
|
|
13
12
|
var _languagePickerOptions = require("./language-picker-options");
|
|
14
13
|
var _LanguagePicker = require("./LanguagePicker");
|
|
@@ -35,27 +34,18 @@ var CodeBlockLanguagePicker = exports.CodeBlockLanguagePicker = function CodeBlo
|
|
|
35
34
|
var handleSelection = (0, _react.useCallback)(function (option, selectionSource, interactionMethod) {
|
|
36
35
|
var _api$analytics;
|
|
37
36
|
var isDetectLanguageSelected = option.value === _languagePickerOptions.DETECT_LANGUAGE_VALUE;
|
|
38
|
-
var command = isDetectLanguageSelected
|
|
37
|
+
var command = isDetectLanguageSelected ? (0, _editorCommands.detectLanguage)() : (0, _editorCommands.changeLanguage)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(option.value, selectionSource);
|
|
39
38
|
var commandSucceeded = command(editorView.state, editorView.dispatch);
|
|
40
|
-
if (
|
|
41
|
-
if (interactionMethod === 'mouse') {
|
|
42
|
-
requestAnimationFrame(function () {
|
|
43
|
-
// Mouse-opened picker should return editing focus to the code block. Keyboard-opened
|
|
44
|
-
// picker keeps focus on the trigger to avoid CodeMirror DOM focus without cm.hasFocus.
|
|
45
|
-
api === null || api === void 0 || api.core.actions.focus({
|
|
46
|
-
scrollIntoView: false
|
|
47
|
-
});
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
} else {
|
|
39
|
+
if (interactionMethod === 'mouse') {
|
|
51
40
|
requestAnimationFrame(function () {
|
|
52
|
-
//
|
|
41
|
+
// Mouse-opened picker should return editing focus to the code block. Keyboard-opened
|
|
42
|
+
// picker keeps focus on the trigger to avoid CodeMirror DOM focus without cm.hasFocus.
|
|
53
43
|
api === null || api === void 0 || api.core.actions.focus({
|
|
54
44
|
scrollIntoView: false
|
|
55
45
|
});
|
|
56
46
|
});
|
|
57
47
|
}
|
|
58
|
-
if (commandSucceeded
|
|
48
|
+
if (commandSucceeded) {
|
|
59
49
|
(0, _recentLanguages.saveRecentLanguage)(option.value);
|
|
60
50
|
setRecentLanguageValues((0, _recentLanguages.getRecentLanguages)());
|
|
61
51
|
}
|
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
._h7alglyw{border-inline:none}._179rglyw{border-block-end:none}
|
|
2
2
|
._mqm2ia51{border-block-start:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
|
|
3
|
-
._18m915vq{overflow-y:hidden}
|
|
4
3
|
._1bsb1osq{width:100%}
|
|
5
|
-
._1bto1l2s{text-overflow:ellipsis}
|
|
6
|
-
._1reo15vq{overflow-x:hidden}
|
|
7
4
|
._1xw9glyw button:after{content:none}
|
|
8
5
|
._ficf1e5h button{text-align:left}
|
|
9
|
-
._o5721q9c{white-space:nowrap}
|
|
10
6
|
._p12fuuw1{max-width:200px}
|
|
11
7
|
._vwz478tn{line-height:1.714}
|
|
@@ -16,7 +16,6 @@ var _button = _interopRequireDefault(require("@atlaskit/button/default/button"))
|
|
|
16
16
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
17
17
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
18
18
|
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
|
|
19
|
-
var _fg = require("@atlaskit/platform-feature-flags/fg");
|
|
20
19
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
21
20
|
var _popupSelect = require("@atlaskit/select/popup-select");
|
|
22
21
|
var _components = require("@atlaskit/react-select/components");
|
|
@@ -28,8 +27,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
|
|
|
28
27
|
var pickerOptionStyles = null;
|
|
29
28
|
var styles = {
|
|
30
29
|
divider: "_h7alglyw _179rglyw _mqm2ia51 _1bsb1osq",
|
|
31
|
-
trigger: "_p12fuuw1 _ficf1e5h _1xw9glyw"
|
|
32
|
-
legacyTriggerTextOverflow: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"
|
|
30
|
+
trigger: "_p12fuuw1 _ficf1e5h _1xw9glyw"
|
|
33
31
|
};
|
|
34
32
|
var CustomGroup = function CustomGroup(props) {
|
|
35
33
|
var allGroups = props.selectProps.options;
|
|
@@ -154,11 +152,7 @@ var LanguagePicker = exports.LanguagePicker = function LanguagePicker(_ref) {
|
|
|
154
152
|
}
|
|
155
153
|
var isSearchSelection = inputValueRef.current.trim().length > 0;
|
|
156
154
|
var selectionSource = isSearchSelection ? 'search' : (_option$selectionSour = option.selectionSource) !== null && _option$selectionSour !== void 0 ? _option$selectionSour : 'all';
|
|
157
|
-
|
|
158
|
-
onSelection(option, selectionSource, interactionMethodRef.current);
|
|
159
|
-
} else {
|
|
160
|
-
onSelection(option, selectionSource);
|
|
161
|
-
}
|
|
155
|
+
onSelection(option, selectionSource, interactionMethodRef.current);
|
|
162
156
|
}, [onSelection]);
|
|
163
157
|
var handleInputChange = (0, _react.useCallback)(function (newInputValue, actionMeta) {
|
|
164
158
|
// React-select clears the input as part of selecting a value before onChange fires.
|
|
@@ -177,22 +171,12 @@ var LanguagePicker = exports.LanguagePicker = function LanguagePicker(_ref) {
|
|
|
177
171
|
setLockedPopperPlacement(undefined);
|
|
178
172
|
onMenuOpen === null || onMenuOpen === void 0 || onMenuOpen();
|
|
179
173
|
}, [onMenuOpen]);
|
|
180
|
-
var handleTriggerMouseDown = (0, _react.useCallback)(function (event) {
|
|
181
|
-
// PopupSelect's FocusLock returns focus to the element that was focused before the
|
|
182
|
-
// picker opened. If that is the editor/code block, closing the picker can scroll the
|
|
183
|
-
// whole code block into view. Focus the trigger first without scrolling so FocusLock
|
|
184
|
-
// returns to the trigger; see CodeBlockLanguagePicker's handleSelection for restoring
|
|
185
|
-
// editor focus.
|
|
186
|
-
focusWithoutScrolling(event.currentTarget);
|
|
187
|
-
}, []);
|
|
188
174
|
var handleTriggerMouseUp = (0, _react.useCallback)(function (event) {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
focusWithoutScrolling(event.currentTarget);
|
|
195
|
-
}
|
|
175
|
+
interactionMethodRef.current = 'mouse';
|
|
176
|
+
// Focus the trigger before PopupSelect opens so FocusLock restores focus to the
|
|
177
|
+
// trigger after a mouse selection. Relying on the button's default mouse focus is too
|
|
178
|
+
// late here; FocusLock can still remember the code block as the previous focus target.
|
|
179
|
+
focusWithoutScrolling(event.currentTarget);
|
|
196
180
|
}, []);
|
|
197
181
|
var handleTriggerKeyDownCapture = (0, _react.useCallback)(function () {
|
|
198
182
|
interactionMethodRef.current = 'keyboard';
|
|
@@ -205,24 +189,23 @@ var LanguagePicker = exports.LanguagePicker = function LanguagePicker(_ref) {
|
|
|
205
189
|
ariaExpanded = _ref3['aria-expanded'],
|
|
206
190
|
ariaHasPopup = _ref3['aria-haspopup'];
|
|
207
191
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
208
|
-
className: (0, _runtime.ax)([styles.trigger
|
|
192
|
+
className: (0, _runtime.ax)([styles.trigger])
|
|
209
193
|
}, /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
210
194
|
spacing: triggerSpacing,
|
|
211
195
|
shouldFitContainer: true,
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
onKeyDownCapture: (0, _fg.fg)('platform_editor_code_block_ga_patch_1') ? handleTriggerKeyDownCapture : undefined,
|
|
196
|
+
onMouseUp: handleTriggerMouseUp,
|
|
197
|
+
onKeyDownCapture: handleTriggerKeyDownCapture,
|
|
215
198
|
onKeyDown: onKeyDown,
|
|
216
199
|
ref: ref,
|
|
217
200
|
iconAfter: _chevronDown.default,
|
|
218
201
|
appearance: "subtle",
|
|
219
202
|
isSelected: isOpen,
|
|
220
203
|
"aria-controls": ariaControls,
|
|
221
|
-
"aria-expanded":
|
|
222
|
-
"aria-haspopup":
|
|
204
|
+
"aria-expanded": ariaExpanded,
|
|
205
|
+
"aria-haspopup": ariaHasPopup,
|
|
223
206
|
testId: "code-block-language-picker-trigger"
|
|
224
207
|
}, label));
|
|
225
|
-
}, [label, triggerSpacing,
|
|
208
|
+
}, [label, triggerSpacing, handleTriggerMouseUp, handleTriggerKeyDownCapture]);
|
|
226
209
|
return /*#__PURE__*/_react.default.createElement(_popupSelect.PopupSelect, {
|
|
227
210
|
components: popupSelectComponents,
|
|
228
211
|
filterOption: filterOption,
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React, { useCallback, useState } from 'react';
|
|
2
|
-
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
3
2
|
import { changeLanguage, detectLanguage } from '../editor-commands';
|
|
4
3
|
import { DETECT_LANGUAGE_VALUE } from './language-picker-options';
|
|
5
4
|
import { LanguagePicker } from './LanguagePicker';
|
|
@@ -21,27 +20,18 @@ export const CodeBlockLanguagePicker = ({
|
|
|
21
20
|
const handleSelection = useCallback((option, selectionSource, interactionMethod) => {
|
|
22
21
|
var _api$analytics;
|
|
23
22
|
const isDetectLanguageSelected = option.value === DETECT_LANGUAGE_VALUE;
|
|
24
|
-
const command = isDetectLanguageSelected
|
|
23
|
+
const command = isDetectLanguageSelected ? detectLanguage() : changeLanguage(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(option.value, selectionSource);
|
|
25
24
|
const commandSucceeded = command(editorView.state, editorView.dispatch);
|
|
26
|
-
if (
|
|
27
|
-
if (interactionMethod === 'mouse') {
|
|
28
|
-
requestAnimationFrame(() => {
|
|
29
|
-
// Mouse-opened picker should return editing focus to the code block. Keyboard-opened
|
|
30
|
-
// picker keeps focus on the trigger to avoid CodeMirror DOM focus without cm.hasFocus.
|
|
31
|
-
api === null || api === void 0 ? void 0 : api.core.actions.focus({
|
|
32
|
-
scrollIntoView: false
|
|
33
|
-
});
|
|
34
|
-
});
|
|
35
|
-
}
|
|
36
|
-
} else {
|
|
25
|
+
if (interactionMethod === 'mouse') {
|
|
37
26
|
requestAnimationFrame(() => {
|
|
38
|
-
//
|
|
27
|
+
// Mouse-opened picker should return editing focus to the code block. Keyboard-opened
|
|
28
|
+
// picker keeps focus on the trigger to avoid CodeMirror DOM focus without cm.hasFocus.
|
|
39
29
|
api === null || api === void 0 ? void 0 : api.core.actions.focus({
|
|
40
30
|
scrollIntoView: false
|
|
41
31
|
});
|
|
42
32
|
});
|
|
43
33
|
}
|
|
44
|
-
if (commandSucceeded
|
|
34
|
+
if (commandSucceeded) {
|
|
45
35
|
saveRecentLanguage(option.value);
|
|
46
36
|
setRecentLanguageValues(getRecentLanguages());
|
|
47
37
|
}
|
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
._h7alglyw{border-inline:none}._179rglyw{border-block-end:none}
|
|
2
2
|
._mqm2ia51{border-block-start:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
|
|
3
|
-
._18m915vq{overflow-y:hidden}
|
|
4
3
|
._1bsb1osq{width:100%}
|
|
5
|
-
._1bto1l2s{text-overflow:ellipsis}
|
|
6
|
-
._1reo15vq{overflow-x:hidden}
|
|
7
4
|
._1xw9glyw button:after{content:none}
|
|
8
5
|
._ficf1e5h button{text-align:left}
|
|
9
|
-
._o5721q9c{white-space:nowrap}
|
|
10
6
|
._p12fuuw1{max-width:200px}
|
|
11
7
|
._vwz478tn{line-height:1.714}
|
|
@@ -6,7 +6,6 @@ import Button from '@atlaskit/button/default/button';
|
|
|
6
6
|
import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
|
|
7
7
|
import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
|
|
8
8
|
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
|
|
9
|
-
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
10
9
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
11
10
|
import { PopupSelect } from '@atlaskit/select/popup-select';
|
|
12
11
|
import { components } from '@atlaskit/react-select/components';
|
|
@@ -14,8 +13,7 @@ import { createGroupedLanguageOptions } from './language-picker-options';
|
|
|
14
13
|
const pickerOptionStyles = null;
|
|
15
14
|
const styles = {
|
|
16
15
|
divider: "_h7alglyw _179rglyw _mqm2ia51 _1bsb1osq",
|
|
17
|
-
trigger: "_p12fuuw1 _ficf1e5h _1xw9glyw"
|
|
18
|
-
legacyTriggerTextOverflow: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"
|
|
16
|
+
trigger: "_p12fuuw1 _ficf1e5h _1xw9glyw"
|
|
19
17
|
};
|
|
20
18
|
const CustomGroup = props => {
|
|
21
19
|
const allGroups = props.selectProps.options;
|
|
@@ -111,11 +109,7 @@ export const LanguagePicker = ({
|
|
|
111
109
|
}
|
|
112
110
|
const isSearchSelection = inputValueRef.current.trim().length > 0;
|
|
113
111
|
const selectionSource = isSearchSelection ? 'search' : (_option$selectionSour = option.selectionSource) !== null && _option$selectionSour !== void 0 ? _option$selectionSour : 'all';
|
|
114
|
-
|
|
115
|
-
onSelection(option, selectionSource, interactionMethodRef.current);
|
|
116
|
-
} else {
|
|
117
|
-
onSelection(option, selectionSource);
|
|
118
|
-
}
|
|
112
|
+
onSelection(option, selectionSource, interactionMethodRef.current);
|
|
119
113
|
}, [onSelection]);
|
|
120
114
|
const handleInputChange = useCallback((newInputValue, actionMeta) => {
|
|
121
115
|
// React-select clears the input as part of selecting a value before onChange fires.
|
|
@@ -134,22 +128,12 @@ export const LanguagePicker = ({
|
|
|
134
128
|
setLockedPopperPlacement(undefined);
|
|
135
129
|
onMenuOpen === null || onMenuOpen === void 0 ? void 0 : onMenuOpen();
|
|
136
130
|
}, [onMenuOpen]);
|
|
137
|
-
const handleTriggerMouseDown = useCallback(event => {
|
|
138
|
-
// PopupSelect's FocusLock returns focus to the element that was focused before the
|
|
139
|
-
// picker opened. If that is the editor/code block, closing the picker can scroll the
|
|
140
|
-
// whole code block into view. Focus the trigger first without scrolling so FocusLock
|
|
141
|
-
// returns to the trigger; see CodeBlockLanguagePicker's handleSelection for restoring
|
|
142
|
-
// editor focus.
|
|
143
|
-
focusWithoutScrolling(event.currentTarget);
|
|
144
|
-
}, []);
|
|
145
131
|
const handleTriggerMouseUp = useCallback(event => {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
focusWithoutScrolling(event.currentTarget);
|
|
152
|
-
}
|
|
132
|
+
interactionMethodRef.current = 'mouse';
|
|
133
|
+
// Focus the trigger before PopupSelect opens so FocusLock restores focus to the
|
|
134
|
+
// trigger after a mouse selection. Relying on the button's default mouse focus is too
|
|
135
|
+
// late here; FocusLock can still remember the code block as the previous focus target.
|
|
136
|
+
focusWithoutScrolling(event.currentTarget);
|
|
153
137
|
}, []);
|
|
154
138
|
const handleTriggerKeyDownCapture = useCallback(() => {
|
|
155
139
|
interactionMethodRef.current = 'keyboard';
|
|
@@ -162,23 +146,22 @@ export const LanguagePicker = ({
|
|
|
162
146
|
'aria-expanded': ariaExpanded,
|
|
163
147
|
'aria-haspopup': ariaHasPopup
|
|
164
148
|
}) => /*#__PURE__*/React.createElement("div", {
|
|
165
|
-
className: ax([styles.trigger
|
|
149
|
+
className: ax([styles.trigger])
|
|
166
150
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
167
151
|
spacing: triggerSpacing,
|
|
168
152
|
shouldFitContainer: true,
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
onKeyDownCapture: fg('platform_editor_code_block_ga_patch_1') ? handleTriggerKeyDownCapture : undefined,
|
|
153
|
+
onMouseUp: handleTriggerMouseUp,
|
|
154
|
+
onKeyDownCapture: handleTriggerKeyDownCapture,
|
|
172
155
|
onKeyDown: onKeyDown,
|
|
173
156
|
ref: ref,
|
|
174
157
|
iconAfter: ChevronDownIcon,
|
|
175
158
|
appearance: "subtle",
|
|
176
159
|
isSelected: isOpen,
|
|
177
160
|
"aria-controls": ariaControls,
|
|
178
|
-
"aria-expanded":
|
|
179
|
-
"aria-haspopup":
|
|
161
|
+
"aria-expanded": ariaExpanded,
|
|
162
|
+
"aria-haspopup": ariaHasPopup,
|
|
180
163
|
testId: "code-block-language-picker-trigger"
|
|
181
|
-
}, label)), [label, triggerSpacing,
|
|
164
|
+
}, label)), [label, triggerSpacing, handleTriggerMouseUp, handleTriggerKeyDownCapture]);
|
|
182
165
|
return /*#__PURE__*/React.createElement(PopupSelect, {
|
|
183
166
|
components: popupSelectComponents,
|
|
184
167
|
filterOption: filterOption,
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import React, { useCallback, useState } from 'react';
|
|
3
|
-
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
4
3
|
import { changeLanguage, detectLanguage } from '../editor-commands';
|
|
5
4
|
import { DETECT_LANGUAGE_VALUE } from './language-picker-options';
|
|
6
5
|
import { LanguagePicker } from './LanguagePicker';
|
|
@@ -26,27 +25,18 @@ export var CodeBlockLanguagePicker = function CodeBlockLanguagePicker(_ref) {
|
|
|
26
25
|
var handleSelection = useCallback(function (option, selectionSource, interactionMethod) {
|
|
27
26
|
var _api$analytics;
|
|
28
27
|
var isDetectLanguageSelected = option.value === DETECT_LANGUAGE_VALUE;
|
|
29
|
-
var command = isDetectLanguageSelected
|
|
28
|
+
var command = isDetectLanguageSelected ? detectLanguage() : changeLanguage(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(option.value, selectionSource);
|
|
30
29
|
var commandSucceeded = command(editorView.state, editorView.dispatch);
|
|
31
|
-
if (
|
|
32
|
-
if (interactionMethod === 'mouse') {
|
|
33
|
-
requestAnimationFrame(function () {
|
|
34
|
-
// Mouse-opened picker should return editing focus to the code block. Keyboard-opened
|
|
35
|
-
// picker keeps focus on the trigger to avoid CodeMirror DOM focus without cm.hasFocus.
|
|
36
|
-
api === null || api === void 0 || api.core.actions.focus({
|
|
37
|
-
scrollIntoView: false
|
|
38
|
-
});
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
} else {
|
|
30
|
+
if (interactionMethod === 'mouse') {
|
|
42
31
|
requestAnimationFrame(function () {
|
|
43
|
-
//
|
|
32
|
+
// Mouse-opened picker should return editing focus to the code block. Keyboard-opened
|
|
33
|
+
// picker keeps focus on the trigger to avoid CodeMirror DOM focus without cm.hasFocus.
|
|
44
34
|
api === null || api === void 0 || api.core.actions.focus({
|
|
45
35
|
scrollIntoView: false
|
|
46
36
|
});
|
|
47
37
|
});
|
|
48
38
|
}
|
|
49
|
-
if (commandSucceeded
|
|
39
|
+
if (commandSucceeded) {
|
|
50
40
|
saveRecentLanguage(option.value);
|
|
51
41
|
setRecentLanguageValues(getRecentLanguages());
|
|
52
42
|
}
|
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
._h7alglyw{border-inline:none}._179rglyw{border-block-end:none}
|
|
2
2
|
._mqm2ia51{border-block-start:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
|
|
3
|
-
._18m915vq{overflow-y:hidden}
|
|
4
3
|
._1bsb1osq{width:100%}
|
|
5
|
-
._1bto1l2s{text-overflow:ellipsis}
|
|
6
|
-
._1reo15vq{overflow-x:hidden}
|
|
7
4
|
._1xw9glyw button:after{content:none}
|
|
8
5
|
._ficf1e5h button{text-align:left}
|
|
9
|
-
._o5721q9c{white-space:nowrap}
|
|
10
6
|
._p12fuuw1{max-width:200px}
|
|
11
7
|
._vwz478tn{line-height:1.714}
|
|
@@ -11,7 +11,6 @@ import Button from '@atlaskit/button/default/button';
|
|
|
11
11
|
import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
|
|
12
12
|
import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
|
|
13
13
|
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
|
|
14
|
-
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
15
14
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
16
15
|
import { PopupSelect } from '@atlaskit/select/popup-select';
|
|
17
16
|
import { components } from '@atlaskit/react-select/components';
|
|
@@ -19,8 +18,7 @@ import { createGroupedLanguageOptions } from './language-picker-options';
|
|
|
19
18
|
var pickerOptionStyles = null;
|
|
20
19
|
var styles = {
|
|
21
20
|
divider: "_h7alglyw _179rglyw _mqm2ia51 _1bsb1osq",
|
|
22
|
-
trigger: "_p12fuuw1 _ficf1e5h _1xw9glyw"
|
|
23
|
-
legacyTriggerTextOverflow: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"
|
|
21
|
+
trigger: "_p12fuuw1 _ficf1e5h _1xw9glyw"
|
|
24
22
|
};
|
|
25
23
|
var CustomGroup = function CustomGroup(props) {
|
|
26
24
|
var allGroups = props.selectProps.options;
|
|
@@ -145,11 +143,7 @@ export var LanguagePicker = function LanguagePicker(_ref) {
|
|
|
145
143
|
}
|
|
146
144
|
var isSearchSelection = inputValueRef.current.trim().length > 0;
|
|
147
145
|
var selectionSource = isSearchSelection ? 'search' : (_option$selectionSour = option.selectionSource) !== null && _option$selectionSour !== void 0 ? _option$selectionSour : 'all';
|
|
148
|
-
|
|
149
|
-
onSelection(option, selectionSource, interactionMethodRef.current);
|
|
150
|
-
} else {
|
|
151
|
-
onSelection(option, selectionSource);
|
|
152
|
-
}
|
|
146
|
+
onSelection(option, selectionSource, interactionMethodRef.current);
|
|
153
147
|
}, [onSelection]);
|
|
154
148
|
var handleInputChange = useCallback(function (newInputValue, actionMeta) {
|
|
155
149
|
// React-select clears the input as part of selecting a value before onChange fires.
|
|
@@ -168,22 +162,12 @@ export var LanguagePicker = function LanguagePicker(_ref) {
|
|
|
168
162
|
setLockedPopperPlacement(undefined);
|
|
169
163
|
onMenuOpen === null || onMenuOpen === void 0 || onMenuOpen();
|
|
170
164
|
}, [onMenuOpen]);
|
|
171
|
-
var handleTriggerMouseDown = useCallback(function (event) {
|
|
172
|
-
// PopupSelect's FocusLock returns focus to the element that was focused before the
|
|
173
|
-
// picker opened. If that is the editor/code block, closing the picker can scroll the
|
|
174
|
-
// whole code block into view. Focus the trigger first without scrolling so FocusLock
|
|
175
|
-
// returns to the trigger; see CodeBlockLanguagePicker's handleSelection for restoring
|
|
176
|
-
// editor focus.
|
|
177
|
-
focusWithoutScrolling(event.currentTarget);
|
|
178
|
-
}, []);
|
|
179
165
|
var handleTriggerMouseUp = useCallback(function (event) {
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
focusWithoutScrolling(event.currentTarget);
|
|
186
|
-
}
|
|
166
|
+
interactionMethodRef.current = 'mouse';
|
|
167
|
+
// Focus the trigger before PopupSelect opens so FocusLock restores focus to the
|
|
168
|
+
// trigger after a mouse selection. Relying on the button's default mouse focus is too
|
|
169
|
+
// late here; FocusLock can still remember the code block as the previous focus target.
|
|
170
|
+
focusWithoutScrolling(event.currentTarget);
|
|
187
171
|
}, []);
|
|
188
172
|
var handleTriggerKeyDownCapture = useCallback(function () {
|
|
189
173
|
interactionMethodRef.current = 'keyboard';
|
|
@@ -196,24 +180,23 @@ export var LanguagePicker = function LanguagePicker(_ref) {
|
|
|
196
180
|
ariaExpanded = _ref3['aria-expanded'],
|
|
197
181
|
ariaHasPopup = _ref3['aria-haspopup'];
|
|
198
182
|
return /*#__PURE__*/React.createElement("div", {
|
|
199
|
-
className: ax([styles.trigger
|
|
183
|
+
className: ax([styles.trigger])
|
|
200
184
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
201
185
|
spacing: triggerSpacing,
|
|
202
186
|
shouldFitContainer: true,
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
onKeyDownCapture: fg('platform_editor_code_block_ga_patch_1') ? handleTriggerKeyDownCapture : undefined,
|
|
187
|
+
onMouseUp: handleTriggerMouseUp,
|
|
188
|
+
onKeyDownCapture: handleTriggerKeyDownCapture,
|
|
206
189
|
onKeyDown: onKeyDown,
|
|
207
190
|
ref: ref,
|
|
208
191
|
iconAfter: ChevronDownIcon,
|
|
209
192
|
appearance: "subtle",
|
|
210
193
|
isSelected: isOpen,
|
|
211
194
|
"aria-controls": ariaControls,
|
|
212
|
-
"aria-expanded":
|
|
213
|
-
"aria-haspopup":
|
|
195
|
+
"aria-expanded": ariaExpanded,
|
|
196
|
+
"aria-haspopup": ariaHasPopup,
|
|
214
197
|
testId: "code-block-language-picker-trigger"
|
|
215
198
|
}, label));
|
|
216
|
-
}, [label, triggerSpacing,
|
|
199
|
+
}, [label, triggerSpacing, handleTriggerMouseUp, handleTriggerKeyDownCapture]);
|
|
217
200
|
return /*#__PURE__*/React.createElement(PopupSelect, {
|
|
218
201
|
components: popupSelectComponents,
|
|
219
202
|
filterOption: filterOption,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-code-block",
|
|
3
|
-
"version": "19.0.
|
|
3
|
+
"version": "19.0.10",
|
|
4
4
|
"description": "Code block plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -45,13 +45,13 @@
|
|
|
45
45
|
"@atlaskit/prosemirror-input-rules": "^4.1.0",
|
|
46
46
|
"@atlaskit/react-select": "^4.9.0",
|
|
47
47
|
"@atlaskit/select": "^22.11.0",
|
|
48
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
48
|
+
"@atlaskit/tmp-editor-statsig": "^188.0.0",
|
|
49
49
|
"@atlaskit/tokens": "^16.12.0",
|
|
50
50
|
"@babel/runtime": "^7.0.0",
|
|
51
51
|
"@compiled/react": "^1.0.2"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
|
-
"@atlaskit/editor-common": "^121.
|
|
54
|
+
"@atlaskit/editor-common": "^121.5.0",
|
|
55
55
|
"react": "^18.2.0 || ^19.2.0",
|
|
56
56
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
|
57
57
|
},
|
|
@@ -65,9 +65,6 @@
|
|
|
65
65
|
"platform_editor_code_block_add_line_number_button": {
|
|
66
66
|
"type": "boolean"
|
|
67
67
|
},
|
|
68
|
-
"platform_editor_code_block_ga_patch_1": {
|
|
69
|
-
"type": "boolean"
|
|
70
|
-
},
|
|
71
68
|
"platform_editor_code_block_language_detection_flow": {
|
|
72
69
|
"type": "boolean"
|
|
73
70
|
},
|