@atlaskit/editor-plugin-layout
Version:
Layout plugin for @atlaskit/editor-core
233 lines (225 loc) • 11.8 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.LayoutSectionView = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _hooks = require("@atlaskit/editor-common/hooks");
var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
var _resizer = require("@atlaskit/editor-common/resizer");
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
var _model = require("@atlaskit/editor-prosemirror/model");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _utils = require("../pm-plugins/utils");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var layoutDynamicFullWidthGuidelineOffset = 16;
var isEmptyParagraph = function isEmptyParagraph(node) {
return !!node && node.type.name === 'paragraph' && !node.childCount;
};
var isBreakoutAvailable = function isBreakoutAvailable(schema) {
return Boolean(schema.marks.breakout);
};
var isEmptyLayout = function isEmptyLayout(node) {
if (!node) {
return false;
}
// fast check
// each column should have size 2 from layoutcolumn and 2 from empty paragraph
if (node.content.size / node.childCount !== 4) {
return false;
}
var isEmpty = true;
node.content.forEach(function (maybelayoutColumn) {
if (maybelayoutColumn.type.name !== 'layoutColumn' || maybelayoutColumn.childCount > 1 || !isEmptyParagraph(maybelayoutColumn.firstChild)) {
isEmpty = false;
return;
}
});
return isEmpty;
};
var selector = function selector(states) {
var _states$editorDisable;
return {
editorDisabled: (_states$editorDisable = states.editorDisabledState) === null || _states$editorDisable === void 0 ? void 0 : _states$editorDisable.editorDisabled
};
};
var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
var _pluginInjectionApi$a;
var pluginInjectionApi = _ref.pluginInjectionApi,
forwardRef = _ref.forwardRef,
getPos = _ref.getPos,
view = _ref.view,
parentRef = _ref.parentRef;
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['editorDisabled'], selector),
editorDisabled = _useSharedPluginState.editorDisabled;
var interactionState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'interaction.interactionState');
var getEditorWidth = function getEditorWidth() {
var _pluginInjectionApi$w;
return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
};
var displayGapCursor = (0, _react.useCallback)(function (toggle) {
var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$s;
return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
}, [pluginInjectionApi]);
var displayGuidelines = (0, _react.useCallback)(function (guidelines) {
var _pluginInjectionApi$g;
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$g = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g === void 0 || (_pluginInjectionApi$g = _pluginInjectionApi$g.actions) === null || _pluginInjectionApi$g === void 0 || _pluginInjectionApi$g.displayGuideline(view)({
guidelines: guidelines
});
}, [pluginInjectionApi, view]);
// we want to hide the floating toolbar for other nodes.
// e.g. info panel inside the current layout section
var selectIntoCurrentLayout = (0, _react.useCallback)(function () {
var pos = getPos();
if (pos === undefined) {
return;
}
// put the selection into the first column of the layout
(0, _utils.selectIntoLayout)(view, pos, 0);
}, [getPos, view]);
if (interactionState === 'hasNotHadInteraction' && !(0, _expValEquals.expValEquals)('platform_editor_breakout_interaction_rerender', 'isEnabled', true)) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_resizer.BreakoutResizer, {
getRef: forwardRef,
getPos: getPos,
editorView: view,
nodeType: "layoutSection",
getEditorWidth: getEditorWidth,
disabled: (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) ? true : editorDisabled === true || !isBreakoutAvailable(view.state.schema),
hidden: interactionState === 'hasNotHadInteraction' && (0, _expValEquals.expValEquals)('platform_editor_breakout_interaction_rerender', 'isEnabled', true),
parentRef: parentRef,
editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
displayGuidelines: (0, _experiments.editorExperiment)('single_column_layouts', true) ? displayGuidelines : undefined,
displayGapCursor: displayGapCursor
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onResizeStart: function onResizeStart() {
selectIntoCurrentLayout();
},
dynamicFullWidthGuidelineOffset: layoutDynamicFullWidthGuidelineOffset
});
};
var toDOM = function toDOM(node) {
return ['div', {
class: 'layout-section-container'
}, ['div', _objectSpread({
'data-layout-section': true
}, (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') && {
'data-local-id': node.attrs.localId
}), 0]];
};
/**
*
*/
var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
/**
* constructor
* @param props
* @param props.node
* @param props.view
* @param props.getPos
* @param props.portalProviderAPI
* @param props.eventDispatcher
* @param props.pluginInjectionApi
* @param props.options
* @example
*/
function LayoutSectionView(props) {
var _this;
(0, _classCallCheck2.default)(this, LayoutSectionView);
_this = _callSuper(this, LayoutSectionView, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
_this.isEmpty = isEmptyLayout(_this.node);
_this.options = props.options;
return _this;
}
/**
* getContentDOM
* @example
* @returns
*/
(0, _inherits2.default)(LayoutSectionView, _ReactNodeView);
return (0, _createClass2.default)(LayoutSectionView, [{
key: "getContentDOM",
value: function getContentDOM() {
var _ref2 = _model.DOMSerializer.renderSpec(document, toDOM(this.node)),
container = _ref2.dom,
contentDOM = _ref2.contentDOM;
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
this.layoutDOM = container.querySelector('[data-layout-section]');
this.layoutDOM.setAttribute('data-column-rule-style', this.node.attrs.columnRuleStyle);
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
if ((0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid')) {
this.layoutDOM.setAttribute('data-local-id', this.node.attrs.localId);
}
return {
dom: container,
contentDOM: contentDOM
};
}
/**
* setDomAttrs
* @param node
* @param element
* @example
*/
}, {
key: "setDomAttrs",
value: function setDomAttrs(node, _element) {
if (this.layoutDOM) {
this.layoutDOM.setAttribute('data-column-rule-style', node.attrs.columnRuleStyle);
}
}
/**
* render
* @param props
* @param forwardRef
* @example
* @returns
*/
}, {
key: "render",
value: function render(props, forwardRef) {
this.isEmpty = isEmptyLayout(this.node);
if (this.layoutDOM) {
this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
}
if ((0, _expValEquals.expValEquals)('platform_editor_breakout_resizing', 'isEnabled', true)) {
return null;
}
return /*#__PURE__*/_react.default.createElement(LayoutBreakoutResizer, {
pluginInjectionApi: props.pluginInjectionApi,
forwardRef: forwardRef,
getPos: props.getPos,
view: props.view,
parentRef: this.layoutDOM
});
}
/**
* ignoreMutation
* @param mutation
* @example
* @returns
*/
}, {
key: "ignoreMutation",
value: function ignoreMutation(mutation) {
return (0, _resizer.ignoreResizerMutations)(mutation);
}
}]);
}(_reactNodeView.default);