@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
147 lines • 8.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var react_1 = require("react");
var advanced_1 = require("@atlaskit/icon/glyph/editor/advanced");
var expand_1 = require("@atlaskit/icon/glyph/editor/expand");
var analytics_1 = require("../../analytics");
var ToolbarButton_1 = require("../ToolbarButton");
var keymaps_1 = require("../../keymaps");
var styles_1 = require("./styles");
var DropdownMenu_1 = require("../DropdownMenu");
var ToolbarAdvancedTextFormatting = (function (_super) {
tslib_1.__extends(ToolbarAdvancedTextFormatting, _super);
function ToolbarAdvancedTextFormatting() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
isOpen: false,
};
_this.onOpenChange = function (attrs) {
_this.setState({
isOpen: attrs.isOpen,
});
};
_this.handleTriggerClick = function () {
_this.onOpenChange({ isOpen: !_this.state.isOpen });
};
_this.createItems = function () {
var _a = _this.props, pluginStateTextFormatting = _a.pluginStateTextFormatting, pluginStateClearFormatting = _a.pluginStateClearFormatting;
var items = [];
if (pluginStateTextFormatting) {
var _b = _this.state, underlineHidden = _b.underlineHidden, strikeHidden = _b.strikeHidden, subscriptHidden = _b.subscriptHidden, superscriptHidden = _b.superscriptHidden;
if (!underlineHidden) {
_this.addRecordToItems(items, 'Underline', 'underline', keymaps_1.tooltip(keymaps_1.toggleUnderline));
}
if (!strikeHidden) {
_this.addRecordToItems(items, 'Strikethrough', 'strikethrough', keymaps_1.tooltip(keymaps_1.toggleStrikethrough));
}
if (!subscriptHidden) {
_this.addRecordToItems(items, 'Subscript', 'subscript', 'Toggle subscript');
}
if (!superscriptHidden) {
_this.addRecordToItems(items, 'Superscript', 'superscript', 'Toggle superscript');
}
}
if (pluginStateClearFormatting) {
_this.addRecordToItems(items, 'Clear Formatting', 'clear', keymaps_1.tooltip(keymaps_1.clearFormatting));
}
return [{
items: items,
}];
};
_this.addRecordToItems = function (items, content, value, tooltipDescription) {
items.push({
content: content,
value: value,
isActive: _this.state[value + "Active"],
isDisabled: _this.state[value + "Disabled"],
tooltipDescription: tooltipDescription,
tooltipPosition: 'right',
});
};
_this.handlePluginStateTextFormattingChange = function (pluginState) {
_this.setState({
underlineActive: pluginState.underlineActive,
underlineDisabled: pluginState.underlineDisabled,
underlineHidden: pluginState.underlineHidden,
strikethroughActive: pluginState.strikeActive,
strikethroughDisabled: pluginState.strikeDisabled,
strikeHidden: pluginState.strikeHidden,
subscriptActive: pluginState.subscriptActive,
subscriptDisabled: pluginState.subscriptDisabled,
subscriptHidden: pluginState.subscriptHidden,
superscriptActive: pluginState.superscriptActive,
superscriptDisabled: pluginState.superscriptDisabled,
superscriptHidden: pluginState.superscriptHidden,
});
};
_this.handlePluginStateClearFormattingChange = function (pluginState) {
_this.setState({
clearFormattingDisabled: !pluginState.formattingIsPresent,
});
};
_this.onItemActivated = function (_a) {
var item = _a.item;
analytics_1.analyticsService.trackEvent("atlassian.editor.format." + item.value + ".button");
var _b = _this.props, pluginStateTextFormatting = _b.pluginStateTextFormatting, pluginStateClearFormatting = _b.pluginStateClearFormatting;
switch (item.value) {
case 'underline':
pluginStateTextFormatting.toggleUnderline(_this.props.editorView);
break;
case 'strikethrough':
pluginStateTextFormatting.toggleStrike(_this.props.editorView);
break;
case 'subscript':
pluginStateTextFormatting.toggleSubscript(_this.props.editorView);
break;
case 'superscript':
pluginStateTextFormatting.toggleSuperscript(_this.props.editorView);
break;
case 'clear':
pluginStateClearFormatting.clearFormatting(_this.props.editorView);
break;
}
};
return _this;
}
ToolbarAdvancedTextFormatting.prototype.componentDidMount = function () {
var _a = this.props, pluginStateTextFormatting = _a.pluginStateTextFormatting, pluginStateClearFormatting = _a.pluginStateClearFormatting;
if (pluginStateTextFormatting) {
pluginStateTextFormatting.subscribe(this.handlePluginStateTextFormattingChange);
}
if (pluginStateClearFormatting) {
pluginStateClearFormatting.subscribe(this.handlePluginStateClearFormattingChange);
}
};
ToolbarAdvancedTextFormatting.prototype.componentWillUnmount = function () {
var _a = this.props, pluginStateTextFormatting = _a.pluginStateTextFormatting, pluginStateClearFormatting = _a.pluginStateClearFormatting;
if (pluginStateTextFormatting) {
pluginStateTextFormatting.unsubscribe(this.handlePluginStateTextFormattingChange);
}
if (pluginStateClearFormatting) {
pluginStateClearFormatting.unsubscribe(this.handlePluginStateClearFormattingChange);
}
};
ToolbarAdvancedTextFormatting.prototype.render = function () {
var _this = this;
var _a = this.state, isOpen = _a.isOpen, underlineActive = _a.underlineActive, strikethroughActive = _a.strikethroughActive, strikethroughDisabled = _a.strikethroughDisabled, clearFormattingDisabled = _a.clearFormattingDisabled;
var _b = this.props, popupsMountPoint = _b.popupsMountPoint, popupsBoundariesElement = _b.popupsBoundariesElement;
var items = this.createItems();
var toolbarButtonFactory = function (disabled) { return (React.createElement(ToolbarButton_1.default, { selected: isOpen || underlineActive || strikethroughActive, disabled: disabled, onClick: _this.handleTriggerClick, iconBefore: React.createElement(styles_1.TriggerWrapper, null,
React.createElement(advanced_1.default, { label: "Open or close advance text formatting dropdown" }),
React.createElement(styles_1.ExpandIconWrapper, null,
React.createElement(expand_1.default, { label: "Open or close advance text formatting dropdown" }))) })); };
if (!this.props.isDisabled &&
!(strikethroughDisabled && clearFormattingDisabled) &&
items[0].items.length > 0) {
return (React.createElement(DropdownMenu_1.default, { items: items, onItemActivated: this.onItemActivated, onOpenChange: this.onOpenChange, mountTo: popupsMountPoint, boundariesElement: popupsBoundariesElement, isOpen: isOpen, fitHeight: 188, fitWidth: 136 }, toolbarButtonFactory(false)));
}
else {
return (React.createElement("div", null, toolbarButtonFactory(true)));
}
};
return ToolbarAdvancedTextFormatting;
}(react_1.PureComponent));
exports.default = ToolbarAdvancedTextFormatting;
//# sourceMappingURL=index.js.map