@atlaskit/editor-plugin-panel
Version:
Panel plugin for @atlaskit/editor-core.
361 lines (358 loc) • 18.1 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.panelIconMap = exports.getToolbarItems = exports.getToolbarConfig = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _adfSchema = require("@atlaskit/adf-schema");
var _analytics = require("@atlaskit/editor-common/analytics");
var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
var _panel = require("@atlaskit/editor-common/panel");
var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
var _uiColor = require("@atlaskit/editor-common/ui-color");
var _utils = require("@atlaskit/editor-prosemirror/utils");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
var _emojiRemove = _interopRequireDefault(require("@atlaskit/icon/core/emoji-remove"));
var _statusDiscovery = _interopRequireDefault(require("@atlaskit/icon/core/status-discovery"));
var _statusInformation = _interopRequireDefault(require("@atlaskit/icon/core/status-information"));
var _statusSuccess = _interopRequireDefault(require("@atlaskit/icon/core/status-success"));
var _statusWarning = _interopRequireDefault(require("@atlaskit/icon/core/status-warning"));
var _actions = require("../editor-actions/actions");
var _utils2 = require("../pm-plugins/utils/utils");
var _panelTypeDropdown = require("./panelTypeDropdown");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var panelIconMap = exports.panelIconMap = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _adfSchema.PanelType.INFO, {
shortName: ':info:',
id: 'atlassian-info'
}), _adfSchema.PanelType.NOTE, {
shortName: ':note:',
id: 'atlassian-note'
}), _adfSchema.PanelType.WARNING, {
shortName: ':warning:',
id: 'atlassian-warning'
}), _adfSchema.PanelType.ERROR, {
shortName: ':cross_mark:',
id: 'atlassian-cross_mark'
}), _adfSchema.PanelType.SUCCESS, {
shortName: ':check_mark:',
id: 'atlassian-check_mark'
}), _adfSchema.PanelType.TIP, {
shortName: ':tip:',
id: 'atlassian-tip'
});
var getToolbarItems = exports.getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, editorAnalyticsAPI, activePanelType, activePanelColor, activePanelIcon, state, api) {
var areAllNewToolbarFlagsDisabled = !(0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
// TODO: ED-14403 - investigate why these titles are not getting translated for the tooltips
var items = areAllNewToolbarFlagsDisabled ? [{
id: 'editor.panel.info',
type: 'button',
icon: _statusInformation.default,
onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.INFO),
selected: activePanelType === _adfSchema.PanelType.INFO,
title: formatMessage(_messages.panelMessages.info),
tabIndex: null
}, {
id: 'editor.panel.note',
type: 'button',
icon: _statusDiscovery.default,
onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.NOTE),
selected: activePanelType === _adfSchema.PanelType.NOTE,
title: formatMessage(_messages.panelMessages.note),
tabIndex: null
}, {
id: 'editor.panel.success',
type: 'button',
icon: _statusSuccess.default,
onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.SUCCESS),
selected: activePanelType === _adfSchema.PanelType.SUCCESS,
title: formatMessage(_messages.panelMessages.success),
tabIndex: null
}, {
id: 'editor.panel.warning',
type: 'button',
icon: _statusWarning.default,
onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.WARNING),
selected: activePanelType === _adfSchema.PanelType.WARNING,
title: formatMessage(_messages.panelMessages.warning),
tabIndex: null
}, {
id: 'editor.panel.error',
type: 'button',
icon: _crossCircle.default,
onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.ERROR),
selected: activePanelType === _adfSchema.PanelType.ERROR,
title: formatMessage(_messages.panelMessages.error),
tabIndex: null
}] : [(0, _panelTypeDropdown.panelTypeDropdown)({
activePanelType: activePanelType,
editorAnalyticsAPI: editorAnalyticsAPI,
formatMessage: formatMessage
})].concat((0, _toConsumableArray2.default)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar) ? [] : [{
type: 'separator'
}]));
if (isCustomPanelEnabled) {
var changeColor = function changeColor(color) {
return function (state, dispatch) {
var panelNode = (0, _utils2.findPanel)(state);
if (panelNode === undefined) {
return false;
}
var previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : (0, _panel.getPanelTypeBackgroundNoTokens)(panelNode.node.attrs.panelType);
var emojiInfo = panelNode.node.attrs.panelType;
var panelEmoji = panelIconMap[emojiInfo];
var previousEmoji = panelEmoji ? {
emoji: panelEmoji.shortName,
emojiId: panelEmoji.id
} : {};
if (previousColor === color) {
(0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.CUSTOM, _objectSpread({
color: color
}, previousEmoji), isCustomPanelEnabled)(state, dispatch);
return false;
}
var payload = {
action: _analytics.ACTION.CHANGED_BACKGROUND_COLOR,
actionSubject: _analytics.ACTION_SUBJECT.PANEL,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.PANEL,
attributes: {
newColor: color,
previousColor: previousColor
},
eventType: _analytics.EVENT_TYPE.TRACK
};
(0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, payload)((0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.CUSTOM, _objectSpread({
color: color
}, previousEmoji), isCustomPanelEnabled))(state, dispatch);
return false;
};
};
var changeEmoji = function changeEmoji(emoji) {
return function (state, dispatch) {
var panelNode = (0, _utils2.findPanel)(state);
if (panelNode === undefined) {
return false;
}
var previousIcon = panelNode.node.attrs.panelIcon || '';
if (previousIcon === emoji.shortName) {
(0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.CUSTOM, {
emoji: emoji.shortName,
emojiId: emoji.id,
emojiText: emoji.fallback
}, true)(state, dispatch);
return false;
}
var payload = {
action: _analytics.ACTION.CHANGED_ICON,
actionSubject: _analytics.ACTION_SUBJECT.PANEL,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.PANEL,
attributes: {
newIcon: emoji.shortName,
previousIcon: previousIcon
},
eventType: _analytics.EVENT_TYPE.TRACK
};
(0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, payload)((0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.CUSTOM, {
emoji: emoji.shortName,
emojiId: emoji.id,
emojiText: emoji.fallback
}, true))(state, dispatch);
return false;
};
};
var removeEmoji = function removeEmoji() {
return function (state, dispatch) {
var panelNode = (0, _utils2.findPanel)(state);
if (activePanelType === _adfSchema.PanelType.CUSTOM && !activePanelIcon) {
return false;
}
if (panelNode === undefined) {
return false;
}
var payload = {
action: _analytics.ACTION.REMOVE_ICON,
actionSubject: _analytics.ACTION_SUBJECT.PANEL,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.PANEL,
attributes: {
icon: panelNode.node.attrs.panelIcon
},
eventType: _analytics.EVENT_TYPE.TRACK
};
(0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, payload)((0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.CUSTOM, {
emoji: undefined,
emojiId: undefined,
emojiText: undefined
}, isCustomPanelEnabled))(state, dispatch);
return false;
};
};
var panelColor = activePanelType === _adfSchema.PanelType.CUSTOM ? activePanelColor || (0, _panel.getPanelTypeBackgroundNoTokens)(_adfSchema.PanelType.INFO) : (0, _panel.getPanelTypeBackgroundNoTokens)(activePanelType);
var defaultPalette = _uiColor.panelBackgroundPalette.find(function (item) {
return item.value === panelColor;
}) || {
// eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
label: 'Custom',
value: panelColor,
border: _uiColor.DEFAULT_BORDER_COLOR
};
if (isCustomPanelEditable) {
var colorPicker = {
id: 'editor.panel.colorPicker',
title: formatMessage(_messages.panelMessages.backgroundColor),
isAriaExpanded: true,
type: 'select',
selectType: 'color',
defaultValue: defaultPalette,
options: _uiColor.panelBackgroundPalette,
onChange: function onChange(option) {
return changeColor(option.value);
}
};
var emojiPicker = {
id: 'editor.panel.emojiPicker',
title: formatMessage(_messages.panelMessages.emoji),
type: 'select',
selectType: 'emoji',
options: [],
selected: activePanelType === _adfSchema.PanelType.CUSTOM && !!activePanelIcon,
onChange: function onChange(emoji) {
return changeEmoji(emoji);
}
};
var removeEmojiButton = {
id: 'editor.panel.removeEmoji',
type: 'button',
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_emojiRemove.default, {
spacing: 'spacious',
label: ''
});
},
onClick: removeEmoji(),
title: formatMessage(_messages.default.removeEmoji),
disabled: activePanelIcon ? false : true
};
items.push(emojiPicker, removeEmojiButton, {
type: 'separator'
}, colorPicker);
}
}
if (areAllNewToolbarFlagsDisabled) {
if (state) {
items.push({
type: 'separator'
});
items.push({
type: 'copy-button',
items: [{
state: state,
formatMessage: formatMessage,
nodeType: panelNodeType
}]
});
}
items.push({
type: 'separator'
}, {
id: 'editor.panel.delete',
type: 'button',
appearance: 'danger',
focusEditoronEnter: true,
icon: function icon() {
return /*#__PURE__*/_react.default.createElement(_delete.default, {
spacing: 'spacious',
label: ''
});
},
onClick: (0, _actions.removePanel)(editorAnalyticsAPI),
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, true),
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, false),
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, true),
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(panelNodeType, false),
title: formatMessage(_messages.default.remove),
tabIndex: null
});
} else {
var hoverDecorationProps = function hoverDecorationProps(nodeType, className) {
return {
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
};
};
// testId is required to show focus on trigger button on ESC key press
// see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
var testId = 'panel-overflow-dropdown-trigger';
var overflowMenuConfig = [{
type: 'separator',
fullHeight: true
}, {
type: 'overflow-dropdown',
testId: testId,
options: [_objectSpread({
title: formatMessage(_messages.default.copyToClipboard),
onClick: function onClick() {
var _api$core, _api$floatingToolbar;
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute( // @ts-ignore
api === null || api === void 0 || (_api$floatingToolbar = api.floatingToolbar) === null || _api$floatingToolbar === void 0 ? void 0 : _api$floatingToolbar.commands.copyNode(panelNodeType, _analytics.INPUT_METHOD.FLOATING_TB));
return true;
},
icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
label: ""
})
}, hoverDecorationProps(panelNodeType, _editorSharedStyles.akEditorSelectedNodeClassName)), _objectSpread({
title: formatMessage(_messages.default.delete),
onClick: (0, _actions.removePanel)(editorAnalyticsAPI),
icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
label: ""
})
}, hoverDecorationProps(panelNodeType))]
}];
items.push.apply(items, overflowMenuConfig);
}
return items;
};
var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(state, intl) {
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var providerFactory = arguments.length > 3 ? arguments[3] : undefined;
var api = arguments.length > 4 ? arguments[4] : undefined;
var formatMessage = intl.formatMessage;
var panelObject = (0, _utils2.findPanel)(state);
if (panelObject) {
var _api$decorations, _api$analytics;
var nodeType = state.schema.nodes.panel;
var _panelObject$node$att = panelObject.node.attrs,
panelType = _panelObject$node$att.panelType,
panelColor = _panelObject$node$att.panelColor,
panelIcon = _panelObject$node$att.panelIcon;
var isStandardPanel = function isStandardPanel(panelType) {
return panelType !== _adfSchema.PanelType.CUSTOM ? panelType : undefined;
};
// force toolbar to be turned on
var items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined, state, (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar)) ? api : undefined);
var getDomRef = function getDomRef(editorView) {
var domAtPos = editorView.domAtPos.bind(editorView);
var element = (0, _utils.findDomRefAtPos)(panelObject.pos, domAtPos);
return element;
};
return {
title: 'Panel floating controls',
getDomRef: getDomRef,
nodeType: nodeType,
items: items,
scrollable: true,
groupLabel: formatMessage(_messages.panelMessages.panelsGroup)
};
}
return;
};