@atlaskit/editor-plugin-layout
Version:
Layout plugin for @atlaskit/editor-core
251 lines (241 loc) • 10.6 kB
JavaScript
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';
const layoutDynamicFullWidthGuidelineOffset = 16;
const isEmptyParagraph = node => {
return !!node && node.type.name === 'paragraph' && !node.childCount;
};
const isBreakoutAvailable = schema => {
return Boolean(schema.marks.breakout);
};
const 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;
}
let isEmpty = true;
node.content.forEach(maybelayoutColumn => {
if (maybelayoutColumn.type.name !== 'layoutColumn' || maybelayoutColumn.childCount > 1 || !isEmptyParagraph(maybelayoutColumn.firstChild)) {
isEmpty = false;
return;
}
});
return isEmpty;
};
const selector = states => {
var _states$editorDisable;
return {
editorDisabled: (_states$editorDisable = states.editorDisabledState) === null || _states$editorDisable === void 0 ? void 0 : _states$editorDisable.editorDisabled
};
};
const LayoutBreakoutResizer = ({
pluginInjectionApi,
forwardRef,
getPos,
view,
parentRef
}) => {
var _pluginInjectionApi$a;
const {
editorDisabled
} = useSharedPluginStateWithSelector(pluginInjectionApi, ['editorDisabled'], selector);
const interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
const getEditorWidth = () => {
var _pluginInjectionApi$w;
return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
};
const displayGapCursor = useCallback(toggle => {
var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$s;
return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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]);
const displayGuidelines = useCallback(guidelines => {
var _pluginInjectionApi$g, _pluginInjectionApi$g2;
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$g = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g === void 0 ? void 0 : (_pluginInjectionApi$g2 = _pluginInjectionApi$g.actions) === null || _pluginInjectionApi$g2 === void 0 ? void 0 : _pluginInjectionApi$g2.displayGuideline(view)({
guidelines
});
}, [pluginInjectionApi, view]);
// we want to hide the floating toolbar for other nodes.
// e.g. info panel inside the current layout section
const selectIntoCurrentLayout = useCallback(() => {
const 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 ? 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: () => {
selectIntoCurrentLayout();
},
dynamicFullWidthGuidelineOffset: layoutDynamicFullWidthGuidelineOffset
});
};
const toDOM = node => ['div', {
class: 'layout-section-container'
}, ['div', {
'data-layout-section': true,
...(fg('platform_editor_adf_with_localid') && {
'data-local-id': node.attrs.localId
})
}, 0]];
/**
*
*/
export class LayoutSectionView extends 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
*/
constructor(props) {
super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
this.isEmpty = isEmptyLayout(this.node);
this.options = props.options;
this.intl = props.intl;
}
/**
* getContentDOM
* @example
* @returns
*/
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.
const {
dom: container,
contentDOM
} = DOMSerializer.renderSpec(document, toDOM(this.node));
// 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
};
}
/**
* setDomAttrs
* @param node
* @param element
* @example
*/
setDomAttrs(node, _element) {
if (this.layoutDOM) {
this.layoutDOM.setAttribute('data-column-rule-style', node.attrs.columnRuleStyle);
}
}
/**
* render
* @param props
* @param forwardRef
* @example
* @returns
*/
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
*/
ignoreMutation(mutation) {
return ignoreResizerMutations(mutation);
}
}