@atlaskit/editor-plugin-media 1.34.9 → 1.35.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.
Files changed (7) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/cjs/ui/ImageBorder/index.js +45 -133
  3. package/dist/es2019/ui/ImageBorder/index.js +37 -124
  4. package/dist/esm/ui/ImageBorder/index.js +45 -133
  5. package/dist/types/pm-plugins/alt-text/ui/AltTextEdit.d.ts +3 -1
  6. package/dist/types-ts4.5/pm-plugins/alt-text/ui/AltTextEdit.d.ts +3 -1
  7. package/package.json +8 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 1.35.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#151190](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/151190)
8
+ [`a3723b1cdede2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a3723b1cdede2) -
9
+ [ux] [ED-25037] this change bumps @atlaskit/adf-schema from 40.9.0 to 40.9.4 which makes the
10
+ blockquote selectable, adds missing marks to the PM node spec and fixes a bug that converted
11
+ pasted external images to media groups.
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
17
+ ## 1.34.10
18
+
19
+ ### Patch Changes
20
+
21
+ - [#150125](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/150125)
22
+ [`79a44707fe935`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/79a44707fe935) -
23
+ [ED-24001] This change is cleaning up the feature gate for the image border options dropdown a11y
24
+ fix.
25
+
3
26
  ## 1.34.9
4
27
 
5
28
  ### Patch Changes
package/dist/cjs/ui/ImageBorder/index.js CHANGED
@@ -16,7 +16,6 @@ var _uiColor = require("@atlaskit/editor-common/ui-color");
16
16
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
17
17
  var _editorPalette = require("@atlaskit/editor-palette");
18
18
  var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
19
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
20
19
  var _primitives = require("@atlaskit/primitives");
21
20
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
22
21
  var _styles2 = require("./styles");
@@ -79,36 +78,32 @@ var ImageBorder = function ImageBorder(_ref) {
79
78
  }
80
79
  };
81
80
  var handleTriggerByKeyboard = function handleTriggerByKeyboard(event, callback) {
82
- if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
83
- if (event.key === 'Enter' || event.key === ' ') {
84
- event.preventDefault();
85
- callback();
86
- setIsOpenedByKeyboard(true);
87
- }
81
+ if (event.key === 'Enter' || event.key === ' ') {
82
+ event.preventDefault();
83
+ callback();
84
+ setIsOpenedByKeyboard(true);
88
85
  }
89
86
  };
90
87
  (0, _react.useEffect)(function () {
91
- if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
92
- var focusFirstOption = function focusFirstOption(submenuRef, isOpen) {
93
- if (!isOpenByKeyboard) {
88
+ var focusFirstOption = function focusFirstOption(submenuRef, isOpen) {
89
+ if (!isOpenByKeyboard) {
90
+ return;
91
+ }
92
+ if (isOpen && submenuRef.current) {
93
+ var firstOption = submenuRef.current.querySelector('button');
94
+ if (!firstOption) {
94
95
  return;
95
96
  }
96
- if (isOpen && submenuRef.current) {
97
- var firstOption = submenuRef.current.querySelector('button');
98
- if (!firstOption) {
99
- return;
100
- }
101
- firstOption.focus();
102
- var keyboardEvent = new KeyboardEvent('keydown', {
103
- key: 'ArrowDown',
104
- bubbles: true
105
- });
106
- firstOption.dispatchEvent(keyboardEvent);
107
- }
108
- };
109
- focusFirstOption(colorSubmenuRef, isColorSubmenuOpen);
110
- focusFirstOption(sizeSubmenuRef, isSizeSubmenuOpen);
111
- }
97
+ firstOption.focus();
98
+ var keyboardEvent = new KeyboardEvent('keydown', {
99
+ key: 'ArrowDown',
100
+ bubbles: true
101
+ });
102
+ firstOption.dispatchEvent(keyboardEvent);
103
+ }
104
+ };
105
+ focusFirstOption(colorSubmenuRef, isColorSubmenuOpen);
106
+ focusFirstOption(sizeSubmenuRef, isSizeSubmenuOpen);
112
107
  }, [isColorSubmenuOpen, isSizeSubmenuOpen, isOpenByKeyboard]);
113
108
  var borderSizeOptions = [{
114
109
  name: formatMessage(_media.imageBorderMessages.borderSizeSubtle),
@@ -120,7 +115,7 @@ var ImageBorder = function ImageBorder(_ref) {
120
115
  name: formatMessage(_media.imageBorderMessages.borderSizeBold),
121
116
  value: 3
122
117
  }];
123
- var items = (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? [{
118
+ var items = [{
124
119
  content: (0, _react2.jsx)("div", null, (0, _react2.jsx)("button", {
125
120
  ref: dropDownColorOptionButton,
126
121
  type: "button",
@@ -266,83 +261,8 @@ var ImageBorder = function ImageBorder(_ref) {
266
261
  },
267
262
  'aria-label': '',
268
263
  wrapperTabIndex: null
269
- }] : [{
270
- content: formatMessage(_media.imageBorderMessages.borderColor),
271
- value: {
272
- name: 'color'
273
- },
274
- elemAfter:
275
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
276
- (0, _react2.jsx)("div", {
277
- className: _styles.DropdownMenuSharedCssClassName.SUBMENU
278
- }, (0, _react2.jsx)("div", {
279
- css: (0, _styles2.contextualMenuColorIcon)(color && (0, _editorPalette.hexToEditorBorderPaletteColor)(color))
280
- }), isColorSubmenuOpen &&
281
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
282
- (0, _react2.jsx)("div", {
283
- css: (0, _styles2.contextualSubMenu)(0),
284
- ref: handleSubMenuRef
285
- }, (0, _react2.jsx)(_uiColor.ColorPalette, {
286
- onClick: function onClick(color) {
287
- setBorder({
288
- color: color
289
- });
290
- setIsOpen(!isOpen);
291
- },
292
- selectedColor: color !== null && color !== void 0 ? color : null,
293
- paletteOptions: {
294
- palette: _uiColor.borderColorPalette,
295
- paletteColorTooltipMessages: _uiColor.borderPaletteTooltipMessages,
296
- hexToPaletteColor: _editorPalette.hexToEditorBorderPaletteColor
297
- }
298
- })))
299
- }, {
300
- content: formatMessage(_media.imageBorderMessages.borderSize),
301
- value: {
302
- name: 'size'
303
- },
304
- elemAfter:
305
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
306
- (0, _react2.jsx)("div", {
307
- className: _styles.DropdownMenuSharedCssClassName.SUBMENU
308
- }, (0, _react2.jsx)("div", {
309
- css: _styles2.contextualMenuArrow
310
- }), isSizeSubmenuOpen &&
311
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
312
- (0, _react2.jsx)("div", {
313
- css: (0, _styles2.contextualSubMenu)(1),
314
- ref: handleSubMenuRef
315
- }, borderSizeOptions.map(function (_ref3, idx) {
316
- var name = _ref3.name,
317
- value = _ref3.value;
318
- return (0, _react2.jsx)(_tooltip.default, {
319
- key: idx,
320
- content: name
321
- }, (0, _react2.jsx)("span", {
322
- css: _styles2.buttonWrapperStyle
323
- }, (0, _react2.jsx)("button", {
324
- type: "button"
325
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
326
- ,
327
- css: (0, _styles2.buttonStyle)(value === size),
328
- "aria-label": name,
329
- role: "radio",
330
- "aria-checked": value === size,
331
- onClick: function onClick() {
332
- setBorder({
333
- size: value
334
- });
335
- setIsOpen(false);
336
- },
337
- onMouseDown: function onMouseDown(e) {
338
- e.preventDefault();
339
- }
340
- }, (0, _react2.jsx)("div", {
341
- css: (0, _styles2.line)(value, value === size),
342
- role: "presentation"
343
- }))));
344
- })))
345
264
  }];
265
+
346
266
  /**
347
267
  * We want to change direction of our dropdowns a bit early,
348
268
  * not exactly when it hits the boundary.
@@ -377,7 +297,7 @@ var ImageBorder = function ImageBorder(_ref) {
377
297
  className: "image-border-toolbar-dropdown",
378
298
  ref: openDropdownButtonRef,
379
299
  selected: enabled || isOpen,
380
- "aria-expanded": (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? isOpen : undefined,
300
+ "aria-expanded": isOpen,
381
301
  "aria-label": formatMessage(_media.imageBorderMessages.borderOptions),
382
302
  title: formatMessage(_media.imageBorderMessages.borderOptions),
383
303
  spacing: "compact",
@@ -386,15 +306,13 @@ var ImageBorder = function ImageBorder(_ref) {
386
306
  }),
387
307
  onClick: function onClick() {
388
308
  setIsOpen(!isOpen);
389
- if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
390
- setIsOpenedByKeyboard(false);
391
- }
309
+ setIsOpenedByKeyboard(false);
392
310
  },
393
- onKeyDown: (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? function (e) {
311
+ onKeyDown: function onKeyDown(e) {
394
312
  return handleTriggerByKeyboard(e, function () {
395
313
  return setIsOpen(!isOpen);
396
314
  });
397
- } : undefined
315
+ }
398
316
  }))), (0, _react2.jsx)(_ui.Popup, {
399
317
  target: popupTarget.current ? popupTarget.current : undefined,
400
318
  fitWidth: fitWidth + fitTolerance,
@@ -405,9 +323,9 @@ var ImageBorder = function ImageBorder(_ref) {
405
323
  onMouseLeave: function onMouseLeave() {
406
324
  setIsColorSubmenuOpen(false);
407
325
  setIsSizeSubmenuOpen(false);
408
- },
409
- css: (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? /* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
410
- _styles2.dropdownWrapper : undefined
326
+ }
327
+ /* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */,
328
+ css: _styles2.dropdownWrapper
411
329
  }, (0, _react2.jsx)(_uiMenu.DropdownMenu
412
330
  //This needs be removed when the a11y is completely handled
413
331
  //Disabling key navigation now as it works only partially
@@ -415,32 +333,30 @@ var ImageBorder = function ImageBorder(_ref) {
415
333
  , {
416
334
  arrowKeyNavigationProviderOptions: {
417
335
  type: _uiMenu.ArrowKeyNavigationType.MENU,
418
- disableArrowKeyNavigation: (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? isAnySubMenuOpen ? true : false : true
336
+ disableArrowKeyNavigation: isAnySubMenuOpen
419
337
  },
420
- allowEnterDefaultBehavior: (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? isAnySubMenuOpen ? true : false : undefined,
421
- handleEscapeKeydown: (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? isAnySubMenuOpen ? function () {
338
+ allowEnterDefaultBehavior: isAnySubMenuOpen,
339
+ handleEscapeKeydown: isAnySubMenuOpen ? function () {
422
340
  return;
423
341
  } : function () {
424
342
  var _openDropdownButtonRe3;
425
343
  (_openDropdownButtonRe3 = openDropdownButtonRef.current) === null || _openDropdownButtonRe3 === void 0 || _openDropdownButtonRe3.focus();
426
- } : undefined,
344
+ },
427
345
  items: [{
428
346
  items: items
429
347
  }],
430
348
  isOpen: isOpen,
431
- shouldFocusFirstItem: (0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown') ? function () {
349
+ shouldFocusFirstItem: function shouldFocusFirstItem() {
432
350
  return isOpenByKeyboard;
433
- } : undefined,
351
+ },
434
352
  onOpenChange: function onOpenChange() {
435
353
  setIsOpen(false);
436
354
  setIsColorSubmenuOpen(false);
437
355
  setIsSizeSubmenuOpen(false);
438
- if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
439
- setIsOpenedByKeyboard(false);
440
- }
356
+ setIsOpenedByKeyboard(false);
441
357
  },
442
- onItemActivated: function onItemActivated(_ref4) {
443
- var item = _ref4.item;
358
+ onItemActivated: function onItemActivated(_ref3) {
359
+ var item = _ref3.item;
444
360
  if (item.value.name === 'color') {
445
361
  setIsColorSubmenuOpen(!isColorSubmenuOpen);
446
362
  }
@@ -448,23 +364,19 @@ var ImageBorder = function ImageBorder(_ref) {
448
364
  setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
449
365
  }
450
366
  },
451
- onMouseEnter: function onMouseEnter(_ref5) {
452
- var item = _ref5.item;
367
+ onMouseEnter: function onMouseEnter(_ref4) {
368
+ var item = _ref4.item;
453
369
  if (item.value.name === 'color') {
454
370
  setIsColorSubmenuOpen(true);
455
- if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
456
- setIsOpenedByKeyboard(false);
457
- }
371
+ setIsOpenedByKeyboard(false);
458
372
  }
459
373
  if (item.value.name === 'size') {
460
374
  setIsSizeSubmenuOpen(true);
461
- if ((0, _platformFeatureFlags.fg)('platform-editor-a11y-image-border-options-dropdown')) {
462
- setIsOpenedByKeyboard(false);
463
- }
375
+ setIsOpenedByKeyboard(false);
464
376
  }
465
377
  },
466
- onMouseLeave: function onMouseLeave(_ref6) {
467
- var item = _ref6.item;
378
+ onMouseLeave: function onMouseLeave(_ref5) {
379
+ var item = _ref5.item;
468
380
  if (item.value.name === 'color') {
469
381
  setIsColorSubmenuOpen(false);
470
382
  }
package/dist/es2019/ui/ImageBorder/index.js CHANGED
@@ -14,7 +14,6 @@ import { borderColorPalette, borderPaletteTooltipMessages, ColorPalette } from '
14
14
  import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
15
15
  import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
16
16
  import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
17
- import { fg } from '@atlaskit/platform-feature-flags';
18
17
  import { Text } from '@atlaskit/primitives';
19
18
  import Tooltip from '@atlaskit/tooltip';
20
19
  import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualMenuColorIcon, contextualSubMenu, dropdownOptionButton, dropdownWrapper, itemSpacing, line, menuItemDimensions, toolbarButtonWrapper } from './styles';
@@ -61,36 +60,32 @@ const ImageBorder = ({
61
60
  }
62
61
  };
63
62
  const handleTriggerByKeyboard = (event, callback) => {
64
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
65
- if (event.key === 'Enter' || event.key === ' ') {
66
- event.preventDefault();
67
- callback();
68
- setIsOpenedByKeyboard(true);
69
- }
63
+ if (event.key === 'Enter' || event.key === ' ') {
64
+ event.preventDefault();
65
+ callback();
66
+ setIsOpenedByKeyboard(true);
70
67
  }
71
68
  };
72
69
  useEffect(() => {
73
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
74
- const focusFirstOption = (submenuRef, isOpen) => {
75
- if (!isOpenByKeyboard) {
70
+ const focusFirstOption = (submenuRef, isOpen) => {
71
+ if (!isOpenByKeyboard) {
72
+ return;
73
+ }
74
+ if (isOpen && submenuRef.current) {
75
+ const firstOption = submenuRef.current.querySelector('button');
76
+ if (!firstOption) {
76
77
  return;
77
78
  }
78
- if (isOpen && submenuRef.current) {
79
- const firstOption = submenuRef.current.querySelector('button');
80
- if (!firstOption) {
81
- return;
82
- }
83
- firstOption.focus();
84
- const keyboardEvent = new KeyboardEvent('keydown', {
85
- key: 'ArrowDown',
86
- bubbles: true
87
- });
88
- firstOption.dispatchEvent(keyboardEvent);
89
- }
90
- };
91
- focusFirstOption(colorSubmenuRef, isColorSubmenuOpen);
92
- focusFirstOption(sizeSubmenuRef, isSizeSubmenuOpen);
93
- }
79
+ firstOption.focus();
80
+ const keyboardEvent = new KeyboardEvent('keydown', {
81
+ key: 'ArrowDown',
82
+ bubbles: true
83
+ });
84
+ firstOption.dispatchEvent(keyboardEvent);
85
+ }
86
+ };
87
+ focusFirstOption(colorSubmenuRef, isColorSubmenuOpen);
88
+ focusFirstOption(sizeSubmenuRef, isSizeSubmenuOpen);
94
89
  }, [isColorSubmenuOpen, isSizeSubmenuOpen, isOpenByKeyboard]);
95
90
  const borderSizeOptions = [{
96
91
  name: formatMessage(messages.borderSizeSubtle),
@@ -102,7 +97,7 @@ const ImageBorder = ({
102
97
  name: formatMessage(messages.borderSizeBold),
103
98
  value: 3
104
99
  }];
105
- const items = fg('platform-editor-a11y-image-border-options-dropdown') ? [{
100
+ const items = [{
106
101
  content: jsx("div", null, jsx("button", {
107
102
  ref: dropDownColorOptionButton,
108
103
  type: "button",
@@ -239,82 +234,8 @@ const ImageBorder = ({
239
234
  },
240
235
  'aria-label': '',
241
236
  wrapperTabIndex: null
242
- }] : [{
243
- content: formatMessage(messages.borderColor),
244
- value: {
245
- name: 'color'
246
- },
247
- elemAfter:
248
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
249
- jsx("div", {
250
- className: DropdownMenuSharedCssClassName.SUBMENU
251
- }, jsx("div", {
252
- css: contextualMenuColorIcon(color && hexToEditorBorderPaletteColor(color))
253
- }), isColorSubmenuOpen &&
254
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
255
- jsx("div", {
256
- css: contextualSubMenu(0),
257
- ref: handleSubMenuRef
258
- }, jsx(ColorPalette, {
259
- onClick: color => {
260
- setBorder({
261
- color
262
- });
263
- setIsOpen(!isOpen);
264
- },
265
- selectedColor: color !== null && color !== void 0 ? color : null,
266
- paletteOptions: {
267
- palette: borderColorPalette,
268
- paletteColorTooltipMessages: borderPaletteTooltipMessages,
269
- hexToPaletteColor: hexToEditorBorderPaletteColor
270
- }
271
- })))
272
- }, {
273
- content: formatMessage(messages.borderSize),
274
- value: {
275
- name: 'size'
276
- },
277
- elemAfter:
278
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
279
- jsx("div", {
280
- className: DropdownMenuSharedCssClassName.SUBMENU
281
- }, jsx("div", {
282
- css: contextualMenuArrow
283
- }), isSizeSubmenuOpen &&
284
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
285
- jsx("div", {
286
- css: contextualSubMenu(1),
287
- ref: handleSubMenuRef
288
- }, borderSizeOptions.map(({
289
- name,
290
- value
291
- }, idx) => jsx(Tooltip, {
292
- key: idx,
293
- content: name
294
- }, jsx("span", {
295
- css: buttonWrapperStyle
296
- }, jsx("button", {
297
- type: "button"
298
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
299
- ,
300
- css: buttonStyle(value === size),
301
- "aria-label": name,
302
- role: "radio",
303
- "aria-checked": value === size,
304
- onClick: () => {
305
- setBorder({
306
- size: value
307
- });
308
- setIsOpen(false);
309
- },
310
- onMouseDown: e => {
311
- e.preventDefault();
312
- }
313
- }, jsx("div", {
314
- css: line(value, value === size),
315
- role: "presentation"
316
- })))))))
317
237
  }];
238
+
318
239
  /**
319
240
  * We want to change direction of our dropdowns a bit early,
320
241
  * not exactly when it hits the boundary.
@@ -349,7 +270,7 @@ const ImageBorder = ({
349
270
  className: "image-border-toolbar-dropdown",
350
271
  ref: openDropdownButtonRef,
351
272
  selected: enabled || isOpen,
352
- "aria-expanded": fg('platform-editor-a11y-image-border-options-dropdown') ? isOpen : undefined,
273
+ "aria-expanded": isOpen,
353
274
  "aria-label": formatMessage(messages.borderOptions),
354
275
  title: formatMessage(messages.borderOptions),
355
276
  spacing: "compact",
@@ -358,11 +279,9 @@ const ImageBorder = ({
358
279
  }),
359
280
  onClick: () => {
360
281
  setIsOpen(!isOpen);
361
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
362
- setIsOpenedByKeyboard(false);
363
- }
282
+ setIsOpenedByKeyboard(false);
364
283
  },
365
- onKeyDown: fg('platform-editor-a11y-image-border-options-dropdown') ? e => handleTriggerByKeyboard(e, () => setIsOpen(!isOpen)) : undefined
284
+ onKeyDown: e => handleTriggerByKeyboard(e, () => setIsOpen(!isOpen))
366
285
  }))), jsx(Popup, {
367
286
  target: popupTarget.current ? popupTarget.current : undefined,
368
287
  fitWidth: fitWidth + fitTolerance,
@@ -373,9 +292,9 @@ const ImageBorder = ({
373
292
  onMouseLeave: () => {
374
293
  setIsColorSubmenuOpen(false);
375
294
  setIsSizeSubmenuOpen(false);
376
- },
377
- css: fg('platform-editor-a11y-image-border-options-dropdown') ? /* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
378
- dropdownWrapper : undefined
295
+ }
296
+ /* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */,
297
+ css: dropdownWrapper
379
298
  }, jsx(DropdownMenu
380
299
  //This needs be removed when the a11y is completely handled
381
300
  //Disabling key navigation now as it works only partially
@@ -383,27 +302,25 @@ const ImageBorder = ({
383
302
  , {
384
303
  arrowKeyNavigationProviderOptions: {
385
304
  type: ArrowKeyNavigationType.MENU,
386
- disableArrowKeyNavigation: fg('platform-editor-a11y-image-border-options-dropdown') ? isAnySubMenuOpen ? true : false : true
305
+ disableArrowKeyNavigation: isAnySubMenuOpen
387
306
  },
388
- allowEnterDefaultBehavior: fg('platform-editor-a11y-image-border-options-dropdown') ? isAnySubMenuOpen ? true : false : undefined,
389
- handleEscapeKeydown: fg('platform-editor-a11y-image-border-options-dropdown') ? isAnySubMenuOpen ? () => {
307
+ allowEnterDefaultBehavior: isAnySubMenuOpen,
308
+ handleEscapeKeydown: isAnySubMenuOpen ? () => {
390
309
  return;
391
310
  } : () => {
392
311
  var _openDropdownButtonRe3;
393
312
  (_openDropdownButtonRe3 = openDropdownButtonRef.current) === null || _openDropdownButtonRe3 === void 0 ? void 0 : _openDropdownButtonRe3.focus();
394
- } : undefined,
313
+ },
395
314
  items: [{
396
315
  items
397
316
  }],
398
317
  isOpen: isOpen,
399
- shouldFocusFirstItem: fg('platform-editor-a11y-image-border-options-dropdown') ? () => isOpenByKeyboard : undefined,
318
+ shouldFocusFirstItem: () => isOpenByKeyboard,
400
319
  onOpenChange: () => {
401
320
  setIsOpen(false);
402
321
  setIsColorSubmenuOpen(false);
403
322
  setIsSizeSubmenuOpen(false);
404
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
405
- setIsOpenedByKeyboard(false);
406
- }
323
+ setIsOpenedByKeyboard(false);
407
324
  },
408
325
  onItemActivated: ({
409
326
  item
@@ -420,15 +337,11 @@ const ImageBorder = ({
420
337
  }) => {
421
338
  if (item.value.name === 'color') {
422
339
  setIsColorSubmenuOpen(true);
423
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
424
- setIsOpenedByKeyboard(false);
425
- }
340
+ setIsOpenedByKeyboard(false);
426
341
  }
427
342
  if (item.value.name === 'size') {
428
343
  setIsSizeSubmenuOpen(true);
429
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
430
- setIsOpenedByKeyboard(false);
431
- }
344
+ setIsOpenedByKeyboard(false);
432
345
  }
433
346
  },
434
347
  onMouseLeave: ({
package/dist/esm/ui/ImageBorder/index.js CHANGED
@@ -15,7 +15,6 @@ import { borderColorPalette, borderPaletteTooltipMessages, ColorPalette } from '
15
15
  import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
16
16
  import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
17
17
  import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
18
- import { fg } from '@atlaskit/platform-feature-flags';
19
18
  import { Text } from '@atlaskit/primitives';
20
19
  import Tooltip from '@atlaskit/tooltip';
21
20
  import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualMenuColorIcon, contextualSubMenu, dropdownOptionButton, dropdownWrapper, itemSpacing, line, menuItemDimensions, toolbarButtonWrapper } from './styles';
@@ -71,36 +70,32 @@ var ImageBorder = function ImageBorder(_ref) {
71
70
  }
72
71
  };
73
72
  var handleTriggerByKeyboard = function handleTriggerByKeyboard(event, callback) {
74
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
75
- if (event.key === 'Enter' || event.key === ' ') {
76
- event.preventDefault();
77
- callback();
78
- setIsOpenedByKeyboard(true);
79
- }
73
+ if (event.key === 'Enter' || event.key === ' ') {
74
+ event.preventDefault();
75
+ callback();
76
+ setIsOpenedByKeyboard(true);
80
77
  }
81
78
  };
82
79
  useEffect(function () {
83
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
84
- var focusFirstOption = function focusFirstOption(submenuRef, isOpen) {
85
- if (!isOpenByKeyboard) {
80
+ var focusFirstOption = function focusFirstOption(submenuRef, isOpen) {
81
+ if (!isOpenByKeyboard) {
82
+ return;
83
+ }
84
+ if (isOpen && submenuRef.current) {
85
+ var firstOption = submenuRef.current.querySelector('button');
86
+ if (!firstOption) {
86
87
  return;
87
88
  }
88
- if (isOpen && submenuRef.current) {
89
- var firstOption = submenuRef.current.querySelector('button');
90
- if (!firstOption) {
91
- return;
92
- }
93
- firstOption.focus();
94
- var keyboardEvent = new KeyboardEvent('keydown', {
95
- key: 'ArrowDown',
96
- bubbles: true
97
- });
98
- firstOption.dispatchEvent(keyboardEvent);
99
- }
100
- };
101
- focusFirstOption(colorSubmenuRef, isColorSubmenuOpen);
102
- focusFirstOption(sizeSubmenuRef, isSizeSubmenuOpen);
103
- }
89
+ firstOption.focus();
90
+ var keyboardEvent = new KeyboardEvent('keydown', {
91
+ key: 'ArrowDown',
92
+ bubbles: true
93
+ });
94
+ firstOption.dispatchEvent(keyboardEvent);
95
+ }
96
+ };
97
+ focusFirstOption(colorSubmenuRef, isColorSubmenuOpen);
98
+ focusFirstOption(sizeSubmenuRef, isSizeSubmenuOpen);
104
99
  }, [isColorSubmenuOpen, isSizeSubmenuOpen, isOpenByKeyboard]);
105
100
  var borderSizeOptions = [{
106
101
  name: formatMessage(messages.borderSizeSubtle),
@@ -112,7 +107,7 @@ var ImageBorder = function ImageBorder(_ref) {
112
107
  name: formatMessage(messages.borderSizeBold),
113
108
  value: 3
114
109
  }];
115
- var items = fg('platform-editor-a11y-image-border-options-dropdown') ? [{
110
+ var items = [{
116
111
  content: jsx("div", null, jsx("button", {
117
112
  ref: dropDownColorOptionButton,
118
113
  type: "button",
@@ -258,83 +253,8 @@ var ImageBorder = function ImageBorder(_ref) {
258
253
  },
259
254
  'aria-label': '',
260
255
  wrapperTabIndex: null
261
- }] : [{
262
- content: formatMessage(messages.borderColor),
263
- value: {
264
- name: 'color'
265
- },
266
- elemAfter:
267
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
268
- jsx("div", {
269
- className: DropdownMenuSharedCssClassName.SUBMENU
270
- }, jsx("div", {
271
- css: contextualMenuColorIcon(color && hexToEditorBorderPaletteColor(color))
272
- }), isColorSubmenuOpen &&
273
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
274
- jsx("div", {
275
- css: contextualSubMenu(0),
276
- ref: handleSubMenuRef
277
- }, jsx(ColorPalette, {
278
- onClick: function onClick(color) {
279
- setBorder({
280
- color: color
281
- });
282
- setIsOpen(!isOpen);
283
- },
284
- selectedColor: color !== null && color !== void 0 ? color : null,
285
- paletteOptions: {
286
- palette: borderColorPalette,
287
- paletteColorTooltipMessages: borderPaletteTooltipMessages,
288
- hexToPaletteColor: hexToEditorBorderPaletteColor
289
- }
290
- })))
291
- }, {
292
- content: formatMessage(messages.borderSize),
293
- value: {
294
- name: 'size'
295
- },
296
- elemAfter:
297
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
298
- jsx("div", {
299
- className: DropdownMenuSharedCssClassName.SUBMENU
300
- }, jsx("div", {
301
- css: contextualMenuArrow
302
- }), isSizeSubmenuOpen &&
303
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
304
- jsx("div", {
305
- css: contextualSubMenu(1),
306
- ref: handleSubMenuRef
307
- }, borderSizeOptions.map(function (_ref3, idx) {
308
- var name = _ref3.name,
309
- value = _ref3.value;
310
- return jsx(Tooltip, {
311
- key: idx,
312
- content: name
313
- }, jsx("span", {
314
- css: buttonWrapperStyle
315
- }, jsx("button", {
316
- type: "button"
317
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
318
- ,
319
- css: buttonStyle(value === size),
320
- "aria-label": name,
321
- role: "radio",
322
- "aria-checked": value === size,
323
- onClick: function onClick() {
324
- setBorder({
325
- size: value
326
- });
327
- setIsOpen(false);
328
- },
329
- onMouseDown: function onMouseDown(e) {
330
- e.preventDefault();
331
- }
332
- }, jsx("div", {
333
- css: line(value, value === size),
334
- role: "presentation"
335
- }))));
336
- })))
337
256
  }];
257
+
338
258
  /**
339
259
  * We want to change direction of our dropdowns a bit early,
340
260
  * not exactly when it hits the boundary.
@@ -369,7 +289,7 @@ var ImageBorder = function ImageBorder(_ref) {
369
289
  className: "image-border-toolbar-dropdown",
370
290
  ref: openDropdownButtonRef,
371
291
  selected: enabled || isOpen,
372
- "aria-expanded": fg('platform-editor-a11y-image-border-options-dropdown') ? isOpen : undefined,
292
+ "aria-expanded": isOpen,
373
293
  "aria-label": formatMessage(messages.borderOptions),
374
294
  title: formatMessage(messages.borderOptions),
375
295
  spacing: "compact",
@@ -378,15 +298,13 @@ var ImageBorder = function ImageBorder(_ref) {
378
298
  }),
379
299
  onClick: function onClick() {
380
300
  setIsOpen(!isOpen);
381
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
382
- setIsOpenedByKeyboard(false);
383
- }
301
+ setIsOpenedByKeyboard(false);
384
302
  },
385
- onKeyDown: fg('platform-editor-a11y-image-border-options-dropdown') ? function (e) {
303
+ onKeyDown: function onKeyDown(e) {
386
304
  return handleTriggerByKeyboard(e, function () {
387
305
  return setIsOpen(!isOpen);
388
306
  });
389
- } : undefined
307
+ }
390
308
  }))), jsx(Popup, {
391
309
  target: popupTarget.current ? popupTarget.current : undefined,
392
310
  fitWidth: fitWidth + fitTolerance,
@@ -397,9 +315,9 @@ var ImageBorder = function ImageBorder(_ref) {
397
315
  onMouseLeave: function onMouseLeave() {
398
316
  setIsColorSubmenuOpen(false);
399
317
  setIsSizeSubmenuOpen(false);
400
- },
401
- css: fg('platform-editor-a11y-image-border-options-dropdown') ? /* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
402
- dropdownWrapper : undefined
318
+ }
319
+ /* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */,
320
+ css: dropdownWrapper
403
321
  }, jsx(DropdownMenu
404
322
  //This needs be removed when the a11y is completely handled
405
323
  //Disabling key navigation now as it works only partially
@@ -407,32 +325,30 @@ var ImageBorder = function ImageBorder(_ref) {
407
325
  , {
408
326
  arrowKeyNavigationProviderOptions: {
409
327
  type: ArrowKeyNavigationType.MENU,
410
- disableArrowKeyNavigation: fg('platform-editor-a11y-image-border-options-dropdown') ? isAnySubMenuOpen ? true : false : true
328
+ disableArrowKeyNavigation: isAnySubMenuOpen
411
329
  },
412
- allowEnterDefaultBehavior: fg('platform-editor-a11y-image-border-options-dropdown') ? isAnySubMenuOpen ? true : false : undefined,
413
- handleEscapeKeydown: fg('platform-editor-a11y-image-border-options-dropdown') ? isAnySubMenuOpen ? function () {
330
+ allowEnterDefaultBehavior: isAnySubMenuOpen,
331
+ handleEscapeKeydown: isAnySubMenuOpen ? function () {
414
332
  return;
415
333
  } : function () {
416
334
  var _openDropdownButtonRe3;
417
335
  (_openDropdownButtonRe3 = openDropdownButtonRef.current) === null || _openDropdownButtonRe3 === void 0 || _openDropdownButtonRe3.focus();
418
- } : undefined,
336
+ },
419
337
  items: [{
420
338
  items: items
421
339
  }],
422
340
  isOpen: isOpen,
423
- shouldFocusFirstItem: fg('platform-editor-a11y-image-border-options-dropdown') ? function () {
341
+ shouldFocusFirstItem: function shouldFocusFirstItem() {
424
342
  return isOpenByKeyboard;
425
- } : undefined,
343
+ },
426
344
  onOpenChange: function onOpenChange() {
427
345
  setIsOpen(false);
428
346
  setIsColorSubmenuOpen(false);
429
347
  setIsSizeSubmenuOpen(false);
430
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
431
- setIsOpenedByKeyboard(false);
432
- }
348
+ setIsOpenedByKeyboard(false);
433
349
  },
434
- onItemActivated: function onItemActivated(_ref4) {
435
- var item = _ref4.item;
350
+ onItemActivated: function onItemActivated(_ref3) {
351
+ var item = _ref3.item;
436
352
  if (item.value.name === 'color') {
437
353
  setIsColorSubmenuOpen(!isColorSubmenuOpen);
438
354
  }
@@ -440,23 +356,19 @@ var ImageBorder = function ImageBorder(_ref) {
440
356
  setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
441
357
  }
442
358
  },
443
- onMouseEnter: function onMouseEnter(_ref5) {
444
- var item = _ref5.item;
359
+ onMouseEnter: function onMouseEnter(_ref4) {
360
+ var item = _ref4.item;
445
361
  if (item.value.name === 'color') {
446
362
  setIsColorSubmenuOpen(true);
447
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
448
- setIsOpenedByKeyboard(false);
449
- }
363
+ setIsOpenedByKeyboard(false);
450
364
  }
451
365
  if (item.value.name === 'size') {
452
366
  setIsSizeSubmenuOpen(true);
453
- if (fg('platform-editor-a11y-image-border-options-dropdown')) {
454
- setIsOpenedByKeyboard(false);
455
- }
367
+ setIsOpenedByKeyboard(false);
456
368
  }
457
369
  },
458
- onMouseLeave: function onMouseLeave(_ref6) {
459
- var item = _ref6.item;
370
+ onMouseLeave: function onMouseLeave(_ref5) {
371
+ var item = _ref5.item;
460
372
  if (item.value.name === 'color') {
461
373
  setIsColorSubmenuOpen(false);
462
374
  }
package/dist/types/pm-plugins/alt-text/ui/AltTextEdit.d.ts CHANGED
@@ -39,5 +39,7 @@ export declare class AltTextEditComponent extends React.Component<Props, AltText
39
39
  private handleOnBlur;
40
40
  private handleClearText;
41
41
  }
42
- declare const _default: React.ForwardRefExoticComponent<Omit<import("react-intl-next").WithIntlProps<Props>, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
42
+ declare const _default: React.ForwardRefExoticComponent<Omit<Omit<Props, "intl"> & {
43
+ forwardedRef?: React.Ref<any> | undefined;
44
+ }, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
43
45
  export default _default;
package/dist/types-ts4.5/pm-plugins/alt-text/ui/AltTextEdit.d.ts CHANGED
@@ -39,5 +39,7 @@ export declare class AltTextEditComponent extends React.Component<Props, AltText
39
39
  private handleOnBlur;
40
40
  private handleClearText;
41
41
  }
42
- declare const _default: React.ForwardRefExoticComponent<Omit<import("react-intl-next").WithIntlProps<Props>, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
42
+ declare const _default: React.ForwardRefExoticComponent<Omit<Omit<Props, "intl"> & {
43
+ forwardedRef?: React.Ref<any> | undefined;
44
+ }, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
43
45
  export default _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media",
3
- "version": "1.34.9",
3
+ "version": "1.35.0",
4
4
  "description": "Media plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -8,7 +8,7 @@
8
8
  "registry": "https://registry.npmjs.org/"
9
9
  },
10
10
  "atlassian": {
11
- "team": "Editor: Media Experience Porygon",
11
+ "team": "Editor: Core Experiences",
12
12
  "singleton": true,
13
13
  "runReact18": true
14
14
  },
@@ -32,14 +32,14 @@
32
32
  "./types": "./src/types.ts"
33
33
  },
34
34
  "dependencies": {
35
- "@atlaskit/adf-schema": "^40.9.0",
35
+ "@atlaskit/adf-schema": "^40.9.4",
36
36
  "@atlaskit/analytics-namespaced-context": "^6.12.0",
37
37
  "@atlaskit/analytics-next": "^10.1.0",
38
38
  "@atlaskit/button": "^20.2.0",
39
- "@atlaskit/editor-common": "^93.1.0",
39
+ "@atlaskit/editor-common": "^93.3.0",
40
40
  "@atlaskit/editor-palette": "1.6.1",
41
- "@atlaskit/editor-plugin-analytics": "^1.8.0",
42
- "@atlaskit/editor-plugin-annotation": "1.19.11",
41
+ "@atlaskit/editor-plugin-analytics": "^1.9.0",
42
+ "@atlaskit/editor-plugin-annotation": "1.20.0",
43
43
  "@atlaskit/editor-plugin-decorations": "^1.3.0",
44
44
  "@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
45
45
  "@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
@@ -53,7 +53,7 @@
53
53
  "@atlaskit/editor-shared-styles": "^3.0.0",
54
54
  "@atlaskit/editor-tables": "^2.8.0",
55
55
  "@atlaskit/form": "^10.5.0",
56
- "@atlaskit/icon": "^22.21.0",
56
+ "@atlaskit/icon": "^22.22.0",
57
57
  "@atlaskit/media-card": "^78.5.0",
58
58
  "@atlaskit/media-client": "^28.0.0",
59
59
  "@atlaskit/media-client-react": "^2.2.0",
@@ -61,7 +61,7 @@
61
61
  "@atlaskit/media-filmstrip": "^47.4.0",
62
62
  "@atlaskit/media-picker": "^66.7.0",
63
63
  "@atlaskit/media-ui": "^25.15.0",
64
- "@atlaskit/media-viewer": "^49.0.0",
64
+ "@atlaskit/media-viewer": "^49.1.0",
65
65
  "@atlaskit/platform-feature-flags": "^0.3.0",
66
66
  "@atlaskit/primitives": "^12.2.0",
67
67
  "@atlaskit/textfield": "^6.5.0",
@@ -128,9 +128,6 @@
128
128
  "type": "boolean",
129
129
  "referenceOnly": "true"
130
130
  },
131
- "platform-editor-a11y-image-border-options-dropdown": {
132
- "type": "boolean"
133
- },
134
131
  "platform_editor_media_batch_updates": {
135
132
  "type": "boolean"
136
133
  },