@atlaskit/editor-plugin-layout 3.1.4 → 3.1.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-layout
 
+## 3.1.5
+
+### Patch Changes
+
+- [#195965](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/195965)
+  [`3a58e5cf3f7c4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3a58e5cf3f7c4) -
+  EDITOR-1104 Add localId attribute to layout nodes behind platform_editor_adf_with_localid
+- Updated dependencies
+
 ## 3.1.4
 
 ### Patch Changes

package/dist/cjs/layoutPlugin.js

@@ -61,10 +61,10 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
     nodes: function nodes() {
       return [{
         name: 'layoutSection',
-        node: (0, _experiments.editorExperiment)('advanced_layouts', true) ? _schema.layoutSectionWithSingleColumn : _adfSchema.layoutSection
+        node: (0, _experiments.editorExperiment)('advanced_layouts', true) ? (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _schema.layoutSectionWithSingleColumnLocalId : _schema.layoutSectionWithSingleColumn : _adfSchema.layoutSection
       }, {
         name: 'layoutColumn',
-        node: _adfSchema.layoutColumn
+        node: (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.layoutColumnWithLocalId : _adfSchema.layoutColumn
       }];
     },
     pmPlugins: function pmPlugins() {

package/dist/cjs/nodeviews/index.js

@@ -119,9 +119,10 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     dynamicFullWidthGuidelineOffset: layoutDynamicFullWidthGuidelineOffset
   });
 };
-var toDOM = function toDOM() {
+var toDOM = function toDOM(node) {
   return ['div', {
-    class: 'layout-section-container'
+    class: 'layout-section-container',
+    'data-local-id': node.attrs.localId
   }, ['div', {
     'data-layout-section': true
   }, 0]];
@@ -161,7 +162,7 @@ var LayoutSectionView = exports.LayoutSectionView = /*#__PURE__*/function (_Reac
   return (0, _createClass2.default)(LayoutSectionView, [{
     key: "getContentDOM",
     value: function getContentDOM() {
-      var _ref2 = _model.DOMSerializer.renderSpec(document, toDOM()),
+      var _ref2 = _model.DOMSerializer.renderSpec(document, toDOM(this.node)),
         container = _ref2.dom,
         contentDOM = _ref2.contentDOM;
 

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

@@ -8,6 +8,7 @@ exports.fixColumnStructure = exports.fixColumnSizes = exports.deleteActiveLayout
 exports.forceSectionToPresetLayout = forceSectionToPresetLayout;
 exports.setPresetLayout = exports.insertLayoutColumnsWithAnalytics = exports.insertLayoutColumns = exports.getSelectedLayout = exports.getPresetLayout = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -149,23 +150,33 @@ var createMultiColumnLayoutSection = exports.createMultiColumnLayoutSection = fu
     length: numberOfColumns
   }, function () {
     return layoutColumn.createAndFill({
-      width: _consts.EVEN_DISTRIBUTED_COL_WIDTHS[numberOfColumns]
+      width: _consts.EVEN_DISTRIBUTED_COL_WIDTHS[numberOfColumns],
+      localId: (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.uuid.generate() : undefined
     });
   }));
-  return layoutSection.createAndFill(undefined, columns);
+  var attrs = (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? {
+    localId: _adfSchema.uuid.generate()
+  } : undefined;
+  return layoutSection.createAndFill(attrs, columns);
 };
 var createDefaultLayoutSection = exports.createDefaultLayoutSection = function createDefaultLayoutSection(state) {
   var _state$schema$nodes2 = state.schema.nodes,
     layoutSection = _state$schema$nodes2.layoutSection,
     layoutColumn = _state$schema$nodes2.layoutColumn;
-
   // create a 50-50 layout by default
-  var columns = _model.Fragment.fromArray([layoutColumn.createAndFill({
+  var columns = _model.Fragment.fromArray([layoutColumn.createAndFill(_objectSpread({
     width: 50
-  }), layoutColumn.createAndFill({
+  }, (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? {
+    localId: _adfSchema.uuid.generate()
+  } : undefined)), layoutColumn.createAndFill(_objectSpread({
     width: 50
-  })]);
-  return layoutSection.createAndFill(undefined, columns);
+  }, (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? {
+    localId: _adfSchema.uuid.generate()
+  } : undefined))]);
+  var attrs = (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? {
+    localId: _adfSchema.uuid.generate()
+  } : undefined;
+  return layoutSection.createAndFill(attrs, columns);
 };
 var insertLayoutColumns = exports.insertLayoutColumns = function insertLayoutColumns(state, dispatch) {
   if (dispatch) {
@@ -197,13 +208,16 @@ var insertLayoutColumnsWithAnalytics = exports.insertLayoutColumnsWithAnalytics
  * Add a column to the right of existing layout
  */
 function addColumn(schema, pos) {
+  var attrs = (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? {
+    localId: _adfSchema.uuid.generate()
+  } : undefined;
   if ((0, _experiments.editorExperiment)('advanced_layouts', false)) {
     return function (tr) {
-      tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill());
+      tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill(attrs));
     };
   }
   return function (tr) {
-    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill(undefined));
+    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill(attrs));
   };
 }
 function removeLastColumnInLayout(column, columnPos, insideRightEdgePos) {

package/dist/es2019/layoutPlugin.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { layoutColumn, layoutSection } from '@atlaskit/adf-schema';
-import { layoutSectionWithSingleColumn } from '@atlaskit/adf-schema/schema';
+import { layoutColumn, layoutSection, layoutColumnWithLocalId } from '@atlaskit/adf-schema';
+import { layoutSectionWithSingleColumn, layoutSectionWithSingleColumnLocalId } from '@atlaskit/adf-schema/schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconOneColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
@@ -54,10 +54,10 @@ export const layoutPlugin = ({
     nodes() {
       return [{
         name: 'layoutSection',
-        node: editorExperiment('advanced_layouts', true) ? layoutSectionWithSingleColumn : layoutSection
+        node: editorExperiment('advanced_layouts', true) ? fg('platform_editor_adf_with_localid') ? layoutSectionWithSingleColumnLocalId : layoutSectionWithSingleColumn : layoutSection
       }, {
         name: 'layoutColumn',
-        node: layoutColumn
+        node: fg('platform_editor_adf_with_localid') ? layoutColumnWithLocalId : layoutColumn
       }];
     },
     pmPlugins() {

package/dist/es2019/nodeviews/index.js

@@ -106,8 +106,9 @@ const LayoutBreakoutResizer = ({
     dynamicFullWidthGuidelineOffset: layoutDynamicFullWidthGuidelineOffset
   });
 };
-const toDOM = () => ['div', {
-  class: 'layout-section-container'
+const toDOM = node => ['div', {
+  class: 'layout-section-container',
+  'data-local-id': node.attrs.localId
 }, ['div', {
   'data-layout-section': true
 }, 0]];
@@ -143,7 +144,7 @@ export class LayoutSectionView extends ReactNodeView {
     const {
       dom: container,
       contentDOM
-    } = DOMSerializer.renderSpec(document, toDOM());
+    } = DOMSerializer.renderSpec(document, toDOM(this.node));
 
     // Ignored via go/ees005
     // eslint-disable-next-line @atlaskit/editor/no-as-casting

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

@@ -1,3 +1,4 @@
+import { uuid } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, LAYOUT_TYPE } from '@atlaskit/editor-common/analytics';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { flatmap, getStepRange, isEmptyDocument, mapChildren } from '@atlaskit/editor-common/utils';
@@ -132,23 +133,35 @@ export const createMultiColumnLayoutSection = (state, numberOfColumns = 2) => {
   const columns = Fragment.fromArray(Array.from({
     length: numberOfColumns
   }, () => layoutColumn.createAndFill({
-    width: EVEN_DISTRIBUTED_COL_WIDTHS[numberOfColumns]
+    width: EVEN_DISTRIBUTED_COL_WIDTHS[numberOfColumns],
+    localId: fg('platform_editor_adf_with_localid') ? uuid.generate() : undefined
   })));
-  return layoutSection.createAndFill(undefined, columns);
+  const attrs = fg('platform_editor_adf_with_localid') ? {
+    localId: uuid.generate()
+  } : undefined;
+  return layoutSection.createAndFill(attrs, columns);
 };
 export const createDefaultLayoutSection = state => {
   const {
     layoutSection,
     layoutColumn
   } = state.schema.nodes;
-
   // create a 50-50 layout by default
   const columns = Fragment.fromArray([layoutColumn.createAndFill({
-    width: 50
+    width: 50,
+    ...(fg('platform_editor_adf_with_localid') ? {
+      localId: uuid.generate()
+    } : undefined)
   }), layoutColumn.createAndFill({
-    width: 50
+    width: 50,
+    ...(fg('platform_editor_adf_with_localid') ? {
+      localId: uuid.generate()
+    } : undefined)
   })]);
-  return layoutSection.createAndFill(undefined, columns);
+  const attrs = fg('platform_editor_adf_with_localid') ? {
+    localId: uuid.generate()
+  } : undefined;
+  return layoutSection.createAndFill(attrs, columns);
 };
 export const insertLayoutColumns = (state, dispatch) => {
   if (dispatch) {
@@ -176,13 +189,16 @@ export const insertLayoutColumnsWithAnalytics = editorAnalyticsAPI => inputMetho
  * Add a column to the right of existing layout
  */
 function addColumn(schema, pos) {
+  const attrs = fg('platform_editor_adf_with_localid') ? {
+    localId: uuid.generate()
+  } : undefined;
   if (editorExperiment('advanced_layouts', false)) {
     return tr => {
-      tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill());
+      tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill(attrs));
     };
   }
   return tr => {
-    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill(undefined));
+    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill(attrs));
   };
 }
 function removeLastColumnInLayout(column, columnPos, insideRightEdgePos) {

package/dist/esm/layoutPlugin.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { layoutColumn, layoutSection } from '@atlaskit/adf-schema';
-import { layoutSectionWithSingleColumn } from '@atlaskit/adf-schema/schema';
+import { layoutColumn, layoutSection, layoutColumnWithLocalId } from '@atlaskit/adf-schema';
+import { layoutSectionWithSingleColumn, layoutSectionWithSingleColumnLocalId } from '@atlaskit/adf-schema/schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { layoutMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconOneColumnLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
@@ -55,10 +55,10 @@ export var layoutPlugin = function layoutPlugin(_ref) {
     nodes: function nodes() {
       return [{
         name: 'layoutSection',
-        node: editorExperiment('advanced_layouts', true) ? layoutSectionWithSingleColumn : layoutSection
+        node: editorExperiment('advanced_layouts', true) ? fg('platform_editor_adf_with_localid') ? layoutSectionWithSingleColumnLocalId : layoutSectionWithSingleColumn : layoutSection
       }, {
         name: 'layoutColumn',
-        node: layoutColumn
+        node: fg('platform_editor_adf_with_localid') ? layoutColumnWithLocalId : layoutColumn
       }];
     },
     pmPlugins: function pmPlugins() {

package/dist/esm/nodeviews/index.js

@@ -110,9 +110,10 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     dynamicFullWidthGuidelineOffset: layoutDynamicFullWidthGuidelineOffset
   });
 };
-var toDOM = function toDOM() {
+var toDOM = function toDOM(node) {
   return ['div', {
-    class: 'layout-section-container'
+    class: 'layout-section-container',
+    'data-local-id': node.attrs.localId
   }, ['div', {
     'data-layout-section': true
   }, 0]];
@@ -152,7 +153,7 @@ export var LayoutSectionView = /*#__PURE__*/function (_ReactNodeView) {
   return _createClass(LayoutSectionView, [{
     key: "getContentDOM",
     value: function getContentDOM() {
-      var _ref2 = DOMSerializer.renderSpec(document, toDOM()),
+      var _ref2 = DOMSerializer.renderSpec(document, toDOM(this.node)),
         container = _ref2.dom,
         contentDOM = _ref2.contentDOM;
 

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

@@ -1,6 +1,7 @@
 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 { uuid } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, LAYOUT_TYPE } from '@atlaskit/editor-common/analytics';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { flatmap, getStepRange, isEmptyDocument, mapChildren } from '@atlaskit/editor-common/utils';
@@ -140,23 +141,33 @@ export var createMultiColumnLayoutSection = function createMultiColumnLayoutSect
     length: numberOfColumns
   }, function () {
     return layoutColumn.createAndFill({
-      width: EVEN_DISTRIBUTED_COL_WIDTHS[numberOfColumns]
+      width: EVEN_DISTRIBUTED_COL_WIDTHS[numberOfColumns],
+      localId: fg('platform_editor_adf_with_localid') ? uuid.generate() : undefined
     });
   }));
-  return layoutSection.createAndFill(undefined, columns);
+  var attrs = fg('platform_editor_adf_with_localid') ? {
+    localId: uuid.generate()
+  } : undefined;
+  return layoutSection.createAndFill(attrs, columns);
 };
 export var createDefaultLayoutSection = function createDefaultLayoutSection(state) {
   var _state$schema$nodes2 = state.schema.nodes,
     layoutSection = _state$schema$nodes2.layoutSection,
     layoutColumn = _state$schema$nodes2.layoutColumn;
-
   // create a 50-50 layout by default
-  var columns = Fragment.fromArray([layoutColumn.createAndFill({
+  var columns = Fragment.fromArray([layoutColumn.createAndFill(_objectSpread({
     width: 50
-  }), layoutColumn.createAndFill({
+  }, fg('platform_editor_adf_with_localid') ? {
+    localId: uuid.generate()
+  } : undefined)), layoutColumn.createAndFill(_objectSpread({
     width: 50
-  })]);
-  return layoutSection.createAndFill(undefined, columns);
+  }, fg('platform_editor_adf_with_localid') ? {
+    localId: uuid.generate()
+  } : undefined))]);
+  var attrs = fg('platform_editor_adf_with_localid') ? {
+    localId: uuid.generate()
+  } : undefined;
+  return layoutSection.createAndFill(attrs, columns);
 };
 export var insertLayoutColumns = function insertLayoutColumns(state, dispatch) {
   if (dispatch) {
@@ -188,13 +199,16 @@ export var insertLayoutColumnsWithAnalytics = function insertLayoutColumnsWithAn
  * Add a column to the right of existing layout
  */
 function addColumn(schema, pos) {
+  var attrs = fg('platform_editor_adf_with_localid') ? {
+    localId: uuid.generate()
+  } : undefined;
   if (editorExperiment('advanced_layouts', false)) {
     return function (tr) {
-      tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill());
+      tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill(attrs));
     };
   }
   return function (tr) {
-    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill(undefined));
+    tr.replaceWith(tr.mapping.map(pos), tr.mapping.map(pos), schema.nodes.layoutColumn.createAndFill(attrs));
   };
 }
 function removeLastColumnInLayout(column, columnPos, insideRightEdgePos) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "3.1.4",
+	"version": "3.1.5",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -45,7 +45,7 @@
 		"@atlaskit/icon": "^27.9.0",
 		"@atlaskit/icon-lab": "^5.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^9.22.0",
+		"@atlaskit/tmp-editor-statsig": "^9.23.0",
 		"@atlaskit/tokens": "^6.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
@@ -108,6 +108,9 @@
 		},
 		"platform_editor_column_count_analytics": {
 			"type": "boolean"
+		},
+		"platform_editor_adf_with_localid": {
+			"type": "boolean"
 		}
 	}
 }