@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
214 lines (210 loc) • 12 kB
JavaScript
import { activateVideoControls, bindKeymapWithCommand, decreaseMediaSize, enter, increaseMediaSize, insertNewLine, moveDown, moveLeft, moveRight, tab, undo } from '@atlaskit/editor-common/keymaps';
import { mediaResizeAnnouncerMessMessages as mediaResizeAnnouncerMess } from '@atlaskit/editor-common/media';
import { calcMediaSingleMaxWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
import { keymap } from '@atlaskit/editor-prosemirror/keymap';
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
import { insertAndSelectCaptionFromMediaSinglePos, selectCaptionFromMediaSinglePos } from '../pm-plugins/commands/captions';
import { stateKey } from '../pm-plugins/plugin-key';
import { updateMediaSingleWidth } from '../ui/toolbar/commands';
import { calcNewLayout, getSelectedMediaSingle } from '../ui/toolbar/utils';
function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, widthPlugin, getIntl) {
var list = {};
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
bindKeymapWithCommand(undo.common, ignoreLinksInSteps, list);
if (options !== null && options !== void 0 && options.allowCaptions) {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
bindKeymapWithCommand(moveDown.common, insertAndSelectCaption(editorAnalyticsAPI), list);
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
bindKeymapWithCommand(tab.common, insertAndSelectCaption(editorAnalyticsAPI), list);
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
bindKeymapWithCommand(moveLeft.common, arrowLeftFromMediaSingle(editorSelectionAPI), list);
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
bindKeymapWithCommand(moveRight.common, arrowRightFromMediaSingle(editorSelectionAPI), list);
}
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
bindKeymapWithCommand(insertNewLine.common, splitMediaGroup, list);
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
bindKeymapWithCommand(enter.common, splitMediaGroup, list);
if (options !== null && options !== void 0 && options.allowPixelResizing) {
bindKeymapWithCommand(
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
increaseMediaSize.common, handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
bindKeymapWithCommand(
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
decreaseMediaSize.common, handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
}
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
bindKeymapWithCommand(activateVideoControls.common, focusPlayButton, list);
return keymap(list);
}
var ignoreLinksInSteps = function ignoreLinksInSteps(state) {
var mediaPluginState = stateKey.getState(state);
mediaPluginState.ignoreLinks = true;
return false;
};
var splitMediaGroup = function splitMediaGroup(state) {
var mediaPluginState = stateKey.getState(state);
return mediaPluginState.splitMediaGroup();
};
var focusPlayButton = function focusPlayButton(state) {
var _stateKey$getState;
var videoControlsWrapperRef = (_stateKey$getState = stateKey.getState(state)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.element;
if (videoControlsWrapperRef) {
var firstButton = videoControlsWrapperRef === null || videoControlsWrapperRef === void 0 ? void 0 : videoControlsWrapperRef.querySelector('button, [tabindex]:not([tabindex="-1"])');
firstButton === null || firstButton === void 0 || firstButton.focus();
}
return true;
};
var validationMaxMin = function validationMaxMin(newWidth, maxWidth, minWidth, validation) {
var newWidthValidated;
if (newWidth > maxWidth) {
newWidthValidated = maxWidth;
validation = 'greater-than-max';
} else if (newWidth < minWidth) {
newWidthValidated = minWidth;
validation = 'less-than-min';
} else {
newWidthValidated = newWidth;
validation = 'valid';
}
return {
newWidthValidated: newWidthValidated,
validation: validation
};
};
var createAnnouncer = function createAnnouncer(action, mediaWidth, changeAmount, validation, getIntl) {
var announcerContainer = document.getElementById('media-announcer') || document.createElement('div');
var intl = getIntl();
if (!announcerContainer.id) {
announcerContainer.id = 'media-announcer';
announcerContainer.setAttribute('role', 'status');
announcerContainer.setAttribute('aria-live', 'polite');
announcerContainer.setAttribute('aria-atomic', 'true');
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var style = announcerContainer.style;
style.position = 'absolute';
style.width = '1px';
style.height = '1px';
style.marginTop = '-1px';
style.opacity = '0';
style.overflow = 'hidden';
document.body.appendChild(announcerContainer);
} else {
var newMediaWidth = mediaWidth + changeAmount;
if (validation === 'greater-than-max') {
announcerContainer.textContent = intl.formatMessage(mediaResizeAnnouncerMess.MediaWidthIsMax);
} else if (validation === 'less-than-min') {
announcerContainer.textContent = intl.formatMessage(mediaResizeAnnouncerMess.MediaWidthIsMin);
} else {
announcerContainer.textContent = intl.formatMessage(action === 'increased' ? mediaResizeAnnouncerMess.DefaultMediaWidthIncreased : mediaResizeAnnouncerMess.DefaultMediaWidthDecreased, {
newMediaWidth: newMediaWidth
});
}
}
};
var handleMediaSizeChange = function handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, changeAmount, action, getIntl) {
return function (state, dispatch) {
var _getSelectedMediaSing, _widthPlugin$sharedSt, _widthPlugin$sharedSt2, _getSelectedMediaSing2;
var selection = state.selection;
if (!(selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle')) {
return false;
}
var mediaWidth = (_getSelectedMediaSing = getSelectedMediaSingle(state)) === null || _getSelectedMediaSing === void 0 || (_getSelectedMediaSing = _getSelectedMediaSing.node) === null || _getSelectedMediaSing === void 0 || (_getSelectedMediaSing = _getSelectedMediaSing.attrs) === null || _getSelectedMediaSing === void 0 ? void 0 : _getSelectedMediaSing.width;
var contentWidth = (widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength) || akEditorDefaultLayoutWidth;
var mediaPluginState = stateKey.getState(state);
var maxWidthForNestedNode = mediaPluginState.currentMaxWidth;
var minWidth = MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH;
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var maxWidth = maxWidthForNestedNode;
var currentMaxWidth = (widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.width) || maxWidth;
if (maxWidth === undefined && maxWidthForNestedNode === undefined) {
var _widthPlugin$sharedSt3;
maxWidth = options !== null && options !== void 0 && options.fullWidthEnabled ? widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.lineLength : calcMediaSingleMaxWidth(currentMaxWidth, options === null || options === void 0 ? void 0 : options.editorAppearance);
}
var validation = 'valid';
var newWidth = mediaWidth + changeAmount;
if (options !== null && options !== void 0 && options.fullWidthEnabled) {
var _widthPlugin$sharedSt4;
maxWidth = widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt4 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt4 === void 0 ? void 0 : _widthPlugin$sharedSt4.lineLength;
} else if (maxWidthForNestedNode === undefined) {
maxWidth = calcMediaSingleMaxWidth(currentMaxWidth, options === null || options === void 0 ? void 0 : options.editorAppearance);
}
var _validationMaxMin = validationMaxMin(newWidth, maxWidth, minWidth, validation),
newWidthValidated = _validationMaxMin.newWidthValidated,
validationResult = _validationMaxMin.validation;
var newLayout = calcNewLayout(newWidthValidated, (_getSelectedMediaSing2 = getSelectedMediaSingle(state)) === null || _getSelectedMediaSing2 === void 0 || (_getSelectedMediaSing2 = _getSelectedMediaSing2.node) === null || _getSelectedMediaSing2 === void 0 || (_getSelectedMediaSing2 = _getSelectedMediaSing2.attrs) === null || _getSelectedMediaSing2 === void 0 ? void 0 : _getSelectedMediaSing2.layout, contentWidth, options === null || options === void 0 ? void 0 : options.fullWidthEnabled);
updateMediaSingleWidth(editorAnalyticsAPI)(newWidthValidated, validationResult, 'keyboard', newLayout)(state, dispatch);
createAnnouncer(action, mediaWidth, changeAmount, validationResult, getIntl);
return true;
};
};
var handleMediaIncrease = function handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl) {
return handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, 1, 'increased', getIntl);
};
var handleMediaDecrease = function handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl) {
return handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, -1, 'decreased', getIntl);
};
var insertAndSelectCaption = function insertAndSelectCaption(editorAnalyticsAPI) {
return function (state, dispatch) {
var selection = state.selection,
schema = state.schema;
if (selection instanceof NodeSelection && selection.node.type === schema.nodes.mediaSingle && schema.nodes.caption) {
if (dispatch) {
var from = selection.from,
node = selection.node;
if (!insertAndSelectCaptionFromMediaSinglePos(editorAnalyticsAPI)(from, node)(state, dispatch)) {
selectCaptionFromMediaSinglePos(from, node)(state, dispatch);
}
}
return true;
}
return false;
};
};
var arrowLeftFromMediaSingle = function arrowLeftFromMediaSingle(editorSelectionAPI) {
return function (state, dispatch) {
var selection = state.selection;
if (editorSelectionAPI && selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
var tr = editorSelectionAPI.selectNearNode({
selectionRelativeToNode: undefined,
selection: new GapCursorSelection(state.doc.resolve(selection.from), Side.LEFT)
})(state);
if (dispatch) {
dispatch(tr);
}
return true;
}
return false;
};
};
var arrowRightFromMediaSingle = function arrowRightFromMediaSingle(editorSelectionAPI) {
return function (state, dispatch) {
var selection = state.selection;
if (editorSelectionAPI && selection instanceof NodeSelection && selection.node.type.name === 'mediaSingle') {
var tr = editorSelectionAPI.selectNearNode({
selectionRelativeToNode: undefined,
selection: new GapCursorSelection(state.doc.resolve(selection.to), Side.RIGHT)
})(state);
if (dispatch) {
dispatch(tr);
}
return true;
}
return false;
};
};
export default keymapPlugin;