@atlaskit/editor-plugin-extension
Version:
editor-plugin-extension plugin for @atlaskit/editor-core
293 lines (291 loc) • 14.3 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.getContextPanelBodyComponent = void 0;
exports.hideConfigPanel = hideConfigPanel;
exports.showConfigPanel = showConfigPanel;
exports.startClosingConfigPanel = startClosingConfigPanel;
exports.useConfigPanelPluginHook = useConfigPanelPluginHook;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _extensions = require("@atlaskit/editor-common/extensions");
var _hooks = require("@atlaskit/editor-common/hooks");
var _compiled = require("@atlaskit/primitives/compiled");
var _commands = require("../editor-commands/commands");
var _pluginFactory = require("../pm-plugins/plugin-factory");
var _utils = require("../pm-plugins/utils");
var _ConfigPanelLoader = _interopRequireDefault(require("./ConfigPanel/ConfigPanelLoader"));
var _constants = require("./ConfigPanel/constants");
var _HeaderAfterIconElement = _interopRequireDefault(require("./ConfigPanel/Header/HeaderAfterIconElement"));
var _HeaderIcon = _interopRequireDefault(require("./ConfigPanel/Header/HeaderIcon"));
var _contextPanel = require("./context-panel");
var _SaveIndicator = require("./SaveIndicator/SaveIndicator");
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); }
var selector = function selector(states) {
var _states$extensionStat, _states$extensionStat2, _states$extensionStat3;
return {
showContextPanel: (_states$extensionStat = states.extensionState) === null || _states$extensionStat === void 0 ? void 0 : _states$extensionStat.showContextPanel,
extensionProvider: (_states$extensionStat2 = states.extensionState) === null || _states$extensionStat2 === void 0 ? void 0 : _states$extensionStat2.extensionProvider,
processParametersAfter: (_states$extensionStat3 = states.extensionState) === null || _states$extensionStat3 === void 0 ? void 0 : _states$extensionStat3.processParametersAfter
};
};
function useConfigPanelPluginHook(_ref) {
var editorView = _ref.editorView,
configPanelId = _ref.configPanelId,
api = _ref.api;
var editorState = editorView.state;
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['extension'], selector),
showContextPanel = _useSharedPluginState.showContextPanel,
extensionProvider = _useSharedPluginState.extensionProvider,
processParametersAfter = _useSharedPluginState.processParametersAfter;
(0, _react.useEffect)(function () {
var nodeWithPos = (0, _utils.getSelectedExtension)(editorState, true);
// Adding checks to bail out early
if (!nodeWithPos) {
hideConfigPanel(configPanelId, api);
return;
}
if (showContextPanel && extensionProvider && processParametersAfter) {
showConfigPanel({
api: api,
configPanelId: configPanelId,
editorView: editorView,
extensionProvider: extensionProvider,
nodeWithPos: nodeWithPos
});
} else {
hideConfigPanel(configPanelId, api);
}
}, [api, configPanelId, editorState, editorView, showContextPanel, extensionProvider, processParametersAfter]);
(0, _react.useEffect)(function () {
return function () {
hideConfigPanel(configPanelId, api);
};
}, [api, configPanelId]);
}
function hideConfigPanel(configPanelId, api) {
var _api$contextPanel;
var closePanelById = api === null || api === void 0 || (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 || (_api$contextPanel = _api$contextPanel.actions) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.closePanelById;
if (closePanelById) {
closePanelById(configPanelId);
}
}
function showConfigPanel(_ref2) {
var _api$contextPanel2;
var api = _ref2.api,
configPanelId = _ref2.configPanelId,
editorView = _ref2.editorView,
extensionProvider = _ref2.extensionProvider,
nodeWithPos = _ref2.nodeWithPos;
var showContextPanel = api === null || api === void 0 || (_api$contextPanel2 = api.contextPanel) === null || _api$contextPanel2 === void 0 || (_api$contextPanel2 = _api$contextPanel2.actions) === null || _api$contextPanel2 === void 0 ? void 0 : _api$contextPanel2.showPanel;
if (showContextPanel) {
var nodeAttrs = nodeWithPos === null || nodeWithPos === void 0 ? void 0 : nodeWithPos.node.attrs;
var extensionType = nodeAttrs === null || nodeAttrs === void 0 ? void 0 : nodeAttrs.extensionType;
var extensionKey = nodeAttrs === null || nodeAttrs === void 0 ? void 0 : nodeAttrs.extensionKey;
/**
* Loading extension manifest fails when using
* extensionKey directly from nodeAttrs.
* Always get extensionKey from getExtensionKeyAndNodeKey to load
* extension manifest successfully.
*/
var _getExtensionKeyAndNo = (0, _extensions.getExtensionKeyAndNodeKey)(extensionKey, extensionType),
_getExtensionKeyAndNo2 = (0, _slicedToArray2.default)(_getExtensionKeyAndNo, 2),
extKey = _getExtensionKeyAndNo2[0],
_ = _getExtensionKeyAndNo2[1];
var HeadeIconWrapper = function HeadeIconWrapper() {
return /*#__PURE__*/_react.default.createElement(_HeaderIcon.default, {
extensionProvider: extensionProvider,
extensionKey: extKey,
extensionType: extensionType
});
};
var HeaderAfterIconElementWrapper = function HeaderAfterIconElementWrapper() {
return /*#__PURE__*/_react.default.createElement(_HeaderAfterIconElement.default, {
extensionProvider: extensionProvider,
extensionKey: extKey,
extensionType: extensionType
});
};
var BodyComponent = getContextPanelBodyComponent({
api: api,
editorView: editorView,
extensionProvider: extensionProvider,
nodeWithPos: nodeWithPos
});
showContextPanel({
id: configPanelId,
headerComponentElements: {
HeaderIcon: HeadeIconWrapper,
HeaderAfterIconElement: HeaderAfterIconElementWrapper
},
BodyComponent: BodyComponent,
closeOptions: {
canClosePanel: function () {
var _canClosePanel = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
var extensionState;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (!editorView.isDestroyed) {
_context.next = 2;
break;
}
return _context.abrupt("return", true);
case 2:
extensionState = (0, _pluginFactory.getPluginState)(editorView.state);
/**
* If context panel is open, then first update extension plugin state.
* Updating extension plugin state will trigger useEffect in useConfigPanelPluginHook,
* which will call hideConfigPanel.
*/
if (!(extensionState !== null && extensionState !== void 0 && extensionState.showContextPanel)) {
_context.next = 7;
break;
}
_context.next = 6;
return startClosingConfigPanel({
api: api,
editorView: editorView
});
case 6:
return _context.abrupt("return", false);
case 7:
return _context.abrupt("return", true);
case 8:
case "end":
return _context.stop();
}
}, _callee);
}));
function canClosePanel() {
return _canClosePanel.apply(this, arguments);
}
return canClosePanel;
}()
}
}, 'push', _constants.CONFIG_PANEL_WIDTH);
}
}
function startClosingConfigPanel(_x) {
return _startClosingConfigPanel.apply(this, arguments);
}
function _startClosingConfigPanel() {
_startClosingConfigPanel = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(_ref3) {
var _api$contextPanel3;
var api, editorView, applyChange;
return _regenerator.default.wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
api = _ref3.api, editorView = _ref3.editorView;
applyChange = api === null || api === void 0 || (_api$contextPanel3 = api.contextPanel) === null || _api$contextPanel3 === void 0 ? void 0 : _api$contextPanel3.actions.applyChange; // Even if the save failed, we should proceed with closing the panel
(0, _commands.clearEditingContext)(applyChange)(editorView.state, editorView.dispatch);
_context3.prev = 3;
_context3.next = 6;
return new Promise(function (resolve, reject) {
(0, _commands.forceAutoSave)(applyChange)(resolve, reject)(editorView.state, editorView.dispatch);
});
case 6:
_context3.next = 11;
break;
case 8:
_context3.prev = 8;
_context3.t0 = _context3["catch"](3);
// Even if the save failed, we should proceed with closing the panel
// eslint-disable-next-line no-console
console.error("Autosave failed with error", _context3.t0);
case 11:
case "end":
return _context3.stop();
}
}, _callee3, null, [[3, 8]]);
}));
return _startClosingConfigPanel.apply(this, arguments);
}
var getContextPanelBodyComponent = exports.getContextPanelBodyComponent = function getContextPanelBodyComponent(_ref4) {
var _api$featureFlags;
var api = _ref4.api,
editorView = _ref4.editorView,
extensionProvider = _ref4.extensionProvider,
nodeWithPos = _ref4.nodeWithPos;
var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
var editorState = editorView.state;
var extensionState = (0, _pluginFactory.getPluginState)(editorState);
var autoSaveResolve = extensionState.autoSaveResolve,
autoSaveReject = extensionState.autoSaveReject,
processParametersBefore = extensionState.processParametersBefore;
var _nodeWithPos$node$att = nodeWithPos.node.attrs,
extensionType = _nodeWithPos$node$att.extensionType,
extensionKey = _nodeWithPos$node$att.extensionKey,
parameters = _nodeWithPos$node$att.parameters;
var _getExtensionKeyAndNo3 = (0, _extensions.getExtensionKeyAndNodeKey)(extensionKey, extensionType),
_getExtensionKeyAndNo4 = (0, _slicedToArray2.default)(_getExtensionKeyAndNo3, 2),
extKey = _getExtensionKeyAndNo4[0],
nodeKey = _getExtensionKeyAndNo4[1];
var configParams = processParametersBefore ? processParametersBefore(parameters || {}) : parameters;
return function () {
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
padding: "space.200"
}, /*#__PURE__*/_react.default.createElement(_SaveIndicator.SaveIndicator, {
duration: 5000,
visible: true
}, function (_ref5) {
var onSaveStarted = _ref5.onSaveStarted,
onSaveEnded = _ref5.onSaveEnded;
return /*#__PURE__*/_react.default.createElement(_ConfigPanelLoader.default, {
api: api,
showHeader: true,
closeOnEsc: true,
extensionType: extensionType,
extensionKey: extKey,
nodeKey: nodeKey,
extensionParameters: parameters,
parameters: configParams,
extensionProvider: extensionProvider,
autoSaveTrigger: autoSaveResolve,
autoSaveReject: autoSaveReject
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onChange: ( /*#__PURE__*/function () {
var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(updatedParameters) {
return _regenerator.default.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
_context2.next = 2;
return (0, _contextPanel.onChangeAction)(editorView, updatedParameters, parameters, nodeWithPos, onSaveStarted);
case 2:
onSaveEnded();
if (autoSaveResolve) {
autoSaveResolve();
}
case 4:
case "end":
return _context2.stop();
}
}, _callee2);
}));
return function (_x2) {
return _ref6.apply(this, arguments);
};
}())
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onCancel: function onCancel() {
return startClosingConfigPanel({
api: api,
editorView: editorView
});
},
featureFlags: featureFlags
// Remove below prop when cleaning platform_editor_ai_object_sidebar_injection FG
// Becuase it will always be true
,
usingObjectSidebarPanel: true
});
}));
};
};