@atlaskit/editor-plugin-breakout
Version:
Breakout plugin for @atlaskit/editor-core
187 lines (181 loc) • 8.95 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _analytics = require("@atlaskit/editor-common/analytics");
var _styles = require("@atlaskit/editor-common/styles");
var _ui = require("@atlaskit/editor-common/ui");
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
var _utils = require("@atlaskit/editor-common/utils");
var _state = require("@atlaskit/editor-prosemirror/state");
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _growHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/grow-horizontal"));
var _shrinkHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/shrink-horizontal"));
var _constants = require("@atlaskit/theme/constants");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _removeBreakout = require("../editor-commands/remove-breakout");
var _setBreakoutMode = require("../editor-commands/set-breakout-mode");
var _pluginKey = require("../pm-plugins/plugin-key");
var _isBreakoutMarkAllowed = require("../pm-plugins/utils/is-breakout-mark-allowed");
var _isSupportedNode = require("../pm-plugins/utils/is-supported-node");
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var toolbarButtonWrapperStyles = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'&& button': {
background: "var(--ds-background-neutral, #0515240F)",
color: "var(--ds-icon, #292A2E)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
':hover': {
background: "var(--ds-background-neutral-hovered, #0B120E24)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
color: "var(--ds-icon, #292A2E)".concat(" !important")
}
}
});
var toolbarButtonNarrowScreenStyles = (0, _react2.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'&& button': {
visibility: 'hidden',
opacity: 0
}
}));
function getBreakoutNodeElement(pluginState, selection, editorView) {
if (!pluginState.breakoutNode) {
return undefined;
}
if (selection instanceof _state.NodeSelection && (0, _isSupportedNode.isSupportedNodeForBreakout)(selection.node)) {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
return (0, _utils2.findDomRefAtPos)(selection.from, editorView.domAtPos.bind(editorView));
}
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
return (0, _utils2.findParentDomRefOfType)(pluginState.breakoutNode.node.type, editorView.domAtPos.bind(editorView))(selection);
}
var LayoutButton = function LayoutButton(_ref) {
var _api$analytics3;
var formatMessage = _ref.intl.formatMessage,
mountPoint = _ref.mountPoint,
boundariesElement = _ref.boundariesElement,
scrollableElement = _ref.scrollableElement,
editorView = _ref.editorView,
isLivePage = _ref.isLivePage,
isBreakoutNodePresent = _ref.isBreakoutNodePresent,
breakoutModeProp = _ref.breakoutMode,
api = _ref.api;
var handleClick = (0, _react.useCallback)(function (breakoutMode) {
var _getPluginState;
if ((0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
return;
}
// Remove ! during platform_editor_hydratable_ui cleanup
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var _ref2 = editorView,
state = _ref2.state,
dispatch = _ref2.dispatch;
var breakoutNode = (_getPluginState = (0, _pluginKey.getPluginState)(state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.breakoutNode;
if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
var _api$analytics;
(0, _setBreakoutMode.setBreakoutMode)(breakoutMode, isLivePage)(state, dispatch);
api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
action: _analytics.ACTION.CHANGED_BREAKOUT_MODE,
actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
eventType: _analytics.EVENT_TYPE.TRACK,
attributes: {
mode: breakoutMode,
nodeType: breakoutNode === null || breakoutNode === void 0 ? void 0 : breakoutNode.node.type.name
}
});
} else {
var _api$analytics2;
(0, _removeBreakout.removeBreakout)(isLivePage)(state, dispatch);
api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.fireAnalyticsEvent({
action: _analytics.ACTION.CHANGED_BREAKOUT_MODE,
actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
eventType: _analytics.EVENT_TYPE.TRACK,
attributes: {
mode: 'center',
nodeType: breakoutNode === null || breakoutNode === void 0 ? void 0 : breakoutNode.node.type.name
}
});
}
}, [api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, editorView, isLivePage]);
if ((0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
return null;
}
// Remove ! during platform_editor_hydratable_ui cleanup
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
if (!isBreakoutNodePresent || !(0, _isBreakoutMarkAllowed.isBreakoutMarkAllowed)(editorView.state)) {
return null;
}
var breakoutMode = breakoutModeProp;
var titleMessage = (0, _utils.getTitle)(breakoutMode);
var title = formatMessage(titleMessage);
var nextBreakoutMode = (0, _utils.getNextBreakoutMode)(breakoutMode);
var belowOtherPopupsZIndex = _constants.layers.layer() - 1;
// Remove ! during platform_editor_hydratable_ui cleanup
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var pluginState = (0, _pluginKey.getPluginState)(editorView.state);
if (!pluginState) {
return null;
}
// Remove ! during platform_editor_hydratable_ui cleanup
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var element = getBreakoutNodeElement(pluginState, editorView.state.selection, editorView);
if (!element) {
return null;
}
var closestEl = element.querySelector(".".concat(_styles.BreakoutCssClassName.BREAKOUT_MARK_DOM));
if (closestEl && closestEl.firstChild) {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
element = closestEl.firstChild;
}
return (0, _react2.jsx)(_ui.Popup, {
ariaLabel: title,
target: element
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
offset: [5, 0],
alignY: "start",
alignX: "end",
mountTo: mountPoint,
boundariesElement: boundariesElement,
scrollableElement: scrollableElement,
stick: true,
forcePlacement: true,
zIndex: belowOtherPopupsZIndex
}, (0, _react2.jsx)("div", {
css: [toolbarButtonWrapperStyles, (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true) && toolbarButtonNarrowScreenStyles]
}, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
title: title,
testId: titleMessage.id
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onClick: function onClick() {
return handleClick(nextBreakoutMode);
},
iconBefore: breakoutMode === 'full-width' ? (0, _react2.jsx)(_shrinkHorizontal.default, {
label: title,
spacing: "spacious"
}) : (0, _react2.jsx)(_growHorizontal.default, {
label: title,
spacing: "spacious"
})
})));
};
LayoutButton.displayName = 'LayoutButton';
var _default_1 = (0, _reactIntl.injectIntl)(LayoutButton);
var _default = exports.default = _default_1;