@atlaskit/renderer 114.7.8 → 114.7.9
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.
- package/CHANGELOG.md +9 -0
- package/dist/cjs/ui/Renderer/index.js +1 -1
- package/dist/cjs/ui/annotations/hooks/user-selection.js +49 -8
- package/dist/es2019/ui/Renderer/index.js +1 -1
- package/dist/es2019/ui/annotations/hooks/user-selection.js +51 -9
- package/dist/esm/ui/Renderer/index.js +1 -1
- package/dist/esm/ui/annotations/hooks/user-selection.js +50 -9
- package/package.json +4 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 114.7.9
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#139133](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139133)
|
|
8
|
+
[`a66b33f8fd694`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a66b33f8fd694) -
|
|
9
|
+
EDITOR-552 Fixes triple clicking on paragrpahs that contain inline nodes to select the entire
|
|
10
|
+
paragraph. Changes behind FG platform_renderer_triple_click_selects_paragraph
|
|
11
|
+
|
|
3
12
|
## 114.7.8
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -67,7 +67,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
|
|
|
67
67
|
var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
68
68
|
var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
69
69
|
var packageName = "@atlaskit/renderer";
|
|
70
|
-
var packageVersion = "114.7.
|
|
70
|
+
var packageVersion = "114.7.9";
|
|
71
71
|
var setAsQueryContainerStyles = (0, _react2.css)({
|
|
72
72
|
containerName: 'ak-renderer-wrapper',
|
|
73
73
|
containerType: 'inline-size',
|
|
@@ -8,6 +8,7 @@ var _react = require("react");
|
|
|
8
8
|
var _AnnotationRangeContext = require("../contexts/AnnotationRangeContext");
|
|
9
9
|
var _utils = require("./utils");
|
|
10
10
|
var _steps = require("../../../steps");
|
|
11
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
11
12
|
var useUserSelectionRange = exports.useUserSelectionRange = function useUserSelectionRange(props) {
|
|
12
13
|
var rendererDOM = props.rendererRef.current;
|
|
13
14
|
var selectionTimeoutRef = (0, _react.useRef)();
|
|
@@ -18,11 +19,47 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
|
|
|
18
19
|
range = _useAnnotationRangeSt.range,
|
|
19
20
|
draftRange = _useAnnotationRangeSt.draftRange,
|
|
20
21
|
type = _useAnnotationRangeSt.type;
|
|
21
|
-
(0, _react.
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
var lastRangeRef = (0, _react.useRef)(null);
|
|
23
|
+
var onSelectionChange = (0, _react.useCallback)(function (event) {
|
|
24
|
+
if ((0, _platformFeatureFlags.fg)('platform_renderer_triple_click_selects_paragraph')) {
|
|
25
|
+
if (selectionTimeoutRef.current) {
|
|
26
|
+
clearTimeout(selectionTimeoutRef.current);
|
|
27
|
+
}
|
|
28
|
+
selectionTimeoutRef.current = setTimeout(function () {
|
|
29
|
+
var sel = document.getSelection();
|
|
30
|
+
if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
|
|
31
|
+
lastRangeRef.current = null; // Clear last range if selection is invalid
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
var _range = sel.getRangeAt(0);
|
|
35
|
+
|
|
36
|
+
// Skip if the selection hasn’t changed
|
|
37
|
+
if (lastRangeRef.current && _range.compareBoundaryPoints(Range.START_TO_START, lastRangeRef.current) === 0 && _range.compareBoundaryPoints(Range.END_TO_END, lastRangeRef.current) === 0) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
if (rendererDOM && (0, _utils.isRangeInsideOfRendererContainer)(rendererDOM, _range)) {
|
|
41
|
+
var _range2 = _range,
|
|
42
|
+
startContainer = _range2.startContainer,
|
|
43
|
+
endContainer = _range2.endContainer;
|
|
44
|
+
var isTripleClick = endContainer.nodeType !== Node.TEXT_NODE;
|
|
45
|
+
if (isTripleClick) {
|
|
46
|
+
var p = startContainer;
|
|
47
|
+
while (p && p.nodeName !== 'P' && p !== rendererDOM) {
|
|
48
|
+
p = p.parentNode;
|
|
49
|
+
}
|
|
50
|
+
if (p && p.nodeName === 'P' && p instanceof Element) {
|
|
51
|
+
var _range3 = document.createRange();
|
|
52
|
+
_range3.selectNodeContents(p);
|
|
53
|
+
sel.removeAllRanges();
|
|
54
|
+
sel.addRange(_range3);
|
|
55
|
+
_range = sel.getRangeAt(0);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
setRange(_range.cloneRange());
|
|
59
|
+
lastRangeRef.current = _range;
|
|
60
|
+
}
|
|
61
|
+
}, 100);
|
|
62
|
+
} else {
|
|
26
63
|
if (selectionTimeoutRef.current) {
|
|
27
64
|
clearTimeout(selectionTimeoutRef.current);
|
|
28
65
|
}
|
|
@@ -62,8 +99,12 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
|
|
|
62
99
|
setRange(_range.cloneRange());
|
|
63
100
|
}
|
|
64
101
|
}, 250);
|
|
65
|
-
}
|
|
66
|
-
|
|
102
|
+
}
|
|
103
|
+
}, [rendererDOM, setRange]);
|
|
104
|
+
(0, _react.useEffect)(function () {
|
|
105
|
+
if (!document || !rendererDOM) {
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
67
108
|
// Ignored via go/ees005
|
|
68
109
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
69
110
|
document.addEventListener('selectionchange', onSelectionChange);
|
|
@@ -73,6 +114,6 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
|
|
|
73
114
|
document.removeEventListener('selectionchange', onSelectionChange);
|
|
74
115
|
clearRange();
|
|
75
116
|
};
|
|
76
|
-
}, [rendererDOM,
|
|
117
|
+
}, [rendererDOM, onSelectionChange, clearRange]);
|
|
77
118
|
return [type === 'selection' ? range : null, draftRange, clearRange];
|
|
78
119
|
};
|
|
@@ -48,7 +48,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
|
|
|
48
48
|
export const NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
49
49
|
export const DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
50
50
|
const packageName = "@atlaskit/renderer";
|
|
51
|
-
const packageVersion = "114.7.
|
|
51
|
+
const packageVersion = "114.7.9";
|
|
52
52
|
const setAsQueryContainerStyles = css({
|
|
53
53
|
containerName: 'ak-renderer-wrapper',
|
|
54
54
|
containerType: 'inline-size',
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { useEffect, useRef } from 'react';
|
|
1
|
+
import { useEffect, useRef, useCallback } from 'react';
|
|
2
2
|
import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
|
|
3
3
|
import { isRangeInsideOfRendererContainer } from './utils';
|
|
4
4
|
import { isRoot } from '../../../steps';
|
|
5
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
6
|
export const useUserSelectionRange = props => {
|
|
6
7
|
const {
|
|
7
8
|
rendererRef: {
|
|
@@ -18,11 +19,48 @@ export const useUserSelectionRange = props => {
|
|
|
18
19
|
draftRange,
|
|
19
20
|
type
|
|
20
21
|
} = useAnnotationRangeState();
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
const lastRangeRef = useRef(null);
|
|
23
|
+
const onSelectionChange = useCallback(event => {
|
|
24
|
+
if (fg('platform_renderer_triple_click_selects_paragraph')) {
|
|
25
|
+
if (selectionTimeoutRef.current) {
|
|
26
|
+
clearTimeout(selectionTimeoutRef.current);
|
|
27
|
+
}
|
|
28
|
+
selectionTimeoutRef.current = setTimeout(() => {
|
|
29
|
+
const sel = document.getSelection();
|
|
30
|
+
if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
|
|
31
|
+
lastRangeRef.current = null; // Clear last range if selection is invalid
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
let _range = sel.getRangeAt(0);
|
|
35
|
+
|
|
36
|
+
// Skip if the selection hasn’t changed
|
|
37
|
+
if (lastRangeRef.current && _range.compareBoundaryPoints(Range.START_TO_START, lastRangeRef.current) === 0 && _range.compareBoundaryPoints(Range.END_TO_END, lastRangeRef.current) === 0) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
if (rendererDOM && isRangeInsideOfRendererContainer(rendererDOM, _range)) {
|
|
41
|
+
const {
|
|
42
|
+
startContainer,
|
|
43
|
+
endContainer
|
|
44
|
+
} = _range;
|
|
45
|
+
const isTripleClick = endContainer.nodeType !== Node.TEXT_NODE;
|
|
46
|
+
if (isTripleClick) {
|
|
47
|
+
let p = startContainer;
|
|
48
|
+
while (p && p.nodeName !== 'P' && p !== rendererDOM) {
|
|
49
|
+
p = p.parentNode;
|
|
50
|
+
}
|
|
51
|
+
if (p && p.nodeName === 'P' && p instanceof Element) {
|
|
52
|
+
const range = document.createRange();
|
|
53
|
+
range.selectNodeContents(p);
|
|
54
|
+
sel.removeAllRanges();
|
|
55
|
+
sel.addRange(range);
|
|
56
|
+
_range = sel.getRangeAt(0);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
setRange(_range.cloneRange());
|
|
60
|
+
lastRangeRef.current = _range;
|
|
61
|
+
}
|
|
62
|
+
}, 100);
|
|
63
|
+
} else {
|
|
26
64
|
if (selectionTimeoutRef.current) {
|
|
27
65
|
clearTimeout(selectionTimeoutRef.current);
|
|
28
66
|
}
|
|
@@ -64,8 +102,12 @@ export const useUserSelectionRange = props => {
|
|
|
64
102
|
setRange(_range.cloneRange());
|
|
65
103
|
}
|
|
66
104
|
}, 250);
|
|
67
|
-
}
|
|
68
|
-
|
|
105
|
+
}
|
|
106
|
+
}, [rendererDOM, setRange]);
|
|
107
|
+
useEffect(() => {
|
|
108
|
+
if (!document || !rendererDOM) {
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
69
111
|
// Ignored via go/ees005
|
|
70
112
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
71
113
|
document.addEventListener('selectionchange', onSelectionChange);
|
|
@@ -75,6 +117,6 @@ export const useUserSelectionRange = props => {
|
|
|
75
117
|
document.removeEventListener('selectionchange', onSelectionChange);
|
|
76
118
|
clearRange();
|
|
77
119
|
};
|
|
78
|
-
}, [rendererDOM,
|
|
120
|
+
}, [rendererDOM, onSelectionChange, clearRange]);
|
|
79
121
|
return [type === 'selection' ? range : null, draftRange, clearRange];
|
|
80
122
|
};
|
|
@@ -57,7 +57,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
|
|
|
57
57
|
export var NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
58
58
|
export var DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
59
59
|
var packageName = "@atlaskit/renderer";
|
|
60
|
-
var packageVersion = "114.7.
|
|
60
|
+
var packageVersion = "114.7.9";
|
|
61
61
|
var setAsQueryContainerStyles = css({
|
|
62
62
|
containerName: 'ak-renderer-wrapper',
|
|
63
63
|
containerType: 'inline-size',
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { useEffect, useRef } from 'react';
|
|
1
|
+
import { useEffect, useRef, useCallback } from 'react';
|
|
2
2
|
import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
|
|
3
3
|
import { isRangeInsideOfRendererContainer } from './utils';
|
|
4
4
|
import { isRoot } from '../../../steps';
|
|
5
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
6
|
export var useUserSelectionRange = function useUserSelectionRange(props) {
|
|
6
7
|
var rendererDOM = props.rendererRef.current;
|
|
7
8
|
var selectionTimeoutRef = useRef();
|
|
@@ -12,11 +13,47 @@ export var useUserSelectionRange = function useUserSelectionRange(props) {
|
|
|
12
13
|
range = _useAnnotationRangeSt.range,
|
|
13
14
|
draftRange = _useAnnotationRangeSt.draftRange,
|
|
14
15
|
type = _useAnnotationRangeSt.type;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
var lastRangeRef = useRef(null);
|
|
17
|
+
var onSelectionChange = useCallback(function (event) {
|
|
18
|
+
if (fg('platform_renderer_triple_click_selects_paragraph')) {
|
|
19
|
+
if (selectionTimeoutRef.current) {
|
|
20
|
+
clearTimeout(selectionTimeoutRef.current);
|
|
21
|
+
}
|
|
22
|
+
selectionTimeoutRef.current = setTimeout(function () {
|
|
23
|
+
var sel = document.getSelection();
|
|
24
|
+
if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
|
|
25
|
+
lastRangeRef.current = null; // Clear last range if selection is invalid
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
var _range = sel.getRangeAt(0);
|
|
29
|
+
|
|
30
|
+
// Skip if the selection hasn’t changed
|
|
31
|
+
if (lastRangeRef.current && _range.compareBoundaryPoints(Range.START_TO_START, lastRangeRef.current) === 0 && _range.compareBoundaryPoints(Range.END_TO_END, lastRangeRef.current) === 0) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
if (rendererDOM && isRangeInsideOfRendererContainer(rendererDOM, _range)) {
|
|
35
|
+
var _range2 = _range,
|
|
36
|
+
startContainer = _range2.startContainer,
|
|
37
|
+
endContainer = _range2.endContainer;
|
|
38
|
+
var isTripleClick = endContainer.nodeType !== Node.TEXT_NODE;
|
|
39
|
+
if (isTripleClick) {
|
|
40
|
+
var p = startContainer;
|
|
41
|
+
while (p && p.nodeName !== 'P' && p !== rendererDOM) {
|
|
42
|
+
p = p.parentNode;
|
|
43
|
+
}
|
|
44
|
+
if (p && p.nodeName === 'P' && p instanceof Element) {
|
|
45
|
+
var _range3 = document.createRange();
|
|
46
|
+
_range3.selectNodeContents(p);
|
|
47
|
+
sel.removeAllRanges();
|
|
48
|
+
sel.addRange(_range3);
|
|
49
|
+
_range = sel.getRangeAt(0);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
setRange(_range.cloneRange());
|
|
53
|
+
lastRangeRef.current = _range;
|
|
54
|
+
}
|
|
55
|
+
}, 100);
|
|
56
|
+
} else {
|
|
20
57
|
if (selectionTimeoutRef.current) {
|
|
21
58
|
clearTimeout(selectionTimeoutRef.current);
|
|
22
59
|
}
|
|
@@ -56,8 +93,12 @@ export var useUserSelectionRange = function useUserSelectionRange(props) {
|
|
|
56
93
|
setRange(_range.cloneRange());
|
|
57
94
|
}
|
|
58
95
|
}, 250);
|
|
59
|
-
}
|
|
60
|
-
|
|
96
|
+
}
|
|
97
|
+
}, [rendererDOM, setRange]);
|
|
98
|
+
useEffect(function () {
|
|
99
|
+
if (!document || !rendererDOM) {
|
|
100
|
+
return;
|
|
101
|
+
}
|
|
61
102
|
// Ignored via go/ees005
|
|
62
103
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
63
104
|
document.addEventListener('selectionchange', onSelectionChange);
|
|
@@ -67,6 +108,6 @@ export var useUserSelectionRange = function useUserSelectionRange(props) {
|
|
|
67
108
|
document.removeEventListener('selectionchange', onSelectionChange);
|
|
68
109
|
clearRange();
|
|
69
110
|
};
|
|
70
|
-
}, [rendererDOM,
|
|
111
|
+
}, [rendererDOM, onSelectionChange, clearRange]);
|
|
71
112
|
return [type === 'selection' ? range : null, draftRange, clearRange];
|
|
72
113
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/renderer",
|
|
3
|
-
"version": "114.7.
|
|
3
|
+
"version": "114.7.9",
|
|
4
4
|
"description": "Renderer component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -206,6 +206,9 @@
|
|
|
206
206
|
},
|
|
207
207
|
"platform_renderer_nested_annotation_styling": {
|
|
208
208
|
"type": "boolean"
|
|
209
|
+
},
|
|
210
|
+
"platform_renderer_triple_click_selects_paragraph": {
|
|
211
|
+
"type": "boolean"
|
|
209
212
|
}
|
|
210
213
|
},
|
|
211
214
|
"af:exports": {
|