@atlaskit/editor-plugin-floating-toolbar
Version:
Floating toolbar plugin for @atlaskit/editor-core
255 lines (251 loc) • 10.8 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ExtensionsPlaceholder = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _react = _interopRequireWildcard(require("react"));
var _reactLoadable = _interopRequireDefault(require("react-loadable"));
var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
var _extensions = require("@atlaskit/editor-common/extensions");
var _nesting = require("@atlaskit/editor-common/nesting");
var _ui = require("@atlaskit/editor-common/ui");
var _utils = require("@atlaskit/editor-common/utils");
var _Dropdown = _interopRequireDefault(require("./Dropdown"));
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 noop = function noop() {
return null;
};
var isDefaultExport = function isDefaultExport(mod) {
return mod.hasOwnProperty('default');
};
var resolveExtensionIcon = /*#__PURE__*/function () {
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(getIcon) {
var maybeIcon;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (getIcon) {
_context.next = 2;
break;
}
return _context.abrupt("return", noop);
case 2:
_context.next = 4;
return getIcon();
case 4:
maybeIcon = _context.sent;
return _context.abrupt("return", isDefaultExport(maybeIcon) ? maybeIcon.default : maybeIcon);
case 6:
case "end":
return _context.stop();
}
}, _callee);
}));
return function resolveExtensionIcon(_x) {
return _ref.apply(this, arguments);
};
}();
var ExtensionButton = function ExtensionButton(props) {
var item = props.item,
node = props.node,
extensionApi = props.extensionApi,
areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
var ButtonIcon = _react.default.useMemo(function () {
return item.icon ? (0, _reactLoadable.default)({
// Ignored via go/ees005
// eslint-disable-next-line require-await
loader: function () {
var _loader = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
return _regenerator.default.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
return _context2.abrupt("return", resolveExtensionIcon(item.icon));
case 1:
case "end":
return _context2.stop();
}
}, _callee2);
}));
function loader() {
return _loader.apply(this, arguments);
}
return loader;
}(),
loading: noop
}) : undefined;
}, [item.icon]);
var onClick = function onClick() {
if (typeof item.action !== 'function') {
throw new Error("'action' of context toolbar item '".concat(item.key, "' is not a function"));
}
var targetNodeAdf = (0, _utils.nodeToJSON)(node);
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
item.action(targetNodeAdf, extensionApi);
};
var getAriaLabel = function getAriaLabel() {
if (item.ariaLabel) {
return item.ariaLabel;
}
if (typeof item.tooltip === 'string') {
return item.tooltip;
}
if (item.label) {
return item.label;
}
return '';
};
return /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
title: item.label,
ariaLabel: getAriaLabel(),
icon: ButtonIcon ? /*#__PURE__*/_react.default.createElement(ButtonIcon, {
label: item.label || ''
}) : undefined,
onClick: onClick,
tooltipContent: item.tooltip,
tooltipStyle: item.tooltipStyle,
disabled: item.disabled,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
}, item.label);
};
var ExtensionsPlaceholder = exports.ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
var node = props.node,
editorView = props.editorView,
extensionProvider = props.extensionProvider,
separator = props.separator,
applyChangeToContextPanel = props.applyChangeToContextPanel,
extensionApi = props.extensionApi,
scrollable = props.scrollable,
setDisableScroll = props.setDisableScroll,
dispatchCommand = props.dispatchCommand,
popupsMountPoint = props.popupsMountPoint,
popupsBoundariesElement = props.popupsBoundariesElement,
popupsScrollableElement = props.popupsScrollableElement,
alignDropdownWithToolbar = props.alignDropdownWithToolbar,
areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var _useState = (0, _react.useState)([]),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
extensions = _useState2[0],
setExtensions = _useState2[1];
(0, _react.useEffect)(function () {
getExtensions();
function getExtensions() {
return _getExtensions.apply(this, arguments);
} // leaving dependencies array empty so that this effect runs just once on component mount
// eslint-disable-next-line react-hooks/exhaustive-deps
function _getExtensions() {
_getExtensions = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
var provider;
return _regenerator.default.wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
_context3.next = 2;
return extensionProvider;
case 2:
provider = _context3.sent;
if (!provider) {
_context3.next = 9;
break;
}
_context3.t0 = setExtensions;
_context3.next = 7;
return provider.getExtensions();
case 7:
_context3.t1 = _context3.sent;
(0, _context3.t0)(_context3.t1);
case 9:
case "end":
return _context3.stop();
}
}, _callee3);
}));
return _getExtensions.apply(this, arguments);
}
}, []);
var nodeAdf = _react.default.useMemo(function () {
return (0, _utils.nodeToJSON)(node);
}, [node]);
var extensionItems = _react.default.useMemo(function () {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return (0, _extensions.getContextualToolbarItemsFromModule)(extensions, nodeAdf, extensionApi);
}, [extensions, nodeAdf, extensionApi]);
if (!extensionItems.length) {
return null;
}
// ButtonGroup wraps each child with another layer
// but count fragment as 1 child, so here we create the children manually.
var children = [];
if (separator && ['start', 'both'].includes(separator)) {
children.push( /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, {
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
}));
}
var isNestedTable = (0, _nesting.isNestedTablesSupported)(editorView.state.schema) && (0, _nesting.isSelectionTableNestedInTable)(editorView.state);
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
extensionItems.forEach(function (item, index) {
// disable the referentiality and charts extensions for nested tables
if (isNestedTable && ['referentiality:connections', 'chart:insert-chart'].includes(item.key)) {
item.disabled = true;
}
if ('type' in item && item.type === 'dropdown') {
children.push( /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
key: item.id,
title: item.title,
icon: item.icon,
dispatchCommand: dispatchCommand || function () {},
options: item.options,
disabled: item.disabled,
tooltip: item.tooltip,
hideExpandIcon: item.hideExpandIcon,
mountPoint: popupsMountPoint,
boundariesElement: popupsBoundariesElement,
scrollableElement: popupsScrollableElement,
dropdownWidth: item.dropdownWidth,
showSelected: item.showSelected,
buttonTestId: item.testId,
editorView: editorView,
setDisableParentScroll: scrollable ? setDisableScroll : undefined,
dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && "".concat(item.id, "-dropdownList"),
alignDropdownWithToolbar: alignDropdownWithToolbar,
onToggle: item.onToggle,
footer: item.footer,
onMount: item.onMount,
onClick: item.onClick,
pulse: item.pulse,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
}));
} else {
children.push( /*#__PURE__*/_react.default.createElement(ExtensionButton, {
node: node,
item: item,
editorView: editorView,
applyChangeToContextPanel: applyChangeToContextPanel,
extensionApi: extensionApi,
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
}));
}
if (index < extensionItems.length - 1) {
children.push( /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, {
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
}));
}
});
if (separator && ['end', 'both'].includes(separator)) {
children.push( /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, {
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
}));
}
// eslint-disable-next-line react/no-children-prop
return /*#__PURE__*/_react.default.createElement(_buttonGroup.default, {
children: children
});
};