@atlaskit/editor-plugin-layout 2.4.4 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-layout
2
2
 
3
+ ## 2.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#137973](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137973)
8
+ [`5cc195689bfb2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5cc195689bfb2) -
9
+ ED-27400 add resize layout to single column layout
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 2.4.4
4
16
 
5
17
  ### Patch Changes
@@ -63,8 +63,10 @@ var layoutPlugin = exports.layoutPlugin = function layoutPlugin(_ref) {
63
63
  pos = _ref3.pos,
64
64
  allowBreakout = _ref3.allowBreakout,
65
65
  addSidebarLayouts = _ref3.addSidebarLayouts,
66
- allowSingleColumnLayout = _ref3.allowSingleColumnLayout;
67
- if (pos !== null) {
66
+ allowSingleColumnLayout = _ref3.allowSingleColumnLayout,
67
+ isResizing = _ref3.isResizing;
68
+ var shouldHideToolbar = isResizing && (0, _experiments.editorExperiment)('single_column_layouts', true);
69
+ if (pos !== null && !shouldHideToolbar) {
68
70
  return (0, _toolbar.buildToolbar)(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api);
69
71
  }
70
72
  return undefined;
@@ -17,6 +17,7 @@ var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/rea
17
17
  var _resizer = require("@atlaskit/editor-common/resizer");
18
18
  var _model = require("@atlaskit/editor-prosemirror/model");
19
19
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
20
+ var _utils = require("../pm-plugins/utils");
20
21
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
21
22
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
22
23
  function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -68,6 +69,17 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
68
69
  guidelines: guidelines
69
70
  });
70
71
  }, [pluginInjectionApi, view]);
72
+
73
+ // we want to hide the floating toolbar for other nodes.
74
+ // e.g. info panel inside the current layout section
75
+ var selectIntoCurrentLayout = (0, _react.useCallback)(function () {
76
+ var pos = getPos();
77
+ if (pos === undefined) {
78
+ return;
79
+ }
80
+ // put the selection into the first column of the layout
81
+ (0, _utils.selectIntoLayout)(view, pos, 0);
82
+ }, [getPos, view]);
71
83
  return /*#__PURE__*/_react.default.createElement(_resizer.BreakoutResizer, {
72
84
  getRef: forwardRef,
73
85
  getPos: getPos,
@@ -78,7 +90,10 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
78
90
  parentRef: parentRef,
79
91
  editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
80
92
  displayGuidelines: (0, _experiments.editorExperiment)('single_column_layouts', true) ? displayGuidelines : undefined,
81
- displayGapCursor: displayGapCursor
93
+ displayGapCursor: displayGapCursor,
94
+ onResizeStart: function onResizeStart() {
95
+ selectIntoCurrentLayout();
96
+ }
82
97
  });
83
98
  };
84
99
  var toDOM = function toDOM() {
@@ -68,7 +68,8 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
68
68
  allowBreakout: allowBreakout,
69
69
  addSidebarLayouts: addSidebarLayouts,
70
70
  selectedLayout: selectedLayout,
71
- allowSingleColumnLayout: allowSingleColumnLayout
71
+ allowSingleColumnLayout: allowSingleColumnLayout,
72
+ isResizing: false
72
73
  };
73
74
  };
74
75
 
@@ -103,11 +104,14 @@ var _default = exports.default = function _default(options) {
103
104
  init: function init(_, state) {
104
105
  return getInitialPluginState(options, state);
105
106
  },
106
- apply: function apply(tr, pluginState, _oldState, newState) {
107
+ apply: function apply(tr, pluginState, oldState, newState) {
108
+ var _tr$getMeta, _pluginKey$getState;
109
+ var isResizing = (0, _experiments.editorExperiment)('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = _pluginKey.pluginKey.getState(oldState)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.isResizing : false;
107
110
  if (tr.docChanged || tr.selectionSet) {
108
111
  var maybeLayoutSection = (0, _utils3.getMaybeLayoutSection)(newState);
109
112
  var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
110
113
  pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
114
+ isResizing: isResizing,
111
115
  selectedLayout: (0, _actions.getSelectedLayout)(maybeLayoutSection && maybeLayoutSection.node,
112
116
  // Ignored via go/ees005
113
117
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -115,7 +119,9 @@ var _default = exports.default = function _default(options) {
115
119
  });
116
120
  return newPluginState;
117
121
  }
118
- return pluginState;
122
+ return _objectSpread(_objectSpread({}, pluginState), {}, {
123
+ isResizing: isResizing
124
+ });
119
125
  }
120
126
  },
121
127
  props: {
@@ -3,7 +3,9 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.getMaybeLayoutSection = void 0;
6
+ exports.selectIntoLayout = exports.getMaybeLayoutSection = void 0;
7
+ var _selection = require("@atlaskit/editor-common/selection");
8
+ var _state = require("@atlaskit/editor-prosemirror/state");
7
9
  var _utils = require("@atlaskit/editor-prosemirror/utils");
8
10
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
9
11
  var getMaybeLayoutSection = exports.getMaybeLayoutSection = function getMaybeLayoutSection(state) {
@@ -15,4 +17,42 @@ var getMaybeLayoutSection = exports.getMaybeLayoutSection = function getMaybeLay
15
17
 
16
18
  // When selection is on layoutColumn, we want to hide floating toolbar, hence don't return layoutSection node here
17
19
  return isLayoutColumn ? undefined : (0, _utils.findParentNodeOfType)(layoutSection)(selection) || (0, _utils.findSelectedNodeOfType)([layoutSection])(selection);
20
+ };
21
+
22
+ /**
23
+ * The depth of the layout column inside the layout section.
24
+ * As per the current implementation, the layout column ALWAYS has a depth of 1.
25
+ */
26
+ var LAYOUT_COLUMN_DEPTH = 1;
27
+
28
+ /**
29
+ * This helper function is used to select a position inside a layout section.
30
+ * @param view editor view instance
31
+ * @param posOfLayout the starting position of the layout
32
+ * @param childIndex the index of the child node in the layout section
33
+ * @returns Transaction or undefined
34
+ */
35
+ var selectIntoLayout = exports.selectIntoLayout = function selectIntoLayout(view, posOfLayout) {
36
+ var _$maybeLayoutSection$;
37
+ var childIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
38
+ var $maybeLayoutSection = view.state.doc.resolve(posOfLayout);
39
+ if (((_$maybeLayoutSection$ = $maybeLayoutSection.nodeAfter) === null || _$maybeLayoutSection$ === void 0 ? void 0 : _$maybeLayoutSection$.type.name) === 'layoutSection') {
40
+ var _layoutSectionNode$fi;
41
+ // $maybeLayoutSection.posAtIndex(1, 1);
42
+ var layoutSectionNode = $maybeLayoutSection.nodeAfter;
43
+
44
+ // check if the childIndex is valid
45
+ if (childIndex < 0 || childIndex >= layoutSectionNode.childCount) {
46
+ return;
47
+ }
48
+ var childPos = $maybeLayoutSection.posAtIndex(childIndex, LAYOUT_COLUMN_DEPTH);
49
+ var tr = view.state.tr;
50
+ var $selectionPos = tr.doc.resolve(childPos);
51
+ if (((_layoutSectionNode$fi = layoutSectionNode.firstChild) === null || _layoutSectionNode$fi === void 0 ? void 0 : _layoutSectionNode$fi.type.name) === 'paragraph') {
52
+ view.dispatch(tr.setSelection(_state.TextSelection.near($selectionPos)));
53
+ } else {
54
+ view.dispatch(tr.setSelection(_selection.GapCursorSelection.near($selectionPos)));
55
+ }
56
+ return tr;
57
+ }
18
58
  };
@@ -53,9 +53,11 @@ export const layoutPlugin = ({
53
53
  pos,
54
54
  allowBreakout,
55
55
  addSidebarLayouts,
56
- allowSingleColumnLayout
56
+ allowSingleColumnLayout,
57
+ isResizing
57
58
  } = pluginKey.getState(state);
58
- if (pos !== null) {
59
+ const shouldHideToolbar = isResizing && editorExperiment('single_column_layouts', true);
60
+ if (pos !== null && !shouldHideToolbar) {
59
61
  return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api);
60
62
  }
61
63
  return undefined;
@@ -4,6 +4,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
4
4
  import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
5
5
  import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
6
6
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
7
+ import { selectIntoLayout } from '../pm-plugins/utils';
7
8
  const isEmptyParagraph = node => {
8
9
  return !!node && node.type.name === 'paragraph' && !node.childCount;
9
10
  };
@@ -53,6 +54,17 @@ const LayoutBreakoutResizer = ({
53
54
  guidelines
54
55
  });
55
56
  }, [pluginInjectionApi, view]);
57
+
58
+ // we want to hide the floating toolbar for other nodes.
59
+ // e.g. info panel inside the current layout section
60
+ const selectIntoCurrentLayout = useCallback(() => {
61
+ const pos = getPos();
62
+ if (pos === undefined) {
63
+ return;
64
+ }
65
+ // put the selection into the first column of the layout
66
+ selectIntoLayout(view, pos, 0);
67
+ }, [getPos, view]);
56
68
  return /*#__PURE__*/React.createElement(BreakoutResizer, {
57
69
  getRef: forwardRef,
58
70
  getPos: getPos,
@@ -63,7 +75,10 @@ const LayoutBreakoutResizer = ({
63
75
  parentRef: parentRef,
64
76
  editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
65
77
  displayGuidelines: editorExperiment('single_column_layouts', true) ? displayGuidelines : undefined,
66
- displayGapCursor: displayGapCursor
78
+ displayGapCursor: displayGapCursor,
79
+ onResizeStart: () => {
80
+ selectIntoCurrentLayout();
81
+ }
67
82
  });
68
83
  };
69
84
  const toDOM = () => ['div', {
@@ -63,7 +63,8 @@ const getInitialPluginState = (options, state) => {
63
63
  allowBreakout,
64
64
  addSidebarLayouts,
65
65
  selectedLayout,
66
- allowSingleColumnLayout
66
+ allowSingleColumnLayout,
67
+ isResizing: false
67
68
  };
68
69
  };
69
70
 
@@ -95,12 +96,15 @@ export default (options => new SafePlugin({
95
96
  key: pluginKey,
96
97
  state: {
97
98
  init: (_, state) => getInitialPluginState(options, state),
98
- apply: (tr, pluginState, _oldState, newState) => {
99
+ apply: (tr, pluginState, oldState, newState) => {
100
+ var _tr$getMeta, _pluginKey$getState;
101
+ const isResizing = editorExperiment('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = pluginKey.getState(oldState)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.isResizing : false;
99
102
  if (tr.docChanged || tr.selectionSet) {
100
103
  const maybeLayoutSection = getMaybeLayoutSection(newState);
101
104
  const newPluginState = {
102
105
  ...pluginState,
103
106
  pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
107
+ isResizing,
104
108
  selectedLayout: getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node,
105
109
  // Ignored via go/ees005
106
110
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -108,7 +112,10 @@ export default (options => new SafePlugin({
108
112
  };
109
113
  return newPluginState;
110
114
  }
111
- return pluginState;
115
+ return {
116
+ ...pluginState,
117
+ isResizing
118
+ };
112
119
  }
113
120
  },
114
121
  props: {
@@ -1,3 +1,5 @@
1
+ import { GapCursorSelection } from '@atlaskit/editor-common/selection';
2
+ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
1
3
  import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
2
4
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
3
5
  export const getMaybeLayoutSection = state => {
@@ -14,4 +16,41 @@ export const getMaybeLayoutSection = state => {
14
16
 
15
17
  // When selection is on layoutColumn, we want to hide floating toolbar, hence don't return layoutSection node here
16
18
  return isLayoutColumn ? undefined : findParentNodeOfType(layoutSection)(selection) || findSelectedNodeOfType([layoutSection])(selection);
19
+ };
20
+
21
+ /**
22
+ * The depth of the layout column inside the layout section.
23
+ * As per the current implementation, the layout column ALWAYS has a depth of 1.
24
+ */
25
+ const LAYOUT_COLUMN_DEPTH = 1;
26
+
27
+ /**
28
+ * This helper function is used to select a position inside a layout section.
29
+ * @param view editor view instance
30
+ * @param posOfLayout the starting position of the layout
31
+ * @param childIndex the index of the child node in the layout section
32
+ * @returns Transaction or undefined
33
+ */
34
+ export const selectIntoLayout = (view, posOfLayout, childIndex = 0) => {
35
+ var _$maybeLayoutSection$;
36
+ const $maybeLayoutSection = view.state.doc.resolve(posOfLayout);
37
+ if (((_$maybeLayoutSection$ = $maybeLayoutSection.nodeAfter) === null || _$maybeLayoutSection$ === void 0 ? void 0 : _$maybeLayoutSection$.type.name) === 'layoutSection') {
38
+ var _layoutSectionNode$fi;
39
+ // $maybeLayoutSection.posAtIndex(1, 1);
40
+ const layoutSectionNode = $maybeLayoutSection.nodeAfter;
41
+
42
+ // check if the childIndex is valid
43
+ if (childIndex < 0 || childIndex >= layoutSectionNode.childCount) {
44
+ return;
45
+ }
46
+ const childPos = $maybeLayoutSection.posAtIndex(childIndex, LAYOUT_COLUMN_DEPTH);
47
+ const tr = view.state.tr;
48
+ const $selectionPos = tr.doc.resolve(childPos);
49
+ if (((_layoutSectionNode$fi = layoutSectionNode.firstChild) === null || _layoutSectionNode$fi === void 0 ? void 0 : _layoutSectionNode$fi.type.name) === 'paragraph') {
50
+ view.dispatch(tr.setSelection(TextSelection.near($selectionPos)));
51
+ } else {
52
+ view.dispatch(tr.setSelection(GapCursorSelection.near($selectionPos)));
53
+ }
54
+ return tr;
55
+ }
17
56
  };
@@ -56,8 +56,10 @@ export var layoutPlugin = function layoutPlugin(_ref) {
56
56
  pos = _ref3.pos,
57
57
  allowBreakout = _ref3.allowBreakout,
58
58
  addSidebarLayouts = _ref3.addSidebarLayouts,
59
- allowSingleColumnLayout = _ref3.allowSingleColumnLayout;
60
- if (pos !== null) {
59
+ allowSingleColumnLayout = _ref3.allowSingleColumnLayout,
60
+ isResizing = _ref3.isResizing;
61
+ var shouldHideToolbar = isResizing && editorExperiment('single_column_layouts', true);
62
+ if (pos !== null && !shouldHideToolbar) {
61
63
  return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, allowAdvancedSingleColumnLayout, api);
62
64
  }
63
65
  return undefined;
@@ -11,6 +11,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
11
11
  import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
12
12
  import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
13
13
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
14
+ import { selectIntoLayout } from '../pm-plugins/utils';
14
15
  var isEmptyParagraph = function isEmptyParagraph(node) {
15
16
  return !!node && node.type.name === 'paragraph' && !node.childCount;
16
17
  };
@@ -58,6 +59,17 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
58
59
  guidelines: guidelines
59
60
  });
60
61
  }, [pluginInjectionApi, view]);
62
+
63
+ // we want to hide the floating toolbar for other nodes.
64
+ // e.g. info panel inside the current layout section
65
+ var selectIntoCurrentLayout = useCallback(function () {
66
+ var pos = getPos();
67
+ if (pos === undefined) {
68
+ return;
69
+ }
70
+ // put the selection into the first column of the layout
71
+ selectIntoLayout(view, pos, 0);
72
+ }, [getPos, view]);
61
73
  return /*#__PURE__*/React.createElement(BreakoutResizer, {
62
74
  getRef: forwardRef,
63
75
  getPos: getPos,
@@ -68,7 +80,10 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
68
80
  parentRef: parentRef,
69
81
  editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
70
82
  displayGuidelines: editorExperiment('single_column_layouts', true) ? displayGuidelines : undefined,
71
- displayGapCursor: displayGapCursor
83
+ displayGapCursor: displayGapCursor,
84
+ onResizeStart: function onResizeStart() {
85
+ selectIntoCurrentLayout();
86
+ }
72
87
  });
73
88
  };
74
89
  var toDOM = function toDOM() {
@@ -61,7 +61,8 @@ var getInitialPluginState = function getInitialPluginState(options, state) {
61
61
  allowBreakout: allowBreakout,
62
62
  addSidebarLayouts: addSidebarLayouts,
63
63
  selectedLayout: selectedLayout,
64
- allowSingleColumnLayout: allowSingleColumnLayout
64
+ allowSingleColumnLayout: allowSingleColumnLayout,
65
+ isResizing: false
65
66
  };
66
67
  };
67
68
 
@@ -96,11 +97,14 @@ export default (function (options) {
96
97
  init: function init(_, state) {
97
98
  return getInitialPluginState(options, state);
98
99
  },
99
- apply: function apply(tr, pluginState, _oldState, newState) {
100
+ apply: function apply(tr, pluginState, oldState, newState) {
101
+ var _tr$getMeta, _pluginKey$getState;
102
+ var isResizing = editorExperiment('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = pluginKey.getState(oldState)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.isResizing : false;
100
103
  if (tr.docChanged || tr.selectionSet) {
101
104
  var maybeLayoutSection = getMaybeLayoutSection(newState);
102
105
  var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
103
106
  pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
107
+ isResizing: isResizing,
104
108
  selectedLayout: getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node,
105
109
  // Ignored via go/ees005
106
110
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -108,7 +112,9 @@ export default (function (options) {
108
112
  });
109
113
  return newPluginState;
110
114
  }
111
- return pluginState;
115
+ return _objectSpread(_objectSpread({}, pluginState), {}, {
116
+ isResizing: isResizing
117
+ });
112
118
  }
113
119
  },
114
120
  props: {
@@ -1,3 +1,5 @@
1
+ import { GapCursorSelection } from '@atlaskit/editor-common/selection';
2
+ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
1
3
  import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
2
4
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
3
5
  export var getMaybeLayoutSection = function getMaybeLayoutSection(state) {
@@ -9,4 +11,42 @@ export var getMaybeLayoutSection = function getMaybeLayoutSection(state) {
9
11
 
10
12
  // When selection is on layoutColumn, we want to hide floating toolbar, hence don't return layoutSection node here
11
13
  return isLayoutColumn ? undefined : findParentNodeOfType(layoutSection)(selection) || findSelectedNodeOfType([layoutSection])(selection);
14
+ };
15
+
16
+ /**
17
+ * The depth of the layout column inside the layout section.
18
+ * As per the current implementation, the layout column ALWAYS has a depth of 1.
19
+ */
20
+ var LAYOUT_COLUMN_DEPTH = 1;
21
+
22
+ /**
23
+ * This helper function is used to select a position inside a layout section.
24
+ * @param view editor view instance
25
+ * @param posOfLayout the starting position of the layout
26
+ * @param childIndex the index of the child node in the layout section
27
+ * @returns Transaction or undefined
28
+ */
29
+ export var selectIntoLayout = function selectIntoLayout(view, posOfLayout) {
30
+ var _$maybeLayoutSection$;
31
+ var childIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
32
+ var $maybeLayoutSection = view.state.doc.resolve(posOfLayout);
33
+ if (((_$maybeLayoutSection$ = $maybeLayoutSection.nodeAfter) === null || _$maybeLayoutSection$ === void 0 ? void 0 : _$maybeLayoutSection$.type.name) === 'layoutSection') {
34
+ var _layoutSectionNode$fi;
35
+ // $maybeLayoutSection.posAtIndex(1, 1);
36
+ var layoutSectionNode = $maybeLayoutSection.nodeAfter;
37
+
38
+ // check if the childIndex is valid
39
+ if (childIndex < 0 || childIndex >= layoutSectionNode.childCount) {
40
+ return;
41
+ }
42
+ var childPos = $maybeLayoutSection.posAtIndex(childIndex, LAYOUT_COLUMN_DEPTH);
43
+ var tr = view.state.tr;
44
+ var $selectionPos = tr.doc.resolve(childPos);
45
+ if (((_layoutSectionNode$fi = layoutSectionNode.firstChild) === null || _layoutSectionNode$fi === void 0 ? void 0 : _layoutSectionNode$fi.type.name) === 'paragraph') {
46
+ view.dispatch(tr.setSelection(TextSelection.near($selectionPos)));
47
+ } else {
48
+ view.dispatch(tr.setSelection(GapCursorSelection.near($selectionPos)));
49
+ }
50
+ return tr;
51
+ }
12
52
  };
@@ -6,6 +6,7 @@ export type LayoutState = {
6
6
  addSidebarLayouts: boolean;
7
7
  selectedLayout: PresetLayout | undefined;
8
8
  allowSingleColumnLayout: boolean;
9
+ isResizing: boolean;
9
10
  };
10
11
  export type Change = {
11
12
  from: number;
@@ -1,3 +1,12 @@
1
- import type { EditorState } from '@atlaskit/editor-prosemirror/state';
1
+ import { type EditorState } from '@atlaskit/editor-prosemirror/state';
2
2
  import { type ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
3
+ import { EditorView } from '@atlaskit/editor-prosemirror/view';
3
4
  export declare const getMaybeLayoutSection: (state: EditorState) => ContentNodeWithPos | undefined;
5
+ /**
6
+ * This helper function is used to select a position inside a layout section.
7
+ * @param view editor view instance
8
+ * @param posOfLayout the starting position of the layout
9
+ * @param childIndex the index of the child node in the layout section
10
+ * @returns Transaction or undefined
11
+ */
12
+ export declare const selectIntoLayout: (view: EditorView, posOfLayout: number, childIndex?: number) => import("prosemirror-state").Transaction | undefined;
@@ -6,6 +6,7 @@ export type LayoutState = {
6
6
  addSidebarLayouts: boolean;
7
7
  selectedLayout: PresetLayout | undefined;
8
8
  allowSingleColumnLayout: boolean;
9
+ isResizing: boolean;
9
10
  };
10
11
  export type Change = {
11
12
  from: number;
@@ -1,3 +1,12 @@
1
- import type { EditorState } from '@atlaskit/editor-prosemirror/state';
1
+ import { type EditorState } from '@atlaskit/editor-prosemirror/state';
2
2
  import { type ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
3
+ import { EditorView } from '@atlaskit/editor-prosemirror/view';
3
4
  export declare const getMaybeLayoutSection: (state: EditorState) => ContentNodeWithPos | undefined;
5
+ /**
6
+ * This helper function is used to select a position inside a layout section.
7
+ * @param view editor view instance
8
+ * @param posOfLayout the starting position of the layout
9
+ * @param childIndex the index of the child node in the layout section
10
+ * @returns Transaction or undefined
11
+ */
12
+ export declare const selectIntoLayout: (view: EditorView, posOfLayout: number, childIndex?: number) => import("prosemirror-state").Transaction | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-layout",
3
- "version": "2.4.4",
3
+ "version": "2.5.0",
4
4
  "description": "Layout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,7 +34,7 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@atlaskit/adf-schema": "^47.6.0",
37
- "@atlaskit/editor-common": "^103.4.0",
37
+ "@atlaskit/editor-common": "^103.7.0",
38
38
  "@atlaskit/editor-plugin-analytics": "^2.2.0",
39
39
  "@atlaskit/editor-plugin-decorations": "^2.0.0",
40
40
  "@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
@@ -43,9 +43,9 @@
43
43
  "@atlaskit/editor-plugin-width": "^3.0.0",
44
44
  "@atlaskit/editor-prosemirror": "7.0.0",
45
45
  "@atlaskit/editor-shared-styles": "^3.4.0",
46
- "@atlaskit/icon": "^25.5.0",
46
+ "@atlaskit/icon": "^25.6.0",
47
47
  "@atlaskit/platform-feature-flags": "^1.1.0",
48
- "@atlaskit/tmp-editor-statsig": "^4.6.0",
48
+ "@atlaskit/tmp-editor-statsig": "^4.8.0",
49
49
  "@atlaskit/tokens": "^4.7.0",
50
50
  "@babel/runtime": "^7.0.0",
51
51
  "@emotion/react": "^11.7.1"