@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
240 lines (237 loc) • 10.2 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React, { Fragment } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { container, containerWithProvider, inputWrapper, RecentSearch } from '@atlaskit/editor-common/link';
import { mediaLinkToolbarMessages } from '@atlaskit/editor-common/media';
import { linkToolbarMessages } from '@atlaskit/editor-common/messages';
import { FloatingToolbarButton as Button, ErrorMessage, FloatingToolbarSeparator as Separator,
// Common Translations will live here
PanelTextInput } from '@atlaskit/editor-common/ui';
import { normalizeUrl } from '@atlaskit/editor-common/utils';
import ChevronLeftLargeIcon from '@atlaskit/icon/core/chevron-left';
import EditorUnlinkIcon from '@atlaskit/icon/core/link-broken';
var validationWrapper = css({
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: 0,
padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-300, 24px)", " ", "var(--ds-space-150, 12px)", " 0"),
margin: "0 ".concat("var(--ds-space-050, 4px)", " 0 ", "var(--ds-space-400, 32px)"),
borderTop: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-danger, #E2483D)"),
alignItems: 'start',
display: 'flex',
flexDirection: 'column'
});
var buttonWrapper = css({
padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)", " 0px")
});
// eslint-disable-next-line @repo/internal/react/no-class-components
var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
function LinkAddToolbar() {
var _this;
_classCallCheck(this, LinkAddToolbar);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, LinkAddToolbar, [].concat(args));
_defineProperty(_this, "state", {
validationErrors: []
});
_defineProperty(_this, "handleSubmit", function (_ref) {
var url = _ref.url,
inputMethod = _ref.inputMethod;
_this.props.onSubmit(url, {
inputMethod: inputMethod
});
});
_defineProperty(_this, "handleOnBack", function (_ref2, setFocus) {
var url = _ref2.url,
inputMethod = _ref2.inputMethod;
var onBack = _this.props.onBack;
if (onBack) {
onBack(url, {
inputMethod: inputMethod
}, setFocus);
}
});
_defineProperty(_this, "handleCancel", function () {
var onCancel = _this.props.onCancel;
if (onCancel) {
onCancel();
}
});
_defineProperty(_this, "handleUnlink", function (setFocus) {
var onUnlink = _this.props.onUnlink;
if (onUnlink) {
onUnlink(setFocus);
}
});
_defineProperty(_this, "handleOnBlur", function (options) {
_this.props.onBlur(options.url);
});
_defineProperty(_this, "renderContainer", function (_ref3) {
var activityProvider = _ref3.activityProvider,
_ref3$inputProps = _ref3.inputProps,
_onChange = _ref3$inputProps.onChange,
onKeyDown = _ref3$inputProps.onKeyDown,
_onSubmit = _ref3$inputProps.onSubmit,
value = _ref3$inputProps.value,
currentInputMethod = _ref3.currentInputMethod,
renderRecentList = _ref3.renderRecentList;
var _this$props = _this.props,
formatMessage = _this$props.intl.formatMessage,
displayUrl = _this$props.displayUrl;
var getPlaceholder = function getPlaceholder(hasActivityProvider) {
return formatMessage(hasActivityProvider ? linkToolbarMessages.placeholder : linkToolbarMessages.linkPlaceholder);
};
var formatLinkAddressText = formatMessage(mediaLinkToolbarMessages.backLink);
var formatUnlinkText = formatMessage(linkToolbarMessages.unlink);
var errorsList = _this.state.validationErrors.map(function (error, index) {
// Ignored via go/ees005
// eslint-disable-next-line react/no-array-index-key
return jsx(ErrorMessage, {
key: index
}, error);
});
return (
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
jsx("div", {
className: "recent-list"
}, jsx("div", {
css: [container, !!activityProvider && containerWithProvider]
}, jsx("div", {
css: inputWrapper
}, jsx("span", {
css: buttonWrapper
}, jsx(Button, {
title: formatLinkAddressText,
icon: jsx(ChevronLeftLargeIcon, {
label: formatLinkAddressText,
size: "small"
})
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onClick: function onClick() {
return _this.handleOnBack({
url: value,
inputMethod: currentInputMethod
});
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onKeyDown: function onKeyDown(event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
_this.handleOnBack({
url: value,
inputMethod: currentInputMethod
}, true);
}
},
areAnyNewToolbarFlagsEnabled: _this.props.areAnyNewToolbarFlagsEnabled
})), jsx(PanelTextInput, {
inputId: "media-link-search-input",
testId: "media-link-input",
placeholder: getPlaceholder(!!activityProvider),
autoFocus: true,
onCancel: _this.handleCancel,
defaultValue: value
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onSubmit: function onSubmit(inputValue) {
var validationErrors = _this.getValidationErrors(inputValue, currentInputMethod);
_this.setState({
validationErrors: validationErrors
});
if (!validationErrors.length) {
_onSubmit();
}
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onChange: function onChange(value) {
_this.setState({
validationErrors: []
});
_onChange(value);
},
onKeyDown: onKeyDown
}), jsx("label", {
className: "assistive",
htmlFor: "media-link-search-input"
}, formatMessage(linkToolbarMessages.searchInput)), normalizeUrl(displayUrl) && jsx(Fragment, null, jsx(Separator, {
areAnyNewToolbarFlagsEnabled: _this.props.areAnyNewToolbarFlagsEnabled
}), jsx(Button, {
title: formatUnlinkText,
icon: jsx(EditorUnlinkIcon, {
label: formatUnlinkText
})
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onClick: function onClick() {
return _this.handleUnlink();
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onKeyDown: function onKeyDown(event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
_this.handleUnlink(true);
}
},
areAnyNewToolbarFlagsEnabled: _this.props.areAnyNewToolbarFlagsEnabled
}))), !!errorsList.length && jsx("section", {
css: validationWrapper
}, errorsList), renderRecentList()))
);
});
return _this;
}
_inherits(LinkAddToolbar, _React$PureComponent);
return _createClass(LinkAddToolbar, [{
key: "getValidationErrors",
value: function getValidationErrors(value, inputMethod) {
var formatMessage = this.props.intl.formatMessage;
// dont show validation errors if input method is typeahed, which means user selects from search list
if (inputMethod === INPUT_METHOD.TYPEAHEAD) {
return [];
}
if (!value) {
return [formatMessage(linkToolbarMessages.emptyLink)];
}
// if url can be normalized - we consider it is a valid url
// also don't show validaition errors for empty values
if (normalizeUrl(value)) {
return [];
} else {
return [formatMessage(linkToolbarMessages.invalidLink)];
}
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
providerFactory = _this$props2.providerFactory,
displayUrl = _this$props2.displayUrl;
return jsx(RecentSearch, {
defaultUrl: normalizeUrl(displayUrl),
providerFactory: providerFactory,
onSubmit: this.handleSubmit,
onBlur: this.handleOnBlur,
render: this.renderContainer
});
}
}]);
}(React.PureComponent);
export default LinkAddToolbar;