@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
46 lines • 1.48 kB
JavaScript
import memoizeOne from 'memoize-one';
import { breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
import { roundToNearest } from '../media-single';
import { getContainerWidthOrFullEditorWidth } from './utils';
const getDefaultGuidelines = memoizeOne(editorWidth => {
return [-6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6].map((val, index) => ({
key: `grid_${index}`,
position: {
x: roundToNearest(val / 12 * editorWidth)
}
}));
});
const getWideGuidelines = memoizeOne(editorWidth => {
const wideSpacing = roundToNearest(editorWidth * breakoutWideScaleRatio / 2);
return [{
key: `wide_left`,
position: {
x: -wideSpacing
}
}, {
key: `wide_right`,
position: {
x: wideSpacing
}
}];
});
const getFullWidthGuidelines = memoizeOne(containerWidth => {
const fullWidth = roundToNearest(getContainerWidthOrFullEditorWidth(containerWidth));
return [{
key: `full_width_left`,
position: {
x: -fullWidth
}
}, {
key: `full_width_right`,
position: {
x: fullWidth
}
}];
});
export const generateDefaultGuidelines = (editorWidth, containerWidth, isFullWidthMode = false) => {
const innerGrids = getDefaultGuidelines(editorWidth);
const wideGuidelines = !isFullWidthMode ? getWideGuidelines(editorWidth) : [];
const fullWidthGuidelines = !isFullWidthMode ? getFullWidthGuidelines(containerWidth) : [];
return [...innerGrids, ...wideGuidelines, ...fullWidthGuidelines];
};