@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
145 lines • 7.98 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { PureComponent } from 'react';
import AdvancedIcon from '@atlaskit/icon/glyph/editor/advanced';
import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
import { analyticsService } from '../../analytics';
import ToolbarButton from '../ToolbarButton';
import { toggleUnderline, toggleStrikethrough, clearFormatting, tooltip } from '../../keymaps';
import { TriggerWrapper, ExpandIconWrapper } from './styles';
import DropdownMenu from '../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', tooltip(toggleUnderline));
}
if (!strikeHidden) {
_this.addRecordToItems(items, 'Strikethrough', 'strikethrough', tooltip(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', tooltip(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;
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, { selected: isOpen || underlineActive || strikethroughActive, disabled: disabled, onClick: _this.handleTriggerClick, iconBefore: React.createElement(TriggerWrapper, null,
React.createElement(AdvancedIcon, { label: "Open or close advance text formatting dropdown" }),
React.createElement(ExpandIconWrapper, null,
React.createElement(ExpandIcon, { label: "Open or close advance text formatting dropdown" }))) })); };
if (!this.props.isDisabled &&
!(strikethroughDisabled && clearFormattingDisabled) &&
items[0].items.length > 0) {
return (React.createElement(DropdownMenu, { 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;
}(PureComponent));
export default ToolbarAdvancedTextFormatting;
//# sourceMappingURL=index.js.map