@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
175 lines (172 loc) • 10.6 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.wrappingIcons = exports.layoutToMessages = exports.default = exports.alignmentIcons = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _state = require("@atlaskit/editor-prosemirror/state");
var _utils = require("@atlaskit/editor-prosemirror/utils");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _alignImageCenter = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-center"));
var _alignImageLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-left"));
var _alignImageRight = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-right"));
var _mediaFullWidth = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-full-width"));
var _mediaWide = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-wide"));
var _mediaWrapLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-wrap-left"));
var _mediaWrapRight = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-wrap-right"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _analytics = require("../../analytics");
var _coreUtils = require("../../core-utils");
var _messages = _interopRequireWildcard(require("../../messages"));
var _utils2 = require("../../utils");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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) { (0, _defineProperty2.default)(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; }
// Workaround as we don't want to import this package into `editor-common`
// We'll get type errors if this gets out of sync with `editor-plugin-width`.
var alignmentIcons = exports.alignmentIcons = [{
id: 'editor.media.alignLeft',
value: 'align-start',
icon: _alignImageLeft.default
}, {
id: 'editor.media.alignCenter',
value: 'center',
icon: _alignImageCenter.default
}, {
id: 'editor.media.alignRight',
value: 'align-end',
icon: _alignImageRight.default
}];
var wrappingIcons = exports.wrappingIcons = [{
id: 'editor.media.wrapLeft',
value: 'wrap-left',
icon: _mediaWrapLeft.default
}, {
id: 'editor.media.wrapRight',
value: 'wrap-right',
icon: _mediaWrapRight.default
}];
var breakoutIcons = [{
value: 'wide',
icon: _mediaWide.default
}, {
value: 'full-width',
icon: _mediaFullWidth.default
}];
var layoutToMessages = exports.layoutToMessages = {
'wrap-left': _messages.mediaAndEmbedToolbarMessages.wrapLeft,
center: _messages.default.alignImageCenter,
'wrap-right': _messages.mediaAndEmbedToolbarMessages.wrapRight,
wide: _messages.default.layoutWide,
'full-width': _messages.default.layoutFullWidth,
'align-end': _messages.default.alignImageRight,
'align-start': _messages.default.alignImageLeft
};
var getNodeWidth = function getNodeWidth(node, schema) {
var embedCard = schema.nodes.embedCard;
if (node.type === embedCard) {
return node.attrs.originalWidth || _editorSharedStyles.DEFAULT_EMBED_CARD_WIDTH;
}
return node.firstChild && node.firstChild.attrs.width || node.attrs.width;
};
var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, analyticsApi) {
return function (state, dispatch) {
var _ref = state.selection,
node = _ref.node;
var previousLayoutType = node.attrs.layout;
var mediaSingle = state.schema.nodes.mediaSingle;
if (!dispatch) {
return false;
}
var widthPluginState = widthPluginDependencyApi === null || widthPluginDependencyApi === void 0 ? void 0 : widthPluginDependencyApi.sharedState.currentState();
if (!node || node.type !== nodeType || !widthPluginState) {
return false;
}
var nodeWidth = getNodeWidth(node, state.schema);
var newAttrs = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? // with extended experience, change alignment does not change media single width
_objectSpread(_objectSpread({}, node.attrs), {}, {
layout: layout
}) : (0, _utils2.alignAttributes)(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
var tr = state.tr.setNodeMarkup(state.selection.from, undefined, newAttrs);
tr.setMeta('scrollIntoView', false);
// when image captions are enabled, the wrong node gets selected after
// setNodeMarkup is called
tr.setSelection(_state.NodeSelection.create(tr.doc, state.selection.from));
var paragraph = tr.doc.type.schema.nodes.paragraph;
// see https://product-fabric.atlassian.net/browse/ED-15518 insert a new paragraph when an embedded card is wrapped left or right
if (layout.startsWith('wrap') && paragraph && !tr.doc.nodeAt(state.selection.to) && ((0, _coreUtils.insideTable)(state) || (0, _utils2.isInLayoutColumn)(state))) {
var emptyParaghraph = paragraph.createAndFill();
if (emptyParaghraph) {
tr.insert(state.selection.to, emptyParaghraph);
}
}
analyticsApi === null || analyticsApi === void 0 || analyticsApi.attachAnalyticsEvent({
eventType: _analytics.EVENT_TYPE.TRACK,
action: _analytics.ACTION.SELECTED,
actionSubject: _analytics.ACTION_SUBJECT[node.type === mediaSingle ? 'MEDIA_SINGLE' : 'EMBEDS'],
actionSubjectId: _analytics.ACTION_SUBJECT_ID.RICH_MEDIA_LAYOUT,
attributes: {
previousLayoutType: previousLayoutType,
currentLayoutType: layout
}
})(tr);
dispatch(tr);
return true;
};
};
var getToolbarLayout = function getToolbarLayout(layout) {
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') && _utils2.nonWrappedLayouts.includes(layout)) {
return 'center';
}
return layout;
};
var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) {
return icons.map(function (toolbarItem) {
var id = toolbarItem.id,
value = toolbarItem.value;
return _objectSpread({
id: id,
type: 'button',
icon: toolbarItem.icon,
title: intl.formatMessage(layoutToMessages[value]),
selected: getToolbarLayout(layout) === value,
onClick: makeAlign(value, nodeType, widthPluginDependencyApi, analyticsApi)
}, isChangingLayoutDisabled && {
disabled: value !== 'center'
});
});
};
var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref2, allowResizingInTables) {
var nodes = _ref2.nodes;
return (0, _utils.hasParentNodeOfType)([nodes.bodiedExtension, nodes.extensionFrame, nodes.listItem, nodes.expand, nodes.nestedExpand].concat((0, _toConsumableArray2.default)(allowResizingInTables ? [] : [nodes.table])).filter(Boolean))(selection);
};
var buildLayoutButtons = function buildLayoutButtons(state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables) {
var allowWrapping = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
var allowAlignment = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
var isChangingLayoutDisabled = arguments.length > 9 ? arguments[9] : undefined;
var selection = state.selection;
if (!(selection instanceof _state.NodeSelection) || !selection.node || !nodeType || shouldHideLayoutToolbar(selection, state.schema, allowResizingInTables)) {
return [];
}
var layout = selection.node.attrs.layout;
var alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) : [];
var wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) : [];
var breakOutToolbarItems = !allowResizing ? mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
var items = [].concat((0, _toConsumableArray2.default)(alignmentToolbarItems), (0, _toConsumableArray2.default)(getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping)), (0, _toConsumableArray2.default)(wrappingToolbarItems), (0, _toConsumableArray2.default)(getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing)), (0, _toConsumableArray2.default)(breakOutToolbarItems));
return items;
};
var getSeparatorBetweenAlignmentAndWrapping = function getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping) {
return allowAlignment && allowWrapping ? [{
type: 'separator'
}] : [];
};
var getSeparatorBeforeBreakoutItems = function getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing) {
return !allowResizing && (allowAlignment || allowWrapping) ? [{
type: 'separator'
}] : [];
};
var _default = exports.default = buildLayoutButtons;