@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
185 lines • 9.24 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { PureComponent } from 'react';
import AddIcon from '@atlaskit/icon/glyph/editor/add';
import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
import TableIcon from '@atlaskit/icon/glyph/editor/table';
import MediaIcon from '@atlaskit/icon/glyph/editor/image';
import CodeIcon from '@atlaskit/icon/glyph/editor/code';
import InfoIcon from '@atlaskit/icon/glyph/editor/info';
import QuoteIcon from '@atlaskit/icon/glyph/quote';
import { analyticsService as analytics } from '../../analytics';
import { toggleTable, tooltip, findKeymapByDescription } from '../../keymaps';
import DropdownMenu from '../DropdownMenu';
import ToolbarButton from '../ToolbarButton';
import { TriggerWrapper, ExpandIconWrapper } from './styles';
import tableCommands from '../../plugins/table/commands';
var blockTypeIcons = {
codeblock: CodeIcon,
panel: InfoIcon,
blockquote: QuoteIcon,
};
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: tooltip(toggleTable),
tooltipPosition: 'right',
elemBefore: React.createElement(TableIcon, { label: "Insert table" }),
});
}
}
if (pluginStateMedia) {
items.push({
content: 'Files and images',
value: { name: 'media' },
tooltipDescription: 'Files and Images',
tooltipPosition: 'right',
elemBefore: React.createElement(MediaIcon, { 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: tooltip(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.trackEvent("atlassian.editor.format." + item.value.name + ".button");
switch (item.value.name) {
case 'table':
tableCommands.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, { selected: isOpen, disabled: disabled, onClick: _this.handleTriggerClick, iconBefore: React.createElement(TriggerWrapper, null,
React.createElement(AddIcon, { label: "Open or close insert block dropdown" }),
React.createElement(ExpandIconWrapper, null,
React.createElement(ExpandIcon, { label: "Open or close insert block dropdown" }))) })); };
if (!this.props.isDisabled && 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: 175 }, toolbarButtonFactory(false)));
}
else {
return (React.createElement("span", null,
React.createElement("div", null, toolbarButtonFactory(true))));
}
};
return ToolbarInsertBlock;
}(PureComponent));
export default ToolbarInsertBlock;
//# sourceMappingURL=index.js.map