@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
357 lines (347 loc) • 21.5 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.FullPageContentArea = exports.EDITOR_CONTAINER = exports.CONTENT_AREA_TEST_ID = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _classnames = _interopRequireDefault(require("classnames"));
var _reactIntl = require("react-intl");
var _adfSchema = require("@atlaskit/adf-schema");
var _hooks = require("@atlaskit/editor-common/hooks");
var _messages = require("@atlaskit/editor-common/messages");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _ClickAreaBlock = _interopRequireDefault(require("../../Addon/ClickAreaBlock"));
var _contentComponentWrapper = require("../../Addon/ClickAreaBlock/contentComponentWrapper");
var _ContextPanel = require("../../ContextPanel");
var _EditorContentContainer = _interopRequireDefault(require("../../EditorContentContainer/EditorContentContainer"));
var _PluginSlot = _interopRequireDefault(require("../../PluginSlot"));
var _StyledComponents = require("./StyledComponents");
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); }
/**
* @jsxRuntime classic
* @jsx jsx
*/
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
// Ignored via go/ees005
// eslint-disable-next-line import/no-named-as-default
var akEditorFullWidthLayoutWidth = 1800;
var akEditorUltraWideLayoutWidth = 4000;
var akEditorSwoopCubicBezier = "cubic-bezier(0.15, 1, 0.3, 1)";
var tableMarginFullWidthMode = 2;
var akLayoutGutterOffset = 12;
var SWOOP_ANIMATION = "0.5s ".concat(akEditorSwoopCubicBezier);
var AK_NESTED_DND_GUTTER_OFFSET = 8;
var getTotalPadding = function getTotalPadding() {
return (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2;
};
var editorContentAreaProsemirrorStyle = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& .ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)({
flexGrow: 1,
boxSizing: 'border-box',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& > *': {
clear: 'both'
}
}, "> p, > ul, > ol:not(".concat(_adfSchema.taskListSelector, "):not(").concat(_adfSchema.decisionListSelector, "), > h1, > h2, > h3, > h4, > h5, > h6"), {
clear: 'none'
}), '> p:last-child', {
marginBottom: "var(--ds-space-300, 24px)"
})
});
var hideEditorContentAreaProsemirrorStyle = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& .ProseMirror': {
display: 'none'
}
});
var hideEditorContentAreaProsemirrorWithAttributeStyle = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'&[data-markdown-mode-hide-prosemirror="true"] .ProseMirror': {
display: 'none'
}
});
var fullWidthNonChromelessBreakoutBlockTableStyle = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
'.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
width: '100% !important'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.fabric-editor-breakout-mark': {
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
marginLeft: 'unset !important',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
transform: 'none !important'
}
}
});
// An additional spacing applied at the top of the content area reserving space when the primary toolbar
// is hidden – this avoids layout shift when the toolbar is toggled under the editor controls feature
var contentAreaReservedPrimaryToolbarSpace = (0, _react2.css)({
// extra 1px to account for the bottom border on the toolbar
marginTop: "calc(".concat("var(--ds-space-500, 40px)", " + 1px)")
});
// A reduced top spacing applied to the content area to compensate for the reserved space at the top
// of the page when the primary toolbar is hidden under the editor controls feature
var contentAreaReducedHeaderSpace = (0, _react2.css)({
paddingTop: "var(--ds-space-400, 32px)"
});
// new styles
var editorContentAreaNew = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: '24px',
paddingTop: "var(--ds-space-600, 48px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'.ak-editor-content-area-no-toolbar &': {
// When the toolbar is hidden, we don't want content to jump up
// the extra 1px is to account for the border on the toolbar
paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + var(--ak-editor-fullpage-toolbar-height) + 1px)")
},
paddingBottom: "var(--ds-space-600, 48px)",
height: 'calc( 100% - 105px )',
width: '100%',
margin: 'auto',
flexDirection: 'column',
flexGrow: 1,
maxWidth: 'var(--ak-editor-content-area-max-width)',
transition: "max-width ".concat(SWOOP_ANIMATION)
});
var tableFullPageEditorStylesNew = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror .pm-table-wrapper > table': {
marginLeft: 0,
/* 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212 */
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginRight: '-1px',
width: '100%'
}
});
var editorContentAreaContainerNestedDndStyle = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.fabric-editor--full-width-mode': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'[data-layout-section]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
maxWidth: "calc(100% + ".concat((akLayoutGutterOffset + AK_NESTED_DND_GUTTER_OFFSET) * 2, "px)")
}
}
});
/* Prevent horizontal scroll on page in full width mode */
var editorContentAreaContainerStyleExcludeCodeBlockNew = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.fabric-editor--full-width-mode': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.extension-container, .multiBodiedExtension--container': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
maxWidth: "calc(100% - ".concat(tableMarginFullWidthMode * 2, "px)")
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.extension-container.inline': {
maxWidth: '100%'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'td .extension-container.inline': {
maxWidth: 'inherit'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'[data-layout-section]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
maxWidth: "calc(100% + ".concat(akLayoutGutterOffset * 2, "px)")
}
}
});
/* Prevent horizontal scroll on page in full width mode */
var editorContentAreaContainerStyleNew = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.fabric-editor--full-width-mode': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.code-block, .extension-container, .multiBodiedExtension--container': {
maxWidth: "calc(100% - ".concat(tableMarginFullWidthMode * 2, "px)")
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.extension-container.inline': {
maxWidth: '100%'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'td .extension-container.inline': {
maxWidth: 'inherit'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'[data-layout-section]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
maxWidth: "calc(100% + ".concat(akLayoutGutterOffset * 2, "px)")
}
}
});
var editorContentGutterStyleFG = (0, _react2.css)({
padding: '0 72px'
});
var editorContentGutterStyles = (0, _react2.css)({
boxSizing: 'border-box',
padding: '0 52px'
});
var editorContentReducedGutterStyles = (0, _react2.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
padding: "0 ".concat(_editorSharedStyles.akEditorGutterPaddingReduced, "px")
}));
var contentAreaNew = (0, _react2.css)({
display: 'flex',
flexDirection: 'row',
height: "calc(100% - var(--ak-editor-fullpage-toolbar-height))",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
'&.ak-editor-content-area-no-toolbar': {
// The editor toolbar height is 1px off (from the border) -- so we need to add 1px to the height
// to match the toolbar height
height: "calc(100% + 1px)"
},
boxSizing: 'border-box',
margin: 0,
padding: 0,
transition: "padding 0ms ".concat(akEditorSwoopCubicBezier)
});
var contentAreaHeightNoToolbar = (0, _react2.css)({
height: '100%'
});
var CONTENT_AREA_TEST_ID = exports.CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
var EDITOR_CONTAINER = exports.EDITOR_CONTAINER = 'ak-editor-container';
var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
var _props$editorAPI, _props$editorAPI$bloc, _props$editorAPI2, _contentAreaRef$curre, _allowScrollGutter$gu, _allowScrollGutter$gu2;
var theme = (0, _react2.useTheme)();
var fullWidthMode = props.appearance === 'full-width';
var maxWidthMode = props.appearance === 'max';
var scrollContainerRef = (0, _react.useRef)(null);
var contentAreaRef = (0, _react.useRef)(null);
var containerRef = (0, _react.useRef)(null);
var allowScrollGutter = (_props$editorAPI = props.editorAPI) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.base) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.sharedState.currentState()) === null || _props$editorAPI === void 0 ? void 0 : _props$editorAPI.allowScrollGutter;
var contentAreaMaxWidth = getTotalPadding() + (!fullWidthMode ? maxWidthMode ? akEditorUltraWideLayoutWidth : theme.layoutMaxWidth : akEditorFullWidthLayoutWidth);
// Get useStandardNodeWidth from block menu plugin shared state
// Only access editorAPI when the experiment is enabled to avoid performance impact
var useStandardNodeWidth = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && ((_props$editorAPI$bloc = (_props$editorAPI2 = props.editorAPI) === null || _props$editorAPI2 === void 0 || (_props$editorAPI2 = _props$editorAPI2.blockMenu) === null || _props$editorAPI2 === void 0 || (_props$editorAPI2 = _props$editorAPI2.sharedState) === null || _props$editorAPI2 === void 0 || (_props$editorAPI2 = _props$editorAPI2.currentState()) === null || _props$editorAPI2 === void 0 ? void 0 : _props$editorAPI2.useStandardNodeWidth) !== null && _props$editorAPI$bloc !== void 0 ? _props$editorAPI$bloc : false);
(0, _react.useImperativeHandle)(ref, function () {
return {
get scrollContainer() {
return scrollContainerRef.current;
},
get contentArea() {
return contentAreaRef.current;
},
get containerArea() {
return containerRef.current;
}
};
}, []);
var markdownPluginCurrentView = (0, _hooks.useSharedPluginStateWithSelector)(props.editorAPI, ['markdownMode'], function (states) {
var _states$markdownModeS;
return (_states$markdownModeS = states.markdownModeState) === null || _states$markdownModeS === void 0 ? void 0 : _states$markdownModeS.view;
});
var markdownPluginCurrentIsMarkdownMode = (0, _hooks.useSharedPluginStateWithSelector)(props.editorAPI, ['markdownMode'], function (states) {
var _states$markdownModeS2;
return (_states$markdownModeS2 = states.markdownModeState) === null || _states$markdownModeS2 === void 0 ? void 0 : _states$markdownModeS2.isMarkdownMode;
});
var shouldHideProseMirrorForMarkdownMode = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc-markdown-mode', 'isEnabled', true) && markdownPluginCurrentView !== 'wysiwyg' && markdownPluginCurrentIsMarkdownMode;
return (0, _react2.jsx)("div", {
css: [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
"data-testid": CONTENT_AREA_TEST_ID,
ref: containerRef
}, (0, _react2.jsx)("div", {
css:
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
_StyledComponents.contentAreaWrapper,
"data-testid": EDITOR_CONTAINER,
"data-editor-container": 'true'
}, (0, _react2.jsx)(_EditorContentContainer.default
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
, {
className: "fabric-editor-popup-scroll-parent",
featureFlags: props.featureFlags,
ref: scrollContainerRef,
viewMode: props === null || props === void 0 ? void 0 : props.viewMode,
isScrollable: true,
appearance: props.appearance,
contentMode: props.contentMode,
useStandardNodeWidth: useStandardNodeWidth
}, (0, _react2.jsx)(_ClickAreaBlock.default, {
editorView: props.editorView,
editorDisabled: props.disabled
}, (0, _react2.jsx)("div", {
"data-markdown-mode-hide-prosemirror": shouldHideProseMirrorForMarkdownMode && (0, _platformFeatureFlags.fg)('platform_editor_delay_markdown_view_mode_eval') ? 'true' : undefined,
css: [editorContentAreaNew, editorContentAreaProsemirrorStyle,
// EDITOR-6558: hide ProseMirror when the markdown-mode plugin
// reports a non-WYSIWYG view.
shouldHideProseMirrorForMarkdownMode && ((0, _platformFeatureFlags.fg)('platform_editor_delay_markdown_view_mode_eval') ? hideEditorContentAreaProsemirrorWithAttributeStyle : hideEditorContentAreaProsemirrorStyle), tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
// for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) ? editorContentAreaContainerStyleExcludeCodeBlockNew : editorContentAreaContainerStyleNew, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && editorContentAreaContainerNestedDndStyle, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && contentAreaReducedHeaderSpace, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && contentAreaReservedPrimaryToolbarSpace],
style: {
'--ak-editor-content-area-max-width': "".concat(contentAreaMaxWidth, "px")
}
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
,
className: "ak-editor-content-area-region",
"data-editor-editable-content": true,
role: "region",
"aria-label": props.intl.formatMessage(_messages.fullPageMessages.editableContentLabel),
ref: contentAreaRef,
"data-vc": "editor-content-area-region"
}, (0, _react2.jsx)("div", {
css: [editorContentGutterStyles,
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
(0, _platformFeatureFlags.fg)('platform_editor_controls_increase_full_page_gutter') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && editorContentGutterStyleFG, (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
exposure: true
}) && editorContentReducedGutterStyles]
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: (0, _classnames.default)('ak-editor-content-area', 'appearance-full-page', {
'fabric-editor--full-width-mode': fullWidthMode,
'fabric-editor--max-width-mode': Boolean(maxWidthMode)
}),
ref: contentAreaRef
}, !!props.customContentComponents && 'before' in props.customContentComponents ? (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents.before) : (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents), (0, _react2.jsx)(_PluginSlot.default, {
editorView: props.editorView,
editorActions: props.editorActions,
eventDispatcher: props.eventDispatcher,
providerFactory: props.providerFactory,
appearance: props.appearance,
items: props.contentComponents,
pluginHooks: props.pluginHooks,
contentArea: (_contentAreaRef$curre = contentAreaRef.current) !== null && _contentAreaRef$curre !== void 0 ? _contentAreaRef$curre : undefined,
popupsMountPoint: props.popupsMountPoint,
popupsBoundariesElement: props.popupsBoundariesElement,
popupsScrollableElement: props.popupsScrollableElement,
disabled: !!props.disabled,
containerElement: scrollContainerRef.current,
dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
wrapperElement: props.wrapperElement
}), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents.after) : null, allowScrollGutter && (_featureGateJsClient.default.getExperimentValue('cc_snippets', 'isEnabled', false) ? (0, _react2.jsx)("div", {
id: "editor-scroll-gutter",
style: {
paddingBottom: "".concat((_allowScrollGutter$gu = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu !== void 0 ? _allowScrollGutter$gu : '120', "px")
},
"data-vc": "scroll-gutter",
"data-editor-scroll-gutter": "true"
}) : (0, _react2.jsx)("div", {
id: "editor-scroll-gutter",
style: {
paddingBottom: "".concat((_allowScrollGutter$gu2 = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu2 !== void 0 ? _allowScrollGutter$gu2 : '120', "px")
},
"data-vc": "scroll-gutter"
}))))))), (0, _react2.jsx)("div", {
css: _StyledComponents.sidebarArea
}, props.contextPanel || (0, _react2.jsx)(_ContextPanel.ContextPanel, {
editorAPI: props.editorAPI,
visible: false
})));
});
var FullPageContentArea = exports.FullPageContentArea = (0, _reactIntl.injectIntl)(Content, {
forwardRef: true
});