@atlaskit/editor-plugin-layout 1.9.7 → 1.9.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-layout
 
+## 1.9.8
+
+### Patch Changes
+
+- [#158827](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/158827)
+  [`6696a5d9665c7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6696a5d9665c7) -
+  Refactor forceColumnStructure so it works for 2-5 columns layout under advanced_layout experiment
+
 ## 1.9.7
 
 ### Patch Changes

package/dist/cjs/actions.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fixColumnStructure = exports.fixColumnSizes = exports.deleteActiveLayoutNode = exports.createMultiColumnLayoutSection = exports.createDefaultLayoutSection = exports.TWO_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = void 0;
+exports.fixColumnStructure = exports.fixColumnSizes = exports.deleteActiveLayoutNode = exports.createMultiColumnLayoutSection = exports.createDefaultLayoutSection = exports.TWO_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = exports.FOUR_COL_LAYOUTS = exports.FIVE_COL_LAYOUTS = void 0;
 exports.forceSectionToPresetLayout = forceSectionToPresetLayout;
 exports.setPresetLayout = exports.insertLayoutColumnsWithAnalytics = exports.insertLayoutColumns = exports.getSelectedLayout = exports.getPresetLayout = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -23,6 +23,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var ONE_COL_LAYOUTS = exports.ONE_COL_LAYOUTS = ['single'];
 var TWO_COL_LAYOUTS = exports.TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
 var THREE_COL_LAYOUTS = exports.THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
+var FOUR_COL_LAYOUTS = exports.FOUR_COL_LAYOUTS = ['four_equal'];
+var FIVE_COL_LAYOUTS = exports.FIVE_COL_LAYOUTS = ['five_equal'];
 var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
   if ((0, _preRelease.isPreRelease2)()) {
     switch (presetLayout) {
@@ -224,6 +226,28 @@ var fromThreeColstoOne = function fromThreeColstoOne(node, tr, insideRightEdgePo
   var secondColumn = node.content.child(1);
   fromTwoColsToOne(secondColumn, insideRightEdgePos - thirdColumn.nodeSize - secondColumn.nodeSize, insideRightEdgePos)(tr);
 };
+var increaseColumns = function increaseColumns(schema, pos) {
+  var newColumnsNumber = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var formatMessage = arguments.length > 3 ? arguments[3] : undefined;
+  return function (tr) {
+    for (var i = 0; i < newColumnsNumber; i++) {
+      addColumn(schema, pos, formatMessage)(tr);
+    }
+  };
+};
+var decreaseColumns = function decreaseColumns(node, insideRightEdgePos) {
+  var columnsNumberToRemove = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  return function (tr) {
+    var endPos = insideRightEdgePos;
+    var lastColumn = node.content.lastChild;
+    for (var i = 0; i < columnsNumberToRemove; i++) {
+      var _lastColumn;
+      lastColumn && removeLastColumnInLayout(lastColumn, endPos - lastColumn.nodeSize, endPos)(tr);
+      endPos -= ((_lastColumn = lastColumn) === null || _lastColumn === void 0 ? void 0 : _lastColumn.nodeSize) || 0;
+      lastColumn = node.content.child(node.childCount - i - 2);
+    }
+  };
+};
 
 /**
  * Handles switching from 2 -> 3 cols, or 3 -> 2 cols
@@ -265,6 +289,18 @@ function forceColumnStructure(state, node, pos, presetLayout, formatMessage) {
   }
   return tr;
 }
+function forceColumnStructureNew(state, node, pos, presetLayout, formatMessage) {
+  var tr = state.tr;
+  var insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
+  var numCols = node.childCount;
+  var columnChange = getWidthsForPreset(presetLayout).length - numCols;
+  if (columnChange > 0) {
+    increaseColumns(state.schema, insideRightEdgeOfLayoutSection, columnChange, formatMessage)(tr);
+  } else if (columnChange < 0) {
+    decreaseColumns(node, insideRightEdgeOfLayoutSection, -columnChange)(tr);
+  }
+  return tr;
+}
 function columnWidth(node, schema, widths) {
   var layoutColumn = schema.nodes.layoutColumn;
   var truncatedWidths = widths.map(function (w) {
@@ -288,7 +324,8 @@ function forceColumnWidths(state, tr, pos, presetLayout) {
   return tr.replaceWith(pos + 1, pos + node.nodeSize - 1, columnWidth(node, state.schema, getWidthsForPreset(presetLayout)));
 }
 function forceSectionToPresetLayout(state, node, pos, presetLayout, formatMessage) {
-  var tr = forceColumnStructure(state, node, pos, presetLayout, formatMessage);
+  var forceColumnStructureFn = (0, _preRelease.isPreRelease2)() ? forceColumnStructureNew : forceColumnStructure;
+  var tr = forceColumnStructureFn(state, node, pos, presetLayout, formatMessage);
 
   // save the selection here, since forcing column widths causes a change over the
   // entire layoutSection, which remaps selection to the end. not remapping here

package/dist/cjs/toolbar.js

@@ -133,10 +133,7 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
       }),
       //'4-columns'
       icon: iconPlaceholder,
-      onClick: function onClick() {
-        // TODO: Implement layout update in ED-25053
-        return true;
-      },
+      onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('four_equal', intl.formatMessage),
       selected: numberOfColumns === 4
     }, {
       title: intl.formatMessage(_messages.layoutMessages.columnOption, {
@@ -144,10 +141,7 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
       }),
       //'5-columns'
       icon: iconPlaceholder,
-      onClick: function onClick() {
-        // TODO: Implement layout update in ED-25053
-        return true;
-      },
+      onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('five_equal', intl.formatMessage),
       selected: numberOfColumns === 5
     }];
     return {

package/dist/es2019/actions.js

@@ -11,6 +11,8 @@ import { isPreRelease2 } from './utils/preRelease';
 export const ONE_COL_LAYOUTS = ['single'];
 export const TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
 export const THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
+export const FOUR_COL_LAYOUTS = ['four_equal'];
+export const FIVE_COL_LAYOUTS = ['five_equal'];
 const getWidthsForPreset = presetLayout => {
   if (isPreRelease2()) {
     switch (presetLayout) {
@@ -207,6 +209,25 @@ const fromThreeColstoOne = (node, tr, insideRightEdgePos) => {
   const secondColumn = node.content.child(1);
   fromTwoColsToOne(secondColumn, insideRightEdgePos - thirdColumn.nodeSize - secondColumn.nodeSize, insideRightEdgePos)(tr);
 };
+const increaseColumns = (schema, pos, newColumnsNumber = 1, formatMessage) => {
+  return tr => {
+    for (let i = 0; i < newColumnsNumber; i++) {
+      addColumn(schema, pos, formatMessage)(tr);
+    }
+  };
+};
+const decreaseColumns = (node, insideRightEdgePos, columnsNumberToRemove = 1) => {
+  return tr => {
+    let endPos = insideRightEdgePos;
+    let lastColumn = node.content.lastChild;
+    for (let i = 0; i < columnsNumberToRemove; i++) {
+      var _lastColumn;
+      lastColumn && removeLastColumnInLayout(lastColumn, endPos - lastColumn.nodeSize, endPos)(tr);
+      endPos -= ((_lastColumn = lastColumn) === null || _lastColumn === void 0 ? void 0 : _lastColumn.nodeSize) || 0;
+      lastColumn = node.content.child(node.childCount - i - 2);
+    }
+  };
+};
 
 /**
  * Handles switching from 2 -> 3 cols, or 3 -> 2 cols
@@ -248,6 +269,18 @@ function forceColumnStructure(state, node, pos, presetLayout, formatMessage) {
   }
   return tr;
 }
+function forceColumnStructureNew(state, node, pos, presetLayout, formatMessage) {
+  const tr = state.tr;
+  const insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
+  const numCols = node.childCount;
+  const columnChange = getWidthsForPreset(presetLayout).length - numCols;
+  if (columnChange > 0) {
+    increaseColumns(state.schema, insideRightEdgeOfLayoutSection, columnChange, formatMessage)(tr);
+  } else if (columnChange < 0) {
+    decreaseColumns(node, insideRightEdgeOfLayoutSection, -columnChange)(tr);
+  }
+  return tr;
+}
 function columnWidth(node, schema, widths) {
   const {
     layoutColumn
@@ -272,7 +305,8 @@ function forceColumnWidths(state, tr, pos, presetLayout) {
   return tr.replaceWith(pos + 1, pos + node.nodeSize - 1, columnWidth(node, state.schema, getWidthsForPreset(presetLayout)));
 }
 export function forceSectionToPresetLayout(state, node, pos, presetLayout, formatMessage) {
-  let tr = forceColumnStructure(state, node, pos, presetLayout, formatMessage);
+  const forceColumnStructureFn = isPreRelease2() ? forceColumnStructureNew : forceColumnStructure;
+  let tr = forceColumnStructureFn(state, node, pos, presetLayout, formatMessage);
 
   // save the selection here, since forcing column widths causes a change over the
   // entire layoutSection, which remaps selection to the end. not remapping here

package/dist/es2019/toolbar.js

@@ -121,10 +121,7 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
       }),
       //'4-columns'
       icon: iconPlaceholder,
-      onClick: () => {
-        // TODO: Implement layout update in ED-25053
-        return true;
-      },
+      onClick: setPresetLayout(editorAnalyticsAPI)('four_equal', intl.formatMessage),
       selected: numberOfColumns === 4
     }, {
       title: intl.formatMessage(layoutMessages.columnOption, {
@@ -132,10 +129,7 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
       }),
       //'5-columns'
       icon: iconPlaceholder,
-      onClick: () => {
-        // TODO: Implement layout update in ED-25053
-        return true;
-      },
+      onClick: setPresetLayout(editorAnalyticsAPI)('five_equal', intl.formatMessage),
       selected: numberOfColumns === 5
     }];
     return {

package/dist/esm/actions.js

@@ -14,6 +14,8 @@ import { isPreRelease2 } from './utils/preRelease';
 export var ONE_COL_LAYOUTS = ['single'];
 export var TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
 export var THREE_COL_LAYOUTS = ['three_equal', 'three_with_sidebars'];
+export var FOUR_COL_LAYOUTS = ['four_equal'];
+export var FIVE_COL_LAYOUTS = ['five_equal'];
 var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
   if (isPreRelease2()) {
     switch (presetLayout) {
@@ -215,6 +217,28 @@ var fromThreeColstoOne = function fromThreeColstoOne(node, tr, insideRightEdgePo
   var secondColumn = node.content.child(1);
   fromTwoColsToOne(secondColumn, insideRightEdgePos - thirdColumn.nodeSize - secondColumn.nodeSize, insideRightEdgePos)(tr);
 };
+var increaseColumns = function increaseColumns(schema, pos) {
+  var newColumnsNumber = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var formatMessage = arguments.length > 3 ? arguments[3] : undefined;
+  return function (tr) {
+    for (var i = 0; i < newColumnsNumber; i++) {
+      addColumn(schema, pos, formatMessage)(tr);
+    }
+  };
+};
+var decreaseColumns = function decreaseColumns(node, insideRightEdgePos) {
+  var columnsNumberToRemove = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  return function (tr) {
+    var endPos = insideRightEdgePos;
+    var lastColumn = node.content.lastChild;
+    for (var i = 0; i < columnsNumberToRemove; i++) {
+      var _lastColumn;
+      lastColumn && removeLastColumnInLayout(lastColumn, endPos - lastColumn.nodeSize, endPos)(tr);
+      endPos -= ((_lastColumn = lastColumn) === null || _lastColumn === void 0 ? void 0 : _lastColumn.nodeSize) || 0;
+      lastColumn = node.content.child(node.childCount - i - 2);
+    }
+  };
+};
 
 /**
  * Handles switching from 2 -> 3 cols, or 3 -> 2 cols
@@ -256,6 +280,18 @@ function forceColumnStructure(state, node, pos, presetLayout, formatMessage) {
   }
   return tr;
 }
+function forceColumnStructureNew(state, node, pos, presetLayout, formatMessage) {
+  var tr = state.tr;
+  var insideRightEdgeOfLayoutSection = pos + node.nodeSize - 1;
+  var numCols = node.childCount;
+  var columnChange = getWidthsForPreset(presetLayout).length - numCols;
+  if (columnChange > 0) {
+    increaseColumns(state.schema, insideRightEdgeOfLayoutSection, columnChange, formatMessage)(tr);
+  } else if (columnChange < 0) {
+    decreaseColumns(node, insideRightEdgeOfLayoutSection, -columnChange)(tr);
+  }
+  return tr;
+}
 function columnWidth(node, schema, widths) {
   var layoutColumn = schema.nodes.layoutColumn;
   var truncatedWidths = widths.map(function (w) {
@@ -279,7 +315,8 @@ function forceColumnWidths(state, tr, pos, presetLayout) {
   return tr.replaceWith(pos + 1, pos + node.nodeSize - 1, columnWidth(node, state.schema, getWidthsForPreset(presetLayout)));
 }
 export function forceSectionToPresetLayout(state, node, pos, presetLayout, formatMessage) {
-  var tr = forceColumnStructure(state, node, pos, presetLayout, formatMessage);
+  var forceColumnStructureFn = isPreRelease2() ? forceColumnStructureNew : forceColumnStructure;
+  var tr = forceColumnStructureFn(state, node, pos, presetLayout, formatMessage);
 
   // save the selection here, since forcing column widths causes a change over the
   // entire layoutSection, which remaps selection to the end. not remapping here

package/dist/esm/toolbar.js

@@ -123,10 +123,7 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
       }),
       //'4-columns'
       icon: iconPlaceholder,
-      onClick: function onClick() {
-        // TODO: Implement layout update in ED-25053
-        return true;
-      },
+      onClick: setPresetLayout(editorAnalyticsAPI)('four_equal', intl.formatMessage),
       selected: numberOfColumns === 4
     }, {
       title: intl.formatMessage(layoutMessages.columnOption, {
@@ -134,10 +131,7 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
       }),
       //'5-columns'
       icon: iconPlaceholder,
-      onClick: function onClick() {
-        // TODO: Implement layout update in ED-25053
-        return true;
-      },
+      onClick: setPresetLayout(editorAnalyticsAPI)('five_equal', intl.formatMessage),
       selected: numberOfColumns === 5
     }];
     return {

package/dist/types/actions.d.ts

@@ -7,6 +7,8 @@ import type { Change, PresetLayout } from './types';
 export declare const ONE_COL_LAYOUTS: PresetLayout[];
 export declare const TWO_COL_LAYOUTS: PresetLayout[];
 export declare const THREE_COL_LAYOUTS: PresetLayout[];
+export declare const FOUR_COL_LAYOUTS: PresetLayout[];
+export declare const FIVE_COL_LAYOUTS: PresetLayout[];
 /**
  * Finds layout preset based on the width attrs of all the layoutColumn nodes
  * inside the layoutSection node

package/dist/types-ts4.5/actions.d.ts

@@ -7,6 +7,8 @@ import type { Change, PresetLayout } from './types';
 export declare const ONE_COL_LAYOUTS: PresetLayout[];
 export declare const TWO_COL_LAYOUTS: PresetLayout[];
 export declare const THREE_COL_LAYOUTS: PresetLayout[];
+export declare const FOUR_COL_LAYOUTS: PresetLayout[];
+export declare const FIVE_COL_LAYOUTS: PresetLayout[];
 /**
  * Finds layout preset based on the width attrs of all the layoutColumn nodes
  * inside the layoutSection node

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "1.9.7",
+	"version": "1.9.8",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,13 +32,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^42.3.1",
-		"@atlaskit/editor-common": "^94.4.0",
+		"@atlaskit/editor-common": "^94.9.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/tmp-editor-statsig": "^2.9.0",
+		"@atlaskit/tmp-editor-statsig": "^2.10.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"