@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
507 lines (503 loc) • 21.7 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _media = require("@atlaskit/editor-common/media");
var _styles = require("@atlaskit/editor-common/styles");
var _ui = require("@atlaskit/editor-common/ui");
var _uiColor = require("@atlaskit/editor-common/ui-color");
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
var _editorPalette = require("@atlaskit/editor-palette");
var _border = _interopRequireDefault(require("@atlaskit/icon/core/border"));
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
var _strokeWeightLarge = _interopRequireDefault(require("@atlaskit/icon/core/stroke-weight-large"));
var _strokeWeightMedium = _interopRequireDefault(require("@atlaskit/icon/core/stroke-weight-medium"));
var _strokeWeightSmall = _interopRequireDefault(require("@atlaskit/icon/core/stroke-weight-small"));
var _compiled = require("@atlaskit/primitives/compiled");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _styles2 = require("./styles");
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
// New padding for border options drop down
var dropdownOptionButtonNew = (0, _react2.css)({
background: 'transparent',
borderWidth: "var(--ds-border-width-selected, 2px)",
borderStyle: 'solid',
borderColor: 'transparent',
display: 'flex',
width: '100%',
alignItems: 'center',
justifyContent: 'space-between',
padding: 0,
'&:focus': {
backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)",
borderColor: "var(--ds-border-focused, #4688EC)"
}
});
var ImageBorder = function ImageBorder(_ref) {
var formatMessage = _ref.intl.formatMessage,
toggleBorder = _ref.toggleBorder,
borderMark = _ref.borderMark,
setBorder = _ref.setBorder;
var popupTarget = (0, _react.useRef)(null);
var dropDownColorOptionButton = (0, _react.useRef)(null);
var dropDownSizeOptionButton = (0, _react.useRef)(null);
var colorSubmenuRef = (0, _react.useRef)(null);
var sizeSubmenuRef = (0, _react.useRef)(null);
var openDropdownButtonRef = (0, _react.useRef)(null);
var enabled = !!borderMark;
var color = borderMark === null || borderMark === void 0 ? void 0 : borderMark.color;
var size = borderMark === null || borderMark === void 0 ? void 0 : borderMark.size;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
var _useState3 = (0, _react.useState)(false),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
isOpenByKeyboard = _useState4[0],
setIsOpenedByKeyboard = _useState4[1];
var _useState5 = (0, _react.useState)(false),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
isColorSubmenuOpen = _useState6[0],
setIsColorSubmenuOpen = _useState6[1];
var _useState7 = (0, _react.useState)(false),
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
isSizeSubmenuOpen = _useState8[0],
setIsSizeSubmenuOpen = _useState8[1];
var handleColorSubmenuEsc = (0, _react.useCallback)(function () {
var _dropDownColorOptionB;
setIsOpenedByKeyboard(false);
setIsColorSubmenuOpen(false);
dropDownColorOptionButton === null || dropDownColorOptionButton === void 0 || (_dropDownColorOptionB = dropDownColorOptionButton.current) === null || _dropDownColorOptionB === void 0 || _dropDownColorOptionB.focus();
}, []);
var handleSizeSubmenuEsc = (0, _react.useCallback)(function () {
var _dropDownSizeOptionBu;
setIsOpenedByKeyboard(false);
setIsSizeSubmenuOpen(false);
dropDownSizeOptionButton === null || dropDownSizeOptionButton === void 0 || (_dropDownSizeOptionBu = dropDownSizeOptionButton.current) === null || _dropDownSizeOptionBu === void 0 || _dropDownSizeOptionBu.focus();
}, []);
var handleSubMenuRef = function handleSubMenuRef(ref) {
if (!ref) {
return;
}
var rect = ref.getBoundingClientRect();
if (rect.left + rect.width > window.innerWidth) {
ref.style.left = "-".concat(rect.width, "px");
}
};
var handleTriggerByKeyboard = function handleTriggerByKeyboard(event, allowedKeys, callback) {
if (!allowedKeys.includes(event.key)) {
return;
}
event.preventDefault();
callback();
setIsOpenedByKeyboard(true);
};
var handleTriggerToolbarByKeyboard = function handleTriggerToolbarByKeyboard(event, callback) {
handleTriggerByKeyboard(event, ['Enter', ' '], callback);
};
var handleTriggerSubmenuByKeyboard = function handleTriggerSubmenuByKeyboard(event, callback) {
var keys = (0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? ['Enter', 'ArrowRight'] : ['Enter', ' '];
handleTriggerByKeyboard(event, keys, callback);
};
(0, _react.useEffect)(function () {
var focusFirstOption = function focusFirstOption(submenuRef, isOpen) {
if (!isOpenByKeyboard) {
return;
}
if (isOpen && submenuRef.current) {
var firstOption = submenuRef.current.querySelector('button');
if (!firstOption) {
return;
}
firstOption.focus();
var keyboardEvent = new KeyboardEvent('keydown', {
key: 'ArrowDown',
bubbles: true
});
firstOption.dispatchEvent(keyboardEvent);
}
};
focusFirstOption(colorSubmenuRef, isColorSubmenuOpen);
focusFirstOption(sizeSubmenuRef, isSizeSubmenuOpen);
}, [isColorSubmenuOpen, isSizeSubmenuOpen, isOpenByKeyboard]);
var borderSizeOptions = [{
name: formatMessage(_media.imageBorderMessages.borderSizeSubtle),
value: 1,
icon: _strokeWeightSmall.default
}, {
name: formatMessage(_media.imageBorderMessages.borderSizeMedium),
value: 2,
icon: _strokeWeightMedium.default
}, {
name: formatMessage(_media.imageBorderMessages.borderSizeBold),
value: 3,
icon: _strokeWeightLarge.default
}];
var items = [{
content: (0, _react2.jsx)("div", null, (0, _react2.jsx)("button", {
ref: dropDownColorOptionButton,
type: "button",
"aria-label": formatMessage(_media.imageBorderMessages.borderColorDropdownAriaLabel),
"data-testid": "image-border-dropdown-button-color",
css: (0, _expValEquals.expValEquals)('platform_editor_fix_media_toolbar_border_dropdown', 'isEnabled', true, false) ? dropdownOptionButtonNew :
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
_styles2.dropdownOptionButton,
"aria-expanded": isColorSubmenuOpen,
onKeyDown: function onKeyDown(e) {
return handleTriggerSubmenuByKeyboard(e, function () {
if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
setIsColorSubmenuOpen(function (prev) {
var next = !prev;
if (next) {
setIsSizeSubmenuOpen(false);
}
return next;
});
} else {
setIsColorSubmenuOpen(!isColorSubmenuOpen);
}
});
}
}, (0, _react2.jsx)(_compiled.Text, null, formatMessage(_media.imageBorderMessages.borderColor)), (0, _react2.jsx)("div", {
css: _styles2.contextualMenuArrow
})), (0, _react2.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: _styles.DropdownMenuSharedCssClassName.SUBMENU,
ref: colorSubmenuRef
}, isColorSubmenuOpen &&
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
(0, _react2.jsx)("div", {
css: (0, _styles2.contextualSubMenu)(0),
ref: handleSubMenuRef
}, (0, _react2.jsx)(_uiMenu.ArrowKeyNavigationProvider, {
type: _uiMenu.ArrowKeyNavigationType.MENU
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
handleClose: function handleClose(e) {
e.preventDefault();
e.stopPropagation();
handleColorSubmenuEsc();
},
disableCloseOnArrowClick: true
}, (0, _react2.jsx)(_uiColor.ColorPalette
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
onClick: function onClick(color) {
setBorder({
color: color
});
setIsOpen(!isOpen);
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onKeyDown: function onKeyDown(color, _, event) {
if (event.key === 'Enter' || event.key === ' ') {
var _openDropdownButtonRe;
setBorder({
color: color
});
setIsOpen(!isOpen);
setIsColorSubmenuOpen(false);
setIsSizeSubmenuOpen(false);
(_openDropdownButtonRe = openDropdownButtonRef.current) === null || _openDropdownButtonRe === void 0 || _openDropdownButtonRe.focus();
}
},
selectedColor: color !== null && color !== void 0 ? color : null
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
paletteOptions: {
palette: _uiColor.borderColorPalette,
paletteColorTooltipMessages: _uiColor.borderPaletteTooltipMessages,
hexToPaletteColor: _editorPalette.hexToEditorBorderPaletteColor
}
}))))),
'data-testid': 'dropdown-item__Color',
key: 'dropdown-menu-image-border-color-button',
value: {
name: 'color'
},
'aria-label': '',
wrapperTabIndex: null
}, {
content: (0, _react2.jsx)("div", null, (0, _react2.jsx)("button", {
type: "button",
"aria-label": formatMessage(_media.imageBorderMessages.borderSizeDropdownAriaLabel),
"data-testid": "image-border-dropdown-button-size",
css: (0, _expValEquals.expValEquals)('platform_editor_fix_media_toolbar_border_dropdown', 'isEnabled', true, false) ? dropdownOptionButtonNew :
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
_styles2.dropdownOptionButton,
"aria-expanded": isSizeSubmenuOpen,
ref: dropDownSizeOptionButton,
onKeyDown: function onKeyDown(e) {
return handleTriggerSubmenuByKeyboard(e, function () {
if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
setIsSizeSubmenuOpen(function (prev) {
var next = !prev;
if (next) {
setIsColorSubmenuOpen(false);
}
return next;
});
} else {
setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
}
});
}
}, (0, _react2.jsx)(_compiled.Text, null, formatMessage(_media.imageBorderMessages.borderSize)), (0, _react2.jsx)("div", {
css: _styles2.contextualMenuArrow
})), (0, _react2.jsx)("div", {
//eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: _styles.DropdownMenuSharedCssClassName.SUBMENU,
ref: sizeSubmenuRef
}, isSizeSubmenuOpen && (0, _react2.jsx)(_uiMenu.ArrowKeyNavigationProvider, {
type: _uiMenu.ArrowKeyNavigationType.MENU
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
handleClose: function handleClose(e) {
e.preventDefault();
handleSizeSubmenuEsc();
},
disableCloseOnArrowClick: true
}, (0, _react2.jsx)("div", {
css: (0, _styles2.contextualSubMenu)(1),
ref: handleSubMenuRef
}, borderSizeOptions.map(function (_ref2, idx) {
var name = _ref2.name,
value = _ref2.value,
icon = _ref2.icon;
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var ButtonIcon = icon;
return (
// Ignored via go/ees005
// eslint-disable-next-line react/no-array-index-key
(0, _react2.jsx)(_tooltip.default, {
key: idx,
content: name
}, (0, _react2.jsx)("span", {
css: _styles2.buttonWrapperStyle
}, (0, _react2.jsx)("button", {
type: "button"
/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */,
css: (0, _styles2.buttonStyle)(value === size),
"aria-label": name,
role: "radio",
"aria-checked": value === size,
onClick: function onClick() {
setBorder({
size: value
});
setIsOpen(false);
},
onKeyDown: function onKeyDown(event) {
if (event.key === 'Enter' || event.key === ' ') {
var _openDropdownButtonRe2;
setBorder({
size: value
});
setIsOpen(false);
setIsColorSubmenuOpen(false);
setIsSizeSubmenuOpen(false);
(_openDropdownButtonRe2 = openDropdownButtonRef.current) === null || _openDropdownButtonRe2 === void 0 || _openDropdownButtonRe2.focus();
}
},
onMouseDown: function onMouseDown(e) {
e.preventDefault();
}
}, (0, _react2.jsx)(ButtonIcon, {
color: value === size ? "var(--ds-icon-inverse, #FFFFFF)" : 'currentColor',
spacing: "spacious",
label: ""
}))))
);
}))))),
'data-testid': 'dropdown-item__Size',
key: 'dropdown-menu-image-border-size-button',
value: {
name: 'size'
},
'aria-label': '',
wrapperTabIndex: null
}];
/**
* We want to change direction of our dropdowns a bit early,
* not exactly when it hits the boundary.
*/
var fitTolerance = 10;
var fitWidth = _styles2.menuItemDimensions.width;
var fitHeight = items.length * (_styles2.menuItemDimensions.height + _styles2.itemSpacing);
var isAnySubMenuOpen = isSizeSubmenuOpen || isColorSubmenuOpen;
return (0, _react2.jsx)("div", null, (0, _react2.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
css: (0, _styles2.toolbarButtonWrapper)({
enabled: enabled,
isOpen: isOpen
})
}, (0, _react2.jsx)(_uiMenu.ToolbarButton
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
, {
className: "image-border-toolbar-btn",
selected: enabled,
onClick: toggleBorder,
spacing: "compact",
"aria-label": enabled ? formatMessage(_media.imageBorderMessages.removeBorder) : formatMessage(_media.imageBorderMessages.addBorder),
iconBefore: (0, _react2.jsx)(_border.default, {
color: "currentColor",
label: "",
spacing: "spacious"
}),
title: enabled ? formatMessage(_media.imageBorderMessages.removeBorder) : formatMessage(_media.imageBorderMessages.addBorder)
}), (0, _react2.jsx)("div", {
ref: popupTarget
}, (0, _react2.jsx)(_uiMenu.ToolbarButton
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
, {
className: "image-border-toolbar-dropdown",
ref: openDropdownButtonRef,
selected: enabled || isOpen,
"aria-expanded": isOpen,
"aria-label": formatMessage(_media.imageBorderMessages.borderOptions),
title: formatMessage(_media.imageBorderMessages.borderOptions),
spacing: "compact",
iconBefore: (0, _react2.jsx)(_chevronDown.default, {
color: "currentColor",
spacing: "spacious",
label: "",
size: "small"
})
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onClick: function onClick() {
setIsOpen(!isOpen);
setIsOpenedByKeyboard(false);
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onKeyDown: function onKeyDown(e) {
return handleTriggerToolbarByKeyboard(e, function () {
return setIsOpen(!isOpen);
});
}
}))), (0, _react2.jsx)(_ui.Popup, {
target: popupTarget.current ? popupTarget.current : undefined,
fitWidth: fitWidth + fitTolerance,
fitHeight: fitHeight + fitTolerance,
forcePlacement: true,
stick: true
}, (0, _react2.jsx)("div", {
onMouseLeave: (0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true) ? undefined : function () {
setIsColorSubmenuOpen(false);
setIsSizeSubmenuOpen(false);
}
/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */,
css: _styles2.dropdownWrapper
}, (0, _react2.jsx)(_uiMenu.DropdownMenu
//This needs be removed when the a11y is completely handled
//Disabling key navigation now as it works only partially
//Same with packages/editor/editor-plugin-table/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
arrowKeyNavigationProviderOptions: {
type: _uiMenu.ArrowKeyNavigationType.MENU,
disableArrowKeyNavigation: isAnySubMenuOpen
},
allowEnterDefaultBehavior: isAnySubMenuOpen,
handleEscapeKeydown: isAnySubMenuOpen ? function () {
return;
} : function () {
var _openDropdownButtonRe3;
(_openDropdownButtonRe3 = openDropdownButtonRef.current) === null || _openDropdownButtonRe3 === void 0 || _openDropdownButtonRe3.focus();
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
items: [{
items: items
}],
isOpen: isOpen
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
shouldFocusFirstItem: function shouldFocusFirstItem() {
return isOpenByKeyboard;
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onOpenChange: function onOpenChange() {
setIsOpen(false);
setIsColorSubmenuOpen(false);
setIsSizeSubmenuOpen(false);
setIsOpenedByKeyboard(false);
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onItemActivated: function onItemActivated(_ref3) {
var item = _ref3.item;
if (item.value.name === 'color') {
if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
setIsColorSubmenuOpen(function (prev) {
var next = !prev;
if (next) {
setIsSizeSubmenuOpen(false);
}
return next;
});
} else {
setIsColorSubmenuOpen(!isColorSubmenuOpen);
}
}
if (item.value.name === 'size') {
if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
setIsSizeSubmenuOpen(function (prev) {
var next = !prev;
if (next) {
setIsColorSubmenuOpen(false);
}
return next;
});
} else {
setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
}
}
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onMouseEnter: function onMouseEnter(_ref4) {
var item = _ref4.item;
if (!(0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
if (item.value.name === 'color') {
setIsColorSubmenuOpen(true);
setIsOpenedByKeyboard(false);
}
if (item.value.name === 'size') {
setIsSizeSubmenuOpen(true);
setIsOpenedByKeyboard(false);
}
}
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onMouseLeave: function onMouseLeave(_ref5) {
var item = _ref5.item;
if (!(0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
if (item.value.name === 'color') {
setIsColorSubmenuOpen(false);
}
if (item.value.name === 'size') {
setIsSizeSubmenuOpen(false);
}
}
},
fitWidth: fitWidth + fitTolerance,
fitHeight: fitHeight + fitTolerance
}))));
};
var _default = exports.default = ImageBorder;