@atlaskit/editor-plugin-grid
Version:
Grid plugin for @atlaskit/editor-core
248 lines (246 loc) • 10.6 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import React from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { withTheme } from '@emotion/react';
import classnames from 'classnames';
import { isSSR } from '@atlaskit/editor-common/core-utils';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
import { akEditorBreakoutPadding, akEditorDefaultLayoutWidth, akEditorFullPageMaxWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
import { componentWithCondition } from '@atlaskit/platform-feature-flags-react/component-with-condition';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
export var GRID_SIZE = 12;
// Matches the existing `.gridParent` 12px left + 12px right gutter expansion.
var GRID_GUTTER_WIDTH = 24;
var key = new PluginKey('gridPlugin');
var createDisplayGrid = function createDisplayGrid(view) {
return function (props) {
var dispatch = view.dispatch,
state = view.state;
var tr = state.tr.setMeta(key, props);
dispatch(tr);
return true;
};
};
var sides = ['left', 'right'];
var overflowHighlight = function overflowHighlight(highlights, side, start, size) {
if (!highlights.length) {
return false;
}
var numericHighlights = highlights.filter(function (highlight) {
return typeof highlight === 'number';
});
var minHighlight = Math.min.apply(Math, _toConsumableArray(numericHighlights));
var maxHighlight = Math.max.apply(Math, _toConsumableArray(numericHighlights));
if (side === 'left') {
return minHighlight < 0 && minHighlight <= -start && (typeof size === 'number' ? minHighlight >= -(start + size) : true);
} else {
return maxHighlight > GRID_SIZE && maxHighlight >= GRID_SIZE + start && (typeof size === 'number' ? maxHighlight <= GRID_SIZE + size : true);
}
};
var gutterGridLines = function gutterGridLines(editorMaxWidth, editorWidth, highlights, shouldCalcBreakoutGridLines) {
var gridLines = [];
if (!shouldCalcBreakoutGridLines) {
return gridLines;
}
var wideSpacing = (editorMaxWidth * breakoutWideScaleRatio - editorMaxWidth) / 2;
sides.forEach(function (side) {
gridLines.push( /*#__PURE__*/React.createElement("div", {
key: side
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: classnames('gridLine', overflowHighlight(highlights, side, 0, 4) ? 'highlight' : '')
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: _defineProperty({
position: 'absolute'
}, side, "-".concat(wideSpacing, "px"))
}));
gridLines.push( /*#__PURE__*/React.createElement("div", {
key: side + '-bk'
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: classnames('gridLine', highlights.indexOf('full-width') > -1 ? 'highlight' : ''),
style: _defineProperty({
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
position: 'absolute'
}, side, "-".concat((editorWidth - editorMaxWidth - akEditorBreakoutPadding) / 2, "px"))
}));
});
return gridLines;
};
var lineLengthGridLines = function lineLengthGridLines(highlights) {
var gridLines = [];
var gridSpacing = 100 / GRID_SIZE;
for (var i = 0; i <= GRID_SIZE; i++) {
var style = {
paddingLeft: "".concat(gridSpacing, "%")
};
gridLines.push( /*#__PURE__*/React.createElement("div", {
key: i
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: classnames('gridLine', highlights.indexOf(i) > -1 ? 'highlight' : '')
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: i < GRID_SIZE ? style : undefined
}));
}
return gridLines;
};
var GridLegacy = function GridLegacy(_ref3) {
var highlight = _ref3.highlight,
shouldCalcBreakoutGridLines = _ref3.shouldCalcBreakoutGridLines,
theme = _ref3.theme,
containerElement = _ref3.containerElement,
editorWidth = _ref3.editorWidth,
gridType = _ref3.gridType,
overlayWidth = _ref3.overlayWidth,
visible = _ref3.visible;
var editorMaxWidth = theme.layoutMaxWidth;
var gridLines = [].concat(_toConsumableArray(lineLengthGridLines(highlight)), _toConsumableArray(gutterGridLines(editorMaxWidth, editorWidth, highlight, shouldCalcBreakoutGridLines)));
return (
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
React.createElement("div", {
className: "gridParent"
}, /*#__PURE__*/React.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: classnames('gridContainer', gridType),
style: {
height: "".concat(containerElement.scrollHeight, "px"),
display: visible ? 'block' : 'none',
width: overlayWidth === undefined ? undefined : "".concat(overlayWidth, "px")
},
"data-testid": "gridContainer"
}, gridLines))
);
};
var GridNext = function GridNext(_ref4) {
var highlight = _ref4.highlight,
shouldCalcBreakoutGridLines = _ref4.shouldCalcBreakoutGridLines,
containerElement = _ref4.containerElement,
editorWidth = _ref4.editorWidth,
gridType = _ref4.gridType,
overlayWidth = _ref4.overlayWidth,
visible = _ref4.visible;
var editorMaxWidth = akEditorDefaultLayoutWidth;
var gridLines = [].concat(_toConsumableArray(lineLengthGridLines(highlight)), _toConsumableArray(gutterGridLines(editorMaxWidth, editorWidth, highlight, shouldCalcBreakoutGridLines)));
return (
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
React.createElement("div", {
className: "gridParent"
}, /*#__PURE__*/React.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: classnames('gridContainer', gridType),
style: {
height: "".concat(containerElement.scrollHeight, "px"),
display: visible ? 'block' : 'none',
width: overlayWidth === undefined ? undefined : "".concat(overlayWidth, "px")
},
"data-testid": "gridContainer"
}, gridLines))
);
};
var ThemedGridLegacy = withTheme(GridLegacy);
var ThemedGrid = componentWithCondition(function () {
return expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true) || expValEquals('platform_editor_core_static_css', 'isEnabled', true);
}, GridNext, ThemedGridLegacy);
var selector = function selector(states) {
var _states$widthState, _states$widthState2, _states$gridState, _states$gridState2, _states$gridState3;
return {
lineLength: (_states$widthState = states.widthState) === null || _states$widthState === void 0 ? void 0 : _states$widthState.lineLength,
width: (_states$widthState2 = states.widthState) === null || _states$widthState2 === void 0 ? void 0 : _states$widthState2.width,
visible: (_states$gridState = states.gridState) === null || _states$gridState === void 0 ? void 0 : _states$gridState.visible,
gridType: (_states$gridState2 = states.gridState) === null || _states$gridState2 === void 0 ? void 0 : _states$gridState2.gridType,
highlight: (_states$gridState3 = states.gridState) === null || _states$gridState3 === void 0 ? void 0 : _states$gridState3.highlight
};
};
var ContentComponent = function ContentComponent(_ref5) {
var api = _ref5.api,
editorView = _ref5.editorView,
options = _ref5.options;
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['width', 'grid'], selector),
lineLength = _useSharedPluginState.lineLength,
width = _useSharedPluginState.width,
visible = _useSharedPluginState.visible,
gridType = _useSharedPluginState.gridType,
highlight = _useSharedPluginState.highlight;
var overlayWidth = expValEquals('platform_editor_external_embed_grid_fix', 'isEnabled', true) ? (lineLength || width || akEditorFullPageMaxWidth) + GRID_GUTTER_WIDTH : undefined;
if (!visible || !highlight) {
return null;
}
return /*#__PURE__*/React.createElement(ThemedGrid, {
shouldCalcBreakoutGridLines: options && options.shouldCalcBreakoutGridLines,
editorWidth: width !== null && width !== void 0 ? width : akEditorFullPageMaxWidth
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
,
containerElement: editorView.dom,
visible: visible,
gridType: gridType !== null && gridType !== void 0 ? gridType : 'full',
highlight: highlight,
overlayWidth: overlayWidth
});
};
var EMPTY_STATE = {
visible: false,
highlight: []
};
var gridPMPlugin = new SafePlugin({
key: key,
state: {
init: function init() {
return EMPTY_STATE;
},
apply: function apply(tr, currentPluginState) {
var nextPluginState = tr.getMeta(key);
if (nextPluginState) {
return nextPluginState;
}
return currentPluginState;
}
}
});
/**
* Grid plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
* from `@atlaskit/editor-core`.
*/
export var gridPlugin = function gridPlugin(_ref6) {
var options = _ref6.config,
api = _ref6.api;
return {
name: 'grid',
getSharedState: function getSharedState(editorState) {
if (!editorState) {
return null;
}
return key.getState(editorState) || null;
},
actions: {
displayGrid: createDisplayGrid
},
pmPlugins: function pmPlugins() {
return [{
name: 'grid',
plugin: function plugin() {
return gridPMPlugin;
}
}];
},
contentComponent: function contentComponent(_ref7) {
var editorView = _ref7.editorView;
if (!editorView || isSSR()) {
return null;
}
return /*#__PURE__*/React.createElement(ContentComponent, {
editorView: editorView,
options: options,
api: api
});
}
};
};