@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
187 lines • 9.4 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 add_1 = require("@atlaskit/icon/glyph/editor/add");
var expand_1 = require("@atlaskit/icon/glyph/editor/expand");
var table_1 = require("@atlaskit/icon/glyph/editor/table");
var image_1 = require("@atlaskit/icon/glyph/editor/image");
var code_1 = require("@atlaskit/icon/glyph/editor/code");
var info_1 = require("@atlaskit/icon/glyph/editor/info");
var quote_1 = require("@atlaskit/icon/glyph/quote");
var analytics_1 = require("../../analytics");
var keymaps_1 = require("../../keymaps");
var DropdownMenu_1 = require("../DropdownMenu");
var ToolbarButton_1 = require("../ToolbarButton");
var styles_1 = require("./styles");
var commands_1 = require("../../plugins/table/commands");
var blockTypeIcons = {
codeblock: code_1.default,
panel: info_1.default,
blockquote: quote_1.default,
};
var ToolbarInsertBlock = (function (_super) {
tslib_1.__extends(ToolbarInsertBlock, _super);
function ToolbarInsertBlock() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
isOpen: false,
tableActive: false,
tableHidden: false,
mediaDisabled: 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, pluginStateTable = _a.pluginStateTable, pluginStateMedia = _a.pluginStateMedia, pluginStateBlockType = _a.pluginStateBlockType;
var items = [];
if (pluginStateTable) {
var _b = _this.state, tableHidden = _b.tableHidden, tableActive = _b.tableActive;
if (!tableHidden) {
items.push({
content: 'Table',
value: { name: 'table' },
isActive: tableActive,
tooltipDescription: keymaps_1.tooltip(keymaps_1.toggleTable),
tooltipPosition: 'right',
elemBefore: React.createElement(table_1.default, { label: "Insert table" }),
});
}
}
if (pluginStateMedia) {
items.push({
content: 'Files and images',
value: { name: 'media' },
tooltipDescription: 'Files and Images',
tooltipPosition: 'right',
elemBefore: React.createElement(image_1.default, { label: "Insert files and images" }),
});
}
var availableWrapperBlockTypes = _this.state.availableWrapperBlockTypes;
if (pluginStateBlockType && availableWrapperBlockTypes) {
availableWrapperBlockTypes.forEach(function (blockType) {
// tslint:disable-next-line:variable-name
var BlockTypeIcon = blockTypeIcons[blockType.name];
items.push({
content: blockType.title,
value: blockType,
tooltipDescription: keymaps_1.tooltip(keymaps_1.findKeymapByDescription(blockType.title)),
tooltipPosition: 'right',
elemBefore: React.createElement(BlockTypeIcon, { label: "Insert " + blockType + " block" }),
});
});
}
return [{
items: items,
}];
};
_this.handlePluginStateTableChange = function (pluginState) {
var tableActive = pluginState.tableActive, tableHidden = pluginState.tableHidden;
_this.setState({ tableActive: tableActive, tableHidden: tableHidden });
};
_this.handlePluginStateMediaChange = function (pluginState) {
_this.setState({
mediaDisabled: !pluginState.allowsUploads
});
};
_this.handlePluginStateBlockTypeChange = function (pluginState) {
_this.setState({
availableWrapperBlockTypes: pluginState.availableWrapperBlockTypes,
});
};
_this.onItemActivated = function (_a) {
var item = _a.item;
var _b = _this.props, editorView = _b.editorView, pluginStateMedia = _b.pluginStateMedia;
analytics_1.analyticsService.trackEvent("atlassian.editor.format." + item.value.name + ".button");
switch (item.value.name) {
case 'table':
commands_1.default.createTable()(editorView.state, editorView.dispatch);
break;
case 'media':
pluginStateMedia.showMediaPicker();
break;
case 'codeblock':
case 'blockquote':
case 'panel':
var blockType = item.value;
_this.props.pluginStateBlockType.insertBlockType(blockType.name, _this.props.editorView);
}
};
return _this;
}
ToolbarInsertBlock.prototype.componentDidMount = function () {
var _a = this.props, pluginStateTable = _a.pluginStateTable, pluginStateMedia = _a.pluginStateMedia, pluginStateBlockType = _a.pluginStateBlockType;
if (pluginStateTable) {
pluginStateTable.subscribe(this.handlePluginStateTableChange);
}
if (pluginStateMedia) {
pluginStateMedia.subscribe(this.handlePluginStateMediaChange);
}
if (pluginStateBlockType) {
pluginStateBlockType.subscribe(this.handlePluginStateBlockTypeChange);
var availableWrapperBlockTypes = pluginStateBlockType.availableWrapperBlockTypes;
this.setState({
availableWrapperBlockTypes: availableWrapperBlockTypes,
});
}
};
ToolbarInsertBlock.prototype.componentWillReceiveProps = function (props) {
var pluginStateTable = props.pluginStateTable, pluginStateMedia = props.pluginStateMedia, pluginStateBlockType = props.pluginStateBlockType;
var _a = this.props, oldPluginStateTable = _a.pluginStateTable, oldPluginStateMedia = _a.pluginStateMedia, oldPluginStateBlockType = _a.pluginStateBlockType;
if (!oldPluginStateTable && pluginStateTable) {
pluginStateTable.subscribe(this.handlePluginStateTableChange);
}
if (!oldPluginStateMedia && pluginStateMedia) {
pluginStateMedia.subscribe(this.handlePluginStateMediaChange);
}
if (!oldPluginStateBlockType && pluginStateBlockType) {
pluginStateBlockType.subscribe(this.handlePluginStateBlockTypeChange);
var availableWrapperBlockTypes = pluginStateBlockType.availableWrapperBlockTypes;
this.setState({
availableWrapperBlockTypes: availableWrapperBlockTypes,
});
}
};
ToolbarInsertBlock.prototype.componentWillUnmount = function () {
var _a = this.props, pluginStateTable = _a.pluginStateTable, pluginStateMedia = _a.pluginStateMedia, pluginStateBlockType = _a.pluginStateBlockType;
if (pluginStateTable) {
pluginStateTable.unsubscribe(this.handlePluginStateTableChange);
}
if (pluginStateMedia) {
pluginStateMedia.unsubscribe(this.handlePluginStateMediaChange);
}
if (pluginStateBlockType) {
pluginStateBlockType.unsubscribe(this.handlePluginStateBlockTypeChange);
}
};
ToolbarInsertBlock.prototype.render = function () {
var _this = this;
var isOpen = this.state.isOpen;
var _a = this.props, popupsMountPoint = _a.popupsMountPoint, popupsBoundariesElement = _a.popupsBoundariesElement;
var items = this.createItems();
if (items[0].items.length === 0) {
return null;
}
var toolbarButtonFactory = function (disabled) { return (React.createElement(ToolbarButton_1.default, { selected: isOpen, disabled: disabled, onClick: _this.handleTriggerClick, iconBefore: React.createElement(styles_1.TriggerWrapper, null,
React.createElement(add_1.default, { label: "Open or close insert block dropdown" }),
React.createElement(styles_1.ExpandIconWrapper, null,
React.createElement(expand_1.default, { label: "Open or close insert block dropdown" }))) })); };
if (!this.props.isDisabled && 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: 175 }, toolbarButtonFactory(false)));
}
else {
return (React.createElement("span", null,
React.createElement("div", null, toolbarButtonFactory(true))));
}
};
return ToolbarInsertBlock;
}(react_1.PureComponent));
exports.default = ToolbarInsertBlock;
//# sourceMappingURL=index.js.map