@atlaskit/editor-plugin-layout 16.0.8 → 16.0.9

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-layout
 
+## 16.0.9
+
+### Patch Changes
+
+- [`ca2fd9cde15a4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ca2fd9cde15a4) -
+  Add a vanilla `LayoutSectionView` behind the `platform_editor_vanilla_node_views_phase1`
+  experiment.
+
+  Replaces the `ReactNodeView`-based `LayoutSectionView` with a pure vanilla `NodeView`, eliminating
+  the React portal mount (including `<ErrorBoundary>{null}</ErrorBoundary>`) per layout section
+  node. It is used on both the client and during SSR streaming, where it also removes the
+  `NodeViewContentHole` / `data-ssr-content-dom-ref` re-attach round trip. Requires
+  `platform_editor_breakout_resizing` to be fully rolled out.
+
+  Also extracts `isEmptyLayout` into a shared `nodeviews/utils.ts` (using `isEmptyParagraph` from
+  `@atlaskit/editor-common/utils`) to avoid duplication between the two views.
+
+- Updated dependencies
+
 ## 16.0.8
 
 ### Patch Changes

package/dist/cjs/nodeviews/index.js

@@ -19,41 +19,21 @@ var _reactNodeView = _interopRequireWildcard(require("@atlaskit/editor-common/re
 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 _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _utils = require("../pm-plugins/utils");
 var _LayoutSSRReactContextsProvider = require("../ui/LayoutSSRReactContextsProvider");
+var _utils2 = require("./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 {
@@ -123,7 +103,7 @@ var toDOM = function toDOM(node) {
     class: 'layout-section-container'
   }, ['div', _objectSpread({
     'data-layout-section': true
-  }, (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') && {
+  }, (0, _fg.fg)('platform_editor_adf_with_localid') && {
     'data-local-id': node.attrs.localId
   }), 0]];
 };
@@ -149,7 +129,7 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
     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.isEmpty = (0, _utils2.isEmptyLayout)(_this.node);
     _this.options = props.options;
     _this.intl = props.intl;
     return _this;
@@ -180,7 +160,7 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
       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')) {
+      if ((0, _fg.fg)('platform_editor_adf_with_localid')) {
         this.layoutDOM.setAttribute('data-local-id', this.node.attrs.localId);
       }
 
@@ -227,7 +207,7 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
   }, {
     key: "render",
     value: function render(props, forwardRef) {
-      this.isEmpty = isEmptyLayout(this.node);
+      this.isEmpty = (0, _utils2.isEmptyLayout)(this.node);
       if (this.layoutDOM) {
         this.layoutDOM.setAttribute('data-empty-layout', Boolean(this.isEmpty).toString());
       }

package/dist/cjs/nodeviews/layoutSectionView.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _resizer = require("@atlaskit/editor-common/resizer");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _utils = require("./utils");
+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 toDOM = function toDOM(node) {
+  var _node$attrs$columnRul, _node$attrs$localId;
+  return ['div', {
+    class: 'layoutSectionView-content-wrap'
+  }, ['div', {
+    class: 'layout-section-container'
+  }, ['div', _objectSpread({
+    '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((0, _utils.isEmptyLayout)(node))
+  }, (0, _fg.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`.
+ */
+var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function () {
+  function LayoutSectionView(node) {
+    (0, _classCallCheck2.default)(this, LayoutSectionView);
+    var _ref = _model.DOMSerializer.renderSpec(document, toDOM(node)),
+      dom = _ref.dom,
+      contentDOM = _ref.contentDOM;
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+    this.node = node;
+  }
+  return (0, _createClass2.default)(LayoutSectionView, [{
+    key: "update",
+    value: function 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 : '');
+      }
+      var isEmpty = (0, _utils.isEmptyLayout)(node);
+      if (isEmpty !== (0, _utils.isEmptyLayout)(this.node)) {
+        this.contentDOM.setAttribute('data-empty-layout', String(isEmpty));
+      }
+      if ((0, _fg.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;
+    }
+  }, {
+    key: "ignoreMutation",
+    value: function ignoreMutation(mutation) {
+      return (0, _resizer.ignoreResizerMutations)(mutation);
+    }
+  }]);
+}();

package/dist/cjs/nodeviews/utils.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isEmptyLayout = void 0;
+var _utils = require("@atlaskit/editor-common/utils");
+var isEmptyLayout = exports.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 || !(0, _utils.isEmptyParagraph)(maybelayoutColumn.firstChild)) {
+      isEmpty = false;
+    }
+  });
+  return isEmpty;
+};

package/dist/cjs/pm-plugins/resizing.js

@@ -13,8 +13,11 @@ var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _nodeviews = require("../nodeviews");
+var _layoutSectionView = require("../nodeviews/layoutSectionView");
 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 pluginKey = exports.pluginKey = new _state.PluginKey('layoutResizingPlugin');
@@ -100,6 +103,16 @@ var _default = exports.default = function _default(options, pluginInjectionApi,
     props: {
       nodeViews: _objectSpread({
         layoutSection: function layoutSection(node, view, getPos) {
+          // Both experiments are required: the vanilla view renders no React, so it
+          // cannot mount the <LayoutBreakoutResizer> that LayoutSectionView.render()
+          // returns. That resizer is only redundant once
+          // `platform_editor_breakout_resizing` is on (render() returns null and
+          // breakout resizing is handled by the pragmatic resizer in
+          // editor-plugin-breakout). Taking the vanilla path while that experiment is
+          // off would silently remove the breakout drag handles.
+          if ((0, _expValEquals.expValEquals)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_vanilla_node_views_phase1')) {
+            return new _layoutSectionView.LayoutSectionView(node);
+          }
           return new _nodeviews.LayoutSectionView({
             node: node,
             view: view,

package/dist/es2019/nodeviews/index.js

@@ -5,36 +5,16 @@ import ReactNodeView, { NodeViewContentHole } from '@atlaskit/editor-common/reac
 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 { fg } from '@atlaskit/platform-feature-flags/fg';
 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';
+import { isEmptyLayout } from './utils';
 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 {

package/dist/es2019/nodeviews/layoutSectionView.js

@@ -0,0 +1,61 @@
+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);
+  }
+}

package/dist/es2019/nodeviews/utils.js

@@ -0,0 +1,18 @@
+import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+export 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 isEmpty;
+};

package/dist/es2019/pm-plugins/resizing.js

@@ -2,8 +2,11 @@ import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { LayoutSectionView } from '../nodeviews';
+import { LayoutSectionView as LayoutSectionViewVanilla } from '../nodeviews/layoutSectionView';
 export const pluginKey = new PluginKey('layoutResizingPlugin');
 
 /**
@@ -83,6 +86,16 @@ export default ((options, pluginInjectionApi, portalProviderAPI, eventDispatcher
   props: {
     nodeViews: {
       layoutSection: (node, view, getPos) => {
+        // Both experiments are required: the vanilla view renders no React, so it
+        // cannot mount the <LayoutBreakoutResizer> that LayoutSectionView.render()
+        // returns. That resizer is only redundant once
+        // `platform_editor_breakout_resizing` is on (render() returns null and
+        // breakout resizing is handled by the pragmatic resizer in
+        // editor-plugin-breakout). Taking the vanilla path while that experiment is
+        // off would silently remove the breakout drag handles.
+        if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true) && isExperimentEnabled('platform_editor_vanilla_node_views_phase1')) {
+          return new LayoutSectionViewVanilla(node);
+        }
         return new LayoutSectionView({
           node,
           view,

package/dist/esm/nodeviews/index.js

@@ -15,36 +15,16 @@ import ReactNodeView, { NodeViewContentHole } from '@atlaskit/editor-common/reac
 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 { fg } from '@atlaskit/platform-feature-flags/fg';
 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';
+import { isEmptyLayout } from './utils';
 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 {

package/dist/esm/nodeviews/layoutSectionView.js

@@ -0,0 +1,70 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 { 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';
+var toDOM = function toDOM(node) {
+  var _node$attrs$columnRul, _node$attrs$localId;
+  return ['div', {
+    class: 'layoutSectionView-content-wrap'
+  }, ['div', {
+    class: 'layout-section-container'
+  }, ['div', _objectSpread({
+    '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 var LayoutSectionView = /*#__PURE__*/function () {
+  function LayoutSectionView(node) {
+    _classCallCheck(this, LayoutSectionView);
+    var _ref = DOMSerializer.renderSpec(document, toDOM(node)),
+      dom = _ref.dom,
+      contentDOM = _ref.contentDOM;
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+    this.node = node;
+  }
+  return _createClass(LayoutSectionView, [{
+    key: "update",
+    value: function 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 : '');
+      }
+      var 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;
+    }
+  }, {
+    key: "ignoreMutation",
+    value: function ignoreMutation(mutation) {
+      return ignoreResizerMutations(mutation);
+    }
+  }]);
+}();

package/dist/esm/nodeviews/utils.js

@@ -0,0 +1,18 @@
+import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+export 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 isEmpty;
+};

package/dist/esm/pm-plugins/resizing.js

@@ -8,8 +8,11 @@ import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { LayoutSectionView } from '../nodeviews';
+import { LayoutSectionView as LayoutSectionViewVanilla } from '../nodeviews/layoutSectionView';
 export var pluginKey = new PluginKey('layoutResizingPlugin');
 
 /**
@@ -93,6 +96,16 @@ export default (function (options, pluginInjectionApi, portalProviderAPI, eventD
     props: {
       nodeViews: _objectSpread({
         layoutSection: function layoutSection(node, view, getPos) {
+          // Both experiments are required: the vanilla view renders no React, so it
+          // cannot mount the <LayoutBreakoutResizer> that LayoutSectionView.render()
+          // returns. That resizer is only redundant once
+          // `platform_editor_breakout_resizing` is on (render() returns null and
+          // breakout resizing is handled by the pragmatic resizer in
+          // editor-plugin-breakout). Taking the vanilla path while that experiment is
+          // off would silently remove the breakout drag handles.
+          if (expValEquals('platform_editor_breakout_resizing', 'isEnabled', true) && isExperimentEnabled('platform_editor_vanilla_node_views_phase1')) {
+            return new LayoutSectionViewVanilla(node);
+          }
           return new LayoutSectionView({
             node: node,
             view: view,

package/dist/types/nodeviews/layoutSectionView.d.ts

@@ -0,0 +1,22 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { NodeView } from '@atlaskit/editor-prosemirror/view';
+/**
+ * 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 declare class LayoutSectionView implements NodeView {
+    dom: HTMLElement;
+    contentDOM: HTMLElement;
+    private node;
+    constructor(node: PMNode);
+    update(node: PMNode): boolean;
+    ignoreMutation(mutation: MutationRecord | {
+        target: Node;
+        type: 'selection';
+    }): boolean;
+}

package/dist/types/nodeviews/utils.d.ts

@@ -0,0 +1,2 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare const isEmptyLayout: (node?: PMNode) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "16.0.8",
+	"version": "16.0.9",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",