@atlaskit/editor-plugin-layout 1.12.2 → 1.12.3

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-layout
 
+## 1.12.3
+
+### Patch Changes
+
+- [#165840](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165840)
+  [`02a637ba38316`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/02a637ba38316) -
+  [ux] Update layout drop target using anchor position to work in stack layout
+- [#166078](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/166078)
+  [`73109f934d566`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/73109f934d566) -
+  [ux] [ED-25773] Hide layout floating toolbar when layout column is selected
+
 ## 1.12.2
 
 ### Patch Changes

package/dist/cjs/actions.js

@@ -62,6 +62,14 @@ var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
   }
   return [];
 };
+var isValidLayoutWidthDistributions = function isValidLayoutWidthDistributions(layoutSection) {
+  var totalWidth = (0, _utils.mapChildren)(layoutSection, function (column) {
+    return column.attrs.width;
+  }).reduce(function (total, width) {
+    return total + width;
+  }, 0);
+  return Math.round(totalWidth) === 100;
+};
 
 /**
  * Finds layout preset based on the width attrs of all the layoutColumn nodes
@@ -370,6 +378,9 @@ var setPresetLayout = exports.setPresetLayout = function setPresetLayout(editorA
   };
 };
 function layoutNeedChanges(node) {
+  if ((0, _preRelease.isPreRelease2)()) {
+    return !getPresetLayout(node) || !isValidLayoutWidthDistributions(node);
+  }
   return !getPresetLayout(node);
 }
 function getLayoutChange(node, pos, schema) {
@@ -397,6 +408,7 @@ var fixColumnSizes = exports.fixColumnSizes = function fixColumnSizes(changedTr,
     if (node.type !== layoutSection) {
       return true; // Check all internal nodes expect for layout section
     }
+
     // Node is a section
     if (layoutNeedChanges(node)) {
       change = getLayoutChange(node, pos, state.schema);

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

@@ -14,6 +14,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _actions = require("../actions");
+var _utils3 = require("../utils");
 var _pluginKey = require("./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; }
@@ -51,7 +52,7 @@ var getNodeDecoration = function getNodeDecoration(pos, node) {
   })];
 };
 var getInitialPluginState = function getInitialPluginState(options, state) {
-  var maybeLayoutSection = (0, _utils2.findParentNodeOfType)(state.schema.nodes.layoutSection)(state.selection);
+  var maybeLayoutSection = (0, _utils3.getMaybeLayoutSection)(state);
   var allowBreakout = options.allowBreakout || false;
   var addSidebarLayouts = options.UNSAFE_addSidebarLayouts || false;
   var allowSingleColumnLayout = options.UNSAFE_allowSingleColumnLayout || false;
@@ -74,9 +75,7 @@ var _default = exports.default = function _default(options) {
       },
       apply: function apply(tr, pluginState, _oldState, newState) {
         if (tr.docChanged || tr.selectionSet) {
-          var layoutSection = newState.schema.nodes.layoutSection,
-            selection = newState.selection;
-          var maybeLayoutSection = (0, _utils2.findParentNodeOfType)(layoutSection)(selection) || (0, _utils2.findSelectedNodeOfType)([layoutSection])(selection);
+          var maybeLayoutSection = (0, _utils3.getMaybeLayoutSection)(newState);
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
             pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
             selectedLayout: (0, _actions.getSelectedLayout)(maybeLayoutSection && maybeLayoutSection.node, pluginState.selectedLayout)

package/dist/cjs/toolbar.js

@@ -182,7 +182,7 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
       onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('five_equal', intl.formatMessage),
       selected: numberOfColumns === 5
     }];
-    var sidebarTypesByColumns = SIDEBAR_LAYOUT_TYPES_BY_COLUMNS[numberOfColumns];
+    var sidebarTypesByColumns = SIDEBAR_LAYOUT_TYPES_BY_COLUMNS[numberOfColumns] || [];
     return {
       title: layoutToolbarTitle,
       getDomRef: function getDomRef(view) {

package/dist/cjs/utils/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMaybeLayoutSection = void 0;
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var getMaybeLayoutSection = exports.getMaybeLayoutSection = function getMaybeLayoutSection(state) {
+  var _state$schema$nodes = state.schema.nodes,
+    layoutSection = _state$schema$nodes.layoutSection,
+    layoutColumn = _state$schema$nodes.layoutColumn,
+    selection = state.selection;
+  var isLayoutColumn = (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _utils.findSelectedNodeOfType)([layoutColumn])(selection);
+
+  // When selection is on layoutColumn, we want to hide floating toolbar, hence don't return layoutSection node here
+  return isLayoutColumn ? undefined : (0, _utils.findParentNodeOfType)(layoutSection)(selection) || (0, _utils.findSelectedNodeOfType)([layoutSection])(selection);
+};

package/dist/es2019/actions.js

@@ -50,6 +50,12 @@ const getWidthsForPreset = presetLayout => {
   }
   return [];
 };
+const isValidLayoutWidthDistributions = layoutSection => {
+  const totalWidth = mapChildren(layoutSection, column => column.attrs.width).reduce((total, width) => {
+    return total + width;
+  }, 0);
+  return Math.round(totalWidth) === 100;
+};
 
 /**
  * Finds layout preset based on the width attrs of all the layoutColumn nodes
@@ -348,6 +354,9 @@ export const setPresetLayout = editorAnalyticsAPI => (layout, formatMessage) =>
   return false;
 };
 function layoutNeedChanges(node) {
+  if (isPreRelease2()) {
+    return !getPresetLayout(node) || !isValidLayoutWidthDistributions(node);
+  }
   return !getPresetLayout(node);
 }
 function getLayoutChange(node, pos, schema) {
@@ -377,6 +386,7 @@ export const fixColumnSizes = (changedTr, state) => {
     if (node.type !== layoutSection) {
       return true; // Check all internal nodes expect for layout section
     }
+
     // Node is a section
     if (layoutNeedChanges(node)) {
       change = getLayoutChange(node, pos, state.schema);

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

@@ -3,9 +3,10 @@ import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
 import { filterCommand as filter } from '@atlaskit/editor-common/utils';
 import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
-import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fixColumnSizes, fixColumnStructure, getSelectedLayout } from '../actions';
+import { getMaybeLayoutSection } from '../utils';
 import { pluginKey } from './plugin-key';
 export const DEFAULT_LAYOUT = 'two_equal';
 const isWholeSelectionInsideLayoutColumn = state => {
@@ -46,7 +47,7 @@ const getNodeDecoration = (pos, node) => [Decoration.node(pos, pos + node.nodeSi
   class: 'selected'
 })];
 const getInitialPluginState = (options, state) => {
-  const maybeLayoutSection = findParentNodeOfType(state.schema.nodes.layoutSection)(state.selection);
+  const maybeLayoutSection = getMaybeLayoutSection(state);
   const allowBreakout = options.allowBreakout || false;
   const addSidebarLayouts = options.UNSAFE_addSidebarLayouts || false;
   const allowSingleColumnLayout = options.UNSAFE_allowSingleColumnLayout || false;
@@ -66,15 +67,7 @@ export default (options => new SafePlugin({
     init: (_, state) => getInitialPluginState(options, state),
     apply: (tr, pluginState, _oldState, newState) => {
       if (tr.docChanged || tr.selectionSet) {
-        const {
-          schema: {
-            nodes: {
-              layoutSection
-            }
-          },
-          selection
-        } = newState;
-        const maybeLayoutSection = findParentNodeOfType(layoutSection)(selection) || findSelectedNodeOfType([layoutSection])(selection);
+        const maybeLayoutSection = getMaybeLayoutSection(newState);
         const newPluginState = {
           ...pluginState,
           pos: maybeLayoutSection ? maybeLayoutSection.pos : null,

package/dist/es2019/toolbar.js

@@ -170,7 +170,7 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
       onClick: setPresetLayout(editorAnalyticsAPI)('five_equal', intl.formatMessage),
       selected: numberOfColumns === 5
     }];
-    const sidebarTypesByColumns = SIDEBAR_LAYOUT_TYPES_BY_COLUMNS[numberOfColumns];
+    const sidebarTypesByColumns = SIDEBAR_LAYOUT_TYPES_BY_COLUMNS[numberOfColumns] || [];
     return {
       title: layoutToolbarTitle,
       getDomRef: view => findDomRefAtPos(pos, view.domAtPos.bind(view)),

package/dist/es2019/utils/index.js

@@ -0,0 +1,17 @@
+import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+export const getMaybeLayoutSection = state => {
+  const {
+    schema: {
+      nodes: {
+        layoutSection,
+        layoutColumn
+      }
+    },
+    selection
+  } = state;
+  const isLayoutColumn = editorExperiment('advanced_layouts', true) && findSelectedNodeOfType([layoutColumn])(selection);
+
+  // When selection is on layoutColumn, we want to hide floating toolbar, hence don't return layoutSection node here
+  return isLayoutColumn ? undefined : findParentNodeOfType(layoutSection)(selection) || findSelectedNodeOfType([layoutSection])(selection);
+};

package/dist/esm/actions.js

@@ -53,6 +53,14 @@ var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
   }
   return [];
 };
+var isValidLayoutWidthDistributions = function isValidLayoutWidthDistributions(layoutSection) {
+  var totalWidth = mapChildren(layoutSection, function (column) {
+    return column.attrs.width;
+  }).reduce(function (total, width) {
+    return total + width;
+  }, 0);
+  return Math.round(totalWidth) === 100;
+};
 
 /**
  * Finds layout preset based on the width attrs of all the layoutColumn nodes
@@ -361,6 +369,9 @@ export var setPresetLayout = function setPresetLayout(editorAnalyticsAPI) {
   };
 };
 function layoutNeedChanges(node) {
+  if (isPreRelease2()) {
+    return !getPresetLayout(node) || !isValidLayoutWidthDistributions(node);
+  }
   return !getPresetLayout(node);
 }
 function getLayoutChange(node, pos, schema) {
@@ -388,6 +399,7 @@ export var fixColumnSizes = function fixColumnSizes(changedTr, state) {
     if (node.type !== layoutSection) {
       return true; // Check all internal nodes expect for layout section
     }
+
     // Node is a section
     if (layoutNeedChanges(node)) {
       change = getLayoutChange(node, pos, state.schema);

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

@@ -6,9 +6,10 @@ import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
 import { filterCommand as filter } from '@atlaskit/editor-common/utils';
 import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
-import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fixColumnSizes, fixColumnStructure, getSelectedLayout } from '../actions';
+import { getMaybeLayoutSection } from '../utils';
 import { pluginKey } from './plugin-key';
 export var DEFAULT_LAYOUT = 'two_equal';
 var isWholeSelectionInsideLayoutColumn = function isWholeSelectionInsideLayoutColumn(state) {
@@ -44,7 +45,7 @@ var getNodeDecoration = function getNodeDecoration(pos, node) {
   })];
 };
 var getInitialPluginState = function getInitialPluginState(options, state) {
-  var maybeLayoutSection = findParentNodeOfType(state.schema.nodes.layoutSection)(state.selection);
+  var maybeLayoutSection = getMaybeLayoutSection(state);
   var allowBreakout = options.allowBreakout || false;
   var addSidebarLayouts = options.UNSAFE_addSidebarLayouts || false;
   var allowSingleColumnLayout = options.UNSAFE_allowSingleColumnLayout || false;
@@ -67,9 +68,7 @@ export default (function (options) {
       },
       apply: function apply(tr, pluginState, _oldState, newState) {
         if (tr.docChanged || tr.selectionSet) {
-          var layoutSection = newState.schema.nodes.layoutSection,
-            selection = newState.selection;
-          var maybeLayoutSection = findParentNodeOfType(layoutSection)(selection) || findSelectedNodeOfType([layoutSection])(selection);
+          var maybeLayoutSection = getMaybeLayoutSection(newState);
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
             pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
             selectedLayout: getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node, pluginState.selectedLayout)

package/dist/esm/toolbar.js

@@ -172,7 +172,7 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
       onClick: setPresetLayout(editorAnalyticsAPI)('five_equal', intl.formatMessage),
       selected: numberOfColumns === 5
     }];
-    var sidebarTypesByColumns = SIDEBAR_LAYOUT_TYPES_BY_COLUMNS[numberOfColumns];
+    var sidebarTypesByColumns = SIDEBAR_LAYOUT_TYPES_BY_COLUMNS[numberOfColumns] || [];
     return {
       title: layoutToolbarTitle,
       getDomRef: function getDomRef(view) {

package/dist/esm/utils/index.js

@@ -0,0 +1,12 @@
+import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+export var getMaybeLayoutSection = function getMaybeLayoutSection(state) {
+  var _state$schema$nodes = state.schema.nodes,
+    layoutSection = _state$schema$nodes.layoutSection,
+    layoutColumn = _state$schema$nodes.layoutColumn,
+    selection = state.selection;
+  var isLayoutColumn = editorExperiment('advanced_layouts', true) && findSelectedNodeOfType([layoutColumn])(selection);
+
+  // When selection is on layoutColumn, we want to hide floating toolbar, hence don't return layoutSection node here
+  return isLayoutColumn ? undefined : findParentNodeOfType(layoutSection)(selection) || findSelectedNodeOfType([layoutSection])(selection);
+};

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

@@ -0,0 +1,3 @@
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { type ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+export declare const getMaybeLayoutSection: (state: EditorState) => ContentNodeWithPos | undefined;

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

@@ -0,0 +1,3 @@
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { type ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+export declare const getMaybeLayoutSection: (state: EditorState) => ContentNodeWithPos | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "1.12.2",
+	"version": "1.12.3",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^44.2.0",
-		"@atlaskit/editor-common": "^94.21.0",
+		"@atlaskit/editor-common": "^94.24.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
@@ -40,7 +40,7 @@
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/tmp-editor-statsig": "^2.16.0",
+		"@atlaskit/tmp-editor-statsig": "^2.19.0",
 		"@atlaskit/tokens": "^2.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"