@atlaskit/editor-plugin-layout 1.9.2 → 1.9.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-layout
 
+## 1.9.3
+
+### Patch Changes
+
+- [#153024](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/153024)
+  [`0200c770ddcb2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0200c770ddcb2) -
+  [ux] Add multiple column layout via quick insert
+- Updated dependencies
+
 ## 1.9.2
 
 ### 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.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 = 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"));
@@ -14,6 +14,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _consts = require("./consts");
 var _pluginKey = require("./pm-plugins/plugin-key");
 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; }
@@ -67,11 +68,27 @@ var getSelectedLayout = exports.getSelectedLayout = function getSelectedLayout(m
   }
   return current;
 };
-var createDefaultLayoutSection = exports.createDefaultLayoutSection = function createDefaultLayoutSection(state) {
+var createMultiColumnLayoutSection = exports.createMultiColumnLayoutSection = function createMultiColumnLayoutSection(state) {
+  var numberOfColumns = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
   var _state$schema$nodes = state.schema.nodes,
     layoutSection = _state$schema$nodes.layoutSection,
     layoutColumn = _state$schema$nodes.layoutColumn;
 
+  // create layout based on column number, each column has equal width and trucated to 2 decimal places
+  var columns = _model.Fragment.fromArray(Array.from({
+    length: numberOfColumns
+  }, function () {
+    return layoutColumn.createAndFill({
+      width: _consts.EVEN_DISTRIBUTED_COL_WIDTHS[numberOfColumns]
+    });
+  }));
+  return layoutSection.createAndFill(undefined, 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({
     width: 50

package/dist/cjs/consts.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EVEN_DISTRIBUTED_COL_WIDTHS = void 0;
+var EVEN_DISTRIBUTED_COL_WIDTHS = exports.EVEN_DISTRIBUTED_COL_WIDTHS = {
+  1: 100,
+  2: 50,
+  3: 33.33,
+  4: 25,
+  5: 20
+};

package/dist/cjs/plugin.js

@@ -20,6 +20,7 @@ var _actions = require("./actions");
 var _main = _interopRequireDefault(require("./pm-plugins/main"));
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _toolbar = require("./toolbar");
+var _preRelease = require("./utils/preRelease");
 var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
   var _api$analytics;
   var _ref$config = _ref.config,
@@ -61,7 +62,59 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
       },
       quickInsert: function quickInsert(_ref3) {
         var formatMessage = _ref3.formatMessage;
-        return [{
+        return (0, _preRelease.isPreRelease2)() ? [{
+          id: 'twocolumnslayout',
+          title: formatMessage(_messages.toolbarInsertBlockMessages.twoColumns),
+          description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescription),
+          keywords: ['layout', 'column', 'section', 'two column'],
+          priority: 1100,
+          icon: function icon() {
+            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconTwoColumnLayout, null);
+          },
+          action: function action(insert, state) {
+            var tr = insert((0, _actions.createMultiColumnLayoutSection)(state));
+            return tr;
+          }
+        }, {
+          id: 'threecolumnslayout',
+          title: formatMessage(_messages.toolbarInsertBlockMessages.threeColumns),
+          description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescription),
+          keywords: ['layout', 'column', 'section', 'three column'],
+          priority: 1100,
+          icon: function icon() {
+            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconThreeColumnLayout, null);
+          },
+          action: function action(insert, state) {
+            var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 3));
+            return tr;
+          }
+        }, {
+          id: 'fourcolumnslayout',
+          title: formatMessage(_messages.toolbarInsertBlockMessages.fourColumns),
+          description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescription),
+          keywords: ['layout', 'column', 'section', 'four column'],
+          priority: 1100,
+          icon: function icon() {
+            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconFourColumnLayout, null);
+          },
+          action: function action(insert, state) {
+            var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 4));
+            return tr;
+          }
+        }, {
+          id: 'fivecolumnslayout',
+          title: formatMessage(_messages.toolbarInsertBlockMessages.fiveColumns),
+          description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescription),
+          keywords: ['layout', 'column', 'section', 'five column'],
+          priority: 1100,
+          icon: function icon() {
+            return /*#__PURE__*/_react.default.createElement(_quickInsert.IconFiveColumnLayout, null);
+          },
+          action: function action(insert, state) {
+            var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 5));
+            return tr;
+          }
+        }] : [{
           id: 'layout',
           title: formatMessage(_messages.toolbarInsertBlockMessages.columns),
           description: formatMessage(_messages.toolbarInsertBlockMessages.columnsDescription),

package/dist/cjs/utils/preRelease.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isPreRelease2 = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var isPreRelease2 = exports.isPreRelease2 = function isPreRelease2() {
+  return (0, _experiments.editorExperiment)('advanced_layouts', true) || (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_pre_release_2');
+};

package/dist/es2019/actions.js

@@ -4,6 +4,7 @@ import { flatmap, getStepRange, isEmptyDocument, mapChildren } from '@atlaskit/e
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
 import { pluginKey } from './pm-plugins/plugin-key';
 export const ONE_COL_LAYOUTS = ['single'];
 export const TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
@@ -53,6 +54,20 @@ export const getSelectedLayout = (maybeLayoutSection, current) => {
   }
   return current;
 };
+export const createMultiColumnLayoutSection = (state, numberOfColumns = 2) => {
+  const {
+    layoutSection,
+    layoutColumn
+  } = state.schema.nodes;
+
+  // create layout based on column number, each column has equal width and trucated to 2 decimal places
+  const columns = Fragment.fromArray(Array.from({
+    length: numberOfColumns
+  }, () => layoutColumn.createAndFill({
+    width: EVEN_DISTRIBUTED_COL_WIDTHS[numberOfColumns]
+  })));
+  return layoutSection.createAndFill(undefined, columns);
+};
 export const createDefaultLayoutSection = state => {
   const {
     layoutSection,

package/dist/es2019/consts.js

@@ -0,0 +1,7 @@
+export const EVEN_DISTRIBUTED_COL_WIDTHS = {
+  1: 100,
+  2: 50,
+  3: 33.33,
+  4: 25,
+  5: 20
+};

package/dist/es2019/plugin.js

@@ -2,11 +2,12 @@ import React from 'react';
 import { layoutColumn, layoutSection } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import { IconLayout } from '@atlaskit/editor-common/quick-insert';
-import { createDefaultLayoutSection, insertLayoutColumnsWithAnalytics } from './actions';
+import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
+import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { buildToolbar } from './toolbar';
+import { isPreRelease2 } from './utils/preRelease';
 export { pluginKey };
 export const layoutPlugin = ({
   config: options = {},
@@ -48,7 +49,51 @@ export const layoutPlugin = ({
       },
       quickInsert: ({
         formatMessage
-      }) => [{
+      }) => isPreRelease2() ? [{
+        id: 'twocolumnslayout',
+        title: formatMessage(messages.twoColumns),
+        description: formatMessage(messages.columnsDescription),
+        keywords: ['layout', 'column', 'section', 'two column'],
+        priority: 1100,
+        icon: () => /*#__PURE__*/React.createElement(IconTwoColumnLayout, null),
+        action(insert, state) {
+          const tr = insert(createMultiColumnLayoutSection(state));
+          return tr;
+        }
+      }, {
+        id: 'threecolumnslayout',
+        title: formatMessage(messages.threeColumns),
+        description: formatMessage(messages.columnsDescription),
+        keywords: ['layout', 'column', 'section', 'three column'],
+        priority: 1100,
+        icon: () => /*#__PURE__*/React.createElement(IconThreeColumnLayout, null),
+        action(insert, state) {
+          const tr = insert(createMultiColumnLayoutSection(state, 3));
+          return tr;
+        }
+      }, {
+        id: 'fourcolumnslayout',
+        title: formatMessage(messages.fourColumns),
+        description: formatMessage(messages.columnsDescription),
+        keywords: ['layout', 'column', 'section', 'four column'],
+        priority: 1100,
+        icon: () => /*#__PURE__*/React.createElement(IconFourColumnLayout, null),
+        action(insert, state) {
+          const tr = insert(createMultiColumnLayoutSection(state, 4));
+          return tr;
+        }
+      }, {
+        id: 'fivecolumnslayout',
+        title: formatMessage(messages.fiveColumns),
+        description: formatMessage(messages.columnsDescription),
+        keywords: ['layout', 'column', 'section', 'five column'],
+        priority: 1100,
+        icon: () => /*#__PURE__*/React.createElement(IconFiveColumnLayout, null),
+        action(insert, state) {
+          const tr = insert(createMultiColumnLayoutSection(state, 5));
+          return tr;
+        }
+      }] : [{
         id: 'layout',
         title: formatMessage(messages.columns),
         description: formatMessage(messages.columnsDescription),

package/dist/es2019/utils/preRelease.js

@@ -0,0 +1,3 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+export const isPreRelease2 = () => editorExperiment('advanced_layouts', true) || fg('platform_editor_advanced_layouts_pre_release_2');

package/dist/esm/actions.js

@@ -7,6 +7,7 @@ import { flatmap, getStepRange, isEmptyDocument, mapChildren } from '@atlaskit/e
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
 import { pluginKey } from './pm-plugins/plugin-key';
 export var ONE_COL_LAYOUTS = ['single'];
 export var TWO_COL_LAYOUTS = ['two_equal', 'two_left_sidebar', 'two_right_sidebar'];
@@ -58,11 +59,27 @@ export var getSelectedLayout = function getSelectedLayout(maybeLayoutSection, cu
   }
   return current;
 };
-export var createDefaultLayoutSection = function createDefaultLayoutSection(state) {
+export var createMultiColumnLayoutSection = function createMultiColumnLayoutSection(state) {
+  var numberOfColumns = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
   var _state$schema$nodes = state.schema.nodes,
     layoutSection = _state$schema$nodes.layoutSection,
     layoutColumn = _state$schema$nodes.layoutColumn;
 
+  // create layout based on column number, each column has equal width and trucated to 2 decimal places
+  var columns = Fragment.fromArray(Array.from({
+    length: numberOfColumns
+  }, function () {
+    return layoutColumn.createAndFill({
+      width: EVEN_DISTRIBUTED_COL_WIDTHS[numberOfColumns]
+    });
+  }));
+  return layoutSection.createAndFill(undefined, 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({
     width: 50

package/dist/esm/consts.js

@@ -0,0 +1,7 @@
+export var EVEN_DISTRIBUTED_COL_WIDTHS = {
+  1: 100,
+  2: 50,
+  3: 33.33,
+  4: 25,
+  5: 20
+};

package/dist/esm/plugin.js

@@ -2,11 +2,12 @@ import React from 'react';
 import { layoutColumn, layoutSection } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import { IconLayout } from '@atlaskit/editor-common/quick-insert';
-import { createDefaultLayoutSection, insertLayoutColumnsWithAnalytics } from './actions';
+import { IconFiveColumnLayout, IconFourColumnLayout, IconLayout, IconThreeColumnLayout, IconTwoColumnLayout } from '@atlaskit/editor-common/quick-insert';
+import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { buildToolbar } from './toolbar';
+import { isPreRelease2 } from './utils/preRelease';
 export { pluginKey };
 export var layoutPlugin = function layoutPlugin(_ref) {
   var _api$analytics;
@@ -49,7 +50,59 @@ export var layoutPlugin = function layoutPlugin(_ref) {
       },
       quickInsert: function quickInsert(_ref3) {
         var formatMessage = _ref3.formatMessage;
-        return [{
+        return isPreRelease2() ? [{
+          id: 'twocolumnslayout',
+          title: formatMessage(messages.twoColumns),
+          description: formatMessage(messages.columnsDescription),
+          keywords: ['layout', 'column', 'section', 'two column'],
+          priority: 1100,
+          icon: function icon() {
+            return /*#__PURE__*/React.createElement(IconTwoColumnLayout, null);
+          },
+          action: function action(insert, state) {
+            var tr = insert(createMultiColumnLayoutSection(state));
+            return tr;
+          }
+        }, {
+          id: 'threecolumnslayout',
+          title: formatMessage(messages.threeColumns),
+          description: formatMessage(messages.columnsDescription),
+          keywords: ['layout', 'column', 'section', 'three column'],
+          priority: 1100,
+          icon: function icon() {
+            return /*#__PURE__*/React.createElement(IconThreeColumnLayout, null);
+          },
+          action: function action(insert, state) {
+            var tr = insert(createMultiColumnLayoutSection(state, 3));
+            return tr;
+          }
+        }, {
+          id: 'fourcolumnslayout',
+          title: formatMessage(messages.fourColumns),
+          description: formatMessage(messages.columnsDescription),
+          keywords: ['layout', 'column', 'section', 'four column'],
+          priority: 1100,
+          icon: function icon() {
+            return /*#__PURE__*/React.createElement(IconFourColumnLayout, null);
+          },
+          action: function action(insert, state) {
+            var tr = insert(createMultiColumnLayoutSection(state, 4));
+            return tr;
+          }
+        }, {
+          id: 'fivecolumnslayout',
+          title: formatMessage(messages.fiveColumns),
+          description: formatMessage(messages.columnsDescription),
+          keywords: ['layout', 'column', 'section', 'five column'],
+          priority: 1100,
+          icon: function icon() {
+            return /*#__PURE__*/React.createElement(IconFiveColumnLayout, null);
+          },
+          action: function action(insert, state) {
+            var tr = insert(createMultiColumnLayoutSection(state, 5));
+            return tr;
+          }
+        }] : [{
           id: 'layout',
           title: formatMessage(messages.columns),
           description: formatMessage(messages.columnsDescription),

package/dist/esm/utils/preRelease.js

@@ -0,0 +1,5 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+export var isPreRelease2 = function isPreRelease2() {
+  return editorExperiment('advanced_layouts', true) || fg('platform_editor_advanced_layouts_pre_release_2');
+};

package/dist/types/actions.d.ts

@@ -12,6 +12,7 @@ export declare const THREE_COL_LAYOUTS: PresetLayout[];
  */
 export declare const getPresetLayout: (section: Node) => PresetLayout | undefined;
 export declare const getSelectedLayout: (maybeLayoutSection: Node | undefined, current: PresetLayout) => PresetLayout;
+export declare const createMultiColumnLayoutSection: (state: EditorState, numberOfColumns?: number) => Node;
 export declare const createDefaultLayoutSection: (state: EditorState) => Node;
 export declare const insertLayoutColumns: Command;
 export declare const insertLayoutColumnsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (inputMethod: TOOLBAR_MENU_TYPE) => Command;

package/dist/types/consts.d.ts

@@ -0,0 +1,3 @@
+export declare const EVEN_DISTRIBUTED_COL_WIDTHS: {
+    [key: number]: number;
+};

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

@@ -0,0 +1 @@
+export declare const isPreRelease2: () => boolean;

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

@@ -12,6 +12,7 @@ export declare const THREE_COL_LAYOUTS: PresetLayout[];
  */
 export declare const getPresetLayout: (section: Node) => PresetLayout | undefined;
 export declare const getSelectedLayout: (maybeLayoutSection: Node | undefined, current: PresetLayout) => PresetLayout;
+export declare const createMultiColumnLayoutSection: (state: EditorState, numberOfColumns?: number) => Node;
 export declare const createDefaultLayoutSection: (state: EditorState) => Node;
 export declare const insertLayoutColumns: Command;
 export declare const insertLayoutColumnsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (inputMethod: TOOLBAR_MENU_TYPE) => Command;

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

@@ -0,0 +1,3 @@
+export declare const EVEN_DISTRIBUTED_COL_WIDTHS: {
+    [key: number]: number;
+};

package/dist/types-ts4.5/utils/preRelease.d.ts

@@ -0,0 +1 @@
+export declare const isPreRelease2: () => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "1.9.2",
+	"version": "1.9.3",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,11 +32,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^42.0.2",
-		"@atlaskit/editor-common": "^93.5.0",
+		"@atlaskit/editor-common": "^93.6.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/icon": "^22.22.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/tmp-editor-statsig": "^2.6.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
@@ -83,5 +85,10 @@
 		"no-unused-dependencies": {
 			"checkDevDependencies": true
 		}
+	},
+	"platform-feature-flags": {
+		"platform_editor_advanced_layouts_pre_release_2": {
+			"type": "boolean"
+		}
 	}
 }