@atlaskit/editor-plugin-layout 1.12.10 → 1.12.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-layout
 
+## 1.12.11
+
+### Patch Changes
+
+- [#171974](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/171974)
+  [`bc888f2b9c449`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bc888f2b9c449) -
+  Fire analytics event from BreakoutResizer component when breakout is resized
+- [#171077](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/171077)
+  [`0a92cf56671ac`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0a92cf56671ac) -
+  ED-25867 always show drag handler for layout columns
+- Updated dependencies
+
 ## 1.12.10
 
 ### Patch Changes

package/dist/cjs/nodeviews/index.js

@@ -18,6 +18,7 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
+  var _pluginInjectionApi$a;
   var pluginInjectionApi = _ref.pluginInjectionApi,
     forwardRef = _ref.forwardRef,
     getPos = _ref.getPos,
@@ -36,7 +37,8 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     nodeType: "layoutSection",
     getEditorWidth: getEditorWidth,
     disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true,
-    parentRef: parentRef
+    parentRef: parentRef,
+    editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions
   });
 };
 var toDOM = function toDOM() {

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

@@ -65,17 +65,17 @@ var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
 };
 var isValidLayoutWidthDistributions = function isValidLayoutWidthDistributions(layoutSection) {
   var totalWidth = 0;
+  var hasInvalidWidth = false;
   (0, _utils.mapChildren)(layoutSection, function (column) {
     return column.attrs.width;
   }).forEach(function (width) {
     if (typeof width === 'number' && isFinite(width) && width > 0 && width <= 100) {
       totalWidth += width;
+    } else {
+      hasInvalidWidth = true;
     }
-
-    // not a valid width, e.g. 0, 100, undefined
-    return false;
   });
-  return Math.round(totalWidth) === 100;
+  return !hasInvalidWidth && Math.round(totalWidth) === 100;
 };
 
 /**
@@ -127,7 +127,13 @@ var getPresetLayout = exports.getPresetLayout = function getPresetLayout(section
   }
   return;
 };
+var isLayoutOutOfSync = function isLayoutOutOfSync(node, presetLayout) {
+  return node.childCount !== getWidthsForPreset(presetLayout).length;
+};
 var getSelectedLayout = exports.getSelectedLayout = function getSelectedLayout(maybeLayoutSection, current) {
+  if (maybeLayoutSection && isLayoutOutOfSync(maybeLayoutSection, current) && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
+    return getDefaultPresetLayout(maybeLayoutSection);
+  }
   if (maybeLayoutSection && getPresetLayout(maybeLayoutSection)) {
     return getPresetLayout(maybeLayoutSection) || current;
   }

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

@@ -13,6 +13,7 @@ var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("./actions");
 var _pluginKey = require("./plugin-key");
 var _utils3 = require("./utils");
@@ -66,6 +67,20 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
     allowSingleColumnLayout: allowSingleColumnLayout
   };
 };
+
+// To prevent a single-column layout,
+// if a user attempts to delete a layout column and
+// we will force remove the content instead.
+// There are some edge cases where user can delete a layout column
+// see packages/editor/editor-plugin-layout-tests/src/__tests__/unit/delete.ts
+var handleDeleteLayoutColumn = function handleDeleteLayoutColumn(state, dispatch) {
+  var sel = state.selection;
+  if (sel instanceof _state.NodeSelection && sel.node.type.name === 'layoutColumn' && sel.$from.parent.type.name === 'layoutSection' && sel.$from.parent.childCount === 2 && dispatch && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
+    dispatch(state.tr.deleteRange(sel.from + 1, sel.from + sel.node.content.size));
+    return true;
+  }
+  return false;
+};
 var _default = exports.default = function _default(options) {
   return new _safePlugin.SafePlugin({
     key: _pluginKey.pluginKey,
@@ -94,7 +109,11 @@ var _default = exports.default = function _default(options) {
         return undefined;
       },
       handleKeyDown: (0, _keymap.keydownHandler)({
-        Tab: (0, _utils.filterCommand)(isWholeSelectionInsideLayoutColumn, moveCursorToNextColumn)
+        Tab: (0, _utils.filterCommand)(isWholeSelectionInsideLayoutColumn, moveCursorToNextColumn),
+        'Mod-Backspace': handleDeleteLayoutColumn,
+        'Mod-Delete': handleDeleteLayoutColumn,
+        Backspace: handleDeleteLayoutColumn,
+        Delete: handleDeleteLayoutColumn
       }),
       handleClickOn: (0, _selection.createSelectionClickHandler)(['layoutColumn'], function (target) {
         return target.hasAttribute('data-layout-section') || target.hasAttribute('data-layout-column');

package/dist/es2019/nodeviews/index.js

@@ -10,6 +10,7 @@ const LayoutBreakoutResizer = ({
   view,
   parentRef
 }) => {
+  var _pluginInjectionApi$a;
   const {
     editorDisabledState
   } = useSharedPluginState(pluginInjectionApi, ['editorDisabled']);
@@ -24,7 +25,8 @@ const LayoutBreakoutResizer = ({
     nodeType: "layoutSection",
     getEditorWidth: getEditorWidth,
     disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true,
-    parentRef: parentRef
+    parentRef: parentRef,
+    editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions
   });
 };
 const toDOM = () => ['div', {

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

@@ -53,15 +53,15 @@ const getWidthsForPreset = presetLayout => {
 };
 const isValidLayoutWidthDistributions = layoutSection => {
   let totalWidth = 0;
+  let hasInvalidWidth = false;
   mapChildren(layoutSection, column => column.attrs.width).forEach(width => {
     if (typeof width === 'number' && isFinite(width) && width > 0 && width <= 100) {
       totalWidth += width;
+    } else {
+      hasInvalidWidth = true;
     }
-
-    // not a valid width, e.g. 0, 100, undefined
-    return false;
   });
-  return Math.round(totalWidth) === 100;
+  return !hasInvalidWidth && Math.round(totalWidth) === 100;
 };
 
 /**
@@ -111,7 +111,13 @@ export const getPresetLayout = section => {
   }
   return;
 };
+const isLayoutOutOfSync = (node, presetLayout) => {
+  return node.childCount !== getWidthsForPreset(presetLayout).length;
+};
 export const getSelectedLayout = (maybeLayoutSection, current) => {
+  if (maybeLayoutSection && isLayoutOutOfSync(maybeLayoutSection, current) && editorExperiment('advanced_layouts', true)) {
+    return getDefaultPresetLayout(maybeLayoutSection);
+  }
   if (maybeLayoutSection && getPresetLayout(maybeLayoutSection)) {
     return getPresetLayout(maybeLayoutSection) || current;
   }

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

@@ -2,9 +2,10 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 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 { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { fixColumnSizes, fixColumnStructure, getSelectedLayout } from './actions';
 import { pluginKey } from './plugin-key';
 import { getMaybeLayoutSection } from './utils';
@@ -61,6 +62,20 @@ const getInitialPluginState = (options, state) => {
     allowSingleColumnLayout
   };
 };
+
+// To prevent a single-column layout,
+// if a user attempts to delete a layout column and
+// we will force remove the content instead.
+// There are some edge cases where user can delete a layout column
+// see packages/editor/editor-plugin-layout-tests/src/__tests__/unit/delete.ts
+const handleDeleteLayoutColumn = (state, dispatch) => {
+  const sel = state.selection;
+  if (sel instanceof NodeSelection && sel.node.type.name === 'layoutColumn' && sel.$from.parent.type.name === 'layoutSection' && sel.$from.parent.childCount === 2 && dispatch && editorExperiment('advanced_layouts', true)) {
+    dispatch(state.tr.deleteRange(sel.from + 1, sel.from + sel.node.content.size));
+    return true;
+  }
+  return false;
+};
 export default (options => new SafePlugin({
   key: pluginKey,
   state: {
@@ -87,7 +102,11 @@ export default (options => new SafePlugin({
       return undefined;
     },
     handleKeyDown: keydownHandler({
-      Tab: filter(isWholeSelectionInsideLayoutColumn, moveCursorToNextColumn)
+      Tab: filter(isWholeSelectionInsideLayoutColumn, moveCursorToNextColumn),
+      'Mod-Backspace': handleDeleteLayoutColumn,
+      'Mod-Delete': handleDeleteLayoutColumn,
+      Backspace: handleDeleteLayoutColumn,
+      Delete: handleDeleteLayoutColumn
     }),
     handleClickOn: createSelectionClickHandler(['layoutColumn'], target => target.hasAttribute('data-layout-section') || target.hasAttribute('data-layout-column'), {
       useLongPressSelection: options.useLongPressSelection || false,

package/dist/esm/nodeviews/index.js

@@ -11,6 +11,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
+  var _pluginInjectionApi$a;
   var pluginInjectionApi = _ref.pluginInjectionApi,
     forwardRef = _ref.forwardRef,
     getPos = _ref.getPos,
@@ -29,7 +30,8 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     nodeType: "layoutSection",
     getEditorWidth: getEditorWidth,
     disabled: (editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled) === true,
-    parentRef: parentRef
+    parentRef: parentRef,
+    editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions
   });
 };
 var toDOM = function toDOM() {

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

@@ -56,17 +56,17 @@ var getWidthsForPreset = function getWidthsForPreset(presetLayout) {
 };
 var isValidLayoutWidthDistributions = function isValidLayoutWidthDistributions(layoutSection) {
   var totalWidth = 0;
+  var hasInvalidWidth = false;
   mapChildren(layoutSection, function (column) {
     return column.attrs.width;
   }).forEach(function (width) {
     if (typeof width === 'number' && isFinite(width) && width > 0 && width <= 100) {
       totalWidth += width;
+    } else {
+      hasInvalidWidth = true;
     }
-
-    // not a valid width, e.g. 0, 100, undefined
-    return false;
   });
-  return Math.round(totalWidth) === 100;
+  return !hasInvalidWidth && Math.round(totalWidth) === 100;
 };
 
 /**
@@ -118,7 +118,13 @@ export var getPresetLayout = function getPresetLayout(section) {
   }
   return;
 };
+var isLayoutOutOfSync = function isLayoutOutOfSync(node, presetLayout) {
+  return node.childCount !== getWidthsForPreset(presetLayout).length;
+};
 export var getSelectedLayout = function getSelectedLayout(maybeLayoutSection, current) {
+  if (maybeLayoutSection && isLayoutOutOfSync(maybeLayoutSection, current) && editorExperiment('advanced_layouts', true)) {
+    return getDefaultPresetLayout(maybeLayoutSection);
+  }
   if (maybeLayoutSection && getPresetLayout(maybeLayoutSection)) {
     return getPresetLayout(maybeLayoutSection) || current;
   }

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

@@ -5,9 +5,10 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 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 { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { fixColumnSizes, fixColumnStructure, getSelectedLayout } from './actions';
 import { pluginKey } from './plugin-key';
 import { getMaybeLayoutSection } from './utils';
@@ -59,6 +60,20 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
     allowSingleColumnLayout: allowSingleColumnLayout
   };
 };
+
+// To prevent a single-column layout,
+// if a user attempts to delete a layout column and
+// we will force remove the content instead.
+// There are some edge cases where user can delete a layout column
+// see packages/editor/editor-plugin-layout-tests/src/__tests__/unit/delete.ts
+var handleDeleteLayoutColumn = function handleDeleteLayoutColumn(state, dispatch) {
+  var sel = state.selection;
+  if (sel instanceof NodeSelection && sel.node.type.name === 'layoutColumn' && sel.$from.parent.type.name === 'layoutSection' && sel.$from.parent.childCount === 2 && dispatch && editorExperiment('advanced_layouts', true)) {
+    dispatch(state.tr.deleteRange(sel.from + 1, sel.from + sel.node.content.size));
+    return true;
+  }
+  return false;
+};
 export default (function (options) {
   return new SafePlugin({
     key: pluginKey,
@@ -87,7 +102,11 @@ export default (function (options) {
         return undefined;
       },
       handleKeyDown: keydownHandler({
-        Tab: filter(isWholeSelectionInsideLayoutColumn, moveCursorToNextColumn)
+        Tab: filter(isWholeSelectionInsideLayoutColumn, moveCursorToNextColumn),
+        'Mod-Backspace': handleDeleteLayoutColumn,
+        'Mod-Delete': handleDeleteLayoutColumn,
+        Backspace: handleDeleteLayoutColumn,
+        Delete: handleDeleteLayoutColumn
       }),
       handleClickOn: createSelectionClickHandler(['layoutColumn'], function (target) {
         return target.hasAttribute('data-layout-section') || target.hasAttribute('data-layout-column');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "1.12.10",
+	"version": "1.12.11",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,9 +38,9 @@
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
 		"@atlaskit/editor-plugin-width": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "6.2.1",
-		"@atlaskit/icon": "^22.28.0",
+		"@atlaskit/icon": "^23.0.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/tmp-editor-statsig": "^2.21.0",
+		"@atlaskit/tmp-editor-statsig": "^2.22.0",
 		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"