@atlaskit/editor-plugin-block-controls 1.4.26 → 1.4.27

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 +12 -0
  2. package/dist/cjs/pm-plugins/decorations.js +2 -0
  3. package/dist/cjs/ui/drag-preview.js +17 -14
  4. package/dist/es2019/pm-plugins/decorations.js +2 -0
  5. package/dist/es2019/ui/drag-preview.js +17 -14
  6. package/dist/esm/pm-plugins/decorations.js +2 -0
  7. package/dist/esm/ui/drag-preview.js +17 -14
  8. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 1.4.27
4
+
5
+ ### Patch Changes
6
+
7
+ - [#113232](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113232)
8
+ [`0a1d7a1348305`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0a1d7a1348305) -
9
+ [ux] Fix drag previews when media is nested in the node
10
+ - [#113423](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113423)
11
+ [`e22e9f7eadce7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e22e9f7eadce7) -
12
+ Fix text spliting when deleting paragraph
13
+ - Updated dependencies
14
+
3
15
  ## 1.4.26
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/pm-plugins/decorations.js CHANGED
@@ -113,6 +113,8 @@ var mouseMoveWrapperDecorations = exports.mouseMoveWrapperDecorations = function
113
113
  var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(pos, anchorName, nodeType, api) {
114
114
  return _view.Decoration.widget(pos, function (view, getPos) {
115
115
  var element = document.createElement('div');
116
+ // Need to set it to inline to avoid text being split when merging two paragraphs
117
+ element.style.display = 'inline';
116
118
  element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
117
119
  element.setAttribute('data-blocks-drag-handle-container', 'true');
118
120
  _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
package/dist/cjs/ui/drag-preview.js CHANGED
@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.dragPreview = void 0;
7
- //
7
+ var _colors = require("@atlaskit/theme/colors");
8
8
  var previewStyle = {
9
- borderColor: "var(--ds-border-focused, #388BFF)",
9
+ borderColor: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
10
10
  borderStyle: 'solid',
11
- borderRadius: "var(--ds-border-radius-100, 4px)",
11
+ borderRadius: "var(--ds-border-radius-100, 3px)",
12
12
  borderWidth: "var(--ds-border-width-outline, 2px)",
13
13
  backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
14
14
  };
@@ -21,23 +21,26 @@ var dragPreview = exports.dragPreview = function dragPreview(container, dom, nod
21
21
  // ProseMirror class is required to make sure the cloned dom is styled correctly
22
22
  parent.classList.add('ProseMirror');
23
23
  var shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension';
24
- if (shouldBeGenericPreview) {
24
+ var embedCard = dom.querySelector('.embedCardView-content-wrap');
25
+ if (shouldBeGenericPreview || embedCard) {
25
26
  parent.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(previewStyle.borderColor);
26
27
  parent.style.borderRadius = previewStyle.borderRadius;
27
28
  parent.style.backgroundColor = previewStyle.backgroundColor;
28
29
  parent.style.height = '100%';
29
30
  parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
30
- }
31
- var resizer = dom.querySelector('.resizer-item');
32
- var clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!shouldBeGenericPreview);
31
+ } else {
32
+ var resizer = dom.querySelector('.resizer-item');
33
+ var clonedDom = resizer && ['mediaSingle', 'table'].includes(nodeType) ? resizer.cloneNode(true) : dom.cloneNode(true);
33
34
 
34
- // Remove any margin from the cloned element to ensure is doesn't position incorrectly
35
- clonedDom.style.marginLeft = '0';
36
- clonedDom.style.marginTop = '0';
37
- clonedDom.style.marginRight = '0';
38
- clonedDom.style.marginBottom = '0';
39
- clonedDom.style.opacity = '0.4';
40
- parent.appendChild(clonedDom);
35
+ // Remove any margin from the cloned element to ensure is doesn't position incorrectly
36
+ clonedDom.style.marginLeft = '0';
37
+ clonedDom.style.marginTop = '0';
38
+ clonedDom.style.marginRight = '0';
39
+ clonedDom.style.marginBottom = '0';
40
+ clonedDom.style.opacity = '0.4';
41
+ clonedDom.style.boxShadow = 'none';
42
+ parent.appendChild(clonedDom);
43
+ }
41
44
  container.appendChild(parent);
42
45
  var scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');
43
46
  var scrollParentClassNames = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.className;
package/dist/es2019/pm-plugins/decorations.js CHANGED
@@ -106,6 +106,8 @@ export const mouseMoveWrapperDecorations = (newState, api) => {
106
106
  export const dragHandleDecoration = (pos, anchorName, nodeType, api) => {
107
107
  return Decoration.widget(pos, (view, getPos) => {
108
108
  const element = document.createElement('div');
109
+ // Need to set it to inline to avoid text being split when merging two paragraphs
110
+ element.style.display = 'inline';
109
111
  element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
110
112
  element.setAttribute('data-blocks-drag-handle-container', 'true');
111
113
  ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
package/dist/es2019/ui/drag-preview.js CHANGED
@@ -1,8 +1,8 @@
1
- //
1
+ import { B200 } from '@atlaskit/theme/colors';
2
2
  const previewStyle = {
3
- borderColor: "var(--ds-border-focused, #388BFF)",
3
+ borderColor: `var(--ds-border-focused, ${B200})`,
4
4
  borderStyle: 'solid',
5
- borderRadius: "var(--ds-border-radius-100, 4px)",
5
+ borderRadius: "var(--ds-border-radius-100, 3px)",
6
6
  borderWidth: "var(--ds-border-width-outline, 2px)",
7
7
  backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
8
8
  };
@@ -15,23 +15,26 @@ export const dragPreview = (container, dom, nodeType) => {
15
15
  // ProseMirror class is required to make sure the cloned dom is styled correctly
16
16
  parent.classList.add('ProseMirror');
17
17
  const shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension';
18
- if (shouldBeGenericPreview) {
18
+ const embedCard = dom.querySelector('.embedCardView-content-wrap');
19
+ if (shouldBeGenericPreview || embedCard) {
19
20
  parent.style.border = `${previewStyle.borderWidth} ${previewStyle.borderStyle} ${previewStyle.borderColor}`;
20
21
  parent.style.borderRadius = previewStyle.borderRadius;
21
22
  parent.style.backgroundColor = previewStyle.backgroundColor;
22
23
  parent.style.height = '100%';
23
24
  parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
24
- }
25
- const resizer = dom.querySelector('.resizer-item');
26
- const clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!shouldBeGenericPreview);
25
+ } else {
26
+ const resizer = dom.querySelector('.resizer-item');
27
+ const clonedDom = resizer && ['mediaSingle', 'table'].includes(nodeType) ? resizer.cloneNode(true) : dom.cloneNode(true);
27
28
 
28
- // Remove any margin from the cloned element to ensure is doesn't position incorrectly
29
- clonedDom.style.marginLeft = '0';
30
- clonedDom.style.marginTop = '0';
31
- clonedDom.style.marginRight = '0';
32
- clonedDom.style.marginBottom = '0';
33
- clonedDom.style.opacity = '0.4';
34
- parent.appendChild(clonedDom);
29
+ // Remove any margin from the cloned element to ensure is doesn't position incorrectly
30
+ clonedDom.style.marginLeft = '0';
31
+ clonedDom.style.marginTop = '0';
32
+ clonedDom.style.marginRight = '0';
33
+ clonedDom.style.marginBottom = '0';
34
+ clonedDom.style.opacity = '0.4';
35
+ clonedDom.style.boxShadow = 'none';
36
+ parent.appendChild(clonedDom);
37
+ }
35
38
  container.appendChild(parent);
36
39
  const scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');
37
40
  const scrollParentClassNames = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.className;
package/dist/esm/pm-plugins/decorations.js CHANGED
@@ -106,6 +106,8 @@ export var mouseMoveWrapperDecorations = function mouseMoveWrapperDecorations(ne
106
106
  export var dragHandleDecoration = function dragHandleDecoration(pos, anchorName, nodeType, api) {
107
107
  return Decoration.widget(pos, function (view, getPos) {
108
108
  var element = document.createElement('div');
109
+ // Need to set it to inline to avoid text being split when merging two paragraphs
110
+ element.style.display = 'inline';
109
111
  element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
110
112
  element.setAttribute('data-blocks-drag-handle-container', 'true');
111
113
  ReactDOM.render( /*#__PURE__*/createElement(DragHandle, {
package/dist/esm/ui/drag-preview.js CHANGED
@@ -1,8 +1,8 @@
1
- //
1
+ import { B200 } from '@atlaskit/theme/colors';
2
2
  var previewStyle = {
3
- borderColor: "var(--ds-border-focused, #388BFF)",
3
+ borderColor: "var(--ds-border-focused, ".concat(B200, ")"),
4
4
  borderStyle: 'solid',
5
- borderRadius: "var(--ds-border-radius-100, 4px)",
5
+ borderRadius: "var(--ds-border-radius-100, 3px)",
6
6
  borderWidth: "var(--ds-border-width-outline, 2px)",
7
7
  backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
8
8
  };
@@ -15,23 +15,26 @@ export var dragPreview = function dragPreview(container, dom, nodeType) {
15
15
  // ProseMirror class is required to make sure the cloned dom is styled correctly
16
16
  parent.classList.add('ProseMirror');
17
17
  var shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension';
18
- if (shouldBeGenericPreview) {
18
+ var embedCard = dom.querySelector('.embedCardView-content-wrap');
19
+ if (shouldBeGenericPreview || embedCard) {
19
20
  parent.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(previewStyle.borderColor);
20
21
  parent.style.borderRadius = previewStyle.borderRadius;
21
22
  parent.style.backgroundColor = previewStyle.backgroundColor;
22
23
  parent.style.height = '100%';
23
24
  parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
24
- }
25
- var resizer = dom.querySelector('.resizer-item');
26
- var clonedDom = resizer ? resizer.cloneNode(true) : dom.cloneNode(!shouldBeGenericPreview);
25
+ } else {
26
+ var resizer = dom.querySelector('.resizer-item');
27
+ var clonedDom = resizer && ['mediaSingle', 'table'].includes(nodeType) ? resizer.cloneNode(true) : dom.cloneNode(true);
27
28
 
28
- // Remove any margin from the cloned element to ensure is doesn't position incorrectly
29
- clonedDom.style.marginLeft = '0';
30
- clonedDom.style.marginTop = '0';
31
- clonedDom.style.marginRight = '0';
32
- clonedDom.style.marginBottom = '0';
33
- clonedDom.style.opacity = '0.4';
34
- parent.appendChild(clonedDom);
29
+ // Remove any margin from the cloned element to ensure is doesn't position incorrectly
30
+ clonedDom.style.marginLeft = '0';
31
+ clonedDom.style.marginTop = '0';
32
+ clonedDom.style.marginRight = '0';
33
+ clonedDom.style.marginBottom = '0';
34
+ clonedDom.style.opacity = '0.4';
35
+ clonedDom.style.boxShadow = 'none';
36
+ parent.appendChild(clonedDom);
37
+ }
35
38
  container.appendChild(parent);
36
39
  var scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');
37
40
  var scrollParentClassNames = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.className;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "1.4.26",
3
+ "version": "1.4.27",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -44,7 +44,8 @@
44
44
  "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
45
45
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
46
46
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
47
- "@atlaskit/tokens": "^1.51.0",
47
+ "@atlaskit/theme": "^12.11.0",
48
+ "@atlaskit/tokens": "^1.52.0",
48
49
  "@babel/runtime": "^7.0.0",
49
50
  "@emotion/react": "^11.7.1",
50
51
  "bind-event-listener": "^3.0.0",