@atlaskit/editor-plugin-block-controls
Version:
Block controls plugin for @atlaskit/editor-core
381 lines (377 loc) • 12.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = exports.DRAG_HANDLE_SYNCED_BLOCK_GAP = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.BLOCK_CONTROLS_SURFACE_SELECTOR = exports.ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = exports.ACTIVE_QUICK_INSERT_ATTR = exports.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME = exports.ACTIVE_DRAG_HANDLE_ATTR = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _dragHandle = require("@atlaskit/editor-common/styles/drag-handle");
var _utils = require("@atlaskit/editor-common/utils");
var _constants = require("@atlaskit/editor-shared-styles/constants");
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
var ACTIVE_DRAG_HANDLE_ATTR = exports.ACTIVE_DRAG_HANDLE_ATTR = 'data-active-drag-handle';
var ACTIVE_QUICK_INSERT_ATTR = exports.ACTIVE_QUICK_INSERT_ATTR = 'data-active-quick-insert';
var BLOCK_CONTROLS_SURFACE_SELECTOR = exports.BLOCK_CONTROLS_SURFACE_SELECTOR = '[data-editor-block-controls-surface]';
var ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME = exports.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME = '--editor-block-controls-active-drag-handle-anchor';
var ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = exports.ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = '--editor-block-controls-active-quick-insert-anchor';
var DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_HEIGHT = 24;
var DRAG_HANDLE_BORDER_RADIUS = exports.DRAG_HANDLE_BORDER_RADIUS = 4;
var DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_ZINDEX = _constants.akRichMediaResizeZIndex + _constants.akEditorUnitZIndex; //place above legacy resizer
var LEGACY_DRAG_HANDLE_DEFAULT_GAP = 8;
var MIGRATED_DRAG_HANDLE_DEFAULT_GAP = 12;
var DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_NARROW_GAP = 4;
var DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_MAX_GAP = 12;
var DRAG_HANDLE_SYNCED_BLOCK_GAP = exports.DRAG_HANDLE_SYNCED_BLOCK_GAP = 2.5;
var DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = _dragHandle.DRAG_HANDLE_WIDTH + DRAG_HANDLE_MAX_GAP;
// Non-resizable/default-sized nodes get the same gap as resizable/breakout nodes
// (DRAG_HANDLE_MAX_GAP) once the registry-backed surfaces are on; kept at the legacy value
// otherwise to avoid an unrelated visual change for consumers still on the old decoration path.
var getDragHandleDefaultGap = function getDragHandleDefaultGap() {
return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? MIGRATED_DRAG_HANDLE_DEFAULT_GAP : LEGACY_DRAG_HANDLE_DEFAULT_GAP;
};
var DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = 4 + 2; // 4px for the divider vertical padding and 2px for the divider height
var DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = 5;
var DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = 2;
var DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = 1;
var DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = 3;
var DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = 3;
var DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
var DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
var DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
var DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = 0;
var DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = exports.DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = 8;
var STICKY_CONTROLS_TOP_MARGIN = exports.STICKY_CONTROLS_TOP_MARGIN = 8;
var STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = 24;
var QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_HEIGHT = 24;
var QUICK_INSERT_WIDTH = exports.QUICK_INSERT_WIDTH = 24;
var QUICK_INSERT_DIMENSIONS = exports.QUICK_INSERT_DIMENSIONS = {
width: QUICK_INSERT_WIDTH,
height: QUICK_INSERT_HEIGHT
};
var QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_LEFT_OFFSET = 16;
var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {
if (parentNodeType === 'syncBlock' || parentNodeType === 'bodiedSyncBlock') {
return DRAG_HANDLE_SYNCED_BLOCK_GAP;
}
if (parentNodeType && parentNodeType !== 'doc') {
return DRAG_HANDLE_NARROW_GAP;
}
var breakoutResizableNodesList = [];
if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_resize_extensions')) {
breakoutResizableNodesList = (0, _utils.getBreakoutResizableNodes)();
} else {
breakoutResizableNodesList = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) ? [].concat((0, _toConsumableArray2.default)(_utils.breakoutResizableNodes), ['rule', 'panel']) : _utils.breakoutResizableNodes;
}
if (breakoutResizableNodesList.includes(nodeType)) {
if (nodeType === 'layoutSection') {
return DRAG_HANDLE_MAX_GAP + 20;
} else {
return DRAG_HANDLE_MAX_GAP;
}
}
if (nodeType === 'layoutSection') {
return getDragHandleDefaultGap() + 20;
}
if (nodeTypeExcludeList.includes(nodeType)) {
return DRAG_HANDLE_MAX_GAP;
}
return getDragHandleDefaultGap();
};
// use for returning gap only for root level elements
var rootElementGap = exports.rootElementGap = function rootElementGap(nodeType) {
var breakoutResizableNodesList = [];
if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_lovability_resize_extensions')) {
breakoutResizableNodesList = (0, _utils.getBreakoutResizableNodes)();
} else {
breakoutResizableNodesList = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true) ? [].concat((0, _toConsumableArray2.default)(_utils.breakoutResizableNodes), ['rule', 'panel']) : _utils.breakoutResizableNodes;
}
if (nodeTypeExcludeList.includes(nodeType) || breakoutResizableNodesList.includes(nodeType)) {
if (nodeType === 'layoutSection') {
return DRAG_HANDLE_MAX_GAP + 20;
} else {
return DRAG_HANDLE_MAX_GAP;
}
}
if (nodeType === 'layoutSection') {
return DRAG_HANDLE_MAX_GAP + 12;
}
return getDragHandleDefaultGap();
};
var getNestedNodeLeftPaddingMargin = exports.getNestedNodeLeftPaddingMargin = function getNestedNodeLeftPaddingMargin(nodeType) {
switch (nodeType) {
case 'bodiedExtension':
return '28px';
case 'multiBodiedExtension':
if ((0, _expValEquals.expValEquals)('confluence_native_tabs_experiment', 'isEnabled', true)) {
return '28px';
}
return "".concat(_dragHandle.DRAG_HANDLE_WIDTH + DRAG_HANDLE_NARROW_GAP, "px");
case 'expand':
case 'nestedExpand':
return '24px';
case 'layoutColumn':
return '20px';
case 'panel':
return '40px';
case 'tableCell':
return '8px';
case 'tableHeader':
return '8px';
default:
return "".concat(_dragHandle.DRAG_HANDLE_WIDTH + DRAG_HANDLE_NARROW_GAP, "px");
}
};
var topPositionAdjustment = exports.topPositionAdjustment = function topPositionAdjustment(nodeType, layout) {
if ((0, _editorExperiment.editorExperiment)('advanced_layouts', true)) {
switch (nodeType) {
case 'layoutSection':
return DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT;
}
}
if ((nodeType === 'mediaSingle' || nodeType === 'embedCard') && layout && ['wrap-left', 'wrap-right'].includes(layout)) {
return DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT;
}
switch (nodeType) {
case 'rule':
return -DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT;
case 'table':
return DRAG_HANDLE_HEIGHT;
case 'paragraph':
return DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT;
case 'paragraph-small':
return DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT;
case 'heading-1':
return DRAG_HANDLE_H1_TOP_ADJUSTMENT;
case 'heading-2':
return DRAG_HANDLE_H2_TOP_ADJUSTMENT;
case 'heading-3':
return -DRAG_HANDLE_H3_TOP_ADJUSTMENT;
case 'heading-4':
return -DRAG_HANDLE_H4_TOP_ADJUSTMENT;
case 'heading-5':
return -DRAG_HANDLE_H5_TOP_ADJUSTMENT;
case 'heading-6':
return -DRAG_HANDLE_H6_TOP_ADJUSTMENT;
default:
return 0;
}
};
var spacingBetweenNodesForPreview = exports.spacingBetweenNodesForPreview = {
paragraph: {
top: '0.75rem',
bottom: '0'
},
heading1: {
top: '1.45833em',
bottom: '0'
},
heading2: {
top: '1.4em',
bottom: '0'
},
heading3: {
top: '1.31249em',
bottom: '0'
},
heading4: {
top: '1.25em',
bottom: '0'
},
heading5: {
top: '1.45833em',
bottom: '0'
},
heading6: {
top: '1.59091em',
bottom: '0'
},
table: {
top: '0',
bottom: '0'
},
bulletList: {
top: '10px',
bottom: '0'
},
orderedList: {
top: '10px',
bottom: '0'
},
decisionList: {
top: '0.5rem',
bottom: '0'
},
taskList: {
top: '0.75rem',
bottom: '0'
},
codeBlock: {
top: '0.75rem',
bottom: '0'
},
panel: {
top: '0.75rem',
bottom: '0'
},
rule: {
top: '1.5rem',
bottom: '1.5rem'
},
mediaSingle: {
top: '24px',
bottom: '24px'
},
media: {
top: '24px',
bottom: '24px'
},
bodiedExtension: {
top: '0',
bottom: '0'
},
multiBodiedExtension: {
top: '0',
bottom: '0'
},
extension: {
top: '0',
bottom: '0'
},
layoutSection: {
top: '0',
bottom: '0'
},
blockquote: {
top: '0',
bottom: '0'
},
embedCard: {
top: '24px',
bottom: '24px'
},
blockCard: {
top: '0.75rem',
bottom: '0'
},
default: {
top: '0',
bottom: '0'
}
};
// This table contains the "margins" of different nodes
// Note this is not the actually margin of the DOM elements,
// but a percepted margin, e.g. a paragraph has additional margin
// due to the line height and the white spaces.
var nodeMargins = exports.nodeMargins = {
table: {
top: 24,
bottom: 16
},
paragraph: {
top: 12,
bottom: 6
},
bulletList: {
top: 16,
bottom: 0
},
orderedList: {
top: 16,
bottom: 0
},
decisionList: {
top: 12,
bottom: 0
},
taskList: {
top: 8,
bottom: 0
},
codeBlock: {
top: 12,
bottom: 0
},
panel: {
top: 8,
bottom: 0
},
rule: {
top: 24,
bottom: 24
},
mediaSingle: {
top: 24,
bottom: 24
},
media: {
top: 24,
bottom: 24
},
bodiedExtension: {
top: 0,
bottom: 0
},
multiBodiedExtension: {
top: 0,
bottom: 0
},
extension: {
top: 12,
bottom: 12
},
heading1: {
top: 40,
bottom: 0
},
heading2: {
top: 40,
bottom: 0
},
heading3: {
top: 36,
bottom: 0
},
heading4: {
top: 22,
bottom: 0
},
heading5: {
top: 22,
bottom: 0
},
heading6: {
top: 18,
bottom: 0
},
layoutSection: {
top: 8,
bottom: 0
},
blockquote: {
top: 12,
bottom: 0
},
expand: {
top: 4,
bottom: 0
},
nestedExpand: {
top: 1,
bottom: 0
},
default: {
top: 0,
bottom: 0
}
};
var DEFAULT_COLUMN_DISTRIBUTIONS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = {
1: 100,
2: 50,
3: 33.33,
4: 25,
5: 20
};