UNPKG

@atlaskit/editor-plugin-breakout

Version:

Breakout plugin for @atlaskit/editor-core

113 lines 4.09 kB
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; });