@atlaskit/editor-plugin-breakout
Version:
Breakout plugin for @atlaskit/editor-core
113 lines • 4.09 kB
JavaScript
import memoizeOne from 'memoize-one';
import { EXPAND_CONTAINER_PADDING, LAYOUT_COLUMN_PADDING, resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorMaxLayoutWidth } from '@atlaskit/editor-shared-styles';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
var WIDTHS = {
MIN: akEditorDefaultLayoutWidth,
WIDE: akEditorCalculatedWideLayoutWidth,
FULL: akEditorFullWidthLayoutWidth,
MAX: akEditorMaxLayoutWidth
};
export var GUIDELINE_KEYS = {
lineLengthLeft: 'grid_left',
lineLengthRight: 'grid_right',
wideLeft: 'wide_left',
wideRight: 'wide_right',
fullWidthLeft: 'full_width_left',
fullWidthRight: 'full_width_right',
maxWidthLeft: 'max_width_left',
maxWidthRight: 'max_width_right'
};
var AK_NESTED_DND_GUTTER_OFFSET = 8;
var roundToNearest = function roundToNearest(value) {
var interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
return Math.round(value / interval) * interval;
};
export var getGuidelines = memoizeOne(function (isResizing, newWidth, getEditorWidth, nodeType) {
var guidelines = [];
if (!isResizing) {
return guidelines;
}
var innerPaddingOffset = 0;
if (nodeType) {
switch (nodeType.name) {
case 'expand':
innerPaddingOffset = EXPAND_CONTAINER_PADDING + resizerHandleThumbWidth + AK_NESTED_DND_GUTTER_OFFSET;
break;
case 'layoutSection':
innerPaddingOffset = LAYOUT_COLUMN_PADDING + AK_NESTED_DND_GUTTER_OFFSET;
break;
default:
break;
}
}
var _ref = getEditorWidth() || {},
width = _ref.width;
var padding = width && width <= akEditorFullPageNarrowBreakout && editorExperiment('platform_editor_preview_panel_responsiveness', true, {
exposure: true
}) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
var fullWidth = width ? Math.min(WIDTHS.FULL, width - 2 * padding - akEditorGutterPadding) : undefined;
var maxWidth = width && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) ? Math.min(WIDTHS.MAX, width - 2 * padding - akEditorGutterPadding) : undefined;
guidelines.push({
key: GUIDELINE_KEYS.lineLengthLeft,
position: {
x: -roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
},
active: newWidth === WIDTHS.MIN
});
guidelines.push({
key: GUIDELINE_KEYS.lineLengthRight,
position: {
x: roundToNearest(WIDTHS.MIN / 2 + innerPaddingOffset)
},
active: newWidth === WIDTHS.MIN
});
guidelines.push({
key: GUIDELINE_KEYS.wideLeft,
position: {
x: -roundToNearest(WIDTHS.WIDE / 2 + innerPaddingOffset)
},
active: newWidth === WIDTHS.WIDE
});
guidelines.push({
key: GUIDELINE_KEYS.wideRight,
position: {
x: roundToNearest(WIDTHS.WIDE / 2 + innerPaddingOffset)
},
active: newWidth === WIDTHS.WIDE
});
if (fullWidth) {
guidelines.push({
key: GUIDELINE_KEYS.fullWidthLeft,
position: {
x: -roundToNearest(fullWidth / 2 + innerPaddingOffset)
},
active: newWidth === fullWidth
});
guidelines.push({
key: GUIDELINE_KEYS.fullWidthRight,
position: {
x: roundToNearest(fullWidth / 2 + innerPaddingOffset)
},
active: newWidth === fullWidth
});
}
if (maxWidth) {
guidelines.push({
key: GUIDELINE_KEYS.maxWidthLeft,
position: {
x: -roundToNearest(maxWidth / 2 + innerPaddingOffset)
},
active: newWidth === maxWidth
});
guidelines.push({
key: GUIDELINE_KEYS.maxWidthRight,
position: {
x: roundToNearest(maxWidth / 2 + innerPaddingOffset)
},
active: newWidth === maxWidth
});
}
return guidelines;
});