@atlaskit/editor-plugin-layout 2.5.1 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-layout
 
+## 2.6.0
+
+### Minor Changes
+
+- [#144082](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/144082)
+  [`583a67e0b8ee7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/583a67e0b8ee7) -
+  ED-27146 improve layout insertion behaivour, now will select into the layout after insertion.
+
 ## 2.5.1
 
 ### Patch Changes

package/dist/cjs/layoutPlugin.js

@@ -4,13 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.layoutPlugin = void 0;
+exports.selectIntoLayoutSection = exports.layoutPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _schema = require("@atlaskit/adf-schema/schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("./pm-plugins/actions");
 var _main = _interopRequireDefault(require("./pm-plugins/main"));
@@ -18,6 +20,33 @@ var _pluginKey = require("./pm-plugins/plugin-key");
 var _resizing = _interopRequireDefault(require("./pm-plugins/resizing"));
 var _globalStyles = require("./ui/global-styles");
 var _toolbar = require("./ui/toolbar");
+/**
+ * This function is used to set the selection into
+ * the first paragraph of the first column of a layout section.
+ * This function is only intended to be used after inserting a new layout section.
+ * @param tr - transaction
+ * @returns - transaction with the selection set to the first paragraph of the first column
+ */
+var selectIntoLayoutSection = exports.selectIntoLayoutSection = function selectIntoLayoutSection(tr) {
+  var _nodeWithPos$node$fir;
+  if (!(0, _experiments.editorExperiment)('single_column_layouts', true)) {
+    return tr;
+  }
+  var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
+    layoutSection = _tr$doc$type$schema$n.layoutSection,
+    paragraph = _tr$doc$type$schema$n.paragraph;
+  var nodeWithPos = (0, _utils.findParentNode)(function (node) {
+    return node.type === layoutSection;
+  })(tr.selection);
+  if (!nodeWithPos || !nodeWithPos.node || nodeWithPos.node.type.name !== 'layoutSection' || ((_nodeWithPos$node$fir = nodeWithPos.node.firstChild) === null || _nodeWithPos$node$fir === void 0 || (_nodeWithPos$node$fir = _nodeWithPos$node$fir.firstChild) === null || _nodeWithPos$node$fir === void 0 ? void 0 : _nodeWithPos$node$fir.type) !== paragraph) {
+    return tr;
+  }
+
+  // set text selection at the beginning of the layout section
+  // will set the selection to the first column
+  tr.setSelection(_state.TextSelection.create(tr.doc, nodeWithPos.pos));
+  return tr;
+};
 var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
   var _api$analytics;
   var _ref$config = _ref.config,
@@ -98,6 +127,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
           action: function action(insert, state, _source) {
             var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 1));
             withInsertLayoutAnalytics(tr);
+            selectIntoLayoutSection(tr);
             return tr;
           }
         }] : [];
@@ -117,6 +147,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 3));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }];
@@ -135,6 +166,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 2));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }, {
@@ -151,6 +183,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 3));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }, {
@@ -167,6 +200,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 4));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }, {
@@ -183,6 +217,7 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert((0, _actions.createMultiColumnLayoutSection)(state, 5));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }]);

package/dist/cjs/pm-plugins/utils/index.js

@@ -38,7 +38,6 @@ var selectIntoLayout = exports.selectIntoLayout = function selectIntoLayout(view
   var $maybeLayoutSection = view.state.doc.resolve(posOfLayout);
   if (((_$maybeLayoutSection$ = $maybeLayoutSection.nodeAfter) === null || _$maybeLayoutSection$ === void 0 ? void 0 : _$maybeLayoutSection$.type.name) === 'layoutSection') {
     var _layoutSectionNode$fi;
-    // $maybeLayoutSection.posAtIndex(1, 1);
     var layoutSectionNode = $maybeLayoutSection.nodeAfter;
 
     // check if the childIndex is valid

package/dist/es2019/layoutPlugin.js

@@ -4,6 +4,8 @@ import { layoutSectionWithSingleColumn } 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';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
@@ -11,6 +13,33 @@ import { pluginKey } from './pm-plugins/plugin-key';
 import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
 import { GlobalStylesWrapper } from './ui/global-styles';
 import { buildToolbar } from './ui/toolbar';
+
+/**
+ * This function is used to set the selection into
+ * the first paragraph of the first column of a layout section.
+ * This function is only intended to be used after inserting a new layout section.
+ * @param tr - transaction
+ * @returns - transaction with the selection set to the first paragraph of the first column
+ */
+export const selectIntoLayoutSection = tr => {
+  var _nodeWithPos$node$fir, _nodeWithPos$node$fir2;
+  if (!editorExperiment('single_column_layouts', true)) {
+    return tr;
+  }
+  const {
+    layoutSection,
+    paragraph
+  } = tr.doc.type.schema.nodes;
+  const nodeWithPos = findParentNode(node => node.type === layoutSection)(tr.selection);
+  if (!nodeWithPos || !nodeWithPos.node || nodeWithPos.node.type.name !== 'layoutSection' || ((_nodeWithPos$node$fir = nodeWithPos.node.firstChild) === null || _nodeWithPos$node$fir === void 0 ? void 0 : (_nodeWithPos$node$fir2 = _nodeWithPos$node$fir.firstChild) === null || _nodeWithPos$node$fir2 === void 0 ? void 0 : _nodeWithPos$node$fir2.type) !== paragraph) {
+    return tr;
+  }
+
+  // set text selection at the beginning of the layout section
+  // will set the selection to the first column
+  tr.setSelection(TextSelection.create(tr.doc, nodeWithPos.pos));
+  return tr;
+};
 export const layoutPlugin = ({
   config: options = {},
   api
@@ -88,6 +117,7 @@ export const layoutPlugin = ({
           action(insert, state, _source) {
             const tr = insert(createMultiColumnLayoutSection(state, 1));
             withInsertLayoutAnalytics(tr);
+            selectIntoLayoutSection(tr);
             return tr;
           }
         }] : [];
@@ -105,6 +135,7 @@ export const layoutPlugin = ({
               action(insert, state) {
                 const tr = insert(createMultiColumnLayoutSection(state, 3));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }];
@@ -121,6 +152,7 @@ export const layoutPlugin = ({
               action(insert, state) {
                 const tr = insert(createMultiColumnLayoutSection(state, 2));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }, {
@@ -135,6 +167,7 @@ export const layoutPlugin = ({
               action(insert, state) {
                 const tr = insert(createMultiColumnLayoutSection(state, 3));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }, {
@@ -149,6 +182,7 @@ export const layoutPlugin = ({
               action(insert, state) {
                 const tr = insert(createMultiColumnLayoutSection(state, 4));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }, {
@@ -163,6 +197,7 @@ export const layoutPlugin = ({
               action(insert, state) {
                 const tr = insert(createMultiColumnLayoutSection(state, 5));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }];

package/dist/es2019/pm-plugins/utils/index.js

@@ -36,7 +36,6 @@ export const selectIntoLayout = (view, posOfLayout, childIndex = 0) => {
   const $maybeLayoutSection = view.state.doc.resolve(posOfLayout);
   if (((_$maybeLayoutSection$ = $maybeLayoutSection.nodeAfter) === null || _$maybeLayoutSection$ === void 0 ? void 0 : _$maybeLayoutSection$.type.name) === 'layoutSection') {
     var _layoutSectionNode$fi;
-    // $maybeLayoutSection.posAtIndex(1, 1);
     const layoutSectionNode = $maybeLayoutSection.nodeAfter;
 
     // check if the childIndex is valid

package/dist/esm/layoutPlugin.js

@@ -4,6 +4,8 @@ import { layoutSectionWithSingleColumn } 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';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createDefaultLayoutSection, createMultiColumnLayoutSection, insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
 import { default as createLayoutPlugin } from './pm-plugins/main';
@@ -11,6 +13,34 @@ import { pluginKey } from './pm-plugins/plugin-key';
 import { default as createLayoutResizingPlugin } from './pm-plugins/resizing';
 import { GlobalStylesWrapper } from './ui/global-styles';
 import { buildToolbar } from './ui/toolbar';
+
+/**
+ * This function is used to set the selection into
+ * the first paragraph of the first column of a layout section.
+ * This function is only intended to be used after inserting a new layout section.
+ * @param tr - transaction
+ * @returns - transaction with the selection set to the first paragraph of the first column
+ */
+export var selectIntoLayoutSection = function selectIntoLayoutSection(tr) {
+  var _nodeWithPos$node$fir;
+  if (!editorExperiment('single_column_layouts', true)) {
+    return tr;
+  }
+  var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
+    layoutSection = _tr$doc$type$schema$n.layoutSection,
+    paragraph = _tr$doc$type$schema$n.paragraph;
+  var nodeWithPos = findParentNode(function (node) {
+    return node.type === layoutSection;
+  })(tr.selection);
+  if (!nodeWithPos || !nodeWithPos.node || nodeWithPos.node.type.name !== 'layoutSection' || ((_nodeWithPos$node$fir = nodeWithPos.node.firstChild) === null || _nodeWithPos$node$fir === void 0 || (_nodeWithPos$node$fir = _nodeWithPos$node$fir.firstChild) === null || _nodeWithPos$node$fir === void 0 ? void 0 : _nodeWithPos$node$fir.type) !== paragraph) {
+    return tr;
+  }
+
+  // set text selection at the beginning of the layout section
+  // will set the selection to the first column
+  tr.setSelection(TextSelection.create(tr.doc, nodeWithPos.pos));
+  return tr;
+};
 export var layoutPlugin = function layoutPlugin(_ref) {
   var _api$analytics;
   var _ref$config = _ref.config,
@@ -91,6 +121,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
           action: function action(insert, state, _source) {
             var tr = insert(createMultiColumnLayoutSection(state, 1));
             withInsertLayoutAnalytics(tr);
+            selectIntoLayoutSection(tr);
             return tr;
           }
         }] : [];
@@ -110,6 +141,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert(createMultiColumnLayoutSection(state, 3));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }];
@@ -128,6 +160,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert(createMultiColumnLayoutSection(state, 2));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }, {
@@ -144,6 +177,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert(createMultiColumnLayoutSection(state, 3));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }, {
@@ -160,6 +194,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert(createMultiColumnLayoutSection(state, 4));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }, {
@@ -176,6 +211,7 @@ export var layoutPlugin = function layoutPlugin(_ref) {
               action: function action(insert, state) {
                 var tr = insert(createMultiColumnLayoutSection(state, 5));
                 withInsertLayoutAnalytics(tr);
+                selectIntoLayoutSection(tr);
                 return tr;
               }
             }]);

package/dist/esm/pm-plugins/utils/index.js

@@ -32,7 +32,6 @@ export var selectIntoLayout = function selectIntoLayout(view, posOfLayout) {
   var $maybeLayoutSection = view.state.doc.resolve(posOfLayout);
   if (((_$maybeLayoutSection$ = $maybeLayoutSection.nodeAfter) === null || _$maybeLayoutSection$ === void 0 ? void 0 : _$maybeLayoutSection$.type.name) === 'layoutSection') {
     var _layoutSectionNode$fi;
-    // $maybeLayoutSection.posAtIndex(1, 1);
     var layoutSectionNode = $maybeLayoutSection.nodeAfter;
 
     // check if the childIndex is valid

package/dist/types/layoutPlugin.d.ts

@@ -1,2 +1,11 @@
+import { type Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { LayoutPlugin } from './layoutPluginType';
+/**
+ * This function is used to set the selection into
+ * the first paragraph of the first column of a layout section.
+ * This function is only intended to be used after inserting a new layout section.
+ * @param tr - transaction
+ * @returns - transaction with the selection set to the first paragraph of the first column
+ */
+export declare const selectIntoLayoutSection: (tr: Transaction) => Transaction;
 export declare const layoutPlugin: LayoutPlugin;

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

@@ -1,2 +1,11 @@
+import { type Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { LayoutPlugin } from './layoutPluginType';
+/**
+ * This function is used to set the selection into
+ * the first paragraph of the first column of a layout section.
+ * This function is only intended to be used after inserting a new layout section.
+ * @param tr - transaction
+ * @returns - transaction with the selection set to the first paragraph of the first column
+ */
+export declare const selectIntoLayoutSection: (tr: Transaction) => Transaction;
 export declare const layoutPlugin: LayoutPlugin;

package/package.json

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