@atlaskit/editor-plugin-panel
Version:
Panel plugin for @atlaskit/editor-core.
104 lines (103 loc) • 6.86 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.panelContentCheck = exports.panelAttrsToDom = exports.handleCut = exports.findPanel = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _adfSchema = require("@atlaskit/adf-schema");
var _panel = require("@atlaskit/editor-common/panel");
var _editorPalette = require("@atlaskit/editor-palette");
var _state = require("@atlaskit/editor-prosemirror/state");
var _utils = require("@atlaskit/editor-prosemirror/utils");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
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 findPanel = exports.findPanel = function findPanel(state, selection) {
var panel = state.schema.nodes.panel;
return (0, _utils.findSelectedNodeOfType)(panel)(selection || state.selection) || (0, _utils.findParentNodeOfType)(panel)(selection || state.selection);
};
var panelAttrsToDom = exports.panelAttrsToDom = function panelAttrsToDom(attrs, allowCustomPanel) {
var panelColor = attrs.panelColor,
panelType = attrs.panelType,
panelIcon = attrs.panelIcon,
panelIconId = attrs.panelIconId,
panelIconText = attrs.panelIconText;
var isCustomPanel = panelType === _adfSchema.PanelType.CUSTOM && allowCustomPanel;
var hasIcon = !isCustomPanel || !!panelIcon || !!panelIconId;
var tokenColor = (0, _expValEquals.expValEquals)('platform_editor_stricter_panelcolor_typecheck', 'isEnabled', true) ? typeof panelColor === 'string' && (0, _editorPalette.hexToEditorBackgroundPaletteColor)(panelColor) : panelColor && (0, _editorPalette.hexToEditorBackgroundPaletteColor)(panelColor);
var panelBackgroundColor = tokenColor || panelColor;
var style = ["".concat(((0, _expValEquals.expValEquals)('platform_editor_stricter_panelcolor_typecheck', 'isEnabled', true) ? typeof panelColor === 'string' && isCustomPanel : panelColor && isCustomPanel) ? "background-color: ".concat(panelBackgroundColor, ";") : ''), "".concat(!hasIcon && !(0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? "padding-left: 12px;padding-right: 12px;" : '')].join('');
var panelAttrs = {
class: "".concat(_panel.PanelSharedCssClassName.prefix).concat(!hasIcon && (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? " ".concat(_panel.PanelSharedCssClassName.noIcon) : ''),
'data-panel-type': panelType || _adfSchema.PanelType.INFO,
'data-testid': 'panel-node-view',
style: style
};
if (panelColor && isCustomPanel) {
panelAttrs = _objectSpread(_objectSpread({}, panelAttrs), {}, {
'data-panel-color': panelColor,
'data-panel-icon-id': panelIconId,
'data-panel-icon-text': panelIconText
});
}
// Required for parseDOM to correctly parse custom panel when NodeView DOM is copied directly
// Schema's parseDOM expects data-panel-icon on all custom panels, not just ones with color
if (isCustomPanel) {
panelAttrs = _objectSpread(_objectSpread({}, panelAttrs), {}, {
'data-panel-icon': panelIcon
});
}
if ((0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid')) {
panelAttrs = _objectSpread(_objectSpread({}, panelAttrs), {}, {
'data-local-id': attrs.localId
});
}
var iconDiv = ['div',
// EDITOR-266 This fixes an issue in LCM where if you have nested panels
// The icon colour will be overridden by the parent panel style, this is used to create a more specific css selector
{
class: _panel.PanelSharedCssClassName.icon,
'data-panel-type': panelType || _adfSchema.PanelType.INFO
}];
var contentDiv = ['div', {
class: _panel.PanelSharedCssClassName.content
}, 0];
if (hasIcon) {
return ['div', panelAttrs, iconDiv, contentDiv];
} else {
return ['div', panelAttrs, contentDiv];
}
};
var handleCut = exports.handleCut = function handleCut(newState, oldState) {
var newTr = newState.tr;
var schema = newState.doc.type.schema;
if (panelContentCheck(newState, oldState)) {
// Create a panel using oldState with an empty paragraph node
// and insert it in the same location when panel previously existed
var emptyParagraph = schema.nodes.paragraph.create();
var oldPanelNode = (0, _utils.findParentNode)(function (node) {
return node.type.name === 'panel';
})(oldState.tr.selection);
var clonedPanelNode = oldPanelNode === null || oldPanelNode === void 0 ? void 0 : oldPanelNode.node.copy();
var newPanelNode = schema.nodes.panel.create(_objectSpread({}, clonedPanelNode === null || clonedPanelNode === void 0 ? void 0 : clonedPanelNode.attrs), emptyParagraph);
var endPos = oldState.tr.selection.$from.pos;
if (oldPanelNode) {
newTr.insert(oldPanelNode.pos, newPanelNode).setSelection(new _state.TextSelection(newTr.doc.resolve(endPos)));
return newTr;
}
}
};
var panelContentCheck = exports.panelContentCheck = function panelContentCheck(newState, oldState) {
// The following fuctions checks if *
// a. old selection is a NodeSelection.
// b. parent element a panel and does it have only one child
// c. parent node has a decision list and that decision list only has one decision item
// OR old selection is a codeblock OR old selection is a rule
var isNodeSelection = oldState.tr.selection instanceof _state.NodeSelection;
var isNodeTypeRuleOrCodeBlock = isNodeSelection && ['codeBlock', 'rule'].includes(oldState.tr.selection.node.type.name);
var isParentTypePanel = (0, _utils.findParentNodeOfType)(newState.schema.nodes.panel)(oldState.tr.selection);
var isparentTypeDecision = (0, _utils.findParentNodeOfType)(newState.schema.nodes.decisionList)(oldState.tr.selection);
return Boolean(isNodeSelection && (isParentTypePanel === null || isParentTypePanel === void 0 ? void 0 : isParentTypePanel.node.childCount) === 1 && ((isparentTypeDecision === null || isparentTypeDecision === void 0 ? void 0 : isparentTypeDecision.node.childCount) === 1 || isNodeTypeRuleOrCodeBlock));
};