@atlaskit/editor-plugin-layout
Version:
Layout plugin for @atlaskit/editor-core
272 lines (262 loc) • 13.2 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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) { _defineProperty(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; }
import React, { useCallback } from 'react';
import { isSSR, isSSRStreaming } from '@atlaskit/editor-common/core-utils';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import ReactNodeView, { NodeViewContentHole } from '@atlaskit/editor-common/react-node-view';
import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { selectIntoLayout } from '../pm-plugins/utils';
import { LayoutSSRReactContextsProvider } from '../ui/LayoutSSRReactContextsProvider';
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 = useSharedPluginStateWithSelector(pluginInjectionApi, ['editorDisabled'], selector),
editorDisabled = _useSharedPluginState.editorDisabled;
var interactionState = 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 = 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 = 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 = useCallback(function () {
var pos = getPos();
if (pos === undefined) {
return;
}
// put the selection into the first column of the layout
selectIntoLayout(view, pos, 0);
}, [getPos, view]);
if (interactionState === 'hasNotHadInteraction' && !expValEquals('platform_editor_breakout_interaction_rerender', 'isEnabled', true)) {
return null;
}
return /*#__PURE__*/React.createElement(BreakoutResizer, {
getRef: forwardRef,
getPos: getPos,
editorView: view,
nodeType: "layoutSection",
getEditorWidth: getEditorWidth,
disabled: editorExperiment('platform_editor_breakout_resizing', true) ? true : editorDisabled === true || !isBreakoutAvailable(view.state.schema),
hidden: interactionState === 'hasNotHadInteraction' && 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: 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
}, fg('platform_editor_adf_with_localid') && {
'data-local-id': node.attrs.localId
}), 0]];
};
/**
*
*/
export var 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
* @param props.intl
* @example
*/
function LayoutSectionView(props) {
var _this;
_classCallCheck(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;
_this.intl = props.intl;
return _this;
}
/**
* getContentDOM
* @example
* @returns
*/
_inherits(LayoutSectionView, _ReactNodeView);
return _createClass(LayoutSectionView, [{
key: "getContentDOM",
value: function getContentDOM() {
// Build the layout DOM via the schema's toDOM spec. This is the same
// path used in both CSR and SSR — the only SSR-specific concern is
// re-attaching `contentDOM` (= the `[data-layout-section]` element)
// after the portal's renderToStaticMarkup + innerHTML write detaches
// it. We handle that by stamping `data-ssr-content-dom-ref` on the
// outer container so `ReactNodeView.init()` can find a re-attach
// target inside `domRef` after the portal write.
var _ref2 = 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 (fg('platform_editor_adf_with_localid')) {
this.layoutDOM.setAttribute('data-local-id', this.node.attrs.localId);
}
// SSR streaming re-attach note:
// In SSR, `init()` appends `container` into `domRef`; the portal's
// renderToStaticMarkup + innerHTML write then wipes `domRef`,
// detaching the entire subtree (with PM-serialized children inside
// `[data-layout-section]`). React's `render()` emits a
// `<NodeViewContentHole/>` placeholder inside `domRef`; the SSR
// re-attach logic in `init()` finds it via `[data-ssr-content-dom-ref]`
// and calls `_handleRef`, which appends `contentDOMWrapper` (the
// detached `container`) back inside the placeholder. The end result
// is `domRef > NodeViewContentHole > layout-section-container >
// [data-layout-section] > [data-layout-column] children` — the
// layout DOM contract is preserved.
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());
}
// SSR streaming path: render only a `<NodeViewContentHole/>` placeholder
// so ReactNodeView.init()'s SSR re-attach logic can find the marker
// (`data-ssr-content-dom-ref`) and re-append the detached
// contentDOMWrapper — which is the FULL layout structure
// (`layout-section-container > [data-layout-section] > children`) built
// in `getContentDOM` via DOMSerializer.renderSpec. This avoids
// duplicating layout structure between getContentDOM and render(), which
// previously caused an extra wrapping div between `[data-layout-section]`
// and the `[data-layout-column]` children and broke the flex layout.
//
// The BreakoutResizer is intentionally omitted in SSR — it relies on
// browser-only APIs and contributes no useful static markup. The
// LayoutSSRReactContextsProvider wraps the placeholder to inject the
// editor's IntlShape, defending against any descendants that call
// `useIntl()` during renderToStaticMarkup.
if (isSSR() && isSSRStreaming()) {
return /*#__PURE__*/React.createElement(LayoutSSRReactContextsProvider, {
intl: this.intl
}, /*#__PURE__*/React.createElement(NodeViewContentHole, {
ref: forwardRef
}));
}
if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true)) {
return null;
}
return /*#__PURE__*/React.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 ignoreResizerMutations(mutation);
}
}]);
}(ReactNodeView);