@atlaskit/editor-plugin-block-controls 2.13.11 → 2.13.13

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 (34) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/commands/move-to-layout.js +50 -32
  3. package/dist/cjs/consts.js +3 -2
  4. package/dist/cjs/plugin.js +5 -16
  5. package/dist/cjs/pm-plugins/decorations-anchor.js +4 -3
  6. package/dist/cjs/ui/global-styles.js +86 -122
  7. package/dist/es2019/commands/move-to-layout.js +42 -23
  8. package/dist/es2019/consts.js +2 -1
  9. package/dist/es2019/plugin.js +1 -10
  10. package/dist/es2019/pm-plugins/decorations-anchor.js +4 -3
  11. package/dist/es2019/ui/global-styles.js +23 -20
  12. package/dist/esm/commands/move-to-layout.js +51 -33
  13. package/dist/esm/consts.js +2 -1
  14. package/dist/esm/plugin.js +5 -16
  15. package/dist/esm/pm-plugins/decorations-anchor.js +4 -3
  16. package/dist/esm/ui/global-styles.js +87 -122
  17. package/dist/types/consts.d.ts +1 -0
  18. package/dist/types-ts4.5/consts.d.ts +1 -0
  19. package/package.json +4 -7
  20. package/dist/cjs/pm-plugins/empty-block-experiment.js +0 -46
  21. package/dist/cjs/ui/empty-block-experiment/global-styles.js +0 -66
  22. package/dist/cjs/ui/empty-block-experiment/widget.js +0 -144
  23. package/dist/es2019/pm-plugins/empty-block-experiment.js +0 -38
  24. package/dist/es2019/ui/empty-block-experiment/global-styles.js +0 -77
  25. package/dist/es2019/ui/empty-block-experiment/widget.js +0 -138
  26. package/dist/esm/pm-plugins/empty-block-experiment.js +0 -40
  27. package/dist/esm/ui/empty-block-experiment/global-styles.js +0 -58
  28. package/dist/esm/ui/empty-block-experiment/widget.js +0 -133
  29. package/dist/types/pm-plugins/empty-block-experiment.d.ts +0 -13
  30. package/dist/types/ui/empty-block-experiment/global-styles.d.ts +0 -4
  31. package/dist/types/ui/empty-block-experiment/widget.d.ts +0 -13
  32. package/dist/types-ts4.5/pm-plugins/empty-block-experiment.d.ts +0 -13
  33. package/dist/types-ts4.5/ui/empty-block-experiment/global-styles.d.ts +0 -4
  34. package/dist/types-ts4.5/ui/empty-block-experiment/widget.d.ts +0 -13
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 2.13.13
4
+
5
+ ### Patch Changes
6
+
7
+ - [#164606](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/164606)
8
+ [`34e9782c56a3f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/34e9782c56a3f) -
9
+ tidy platform_editor_empty_line_prompt experiment
10
+ - [#163518](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163518)
11
+ [`0c4fc567f6cfd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0c4fc567f6cfd) -
12
+ ED-25705 fix sticky header
13
+ - Updated dependencies
14
+
15
+ ## 2.13.12
16
+
17
+ ### Patch Changes
18
+
19
+ - [#163103](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163103)
20
+ [`ec14916563763`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ec14916563763) -
21
+ [ux] [ED-25060] Implement drag and drop a layout column to another layout section
22
+
3
23
  ## 2.13.11
4
24
 
5
25
  ### Patch Changes
@@ -33,26 +33,19 @@ var createNewLayout = function createNewLayout(schema, layoutContents) {
33
33
  }
34
34
  return null;
35
35
  };
36
- var updateColumnWidths = function updateColumnWidths(tr, layoutNode, layoutNodePos, newColumnWidth) {
36
+ var updateColumnWidths = function updateColumnWidths(tr, layoutNode, layoutNodePos, childCount) {
37
+ var newColumnWidth = _consts2.DEFAULT_COLUMN_DISTRIBUTIONS[childCount];
37
38
  if (newColumnWidth) {
38
39
  layoutNode.content.forEach(function (node, offset) {
39
40
  if (node.type.name === 'layoutColumn') {
40
- tr = tr.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
41
+ tr.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
41
42
  }
42
43
  });
43
44
  }
44
- return tr;
45
- };
46
-
47
- /**
48
- * Insert a node into an existing layout at position `to` and delete the node
49
- */
50
- var moveNode = function moveNode(from, to, newNode, sourceNodeSize, tr) {
51
- tr.insert(to, newNode).setSelection(new _state.NodeSelection(tr.doc.resolve(to))).scrollIntoView();
52
- var mappedFrom = tr.mapping.map(from);
53
- var mappedFromEnd = mappedFrom + sourceNodeSize;
54
- tr.delete(mappedFrom, mappedFromEnd);
55
- return tr;
45
+ return {
46
+ newColumnWidth: newColumnWidth,
47
+ tr: tr
48
+ };
56
49
  };
57
50
  var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos, sourceNode, from, to, tr, isSameLayout) {
58
51
  if (isSameLayout) {
@@ -61,16 +54,41 @@ var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos,
61
54
  var mappedTo = tr.mapping.map(to);
62
55
  tr.insert(mappedTo, sourceNode).setSelection(new _state.NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
63
56
  } else if (toLayout.childCount < (0, _consts.maxLayoutColumnSupported)()) {
64
- var newColumnWidth = _consts2.DEFAULT_COLUMN_DISTRIBUTIONS[toLayout.childCount + 1];
65
- updateColumnWidths(tr, toLayout, toLayoutPos, newColumnWidth);
66
- var _ref2 = tr.doc.type.schema.nodes || {},
67
- layoutColumn = _ref2.layoutColumn;
68
- moveNode(from, to, layoutColumn.create({
69
- width: newColumnWidth
70
- }, sourceNode), sourceNode.nodeSize, tr);
57
+ insertToDestination(tr, to, sourceNode, toLayout, toLayoutPos);
58
+ var mappedFrom = tr.mapping.map(from);
59
+ removeFromSource(tr, tr.doc.resolve(mappedFrom));
71
60
  }
72
61
  return tr;
73
62
  };
63
+ var removeFromSource = function removeFromSource(tr, $from) {
64
+ var sourceNode = $from.nodeAfter;
65
+ var sourceParent = $from.parent;
66
+ if (!sourceNode) {
67
+ return tr;
68
+ }
69
+ var sourceNodeEndPos = $from.pos + sourceNode.nodeSize;
70
+ if (sourceNode.type.name === 'layoutColumn') {
71
+ if (sourceParent.childCount === _consts.MIN_LAYOUT_COLUMN) {
72
+ tr.delete($from.pos + 1, sourceNodeEndPos - 1);
73
+ return tr;
74
+ } else {
75
+ updateColumnWidths(tr, $from.parent, $from.before($from.depth), sourceParent.childCount - 1);
76
+ }
77
+ }
78
+ tr.delete($from.pos, sourceNodeEndPos);
79
+ return tr;
80
+ };
81
+ var insertToDestination = function insertToDestination(tr, to, sourceNode, toLayout, toLayoutPos) {
82
+ var _ref2 = updateColumnWidths(tr, toLayout, toLayoutPos, toLayout.childCount + 1) || {},
83
+ newColumnWidth = _ref2.newColumnWidth;
84
+ var _ref3 = tr.doc.type.schema.nodes || {},
85
+ layoutColumn = _ref3.layoutColumn;
86
+ var content = layoutColumn.createChecked({
87
+ width: newColumnWidth
88
+ }, sourceNode.type.name === 'layoutColumn' ? sourceNode.content : sourceNode);
89
+ tr.insert(to, content).setSelection(new _state.NodeSelection(tr.doc.resolve(to))).scrollIntoView();
90
+ return tr;
91
+ };
74
92
 
75
93
  /**
76
94
  * Check if the node at `from` can be moved to node at `to` to create/expand a layout.
@@ -80,10 +98,10 @@ var canMoveToLayout = function canMoveToLayout(from, to, tr) {
80
98
  if (from === to) {
81
99
  return;
82
100
  }
83
- var _ref3 = tr.doc.type.schema.nodes || {},
84
- layoutSection = _ref3.layoutSection,
85
- layoutColumn = _ref3.layoutColumn,
86
- doc = _ref3.doc;
101
+ var _ref4 = tr.doc.type.schema.nodes || {},
102
+ layoutSection = _ref4.layoutSection,
103
+ layoutColumn = _ref4.layoutColumn,
104
+ doc = _ref4.doc;
87
105
 
88
106
  // layout plugin does not exist
89
107
  if (!layoutSection || !layoutColumn) {
@@ -112,8 +130,8 @@ var canMoveToLayout = function canMoveToLayout(from, to, tr) {
112
130
  };
113
131
  var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
114
132
  return function (from, to, options) {
115
- return function (_ref4) {
116
- var tr = _ref4.tr;
133
+ return function (_ref5) {
134
+ var tr = _ref5.tr;
117
135
  var canMove = canMoveToLayout(from, to, tr);
118
136
  if (!canMove) {
119
137
  return tr;
@@ -122,11 +140,11 @@ var moveToLayout = exports.moveToLayout = function moveToLayout(api) {
122
140
  fromNode = canMove.fromNode,
123
141
  $from = canMove.$from,
124
142
  $to = canMove.$to;
125
- var _ref5 = tr.doc.type.schema.nodes || {},
126
- layoutSection = _ref5.layoutSection,
127
- layoutColumn = _ref5.layoutColumn;
128
- var _ref6 = tr.doc.type.schema.marks || {},
129
- breakout = _ref6.breakout;
143
+ var _ref6 = tr.doc.type.schema.nodes || {},
144
+ layoutSection = _ref6.layoutSection,
145
+ layoutColumn = _ref6.layoutColumn;
146
+ var _ref7 = tr.doc.type.schema.marks || {},
147
+ breakout = _ref7.breakout;
130
148
  var fromNodeWithoutBreakout = fromNode;
131
149
 
132
150
  // remove breakout from node;
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.maxLayoutColumnSupported = exports.DIRECTION = void 0;
6
+ exports.maxLayoutColumnSupported = exports.MIN_LAYOUT_COLUMN = exports.DIRECTION = void 0;
7
7
  var _advancedLayoutsFlags = require("./utils/advanced-layouts-flags");
8
8
  var DIRECTION = exports.DIRECTION = /*#__PURE__*/function (DIRECTION) {
9
9
  DIRECTION["UP"] = "up";
@@ -14,4 +14,5 @@ var DIRECTION = exports.DIRECTION = /*#__PURE__*/function (DIRECTION) {
14
14
  }({});
15
15
  var maxLayoutColumnSupported = exports.maxLayoutColumnSupported = function maxLayoutColumnSupported() {
16
16
  return (0, _advancedLayoutsFlags.isPreRelease2)() ? 5 : 3;
17
- };
17
+ };
18
+ var MIN_LAYOUT_COLUMN = exports.MIN_LAYOUT_COLUMN = 2;
@@ -5,13 +5,10 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.blockControlsPlugin = void 0;
8
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
8
  var _react = _interopRequireDefault(require("react"));
10
9
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
- var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
12
10
  var _moveNode = require("./commands/move-node");
13
11
  var _moveToLayout = require("./commands/move-to-layout");
14
- var _emptyBlockExperiment = require("./pm-plugins/empty-block-experiment");
15
12
  var _main = require("./pm-plugins/main");
16
13
  var _dragHandleMenu = require("./ui/drag-handle-menu");
17
14
  var _globalStyles = require("./ui/global-styles");
@@ -27,22 +24,14 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
27
24
  var getIntl = _ref2.getIntl;
28
25
  return (0, _main.createPlugin)(api, getIntl);
29
26
  }
30
- }].concat((0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_empty_line_prompt', true, {
31
- exposure: true
32
- }) ? [{
33
- name: 'emptyBlockExperimentPlugin',
34
- plugin: function plugin(_ref3) {
35
- var getIntl = _ref3.getIntl;
36
- return (0, _emptyBlockExperiment.createEmptyBlockExperimentPlugin)(api, getIntl);
37
- }
38
- }] : []));
27
+ }];
39
28
  },
40
29
  commands: {
41
30
  moveNode: (0, _moveNode.moveNode)(api),
42
31
  moveToLayout: (0, _moveToLayout.moveToLayout)(api),
43
32
  showDragHandleAt: function showDragHandleAt(pos, anchorName, nodeType, handleOptions) {
44
- return function (_ref4) {
45
- var tr = _ref4.tr;
33
+ return function (_ref3) {
34
+ var tr = _ref3.tr;
46
35
  tr.setMeta(_main.key, {
47
36
  activeNode: {
48
37
  pos: pos,
@@ -55,8 +44,8 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
55
44
  };
56
45
  },
57
46
  setNodeDragged: function setNodeDragged(getPos, anchorName, nodeType) {
58
- return function (_ref5) {
59
- var tr = _ref5.tr;
47
+ return function (_ref4) {
48
+ var tr = _ref4.tr;
60
49
  var pos = getPos();
61
50
  if (pos === undefined) {
62
51
  return tr;
@@ -33,8 +33,8 @@ var shouldIgnoreNode = function shouldIgnoreNode(node, ignore_nodes, depth, pare
33
33
 
34
34
  // TODO use isWrappedMedia when clean up the feature flag
35
35
  var isMediaSingle = 'mediaSingle' === node.type.name && (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1');
36
- var isFirstTableHeaderOrTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && ['tableHeader', 'tableRow'].includes(node.type.name) && (0, _advancedLayoutsFlags.isPreRelease1)();
37
- if (isFirstTableHeaderOrTableRow) {
36
+ var isFirstTableRow = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'table' && depth === 1 && node === parent.firstChild && 'tableRow' === node.type.name && (0, _advancedLayoutsFlags.isPreRelease1)();
37
+ if (isFirstTableRow) {
38
38
  return false;
39
39
  }
40
40
  return (isEmbedCard || isMediaSingle) && ['wrap-right', 'wrap-left'].includes(node.attrs.layout) ? true : ignore_nodes.includes(node.type.name);
@@ -95,8 +95,9 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
95
95
  var _anchorName2;
96
96
  anchorName = (_anchorName2 = anchorName) !== null && _anchorName2 !== void 0 ? _anchorName2 : "--node-anchor-".concat(node.type.name, "-").concat(index);
97
97
  }
98
+ var anchorStyles = ['tableRow', 'media'].includes(node.type.name) ? "anchor-name: ".concat(anchorName, ";") : "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 && !(0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? 'margin-top: 0px;' : '', " ").concat((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;');
98
99
  decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (_Decoration$node = {
99
- style: "anchor-name: ".concat(anchorName, "; ").concat(pos === 0 && !(0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? 'margin-top: 0px;' : '', " ").concat((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? '' : 'position: relative; z-index: 1;')
100
+ style: anchorStyles
100
101
  }, (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-anchor-name', anchorName), (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-node-type', node.type.name), (0, _defineProperty2.default)(_Decoration$node, 'data-drag-handler-anchor-depth', "".concat(depth)), _Decoration$node), {
101
102
  type: _decorationsCommon.TYPE_NODE_DEC,
102
103
  anchorName: anchorName,
@@ -11,122 +11,94 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
11
11
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
12
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
13
13
  var _consts = require("./consts");
14
- var _globalStyles = require("./empty-block-experiment/global-styles");
15
14
  /**
16
15
  * @jsxRuntime classic
17
16
  * @jsx jsx
18
17
  */
19
18
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
20
19
 
20
+ /**
21
+ * This anchor element selector disregards anchors that are solely utilized for size measurements,
22
+ * including those within table rows and media.
23
+ */
24
+ var dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
21
25
  var extendedHoverZone = function extendedHoverZone() {
22
- return (0, _react.css)({
23
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
24
- '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
25
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
26
- display: 'none !important'
27
- },
28
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
29
- '.ProseMirror': {
30
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
31
- '&& [data-drag-handler-anchor-name]::after': {
32
- content: '""',
33
- position: 'absolute',
34
- top: 0,
35
- left: '-100%',
36
- width: '100%',
37
- height: '100%',
38
- background: 'transparent',
39
- cursor: 'default',
40
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
41
- zIndex: -1
42
- }
43
- },
44
- // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
45
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
46
- 'hr[data-drag-handler-anchor-name]': {
47
- overflow: 'visible'
48
- },
49
- //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
50
- '[data-blocks-drag-handle-container="true"] + *::after': {
51
- display: 'none'
52
- }
53
- });
26
+ var _css;
27
+ return (0, _react.css)((_css = {}, (0, _defineProperty2.default)(_css, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
28
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
29
+ display: 'none !important'
30
+ }), (0, _defineProperty2.default)(_css, '.ProseMirror', (0, _defineProperty2.default)({}, "&& ".concat(dragHandlerAnchorSelector, "::after"), {
31
+ content: '""',
32
+ position: 'absolute',
33
+ top: 0,
34
+ left: '-100%',
35
+ width: '100%',
36
+ height: '100%',
37
+ background: 'transparent',
38
+ cursor: 'default',
39
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
40
+ zIndex: -1
41
+ })), (0, _defineProperty2.default)(_css, 'hr[data-drag-handler-anchor-name]', {
42
+ overflow: 'visible'
43
+ }), (0, _defineProperty2.default)(_css, '[data-blocks-drag-handle-container="true"] + *::after', {
44
+ display: 'none'
45
+ }), _css));
54
46
  };
55
47
  var extendedHoverZoneNested = function extendedHoverZoneNested() {
56
- return (0, _react.css)({
57
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
58
- '.block-ctrl-drag-preview [data-drag-handler-anchor-name]::after': {
59
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
60
- display: 'none !important'
61
- },
62
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
63
- '.ProseMirror': {
64
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
65
- '&& [data-drag-handler-anchor-name]::after': {
66
- content: '""',
67
- position: 'absolute',
68
- top: 0,
69
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
70
- left: "-".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
71
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
72
- width: "".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
73
- height: '100%',
74
- cursor: 'default',
75
- zIndex: 1
76
- },
77
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
78
- '&& [data-drag-handler-anchor-depth="0"][data-drag-handler-anchor-name]::after': {
79
- content: '""',
80
- position: 'absolute',
81
- top: 0,
82
- left: '-100%',
83
- width: '100%',
84
- height: '100%',
85
- cursor: 'default',
86
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
87
- zIndex: -1
88
- },
89
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
90
- '&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > [data-drag-handler-anchor-name]::after': {
91
- content: '""',
92
- position: 'absolute',
93
- top: 0,
94
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
95
- left: "-".concat((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
96
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
97
- width: "".concat((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
98
- height: '100%',
99
- cursor: 'default',
100
- zIndex: 1
101
- },
102
- // hover zone for layout column should be placed near the top of the column (where drag handle is)
103
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
104
- '&& [data-drag-handler-anchor-name][data-layout-column]::after': {
105
- content: '""',
106
- position: 'absolute',
107
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
108
- top: "".concat(-_consts.DRAG_HANDLE_WIDTH / 2, "px"),
109
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
110
- left: 0,
111
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
112
- width: '100%',
113
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
114
- height: "".concat(_consts.DRAG_HANDLE_WIDTH, "px"),
115
- cursor: 'default',
116
- zIndex: 1
117
- }
118
- },
119
- // TODO - ED-23995 this style override needs to be moved to the Rule styles after FF cleanup - packages/editor/editor-common/src/styles/shared/rule.ts
120
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
121
- 'hr[data-drag-handler-anchor-name]': {
122
- overflow: 'visible'
123
- },
124
- //Hide pseudo element at top depth level. Leave for nested depths to prevent mouseover loop.
125
- //eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
126
- '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after': {
127
- display: 'none'
128
- }
129
- });
48
+ var _ProseMirror2, _css2;
49
+ return (0, _react.css)((_css2 = {}, (0, _defineProperty2.default)(_css2, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {
50
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
51
+ display: 'none !important'
52
+ }), (0, _defineProperty2.default)(_css2, '.ProseMirror', (_ProseMirror2 = {}, (0, _defineProperty2.default)(_ProseMirror2, "&& ".concat(dragHandlerAnchorSelector, "::after"), {
53
+ content: '""',
54
+ position: 'absolute',
55
+ top: 0,
56
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
57
+ left: "-".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
58
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
59
+ width: "".concat(_consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, "px"),
60
+ height: '100%',
61
+ cursor: 'default',
62
+ zIndex: 1
63
+ }), (0, _defineProperty2.default)(_ProseMirror2, "&& [data-drag-handler-anchor-depth=\"0\"]".concat(dragHandlerAnchorSelector, "::after"), {
64
+ content: '""',
65
+ position: 'absolute',
66
+ top: 0,
67
+ left: '-100%',
68
+ width: '100%',
69
+ height: '100%',
70
+ cursor: 'default',
71
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
72
+ zIndex: -1
73
+ }), (0, _defineProperty2.default)(_ProseMirror2, "&& :is(.pm-table-cell-content-wrap, .pm-table-header-content-wrap) > ".concat(dragHandlerAnchorSelector, "::after"), {
74
+ content: '""',
75
+ position: 'absolute',
76
+ top: 0,
77
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
78
+ left: "-".concat((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
79
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
80
+ width: "".concat((0, _experiments.editorExperiment)('table-nested-dnd', true) ? _consts.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP : 0, "px"),
81
+ height: '100%',
82
+ cursor: 'default',
83
+ zIndex: 1
84
+ }), (0, _defineProperty2.default)(_ProseMirror2, '&& [data-drag-handler-anchor-name][data-layout-column]::after', {
85
+ content: '""',
86
+ position: 'absolute',
87
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
88
+ top: "".concat(-_consts.DRAG_HANDLE_WIDTH / 2, "px"),
89
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
90
+ left: 0,
91
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
92
+ width: '100%',
93
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
94
+ height: "".concat(_consts.DRAG_HANDLE_WIDTH, "px"),
95
+ cursor: 'default',
96
+ zIndex: 1
97
+ }), _ProseMirror2)), (0, _defineProperty2.default)(_css2, 'hr[data-drag-handler-anchor-name]', {
98
+ overflow: 'visible'
99
+ }), (0, _defineProperty2.default)(_css2, '[data-blocks-drag-handle-container="true"] + [data-drag-handler-anchor-depth="0"]::after', {
100
+ display: 'none'
101
+ }), _css2));
130
102
  };
131
103
  var paragraphWithTrailingBreakAsOnlyChild = '+ :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
132
104
  var indentatedParagraphWithTrailingBreakAsOnlyChild = '+ div.fabric-editor-indentation-mark > :is(p, h1, h2, h3, h4, h5, h6) > .ProseMirror-trailingBreak:only-child';
@@ -211,21 +183,15 @@ var getTextNodeStyle = function getTextNodeStyle() {
211
183
  };
212
184
  var withRelativePosStyle = (0, _react.css)({
213
185
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
214
- '.ProseMirror': {
215
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
216
- '&& [data-drag-handler-anchor-name]': {
217
- position: 'relative'
218
- }
219
- }
186
+ '.ProseMirror': (0, _defineProperty2.default)({}, "&& ".concat(dragHandlerAnchorSelector), {
187
+ position: 'relative'
188
+ })
220
189
  });
221
190
  var withAnchorNameZindexStyle = (0, _react.css)({
222
191
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
223
- '.ProseMirror': {
224
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
225
- '&& [data-drag-handler-anchor-name]': {
226
- zIndex: 1
227
- }
228
- }
192
+ '.ProseMirror': (0, _defineProperty2.default)({}, "&& ".concat(dragHandlerAnchorSelector), {
193
+ zIndex: 1
194
+ })
229
195
  });
230
196
  var withAnchorNameZindexNestedStyle = (0, _react.css)({
231
197
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
@@ -238,8 +204,6 @@ var withAnchorNameZindexNestedStyle = (0, _react.css)({
238
204
  });
239
205
  var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper() {
240
206
  return (0, _react.jsx)(_react.Global, {
241
- styles: [globalStyles(), (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, (0, _experiments.editorExperiment)('platform_editor_empty_line_prompt', true, {
242
- exposure: false
243
- }) ? _globalStyles.emptyBlockExperimentGlobalStyles : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
207
+ styles: [globalStyles(), (0, _experiments.editorExperiment)('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), getTextNodeStyle(), withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_1') ? withDividerInPanelStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2') ? withFormatInLayoutStyleFix : undefined, (0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_3') ? [withRelativePosStyle, topLevelNodeMarginStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle] : undefined]
244
208
  });
245
209
  };
@@ -1,6 +1,6 @@
1
1
  import { Fragment } from '@atlaskit/editor-prosemirror/model';
2
2
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
3
- import { maxLayoutColumnSupported } from '../consts';
3
+ import { maxLayoutColumnSupported, MIN_LAYOUT_COLUMN } from '../consts';
4
4
  import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
5
5
  import { isInSameLayout } from '../utils/validation';
6
6
  const createNewLayout = (schema, layoutContents) => {
@@ -28,26 +28,19 @@ const createNewLayout = (schema, layoutContents) => {
28
28
  }
29
29
  return null;
30
30
  };
31
- const updateColumnWidths = (tr, layoutNode, layoutNodePos, newColumnWidth) => {
31
+ const updateColumnWidths = (tr, layoutNode, layoutNodePos, childCount) => {
32
+ const newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[childCount];
32
33
  if (newColumnWidth) {
33
34
  layoutNode.content.forEach((node, offset) => {
34
35
  if (node.type.name === 'layoutColumn') {
35
- tr = tr.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
36
+ tr.setNodeAttribute(layoutNodePos + offset + 1, 'width', newColumnWidth);
36
37
  }
37
38
  });
38
39
  }
39
- return tr;
40
- };
41
-
42
- /**
43
- * Insert a node into an existing layout at position `to` and delete the node
44
- */
45
- const moveNode = (from, to, newNode, sourceNodeSize, tr) => {
46
- tr.insert(to, newNode).setSelection(new NodeSelection(tr.doc.resolve(to))).scrollIntoView();
47
- const mappedFrom = tr.mapping.map(from);
48
- const mappedFromEnd = mappedFrom + sourceNodeSize;
49
- tr.delete(mappedFrom, mappedFromEnd);
50
- return tr;
40
+ return {
41
+ newColumnWidth,
42
+ tr
43
+ };
51
44
  };
52
45
  const moveToExistingLayout = (toLayout, toLayoutPos, sourceNode, from, to, tr, isSameLayout) => {
53
46
  if (isSameLayout) {
@@ -56,15 +49,41 @@ const moveToExistingLayout = (toLayout, toLayoutPos, sourceNode, from, to, tr, i
56
49
  const mappedTo = tr.mapping.map(to);
57
50
  tr.insert(mappedTo, sourceNode).setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
58
51
  } else if (toLayout.childCount < maxLayoutColumnSupported()) {
59
- const newColumnWidth = DEFAULT_COLUMN_DISTRIBUTIONS[toLayout.childCount + 1];
60
- updateColumnWidths(tr, toLayout, toLayoutPos, newColumnWidth);
61
- const {
62
- layoutColumn
63
- } = tr.doc.type.schema.nodes || {};
64
- moveNode(from, to, layoutColumn.create({
65
- width: newColumnWidth
66
- }, sourceNode), sourceNode.nodeSize, tr);
52
+ insertToDestination(tr, to, sourceNode, toLayout, toLayoutPos);
53
+ const mappedFrom = tr.mapping.map(from);
54
+ removeFromSource(tr, tr.doc.resolve(mappedFrom));
55
+ }
56
+ return tr;
57
+ };
58
+ const removeFromSource = (tr, $from) => {
59
+ const sourceNode = $from.nodeAfter;
60
+ const sourceParent = $from.parent;
61
+ if (!sourceNode) {
62
+ return tr;
67
63
  }
64
+ const sourceNodeEndPos = $from.pos + sourceNode.nodeSize;
65
+ if (sourceNode.type.name === 'layoutColumn') {
66
+ if (sourceParent.childCount === MIN_LAYOUT_COLUMN) {
67
+ tr.delete($from.pos + 1, sourceNodeEndPos - 1);
68
+ return tr;
69
+ } else {
70
+ updateColumnWidths(tr, $from.parent, $from.before($from.depth), sourceParent.childCount - 1);
71
+ }
72
+ }
73
+ tr.delete($from.pos, sourceNodeEndPos);
74
+ return tr;
75
+ };
76
+ const insertToDestination = (tr, to, sourceNode, toLayout, toLayoutPos) => {
77
+ const {
78
+ newColumnWidth
79
+ } = updateColumnWidths(tr, toLayout, toLayoutPos, toLayout.childCount + 1) || {};
80
+ const {
81
+ layoutColumn
82
+ } = tr.doc.type.schema.nodes || {};
83
+ const content = layoutColumn.createChecked({
84
+ width: newColumnWidth
85
+ }, sourceNode.type.name === 'layoutColumn' ? sourceNode.content : sourceNode);
86
+ tr.insert(to, content).setSelection(new NodeSelection(tr.doc.resolve(to))).scrollIntoView();
68
87
  return tr;
69
88
  };
70
89
 
@@ -8,4 +8,5 @@ export let DIRECTION = /*#__PURE__*/function (DIRECTION) {
8
8
  }({});
9
9
  export const maxLayoutColumnSupported = () => {
10
10
  return isPreRelease2() ? 5 : 3;
11
- };
11
+ };
12
+ export const MIN_LAYOUT_COLUMN = 2;
@@ -1,9 +1,7 @@
1
1
  import React from 'react';
2
2
  import { fg } from '@atlaskit/platform-feature-flags';
3
- import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
4
3
  import { moveNode } from './commands/move-node';
5
4
  import { moveToLayout } from './commands/move-to-layout';
6
- import { createEmptyBlockExperimentPlugin } from './pm-plugins/empty-block-experiment';
7
5
  import { createPlugin, key } from './pm-plugins/main';
8
6
  import { DragHandleMenu } from './ui/drag-handle-menu';
9
7
  import { GlobalStylesWrapper } from './ui/global-styles';
@@ -18,14 +16,7 @@ export const blockControlsPlugin = ({
18
16
  plugin: ({
19
17
  getIntl
20
18
  }) => createPlugin(api, getIntl)
21
- }, ...(editorExperiment('platform_editor_empty_line_prompt', true, {
22
- exposure: true
23
- }) ? [{
24
- name: 'emptyBlockExperimentPlugin',
25
- plugin: ({
26
- getIntl
27
- }) => createEmptyBlockExperimentPlugin(api, getIntl)
28
- }] : [])];
19
+ }];
29
20
  },
30
21
  commands: {
31
22
  moveNode: moveNode(api),