@atlaskit/editor-plugin-layout/dist/es2019/nodeviews/index.js

Layout plugin for @atlaskit/editor-core

import React from 'react';
import { isSSR } from '@atlaskit/editor-common/is-ssr';
import ReactNodeView, { NodeViewContentHole } from '@atlaskit/editor-common/react-node-view';
import { ignoreResizerMutations } from '@atlaskit/editor-common/resizer/BreakoutResizer';
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { LayoutSSRReactContextsProvider } from '../ui/LayoutSSRReactContextsProvider';
import { isEmptyLayout } from './utils';
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()) {
      return /*#__PURE__*/React.createElement(LayoutSSRReactContextsProvider, {
        intl: this.intl
      }, /*#__PURE__*/React.createElement(NodeViewContentHole, {
        ref: forwardRef
      }));
    }
    return null;
  }

  /**
   * ignoreMutation
   * @param mutation
   * @example
   * @returns
   */
  ignoreMutation(mutation) {
    return ignoreResizerMutations(mutation);
  }
}