@atlaskit/editor-plugin-block-controls 1.4.14 → 1.4.15

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 +9 -0
  2. package/dist/cjs/ui/drag-handle.js +1 -1
  3. package/dist/cjs/ui/drag-preview.js +19 -3
  4. package/dist/es2019/ui/drag-handle.js +1 -1
  5. package/dist/es2019/ui/drag-preview.js +19 -3
  6. package/dist/esm/ui/drag-handle.js +1 -1
  7. package/dist/esm/ui/drag-preview.js +19 -3
  8. package/dist/types/ui/drag-preview.d.ts +1 -1
  9. package/dist/types-ts4.5/ui/drag-preview.d.ts +1 -1
  10. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 1.4.15
4
+
5
+ ### Patch Changes
6
+
7
+ - [#110434](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110434)
8
+ [`fca2ac7c4fb70`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fca2ac7c4fb70) -
9
+ [ux] Show generic drag preview when dragging an embed node
10
+ - Updated dependencies
11
+
3
12
  ## 1.4.14
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/ui/drag-handle.js CHANGED
@@ -114,7 +114,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
114
114
  if (!dom) {
115
115
  return;
116
116
  }
117
- return (0, _dragPreview.dragPreview)(container, dom);
117
+ return (0, _dragPreview.dragPreview)(container, dom, nodeType);
118
118
  },
119
119
  nativeSetDragImage: nativeSetDragImage
120
120
  });
package/dist/cjs/ui/drag-preview.js CHANGED
@@ -4,7 +4,15 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.dragPreview = void 0;
7
- var dragPreview = exports.dragPreview = function dragPreview(container, dom) {
7
+ //
8
+ var previewStyle = {
9
+ borderColor: "var(--ds-border-focused, #388BFF)",
10
+ borderStyle: 'solid',
11
+ borderRadius: "var(--ds-border-radius-100, 4px)",
12
+ borderWidth: "var(--ds-border-width-outline, 2px)",
13
+ backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
14
+ };
15
+ var dragPreview = exports.dragPreview = function dragPreview(container, dom, nodeType) {
8
16
  var rect = dom.getBoundingClientRect();
9
17
  container.style.width = "".concat(rect.width, "px");
10
18
  container.style.height = "".concat(rect.height, "px");
@@ -12,15 +20,23 @@ var dragPreview = exports.dragPreview = function dragPreview(container, dom) {
12
20
  var parent = document.createElement('div');
13
21
  // ProseMirror class is required to make sure the cloned dom is styled correctly
14
22
  parent.classList.add('ProseMirror');
15
- parent.style.opacity = '0.3';
23
+ var isEmbedCard = nodeType === 'embedCard';
24
+ if (isEmbedCard) {
25
+ parent.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(previewStyle.borderColor);
26
+ parent.style.borderRadius = previewStyle.borderRadius;
27
+ parent.style.backgroundColor = previewStyle.backgroundColor;
28
+ parent.style.height = '100%';
29
+ parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
30
+ }
16
31
  var resizer = dom.querySelector('.resizer-item');
17
- var clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(true);
32
+ var clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!isEmbedCard);
18
33
 
19
34
  // Remove any margin from the cloned element to ensure is doesn't position incorrectly
20
35
  clonedDom.style.marginLeft = '0';
21
36
  clonedDom.style.marginTop = '0';
22
37
  clonedDom.style.marginRight = '0';
23
38
  clonedDom.style.marginBottom = '0';
39
+ clonedDom.style.opacity = '0.4';
24
40
  parent.appendChild(clonedDom);
25
41
  container.appendChild(parent);
26
42
  var scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');
package/dist/es2019/ui/drag-handle.js CHANGED
@@ -108,7 +108,7 @@ export const DragHandle = ({
108
108
  if (!dom) {
109
109
  return;
110
110
  }
111
- return dragPreview(container, dom);
111
+ return dragPreview(container, dom, nodeType);
112
112
  },
113
113
  nativeSetDragImage
114
114
  });
package/dist/es2019/ui/drag-preview.js CHANGED
@@ -1,4 +1,12 @@
1
- export const dragPreview = (container, dom) => {
1
+ //
2
+ const previewStyle = {
3
+ borderColor: "var(--ds-border-focused, #388BFF)",
4
+ borderStyle: 'solid',
5
+ borderRadius: "var(--ds-border-radius-100, 4px)",
6
+ borderWidth: "var(--ds-border-width-outline, 2px)",
7
+ backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
8
+ };
9
+ export const dragPreview = (container, dom, nodeType) => {
2
10
  const rect = dom.getBoundingClientRect();
3
11
  container.style.width = `${rect.width}px`;
4
12
  container.style.height = `${rect.height}px`;
@@ -6,15 +14,23 @@ export const dragPreview = (container, dom) => {
6
14
  const parent = document.createElement('div');
7
15
  // ProseMirror class is required to make sure the cloned dom is styled correctly
8
16
  parent.classList.add('ProseMirror');
9
- parent.style.opacity = '0.3';
17
+ const isEmbedCard = nodeType === 'embedCard';
18
+ if (isEmbedCard) {
19
+ parent.style.border = `${previewStyle.borderWidth} ${previewStyle.borderStyle} ${previewStyle.borderColor}`;
20
+ parent.style.borderRadius = previewStyle.borderRadius;
21
+ parent.style.backgroundColor = previewStyle.backgroundColor;
22
+ parent.style.height = '100%';
23
+ parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
24
+ }
10
25
  const resizer = dom.querySelector('.resizer-item');
11
- const clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(true);
26
+ const clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!isEmbedCard);
12
27
 
13
28
  // Remove any margin from the cloned element to ensure is doesn't position incorrectly
14
29
  clonedDom.style.marginLeft = '0';
15
30
  clonedDom.style.marginTop = '0';
16
31
  clonedDom.style.marginRight = '0';
17
32
  clonedDom.style.marginBottom = '0';
33
+ clonedDom.style.opacity = '0.4';
18
34
  parent.appendChild(clonedDom);
19
35
  container.appendChild(parent);
20
36
  const scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');
package/dist/esm/ui/drag-handle.js CHANGED
@@ -106,7 +106,7 @@ export var DragHandle = function DragHandle(_ref) {
106
106
  if (!dom) {
107
107
  return;
108
108
  }
109
- return dragPreview(container, dom);
109
+ return dragPreview(container, dom, nodeType);
110
110
  },
111
111
  nativeSetDragImage: nativeSetDragImage
112
112
  });
package/dist/esm/ui/drag-preview.js CHANGED
@@ -1,4 +1,12 @@
1
- export var dragPreview = function dragPreview(container, dom) {
1
+ //
2
+ var previewStyle = {
3
+ borderColor: "var(--ds-border-focused, #388BFF)",
4
+ borderStyle: 'solid',
5
+ borderRadius: "var(--ds-border-radius-100, 4px)",
6
+ borderWidth: "var(--ds-border-width-outline, 2px)",
7
+ backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
8
+ };
9
+ export var dragPreview = function dragPreview(container, dom, nodeType) {
2
10
  var rect = dom.getBoundingClientRect();
3
11
  container.style.width = "".concat(rect.width, "px");
4
12
  container.style.height = "".concat(rect.height, "px");
@@ -6,15 +14,23 @@ export var dragPreview = function dragPreview(container, dom) {
6
14
  var parent = document.createElement('div');
7
15
  // ProseMirror class is required to make sure the cloned dom is styled correctly
8
16
  parent.classList.add('ProseMirror');
9
- parent.style.opacity = '0.3';
17
+ var isEmbedCard = nodeType === 'embedCard';
18
+ if (isEmbedCard) {
19
+ parent.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(previewStyle.borderColor);
20
+ parent.style.borderRadius = previewStyle.borderRadius;
21
+ parent.style.backgroundColor = previewStyle.backgroundColor;
22
+ parent.style.height = '100%';
23
+ parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
24
+ }
10
25
  var resizer = dom.querySelector('.resizer-item');
11
- var clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(true);
26
+ var clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!isEmbedCard);
12
27
 
13
28
  // Remove any margin from the cloned element to ensure is doesn't position incorrectly
14
29
  clonedDom.style.marginLeft = '0';
15
30
  clonedDom.style.marginTop = '0';
16
31
  clonedDom.style.marginRight = '0';
17
32
  clonedDom.style.marginBottom = '0';
33
+ clonedDom.style.opacity = '0.4';
18
34
  parent.appendChild(clonedDom);
19
35
  container.appendChild(parent);
20
36
  var scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');
package/dist/types/ui/drag-preview.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const dragPreview: (container: HTMLElement, dom: HTMLElement) => () => HTMLElement;
1
+ export declare const dragPreview: (container: HTMLElement, dom: HTMLElement, nodeType: string) => () => HTMLElement;
package/dist/types-ts4.5/ui/drag-preview.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const dragPreview: (container: HTMLElement, dom: HTMLElement) => () => HTMLElement;
1
+ export declare const dragPreview: (container: HTMLElement, dom: HTMLElement, nodeType: string) => () => HTMLElement;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "1.4.14",
3
+ "version": "1.4.15",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -31,7 +31,7 @@
31
31
  ".": "./src/index.ts"
32
32
  },
33
33
  "dependencies": {
34
- "@atlaskit/editor-common": "^82.3.0",
34
+ "@atlaskit/editor-common": "^82.4.0",
35
35
  "@atlaskit/editor-plugin-editor-disabled": "^1.1.5",
36
36
  "@atlaskit/editor-plugin-feature-flags": "^1.1.0",
37
37
  "@atlaskit/editor-plugin-width": "^1.1.0",