@atlaskit/editor-plugin-toolbar
Version:
Toolbar plugin for @atlaskit/editor-core
155 lines (154 loc) • 10.6 kB
JavaScript
"use strict";
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SelectionToolbarWithErrorBoundary = exports.SelectionToolbar = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactIntl = require("react-intl");
var _analytics = require("@atlaskit/editor-common/analytics");
var _coreUtils = require("@atlaskit/editor-common/core-utils");
var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
var _hooks = require("@atlaskit/editor-common/hooks");
var _monitoring = require("@atlaskit/editor-common/monitoring");
var _toolbar = require("@atlaskit/editor-common/toolbar");
var _ui = require("@atlaskit/editor-common/ui");
var _utils = require("@atlaskit/editor-common/utils");
var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
var _state = require("@atlaskit/editor-prosemirror/state");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _editorToolbar = require("@atlaskit/editor-toolbar");
var _editorToolbarModel = require("@atlaskit/editor-toolbar-model");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _consts = require("../consts");
var _keyboardConfig = require("./keyboard-config");
var _utils2 = require("./utils");
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 isToolbarComponent = function isToolbarComponent(component) {
return component.type === 'toolbar' && component.key === 'inline-text-toolbar';
};
var usePluginState = function usePluginState(api) {
return (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity', 'userPreferences', 'toolbar', 'selection', 'userIntent', 'editorViewMode'], function (state) {
var _state$connectivitySt, _state$userPreference, _state$toolbarState, _state$toolbarState2, _state$selectionState, _state$userIntentStat, _state$editorViewMode;
return {
connectivityStateMode: (_state$connectivitySt = state.connectivityState) === null || _state$connectivitySt === void 0 ? void 0 : _state$connectivitySt.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,
shouldShowToolbar: (_state$toolbarState = state.toolbarState) === null || _state$toolbarState === void 0 ? void 0 : _state$toolbarState.shouldShowToolbar,
selectedNode: (_state$toolbarState2 = state.toolbarState) === null || _state$toolbarState2 === void 0 ? void 0 : _state$toolbarState2.selectedNode,
selection: (_state$selectionState = state.selectionState) === null || _state$selectionState === void 0 ? void 0 : _state$selectionState.selection,
currentUserIntent: (_state$userIntentStat = state.userIntentState) === null || _state$userIntentStat === void 0 ? void 0 : _state$userIntentStat.currentUserIntent,
editorViewMode: (_state$editorViewMode = state.editorViewModeState) === null || _state$editorViewMode === void 0 ? void 0 : _state$editorViewMode.mode
};
});
};
var useOnPositionCalculated = function useOnPositionCalculated(editorView) {
var onPositionCalculated = (0, _react.useCallback)(function (position) {
try {
// Show special position on cell selection only when editor controls experiment is enabled
var isEditorControlsEnabled = (0, _expValEquals.expValEquals)('platform_editor_controls', 'cohort', 'variant1');
var isCellSelection = ('$anchorCell' in editorView.state.selection);
if (isCellSelection && isEditorControlsEnabled) {
return (0, _utils.calculateToolbarPositionOnCellSelection)(_consts.SELECTION_TOOLBAR_LABEL)(editorView, position);
}
return (0, _utils.calculateToolbarPositionTrackHead)(_consts.SELECTION_TOOLBAR_LABEL)(editorView, position);
} catch (error) {
(0, _monitoring.logException)(error, {
location: 'editor-plugin-toolbar/selectionToolbar'
});
return position;
}
}, [editorView]);
return onPositionCalculated;
};
var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref) {
var _api$toolbar$actions$, _api$toolbar, _api$toolbar2;
var api = _ref.api,
editorView = _ref.editorView,
mountPoint = _ref.mountPoint,
disableSelectionToolbarWhenPinned = _ref.disableSelectionToolbarWhenPinned;
var _usePluginState = usePluginState(api),
connectivityStateMode = _usePluginState.connectivityStateMode,
editorToolbarDockingPreference = _usePluginState.editorToolbarDockingPreference,
currentUserIntent = _usePluginState.currentUserIntent,
shouldShowToolbar = _usePluginState.shouldShowToolbar,
editorViewMode = _usePluginState.editorViewMode;
var contextualFormattingEnabled = (_api$toolbar$actions$ = api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.contextualFormattingMode()) !== null && _api$toolbar$actions$ !== void 0 ? _api$toolbar$actions$ : 'always-pinned';
var selectionToolbarConfigEnabled = (0, _toolbar.shouldShowSelectionToolbar)(contextualFormattingEnabled, editorToolbarDockingPreference);
var intl = (0, _reactIntl.useIntl)();
var components = api === null || api === void 0 || (_api$toolbar2 = api.toolbar) === null || _api$toolbar2 === void 0 ? void 0 : _api$toolbar2.actions.getComponents();
var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
return isToolbarComponent(component);
});
var keyboardNavigation = (0, _react.useMemo)(function () {
return (0, _keyboardConfig.getKeyboardNavigationConfig)(editorView, intl, api);
}, [editorView, intl, api]);
var _useToolbarUI = (0, _editorToolbar.useToolbarUI)(),
isDisabled = _useToolbarUI.isDisabled;
var isOffline = (0, _editorPluginConnectivity.isOfflineMode)(connectivityStateMode);
var isTextSelection = !editorView.state.selection.empty && editorView.state.selection instanceof _state.TextSelection;
var isAllSelection = !editorView.state.selection.empty && editorView.state.selection instanceof _state.AllSelection;
var isCellSelection = !editorView.state.selection.empty && '$anchorCell' in editorView.state.selection;
var onPositionCalculated = useOnPositionCalculated(editorView);
if (selectionToolbarConfigEnabled && disableSelectionToolbarWhenPinned || !components || !toolbar) {
return null;
}
if (!(isTextSelection || isCellSelection || isAllSelection) || currentUserIntent === 'dragging' || !shouldShowToolbar || currentUserIntent === 'blockMenuOpen' && (0, _experiments.editorExperiment)('platform_editor_block_menu', true) ||
// hide toolbar when user intent is not default, except when it's dragHandleSelected without cell selection
currentUserIntent && currentUserIntent !== 'default' && !(currentUserIntent === 'dragHandleSelected' && !isCellSelection) || (0, _coreUtils.isSSR)()) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_ui.Popup
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
offset: [0, 10],
target: (0, _utils2.getDomRefFromSelection)(editorView),
onPositionCalculated: onPositionCalculated,
mountTo: mountPoint,
zIndex: (0, _platformFeatureFlags.fg)('platform_editor_sel_toolbar_stacking_fix') ? _editorSharedStyles.akEditorFloatingDialogZIndex : undefined
}, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
editorView: editorView,
editorToolbarDockingPreference: editorToolbarDockingPreference,
editorViewMode: editorViewMode !== null && editorViewMode !== void 0 ? editorViewMode : 'edit',
isOffline: isOffline
}, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarUIProvider, {
api: api,
isDisabled: isDisabled
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
fireAnalyticsEvent: function fireAnalyticsEvent(payload) {
var _api$analytics;
api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent(payload);
},
keyboardNavigation: keyboardNavigation
}, /*#__PURE__*/_react.default.createElement(_editorToolbarModel.ToolbarModelRenderer, {
toolbar: toolbar,
components: components
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
fallbacks: {
section: _editorToolbar.ToolbarSection,
menuSection: _editorToolbar.ToolbarDropdownItemSection,
group: _editorToolbar.ToolbarButtonGroup
}
}))));
};
var SelectionToolbarWithErrorBoundary = exports.SelectionToolbarWithErrorBoundary = function SelectionToolbarWithErrorBoundary(_ref2) {
var _api$analytics2;
var api = _ref2.api,
editorView = _ref2.editorView,
mountPoint = _ref2.mountPoint,
disableSelectionToolbarWhenPinned = _ref2.disableSelectionToolbarWhenPinned;
return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
component: _analytics.ACTION_SUBJECT.TOOLBAR,
componentId: _analytics.ACTION_SUBJECT_ID.SELECTION_TOOLBAR,
dispatchAnalyticsEvent: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent,
fallbackComponent: null
}, /*#__PURE__*/_react.default.createElement(SelectionToolbar, {
api: api,
editorView: editorView,
mountPoint: mountPoint,
disableSelectionToolbarWhenPinned: disableSelectionToolbarWhenPinned
}));
};