@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
202 lines • 13.6 kB
JavaScript
import * as tslib_1 from "tslib";
import AkButton from '@atlaskit/button';
import AkButtonGroup from '@atlaskit/button-group';
import { PureComponent } from 'react';
import * as React from 'react';
import Spinner from '@atlaskit/spinner';
import { akColorN40 } from '@atlaskit/util-shared-styles';
import { analyticsDecorator as analytics, analyticsService } from '../../analytics';
import { stateKey as emojiPluginKey } from '../../plugins/emojis';
import { stateKey as mentionPluginKey } from '../../plugins/mentions';
import { stateKey as mediaPluginKey } from '../../plugins/media';
import EmojiTypeAhead from '../EmojiTypeAhead';
import HyperlinkEdit from '../HyperlinkEdit';
import LanguagePicker from '../LanguagePicker';
import MentionPicker from '../MentionPicker';
import PanelEdit from '../PanelEdit';
import ToolbarBlockType from '../ToolbarBlockType';
import ToolbarEmojiPicker from '../ToolbarEmojiPicker';
import ToolbarMention from '../ToolbarMention';
import ToolbarFeedback from '../ToolbarFeedback';
import ToolbarHelp from '../ToolbarHelp';
import ToolbarHyperlink from '../ToolbarHyperlink';
import ToolbarLists from '../ToolbarLists';
import ToolbarTextFormatting from '../ToolbarTextFormatting';
import ToolbarAdvancedTextFormatting from '../ToolbarAdvancedTextFormatting';
import ToolbarInsertBlock from '../ToolbarInsertBlock';
import ToolbarInlineCode from '../ToolbarInlineCode';
import ToolbarImage from '../ToolbarImage';
import ToolbarMedia from '../ToolbarMedia';
import ToolbarTextColor from '../ToolbarTextColor';
import TableFloatingControls from '../TableFloatingControls';
import TableFloatingToolbar from '../TableFloatingToolbar';
import { Container, Content, Footer, FooterActions, Toolbar, SecondaryToolbar } from './styles';
import { browser } from '../../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 " + akColorN40, borderTop: "1px solid " + 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 &&
(browser.mac && event.metaKey && event.key === '/') ||
(!browser.mac && event.ctrlKey && event.key === '/')) {
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, { isCompleting: false, onComplete: this.handleSpinnerComplete })
: undefined;
var saveButtonAppearance = saveDisabled || disabled
? 'default'
: 'primary';
return (React.createElement(Container, { "data-editor-chrome": true, tabIndex: -1, innerRef: this.handleEditorContainerRef, onKeyDown: this.onKeyDown },
React.createElement(Toolbar, null,
pluginStateBlockType ?
React.createElement(ToolbarBlockType, { isDisabled: disabled, pluginState: pluginStateBlockType, editorView: editorView, popupsMountPoint: popupsMountPoint, popupsBoundariesElement: popupsBoundariesElement }) : null,
pluginStateTextFormatting ?
React.createElement(ToolbarTextFormatting, { disabled: disabled, pluginState: pluginStateTextFormatting, editorView: editorView }) : null,
pluginStateTextFormatting ?
React.createElement(ToolbarInlineCode, { disabled: disabled, editorView: editorView, pluginState: pluginStateTextFormatting }) : null,
pluginStateTextColor ?
React.createElement(ToolbarTextColor, { disabled: disabled, pluginState: pluginStateTextColor, editorView: editorView, popupsMountPoint: popupsMountPoint, popupsBoundariesElement: popupsBoundariesElement }) : null,
pluginStateTextFormatting || pluginStateClearFormatting ?
React.createElement(ToolbarAdvancedTextFormatting, { isDisabled: disabled, pluginStateTextFormatting: pluginStateTextFormatting, pluginStateClearFormatting: pluginStateClearFormatting, editorView: editorView, popupsMountPoint: popupsMountPoint, popupsBoundariesElement: popupsBoundariesElement }) : null,
pluginStateHyperlink ?
React.createElement(ToolbarHyperlink, { disabled: disabled, pluginState: pluginStateHyperlink, editorView: editorView }) : null,
pluginStateLists ?
React.createElement(ToolbarLists, { disabled: disabled, pluginState: pluginStateLists, editorView: editorView }) : null,
(pluginStateTable || pluginStateMedia || pluginStateBlockType) &&
React.createElement(ToolbarInsertBlock, { isDisabled: disabled, pluginStateTable: pluginStateTable, pluginStateMedia: pluginStateMedia, pluginStateBlockType: pluginStateBlockType, editorView: editorView, popupsMountPoint: popupsMountPoint, popupsBoundariesElement: popupsBoundariesElement }),
React.createElement("span", { style: { flexGrow: 1 } }),
feedbackFormUrl ? React.createElement(ToolbarFeedback, { packageVersion: packageVersion, packageName: packageName }) : null,
helpDialogPresent && React.createElement(ToolbarHelp, { showHelp: this.state.showHelp, toggleHelp: this.toggleHelp })),
React.createElement(Content, { onPaste: this.addBorders, onKeyDown: this.addBorders },
React.createElement("div", { style: style, ref: this.handleMaxHeightContainer }, this.props.children),
pluginStateHyperlink && !disabled ?
React.createElement(HyperlinkEdit, { pluginState: pluginStateHyperlink, editorView: editorView, popupsMountPoint: popupsMountPoint, popupsBoundariesElement: popupsBoundariesElement, activityProvider: activityProvider }) : null,
pluginStateCodeBlock && !disabled ?
React.createElement(LanguagePicker, { pluginState: pluginStateCodeBlock, editorView: editorView, popupsMountPoint: popupsMountPoint, popupsBoundariesElement: popupsBoundariesElement }) : null,
pluginStateTable && !disabled &&
React.createElement(TableFloatingControls, { pluginState: pluginStateTable, editorView: editorView, popupsMountPoint: this.maxHeightContainer, popupsBoundariesElement: this.maxHeightContainer }),
pluginStateTable && !disabled &&
React.createElement(TableFloatingToolbar, { pluginState: pluginStateTable, editorView: editorView, popupsMountPoint: this.maxHeightContainer, popupsBoundariesElement: this.maxHeightContainer }),
pluginStateMentions && mentionProvider && !disabled ?
React.createElement(MentionPicker, { editorView: editorView, pluginKey: mentionPluginKey, popupsBoundariesElement: popupsBoundariesElement, popupsMountPoint: popupsMountPoint, mentionProvider: mentionProvider }) : null,
pluginStateEmojis && emojiProvider && !disabled ?
React.createElement(EmojiTypeAhead, { pluginKey: emojiPluginKey, editorView: editorView, popupsBoundariesElement: popupsBoundariesElement, popupsMountPoint: popupsMountPoint, emojiProvider: emojiProvider }) : null,
pluginStatePanel ? React.createElement(PanelEdit, { pluginState: pluginStatePanel, editorView: editorView }) : null),
React.createElement(Footer, null,
React.createElement(FooterActions, null,
React.createElement(AkButtonGroup, null,
!onSave ? null :
React.createElement("span", { onClick: this.handleSave },
React.createElement(AkButton, { iconAfter: iconAfter, isDisabled: saveDisabled, appearance: saveButtonAppearance }, "Save")),
!onCancel ? null :
React.createElement("span", { onClick: this.handleCancel },
React.createElement(AkButton, { appearance: "subtle" }, "Cancel")))),
React.createElement(SecondaryToolbar, null,
pluginStateMentions && mentionProvider && !disabled ? React.createElement(ToolbarMention, { pluginKey: mentionPluginKey, editorView: editorView }) : null,
pluginStateEmojis && emojiProvider ? React.createElement(ToolbarEmojiPicker, { pluginKey: emojiPluginKey, editorView: editorView, emojiProvider: emojiProvider, numFollowingButtons: 2 }) : null,
pluginStateImageUpload && !disabled ? React.createElement(ToolbarImage, { pluginState: pluginStateImageUpload, editorView: editorView }) : null,
pluginStateMedia && !disabled ? React.createElement(ToolbarMedia, { editorView: editorView, pluginKey: mediaPluginKey }) : null))));
};
return ChromeExpanded;
}(PureComponent));
export default ChromeExpanded;
ChromeExpanded.defaultProps = {
saveDisabled: false,
};
tslib_1.__decorate([
analytics('atlassian.editor.stop.cancel')
], ChromeExpanded.prototype, "handleCancel", void 0);
tslib_1.__decorate([
analytics('atlassian.editor.stop.save')
], ChromeExpanded.prototype, "handleSave", void 0);
//# sourceMappingURL=index.js.map