@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
279 lines (276 loc) • 14 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.MAX_ALT_TEXT_LENGTH = exports.AltTextEditComponent = 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 = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _analyticsNext = require("@atlaskit/analytics-next");
var _analytics = require("@atlaskit/editor-common/analytics");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _media = require("@atlaskit/editor-common/media");
var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
var _ui = require("@atlaskit/editor-common/ui");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/core/chevron-left"));
var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
var _commands = require("../commands");
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 MAX_ALT_TEXT_LENGTH = exports.MAX_ALT_TEXT_LENGTH = 510; // double tweet length
var supportTextStyles = (0, _react2.css)({
color: "var(--ds-text-subtlest, #6B6E76)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(12),
padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-500, 40px)"),
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: '20px',
borderTop: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
margin: 0
});
var containerStyles = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
width: "".concat(_ui.RECENT_SEARCH_WIDTH_IN_PX, "px"),
display: 'flex',
flexDirection: 'column',
overflow: 'auto',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: 2
});
var inputWrapperStyles = (0, _react2.css)({
display: 'flex',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: 0,
padding: "var(--ds-space-075, 6px)".concat(" 0"),
alignItems: 'center'
});
var validationWrapperStyles = (0, _react2.css)({
display: 'flex',
// 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-150, 12px)", " 0 ", "var(--ds-space-500, 40px)"),
borderTop: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-danger, #E2483D)"),
alignItems: 'start',
flexDirection: 'column'
});
var buttonWrapperStyles = (0, _react2.css)({
display: 'flex',
padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)")
});
var clearTextStyles = (0, _react2.css)({
color: "var(--ds-icon-subtle, #505258)"
});
// eslint-disable-next-line @repo/internal/react/no-class-components
var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
function AltTextEditComponent(props) {
var _this;
(0, _classCallCheck2.default)(this, AltTextEditComponent);
_this = _callSuper(this, AltTextEditComponent, [props]);
(0, _defineProperty2.default)(_this, "state", {
showClearTextButton: Boolean(_this.props.value),
validationErrors: _this.props.value ? _this.getValidationErrors(_this.props.value) : [],
lastValue: _this.props.value
});
(0, _defineProperty2.default)(_this, "closeMediaAltTextMenu", function () {
var view = _this.props.view;
if (_this.state.validationErrors.length === 0) {
(0, _commands.closeMediaAltTextMenuAndSave)(_this.state.lastValue || '')(view.state, view.dispatch);
} else {
(0, _commands.closeMediaAltTextMenu)(view.state, view.dispatch);
}
});
(0, _defineProperty2.default)(_this, "closeMediaAltTextMenuAndSetFocus", function () {
var _this$props$onEnter, _this$props;
_this.closeMediaAltTextMenu();
(_this$props$onEnter = (_this$props = _this.props).onEnter) === null || _this$props$onEnter === void 0 || _this$props$onEnter.call(_this$props);
});
(0, _defineProperty2.default)(_this, "dispatchCancelEvent", function (event) {
var _this$props2 = _this.props,
view = _this$props2.view,
onEscape = _this$props2.onEscape;
// We need to pass down the ESCAPE keymap
// because when we focus on the Toolbar, Prosemirror blur,
// making all keyboard shortcuts not working
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
view.someProp('handleKeyDown', function (fn) {
return fn(view, event);
});
onEscape === null || onEscape === void 0 || onEscape();
});
(0, _defineProperty2.default)(_this, "handleOnChange", function (newAltText) {
var _this$state;
var validationErrors = _this.getValidationErrors(newAltText);
if (((_this$state = _this.state) === null || _this$state === void 0 || (_this$state = _this$state.validationErrors) === null || _this$state === void 0 ? void 0 : _this$state.length) !== (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.length)) {
// If number of errors was changed we need to reset attribute to get new SR announcement
if (_this.errorsListRef) {
var _this$errorsListRef;
var errorsArea = (_this$errorsListRef = _this.errorsListRef) === null || _this$errorsListRef === void 0 ? void 0 : _this$errorsListRef.current;
errorsArea === null || errorsArea === void 0 || errorsArea.removeAttribute('aria-live');
errorsArea === null || errorsArea === void 0 || errorsArea.setAttribute('aria-live', 'assertive');
}
}
_this.setState({
showClearTextButton: Boolean(newAltText),
validationErrors: validationErrors,
lastValue: newAltText
});
});
(0, _defineProperty2.default)(_this, "handleOnBlur", function (e) {
var _this$props$areAnyNew;
// prevent other selection transaction gets triggered
e.stopPropagation();
if ((_this$props$areAnyNew = _this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew !== void 0 ? _this$props$areAnyNew : (0, _toolbarFlagCheck.areToolbarFlagsEnabled)()) {
_this.closeMediaAltTextMenuAndSetFocus();
} else {
_this.closeMediaAltTextMenu();
}
});
(0, _defineProperty2.default)(_this, "handleClearText", function () {
_this.handleOnChange('');
});
var createAnalyticsEvent = props.createAnalyticsEvent;
_this.fireCustomAnalytics = (0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent);
_this.errorsListRef = /*#__PURE__*/_react.default.createRef();
return _this;
}
(0, _inherits2.default)(AltTextEditComponent, _React$Component);
return (0, _createClass2.default)(AltTextEditComponent, [{
key: "componentDidMount",
value: function componentDidMount() {
this.prevValue = this.props.value;
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.fireAnalytics(_analytics.ACTION.CLOSED);
if (!this.prevValue && this.state.lastValue) {
this.fireAnalytics(_analytics.ACTION.ADDED);
}
if (this.prevValue && !this.state.lastValue) {
this.fireAnalytics(_analytics.ACTION.CLEARED);
}
if (this.prevValue && this.prevValue !== this.state.lastValue) {
this.fireAnalytics(_analytics.ACTION.EDITED);
}
}
}, {
key: "getValidationErrors",
value: function getValidationErrors(value) {
var altTextValidator = this.props.altTextValidator;
if (value && typeof altTextValidator === 'function') {
return altTextValidator(value) || [];
}
return [];
}
}, {
key: "render",
value: function render() {
var _this$props$areAnyNew2, _this$props$areAnyNew3, _this$props$areAnyNew4;
var formatMessage = this.props.intl.formatMessage;
var showClearTextButton = this.state.showClearTextButton;
var backButtonMessage = formatMessage(_media.altTextMessages.back);
var backButtonMessageComponent = (0, _react2.jsx)(_keymaps.ToolTipContent, {
description: backButtonMessage,
keymap: _keymaps.escape,
shortcutOverride: "Esc"
});
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);
});
var hasErrors = !!errorsList.length;
var onSubmit = ((_this$props$areAnyNew2 = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew2 !== void 0 ? _this$props$areAnyNew2 : (0, _toolbarFlagCheck.areToolbarFlagsEnabled)()) ? this.closeMediaAltTextMenuAndSetFocus : this.closeMediaAltTextMenu;
return (0, _react2.jsx)("div", {
css: containerStyles
}, (0, _react2.jsx)("section", {
css: inputWrapperStyles
}, (0, _react2.jsx)("div", {
css: buttonWrapperStyles
}, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
title: formatMessage(_media.altTextMessages.back),
icon: (0, _react2.jsx)(_chevronLeft.default, {
label: formatMessage(_media.altTextMessages.back),
size: "small"
}),
tooltipContent: backButtonMessageComponent,
onClick: this.closeMediaAltTextMenu,
areAnyNewToolbarFlagsEnabled: (_this$props$areAnyNew3 = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew3 !== void 0 ? _this$props$areAnyNew3 : (0, _toolbarFlagCheck.areToolbarFlagsEnabled)()
})), (0, _react2.jsx)(_ui.PanelTextInput, {
testId: "alt-text-input",
ariaLabel: formatMessage(_media.altTextMessages.placeholder),
describedById: "".concat(hasErrors ? 'errors-list' : '', " support-text"),
placeholder: formatMessage(_media.altTextMessages.placeholder),
defaultValue: this.state.lastValue,
onCancel: this.dispatchCancelEvent,
onChange: this.handleOnChange,
onBlur: this.handleOnBlur,
onSubmit: onSubmit,
maxLength: MAX_ALT_TEXT_LENGTH,
ariaRequired: true,
ariaInvalid: hasErrors,
autoFocus: true
}), showClearTextButton && (0, _react2.jsx)("div", {
css: buttonWrapperStyles
}, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
testId: "alt-text-clear-button",
title: formatMessage(_media.altTextMessages.clear),
icon: (0, _react2.jsx)("span", {
css: clearTextStyles
}, (0, _react2.jsx)(_crossCircle.default, {
label: formatMessage(_media.altTextMessages.clear)
})),
tooltipContent: formatMessage(_media.altTextMessages.clear),
onClick: this.handleClearText,
areAnyNewToolbarFlagsEnabled: (_this$props$areAnyNew4 = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew4 !== void 0 ? _this$props$areAnyNew4 : (0, _toolbarFlagCheck.areToolbarFlagsEnabled)()
}))), hasErrors && (0, _react2.jsx)("section", {
id: "errors-list",
ref: this.errorsListRef,
"aria-live": "assertive",
css: validationWrapperStyles
}, errorsList), (0, _react2.jsx)("p", {
css: supportTextStyles,
id: "support-text"
}, formatMessage(_media.altTextMessages.supportText)));
}
}, {
key: "fireAnalytics",
value: function fireAnalytics(actionType) {
var _this$props3 = this.props,
createAnalyticsEvent = _this$props3.createAnalyticsEvent,
nodeType = _this$props3.nodeType,
mediaType = _this$props3.mediaType;
if (createAnalyticsEvent && this.fireCustomAnalytics) {
this.fireCustomAnalytics({
payload: {
action: actionType,
actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.ALT_TEXT,
eventType: _analytics.EVENT_TYPE.TRACK,
attributes: {
type: nodeType,
mediaType: mediaType
}
}
});
}
}
}]);
}(_react.default.Component);
var _default_1 = (0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntl.injectIntl)(AltTextEditComponent));
var _default = exports.default = _default_1;