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

Layout plugin for @atlaskit/editor-core

import { ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { isEmptyLayout } from './utils';
const toDOM = node => {
  var _node$attrs$columnRul, _node$attrs$localId;
  return ['div', {
    class: 'layoutSectionView-content-wrap'
  }, ['div', {
    class: 'layout-section-container'
  }, ['div', {
    'data-layout-section': true,
    // `?? ''` keeps unset attributes out of the DOM as `"null"`, which adf-schema's`parseDOM`
    // reads back as a truthy string.
    'data-column-rule-style': (_node$attrs$columnRul = node.attrs.columnRuleStyle) !== null && _node$attrs$columnRul !== void 0 ? _node$attrs$columnRul : '',
    'data-empty-layout': String(isEmptyLayout(node)),
    ...(fg('platform_editor_adf_with_localid') && {
      'data-local-id': (_node$attrs$localId = node.attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : ''
    })
  }, 0]]];
};

/**
 * Requires `platform_editor_breakout_resizing` as well as
 * `platform_editor_vanilla_node_views_phase1`, because it cannot render the
 * React `<BreakoutResizer>` the old view mounts when that experiment is off.
 *
 * Also used for SSR, where it needs no `NodeViewContentHole` /
 * `data-ssr-content-dom-ref` handling — that exists only because the React
 * portal overwrites `container.innerHTML`.
 */
export class LayoutSectionView {
  constructor(node) {
    const {
      dom,
      contentDOM
    } = DOMSerializer.renderSpec(document, toDOM(node));
    this.dom = dom;
    this.contentDOM = contentDOM;
    this.node = node;
  }
  update(node) {
    if (node.attrs.columnRuleStyle !== this.node.attrs.columnRuleStyle) {
      var _node$attrs$columnRul2;
      this.contentDOM.setAttribute('data-column-rule-style', (_node$attrs$columnRul2 = node.attrs.columnRuleStyle) !== null && _node$attrs$columnRul2 !== void 0 ? _node$attrs$columnRul2 : '');
    }
    const isEmpty = isEmptyLayout(node);
    if (isEmpty !== isEmptyLayout(this.node)) {
      this.contentDOM.setAttribute('data-empty-layout', String(isEmpty));
    }
    if (fg('platform_editor_adf_with_localid') && node.attrs.localId !== this.node.attrs.localId) {
      var _node$attrs$localId2;
      this.contentDOM.setAttribute('data-local-id', (_node$attrs$localId2 = node.attrs.localId) !== null && _node$attrs$localId2 !== void 0 ? _node$attrs$localId2 : '');
    }
    this.node = node;
    return true;
  }
  ignoreMutation(mutation) {
    return ignoreResizerMutations(mutation);
  }
}