@atlaskit/editor-plugin-selection 7.0.5 → 7.0.7

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 (7) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/pm-plugins/gap-cursor/utils/place-gap-cursor.js +51 -2
  3. package/dist/es2019/pm-plugins/gap-cursor/utils/place-gap-cursor.js +52 -1
  4. package/dist/esm/pm-plugins/gap-cursor/utils/place-gap-cursor.js +50 -1
  5. package/dist/types/pm-plugins/gap-cursor/utils/place-gap-cursor.d.ts +2 -0
  6. package/dist/types-ts4.5/pm-plugins/gap-cursor/utils/place-gap-cursor.d.ts +2 -0
  7. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-selection
2
2
 
3
+ ## 7.0.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [`cbd94bd913e71`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cbd94bd913e71) -
8
+ [ux] EDITOR-4514 fix gap cursor positioning after paste by adding request animation frame to wait
9
+ for new content to be inserted into dom
10
+ - Updated dependencies
11
+
12
+ ## 7.0.6
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
17
+
3
18
  ## 7.0.5
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/pm-plugins/gap-cursor/utils/place-gap-cursor.js CHANGED
@@ -4,10 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.toDOM = void 0;
7
+ exports.toDOMOld = exports.toDOMNew = exports.toDOM = void 0;
8
8
  var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
9
9
  var _selection = require("@atlaskit/editor-common/selection");
10
10
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
11
12
  var _utils = require("../utils");
12
13
  /**
13
14
  * We have a couple of nodes that require us to compute style
@@ -71,7 +72,7 @@ var mutateElementStyle = function mutateElementStyle(element, style, side) {
71
72
  }
72
73
  }
73
74
  };
74
- var toDOM = exports.toDOM = function toDOM(view, getPos) {
75
+ var toDOMOld = exports.toDOMOld = function toDOMOld(view, getPos) {
75
76
  var selection = view.state.selection;
76
77
  var $from = selection.$from,
77
78
  side = selection.side;
@@ -103,4 +104,52 @@ var toDOM = exports.toDOM = function toDOM(view, getPos) {
103
104
  }
104
105
  }
105
106
  return element;
107
+ };
108
+ var toDOMNew = exports.toDOMNew = function toDOMNew(view, getPos) {
109
+ var selection = view.state.selection;
110
+ var $from = selection.$from,
111
+ side = selection.side;
112
+ var isRightCursor = side === _selection.Side.RIGHT;
113
+ var node = isRightCursor ? $from.nodeBefore : $from.nodeAfter;
114
+ var element = document.createElement('span');
115
+ element.className = "ProseMirror-gapcursor ".concat(isRightCursor ? '-right' : '-left');
116
+ element.appendChild(document.createElement('span'));
117
+ if (element.firstChild) {
118
+ var gapCursor = element.firstChild;
119
+
120
+ // The DOM from view.nodeDOM() might be stale after paste
121
+ // Use requestAnimationFrame to wait for DOM to update, then fetch and measure
122
+ requestAnimationFrame(function () {
123
+ var nodeStart = getPos();
124
+ if (nodeStart === undefined) {
125
+ return;
126
+ }
127
+
128
+ // if selection has changed, we no longer need to compute the styles for the gapcursor
129
+ if (!view.state.selection.eq(selection)) {
130
+ return;
131
+ }
132
+ var dom = view.nodeDOM(nodeStart);
133
+ if (dom instanceof HTMLElement) {
134
+ var style = computeNestedStyle(dom) || window.getComputedStyle(dom);
135
+ gapCursor.style.height = "".concat(measureHeight(style), "px");
136
+ var layoutMode = node && (0, _utils.getLayoutModeFromTargetNode)(node);
137
+ if (nodeStart !== 0 || layoutMode || (node === null || node === void 0 ? void 0 : node.type.name) === 'table') {
138
+ gapCursor.style.marginTop = style.getPropertyValue('margin-top');
139
+ }
140
+ var isNestedTable = (0, _platformFeatureFlags.fg)('platform_editor_nested_tables_gap_cursor') ? (node === null || node === void 0 ? void 0 : node.type.name) === 'table' && selection.$to.depth > 0 : false;
141
+ if (layoutMode && !isNestedTable) {
142
+ gapCursor.setAttribute('layout', layoutMode);
143
+ var breakoutModeStyle = (0, _utils.getComputedStyleForLayoutMode)(dom, node, style);
144
+ gapCursor.style.width = "".concat(measureWidth(breakoutModeStyle), "px");
145
+ } else {
146
+ mutateElementStyle(gapCursor, style, selection.side);
147
+ }
148
+ }
149
+ });
150
+ }
151
+ return element;
152
+ };
153
+ var toDOM = exports.toDOM = function toDOM(view, getPos) {
154
+ return (0, _expValEquals.expValEquals)('platform_editor_fix_gapcursor_on_paste', 'isEnabled', true) ? toDOMNew(view, getPos) : toDOMOld(view, getPos);
106
155
  };
package/dist/es2019/pm-plugins/gap-cursor/utils/place-gap-cursor.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { Side } from '@atlaskit/editor-common/selection';
2
2
  import { fg } from '@atlaskit/platform-feature-flags';
3
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
3
4
  import { getComputedStyleForLayoutMode, getLayoutModeFromTargetNode, isLeftCursor } from '../utils';
4
5
 
5
6
  /**
@@ -60,7 +61,7 @@ const mutateElementStyle = (element, style, side) => {
60
61
  }
61
62
  }
62
63
  };
63
- export const toDOM = (view, getPos) => {
64
+ export const toDOMOld = (view, getPos) => {
64
65
  const selection = view.state.selection;
65
66
  const {
66
67
  $from,
@@ -94,4 +95,54 @@ export const toDOM = (view, getPos) => {
94
95
  }
95
96
  }
96
97
  return element;
98
+ };
99
+ export const toDOMNew = (view, getPos) => {
100
+ const selection = view.state.selection;
101
+ const {
102
+ $from,
103
+ side
104
+ } = selection;
105
+ const isRightCursor = side === Side.RIGHT;
106
+ const node = isRightCursor ? $from.nodeBefore : $from.nodeAfter;
107
+ const element = document.createElement('span');
108
+ element.className = `ProseMirror-gapcursor ${isRightCursor ? '-right' : '-left'}`;
109
+ element.appendChild(document.createElement('span'));
110
+ if (element.firstChild) {
111
+ const gapCursor = element.firstChild;
112
+
113
+ // The DOM from view.nodeDOM() might be stale after paste
114
+ // Use requestAnimationFrame to wait for DOM to update, then fetch and measure
115
+ requestAnimationFrame(() => {
116
+ const nodeStart = getPos();
117
+ if (nodeStart === undefined) {
118
+ return;
119
+ }
120
+
121
+ // if selection has changed, we no longer need to compute the styles for the gapcursor
122
+ if (!view.state.selection.eq(selection)) {
123
+ return;
124
+ }
125
+ const dom = view.nodeDOM(nodeStart);
126
+ if (dom instanceof HTMLElement) {
127
+ const style = computeNestedStyle(dom) || window.getComputedStyle(dom);
128
+ gapCursor.style.height = `${measureHeight(style)}px`;
129
+ const layoutMode = node && getLayoutModeFromTargetNode(node);
130
+ if (nodeStart !== 0 || layoutMode || (node === null || node === void 0 ? void 0 : node.type.name) === 'table') {
131
+ gapCursor.style.marginTop = style.getPropertyValue('margin-top');
132
+ }
133
+ const isNestedTable = fg('platform_editor_nested_tables_gap_cursor') ? (node === null || node === void 0 ? void 0 : node.type.name) === 'table' && selection.$to.depth > 0 : false;
134
+ if (layoutMode && !isNestedTable) {
135
+ gapCursor.setAttribute('layout', layoutMode);
136
+ const breakoutModeStyle = getComputedStyleForLayoutMode(dom, node, style);
137
+ gapCursor.style.width = `${measureWidth(breakoutModeStyle)}px`;
138
+ } else {
139
+ mutateElementStyle(gapCursor, style, selection.side);
140
+ }
141
+ }
142
+ });
143
+ }
144
+ return element;
145
+ };
146
+ export const toDOM = (view, getPos) => {
147
+ return expValEquals('platform_editor_fix_gapcursor_on_paste', 'isEnabled', true) ? toDOMNew(view, getPos) : toDOMOld(view, getPos);
97
148
  };
package/dist/esm/pm-plugins/gap-cursor/utils/place-gap-cursor.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import _toArray from "@babel/runtime/helpers/toArray";
2
2
  import { Side } from '@atlaskit/editor-common/selection';
3
3
  import { fg } from '@atlaskit/platform-feature-flags';
4
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
4
5
  import { getComputedStyleForLayoutMode, getLayoutModeFromTargetNode, isLeftCursor } from '../utils';
5
6
 
6
7
  /**
@@ -65,7 +66,7 @@ var mutateElementStyle = function mutateElementStyle(element, style, side) {
65
66
  }
66
67
  }
67
68
  };
68
- export var toDOM = function toDOM(view, getPos) {
69
+ export var toDOMOld = function toDOMOld(view, getPos) {
69
70
  var selection = view.state.selection;
70
71
  var $from = selection.$from,
71
72
  side = selection.side;
@@ -97,4 +98,52 @@ export var toDOM = function toDOM(view, getPos) {
97
98
  }
98
99
  }
99
100
  return element;
101
+ };
102
+ export var toDOMNew = function toDOMNew(view, getPos) {
103
+ var selection = view.state.selection;
104
+ var $from = selection.$from,
105
+ side = selection.side;
106
+ var isRightCursor = side === Side.RIGHT;
107
+ var node = isRightCursor ? $from.nodeBefore : $from.nodeAfter;
108
+ var element = document.createElement('span');
109
+ element.className = "ProseMirror-gapcursor ".concat(isRightCursor ? '-right' : '-left');
110
+ element.appendChild(document.createElement('span'));
111
+ if (element.firstChild) {
112
+ var gapCursor = element.firstChild;
113
+
114
+ // The DOM from view.nodeDOM() might be stale after paste
115
+ // Use requestAnimationFrame to wait for DOM to update, then fetch and measure
116
+ requestAnimationFrame(function () {
117
+ var nodeStart = getPos();
118
+ if (nodeStart === undefined) {
119
+ return;
120
+ }
121
+
122
+ // if selection has changed, we no longer need to compute the styles for the gapcursor
123
+ if (!view.state.selection.eq(selection)) {
124
+ return;
125
+ }
126
+ var dom = view.nodeDOM(nodeStart);
127
+ if (dom instanceof HTMLElement) {
128
+ var style = computeNestedStyle(dom) || window.getComputedStyle(dom);
129
+ gapCursor.style.height = "".concat(measureHeight(style), "px");
130
+ var layoutMode = node && getLayoutModeFromTargetNode(node);
131
+ if (nodeStart !== 0 || layoutMode || (node === null || node === void 0 ? void 0 : node.type.name) === 'table') {
132
+ gapCursor.style.marginTop = style.getPropertyValue('margin-top');
133
+ }
134
+ var isNestedTable = fg('platform_editor_nested_tables_gap_cursor') ? (node === null || node === void 0 ? void 0 : node.type.name) === 'table' && selection.$to.depth > 0 : false;
135
+ if (layoutMode && !isNestedTable) {
136
+ gapCursor.setAttribute('layout', layoutMode);
137
+ var breakoutModeStyle = getComputedStyleForLayoutMode(dom, node, style);
138
+ gapCursor.style.width = "".concat(measureWidth(breakoutModeStyle), "px");
139
+ } else {
140
+ mutateElementStyle(gapCursor, style, selection.side);
141
+ }
142
+ }
143
+ });
144
+ }
145
+ return element;
146
+ };
147
+ export var toDOM = function toDOM(view, getPos) {
148
+ return expValEquals('platform_editor_fix_gapcursor_on_paste', 'isEnabled', true) ? toDOMNew(view, getPos) : toDOMOld(view, getPos);
100
149
  };
package/dist/types/pm-plugins/gap-cursor/utils/place-gap-cursor.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
2
+ export declare const toDOMOld: (view: EditorView, getPos: () => number | undefined) => HTMLSpanElement;
3
+ export declare const toDOMNew: (view: EditorView, getPos: () => number | undefined) => HTMLSpanElement;
2
4
  export declare const toDOM: (view: EditorView, getPos: () => number | undefined) => HTMLSpanElement;
package/dist/types-ts4.5/pm-plugins/gap-cursor/utils/place-gap-cursor.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
2
+ export declare const toDOMOld: (view: EditorView, getPos: () => number | undefined) => HTMLSpanElement;
3
+ export declare const toDOMNew: (view: EditorView, getPos: () => number | undefined) => HTMLSpanElement;
2
4
  export declare const toDOM: (view: EditorView, getPos: () => number | undefined) => HTMLSpanElement;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-selection",
3
- "version": "7.0.5",
3
+ "version": "7.0.7",
4
4
  "description": "Selection plugin for @atlaskit/editor-core",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -20,17 +20,17 @@
20
20
  },
21
21
  "dependencies": {
22
22
  "@atlaskit/editor-json-transformer": "^8.31.0",
23
- "@atlaskit/editor-plugin-interaction": "^13.0.0",
23
+ "@atlaskit/editor-plugin-interaction": "^14.0.0",
24
24
  "@atlaskit/editor-prosemirror": "^7.2.0",
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": "^17.5.0",
29
- "@atlaskit/tokens": "^10.1.0",
28
+ "@atlaskit/tmp-editor-statsig": "^17.10.0",
29
+ "@atlaskit/tokens": "^11.0.0",
30
30
  "@babel/runtime": "^7.0.0"
31
31
  },
32
32
  "peerDependencies": {
33
- "@atlaskit/editor-common": "^111.10.0",
33
+ "@atlaskit/editor-common": "^111.11.0",
34
34
  "react": "^18.2.0"
35
35
  },
36
36
  "techstack": {