@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
110 lines (107 loc) • 6.38 kB
JavaScript
"use strict";
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ToolbarNext = exports.Toolbar = void 0;
var _react = _interopRequireWildcard(require("react"));
var _hooks = require("@atlaskit/editor-common/hooks");
var _toolbar = require("@atlaskit/editor-common/toolbar");
var _types = require("@atlaskit/editor-common/types");
var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
var _editorToolbar = require("@atlaskit/editor-toolbar");
var _editorToolbarModel = require("@atlaskit/editor-toolbar-model");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _ToolbarInner = require("./ToolbarInner");
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 TOOLBAR_FALLBACKS = {
group: _editorToolbar.ToolbarButtonGroup,
section: _editorToolbar.ToolbarSection,
menuSection: _editorToolbar.ToolbarDropdownItemSection
};
/**
* *Warning:* With `platform_editor_toolbar_aifc` enabled this component is no longer used and is replaced with `<ToolbarNext />`.
*
* If making changes to this component please ensure to also update `<ToolbarNext />`.
*/
var Toolbar = exports.Toolbar = function Toolbar(props) {
return /*#__PURE__*/_react.default.createElement(_ToolbarInner.ToolbarInner, {
items: props.items,
editorView: props.editorView,
editorActions: props.editorActions,
eventDispatcher: props.eventDispatcher,
providerFactory: props.providerFactory,
appearance: props.appearance,
popupsMountPoint: props.popupsMountPoint,
popupsBoundariesElement: props.popupsBoundariesElement,
popupsScrollableElement: props.popupsScrollableElement,
disabled: props.disabled,
dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
toolbarSize: props.toolbarSize,
isToolbarReducedSpacing: props.toolbarSize < _types.ToolbarSize.XXL,
containerElement: props.containerElement
});
};
var usePluginState = function usePluginState(api) {
return (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity', 'editorViewMode', 'userPreferences'], function (state) {
var _state$connectivitySt, _state$editorViewMode, _state$userPreference;
return {
connectivityStateMode: (_state$connectivitySt = state.connectivityState) === null || _state$connectivitySt === void 0 ? void 0 : _state$connectivitySt.mode,
editorViewMode: (_state$editorViewMode = state.editorViewModeState) === null || _state$editorViewMode === void 0 ? void 0 : _state$editorViewMode.mode,
editorToolbarDockingPreference: (_state$userPreference = state.userPreferencesState) === null || _state$userPreference === void 0 || (_state$userPreference = _state$userPreference.preferences) === null || _state$userPreference === void 0 ? void 0 : _state$userPreference.toolbarDockingPosition
};
});
};
/**
* Renders a primary toolbar, driven by components registed by `editor-plugin-toolbar`. `ToolbarModelRenderer` will just
* render the toolbar structure, the design is driven per component registered including the toolbar itself.
*
* The majority of components UI should use `@atlaskit/editor-toolbar` components.
*/
var ToolbarNext = exports.ToolbarNext = function ToolbarNext(_ref) {
var toolbar = _ref.toolbar,
components = _ref.components,
editorView = _ref.editorView,
editorAPI = _ref.editorAPI,
popupsMountPoint = _ref.popupsMountPoint,
editorAppearance = _ref.editorAppearance,
popupsBoundariesElement = _ref.popupsBoundariesElement,
popupsScrollableElement = _ref.popupsScrollableElement,
isDisabled = _ref.isDisabled;
var _usePluginState = usePluginState(editorAPI),
connectivityStateMode = _usePluginState.connectivityStateMode,
editorViewMode = _usePluginState.editorViewMode,
editorToolbarDockingPreference = _usePluginState.editorToolbarDockingPreference;
// remove offline check when patch6Enabled is cleaned up
var isOffline = (0, _editorPluginConnectivity.isOfflineMode)(connectivityStateMode);
var memoizedFireAnalyticsEvent = (0, _react.useCallback)(function (payload) {
var _editorAPI$analytics;
editorAPI === null || editorAPI === void 0 || (_editorAPI$analytics = editorAPI.analytics) === null || _editorAPI$analytics === void 0 || _editorAPI$analytics.actions.fireAnalyticsEvent(payload);
}, [editorAPI]);
var fireAnalyticsEvent = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedFireAnalyticsEvent : function (payload) {
return memoizedFireAnalyticsEvent(payload);
};
var fallbacks = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? TOOLBAR_FALLBACKS : {
group: _editorToolbar.ToolbarButtonGroup,
section: _editorToolbar.ToolbarSection,
menuSection: _editorToolbar.ToolbarDropdownItemSection
};
return /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
editorView: editorView !== null && editorView !== void 0 ? editorView : null,
editorAppearance: editorAppearance,
editorViewMode: editorViewMode !== null && editorViewMode !== void 0 ? editorViewMode : 'edit',
editorToolbarDockingPreference: editorToolbarDockingPreference,
isOffline: isOffline
}, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarUIProvider, {
api: editorAPI,
isDisabled: isDisabled,
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement,
fireAnalyticsEvent: fireAnalyticsEvent
}, /*#__PURE__*/_react.default.createElement(_editorToolbarModel.ToolbarModelRenderer, {
toolbar: toolbar,
components: components,
fallbacks: fallbacks
})));
};