@atlaskit/editor-plugin-media-insert
Version:
Media Insert plugin for @atlaskit/editor-core
192 lines (190 loc) • 10.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MediaInsertPicker = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _reactIntl = require("react-intl");
var _analytics = require("@atlaskit/editor-common/analytics");
var _getDomRefFromSelection = require("@atlaskit/editor-common/get-dom-ref-from-selection");
var _hooks = require("@atlaskit/editor-common/hooks");
var _messages = require("@atlaskit/editor-common/messages");
var _ui = require("@atlaskit/editor-common/ui");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _compiled = require("@atlaskit/primitives/compiled");
var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
var _useFocusEditor = require("./hooks/use-focus-editor");
var _useUnholyAutofocus2 = require("./hooks/use-unholy-autofocus");
var _LocalMedia = require("./LocalMedia");
var _MediaFromURL = require("./MediaFromURL");
var _MediaInsertWrapper = require("./MediaInsertWrapper");
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 PopupWithListeners = (0, _ui.withOuterListeners)(_ui.Popup);
/**
* A custom TabPanel that is non-focusable.
*/
var CustomTabPanel = function CustomTabPanel(_ref) {
var children = _ref.children,
_ref$disablePaddingBl = _ref.disablePaddingBlockEnd,
disablePaddingBlockEnd = _ref$disablePaddingBl === void 0 ? false : _ref$disablePaddingBl;
var tabPanelAttributes = (0, _tabs.useTabPanel)();
return /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
paddingBlockEnd: disablePaddingBlockEnd ? 'space.0' : 'space.150'
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, tabPanelAttributes, {
tabIndex: -1
}), children);
};
var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_ref2) {
var _api$mediaInsert$acti, _api$mediaInsert, _api$mediaInsert$getI;
var api = _ref2.api,
editorView = _ref2.editorView,
dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
popupsMountPoint = _ref2.popupsMountPoint,
popupsBoundariesElement = _ref2.popupsBoundariesElement,
popupsScrollableElement = _ref2.popupsScrollableElement,
_closeMediaInsertPicker = _ref2.closeMediaInsertPicker,
insertMediaSingle = _ref2.insertMediaSingle,
insertExternalMediaSingle = _ref2.insertExternalMediaSingle,
insertFile = _ref2.insertFile,
_ref2$isOnlyExternalL = _ref2.isOnlyExternalLinks,
isOnlyExternalLinks = _ref2$isOnlyExternalL === void 0 ? false : _ref2$isOnlyExternalL,
customizedUrlValidation = _ref2.customizedUrlValidation,
customizedHelperMessage = _ref2.customizedHelperMessage;
// Tabs registered by other plugins via `api.mediaInsert.actions.registerInsertTab(...)`.
// Read once per render; the registry is mutated only at plugin setup time so this is stable
// for the lifetime of an editor instance.
var registeredTabs = (_api$mediaInsert$acti = api === null || api === void 0 || (_api$mediaInsert = api.mediaInsert) === null || _api$mediaInsert === void 0 || (_api$mediaInsert = _api$mediaInsert.actions) === null || _api$mediaInsert === void 0 || (_api$mediaInsert$getI = _api$mediaInsert.getInsertTabs) === null || _api$mediaInsert$getI === void 0 ? void 0 : _api$mediaInsert$getI.call(_api$mediaInsert)) !== null && _api$mediaInsert$acti !== void 0 ? _api$mediaInsert$acti : [];
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['media', 'mediaInsert'], function (states) {
var _states$mediaState, _states$mediaInsertSt, _states$mediaInsertSt2;
return {
mediaProvider: (_states$mediaState = states.mediaState) === null || _states$mediaState === void 0 ? void 0 : _states$mediaState.mediaProvider,
isOpen: (_states$mediaInsertSt = states.mediaInsertState) === null || _states$mediaInsertSt === void 0 ? void 0 : _states$mediaInsertSt.isOpen,
mountInfo: (_states$mediaInsertSt2 = states.mediaInsertState) === null || _states$mediaInsertSt2 === void 0 ? void 0 : _states$mediaInsertSt2.mountInfo
};
}),
mediaProvider = _useSharedPluginState.mediaProvider,
isOpen = _useSharedPluginState.isOpen,
mountInfo = _useSharedPluginState.mountInfo;
var targetRef;
var mountPoint;
if (mountInfo) {
targetRef = mountInfo.ref;
mountPoint = mountInfo.mountPoint;
} else {
var _api$analytics;
// If targetRef is undefined, target the selection in the editor
targetRef = (0, _getDomRefFromSelection.getDomRefFromSelection)(editorView, _analytics.ACTION_SUBJECT_ID.PICKER_MEDIA, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
mountPoint = popupsMountPoint;
}
var intl = (0, _reactIntl.useIntl)();
var focusEditor = (0, _useFocusEditor.useFocusEditor)({
editorView: editorView
});
var _useUnholyAutofocus = (0, _useUnholyAutofocus2.useUnholyAutofocus)(),
autofocusRef = _useUnholyAutofocus.autofocusRef,
onPositionCalculated = _useUnholyAutofocus.onPositionCalculated;
if (!isOpen || !mediaProvider) {
return null;
}
var handleClose = function handleClose(exitMethod) {
return function (event) {
// Same as AIImageGenerationPopup: react-select can detach the option
// before `click` fires, so withOuterListeners treats it as outside.
if (exitMethod === _analytics.INPUT_METHOD.MOUSE && event.target instanceof Node && !event.target.isConnected) {
return;
}
event.preventDefault();
if (dispatchAnalyticsEvent) {
var payload = {
action: _analytics.ACTION.CLOSED,
actionSubject: _analytics.ACTION_SUBJECT.PICKER,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.PICKER_MEDIA,
eventType: _analytics.EVENT_TYPE.UI,
attributes: {
exitMethod: exitMethod
}
};
dispatchAnalyticsEvent(payload);
}
_closeMediaInsertPicker();
focusEditor();
};
};
return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
ariaLabel: intl.formatMessage(_messages.mediaInsertMessages.mediaPickerPopupAriaLabel)
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
offset: [0, 12],
target: targetRef,
zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
fitHeight: 390,
fitWidth: 340,
mountTo: mountPoint,
boundariesElement: popupsBoundariesElement,
handleClickOutside: handleClose(_analytics.INPUT_METHOD.MOUSE),
handleEscapeKeydown: handleClose(_analytics.INPUT_METHOD.KEYBOARD),
scrollableElement: popupsScrollableElement,
preventOverflow: true,
onPositionCalculated: onPositionCalculated,
focusTrap: true
}, /*#__PURE__*/_react.default.createElement(_ui.PlainOutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
return /*#__PURE__*/_react.default.createElement(_MediaInsertWrapper.MediaInsertWrapper, {
ref: setOutsideClickTargetRef
}, /*#__PURE__*/_react.default.createElement(_tabs.default, {
id: "media-insert-tab-navigation"
}, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
paddingBlockEnd: "space.150"
}, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, registeredTabs.map(function (tab) {
return /*#__PURE__*/_react.default.createElement(_tabs.Tab, {
key: tab.key
}, tab.label);
}), !isOnlyExternalLinks && /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.fileTabTitle)), /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.linkTabTitle)))), registeredTabs.map(function (_ref3) {
var key = _ref3.key,
TabComponent = _ref3.component;
return /*#__PURE__*/_react.default.createElement(CustomTabPanel, {
key: key,
disablePaddingBlockEnd: true
}, /*#__PURE__*/_react.default.createElement(TabComponent
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
closeMediaInsertPicker: function closeMediaInsertPicker() {
_closeMediaInsertPicker();
focusEditor();
},
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
insertMediaSingle: insertMediaSingle,
mediaProvider: mediaProvider
}));
}), !isOnlyExternalLinks && /*#__PURE__*/_react.default.createElement(CustomTabPanel, null, /*#__PURE__*/_react.default.createElement(_LocalMedia.LocalMedia, {
ref: autofocusRef,
mediaProvider: mediaProvider
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
closeMediaInsertPicker: function closeMediaInsertPicker() {
_closeMediaInsertPicker();
focusEditor();
},
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
insertFile: insertFile
})), /*#__PURE__*/_react.default.createElement(CustomTabPanel, null, /*#__PURE__*/_react.default.createElement(_MediaFromURL.MediaFromURL, {
mediaProvider: mediaProvider,
dispatchAnalyticsEvent: dispatchAnalyticsEvent
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
closeMediaInsertPicker: function closeMediaInsertPicker() {
_closeMediaInsertPicker();
focusEditor();
},
insertMediaSingle: insertMediaSingle,
insertExternalMediaSingle: insertExternalMediaSingle,
isOnlyExternalLinks: isOnlyExternalLinks,
customizedUrlValidation: customizedUrlValidation,
customizedHelperMessage: customizedHelperMessage
}))));
}));
};