@atlaskit/editor-plugin-block-controls
Version:
Block controls plugin for @atlaskit/editor-core
371 lines (366 loc) • 13.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = 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_SHIFT_CLICK_DEPTH = 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_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _styles = require("@atlaskit/editor-common/styles");
var _utils = require("@atlaskit/editor-common/utils");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _dropTargetMarginMap;
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 = _editorSharedStyles.akRichMediaResizeZIndex + _editorSharedStyles.akEditorUnitZIndex; //place above legacy resizer
var DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_DEFAULT_GAP = 8;
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 = _styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_MAX_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;
/** We only want to shift-select nodes that are at the top level of a document.
* This is because funky things happen when selecting inside of tableCells, but we
* also want to avoid heavily nested cases to descope potential corner cases.
* Various top level nodes have their selection 'from' at depths other than 0,
* so we allow for some leniency to capture them all. e.g. Table is depth 3.
*/
var DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = 3;
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 breakoutResizableNodes = ['expand', 'layoutSection', 'codeBlock'];
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 = (0, _experiments.editorExperiment)('platform_synced_block', true) ? _utils.breakoutResizableNodes : breakoutResizableNodes;
if ((0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) && breakoutResizableNodesList.includes(nodeType)) {
if (nodeType === 'layoutSection') {
return DRAG_HANDLE_MAX_GAP + 20;
} else {
return DRAG_HANDLE_MAX_GAP;
}
}
if (nodeType === 'layoutSection') {
return DRAG_HANDLE_DEFAULT_GAP + 20;
}
if (nodeTypeExcludeList.includes(nodeType)) {
return DRAG_HANDLE_MAX_GAP;
}
return DRAG_HANDLE_DEFAULT_GAP;
};
// use for returning hap only for root level elements
var rootElementGap = exports.rootElementGap = function rootElementGap(nodeType) {
var breakoutResizableNodesList = (0, _experiments.editorExperiment)('platform_synced_block', true) ? _utils.breakoutResizableNodes : breakoutResizableNodes;
if (nodeTypeExcludeList.includes(nodeType) || (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) && 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 DRAG_HANDLE_DEFAULT_GAP;
};
var getNestedNodeLeftPaddingMargin = exports.getNestedNodeLeftPaddingMargin = function getNestedNodeLeftPaddingMargin(nodeType) {
switch (nodeType) {
case 'bodiedExtension':
return '28px';
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(_styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_NARROW_GAP, "px");
}
};
var topPositionAdjustment = exports.topPositionAdjustment = function topPositionAdjustment(nodeType, layout) {
if ((0, _experiments.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) && (0, _experiments.editorExperiment)('platform_editor_fix_selection_wrapped_media_embed', true)) {
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 dropTargetMarginMap = exports.dropTargetMarginMap = (_dropTargetMarginMap = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_dropTargetMarginMap, -24, "var(--ds-space-negative-300, -24px)"), -20, "var(--ds-space-negative-250, -20px)"), -16, "var(--ds-space-negative-200, -16px)"), -12, "var(--ds-space-negative-150, -12px)"), -8, "var(--ds-space-negative-100, -8px)"), -6, "var(--ds-space-negative-075, -6px)"), -4, "var(--ds-space-negative-050, -4px)"), -2, "var(--ds-space-negative-025, -2px)"), 0, "var(--ds-space-0, 0px)"), 2, "var(--ds-space-025, 2px)"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_dropTargetMarginMap, 4, "var(--ds-space-050, 4px)"), 6, "var(--ds-space-075, 6px)"), 8, "var(--ds-space-100, 8px)"), 12, "var(--ds-space-150, 12px)"), 16, "var(--ds-space-200, 16px)"), 20, "var(--ds-space-250, 20px)"), 24, "var(--ds-space-300, 24px)"));
/**
* This document serves as a quick reference map for correlating various space matches
* to the table provided above.
* For instance, the number 1 will correspond to \{0: token('space.0', '0')\}.
*/
var spaceLookupMap = exports.spaceLookupMap = Object.fromEntries(
// 49 = -24 -> 0 -> 24 totaling 49 entries.
Array.from({
length: 49
}, function (_, index) {
var currKeyValue = index - 24;
var keyValues = Object.keys(dropTargetMarginMap).map(Number);
var value = keyValues.reduce(function (acc, curr) {
return Math.abs(currKeyValue - curr) < Math.abs(currKeyValue - acc) ? curr : acc;
}, 1000);
return [currKeyValue, dropTargetMarginMap[value]];
}));
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'
},
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
},
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
};