@atlaskit/editor-plugin-block-controls 8.10.3 → 8.12.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.
Files changed (10) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/pm-plugins/decorations-find-surrounding-nodes.js +5 -1
  3. package/dist/cjs/ui/drop-target.js +11 -2
  4. package/dist/es2019/pm-plugins/decorations-find-surrounding-nodes.js +5 -1
  5. package/dist/es2019/ui/drop-target.js +11 -2
  6. package/dist/esm/pm-plugins/decorations-find-surrounding-nodes.js +5 -1
  7. package/dist/esm/ui/drop-target.js +11 -2
  8. package/dist/types/blockControlsPluginType.d.ts +2 -3
  9. package/dist/types-ts4.5/blockControlsPluginType.d.ts +2 -3
  10. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 8.12.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`c78234abd2778`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c78234abd2778) -
8
+ EDITOR-5792 fix drop target for sync blocks
9
+
10
+ ## 8.11.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`b5390019c2609`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b5390019c2609) -
15
+ Optimizations for node visibility for remix button checks
16
+
17
+ ### Patch Changes
18
+
19
+ - Updated dependencies
20
+
3
21
  ## 8.10.3
4
22
 
5
23
  ### Patch Changes
package/dist/cjs/pm-plugins/decorations-find-surrounding-nodes.js CHANGED
@@ -4,8 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.findSurroundingNodes = void 0;
7
+ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
7
8
  var IGNORE_NODES = ['tableRow', 'listItem', 'caption', 'media'];
8
9
  var blockLeafNodes = ['blockCard', 'rule', 'extension'];
10
+ var blockLeafNodeNext = ['blockCard', 'rule', 'extension', 'syncBlock'];
9
11
  var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
10
12
 
11
13
  /**
@@ -19,7 +21,9 @@ var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
19
21
  */
20
22
  var _findSurroundingNodes = exports.findSurroundingNodes = function findSurroundingNodes(state, $pos, nodeType) {
21
23
  var depth = $pos.depth;
22
- var blockLeafNodeList = blockLeafNodes;
24
+ var blockLeafNodeList = (0, _experiments.editorExperiment)('platform_synced_block_patch_6', true, {
25
+ exposure: true
26
+ }) ? blockLeafNodeNext : blockLeafNodes;
23
27
 
24
28
  // special cases like hr rule here
25
29
  if (blockLeafNodeList.includes(nodeType || '') || $pos.pos === 0) {
package/dist/cjs/ui/drop-target.js CHANGED
@@ -70,6 +70,15 @@ var nestedDropZoneStyle = (0, _react2.css)({
70
70
  width: 'unset'
71
71
  });
72
72
  var enableDropZone = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard'];
73
+ var enableDropZoneNext = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard', 'syncBlock'];
74
+ var getEnableDropZone = function getEnableDropZone() {
75
+ if ((0, _experiments.editorExperiment)('platform_synced_block_patch_6', true, {
76
+ exposure: true
77
+ })) {
78
+ return enableDropZoneNext;
79
+ }
80
+ return enableDropZone;
81
+ };
73
82
 
74
83
  // This z index is used in container like layout
75
84
  var fullHeightStyleAdjustZIndexStyle = (0, _react2.css)({
@@ -122,7 +131,7 @@ var HoverZone = function HoverZone(_ref) {
122
131
  var hoverZoneUpperStyle = (0, _react.useMemo)(function () {
123
132
  var heightStyleOffset = "var(--editor-block-controls-drop-indicator-gap, 0)/2";
124
133
  var transformOffset = "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, ", 0)");
125
- var heightStyle = anchorName && enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? (0, _anchorUtils.isAnchorSupported)() ? "calc(anchor-size(".concat(anchorName, " height)/2 + ").concat(heightStyleOffset, ")") : "calc(".concat(((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2, "px + ").concat(heightStyleOffset, ")") : '4px';
134
+ var heightStyle = anchorName && getEnableDropZone().includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? (0, _anchorUtils.isAnchorSupported)() ? "calc(anchor-size(".concat(anchorName, " height)/2 + ").concat(heightStyleOffset, ")") : "calc(".concat(((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2, "px + ").concat(heightStyleOffset, ")") : '4px';
126
135
  var transform = position === 'upper' ? "translateY(calc(-100% + ".concat(transformOffset, "))") : "translateY(".concat(transformOffset, ")");
127
136
  return (0, _react2.css)({
128
137
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
@@ -147,7 +156,7 @@ var HoverZone = function HoverZone(_ref) {
147
156
  var _anchorName = node ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos || -1)) || '' : (0, _decorationsCommon.getNodeAnchor)(node) : '';
148
157
  var top = 'unset';
149
158
  if (_anchorName) {
150
- var enabledDropZone = enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '');
159
+ var enabledDropZone = getEnableDropZone().includes((node === null || node === void 0 ? void 0 : node.type.name) || '');
151
160
  if ((0, _anchorUtils.isAnchorSupported)()) {
152
161
  top = enabledDropZone ? "calc(anchor(".concat(_anchorName, " 50%))") : "calc(anchor(".concat(_anchorName, " bottom) - 4px)");
153
162
  } else if (anchorRectCache) {
package/dist/es2019/pm-plugins/decorations-find-surrounding-nodes.js CHANGED
@@ -1,5 +1,7 @@
1
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
1
2
  const IGNORE_NODES = ['tableRow', 'listItem', 'caption', 'media'];
2
3
  const blockLeafNodes = ['blockCard', 'rule', 'extension'];
4
+ const blockLeafNodeNext = ['blockCard', 'rule', 'extension', 'syncBlock'];
3
5
  const DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
4
6
 
5
7
  /**
@@ -13,7 +15,9 @@ const DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
13
15
  */
14
16
  export const findSurroundingNodes = (state, $pos, nodeType) => {
15
17
  const depth = $pos.depth;
16
- const blockLeafNodeList = blockLeafNodes;
18
+ const blockLeafNodeList = editorExperiment('platform_synced_block_patch_6', true, {
19
+ exposure: true
20
+ }) ? blockLeafNodeNext : blockLeafNodes;
17
21
 
18
22
  // special cases like hr rule here
19
23
  if (blockLeafNodeList.includes(nodeType || '') || $pos.pos === 0) {
package/dist/es2019/ui/drop-target.js CHANGED
@@ -60,6 +60,15 @@ const nestedDropZoneStyle = css({
60
60
  width: 'unset'
61
61
  });
62
62
  const enableDropZone = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard'];
63
+ const enableDropZoneNext = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard', 'syncBlock'];
64
+ const getEnableDropZone = () => {
65
+ if (editorExperiment('platform_synced_block_patch_6', true, {
66
+ exposure: true
67
+ })) {
68
+ return enableDropZoneNext;
69
+ }
70
+ return enableDropZone;
71
+ };
63
72
 
64
73
  // This z index is used in container like layout
65
74
  const fullHeightStyleAdjustZIndexStyle = css({
@@ -110,7 +119,7 @@ const HoverZone = ({
110
119
  const hoverZoneUpperStyle = useMemo(() => {
111
120
  const heightStyleOffset = `var(--editor-block-controls-drop-indicator-gap, 0)/2`;
112
121
  const transformOffset = `var(${EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET}, 0)`;
113
- const heightStyle = anchorName && enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? isAnchorSupported() ? `calc(anchor-size(${anchorName} height)/2 + ${heightStyleOffset})` : `calc(${((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2}px + ${heightStyleOffset})` : '4px';
122
+ const heightStyle = anchorName && getEnableDropZone().includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? isAnchorSupported() ? `calc(anchor-size(${anchorName} height)/2 + ${heightStyleOffset})` : `calc(${((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2}px + ${heightStyleOffset})` : '4px';
114
123
  const transform = position === 'upper' ? `translateY(calc(-100% + ${transformOffset}))` : `translateY(${transformOffset})`;
115
124
  return css({
116
125
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
@@ -135,7 +144,7 @@ const HoverZone = ({
135
144
  const anchorName = node ? expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos || -1)) || '' : getNodeAnchor(node) : '';
136
145
  let top = 'unset';
137
146
  if (anchorName) {
138
- const enabledDropZone = enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '');
147
+ const enabledDropZone = getEnableDropZone().includes((node === null || node === void 0 ? void 0 : node.type.name) || '');
139
148
  if (isAnchorSupported()) {
140
149
  top = enabledDropZone ? `calc(anchor(${anchorName} 50%))` : `calc(anchor(${anchorName} bottom) - 4px)`;
141
150
  } else if (anchorRectCache) {
package/dist/esm/pm-plugins/decorations-find-surrounding-nodes.js CHANGED
@@ -1,5 +1,7 @@
1
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
1
2
  var IGNORE_NODES = ['tableRow', 'listItem', 'caption', 'media'];
2
3
  var blockLeafNodes = ['blockCard', 'rule', 'extension'];
4
+ var blockLeafNodeNext = ['blockCard', 'rule', 'extension', 'syncBlock'];
3
5
  var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
4
6
 
5
7
  /**
@@ -13,7 +15,9 @@ var DISABLE_CHILD_DROP_TARGET = ['orderedList', 'bulletList'];
13
15
  */
14
16
  var _findSurroundingNodes = function findSurroundingNodes(state, $pos, nodeType) {
15
17
  var depth = $pos.depth;
16
- var blockLeafNodeList = blockLeafNodes;
18
+ var blockLeafNodeList = editorExperiment('platform_synced_block_patch_6', true, {
19
+ exposure: true
20
+ }) ? blockLeafNodeNext : blockLeafNodes;
17
21
 
18
22
  // special cases like hr rule here
19
23
  if (blockLeafNodeList.includes(nodeType || '') || $pos.pos === 0) {
package/dist/esm/ui/drop-target.js CHANGED
@@ -62,6 +62,15 @@ var nestedDropZoneStyle = css({
62
62
  width: 'unset'
63
63
  });
64
64
  var enableDropZone = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard'];
65
+ var enableDropZoneNext = ['paragraph', 'mediaSingle', 'heading', 'codeBlock', 'decisionList', 'bulletList', 'orderedList', 'taskList', 'extension', 'blockCard', 'syncBlock'];
66
+ var getEnableDropZone = function getEnableDropZone() {
67
+ if (editorExperiment('platform_synced_block_patch_6', true, {
68
+ exposure: true
69
+ })) {
70
+ return enableDropZoneNext;
71
+ }
72
+ return enableDropZone;
73
+ };
65
74
 
66
75
  // This z index is used in container like layout
67
76
  var fullHeightStyleAdjustZIndexStyle = css({
@@ -114,7 +123,7 @@ var HoverZone = function HoverZone(_ref) {
114
123
  var hoverZoneUpperStyle = useMemo(function () {
115
124
  var heightStyleOffset = "var(--editor-block-controls-drop-indicator-gap, 0)/2";
116
125
  var transformOffset = "var(".concat(EDITOR_BLOCK_CONTROLS_DROP_INDICATOR_OFFSET, ", 0)");
117
- var heightStyle = anchorName && enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? isAnchorSupported() ? "calc(anchor-size(".concat(anchorName, " height)/2 + ").concat(heightStyleOffset, ")") : "calc(".concat(((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2, "px + ").concat(heightStyleOffset, ")") : '4px';
126
+ var heightStyle = anchorName && getEnableDropZone().includes((node === null || node === void 0 ? void 0 : node.type.name) || '') ? isAnchorSupported() ? "calc(anchor-size(".concat(anchorName, " height)/2 + ").concat(heightStyleOffset, ")") : "calc(".concat(((anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchorName)) || 0) / 2, "px + ").concat(heightStyleOffset, ")") : '4px';
118
127
  var transform = position === 'upper' ? "translateY(calc(-100% + ".concat(transformOffset, "))") : "translateY(".concat(transformOffset, ")");
119
128
  return css({
120
129
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
@@ -139,7 +148,7 @@ var HoverZone = function HoverZone(_ref) {
139
148
  var _anchorName = node ? expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(node, pos || -1)) || '' : getNodeAnchor(node) : '';
140
149
  var top = 'unset';
141
150
  if (_anchorName) {
142
- var enabledDropZone = enableDropZone.includes((node === null || node === void 0 ? void 0 : node.type.name) || '');
151
+ var enabledDropZone = getEnableDropZone().includes((node === null || node === void 0 ? void 0 : node.type.name) || '');
143
152
  if (isAnchorSupported()) {
144
153
  top = enabledDropZone ? "calc(anchor(".concat(_anchorName, " 50%))") : "calc(anchor(".concat(_anchorName, " bottom) - 4px)");
145
154
  } else if (anchorRectCache) {
package/dist/types/blockControlsPluginType.d.ts CHANGED
@@ -111,7 +111,6 @@ export type HandleOptions = {
111
111
  } | undefined;
112
112
  /**
113
113
  * Props passed to custom right-edge button components (e.g. config.rightEdgeButton).
114
- * Used by malleable-ui for BlockRemixButton when rendered via node decoration.
115
114
  */
116
115
  export type RightEdgeButtonProps = {
117
116
  api: PublicPluginAPI<[BlockControlsPlugin]>;
@@ -132,13 +131,13 @@ export type NodeDecorationFactoryParams = {
132
131
  */
133
132
  export type NodeDecorationFactory = {
134
133
  create: (params: NodeDecorationFactoryParams) => Decoration;
135
- /** Show this decoration in view mode when hovering over a block */
136
- showInViewMode?: boolean;
137
134
  /**
138
135
  * Optional filter: when false, the decoration is not created.
139
136
  * Use for node-type-specific visibility (e.g. Remix button only on remixable blocks).
140
137
  */
141
138
  shouldCreate?: (params: NodeDecorationFactoryParams) => boolean;
139
+ /** Show this decoration in view mode when hovering over a block */
140
+ showInViewMode?: boolean;
142
141
  type: string;
143
142
  };
144
143
  export type MoveNode = (start: number, to: number, inputMethod?: MoveNodeMethod, formatMessage?: IntlShape['formatMessage']) => EditorCommand;
package/dist/types-ts4.5/blockControlsPluginType.d.ts CHANGED
@@ -111,7 +111,6 @@ export type HandleOptions = {
111
111
  } | undefined;
112
112
  /**
113
113
  * Props passed to custom right-edge button components (e.g. config.rightEdgeButton).
114
- * Used by malleable-ui for BlockRemixButton when rendered via node decoration.
115
114
  */
116
115
  export type RightEdgeButtonProps = {
117
116
  api: PublicPluginAPI<[
@@ -134,13 +133,13 @@ export type NodeDecorationFactoryParams = {
134
133
  */
135
134
  export type NodeDecorationFactory = {
136
135
  create: (params: NodeDecorationFactoryParams) => Decoration;
137
- /** Show this decoration in view mode when hovering over a block */
138
- showInViewMode?: boolean;
139
136
  /**
140
137
  * Optional filter: when false, the decoration is not created.
141
138
  * Use for node-type-specific visibility (e.g. Remix button only on remixable blocks).
142
139
  */
143
140
  shouldCreate?: (params: NodeDecorationFactoryParams) => boolean;
141
+ /** Show this decoration in view mode when hovering over a block */
142
+ showInViewMode?: boolean;
144
143
  type: string;
145
144
  };
146
145
  export type MoveNode = (start: number, to: number, inputMethod?: MoveNodeMethod, formatMessage?: IntlShape['formatMessage']) => EditorCommand;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "8.10.3",
3
+ "version": "8.12.0",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -39,7 +39,7 @@
39
39
  "@atlaskit/editor-plugin-limited-mode": "^4.0.0",
40
40
  "@atlaskit/editor-plugin-metrics": "^8.0.0",
41
41
  "@atlaskit/editor-plugin-quick-insert": "^7.5.0",
42
- "@atlaskit/editor-plugin-selection": "^7.0.0",
42
+ "@atlaskit/editor-plugin-selection": "^7.1.0",
43
43
  "@atlaskit/editor-plugin-toolbar": "^4.1.0",
44
44
  "@atlaskit/editor-plugin-type-ahead": "^7.0.0",
45
45
  "@atlaskit/editor-plugin-user-intent": "^5.0.0",
@@ -56,8 +56,8 @@
56
56
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
57
57
  "@atlaskit/primitives": "^18.0.0",
58
58
  "@atlaskit/theme": "^22.0.0",
59
- "@atlaskit/tmp-editor-statsig": "^35.2.0",
60
- "@atlaskit/tokens": "^11.0.0",
59
+ "@atlaskit/tmp-editor-statsig": "^35.6.0",
60
+ "@atlaskit/tokens": "^11.1.0",
61
61
  "@atlaskit/tooltip": "^20.14.0",
62
62
  "@babel/runtime": "^7.0.0",
63
63
  "@emotion/react": "^11.7.1",
@@ -67,7 +67,7 @@
67
67
  "uuid": "^3.1.0"
68
68
  },
69
69
  "peerDependencies": {
70
- "@atlaskit/editor-common": "^111.30.0",
70
+ "@atlaskit/editor-common": "^111.33.0",
71
71
  "react": "^18.2.0",
72
72
  "react-dom": "^18.2.0",
73
73
  "react-intl-next": "npm:react-intl@^5.18.1"