@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
204 lines • 14 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var button_1 = require("@atlaskit/button");
var button_group_1 = require("@atlaskit/button-group");
var react_1 = require("react");
var React = require("react");
var spinner_1 = require("@atlaskit/spinner");
var util_shared_styles_1 = require("@atlaskit/util-shared-styles");
var analytics_1 = require("../../analytics");
var emojis_1 = require("../../plugins/emojis");
var mentions_1 = require("../../plugins/mentions");
var media_1 = require("../../plugins/media");
var EmojiTypeAhead_1 = require("../EmojiTypeAhead");
var HyperlinkEdit_1 = require("../HyperlinkEdit");
var LanguagePicker_1 = require("../LanguagePicker");
var MentionPicker_1 = require("../MentionPicker");
var PanelEdit_1 = require("../PanelEdit");
var ToolbarBlockType_1 = require("../ToolbarBlockType");
var ToolbarEmojiPicker_1 = require("../ToolbarEmojiPicker");
var ToolbarMention_1 = require("../ToolbarMention");
var ToolbarFeedback_1 = require("../ToolbarFeedback");
var ToolbarHelp_1 = require("../ToolbarHelp");
var ToolbarHyperlink_1 = require("../ToolbarHyperlink");
var ToolbarLists_1 = require("../ToolbarLists");
var ToolbarTextFormatting_1 = require("../ToolbarTextFormatting");
var ToolbarAdvancedTextFormatting_1 = require("../ToolbarAdvancedTextFormatting");
var ToolbarInsertBlock_1 = require("../ToolbarInsertBlock");
var ToolbarInlineCode_1 = require("../ToolbarInlineCode");
var ToolbarImage_1 = require("../ToolbarImage");
var ToolbarMedia_1 = require("../ToolbarMedia");
var ToolbarTextColor_1 = require("../ToolbarTextColor");
var TableFloatingControls_1 = require("../TableFloatingControls");
var TableFloatingToolbar_1 = require("../TableFloatingToolbar");
var styles_1 = require("./styles");
var prosemirror_1 = require("../../prosemirror");
var ChromeExpanded = (function (_super) {
tslib_1.__extends(ChromeExpanded, _super);
function ChromeExpanded() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
showHelp: false
};
_this.addBorders = function () {
var maxHeight = _this.props.maxHeight;
if (maxHeight) {
var editorHeight = _this.getEditorHeight();
var maxHeightStyle = _this.state.maxHeightStyle;
if (editorHeight >= maxHeight && !maxHeightStyle.borderBottom) {
maxHeightStyle = tslib_1.__assign({}, maxHeightStyle, { borderBottom: "1px solid " + util_shared_styles_1.akColorN40, borderTop: "1px solid " + util_shared_styles_1.akColorN40 });
}
else if (editorHeight < maxHeight && maxHeightStyle.borderBottom) {
maxHeightStyle = tslib_1.__assign({}, maxHeightStyle, { borderBottom: null, borderTop: null });
}
_this.setState({ maxHeightStyle: maxHeightStyle });
}
};
_this.toggleHelp = function () {
var showHelp = !_this.state.showHelp;
_this.setState({
showHelp: showHelp
});
};
_this.onKeyDown = function (event) {
if (_this.props.helpDialogPresent) {
var showHelp = _this.state.showHelp;
if (!showHelp &&
(prosemirror_1.browser.mac && event.metaKey && event.key === '/') ||
(!prosemirror_1.browser.mac && event.ctrlKey && event.key === '/')) {
analytics_1.analyticsService.trackEvent('atlassian.editor.help.keyboard');
_this.toggleHelp();
}
else if (showHelp && event.key === 'Escape') {
_this.toggleHelp();
}
}
};
_this.handleEditorContainerRef = function (ref) {
_this.editorContainer = ref;
};
_this.handleMaxHeightContainer = function (ref) {
_this.maxHeightContainer = ref;
};
_this.handleCancel = function () {
var onCancel = _this.props.onCancel;
if (onCancel) {
onCancel();
return true;
}
return false;
};
_this.handleSave = function () {
var onSave = _this.props.onSave;
if (onSave) {
onSave();
return true;
}
return false;
};
return _this;
}
ChromeExpanded.prototype.componentWillMount = function () {
var maxHeight = this.props.maxHeight;
if (maxHeight) {
this.setState({
maxHeightStyle: {
boxSizing: 'border-box',
maxHeight: maxHeight + "px",
overflow: 'auto',
position: 'relative'
}
});
}
};
ChromeExpanded.prototype.componentDidMount = function () {
var maxHeight = this.props.maxHeight;
if (maxHeight) {
this.addBorders();
}
};
ChromeExpanded.prototype.handleSpinnerComplete = function () { };
ChromeExpanded.prototype.getEditorHeight = function () {
var editorView = this.props.editorView;
return editorView
? editorView.dom.offsetHeight
: 0;
};
ChromeExpanded.prototype.render = function () {
var _a = this.props, disabled = _a.disabled, editorView = _a.editorView, emojiProvider = _a.emojiProvider, feedbackFormUrl = _a.feedbackFormUrl, height = _a.height, helpDialogPresent = _a.helpDialogPresent, mentionProvider = _a.mentionProvider, onCancel = _a.onCancel, onSave = _a.onSave, packageName = _a.packageName, packageVersion = _a.packageVersion, pluginStateBlockType = _a.pluginStateBlockType, pluginStateClearFormatting = _a.pluginStateClearFormatting, pluginStateCodeBlock = _a.pluginStateCodeBlock, pluginStateEmojis = _a.pluginStateEmojis, pluginStateHyperlink = _a.pluginStateHyperlink, pluginStateImageUpload = _a.pluginStateImageUpload, pluginStateLists = _a.pluginStateLists, pluginStateMedia = _a.pluginStateMedia, pluginStateMentions = _a.pluginStateMentions, pluginStatePanel = _a.pluginStatePanel, pluginStateTextColor = _a.pluginStateTextColor, pluginStateTextFormatting = _a.pluginStateTextFormatting, pluginStateTable = _a.pluginStateTable, saveDisabled = _a.saveDisabled, showSpinner = _a.showSpinner, popupsMountPoint = _a.popupsMountPoint, popupsBoundariesElement = _a.popupsBoundariesElement, activityProvider = _a.activityProvider;
var maxHeightStyle = this.state.maxHeightStyle;
var style = tslib_1.__assign({}, maxHeightStyle);
if (height) {
style.height = height + "px";
}
var iconAfter = saveDisabled && showSpinner
? React.createElement(spinner_1.default, { isCompleting: false, onComplete: this.handleSpinnerComplete })
: undefined;
var saveButtonAppearance = saveDisabled || disabled
? 'default'
: 'primary';
return (React.createElement(styles_1.Container, { "data-editor-chrome": true, tabIndex: -1, innerRef: this.handleEditorContainerRef, onKeyDown: this.onKeyDown },
React.createElement(styles_1.Toolbar, null,
pluginStateBlockType ?
React.createElement(ToolbarBlockType_1.default, { isDisabled: disabled, pluginState: pluginStateBlockType, editorView: editorView, popupsMountPoint: popupsMountPoint, popupsBoundariesElement: popupsBoundariesElement }) : null,
pluginStateTextFormatting ?
React.createElement(ToolbarTextFormatting_1.default, { disabled: disabled, pluginState: pluginStateTextFormatting, editorView: editorView }) : null,
pluginStateTextFormatting ?
React.createElement(ToolbarInlineCode_1.default, { disabled: disabled, editorView: editorView, pluginState: pluginStateTextFormatting }) : null,
pluginStateTextColor ?
React.createElement(ToolbarTextColor_1.default, { disabled: disabled, pluginState: pluginStateTextColor, editorView: editorView, popupsMountPoint: popupsMountPoint, popupsBoundariesElement: popupsBoundariesElement }) : null,
pluginStateTextFormatting || pluginStateClearFormatting ?
React.createElement(ToolbarAdvancedTextFormatting_1.default, { isDisabled: disabled, pluginStateTextFormatting: pluginStateTextFormatting, pluginStateClearFormatting: pluginStateClearFormatting, editorView: editorView, popupsMountPoint: popupsMountPoint, popupsBoundariesElement: popupsBoundariesElement }) : null,
pluginStateHyperlink ?
React.createElement(ToolbarHyperlink_1.default, { disabled: disabled, pluginState: pluginStateHyperlink, editorView: editorView }) : null,
pluginStateLists ?
React.createElement(ToolbarLists_1.default, { disabled: disabled, pluginState: pluginStateLists, editorView: editorView }) : null,
(pluginStateTable || pluginStateMedia || pluginStateBlockType) &&
React.createElement(ToolbarInsertBlock_1.default, { isDisabled: disabled, pluginStateTable: pluginStateTable, pluginStateMedia: pluginStateMedia, pluginStateBlockType: pluginStateBlockType, editorView: editorView, popupsMountPoint: popupsMountPoint, popupsBoundariesElement: popupsBoundariesElement }),
React.createElement("span", { style: { flexGrow: 1 } }),
feedbackFormUrl ? React.createElement(ToolbarFeedback_1.default, { packageVersion: packageVersion, packageName: packageName }) : null,
helpDialogPresent && React.createElement(ToolbarHelp_1.default, { showHelp: this.state.showHelp, toggleHelp: this.toggleHelp })),
React.createElement(styles_1.Content, { onPaste: this.addBorders, onKeyDown: this.addBorders },
React.createElement("div", { style: style, ref: this.handleMaxHeightContainer }, this.props.children),
pluginStateHyperlink && !disabled ?
React.createElement(HyperlinkEdit_1.default, { pluginState: pluginStateHyperlink, editorView: editorView, popupsMountPoint: popupsMountPoint, popupsBoundariesElement: popupsBoundariesElement, activityProvider: activityProvider }) : null,
pluginStateCodeBlock && !disabled ?
React.createElement(LanguagePicker_1.default, { pluginState: pluginStateCodeBlock, editorView: editorView, popupsMountPoint: popupsMountPoint, popupsBoundariesElement: popupsBoundariesElement }) : null,
pluginStateTable && !disabled &&
React.createElement(TableFloatingControls_1.default, { pluginState: pluginStateTable, editorView: editorView, popupsMountPoint: this.maxHeightContainer, popupsBoundariesElement: this.maxHeightContainer }),
pluginStateTable && !disabled &&
React.createElement(TableFloatingToolbar_1.default, { pluginState: pluginStateTable, editorView: editorView, popupsMountPoint: this.maxHeightContainer, popupsBoundariesElement: this.maxHeightContainer }),
pluginStateMentions && mentionProvider && !disabled ?
React.createElement(MentionPicker_1.default, { editorView: editorView, pluginKey: mentions_1.stateKey, popupsBoundariesElement: popupsBoundariesElement, popupsMountPoint: popupsMountPoint, mentionProvider: mentionProvider }) : null,
pluginStateEmojis && emojiProvider && !disabled ?
React.createElement(EmojiTypeAhead_1.default, { pluginKey: emojis_1.stateKey, editorView: editorView, popupsBoundariesElement: popupsBoundariesElement, popupsMountPoint: popupsMountPoint, emojiProvider: emojiProvider }) : null,
pluginStatePanel ? React.createElement(PanelEdit_1.default, { pluginState: pluginStatePanel, editorView: editorView }) : null),
React.createElement(styles_1.Footer, null,
React.createElement(styles_1.FooterActions, null,
React.createElement(button_group_1.default, null,
!onSave ? null :
React.createElement("span", { onClick: this.handleSave },
React.createElement(button_1.default, { iconAfter: iconAfter, isDisabled: saveDisabled, appearance: saveButtonAppearance }, "Save")),
!onCancel ? null :
React.createElement("span", { onClick: this.handleCancel },
React.createElement(button_1.default, { appearance: "subtle" }, "Cancel")))),
React.createElement(styles_1.SecondaryToolbar, null,
pluginStateMentions && mentionProvider && !disabled ? React.createElement(ToolbarMention_1.default, { pluginKey: mentions_1.stateKey, editorView: editorView }) : null,
pluginStateEmojis && emojiProvider ? React.createElement(ToolbarEmojiPicker_1.default, { pluginKey: emojis_1.stateKey, editorView: editorView, emojiProvider: emojiProvider, numFollowingButtons: 2 }) : null,
pluginStateImageUpload && !disabled ? React.createElement(ToolbarImage_1.default, { pluginState: pluginStateImageUpload, editorView: editorView }) : null,
pluginStateMedia && !disabled ? React.createElement(ToolbarMedia_1.default, { editorView: editorView, pluginKey: media_1.stateKey }) : null))));
};
return ChromeExpanded;
}(react_1.PureComponent));
ChromeExpanded.defaultProps = {
saveDisabled: false,
};
tslib_1.__decorate([
analytics_1.analyticsDecorator('atlassian.editor.stop.cancel')
], ChromeExpanded.prototype, "handleCancel", void 0);
tslib_1.__decorate([
analytics_1.analyticsDecorator('atlassian.editor.stop.save')
], ChromeExpanded.prototype, "handleSave", void 0);
exports.default = ChromeExpanded;
//# sourceMappingURL=index.js.map