@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
198 lines (196 loc) • 9.47 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React, { Fragment } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
import { css, jsx } from '@emotion/react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import EditorContentContainer from '../EditorContentContainer/EditorContentContainer';
import PluginSlot from '../PluginSlot';
import WithFlash from '../WithFlash';
var scrollbarStylesNew = css({
msOverflowStyle: '-ms-autohiding-scrollbar',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'&::-webkit-scrollbar-corner': {
display: 'none'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'&::-webkit-scrollbar-thumb': {
backgroundColor: "var(--ds-background-neutral-subtle, #00000000)"
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'&:hover::-webkit-scrollbar-thumb': {
backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
borderRadius: "var(--ds-radius-large, 8px)"
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'&::-webkit-scrollbar-thumb:hover': {
backgroundColor: "var(--ds-background-neutral-bold-hovered, #3B3D42)"
}
});
var chromelessEditorStylesNew = css({
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: '20px',
height: 'auto',
overflowX: 'hidden',
overflowY: 'auto',
maxWidth: 'inherit',
boxSizing: 'border-box',
wordWrap: 'break-word',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'div > .ProseMirror': {
outline: 'none',
whiteSpace: 'pre-wrap',
padding: 0,
margin: 0,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'& > :last-child': {
paddingBottom: "var(--ds-space-100, 8px)"
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'& > p:last-of-type': {
marginBottom: "var(--ds-space-0, 0px)"
}
}
});
/**
* Render the editor in a chromeless appearance.
* Example use is the inline comment editor, which doesn't have editor toolbar
*/
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components
var Editor = /*#__PURE__*/function (_React$Component) {
function Editor() {
var _this;
_classCallCheck(this, Editor);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, Editor, [].concat(args));
_defineProperty(_this, "appearance", 'chromeless');
_defineProperty(_this, "containerElement", null);
_defineProperty(_this, "setContainerElement", function (ref) {
_this.containerElement = ref;
});
_defineProperty(_this, "renderChrome", function (_ref) {
var maxContentSize = _ref.maxContentSize;
var _this$props = _this.props,
editorDOMElement = _this$props.editorDOMElement,
editorView = _this$props.editorView,
editorActions = _this$props.editorActions,
eventDispatcher = _this$props.eventDispatcher,
providerFactory = _this$props.providerFactory,
contentComponents = _this$props.contentComponents,
customContentComponents = _this$props.customContentComponents,
maxHeight = _this$props.maxHeight,
_this$props$minHeight = _this$props.minHeight,
minHeight = _this$props$minHeight === void 0 ? 30 : _this$props$minHeight,
popupsMountPoint = _this$props.popupsMountPoint,
popupsBoundariesElement = _this$props.popupsBoundariesElement,
popupsScrollableElement = _this$props.popupsScrollableElement,
disabled = _this$props.disabled,
dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent,
pluginHooks = _this$props.pluginHooks,
featureFlags = _this$props.featureFlags;
var maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
var editorViewMode = useSharedPluginStateWithSelector(_this.props.editorAPI, ['editorViewMode'], function (states) {
var _states$editorViewMod;
return states === null || states === void 0 || (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode;
});
var containerRef = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? _this.setContainerElement : function (ref) {
return _this.containerElement = ref;
};
return jsx(WithFlash, {
animate: maxContentSizeReached
}, jsx(ChromelessEditorContainer, {
maxHeight: maxHeight,
minHeight: minHeight,
containerRef: containerRef
}, jsx(EditorContentContainer
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
, {
className: "ak-editor-content-area",
featureFlags: featureFlags,
viewMode: editorViewMode,
appearance: _this.appearance
}, customContentComponents && 'before' in customContentComponents ? customContentComponents.before : customContentComponents, jsx(PluginSlot, {
editorView: editorView,
editorActions: editorActions,
eventDispatcher: eventDispatcher,
providerFactory: providerFactory,
appearance: _this.appearance,
items: contentComponents,
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement,
containerElement: _this.containerElement,
disabled: !!disabled,
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
wrapperElement: _this.containerElement,
pluginHooks: pluginHooks
}), editorDOMElement, customContentComponents && 'after' in customContentComponents ? customContentComponents.after : null)));
});
return _this;
}
_inherits(Editor, _React$Component);
return _createClass(Editor, [{
key: "render",
value: function render() {
return jsx(RenderWithPluginState, {
editorAPI: this.props.editorAPI,
renderChrome: this.renderChrome
});
}
}]);
}(React.Component);
_defineProperty(Editor, "displayName", 'ChromelessEditorAppearance');
export { Editor as default };
function RenderWithPluginState(_ref2) {
'use no memo';
// renderChrome should be changed to called as a component not a function
var renderChrome = _ref2.renderChrome,
editorAPI = _ref2.editorAPI;
var maxContentSizeReached = useSharedPluginStateWithSelector(editorAPI, ['maxContentSize'], function (states) {
var _states$maxContentSiz;
return states === null || states === void 0 || (_states$maxContentSiz = states.maxContentSizeState) === null || _states$maxContentSiz === void 0 ? void 0 : _states$maxContentSiz.maxContentSizeReached;
});
var maxContentSize = maxContentSizeReached === undefined ? undefined : {
maxContentSizeReached: maxContentSizeReached
};
return jsx(Fragment, null, renderChrome({
maxContentSize: maxContentSize
}));
}
export function ChromelessEditorContainer(_ref3) {
var maxHeight = _ref3.maxHeight,
minHeight = _ref3.minHeight,
children = _ref3.children,
containerRef = _ref3.containerRef;
return jsx("div", {
css: [chromelessEditorStylesNew, scrollbarStylesNew]
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: fg('platform_editor_chromeless_akeditor_class') || expValEquals('create_work_item_modernization_exp', 'isEnabled', true) ? 'akEditor' : undefined,
style: {
maxHeight: maxHeight ? "".concat(maxHeight, "px") : undefined,
minHeight: "".concat(minHeight, "px")
},
"data-testid": "chromeless-editor",
id: "chromeless-editor",
ref: containerRef
}, children);
}