@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
56 lines • 5.34 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import styled from 'styled-components';
import { akColorN30 } from '@atlaskit/util-shared-styles';
import PluginSlot from '../PluginSlot';
import ContentStyles from '../ContentStyles';
// tslint:disable-next-line:variable-name
var FullPageEditorWrapper = (_a = ["\n height: 100%;\n display: flex;\n flex-direction: column;\n"], _a.raw = ["\n height: 100%;\n display: flex;\n flex-direction: column;\n"], styled.div(_a));
FullPageEditorWrapper.displayName = 'FullPageEditorWrapper';
// tslint:disable-next-line:variable-name
var ScrollContainer = (_b = ["\n flex-grow: 1;\n overflow-y: scroll;\n overflow-x: hidden;\n height: 100%;\n position: relative;\n display: flex;\n flex-direction: column;\n"], _b.raw = ["\n flex-grow: 1;\n overflow-y: scroll;\n overflow-x: hidden;\n height: 100%;\n position: relative;\n display: flex;\n flex-direction: column;\n"], styled(ContentStyles)(_b));
ScrollContainer.displayName = 'ScrollContainer';
// tslint:disable-next-line:variable-name
var ContentArea = (_c = ["\n height: 100%;\n width: 100%;\n max-width: 600px;\n padding-top: 50px;\n margin: 0 auto;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n\n & .ProseMirror {\n flex-grow: 1;\n box-sizing: border-box;\n padding-bottom: 50px;\n }\n"], _c.raw = ["\n height: 100%;\n width: 100%;\n max-width: 600px;\n padding-top: 50px;\n margin: 0 auto;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n\n & .ProseMirror {\n flex-grow: 1;\n box-sizing: border-box;\n padding-bottom: 50px;\n }\n"], styled.div(_c));
ContentArea.displayName = 'ContentArea';
// tslint:disable-next-line:variable-name
var MainToolbar = (_d = ["\n align-items: center;\n border-bottom: 1px solid ", ";\n display: flex;\n height: 80px;\n\n & > div > * {\n margin-left: 4px;\n }\n\n & > div > *:first-child {\n margin-left: 0;\n margin-right: 8px;\n }\n"], _d.raw = ["\n align-items: center;\n border-bottom: 1px solid ", ";\n display: flex;\n height: 80px;\n\n & > div > * {\n margin-left: 4px;\n }\n\n & > div > *:first-child {\n margin-left: 0;\n margin-right: 8px;\n }\n"], styled.div(_d, akColorN30));
MainToolbar.displayName = 'MainToolbar';
// tslint:disable-next-line:variable-name
var MainToolbarCustomComponentsSlot = (_e = ["\n display: flex;\n justify-content: flex-end;\n flex-grow: 1;\n"], _e.raw = ["\n display: flex;\n justify-content: flex-end;\n flex-grow: 1;\n"], styled.div(_e));
MainToolbarCustomComponentsSlot.displayName = 'MainToolbar';
// tslint:disable-next-line:variable-name
var SecondaryToolbar = (_f = ["\n box-sizing: border-box;\n justify-content: flex-end;\n align-items: center;\n flex-shrink: 0;\n display: flex;\n padding: 24px 0;\n"], _f.raw = ["\n box-sizing: border-box;\n justify-content: flex-end;\n align-items: center;\n flex-shrink: 0;\n display: flex;\n padding: 24px 0;\n"], styled.div(_f));
SecondaryToolbar.displayName = 'SecondaryToolbar';
var Editor = (function (_super) {
tslib_1.__extends(Editor, _super);
function Editor() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.appearance = 'full-page';
_this.handleRef = function (ref) {
if (_this.props.onUiReady) {
_this.props.onUiReady(ref);
}
};
return _this;
}
Editor.prototype.render = function () {
var _a = this.props, editorView = _a.editorView, eventDispatcher = _a.eventDispatcher, providerFactory = _a.providerFactory, contentComponents = _a.contentComponents, primaryToolbarComponents = _a.primaryToolbarComponents, secondaryToolbarComponents = _a.secondaryToolbarComponents, customPrimaryToolbarComponents = _a.customPrimaryToolbarComponents, customContentComponents = _a.customContentComponents, customSecondaryToolbarComponents = _a.customSecondaryToolbarComponents;
return (React.createElement(FullPageEditorWrapper, null,
React.createElement(MainToolbar, null,
React.createElement(PluginSlot, { editorView: editorView, eventDispatcher: eventDispatcher, providerFactory: providerFactory, appearance: this.appearance, items: primaryToolbarComponents }),
React.createElement(MainToolbarCustomComponentsSlot, null, customPrimaryToolbarComponents)),
React.createElement(ScrollContainer, null,
React.createElement(ContentArea, { innerRef: this.handleRef },
customContentComponents,
React.createElement(PluginSlot, { editorView: editorView, eventDispatcher: eventDispatcher, providerFactory: providerFactory, appearance: this.appearance, items: contentComponents }))),
React.createElement(SecondaryToolbar, null,
React.createElement(PluginSlot, { editorView: editorView, eventDispatcher: eventDispatcher, providerFactory: providerFactory, appearance: this.appearance, items: secondaryToolbarComponents }),
customSecondaryToolbarComponents)));
};
return Editor;
}(React.Component));
export default Editor;
Editor.displayName = 'FullPageEditor';
var _a, _b, _c, _d, _e, _f;
//# sourceMappingURL=FullPage.js.map