@atlaskit/editor-plugin-card
Version:
Card plugin for @atlaskit/editor-core
242 lines • 12.3 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _regeneratorRuntime from "@babel/runtime/regenerator";
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 { cardMessages as messages } from '@atlaskit/editor-common/messages';
import { IconDatasourceAssetsObjects, IconDatasourceConfluenceSearch, IconDatasourceJiraIssue } from '@atlaskit/editor-common/quick-insert';
import { canRenderDatasource } from '@atlaskit/editor-common/utils';
import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, CONFLUENCE_SEARCH_DATASOURCE_ID } from '@atlaskit/link-datasource';
import { fg } from '@atlaskit/platform-feature-flags';
import { blockCardSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/blockCard';
import { embedCardSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/embedCard';
import { inlineCardSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/inlineCard';
import { hideLinkToolbar, setProvider as _setProvider, showDatasourceModal } from './pm-plugins/actions';
import { queueCardsFromChangedTr } from './pm-plugins/doc';
import { cardKeymap } from './pm-plugins/keymap';
import { createPlugin } from './pm-plugins/main';
import { pluginKey } from './pm-plugins/plugin-key';
import { isDatasourceConfigEditable } from './pm-plugins/utils';
import { createEventsQueue } from './ui/analytics/create-events-queue';
import DatasourceModalWithState from './ui/DatasourceModal/ModalWithState';
import { EditorLinkingPlatformAnalytics } from './ui/EditorLinkingPlatformAnalytics';
import { EditorSmartCardEvents } from './ui/EditorSmartCardEvents';
// Ignored via go/ees005
// eslint-disable-next-line import/no-named-as-default
import LayoutButton from './ui/LayoutButton';
import { floatingToolbar, getEndingToolbarItems, getStartingToolbarItems } from './ui/toolbar';
export var cardPlugin = function cardPlugin(_ref) {
var _api$base, _options$lpLinkPicker;
var _ref$config = _ref.config,
options = _ref$config === void 0 ? {} : _ref$config,
api = _ref.api;
var previousCardProvider;
var cardPluginEvents = createEventsQueue();
var instanceEmbedCardTransformers = options.embedCardTransformers;
api === null || api === void 0 || (_api$base = api.base) === null || _api$base === void 0 || _api$base.actions.registerMarks(function (_ref2) {
var tr = _ref2.tr,
node = _ref2.node,
pos = _ref2.pos;
var doc = tr.doc;
var schema = doc.type.schema;
var inlineCardNodeType = schema.nodes.inlineCard;
if (node.type === inlineCardNodeType) {
var newText = node.attrs.url;
var currentPos = tr.mapping.map(pos);
tr.replaceWith(currentPos, currentPos + node.nodeSize, schema.text(newText, node.marks));
}
});
return {
name: 'card',
getSharedState: function getSharedState(editorState) {
if (!editorState) {
return null;
}
return pluginKey.getState(editorState) || null;
},
nodes: function nodes() {
var nodes = [{
name: 'inlineCard',
node: inlineCardSpecWithFixedToDOM()
}, {
name: 'blockCard',
node: blockCardSpecWithFixedToDOM()
}];
if (options.allowEmbeds) {
nodes.push({
name: 'embedCard',
node: embedCardSpecWithFixedToDOM()
});
}
return nodes;
},
pmPlugins: function pmPlugins() {
var _options$allowBlockCa, _options$allowResizin, _options$useAlternati, _options$allowWrappin, _options$allowAlignme, _options$allowDatasou, _options$showUpgradeD;
var allowBlockCards = (_options$allowBlockCa = options.allowBlockCards) !== null && _options$allowBlockCa !== void 0 ? _options$allowBlockCa : true;
var allowResizing = (_options$allowResizin = options.allowResizing) !== null && _options$allowResizin !== void 0 ? _options$allowResizin : true;
var useAlternativePreloader = (_options$useAlternati = options.useAlternativePreloader) !== null && _options$useAlternati !== void 0 ? _options$useAlternati : true;
var allowWrapping = (_options$allowWrappin = options.allowWrapping) !== null && _options$allowWrappin !== void 0 ? _options$allowWrappin : true;
var allowAlignment = (_options$allowAlignme = options.allowAlignment) !== null && _options$allowAlignme !== void 0 ? _options$allowAlignme : true;
var allowDatasource = (_options$allowDatasou = options.allowDatasource) !== null && _options$allowDatasou !== void 0 ? _options$allowDatasou : false;
var showUpgradeDiscoverability = (_options$showUpgradeD = options.showUpgradeDiscoverability) !== null && _options$showUpgradeD !== void 0 ? _options$showUpgradeD : true;
var plugins = [{
name: 'card',
plugin: createPlugin(_objectSpread(_objectSpread({}, options), {}, {
allowBlockCards: allowBlockCards,
allowResizing: allowResizing,
useAlternativePreloader: useAlternativePreloader,
allowWrapping: allowWrapping,
allowAlignment: allowAlignment,
allowDatasource: allowDatasource,
cardPluginEvents: cardPluginEvents,
embedCardTransformers: instanceEmbedCardTransformers,
showUpgradeDiscoverability: showUpgradeDiscoverability
}), api)
}];
plugins.push({
name: 'cardKeymap',
plugin: function plugin(_ref3) {
var featureFlags = _ref3.featureFlags;
return cardKeymap(featureFlags);
}
});
return plugins;
},
contentComponent: function contentComponent(_ref4) {
var editorView = _ref4.editorView,
popupsMountPoint = _ref4.popupsMountPoint,
popupsScrollableElement = _ref4.popupsScrollableElement,
popupsBoundariesElement = _ref4.popupsBoundariesElement;
if (!editorView) {
return null;
}
var breakoutEnabled = options.editorAppearance === 'full-page';
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorSmartCardEvents, {
editorView: editorView
}), /*#__PURE__*/React.createElement(EditorLinkingPlatformAnalytics, {
cardPluginEvents: cardPluginEvents,
editorView: editorView
}), breakoutEnabled && /*#__PURE__*/React.createElement(LayoutButton, {
api: api,
editorView: editorView,
mountPoint: popupsMountPoint,
scrollableElement: popupsScrollableElement,
boundariesElement: popupsBoundariesElement
}), /*#__PURE__*/React.createElement(DatasourceModalWithState, {
api: api,
editorView: editorView
}));
},
actions: {
setProvider: function () {
var _setProvider2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(providerPromise) {
var _api$core$actions$exe;
var provider;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return providerPromise;
case 2:
provider = _context.sent;
if (!(previousCardProvider === provider || (options === null || options === void 0 ? void 0 : options.provider) === providerPromise)) {
_context.next = 5;
break;
}
return _context.abrupt("return", false);
case 5:
previousCardProvider = provider;
return _context.abrupt("return", (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(function (_ref5) {
var tr = _ref5.tr;
return _setProvider(provider)(tr);
})) !== null && _api$core$actions$exe !== void 0 ? _api$core$actions$exe : false);
case 7:
case "end":
return _context.stop();
}
}, _callee);
}));
function setProvider(_x) {
return _setProvider2.apply(this, arguments);
}
return setProvider;
}(),
hideLinkToolbar: hideLinkToolbar,
queueCardsFromChangedTr: queueCardsFromChangedTr,
registerEmbedCardTransformer: function registerEmbedCardTransformer(transformers) {
instanceEmbedCardTransformers = transformers;
},
getStartingToolbarItems: getStartingToolbarItems(options, api),
getEndingToolbarItems: getEndingToolbarItems(options, api)
},
pluginsOptions: {
floatingToolbar: floatingToolbar(options, (_options$lpLinkPicker = options.lpLinkPicker) !== null && _options$lpLinkPicker !== void 0 ? _options$lpLinkPicker : false, options.linkPicker, api, options.disableFloatingToolbar),
quickInsert: function quickInsert(_ref6) {
var formatMessage = _ref6.formatMessage;
var quickInsertArray = [];
if (!options.allowDatasource) {
return quickInsertArray;
}
quickInsertArray.push(_objectSpread(_objectSpread({
id: 'datasource',
title: formatMessage(fg('confluence-issue-terminology-refresh') ? messages.datasourceJiraIssueIssueTermRefresh : messages.datasourceJiraIssue),
description: formatMessage(fg('confluence-issue-terminology-refresh') ? messages.datasourceJiraIssueDescriptionIssueTermRefresh : messages.datasourceJiraIssueDescription),
isDisabledOffline: true,
categories: ['external-content', 'development'],
keywords: ['jira'],
featured: true
}, fg('jim-lower-ranking-in-jira-macro-search') && {
priority: 500
}), {}, {
icon: function icon() {
return /*#__PURE__*/React.createElement(IconDatasourceJiraIssue, null);
},
action: function action(insert) {
var tr = insert(undefined);
showDatasourceModal('jira')(tr);
return tr;
}
}));
if (canRenderDatasource(ASSETS_LIST_OF_LINKS_DATASOURCE_ID)) {
quickInsertArray.push({
id: 'datasource',
title: formatMessage(messages.datasourceAssetsObjectsGeneralAvailability),
description: formatMessage(messages.datasourceAssetsObjectsDescription),
isDisabledOffline: true,
categories: ['external-content', 'development'],
keywords: ['assets'],
icon: function icon() {
return /*#__PURE__*/React.createElement(IconDatasourceAssetsObjects, null);
},
action: function action(insert) {
var tr = insert(undefined);
showDatasourceModal('assets')(tr);
return tr;
}
});
}
if (isDatasourceConfigEditable(CONFLUENCE_SEARCH_DATASOURCE_ID)) {
quickInsertArray.push({
id: 'datasource',
title: formatMessage(messages.datasourceConfluenceSearch),
description: formatMessage(messages.datasourceConfluenceSearchDescription),
isDisabledOffline: true,
categories: ['external-content', 'development'],
keywords: ['confluence'],
featured: true,
icon: function icon() {
return /*#__PURE__*/React.createElement(IconDatasourceConfluenceSearch, null);
},
action: function action(insert) {
var tr = insert(undefined);
showDatasourceModal('confluence-search')(tr);
return tr;
}
});
}
return quickInsertArray;
}
}
};
};