@atlaskit/editor-plugin-layout 31.0.6 → 31.0.7

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.
Files changed (8) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/pm-plugins/main.js +22 -4
  3. package/dist/cjs/ui/global-styles.js +4 -1
  4. package/dist/es2019/pm-plugins/main.js +26 -6
  5. package/dist/es2019/ui/global-styles.js +4 -1
  6. package/dist/esm/pm-plugins/main.js +23 -5
  7. package/dist/esm/ui/global-styles.js +4 -1
  8. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-plugin-layout
2
2
 
3
+ ## 31.0.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [`fcfc49f88a0ef`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fcfc49f88a0ef) -
8
+ Behind `platform_editor_improve_inp_batch_2`, replace the complex layout placeholder relational
9
+ selector with targeted paragraph decorations while preserving focus-only placeholder visibility.
10
+ - Updated dependencies
11
+
3
12
  ## 31.0.6
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -85,10 +85,28 @@ var moveCursorToNextColumn = function moveCursorToNextColumn(state, dispatch) {
85
85
  }
86
86
  return true;
87
87
  };
88
- var getNodeDecoration = function getNodeDecoration(pos, node) {
89
- return [_view2.Decoration.node(pos, pos + node.nodeSize, {
88
+ var EMPTY_LAYOUT_COLUMN_CLASS = 'pm-layout-column-empty';
89
+ var EMPTY_LAYOUT_COLUMN_NODE_SIZE = 4;
90
+ var getNodeDecorations = function getNodeDecorations(pos, node) {
91
+ var decorations = [_view2.Decoration.node(pos, pos + node.nodeSize, {
90
92
  class: 'selected'
91
93
  })];
94
+ if ((0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1') && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_improve_inp_batch_2')) {
95
+ node.forEach(function (column, columnOffset) {
96
+ if (column.type.name !== 'layoutColumn' || column.childCount !== 1 || column.nodeSize > EMPTY_LAYOUT_COLUMN_NODE_SIZE) {
97
+ return;
98
+ }
99
+ var paragraph = column.firstChild;
100
+ if (!paragraph || paragraph.marks.length > 0 || !(0, _utils.isEmptyParagraph)(paragraph)) {
101
+ return;
102
+ }
103
+ var paragraphPos = pos + columnOffset + 2;
104
+ decorations.push(_view2.Decoration.node(paragraphPos, paragraphPos + paragraph.nodeSize, {
105
+ class: EMPTY_LAYOUT_COLUMN_CLASS
106
+ }));
107
+ });
108
+ }
109
+ return decorations;
92
110
  };
93
111
  var getDangerPreviewDecorations = function getDangerPreviewDecorations(state, positions) {
94
112
  var _positions$flatMap;
@@ -282,7 +300,7 @@ var _default = exports.default = function _default(options, editorAnalyticsAPI)
282
300
  var isLayoutResizingPluginAvailable = _resizing.pluginKey.get(state) !== undefined;
283
301
  if ((0, _editorExperiment.editorExperiment)('advanced_layouts', true) && isLayoutResizingPluginAvailable && !(isViewMode() && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_disable_view_layout_resize'))) {
284
302
  var dividerDecorations = (0, _columnResizeDivider.getColumnDividerDecorations)(state, editorViewRef, editorAnalyticsAPI);
285
- var selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
303
+ var selectedDecorations = layoutState.pos !== null ? getNodeDecorations(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
286
304
  var _dangerPreviewDecorations = getDangerPreviewDecorations(state, layoutState.dangerPreviewLayoutColumnPositions);
287
305
  var allDecorations = [].concat((0, _toConsumableArray2.default)(selectedDecorations), (0, _toConsumableArray2.default)(dividerDecorations), (0, _toConsumableArray2.default)(_dangerPreviewDecorations));
288
306
  if (allDecorations.length > 0) {
@@ -292,7 +310,7 @@ var _default = exports.default = function _default(options, editorAnalyticsAPI)
292
310
  }
293
311
  var dangerPreviewDecorations = getDangerPreviewDecorations(state, layoutState.dangerPreviewLayoutColumnPositions);
294
312
  if (layoutState.pos !== null || dangerPreviewDecorations.length > 0) {
295
- var _selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
313
+ var _selectedDecorations = layoutState.pos !== null ? getNodeDecorations(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
296
314
  return _view2.DecorationSet.create(state.doc, [].concat((0, _toConsumableArray2.default)(_selectedDecorations), (0, _toConsumableArray2.default)(dangerPreviewDecorations)));
297
315
  }
298
316
  return undefined;
package/dist/cjs/ui/global-styles.js CHANGED
@@ -10,6 +10,7 @@ var _react = require("react");
10
10
  var _react2 = require("@emotion/react");
11
11
  var _reactIntl = require("react-intl");
12
12
  var _layout = require("@atlaskit/editor-common/messages/layout");
13
+ var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
13
14
  var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
14
15
  /**
15
16
  * @jsxRuntime classic
@@ -19,6 +20,7 @@ var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment"
19
20
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
20
21
 
21
22
  var PLACEHOLDER_SELECTOR = '.ProseMirror-focused .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)';
23
+ var PLACEHOLDER_SELECTOR_NEXT = '.ProseMirror-focused .pm-layout-column-empty';
22
24
  var layoutColumnDangerPreviewStyle = (0, _react2.css)({
23
25
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
24
26
  '.ProseMirror [data-layout-column].layout-column-danger-preview': {
@@ -32,7 +34,8 @@ var layoutColumnDangerPreviewStyle = (0, _react2.css)({
32
34
  });
33
35
  var getPlaceholderStyle = function getPlaceholderStyle(message) {
34
36
  if ((0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1')) {
35
- return (0, _react2.css)((0, _defineProperty2.default)({}, "".concat(PLACEHOLDER_SELECTOR), {
37
+ var placeholderSelector = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_improve_inp_batch_2') ? PLACEHOLDER_SELECTOR_NEXT : PLACEHOLDER_SELECTOR;
38
+ return (0, _react2.css)((0, _defineProperty2.default)({}, placeholderSelector, {
36
39
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
37
40
  '&::before': {
38
41
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -2,7 +2,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/edit
2
2
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
3
3
  import { createSelectionClickHandler, Side } from '@atlaskit/editor-common/selection';
4
4
  import { GapCursorSelection } from '@atlaskit/editor-common/selection/gap-cursor/selection';
5
- import { filterCommand as filter } from '@atlaskit/editor-common/utils';
5
+ import { filterCommand as filter, isEmptyParagraph } from '@atlaskit/editor-common/utils';
6
6
  import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
7
7
  import { Fragment } from '@atlaskit/editor-prosemirror/model';
8
8
  import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -81,9 +81,29 @@ const moveCursorToNextColumn = (state, dispatch) => {
81
81
  }
82
82
  return true;
83
83
  };
84
- const getNodeDecoration = (pos, node) => [Decoration.node(pos, pos + node.nodeSize, {
85
- class: 'selected'
86
- })];
84
+ const EMPTY_LAYOUT_COLUMN_CLASS = 'pm-layout-column-empty';
85
+ const EMPTY_LAYOUT_COLUMN_NODE_SIZE = 4;
86
+ const getNodeDecorations = (pos, node) => {
87
+ const decorations = [Decoration.node(pos, pos + node.nodeSize, {
88
+ class: 'selected'
89
+ })];
90
+ if (editorExperiment('platform_editor_controls', 'variant1') && isExperimentEnabled('platform_editor_improve_inp_batch_2')) {
91
+ node.forEach((column, columnOffset) => {
92
+ if (column.type.name !== 'layoutColumn' || column.childCount !== 1 || column.nodeSize > EMPTY_LAYOUT_COLUMN_NODE_SIZE) {
93
+ return;
94
+ }
95
+ const paragraph = column.firstChild;
96
+ if (!paragraph || paragraph.marks.length > 0 || !isEmptyParagraph(paragraph)) {
97
+ return;
98
+ }
99
+ const paragraphPos = pos + columnOffset + 2;
100
+ decorations.push(Decoration.node(paragraphPos, paragraphPos + paragraph.nodeSize, {
101
+ class: EMPTY_LAYOUT_COLUMN_CLASS
102
+ }));
103
+ });
104
+ }
105
+ return decorations;
106
+ };
87
107
  const getDangerPreviewDecorations = (state, positions) => {
88
108
  var _positions$flatMap;
89
109
  return (_positions$flatMap = positions === null || positions === void 0 ? void 0 : positions.flatMap(pos => {
@@ -279,7 +299,7 @@ export default ((options, editorAnalyticsAPI, isViewMode = () => false) => {
279
299
  const isLayoutResizingPluginAvailable = layoutResizingPluginKey.get(state) !== undefined;
280
300
  if (editorExperiment('advanced_layouts', true) && isLayoutResizingPluginAvailable && !(isViewMode() && isExperimentEnabled('platform_editor_disable_view_layout_resize'))) {
281
301
  const dividerDecorations = getColumnDividerDecorations(state, editorViewRef, editorAnalyticsAPI);
282
- const selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
302
+ const selectedDecorations = layoutState.pos !== null ? getNodeDecorations(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
283
303
  const dangerPreviewDecorations = getDangerPreviewDecorations(state, layoutState.dangerPreviewLayoutColumnPositions);
284
304
  const allDecorations = [...selectedDecorations, ...dividerDecorations, ...dangerPreviewDecorations];
285
305
  if (allDecorations.length > 0) {
@@ -289,7 +309,7 @@ export default ((options, editorAnalyticsAPI, isViewMode = () => false) => {
289
309
  }
290
310
  const dangerPreviewDecorations = getDangerPreviewDecorations(state, layoutState.dangerPreviewLayoutColumnPositions);
291
311
  if (layoutState.pos !== null || dangerPreviewDecorations.length > 0) {
292
- const selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
312
+ const selectedDecorations = layoutState.pos !== null ? getNodeDecorations(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
293
313
  return DecorationSet.create(state.doc, [...selectedDecorations, ...dangerPreviewDecorations]);
294
314
  }
295
315
  return undefined;
package/dist/es2019/ui/global-styles.js CHANGED
@@ -8,8 +8,10 @@ import { useMemo } from 'react';
8
8
  import { Global, css, jsx } from '@emotion/react';
9
9
  import { useIntl } from 'react-intl';
10
10
  import { toolbarMessages as messages } from '@atlaskit/editor-common/messages/layout';
11
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
11
12
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
12
13
  const PLACEHOLDER_SELECTOR = '.ProseMirror-focused .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)';
14
+ const PLACEHOLDER_SELECTOR_NEXT = '.ProseMirror-focused .pm-layout-column-empty';
13
15
  const layoutColumnDangerPreviewStyle = css({
14
16
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
15
17
  '.ProseMirror [data-layout-column].layout-column-danger-preview': {
@@ -23,10 +25,11 @@ const layoutColumnDangerPreviewStyle = css({
23
25
  });
24
26
  const getPlaceholderStyle = message => {
25
27
  if (editorExperiment('platform_editor_controls', 'variant1')) {
28
+ const placeholderSelector = isExperimentEnabled('platform_editor_improve_inp_batch_2') ? PLACEHOLDER_SELECTOR_NEXT : PLACEHOLDER_SELECTOR;
26
29
  return css({
27
30
  // when paragraph is the only child, and it only has a trailingBreak.
28
31
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
29
- [`${PLACEHOLDER_SELECTOR}`]: {
32
+ [placeholderSelector]: {
30
33
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
31
34
  '&::before': {
32
35
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
package/dist/esm/pm-plugins/main.js CHANGED
@@ -6,7 +6,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/edit
6
6
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
7
7
  import { createSelectionClickHandler, Side } from '@atlaskit/editor-common/selection';
8
8
  import { GapCursorSelection } from '@atlaskit/editor-common/selection/gap-cursor/selection';
9
- import { filterCommand as filter } from '@atlaskit/editor-common/utils';
9
+ import { filterCommand as filter, isEmptyParagraph } from '@atlaskit/editor-common/utils';
10
10
  import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
11
11
  import { Fragment } from '@atlaskit/editor-prosemirror/model';
12
12
  import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -78,10 +78,28 @@ var moveCursorToNextColumn = function moveCursorToNextColumn(state, dispatch) {
78
78
  }
79
79
  return true;
80
80
  };
81
- var getNodeDecoration = function getNodeDecoration(pos, node) {
82
- return [Decoration.node(pos, pos + node.nodeSize, {
81
+ var EMPTY_LAYOUT_COLUMN_CLASS = 'pm-layout-column-empty';
82
+ var EMPTY_LAYOUT_COLUMN_NODE_SIZE = 4;
83
+ var getNodeDecorations = function getNodeDecorations(pos, node) {
84
+ var decorations = [Decoration.node(pos, pos + node.nodeSize, {
83
85
  class: 'selected'
84
86
  })];
87
+ if (editorExperiment('platform_editor_controls', 'variant1') && isExperimentEnabled('platform_editor_improve_inp_batch_2')) {
88
+ node.forEach(function (column, columnOffset) {
89
+ if (column.type.name !== 'layoutColumn' || column.childCount !== 1 || column.nodeSize > EMPTY_LAYOUT_COLUMN_NODE_SIZE) {
90
+ return;
91
+ }
92
+ var paragraph = column.firstChild;
93
+ if (!paragraph || paragraph.marks.length > 0 || !isEmptyParagraph(paragraph)) {
94
+ return;
95
+ }
96
+ var paragraphPos = pos + columnOffset + 2;
97
+ decorations.push(Decoration.node(paragraphPos, paragraphPos + paragraph.nodeSize, {
98
+ class: EMPTY_LAYOUT_COLUMN_CLASS
99
+ }));
100
+ });
101
+ }
102
+ return decorations;
85
103
  };
86
104
  var getDangerPreviewDecorations = function getDangerPreviewDecorations(state, positions) {
87
105
  var _positions$flatMap;
@@ -275,7 +293,7 @@ export default (function (options, editorAnalyticsAPI) {
275
293
  var isLayoutResizingPluginAvailable = layoutResizingPluginKey.get(state) !== undefined;
276
294
  if (editorExperiment('advanced_layouts', true) && isLayoutResizingPluginAvailable && !(isViewMode() && isExperimentEnabled('platform_editor_disable_view_layout_resize'))) {
277
295
  var dividerDecorations = getColumnDividerDecorations(state, editorViewRef, editorAnalyticsAPI);
278
- var selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
296
+ var selectedDecorations = layoutState.pos !== null ? getNodeDecorations(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
279
297
  var _dangerPreviewDecorations = getDangerPreviewDecorations(state, layoutState.dangerPreviewLayoutColumnPositions);
280
298
  var allDecorations = [].concat(_toConsumableArray(selectedDecorations), _toConsumableArray(dividerDecorations), _toConsumableArray(_dangerPreviewDecorations));
281
299
  if (allDecorations.length > 0) {
@@ -285,7 +303,7 @@ export default (function (options, editorAnalyticsAPI) {
285
303
  }
286
304
  var dangerPreviewDecorations = getDangerPreviewDecorations(state, layoutState.dangerPreviewLayoutColumnPositions);
287
305
  if (layoutState.pos !== null || dangerPreviewDecorations.length > 0) {
288
- var _selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
306
+ var _selectedDecorations = layoutState.pos !== null ? getNodeDecorations(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
289
307
  return DecorationSet.create(state.doc, [].concat(_toConsumableArray(_selectedDecorations), _toConsumableArray(dangerPreviewDecorations)));
290
308
  }
291
309
  return undefined;
package/dist/esm/ui/global-styles.js CHANGED
@@ -9,8 +9,10 @@ import { useMemo } from 'react';
9
9
  import { Global, css, jsx } from '@emotion/react';
10
10
  import { useIntl } from 'react-intl';
11
11
  import { toolbarMessages as messages } from '@atlaskit/editor-common/messages/layout';
12
+ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
12
13
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
13
14
  var PLACEHOLDER_SELECTOR = '.ProseMirror-focused .layoutSectionView-content-wrap.selected [data-layout-column] > [data-layout-content] > p:only-child:has(.ProseMirror-trailingBreak:only-child)';
15
+ var PLACEHOLDER_SELECTOR_NEXT = '.ProseMirror-focused .pm-layout-column-empty';
14
16
  var layoutColumnDangerPreviewStyle = css({
15
17
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
16
18
  '.ProseMirror [data-layout-column].layout-column-danger-preview': {
@@ -24,7 +26,8 @@ var layoutColumnDangerPreviewStyle = css({
24
26
  });
25
27
  var getPlaceholderStyle = function getPlaceholderStyle(message) {
26
28
  if (editorExperiment('platform_editor_controls', 'variant1')) {
27
- return css(_defineProperty({}, "".concat(PLACEHOLDER_SELECTOR), {
29
+ var placeholderSelector = isExperimentEnabled('platform_editor_improve_inp_batch_2') ? PLACEHOLDER_SELECTOR_NEXT : PLACEHOLDER_SELECTOR;
30
+ return css(_defineProperty({}, placeholderSelector, {
28
31
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
29
32
  '&::before': {
30
33
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-layout",
3
- "version": "31.0.6",
3
+ "version": "31.0.7",
4
4
  "description": "Layout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -44,14 +44,14 @@
44
44
  "@atlaskit/icon-lab": "^7.11.0",
45
45
  "@atlaskit/platform-feature-experiments": "^0.3.0",
46
46
  "@atlaskit/platform-feature-flags": "^2.2.0",
47
- "@atlaskit/tmp-editor-statsig": "^251.0.0",
47
+ "@atlaskit/tmp-editor-statsig": "^252.0.0",
48
48
  "@atlaskit/tokens": "^20.9.0",
49
49
  "@babel/runtime": "^7.0.0",
50
50
  "@emotion/react": "^11.7.1",
51
51
  "bind-event-listener": "^3.0.0"
52
52
  },
53
53
  "peerDependencies": {
54
- "@atlaskit/editor-common": "^134.4.0",
54
+ "@atlaskit/editor-common": "^134.5.0",
55
55
  "react": "^18.2.0 || ^19.2.0",
56
56
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
57
57
  },
@@ -61,6 +61,7 @@
61
61
  }
62
62
  },
63
63
  "devDependencies": {
64
+ "@atlaskit/editor-common": "^134.5.0",
64
65
  "react": "^19.2.0",
65
66
  "react-intl": "^7.0.0"
66
67
  }