@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
137 lines (136 loc) • 7.19 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsContext"));
var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
var _customize = _interopRequireDefault(require("@atlaskit/icon/core/customize"));
var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _messages = require("../../messages");
var _StyledButton = require("./StyledButton");
var _useLinkOverlayAnalyticsEvents = require("./useLinkOverlayAnalyticsEvents");
var _excluded = ["onClick", "triggerRef"],
_excluded2 = ["onClick", "triggerRef"];
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var SMALL_LINK_TOOLBAR_ANALYTICS_SOURCE = 'smallLinkToolbar';
var Dropdown = function Dropdown(_ref) {
var onConfigureClickCallback = _ref.onConfigureClick,
onOpenLinkClickCallback = _ref.onOpenLinkClick,
onDropdownChange = _ref.onDropdownChange,
editorView = _ref.editorView,
testId = _ref.testId;
var _useIntl = (0, _reactIntl.useIntl)(),
formatMessage = _useIntl.formatMessage;
var configureLinkLabel = formatMessage(_messages.cardMessages.inlineConfigureLink);
var goToLinkLabel = formatMessage(_messages.cardMessages.inlineGoToLink);
var _useLinkOverlayAnalyt = (0, _useLinkOverlayAnalyticsEvents.useLinkOverlayAnalyticsEvents)(),
fireActionClickEvent = _useLinkOverlayAnalyt.fireActionClickEvent,
fireLinkClickEvent = _useLinkOverlayAnalyt.fireLinkClickEvent,
fireToolbarViewEvent = _useLinkOverlayAnalyt.fireToolbarViewEvent;
var focusEditor = (0, _react.useCallback)(function () {
// Fix dropdown giving focus back to the trigger async which is then unmounted and losing focus
// this is happening deep within atlaskit dropdown as a result of this code: https://github.com/focus-trap/focus-trap/blob/master/index.js#L987
// use setTimeout to run this async after that call
setTimeout(function () {
return editorView.focus();
}, 0);
}, [editorView]);
var onOpenChange = (0, _react.useCallback)(function (_ref2) {
var isOpen = _ref2.isOpen,
event = _ref2.event;
onDropdownChange === null || onDropdownChange === void 0 || onDropdownChange(isOpen);
if (isOpen) {
fireToolbarViewEvent();
}
if (!isOpen && event instanceof KeyboardEvent) {
focusEditor();
}
}, [fireToolbarViewEvent, focusEditor, onDropdownChange]);
var onGoToLinkClick = (0, _react.useCallback)(function (event) {
fireActionClickEvent('goToLink');
onOpenLinkClickCallback === null || onOpenLinkClickCallback === void 0 || onOpenLinkClickCallback(event);
focusEditor();
}, [fireActionClickEvent, focusEditor, onOpenLinkClickCallback]);
var onConfigureClick = (0, _react.useCallback)(function () {
fireActionClickEvent('configureLink');
onConfigureClickCallback === null || onConfigureClickCallback === void 0 || onConfigureClickCallback();
focusEditor();
}, [fireActionClickEvent, focusEditor, onConfigureClickCallback]);
var memoizedTrigger = (0, _react.useCallback)(function (_ref3) {
var _onClick = _ref3.onClick,
triggerRef = _ref3.triggerRef,
props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
return (0, _react2.jsx)(_StyledButton.StyledButton, (0, _extends2.default)({
innerRef: triggerRef
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, props, {
iconBefore: (0, _react2.jsx)(_chevronDown.default, {
label: configureLinkLabel,
size: "small"
})
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- intentional: onClick closes over per-render trigger prop
,
onClick: function onClick(e) {
_onClick === null || _onClick === void 0 || _onClick(e);
fireLinkClickEvent();
}
}));
}, [configureLinkLabel, fireLinkClickEvent]);
return (0, _react2.jsx)(_dropdownMenu.default, {
trigger: (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedTrigger : function (_ref4) {
var _onClick2 = _ref4.onClick,
triggerRef = _ref4.triggerRef,
props = (0, _objectWithoutProperties2.default)(_ref4, _excluded2);
return (0, _react2.jsx)(_StyledButton.StyledButton, (0, _extends2.default)({
innerRef: triggerRef
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, props, {
iconBefore: (0, _react2.jsx)(_chevronDown.default, {
label: configureLinkLabel,
size: "small"
})
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- intentional fallback for experiment off path
,
onClick: function onClick(e) {
_onClick2 === null || _onClick2 === void 0 || _onClick2(e);
fireLinkClickEvent();
}
}));
},
testId: "".concat(testId, "-dropdown"),
onOpenChange: onOpenChange
}, (0, _react2.jsx)(_dropdownMenu.DropdownItemGroup, null, (0, _react2.jsx)(_dropdownMenu.DropdownItem, {
elemBefore: (0, _react2.jsx)(_linkExternal.default, {
label: goToLinkLabel
}),
testId: "".concat(testId, "-dropdown-item-open-link"),
onClick: onGoToLinkClick
}, goToLinkLabel), (0, _react2.jsx)(_dropdownMenu.DropdownItem, {
elemBefore: (0, _react2.jsx)(_customize.default, {
label: configureLinkLabel
}),
onClick: onConfigureClick,
testId: "".concat(testId, "-dropdown-item-configure")
}, configureLinkLabel)));
};
var _default_1 = (0, _withAnalyticsContext.default)({
source: SMALL_LINK_TOOLBAR_ANALYTICS_SOURCE
})(Dropdown);
var _default = exports.default = _default_1;