@atlaskit/editor-plugin-extension
Version:
editor-plugin-extension plugin for @atlaskit/editor-core
450 lines (438 loc) • 22.6 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
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; }
import React from 'react';
import { INPUT_METHOD, ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
import { messages, NATIVE_EMBED_EXTENSION_KEY, NATIVE_EMBED_EXTENSION_TYPE } from '@atlaskit/editor-common/extensions';
import commonMessages from '@atlaskit/editor-common/messages';
import { BODIED_EXT_MBE_MARGIN_TOP } from '@atlaskit/editor-common/styles';
import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
import { getChildrenInfo as _getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
import { findParentNodeOfType, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
import ContentWidthNarrowIcon from '@atlaskit/icon/core/content-width-narrow';
import ContentWidthWideIcon from '@atlaskit/icon/core/content-width-wide';
import DeleteIcon from '@atlaskit/icon/core/delete';
import EditIcon from '@atlaskit/icon/core/edit';
import ExpandHorizontalIcon from '@atlaskit/icon/core/expand-horizontal';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { editExtension } from '../editor-actions/actions';
import { removeDescendantNodes, removeExtension, updateExtensionLayout } from '../editor-commands/commands';
import { pluginKey as macroPluginKey } from './macro/plugin-key';
import { getPluginState } from './plugin-factory';
import { copyUnsupportedContentToClipboard, getSelectedExtension, onCopyFailed } from './utils';
// non-bodied extensions nested inside panels, blockquotes and lists do not support layouts
var isNestedNBM = function isNestedNBM(state, selectedExtNode) {
var _state$schema$nodes = state.schema.nodes,
extension = _state$schema$nodes.extension,
panel = _state$schema$nodes.panel,
blockquote = _state$schema$nodes.blockquote,
listItem = _state$schema$nodes.listItem,
selection = state.selection;
if (!selectedExtNode) {
return false;
}
return selectedExtNode.node.type === extension && hasParentNodeOfType([panel, blockquote, listItem].filter(Boolean))(selection);
};
var isLayoutSupported = function isLayoutSupported(state, selectedExtNode) {
var _state$schema$nodes2 = state.schema.nodes,
bodiedExtension = _state$schema$nodes2.bodiedExtension,
extension = _state$schema$nodes2.extension,
layoutSection = _state$schema$nodes2.layoutSection,
table = _state$schema$nodes2.table,
expand = _state$schema$nodes2.expand,
multiBodiedExtension = _state$schema$nodes2.multiBodiedExtension,
selection = state.selection;
if (!selectedExtNode) {
return false;
}
var isMultiBodiedExtension = selectedExtNode.node.type === multiBodiedExtension;
var isNonEmbeddedBodiedExtension = selectedExtNode.node.type === bodiedExtension && !hasParentNodeOfType([multiBodiedExtension].filter(Boolean))(selection);
var isNonEmbeddedExtension = selectedExtNode.node.type === extension && !hasParentNodeOfType([bodiedExtension, table, expand, multiBodiedExtension].filter(Boolean))(selection);
// if selection belongs to layout supported extension category
// and not inside a layoutSection
return !!((isMultiBodiedExtension || isNonEmbeddedBodiedExtension || isNonEmbeddedExtension) && !hasParentNodeOfType([layoutSection])(selection));
};
var breakoutButtonListOptions = function breakoutButtonListOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI) {
var nodeWithPos = getSelectedExtension(state, true);
// we should only return breakout options when breakouts are enabled and the node supports them
if (nodeWithPos && breakoutEnabled && isLayoutSupported(state, nodeWithPos) && !isNestedNBM(state, nodeWithPos)) {
var layout = nodeWithPos.node.attrs.layout;
return [{
type: 'button',
icon: function icon() {
return /*#__PURE__*/React.createElement(ContentWidthNarrowIcon, {
label: formatMessage(commonMessages.layoutFixedWidth),
spacing: "spacious"
});
},
iconFallback: ContentWidthNarrowIcon,
onClick: updateExtensionLayout('default', editorAnalyticsAPI),
selected: layout === 'default',
title: formatMessage(commonMessages.layoutFixedWidth),
tabIndex: null
}, {
type: 'button',
icon: function icon() {
return /*#__PURE__*/React.createElement(ContentWidthWideIcon, {
label: formatMessage(commonMessages.layoutWide),
spacing: "spacious"
});
},
iconFallback: ContentWidthWideIcon,
onClick: updateExtensionLayout('wide', editorAnalyticsAPI),
selected: layout === 'wide',
title: formatMessage(commonMessages.layoutWide),
tabIndex: null
}, {
type: 'button',
icon: function icon() {
return /*#__PURE__*/React.createElement(ExpandHorizontalIcon, {
label: formatMessage(commonMessages.layoutFullWidth),
spacing: "spacious"
});
},
iconFallback: ExpandHorizontalIcon,
onClick: updateExtensionLayout('full-width', editorAnalyticsAPI),
selected: layout === 'full-width',
title: formatMessage(commonMessages.layoutFullWidth),
tabIndex: null
}];
}
return [];
};
var breakoutDropdownOptions = function breakoutDropdownOptions(state, formatMessage, breakoutEnabled, editorAnalyticsAPI) {
var nodeWithPos = getSelectedExtension(state, true);
// we should only return breakout options when breakouts are enabled and the node supports them
if (!nodeWithPos || !breakoutEnabled || !isLayoutSupported(state, nodeWithPos) || isNestedNBM(state, nodeWithPos)) {
return [];
}
var layout = nodeWithPos.node.attrs.layout;
var title = '';
var IconComponent;
switch (layout) {
case 'wide':
title = formatMessage(commonMessages.layoutStateWide);
IconComponent = ContentWidthWideIcon;
break;
case 'full-width':
title = formatMessage(commonMessages.layoutStateFullWidth);
IconComponent = ExpandHorizontalIcon;
break;
case 'default':
default:
title = formatMessage(commonMessages.layoutStateFixedWidth);
IconComponent = ContentWidthNarrowIcon;
break;
}
var options = [{
id: 'editor.extensions.width.default',
title: formatMessage(commonMessages.layoutFixedWidth),
onClick: updateExtensionLayout('default', editorAnalyticsAPI),
selected: layout === 'default',
icon: /*#__PURE__*/React.createElement(ContentWidthNarrowIcon, {
color: "currentColor",
spacing: "spacious",
label: formatMessage(commonMessages.layoutFixedWidth)
})
}, {
id: 'editor.extensions.width.wide',
title: formatMessage(commonMessages.layoutWide),
onClick: updateExtensionLayout('wide', editorAnalyticsAPI),
selected: layout === 'wide',
icon: /*#__PURE__*/React.createElement(ContentWidthWideIcon, {
color: "currentColor",
spacing: "spacious",
label: formatMessage(commonMessages.layoutWide)
})
}, {
id: 'editor.extensions.width.full-width',
title: formatMessage(commonMessages.layoutFullWidth),
onClick: updateExtensionLayout('full-width', editorAnalyticsAPI),
selected: layout === 'full-width',
icon: /*#__PURE__*/React.createElement(ExpandHorizontalIcon, {
color: "currentColor",
spacing: "spacious",
label: formatMessage(commonMessages.layoutFullWidth)
})
}];
return [{
id: 'extensions-width-options-toolbar-item',
testId: 'extensions-width-options-toolbar-dropdown',
type: 'dropdown',
options: options,
title: title,
iconBefore: function iconBefore() {
return /*#__PURE__*/React.createElement(IconComponent, {
color: "currentColor",
spacing: "spacious",
label: title
});
}
}];
};
var breakoutOptions = function breakoutOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI, api) {
return areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) ? breakoutDropdownOptions(state, formatMessage, breakoutEnabled, editorAnalyticsAPI) : breakoutButtonListOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI);
};
var editButton = function editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI) {
var isDisabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
var api = arguments.length > 5 ? arguments[5] : undefined;
if (!extensionState.showEditButton) {
return [];
}
var toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
var editButtonItems = [{
id: 'editor.extension.edit',
type: 'button',
icon: EditIcon,
iconFallback: EditIcon,
testId: 'extension-toolbar-edit-button',
// Taking the latest `updateExtension` from plugin state to avoid race condition @see ED-8501
onClick: function onClick(state, dispatch, view) {
var macroState = macroPluginKey.getState(state);
var _getPluginState = getPluginState(state),
updateExtension = _getPluginState.updateExtension;
editExtension(macroState && macroState.macroProvider, applyChangeToContextPanel, editorAnalyticsAPI, updateExtension)(state, dispatch, view);
return true;
},
title: formatMessage(messages.edit),
tabIndex: null,
focusEditoronEnter: true,
disabled: isDisabled,
isRadioButton: expValEquals('platform_editor_august_a11y', 'isEnabled', true) ? false : undefined
}];
if (toolbarFlagsEnabled) {
editButtonItems.push({
type: 'separator',
fullHeight: true
});
}
return editButtonItems;
};
/**
* Calculates the position for the toolbar when dealing with nested extensions
* @param editorView
* @param nextPos
* @param state
* @param extensionNode
* @example
*/
var calculateToolbarPosition = function calculateToolbarPosition(editorView, nextPos, state, extensionNode) {
var _editorView$state = editorView.state,
schema = _editorView$state.schema,
selection = _editorView$state.selection;
var possibleMbeParent = findParentNodeOfType(schema.nodes.extensionFrame)(selection);
// We only want to use calculated position in case of a bodiedExtension present inside an MBE node
var isBodiedExtensionInsideMBE = possibleMbeParent && (extensionNode === null || extensionNode === void 0 ? void 0 : extensionNode.node.type.name) === 'bodiedExtension';
var scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
if (!extensionNode) {
return nextPos;
}
var isInsideEditableExtensionArea = !!editorView.dom.closest('.extension-editable-area');
if (!isBodiedExtensionInsideMBE && !isInsideEditableExtensionArea) {
return nextPos;
}
if (isInsideEditableExtensionArea && scrollWrapper.parentElement) {
// The editable extension area may have its own scroll wrapper, so we want to keep searching up the tree for the page level scroll wrapper.
scrollWrapper = scrollWrapper.parentElement.closest('.fabric-editor-popup-scroll-parent') || scrollWrapper;
}
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
var nestedBodiedExtensionDomElement = editorView.nodeDOM(extensionNode.pos);
var nestedBodiedExtensionRect = nestedBodiedExtensionDomElement === null || nestedBodiedExtensionDomElement === void 0 ? void 0 : nestedBodiedExtensionDomElement.getBoundingClientRect();
var wrapperBounds = scrollWrapper.getBoundingClientRect();
var toolbarTopPos = nestedBodiedExtensionRect.bottom - wrapperBounds.top + scrollWrapper.scrollTop + BODIED_EXT_MBE_MARGIN_TOP;
return {
top: toolbarTopPos,
left: nextPos.left
};
};
/**
* Creates a function that copies the text content of the unsupported content extension to the clipboard
* if the current selected extension is an unsupported content extension.
*/
export var createOnClickCopyButton = function createOnClickCopyButton(_ref) {
var formatMessage = _ref.formatMessage,
extensionApi = _ref.extensionApi,
extensionProvider = _ref.extensionProvider,
getUnsupportedContent = _ref.getUnsupportedContent,
state = _ref.state,
locale = _ref.locale;
if (!extensionProvider) {
return;
}
var nodeWithPos = getSelectedExtension(state, true);
if (!nodeWithPos) {
return;
}
var node = nodeWithPos.node;
var _node$attrs = node.attrs,
extensionType = _node$attrs.extensionType,
extensionKey = _node$attrs.extensionKey;
var extensionParams = {
type: node.type.name,
extensionKey: extensionKey,
extensionType: extensionType,
parameters: node.attrs.parameters,
content: node.content,
localId: node.attrs.localId
};
var adf = getUnsupportedContent === null || getUnsupportedContent === void 0 ? void 0 : getUnsupportedContent(extensionParams);
if (!adf) {
return;
}
// this command copies the text content of the unsupported content extension to the clipboard
return function (editorState) {
var _extensionApi$analyti;
extensionApi === null || extensionApi === void 0 || (_extensionApi$analyti = extensionApi.analytics) === null || _extensionApi$analyti === void 0 || _extensionApi$analyti.actions.fireAnalyticsEvent({
action: ACTION.CLICKED,
actionSubject: ACTION_SUBJECT.COPY_BUTTON,
eventType: EVENT_TYPE.UI,
actionSubjectId: ACTION_SUBJECT_ID.EXTENSION,
attributes: {
extensionDynamicType: node.type.name,
extensionType: node.attrs.extensionType,
extensionKey: node.attrs.extensionKey
}
});
copyUnsupportedContentToClipboard({
locale: locale,
unsupportedContent: adf,
schema: state.schema,
api: extensionApi
}).then(function () {
var _extensionApi$copyBut;
extensionApi === null || extensionApi === void 0 || (_extensionApi$copyBut = extensionApi.copyButton) === null || _extensionApi$copyBut === void 0 || _extensionApi$copyBut.actions.afterCopy(formatMessage(commonMessages.copiedToClipboard));
}).catch(function (error) {
onCopyFailed({
error: error,
extensionApi: extensionApi,
state: editorState
});
});
return true;
};
};
export var getToolbarConfig = function getToolbarConfig(_ref2) {
var _ref2$breakoutEnabled = _ref2.breakoutEnabled,
breakoutEnabled = _ref2$breakoutEnabled === void 0 ? true : _ref2$breakoutEnabled,
extensionApi = _ref2.extensionApi,
getUnsupportedContent = _ref2.getUnsupportedContent;
return function (state, intl) {
var _extensionApi$decorat, _extensionApi$context, _extensionApi$analyti2, _extensionApi$connect;
var formatMessage = intl.formatMessage,
locale = intl.locale;
var extensionState = getPluginState(state);
var extensionProvider = extensionState.extensionProvider;
var hoverDecoration = extensionApi === null || extensionApi === void 0 || (_extensionApi$decorat = extensionApi.decorations) === null || _extensionApi$decorat === void 0 ? void 0 : _extensionApi$decorat.actions.hoverDecoration;
var applyChangeToContextPanel = extensionApi === null || extensionApi === void 0 || (_extensionApi$context = extensionApi.contextPanel) === null || _extensionApi$context === void 0 ? void 0 : _extensionApi$context.actions.applyChange;
var editorAnalyticsAPI = extensionApi === null || extensionApi === void 0 || (_extensionApi$analyti2 = extensionApi.analytics) === null || _extensionApi$analyti2 === void 0 ? void 0 : _extensionApi$analyti2.actions;
if (!extensionState || extensionState.showContextPanel || !extensionState.element) {
return;
}
var nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension, state.schema.nodes.multiBodiedExtension];
var editButtonItems = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI, editorExperiment('platform_editor_offline_editing_web', true) && isOfflineMode(extensionApi === null || extensionApi === void 0 || (_extensionApi$connect = extensionApi.connectivity) === null || _extensionApi$connect === void 0 || (_extensionApi$connect = _extensionApi$connect.sharedState) === null || _extensionApi$connect === void 0 || (_extensionApi$connect = _extensionApi$connect.currentState()) === null || _extensionApi$connect === void 0 ? void 0 : _extensionApi$connect.mode), extensionApi);
var breakoutItems = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled, editorAnalyticsAPI, extensionApi);
var extensionObj = getSelectedExtension(state, true);
// If this is a native-embed extension, skip providing a toolbar config to allow
// the native-embed plugin to provide a custom toolbar config.
if ((extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node.attrs.extensionType) === NATIVE_EMBED_EXTENSION_TYPE && extensionObj !== null && extensionObj !== void 0 && extensionObj.node.attrs.extensionKey.includes(NATIVE_EMBED_EXTENSION_KEY)) {
return;
}
// Check if we need to show confirm dialog for delete button
var confirmDialog;
if (isReferencedSource(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)) {
confirmDialog = function confirmDialog() {
var localSourceName = formatMessage(messages.unnamedSource);
return {
title: formatMessage(messages.deleteElementTitle),
okButtonLabel: formatMessage(messages.confirmDeleteLinkedModalOKButton),
message: formatMessage(messages.confirmDeleteLinkedModalMessage, {
nodeName: getNodeName(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node) || localSourceName
}),
isReferentialityDialog: true,
getChildrenInfo: function getChildrenInfo() {
return _getChildrenInfo(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node);
},
checkboxLabel: formatMessage(messages.confirmModalCheckboxLabel),
onConfirm: function onConfirm() {
var isChecked = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
return clickWithCheckboxHandler(isChecked, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node);
}
};
};
}
// disable copy button for legacy content macro
var isLegacyContentMacro = (extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node.attrs.extensionType) === 'com.atlassian.confluence.migration' && (extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node.attrs.extensionKey) === 'legacy-content';
var shouldHideCopyButton = isLegacyContentMacro && expValEquals('platform_editor_disable_lcm_copy_button', 'isEnabled', true);
return {
title: 'Extension floating controls',
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
getDomRef: function getDomRef() {
return extensionState.element.parentElement || undefined;
},
nodeType: nodeType,
onPositionCalculated: function onPositionCalculated(editorView, nextPos) {
return calculateToolbarPosition(editorView, nextPos, state, extensionObj);
},
items: [].concat(_toConsumableArray(editButtonItems), _toConsumableArray(breakoutItems), [{
type: 'separator',
hidden: editButtonItems.length === 0 && breakoutItems.length === 0
}, {
type: 'extensions-placeholder',
separator: 'end'
}, _objectSpread({
type: 'copy-button',
items: [{
state: state,
formatMessage: intl.formatMessage,
nodeType: nodeType,
onClick: expValEquals('platform_editor_ai_edit_unsupported_content', 'isEnabled', true) ? createOnClickCopyButton({
formatMessage: formatMessage,
extensionApi: extensionApi,
extensionProvider: extensionProvider,
getUnsupportedContent: getUnsupportedContent,
state: state,
locale: locale
}) : undefined
}]
}, shouldHideCopyButton && {
hidden: shouldHideCopyButton
}), {
type: 'separator'
}, {
id: 'editor.extension.delete',
type: 'button',
icon: DeleteIcon,
iconFallback: DeleteIcon,
appearance: 'danger',
onClick: removeExtension(editorAnalyticsAPI, INPUT_METHOD.FLOATING_TB),
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
focusEditoronEnter: true,
title: formatMessage(commonMessages.remove),
tabIndex: null,
confirmDialog: confirmDialog
}]),
scrollable: true
};
};
};
var clickWithCheckboxHandler = function clickWithCheckboxHandler(isChecked, node) {
return function (state, dispatch) {
if (!node) {
return false;
}
if (!isChecked) {
removeExtension()(state, dispatch);
} else {
removeDescendantNodes(node)(state, dispatch);
}
return true;
};
};