@atlaskit/editor-plugin-card
Version:
Card plugin for @atlaskit/editor-core
859 lines (855 loc) • 45.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.visitCardLinkAnalytics = exports.shouldRenderToolbarPulse = exports.removeCard = exports.openLinkSettings = exports.getStartingToolbarItems = exports.getSettingsButton = exports.getEndingToolbarItems = exports.floatingToolbar = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _adfSchema = require("@atlaskit/adf-schema");
var _analytics = require("@atlaskit/editor-common/analytics");
var _card = require("@atlaskit/editor-common/card");
var _link2 = require("@atlaskit/editor-common/link");
var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
var _styles = require("@atlaskit/editor-common/styles");
var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
var _utils = require("@atlaskit/editor-common/utils");
var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
var _state2 = require("@atlaskit/editor-prosemirror/state");
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
var _edit = _interopRequireDefault(require("@atlaskit/icon/core/edit"));
var _linkBroken = _interopRequireDefault(require("@atlaskit/icon/core/link-broken"));
var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
var _settings = _interopRequireDefault(require("@atlaskit/icon/core/settings"));
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _doc = require("../pm-plugins/doc");
var _pluginKey = require("../pm-plugins/plugin-key");
var _utils3 = require("../pm-plugins/utils");
var _DatasourceAppearanceButton = require("./DatasourceAppearanceButton");
var _EditLinkToolbar = require("./EditLinkToolbar");
var _EditToolbarButton = require("./EditToolbarButton");
var _HyperlinkToolbarAppearance = require("./HyperlinkToolbarAppearance");
var _HyperlinkToolbarAppearanceDropdown = require("./HyperlinkToolbarAppearanceDropdown");
var _LinkToolbarAppearance = require("./LinkToolbarAppearance");
var _LinkToolbarAppearanceDropdown = require("./LinkToolbarAppearanceDropdown");
var _OpenPreviewButton = require("./OpenPreviewButton");
var _ToolbarViewedEvent = require("./ToolbarViewedEvent");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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; }
var removeCard = exports.removeCard = function removeCard(editorAnalyticsApi) {
return (0, _card.commandWithMetadata)(function (state, dispatch) {
if (!(state.selection instanceof _state2.NodeSelection)) {
return false;
}
var type = state.selection.node.type.name;
var payload = {
action: _analytics.ACTION.DELETED,
actionSubject: _analytics.ACTION_SUBJECT.SMART_LINK,
actionSubjectId: type,
attributes: {
inputMethod: _analytics.INPUT_METHOD.FLOATING_TB,
displayMode: type
},
eventType: _analytics.EVENT_TYPE.TRACK
};
if (dispatch) {
var tr = state.tr;
(0, _utils2.removeSelectedNode)(tr);
editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent(payload)(tr);
dispatch(tr);
}
return true;
}, {
action: _analytics.ACTION.DELETED
});
};
var visitCardLinkAnalytics = exports.visitCardLinkAnalytics = function visitCardLinkAnalytics(editorAnalyticsApi, inputMethod, resolvedAttributes) {
return function (state, dispatch) {
if (!(state.selection instanceof _state2.NodeSelection)) {
return false;
}
var type = state.selection.node.type;
if (dispatch) {
var tr = state.tr;
var shouldIncludeResolvedAttributes = (0, _expValEquals.expValEquals)('cc_integrations_editor_open_link_click_analytics', 'isEnabled', true);
editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent((0, _analytics.buildVisitedNonHyperLinkPayload)(type.name, inputMethod, shouldIncludeResolvedAttributes ? resolvedAttributes : undefined))(tr);
dispatch(tr);
}
return true;
};
};
var fireOpenLinkToolbarAnalytics = function fireOpenLinkToolbarAnalytics(editorAnalyticsApi, inputMethod) {
var resolvedAttributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
return function (state, dispatch) {
var linkAnalyticsRecorded = visitCardLinkAnalytics(editorAnalyticsApi, inputMethod, resolvedAttributes)(state, dispatch);
if (!linkAnalyticsRecorded) {
return false;
}
if ((0, _expValEquals.expValEquals)('cc_integrations_editor_open_link_click_analytics', 'isEnabled', true)) {
editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.fireAnalyticsEvent({
action: _analytics.ACTION.CLICKED,
actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.OPEN_LINK,
attributes: {
displayCategory: resolvedAttributes.displayCategory,
extensionKey: resolvedAttributes.extensionKey,
status: resolvedAttributes.status,
statusDetails: resolvedAttributes.statusDetails
},
eventType: _analytics.EVENT_TYPE.UI
});
}
return true;
};
};
var openLinkSettings = exports.openLinkSettings = function openLinkSettings(editorAnalyticsApi) {
return function (state, dispatch) {
if (!(state.selection instanceof _state2.NodeSelection)) {
return false;
}
if (dispatch) {
var tr = state.tr,
type = state.selection.node.type;
editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent((0, _analytics.buildOpenedSettingsPayload)(type.name))(tr);
dispatch(tr);
}
return true;
};
};
var floatingToolbar = exports.floatingToolbar = function floatingToolbar(cardOptions, lpLinkPicker, linkPickerOptions, pluginInjectionApi, disableFloatingToolbar) {
return function (state, intl, providerFactory) {
if (disableFloatingToolbar) {
return;
}
var _state$schema$nodes = state.schema.nodes,
inlineCard = _state$schema$nodes.inlineCard,
blockCard = _state$schema$nodes.blockCard,
embedCard = _state$schema$nodes.embedCard;
var nodeType = [inlineCard, blockCard, embedCard];
var pluginState = _pluginKey.pluginKey.getState(state);
if (!(state.selection instanceof _state2.NodeSelection)) {
return;
}
var selectedNode = state.selection.node;
if (!selectedNode) {
return;
}
var isEmbedCard = (0, _utils3.appearanceForNodeType)(selectedNode.type) === 'embed';
/* add an offset to embeds due to extra padding */
var toolbarOffset = isEmbedCard ? {
offset: [0, 24]
} : {};
// Applies padding override for when link picker is currently displayed
var className = pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar ? _styles.FLOATING_TOOLBAR_LINKPICKER_CLASSNAME : undefined;
var isLinkPickerEnabled = !!lpLinkPicker;
return _objectSpread(_objectSpread({
title: intl.formatMessage(_messages.cardMessages.card),
className: className,
nodeType: nodeType,
preventPopupOverflow: isLinkPickerEnabled
}, toolbarOffset), {}, {
getDomRef: function getDomRef(view) {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
var element = (0, _utils2.findDomRefAtPos)(view.state.selection.from, view.domAtPos.bind(view));
if (!element) {
return undefined;
}
if (isEmbedCard) {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
var richMediaElement = element.querySelector(".".concat(_styles.richMediaClassName));
if (!(0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
exposure: true
})) {
return richMediaElement;
}
if (richMediaElement) {
return richMediaElement;
}
}
return element;
},
items: generateToolbarItems(state, intl, providerFactory, cardOptions, lpLinkPicker, linkPickerOptions, pluginInjectionApi),
scrollable: pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar ? false : true
}, (0, _EditLinkToolbar.editLinkToolbarConfig)(Boolean(pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLinkingToolbar), isLinkPickerEnabled));
};
};
var unlinkCard = function unlinkCard(node, state, editorAnalyticsApi) {
var displayInfo = (0, _utils3.displayInfoForCard)(node, (0, _utils3.findCardInfo)(state));
var text = displayInfo.title || displayInfo.url;
if (text) {
return (0, _card.commandWithMetadata)((0, _doc.changeSelectedCardToText)(text, editorAnalyticsApi), {
action: _analytics.ACTION.UNLINK
});
}
return function () {
return false;
};
};
var buildAlignmentOptions = function buildAlignmentOptions(state, intl, widthPluginDependencyApi, analyticsApi, cardOptions, areAnyNewToolbarFlagsEnabled) {
if (areAnyNewToolbarFlagsEnabled) {
return (0, _card.buildLayoutDropdown)(state, intl, state.schema.nodes.embedCard, widthPluginDependencyApi, analyticsApi, true, true, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowWrapping, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowAlignment);
}
return (0, _card.buildLayoutButtons)(state, intl, state.schema.nodes.embedCard, widthPluginDependencyApi, analyticsApi, true, true, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowWrapping, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowAlignment);
};
var withToolbarMetadata = function withToolbarMetadata(command) {
return (0, _card.commandWithMetadata)(command, {
inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
});
};
var getToolbarViewedItem = function getToolbarViewedItem(url, display) {
if (!url) {
return [];
}
return [{
type: 'custom',
fallback: [],
render: function render(editorView) {
return /*#__PURE__*/_react.default.createElement(_ToolbarViewedEvent.ToolbarViewedEvent, {
key: "edit.link.menu.viewed",
url: url,
display: display,
editorView: editorView
});
}
}];
};
var generateToolbarItems = function generateToolbarItems(state, intl, providerFactory, cardOptions, lpLinkPicker, linkPicker, pluginInjectionApi) {
return function (node) {
var _pluginInjectionApi$a, _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$a2, _node$attrs;
var _titleUrlPairFromNode = (0, _utils3.titleUrlPairFromNode)(node),
url = _titleUrlPairFromNode.url;
var _ref = (_pluginInjectionApi$a = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.analytics) !== null && _pluginInjectionApi$a !== void 0 ? _pluginInjectionApi$a : {},
editorAnalyticsApi = _ref.actions;
var metadata = {};
if (url && !(0, _adfSchema.isSafeUrl)(url)) {
return [];
} else {
var _displayInfoForCard = (0, _utils3.displayInfoForCard)(node, (0, _utils3.findCardInfo)(state)),
title = _displayInfoForCard.title;
metadata = {
url: url,
title: title
};
}
var areAllNewToolbarFlagsDisabled = !(0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
var currentAppearance = (0, _utils3.appearanceForNodeType)(node.type);
var _ref2 = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
hoverDecoration = _ref2.hoverDecoration;
var isDatasource = (0, _utils3.isDatasourceNode)(node);
var pluginState = _pluginKey.pluginKey.getState(state);
var annotationApiState = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.annotation) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.sharedState.currentState();
var activeCommentMark = node.marks.find(function (mark) {
return mark.type.name === 'annotation' && (annotationApiState === null || annotationApiState === void 0 ? void 0 : annotationApiState.annotations[mark.attrs.id]) === false;
});
var isCommentEnabled = annotationApiState && annotationApiState.isVisible && !annotationApiState.bookmark && !annotationApiState.mouseData.isSelecting && !activeCommentMark && node.type === state.schema.nodes.inlineCard;
var onCommentButtonClick = function onCommentButtonClick(state, dispatch) {
var _pluginInjectionApi$a3;
if (!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.annotation) || !isCommentEnabled) {
return false;
}
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 || (_pluginInjectionApi$a3 = _pluginInjectionApi$a3.actions) === null || _pluginInjectionApi$a3 === void 0 || _pluginInjectionApi$a3.fireAnalyticsEvent({
action: _analytics.ACTION.CLICKED,
actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.CREATE_INLINE_COMMENT_FROM_HIGHLIGHT_ACTIONS_MENU,
eventType: _analytics.EVENT_TYPE.UI,
attributes: {
source: 'highlightActionsMenu',
pageMode: 'edit',
sourceNode: 'inlineCard'
}
});
var setInlineCommentDraftState = pluginInjectionApi.annotation.actions.setInlineCommentDraftState;
var command = setInlineCommentDraftState(true, _analytics.INPUT_METHOD.FLOATING_TB);
return command(state, dispatch);
};
var shouldRenderDatasourceToolbar = isDatasource && cardOptions.allowDatasource && (0, _utils.canRenderDatasource)(node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 || (_node$attrs = _node$attrs.datasource) === null || _node$attrs === void 0 ? void 0 : _node$attrs.id);
if (pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar) {
return [(0, _EditLinkToolbar.buildEditLinkToolbar)({
providerFactory: providerFactory,
linkPicker: linkPicker,
node: node,
pluginInjectionApi: pluginInjectionApi,
lpLinkPicker: lpLinkPicker
})];
} else if (shouldRenderDatasourceToolbar) {
return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance, pluginInjectionApi);
} else {
var _pluginInjectionApi$c, _pluginState$resolved;
var inlineCard = state.schema.nodes.inlineCard;
var editItems = cardOptions.allowDatasource ? [{
type: 'custom',
fallback: [],
render: function render(editorView) {
return /*#__PURE__*/_react.default.createElement(_EditToolbarButton.EditToolbarButton, {
key: "edit-toolbar-item",
url: url,
intl: intl,
editorAnalyticsApi: editorAnalyticsApi,
editorView: editorView,
onLinkEditClick: (0, _EditLinkToolbar.getEditLinkCallback)(editorAnalyticsApi, true),
currentAppearance: currentAppearance,
areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
});
}
}] : [{
id: 'editor.link.edit',
type: 'button',
selected: false,
metadata: metadata,
title: intl.formatMessage(_messages.linkToolbarMessages.editLink),
showTitle: true,
testId: 'link-toolbar-edit-link-button',
onClick: (0, _EditLinkToolbar.getEditLinkCallback)(editorAnalyticsApi, true)
}, {
type: 'separator'
}];
var commentItems = isCommentEnabled ? [{
id: 'editor.link.commentLink',
type: 'button',
icon: _comment.default,
testId: 'inline-card-toolbar-comment-button',
iconFallback: _comment.default,
title: intl.formatMessage(_messages.annotationMessages.createComment),
showTitle: (0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? undefined : true,
onClick: onCommentButtonClick,
disabled: (0, _editorPluginConnectivity.isOfflineMode)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.sharedState) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.currentState()) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.mode)
}, {
type: 'separator'
}] : [];
var openLinkInputMethod = _analytics.INPUT_METHOD.FLOATING_TB;
var editButtonItems = cardOptions.allowDatasource ? [{
type: 'custom',
fallback: [],
render: function render(editorView) {
return /*#__PURE__*/_react.default.createElement(_EditToolbarButton.EditToolbarButton, {
key: "edit-toolbar-item",
url: url,
intl: intl,
editorAnalyticsApi: editorAnalyticsApi,
editorView: editorView,
onLinkEditClick: (0, _EditLinkToolbar.getEditLinkCallback)(editorAnalyticsApi, true),
currentAppearance: currentAppearance,
areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
});
}
}] : [{
id: 'editor.link.edit',
type: 'button',
selected: false,
metadata: metadata,
title: intl.formatMessage(_messages.linkToolbarMessages.editLink),
icon: _edit.default,
testId: 'link-toolbar-edit-link-button',
onClick: (0, _EditLinkToolbar.getEditLinkCallback)(editorAnalyticsApi, true)
}];
var openPreviewPanelItems = (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true, {
exposure: true
}) ? [{
type: 'custom',
fallback: [],
render: function render() {
return /*#__PURE__*/_react.default.createElement(_OpenPreviewButton.OpenPreviewPanelToolbarButton, {
node: node,
intl: intl,
editorAnalyticsApi: editorAnalyticsApi,
areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
});
}
}] : [];
var resolvedToolbarAttributes = url ? (_pluginState$resolved = pluginState === null || pluginState === void 0 ? void 0 : pluginState.resolvedToolbarAttributesByUrl[url]) !== null && _pluginState$resolved !== void 0 ? _pluginState$resolved : {} : {};
var openLinkToolbarItem = {
id: 'editor.link.openLink',
type: 'button',
icon: _linkExternal.default,
iconFallback: _linkExternal.default,
metadata: metadata,
className: 'hyperlink-open-link',
title: intl.formatMessage(_messages.linkMessages.openLink),
onClick: fireOpenLinkToolbarAnalytics(editorAnalyticsApi, openLinkInputMethod, resolvedToolbarAttributes),
href: url,
target: '_blank'
};
var toolbarItems = areAllNewToolbarFlagsDisabled ? [].concat(editItems, commentItems, openPreviewPanelItems, [openLinkToolbarItem, {
type: 'separator'
}], (0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi, !areAllNewToolbarFlagsDisabled)), [{
type: 'copy-button',
items: [{
state: state,
formatMessage: intl.formatMessage,
nodeType: node.type
}]
}, {
type: 'separator'
}, getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink), {
type: 'separator'
}, {
id: 'editor.link.delete',
focusEditoronEnter: true,
type: 'button',
appearance: 'danger',
icon: _delete.default,
iconFallback: _delete.default,
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
title: intl.formatMessage(_messages.default.remove),
onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
}]) : [].concat(editButtonItems, (0, _toConsumableArray2.default)([].concat((0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi, !areAllNewToolbarFlagsDisabled)), [{
type: 'separator',
fullHeight: true
}])), openPreviewPanelItems, [openLinkToolbarItem], (0, _toConsumableArray2.default)(commentItems.length > 1 ? [{
type: 'separator',
fullHeight: true
}, commentItems[0]] : commentItems));
if (currentAppearance === 'embed') {
var _pluginInjectionApi$a4;
var alignmentOptions = buildAlignmentOptions(state, intl, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions, cardOptions, !areAllNewToolbarFlagsDisabled);
if (alignmentOptions.length && areAllNewToolbarFlagsDisabled) {
alignmentOptions.push({
type: 'separator'
});
}
toolbarItems.unshift.apply(toolbarItems, (0, _toConsumableArray2.default)(alignmentOptions));
}
var allowBlockCards = cardOptions.allowBlockCards,
allowEmbeds = cardOptions.allowEmbeds,
allowDatasource = cardOptions.allowDatasource,
showUpgradeDiscoverability = cardOptions.showUpgradeDiscoverability;
// This code will be executed only for appearances such as "inline", "block" & "embed"
// For url appearance, please see HyperlinkToolbarAppearanceProps
if (currentAppearance) {
var showDatasourceAppearance = allowDatasource && url;
toolbarItems.unshift.apply(toolbarItems, (0, _toConsumableArray2.default)(getToolbarViewedItem(url, currentAppearance)).concat([areAllNewToolbarFlagsDisabled ? {
type: 'custom',
fallback: [],
render: function render(editorView) {
return /*#__PURE__*/_react.default.createElement(_LinkToolbarAppearance.LinkToolbarAppearance, {
key: "link-appearance",
url: url,
intl: intl,
currentAppearance: currentAppearance,
editorView: editorView,
editorState: state,
allowEmbeds: allowEmbeds,
allowBlockCards: allowBlockCards,
editorAnalyticsApi: editorAnalyticsApi,
showUpgradeDiscoverability: showUpgradeDiscoverability,
areAnyNewToolbarFlagsEnabled: false
});
}
} : (0, _LinkToolbarAppearanceDropdown.getLinkAppearanceDropdown)({
url: url,
intl: intl,
currentAppearance: currentAppearance,
editorState: state,
allowEmbeds: allowEmbeds,
allowBlockCards: allowBlockCards,
editorAnalyticsApi: editorAnalyticsApi,
allowDatasource: cardOptions.allowDatasource,
showUpgradeDiscoverability: showUpgradeDiscoverability,
settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink),
isDatasourceView: isDatasource,
areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
})], (0, _toConsumableArray2.default)(showDatasourceAppearance && areAllNewToolbarFlagsDisabled ? [{
type: 'custom',
fallback: [],
render: function render(editorView) {
return /*#__PURE__*/_react.default.createElement(_DatasourceAppearanceButton.DatasourceAppearanceButton, {
intl: intl,
editorAnalyticsApi: editorAnalyticsApi,
url: url,
editorView: editorView,
editorState: state,
inputMethod: _analytics.INPUT_METHOD.FLOATING_TB,
areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
});
}
}] : []), (0, _toConsumableArray2.default)(!areAllNewToolbarFlagsDisabled ? [] : [{
type: 'separator'
}])));
}
if (!areAllNewToolbarFlagsDisabled) {
var hoverDecorationProps = function hoverDecorationProps(nodeType, className) {
return {
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
};
};
// testId is required to show focus on trigger button on ESC key press
// see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
var testId = 'card-overflow-dropdown-trigger';
var overflowMenuConfig = [{
type: 'separator',
fullHeight: true
}, {
type: 'overflow-dropdown',
testId: testId,
options: [_objectSpread({
title: intl.formatMessage(_messages.default.copyToClipboard),
onClick: function onClick() {
var _pluginInjectionApi$c2, _pluginInjectionApi$f;
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 || _pluginInjectionApi$c2.actions.execute( // @ts-ignore
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.commands.copyNode(node.type, _analytics.INPUT_METHOD.FLOATING_TB));
return true;
},
icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
label: intl.formatMessage(_messages.default.copyToClipboard)
})
}, hoverDecorationProps(node.type, _editorSharedStyles.akEditorSelectedNodeClassName)), _objectSpread({
title: intl.formatMessage(_messages.default.delete),
onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
label: intl.formatMessage(_messages.default.delete)
})
}, hoverDecorationProps(node.type))]
}];
toolbarItems.push.apply(toolbarItems, overflowMenuConfig);
}
return toolbarItems;
}
};
};
var getUnlinkButtonGroup = function getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi, areAnyNewToolbarFlagsEnabled) {
return node.type === inlineCard ? [{
id: 'editor.link.unlink',
focusEditoronEnter: true,
type: 'button',
title: intl.formatMessage(_messages.linkToolbarMessages.unlink),
icon: _linkBroken.default,
iconFallback: _linkBroken.default,
onClick: withToolbarMetadata(unlinkCard(node, state, editorAnalyticsApi))
}].concat((0, _toConsumableArray2.default)(areAnyNewToolbarFlagsEnabled ? [] : [{
type: 'separator'
}])) : [];
};
var getSettingsButton = exports.getSettingsButton = function getSettingsButton(intl, editorAnalyticsApi, userPreferencesLink) {
return {
id: 'editor.link.settings',
type: 'button',
icon: _settings.default,
iconFallback: _settings.default,
title: intl.formatMessage(_messages.linkToolbarMessages.settingsLink),
onClick: openLinkSettings(editorAnalyticsApi),
href: userPreferencesLink || (0, _link2.getLinkPreferencesURLFromENV)(),
target: '_blank'
};
};
var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, pluginInjectionApi) {
var _node$attrs2, _node$attrs3;
var toolbarItems = [];
toolbarItems.push.apply(toolbarItems, (0, _toConsumableArray2.default)(getToolbarViewedItem(node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.url, currentAppearance !== null && currentAppearance !== void 0 ? currentAppearance : 'url')));
var areAllNewToolbarFlagsDisabled = !(0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
var canShowAppearanceSwitch = function canShowAppearanceSwitch() {
// we do not show smart-link or the datasource icons when the node does not have a url to resolve
if (!metadata.url) {
return false;
}
return true;
};
if (canShowAppearanceSwitch()) {
var allowBlockCards = cardOptions.allowBlockCards,
allowEmbeds = cardOptions.allowEmbeds,
showUpgradeDiscoverability = cardOptions.showUpgradeDiscoverability;
var url = metadata.url;
if (areAllNewToolbarFlagsDisabled) {
toolbarItems.push({
type: 'custom',
fallback: [],
render: function render(editorView) {
return /*#__PURE__*/_react.default.createElement(_LinkToolbarAppearance.LinkToolbarAppearance, {
key: "link-appearance",
url: url,
intl: intl,
currentAppearance: currentAppearance,
editorView: editorView,
editorState: state,
allowEmbeds: allowEmbeds,
allowBlockCards: allowBlockCards,
editorAnalyticsApi: editorAnalyticsApi,
showUpgradeDiscoverability: showUpgradeDiscoverability,
isDatasourceView: true,
areAnyNewToolbarFlagsEnabled: false
});
}
}, {
type: 'custom',
fallback: [],
render: function render(editorView) {
return /*#__PURE__*/_react.default.createElement(_DatasourceAppearanceButton.DatasourceAppearanceButton, {
intl: intl,
editorAnalyticsApi: editorAnalyticsApi,
url: url,
editorView: editorView,
editorState: state,
selected: true,
inputMethod: _analytics.INPUT_METHOD.FLOATING_TB,
areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
});
}
}, {
type: 'separator'
});
} else {
toolbarItems.push((0, _LinkToolbarAppearanceDropdown.getLinkAppearanceDropdown)({
url: url,
intl: intl,
currentAppearance: currentAppearance,
editorState: state,
allowEmbeds: allowEmbeds,
allowBlockCards: allowBlockCards,
editorAnalyticsApi: editorAnalyticsApi,
allowDatasource: cardOptions.allowDatasource,
showUpgradeDiscoverability: showUpgradeDiscoverability,
settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink),
isDatasourceView: true,
areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
}), {
type: 'separator'
});
}
}
var openLinkInputMethod = _analytics.INPUT_METHOD.FLOATING_TB;
var pluginState = _pluginKey.pluginKey.getState(state);
toolbarItems.push({
type: 'custom',
fallback: [],
render: function render(editorView) {
return /*#__PURE__*/_react.default.createElement(_EditToolbarButton.EditToolbarButton, {
datasourceId: datasourceId,
node: node,
key: "edit-toolbar-item",
url: metadata.url,
intl: intl,
editorAnalyticsApi: editorAnalyticsApi,
editorView: editorView,
onLinkEditClick: (0, _EditLinkToolbar.getEditLinkCallback)(editorAnalyticsApi, false),
currentAppearance: "datasource",
areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
});
}
});
if (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {
var _pluginState$resolved2;
toolbarItems.push({
id: 'editor.link.openLink',
type: 'button',
icon: _linkExternal.default,
iconFallback: _linkExternal.default,
metadata: metadata,
className: 'hyperlink-open-link',
title: intl.formatMessage(_messages.linkMessages.openLink),
onClick: fireOpenLinkToolbarAnalytics(editorAnalyticsApi, openLinkInputMethod, (_pluginState$resolved2 = pluginState === null || pluginState === void 0 ? void 0 : pluginState.resolvedToolbarAttributesByUrl[node.attrs.url]) !== null && _pluginState$resolved2 !== void 0 ? _pluginState$resolved2 : {}),
href: node.attrs.url,
target: '_blank'
});
if (areAllNewToolbarFlagsDisabled) {
toolbarItems.push({
type: 'separator'
});
}
}
if (areAllNewToolbarFlagsDisabled) {
toolbarItems.push({
type: 'copy-button',
supportsViewMode: true,
items: [{
state: state,
formatMessage: intl.formatMessage,
nodeType: node.type
}]
}, {
type: 'separator'
}, getSettingsButton(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink), {
type: 'separator'
}, {
id: 'editor.link.delete',
focusEditoronEnter: true,
type: 'button',
appearance: 'danger',
icon: _delete.default,
iconFallback: _delete.default,
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
title: intl.formatMessage(_messages.default.remove),
onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
});
} else {
// testId is required to show focus on trigger button on ESC key press
// see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
var testId = 'datasource-overflow-dropdown-trigger';
// When canShowAppearanceSwitch is true, and platform_editor_controls is on, the link appearance dropdown shows, which includes a link preference button
// So only add the link appearance button when canShowAppearanceSwitch is false
if (!canShowAppearanceSwitch()) {
var linkPreferenceButton = getSettingsButton(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink);
toolbarItems.push({
type: 'separator',
fullHeight: true
}, linkPreferenceButton, {
type: 'separator',
fullHeight: true
});
} else {
toolbarItems.push({
type: 'separator',
fullHeight: true
});
}
var overflowMenuConfig = [{
type: 'overflow-dropdown',
testId: testId,
options: [{
title: intl.formatMessage(_messages.default.copyToClipboard),
onClick: function onClick() {
var _pluginInjectionApi$c3, _pluginInjectionApi$f2;
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c3 = pluginInjectionApi.core) === null || _pluginInjectionApi$c3 === void 0 || _pluginInjectionApi$c3.actions.execute( // @ts-ignore
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.commands.copyNode(node.type, _analytics.INPUT_METHOD.FLOATING_TB));
return true;
},
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true, _editorSharedStyles.akEditorSelectedNodeClassName),
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false, _editorSharedStyles.akEditorSelectedNodeClassName),
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true, _editorSharedStyles.akEditorSelectedNodeClassName),
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false, _editorSharedStyles.akEditorSelectedNodeClassName),
icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
label: intl.formatMessage(_messages.default.copyToClipboard)
})
}, {
title: intl.formatMessage(_messages.default.delete),
onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
label: intl.formatMessage(_messages.default.delete)
})
}]
}];
toolbarItems.push.apply(toolbarItems, overflowMenuConfig);
}
return toolbarItems;
};
var shouldRenderToolbarPulse = exports.shouldRenderToolbarPulse = function shouldRenderToolbarPulse(embedEnabled, appearance, status, isDiscoverabilityEnabled) {
return embedEnabled && appearance === 'inline' && status === 'resolved' && isDiscoverabilityEnabled;
};
var getStartingToolbarItems = exports.getStartingToolbarItems = function getStartingToolbarItems(options, api) {
return function (intl, link, onEditLink, metadata, _state) {
var areAllNewToolbarFlagsDisabled = !(0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
var editLinkItem = options.allowDatasource ? [{
type: 'custom',
fallback: [],
render: function render(editorView) {
var _api$analytics;
if (!editorView) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_EditToolbarButton.EditToolbarButton, {
key: "edit-toolbar-button",
intl: intl,
editorAnalyticsApi: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
url: link,
editorView: editorView,
onLinkEditClick: onEditLink,
currentAppearance: "url",
areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
});
}
}] : [{
id: 'editor.link.edit',
testId: 'editor.link.edit',
type: 'button',
onClick: onEditLink,
title: intl.formatMessage(_messages.linkToolbarMessages.editLink),
showTitle: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? false : true,
metadata: metadata,
icon: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? _edit.default : undefined
}, {
type: 'separator'
}];
if (!areAllNewToolbarFlagsDisabled) {
var _api$analytics2, _api$analytics3;
var hyperlinkAppearance = [(0, _HyperlinkToolbarAppearanceDropdown.getCustomHyperlinkAppearanceDropdown)({
url: link,
intl: intl,
editorAnalyticsApi: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
allowDatasource: options.allowDatasource,
editorPluginApi: api,
cardOptions: options,
settingsConfig: getSettingsButton(intl, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink),
isDatasourceView: false
})];
return [{
type: 'custom',
fallback: [],
render: function render(editorView) {
return /*#__PURE__*/_react.default.createElement(_ToolbarViewedEvent.ToolbarViewedEvent, {
key: "edit.link.menu.viewed",
url: link,
display: "url",
editorView: editorView
});
}
}].concat(hyperlinkAppearance, editLinkItem);
}
return [{
type: 'custom',
fallback: [],
render: function render(editorView) {
return /*#__PURE__*/_react.default.createElement(_ToolbarViewedEvent.ToolbarViewedEvent, {
key: "edit.link.menu.viewed",
url: link,
display: "url",
editorView: editorView
});
}
}, {
type: 'custom',
fallback: [],
render: function render(editorView) {
var _api$analytics4;
if (!editorView) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_HyperlinkToolbarAppearance.HyperlinkToolbarAppearance, {
key: "link-appearance",
url: link,
intl: intl,
editorView: editorView,
editorState: editorView.state,
cardOptions: options,
editorAnalyticsApi: api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
editorPluginApi: api
});
}
}].concat(editLinkItem);
};
};
var getEndingToolbarItems = exports.getEndingToolbarItems = function getEndingToolbarItems(options, api) {
return function (intl, _link) {
/**
* Require either provider to be supplied (controls link preferences)
* Or explicit user preferences config in order to enable button
*/
if ((options.provider || options.userPreferencesLink) && !(0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
var _api$analytics5;
return [{
type: 'separator'
}, getSettingsButton(intl, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, options.userPreferencesLink)];
}
return [];
};
};