@atlaskit/editor-plugin-selection 8.0.24 → 8.0.25

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 (5) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/pm-plugins/gap-cursor/utils/place-gap-cursor.js +26 -0
  3. package/dist/es2019/pm-plugins/gap-cursor/utils/place-gap-cursor.js +26 -0
  4. package/dist/esm/pm-plugins/gap-cursor/utils/place-gap-cursor.js +26 -0
  5. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/editor-plugin-selection
2
2
 
3
+ ## 8.0.25
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
3
9
  ## 8.0.24
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/pm-plugins/gap-cursor/utils/place-gap-cursor.js CHANGED
@@ -70,6 +70,20 @@ var mutateElementStyle = function mutateElementStyle(element, style, side) {
70
70
  }
71
71
  }
72
72
  };
73
+
74
+ /**
75
+ * For nested elements (e.g. .extension-container inside
76
+ * .extensionView-content-wrap), use getBoundingClientRect to compute
77
+ * the exact pixel offset between the gap cursor's position in the
78
+ * flow and the inner element's visual position.
79
+ */
80
+ var positionFromRect = function positionFromRect(gapCursor, cursorParent, nestedElement) {
81
+ var cursorRect = cursorParent.getBoundingClientRect();
82
+ var innerRect = nestedElement.getBoundingClientRect();
83
+ gapCursor.style.marginTop = "".concat(innerRect.top - cursorRect.top, "px");
84
+ gapCursor.style.left = "".concat(innerRect.left - cursorRect.left, "px");
85
+ gapCursor.style.width = "".concat(innerRect.width, "px");
86
+ };
73
87
  var toDOM = exports.toDOM = function toDOM(view, getPos) {
74
88
  var selection = view.state.selection;
75
89
  var $from = selection.$from,
@@ -96,6 +110,18 @@ var toDOM = exports.toDOM = function toDOM(view, getPos) {
96
110
  }
97
111
  var dom = view.nodeDOM(nodeStart);
98
112
  if (dom instanceof HTMLElement) {
113
+ // For native embed extensions only, use getBoundingClientRect
114
+ // to position the gap cursor precisely relative to the inner
115
+ // .extension-container
116
+ if (dom.classList.contains('extensionView-content-wrap')) {
117
+ var nativeEmbed = dom.querySelector('.extension-container:has([data-native-embed-alignment])');
118
+ if (nativeEmbed) {
119
+ var nativeEmbedStyle = window.getComputedStyle(nativeEmbed);
120
+ gapCursor.style.height = "".concat(measureHeight(nativeEmbedStyle), "px");
121
+ positionFromRect(gapCursor, element, nativeEmbed);
122
+ return;
123
+ }
124
+ }
99
125
  var style = computeNestedStyle(dom) || window.getComputedStyle(dom);
100
126
  gapCursor.style.height = "".concat(measureHeight(style), "px");
101
127
  var layoutMode = node && (0, _utils.getLayoutModeFromTargetNode)(node);
package/dist/es2019/pm-plugins/gap-cursor/utils/place-gap-cursor.js CHANGED
@@ -59,6 +59,20 @@ const mutateElementStyle = (element, style, side) => {
59
59
  }
60
60
  }
61
61
  };
62
+
63
+ /**
64
+ * For nested elements (e.g. .extension-container inside
65
+ * .extensionView-content-wrap), use getBoundingClientRect to compute
66
+ * the exact pixel offset between the gap cursor's position in the
67
+ * flow and the inner element's visual position.
68
+ */
69
+ const positionFromRect = (gapCursor, cursorParent, nestedElement) => {
70
+ const cursorRect = cursorParent.getBoundingClientRect();
71
+ const innerRect = nestedElement.getBoundingClientRect();
72
+ gapCursor.style.marginTop = `${innerRect.top - cursorRect.top}px`;
73
+ gapCursor.style.left = `${innerRect.left - cursorRect.left}px`;
74
+ gapCursor.style.width = `${innerRect.width}px`;
75
+ };
62
76
  export const toDOM = (view, getPos) => {
63
77
  const selection = view.state.selection;
64
78
  const {
@@ -87,6 +101,18 @@ export const toDOM = (view, getPos) => {
87
101
  }
88
102
  const dom = view.nodeDOM(nodeStart);
89
103
  if (dom instanceof HTMLElement) {
104
+ // For native embed extensions only, use getBoundingClientRect
105
+ // to position the gap cursor precisely relative to the inner
106
+ // .extension-container
107
+ if (dom.classList.contains('extensionView-content-wrap')) {
108
+ const nativeEmbed = dom.querySelector('.extension-container:has([data-native-embed-alignment])');
109
+ if (nativeEmbed) {
110
+ const nativeEmbedStyle = window.getComputedStyle(nativeEmbed);
111
+ gapCursor.style.height = `${measureHeight(nativeEmbedStyle)}px`;
112
+ positionFromRect(gapCursor, element, nativeEmbed);
113
+ return;
114
+ }
115
+ }
90
116
  const style = computeNestedStyle(dom) || window.getComputedStyle(dom);
91
117
  gapCursor.style.height = `${measureHeight(style)}px`;
92
118
  const layoutMode = node && getLayoutModeFromTargetNode(node);
package/dist/esm/pm-plugins/gap-cursor/utils/place-gap-cursor.js CHANGED
@@ -64,6 +64,20 @@ var mutateElementStyle = function mutateElementStyle(element, style, side) {
64
64
  }
65
65
  }
66
66
  };
67
+
68
+ /**
69
+ * For nested elements (e.g. .extension-container inside
70
+ * .extensionView-content-wrap), use getBoundingClientRect to compute
71
+ * the exact pixel offset between the gap cursor's position in the
72
+ * flow and the inner element's visual position.
73
+ */
74
+ var positionFromRect = function positionFromRect(gapCursor, cursorParent, nestedElement) {
75
+ var cursorRect = cursorParent.getBoundingClientRect();
76
+ var innerRect = nestedElement.getBoundingClientRect();
77
+ gapCursor.style.marginTop = "".concat(innerRect.top - cursorRect.top, "px");
78
+ gapCursor.style.left = "".concat(innerRect.left - cursorRect.left, "px");
79
+ gapCursor.style.width = "".concat(innerRect.width, "px");
80
+ };
67
81
  export var toDOM = function toDOM(view, getPos) {
68
82
  var selection = view.state.selection;
69
83
  var $from = selection.$from,
@@ -90,6 +104,18 @@ export var toDOM = function toDOM(view, getPos) {
90
104
  }
91
105
  var dom = view.nodeDOM(nodeStart);
92
106
  if (dom instanceof HTMLElement) {
107
+ // For native embed extensions only, use getBoundingClientRect
108
+ // to position the gap cursor precisely relative to the inner
109
+ // .extension-container
110
+ if (dom.classList.contains('extensionView-content-wrap')) {
111
+ var nativeEmbed = dom.querySelector('.extension-container:has([data-native-embed-alignment])');
112
+ if (nativeEmbed) {
113
+ var nativeEmbedStyle = window.getComputedStyle(nativeEmbed);
114
+ gapCursor.style.height = "".concat(measureHeight(nativeEmbedStyle), "px");
115
+ positionFromRect(gapCursor, element, nativeEmbed);
116
+ return;
117
+ }
118
+ }
93
119
  var style = computeNestedStyle(dom) || window.getComputedStyle(dom);
94
120
  gapCursor.style.height = "".concat(measureHeight(style), "px");
95
121
  var layoutMode = node && getLayoutModeFromTargetNode(node);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-selection",
3
- "version": "8.0.24",
3
+ "version": "8.0.25",
4
4
  "description": "Selection plugin for @atlaskit/editor-core",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -25,12 +25,12 @@
25
25
  "@atlaskit/editor-shared-styles": "^3.10.0",
26
26
  "@atlaskit/editor-tables": "^2.9.0",
27
27
  "@atlaskit/platform-feature-flags": "^1.1.0",
28
- "@atlaskit/tmp-editor-statsig": "^56.0.0",
28
+ "@atlaskit/tmp-editor-statsig": "^57.0.0",
29
29
  "@atlaskit/tokens": "^12.0.0",
30
30
  "@babel/runtime": "^7.0.0"
31
31
  },
32
32
  "peerDependencies": {
33
- "@atlaskit/editor-common": "^112.18.0",
33
+ "@atlaskit/editor-common": "^112.19.0",
34
34
  "react": "^18.2.0"
35
35
  },
36
36
  "techstack": {