@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
142 lines (140 loc) • 8.64 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { useCallback } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { jsx } from '@emotion/react';
import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
import { hasParentNode } from '@atlaskit/editor-prosemirror/utils';
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
import { Text } from '@atlaskit/primitives/compiled';
import { updateMediaSingleWidthTr } from '../../../ui/toolbar/commands';
import { getPixelWidthOfElement, calcNewLayout } from '../../../ui/toolbar/utils';
import { isVideo } from '../../utils/media-single';
import { closePixelEditorAndSave } from '../commands';
import { PixelEntryComponent } from './pixel-entry';
import { pixelSizingFullWidthLabelStyles } from './styles';
export var PixelEntry = function PixelEntry(_ref) {
var _pluginInjectionApi$w, _pluginInjectionApi$m, _pluginInjectionApi$f;
var editorView = _ref.editorView,
selectedMediaSingleNode = _ref.selectedMediaSingleNode,
pluginInjectionApi = _ref.pluginInjectionApi,
intl = _ref.intl,
pluginState = _ref.pluginState,
hoverDecoration = _ref.hoverDecoration,
isEditorFullWidthEnabled = _ref.isEditorFullWidthEnabled,
triggerButtonSelector = _ref.triggerButtonSelector;
var state = editorView.state,
dispatch = editorView.dispatch;
var mediaSingle = state.schema.nodes.mediaSingle;
var contentWidth = (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width.sharedState.currentState()) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.lineLength) || akEditorDefaultLayoutWidth;
var _selectedMediaSingleN = selectedMediaSingleNode.node.attrs,
mediaSingleWidth = _selectedMediaSingleN.width,
widthType = _selectedMediaSingleN.widthType,
layout = _selectedMediaSingleN.layout;
// hasParentNode will return falsey value if selection depth === 0
var isNested = hasParentNode(function (n) {
return n.type !== state.schema.nodes.doc;
})(state.selection);
var updateNodeWithTr = useCallback(function (width, validation) {
var _pluginInjectionApi$a;
var newLayout = calcNewLayout(width, layout, contentWidth, isEditorFullWidthEnabled, isNested);
return updateMediaSingleWidthTr(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions, state, width, validation, 'floatingToolBar', newLayout);
}, [layout, contentWidth, isEditorFullWidthEnabled, isNested, state, pluginInjectionApi]);
var selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
if (!selectedMediaNode) {
return null;
}
var _selectedMediaNode$at = selectedMediaNode.attrs,
mediaWidth = _selectedMediaNode$at.width,
mediaHeight = _selectedMediaNode$at.height;
var maxWidthForNestedNode = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.media) === null || _pluginInjectionApi$m === void 0 || (_pluginInjectionApi$m = _pluginInjectionApi$m.sharedState.currentState()) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.currentMaxWidth;
var maxWidth = maxWidthForNestedNode || akEditorFullWidthLayoutWidth;
var isVideoFile = isVideo(selectedMediaNode.attrs.__fileMimeType);
var minWidth = calcMinWidth(isVideoFile, maxWidthForNestedNode || contentWidth);
var hasPixelType = widthType === 'pixel';
var pixelWidthFromElement = getPixelWidthOfElement(editorView, selectedMediaSingleNode.pos + 1,
// get pos of media node
mediaWidth || DEFAULT_IMAGE_WIDTH);
var pixelWidth = hasPixelType ? mediaSingleWidth : pixelWidthFromElement;
var forceFocusSelector = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector;
var areAnyNewToolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
return jsx(PixelEntryComponent, {
intl: intl,
width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
showMigration: !pluginState.isResizing && !hasPixelType,
mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
minWidth: minWidth,
maxWidth: maxWidth
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onChange: function onChange(valid) {
if (valid) {
hoverDecoration === null || hoverDecoration === void 0 || hoverDecoration(mediaSingle, true, 'warning')(editorView.state, dispatch, editorView);
} else {
hoverDecoration === null || hoverDecoration === void 0 || hoverDecoration(mediaSingle, false)(editorView.state, dispatch, editorView);
}
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onSubmit: function onSubmit(_ref2) {
var width = _ref2.width,
validation = _ref2.validation;
var tr = updateNodeWithTr(width, validation);
if (tr) {
dispatch(tr);
}
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onMigrate: function onMigrate() {
var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
width: pixelWidthFromElement,
widthType: 'pixel'
}));
tr.setMeta('scrollIntoView', false);
tr.setSelection(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
if (triggerButtonSelector) {
var newTr = forceFocusSelector && forceFocusSelector(triggerButtonSelector)(tr);
tr = newTr !== undefined ? newTr : tr;
}
dispatch(tr);
}
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onCloseAndSave: function onCloseAndSave(_ref3, setFocus) {
var width = _ref3.width,
validation = _ref3.validation;
var tr = updateNodeWithTr(width, validation);
if (setFocus && triggerButtonSelector) {
var newTr = forceFocusSelector && tr && forceFocusSelector(triggerButtonSelector)(tr);
tr = newTr !== undefined ? newTr : tr;
}
if (tr) {
return closePixelEditorAndSave(function () {
return tr;
})(state, dispatch);
}
},
isViewMode: pluginState.isResizing,
triggerButtonSelector: triggerButtonSelector,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
});
};
export var FullWidthDisplay = function FullWidthDisplay(_ref4) {
var formatMessage = _ref4.intl.formatMessage;
return (
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
jsx("div", {
css: pixelSizingFullWidthLabelStyles
}, jsx(Text, null, formatMessage(messages.fullWidthLabel)))
);
};