@atlaskit/editor-core/dist/es5/editor/ui/Appearance/FullPage.js

A package contains Atlassian editor core functionality

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var styled_components_1 = require("styled-components");
var util_shared_styles_1 = require("@atlaskit/util-shared-styles");
var PluginSlot_1 = require("../PluginSlot");
var ContentStyles_1 = require("../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_components_1.default.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_components_1.default(ContentStyles_1.default)(_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_components_1.default.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_components_1.default.div(_d, util_shared_styles_1.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_components_1.default.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_components_1.default.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_1.default, { 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_1.default, { editorView: editorView, eventDispatcher: eventDispatcher, providerFactory: providerFactory, appearance: this.appearance, items: contentComponents }))),
            React.createElement(SecondaryToolbar, null,
                React.createElement(PluginSlot_1.default, { editorView: editorView, eventDispatcher: eventDispatcher, providerFactory: providerFactory, appearance: this.appearance, items: secondaryToolbarComponents }),
                customSecondaryToolbarComponents)));
    };
    return Editor;
}(React.Component));
Editor.displayName = 'FullPageEditor';
exports.default = Editor;
var _a, _b, _c, _d, _e, _f;
//# sourceMappingURL=FullPage.js.map