@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
244 lines (241 loc) • 11.8 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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _analytics = require("@atlaskit/editor-common/analytics");
var _link = require("@atlaskit/editor-common/link");
var _media = require("@atlaskit/editor-common/media");
var _messages = require("@atlaskit/editor-common/messages");
var _ui = require("@atlaskit/editor-common/ui");
var _utils = require("@atlaskit/editor-common/utils");
var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/core/chevron-left"));
var _linkBroken = _interopRequireDefault(require("@atlaskit/icon/core/link-broken"));
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); }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
var validationWrapper = (0, _react2.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 = (0, _react2.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;
(0, _classCallCheck2.default)(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));
(0, _defineProperty2.default)(_this, "state", {
validationErrors: []
});
(0, _defineProperty2.default)(_this, "handleSubmit", function (_ref) {
var url = _ref.url,
inputMethod = _ref.inputMethod;
_this.props.onSubmit(url, {
inputMethod: inputMethod
});
});
(0, _defineProperty2.default)(_this, "handleOnBack", function (_ref2, setFocus) {
var url = _ref2.url,
inputMethod = _ref2.inputMethod;
var onBack = _this.props.onBack;
if (onBack) {
onBack(url, {
inputMethod: inputMethod
}, setFocus);
}
});
(0, _defineProperty2.default)(_this, "handleCancel", function () {
var onCancel = _this.props.onCancel;
if (onCancel) {
onCancel();
}
});
(0, _defineProperty2.default)(_this, "handleUnlink", function (setFocus) {
var onUnlink = _this.props.onUnlink;
if (onUnlink) {
onUnlink(setFocus);
}
});
(0, _defineProperty2.default)(_this, "handleOnBlur", function (options) {
_this.props.onBlur(options.url);
});
(0, _defineProperty2.default)(_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 ? _messages.linkToolbarMessages.placeholder : _messages.linkToolbarMessages.linkPlaceholder);
};
var formatLinkAddressText = formatMessage(_media.mediaLinkToolbarMessages.backLink);
var formatUnlinkText = formatMessage(_messages.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 (0, _react2.jsx)(_ui.ErrorMessage, {
key: index
}, error);
});
return (
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
(0, _react2.jsx)("div", {
className: "recent-list"
}, (0, _react2.jsx)("div", {
css: [_link.container, !!activityProvider && _link.containerWithProvider]
}, (0, _react2.jsx)("div", {
css: _link.inputWrapper
}, (0, _react2.jsx)("span", {
css: buttonWrapper
}, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
title: formatLinkAddressText,
icon: (0, _react2.jsx)(_chevronLeft.default, {
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
})), (0, _react2.jsx)(_ui.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
}), (0, _react2.jsx)("label", {
className: "assistive",
htmlFor: "media-link-search-input"
}, formatMessage(_messages.linkToolbarMessages.searchInput)), (0, _utils.normalizeUrl)(displayUrl) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ui.FloatingToolbarSeparator, {
areAnyNewToolbarFlagsEnabled: _this.props.areAnyNewToolbarFlagsEnabled
}), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
title: formatUnlinkText,
icon: (0, _react2.jsx)(_linkBroken.default, {
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 && (0, _react2.jsx)("section", {
css: validationWrapper
}, errorsList), renderRecentList()))
);
});
return _this;
}
(0, _inherits2.default)(LinkAddToolbar, _React$PureComponent);
return (0, _createClass2.default)(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 === _analytics.INPUT_METHOD.TYPEAHEAD) {
return [];
}
if (!value) {
return [formatMessage(_messages.linkToolbarMessages.emptyLink)];
}
// if url can be normalized - we consider it is a valid url
// also don't show validaition errors for empty values
if ((0, _utils.normalizeUrl)(value)) {
return [];
} else {
return [formatMessage(_messages.linkToolbarMessages.invalidLink)];
}
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
providerFactory = _this$props2.providerFactory,
displayUrl = _this$props2.displayUrl;
return (0, _react2.jsx)(_link.RecentSearch, {
defaultUrl: (0, _utils.normalizeUrl)(displayUrl),
providerFactory: providerFactory,
onSubmit: this.handleSubmit,
onBlur: this.handleOnBlur,
render: this.renderContainer
});
}
}]);
}(_react.default.PureComponent);
var _default = exports.default = LinkAddToolbar;