@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
204 lines (202 loc) • 11.1 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ChromelessEditorContainer = ChromelessEditorContainer;
exports.default = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _hooks = require("@atlaskit/editor-common/hooks");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _EditorContentContainer = _interopRequireDefault(require("../EditorContentContainer/EditorContentContainer"));
var _PluginSlot = _interopRequireDefault(require("../PluginSlot"));
var _WithFlash = _interopRequireDefault(require("../WithFlash"));
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); }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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
*/ // 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
var scrollbarStylesNew = (0, _react2.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 = (0, _react2.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 = exports.default = /*#__PURE__*/function (_React$Component) {
function Editor() {
var _this;
(0, _classCallCheck2.default)(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));
(0, _defineProperty2.default)(_this, "appearance", 'chromeless');
(0, _defineProperty2.default)(_this, "containerElement", null);
(0, _defineProperty2.default)(_this, "setContainerElement", function (ref) {
_this.containerElement = ref;
});
(0, _defineProperty2.default)(_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 = (0, _hooks.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 = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? _this.setContainerElement : function (ref) {
return _this.containerElement = ref;
};
return (0, _react2.jsx)(_WithFlash.default, {
animate: maxContentSizeReached
}, (0, _react2.jsx)(ChromelessEditorContainer, {
maxHeight: maxHeight,
minHeight: minHeight,
containerRef: containerRef
}, (0, _react2.jsx)(_EditorContentContainer.default
// 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, (0, _react2.jsx)(_PluginSlot.default, {
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;
}
(0, _inherits2.default)(Editor, _React$Component);
return (0, _createClass2.default)(Editor, [{
key: "render",
value: function render() {
return (0, _react2.jsx)(RenderWithPluginState, {
editorAPI: this.props.editorAPI,
renderChrome: this.renderChrome
});
}
}]);
}(_react.default.Component);
(0, _defineProperty2.default)(Editor, "displayName", 'ChromelessEditorAppearance');
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 = (0, _hooks.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 (0, _react2.jsx)(_react.Fragment, null, renderChrome({
maxContentSize: maxContentSize
}));
}
function ChromelessEditorContainer(_ref3) {
var maxHeight = _ref3.maxHeight,
minHeight = _ref3.minHeight,
children = _ref3.children,
containerRef = _ref3.containerRef;
return (0, _react2.jsx)("div", {
css: [chromelessEditorStylesNew, scrollbarStylesNew]
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: (0, _platformFeatureFlags.fg)('platform_editor_chromeless_akeditor_class') || (0, _expValEquals.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);
}