@atlaskit/editor-plugin-grid
Version:
Grid plugin for @atlaskit/editor-core
225 lines (222 loc) • 9.14 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.gridPlugin = exports.GRID_SIZE = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _classnames = _interopRequireDefault(require("classnames"));
var _coreUtils = require("@atlaskit/editor-common/core-utils");
var _hooks = require("@atlaskit/editor-common/hooks");
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
var _state = require("@atlaskit/editor-prosemirror/state");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var GRID_SIZE = exports.GRID_SIZE = 12;
var key = new _state.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, (0, _toConsumableArray2.default)(numericHighlights));
var maxHighlight = Math.max.apply(Math, (0, _toConsumableArray2.default)(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 * _editorSharedStyles.breakoutWideScaleRatio - editorMaxWidth) / 2;
sides.forEach(function (side) {
gridLines.push( /*#__PURE__*/_react.default.createElement("div", {
key: side
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: (0, _classnames.default)('gridLine', overflowHighlight(highlights, side, 0, 4) ? 'highlight' : '')
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: (0, _defineProperty2.default)({
position: 'absolute'
}, side, "-".concat(wideSpacing, "px"))
}));
gridLines.push( /*#__PURE__*/_react.default.createElement("div", {
key: side + '-bk'
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: (0, _classnames.default)('gridLine', highlights.indexOf('full-width') > -1 ? 'highlight' : ''),
style: (0, _defineProperty2.default)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
position: 'absolute'
}, side, "-".concat((editorWidth - editorMaxWidth - _editorSharedStyles.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.default.createElement("div", {
key: i
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: (0, _classnames.default)('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 Grid = function Grid(_ref3) {
var highlight = _ref3.highlight,
shouldCalcBreakoutGridLines = _ref3.shouldCalcBreakoutGridLines,
theme = _ref3.theme,
containerElement = _ref3.containerElement,
editorWidth = _ref3.editorWidth,
gridType = _ref3.gridType,
visible = _ref3.visible;
var editorMaxWidth = theme.layoutMaxWidth;
var gridLines = [].concat((0, _toConsumableArray2.default)(lineLengthGridLines(highlight)), (0, _toConsumableArray2.default)(gutterGridLines(editorMaxWidth, editorWidth, highlight, shouldCalcBreakoutGridLines)));
return (
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
_react.default.createElement("div", {
className: "gridParent"
}, /*#__PURE__*/_react.default.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: (0, _classnames.default)('gridContainer', gridType),
style: {
height: "".concat(containerElement.scrollHeight, "px"),
display: visible ? 'block' : 'none'
},
"data-testid": "gridContainer"
}, gridLines))
);
};
var ThemedGrid = (0, _react2.withTheme)(Grid);
var selector = function selector(states) {
var _states$widthState, _states$gridState, _states$gridState2, _states$gridState3;
return {
width: (_states$widthState = states.widthState) === null || _states$widthState === void 0 ? void 0 : _states$widthState.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(_ref4) {
var api = _ref4.api,
editorView = _ref4.editorView,
options = _ref4.options;
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['width', 'grid'], selector),
width = _useSharedPluginState.width,
visible = _useSharedPluginState.visible,
gridType = _useSharedPluginState.gridType,
highlight = _useSharedPluginState.highlight;
if (visible === undefined || !highlight) {
return null;
}
if ((0, _expValEquals.expValEquals)('platform_editor_remove_grid_init_reflow', 'isEnabled', true)) {
if (!visible || !highlight) {
return null;
}
} else {
if (visible === undefined || !highlight) {
return null;
}
}
return /*#__PURE__*/_react.default.createElement(ThemedGrid, {
shouldCalcBreakoutGridLines: options && options.shouldCalcBreakoutGridLines,
editorWidth: width !== null && width !== void 0 ? width : _editorSharedStyles.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
});
};
var EMPTY_STATE = {
visible: false,
highlight: []
};
var gridPMPlugin = new _safePlugin.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`.
*/
var gridPlugin = exports.gridPlugin = function gridPlugin(_ref5) {
var options = _ref5.config,
api = _ref5.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(_ref6) {
var editorView = _ref6.editorView;
if (!editorView || (0, _coreUtils.isSSR)()) {
return null;
}
return /*#__PURE__*/_react.default.createElement(ContentComponent, {
editorView: editorView,
options: options,
api: api
});
}
};
};