@atlaskit/editor-plugin-panel
Version:
Panel plugin for @atlaskit/editor-core.
111 lines • 7.62 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _defineProperty(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; }
import { PanelType } from '@atlaskit/adf-schema';
import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
import { findParentNode, findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
import { akEditorTableContainerBg } from '@atlaskit/editor-shared-styles/consts';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
export var isPanel = function isPanel(nodeName) {
return expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? ['panel', 'panel_c1'].includes(nodeName) : nodeName === 'panel';
};
export var panelTypes = function panelTypes(nodes) {
var panel = nodes.panel,
panel_c1 = nodes.panel_c1;
return expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? [panel, panel_c1] : [panel];
};
export var findPanel = function findPanel(state, selection) {
return findSelectedNodeOfType(panelTypes(state.schema.nodes))(selection || state.selection) || findParentNodeOfType(panelTypes(state.schema.nodes))(selection || state.selection);
};
export var panelAttrsToDom = function panelAttrsToDom(attrs, allowCustomPanel) {
var panelColor = attrs.panelColor,
panelType = attrs.panelType,
panelIcon = attrs.panelIcon,
panelIconId = attrs.panelIconId,
panelIconText = attrs.panelIconText;
var isCustomPanel = panelType === PanelType.CUSTOM && allowCustomPanel;
var hasIcon = !isCustomPanel || !!panelIcon || !!panelIconId;
var tokenColor = expValEquals('platform_editor_stricter_panelcolor_typecheck', 'isEnabled', true) ? typeof panelColor === 'string' && hexToEditorBackgroundPaletteColor(panelColor) : panelColor && hexToEditorBackgroundPaletteColor(panelColor);
var panelBackgroundColor = tokenColor || panelColor;
var isCustomPanelWithColor = expValEquals('platform_editor_stricter_panelcolor_typecheck', 'isEnabled', true) ? typeof panelColor === 'string' && isCustomPanel : panelColor && isCustomPanel;
var style = ["".concat(isCustomPanelWithColor ? "background-color: ".concat(panelBackgroundColor, ";") : ''), // When table-in-panel is enabled, set --table-container-bg so that table
// masking elements (sticky-header mask, column-controls wrapper) blend with
// the custom panel background instead of showing opaque white.
"".concat(isCustomPanelWithColor && expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "".concat(akEditorTableContainerBg, ": ").concat(panelBackgroundColor, ";") : ''), "".concat(!hasIcon && !fg('platform_editor_nested_dnd_styles_changes') ? "padding-left: 12px;padding-right: 12px;" : '')].join('');
var panelAttrs = {
class: "".concat(PanelSharedCssClassName.prefix).concat(!hasIcon && fg('platform_editor_nested_dnd_styles_changes') ? " ".concat(PanelSharedCssClassName.noIcon) : ''),
'data-panel-type': panelType || 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 (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: PanelSharedCssClassName.icon,
'data-panel-type': panelType || PanelType.INFO
}];
var contentDiv = ['div', {
class: PanelSharedCssClassName.content
}, 0];
if (hasIcon) {
return ['div', panelAttrs, iconDiv, contentDiv];
} else {
return ['div', panelAttrs, contentDiv];
}
};
export var handleCut = function handleCut(newState, oldState) {
var newTr = newState.tr;
var schema = newState.doc.type.schema;
if (panelContentCheck(newState, oldState)) {
var _oldPanelNode$node$ty;
// 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 = findParentNode(function (node) {
return isPanel(node.type.name);
})(oldState.tr.selection);
var clonedPanelNode = oldPanelNode === null || oldPanelNode === void 0 ? void 0 : oldPanelNode.node.copy();
var panelNodeType = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (_oldPanelNode$node$ty = oldPanelNode === null || oldPanelNode === void 0 ? void 0 : oldPanelNode.node.type) !== null && _oldPanelNode$node$ty !== void 0 ? _oldPanelNode$node$ty : schema.nodes.panel : schema.nodes.panel;
var newPanelNode = panelNodeType.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 TextSelection(newTr.doc.resolve(endPos)));
return newTr;
}
}
};
export var 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 NodeSelection;
var isNodeTypeRuleOrCodeBlock = isNodeSelection && ['codeBlock', 'rule'].includes(oldState.tr.selection.node.type.name);
var isParentTypePanel = findParentNodeOfType(panelTypes(newState.schema.nodes))(oldState.tr.selection);
var isparentTypeDecision = 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));
};