@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
181 lines (179 loc) • 7.43 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
/**
* @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';
const 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)"
}
});
const 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
export default class Editor extends React.Component {
constructor(...args) {
super(...args);
_defineProperty(this, "appearance", 'chromeless');
_defineProperty(this, "containerElement", null);
_defineProperty(this, "setContainerElement", ref => {
this.containerElement = ref;
});
_defineProperty(this, "renderChrome", ({
maxContentSize
}) => {
const {
editorDOMElement,
editorView,
editorActions,
eventDispatcher,
providerFactory,
contentComponents,
customContentComponents,
maxHeight,
minHeight = 30,
popupsMountPoint,
popupsBoundariesElement,
popupsScrollableElement,
disabled,
dispatchAnalyticsEvent,
pluginHooks,
featureFlags
} = this.props;
const maxContentSizeReached = Boolean(maxContentSize === null || maxContentSize === void 0 ? void 0 : maxContentSize.maxContentSizeReached);
const editorViewMode = useSharedPluginStateWithSelector(this.props.editorAPI, ['editorViewMode'], states => {
var _states$editorViewMod;
return states === null || states === void 0 ? void 0 : (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode;
});
const containerRef = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? this.setContainerElement : ref => 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)));
});
}
render() {
return jsx(RenderWithPluginState, {
editorAPI: this.props.editorAPI,
renderChrome: this.renderChrome
});
}
}
_defineProperty(Editor, "displayName", 'ChromelessEditorAppearance');
function RenderWithPluginState({
renderChrome,
editorAPI
}) {
'use no memo';
// renderChrome should be changed to called as a component not a function
const maxContentSizeReached = useSharedPluginStateWithSelector(editorAPI, ['maxContentSize'], states => {
var _states$maxContentSiz;
return states === null || states === void 0 ? void 0 : (_states$maxContentSiz = states.maxContentSizeState) === null || _states$maxContentSiz === void 0 ? void 0 : _states$maxContentSiz.maxContentSizeReached;
});
const maxContentSize = maxContentSizeReached === undefined ? undefined : {
maxContentSizeReached
};
return jsx(Fragment, null, renderChrome({
maxContentSize
}));
}
export function ChromelessEditorContainer({
maxHeight,
minHeight,
children,
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 ? `${maxHeight}px` : undefined,
minHeight: `${minHeight}px`
},
"data-testid": "chromeless-editor",
id: "chromeless-editor",
ref: containerRef
}, children);
}