@atlaskit/renderer 124.9.8 → 124.9.10
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 +16 -0
- package/dist/cjs/react/nodes/blockCard.js +11 -1
- package/dist/cjs/ui/Renderer/RendererStyleContainer.js +1 -16
- package/dist/cjs/ui/Renderer/index.js +1 -1
- package/dist/cjs/ui/annotations/hooks/user-selection.js +34 -81
- package/dist/es2019/react/nodes/blockCard.js +11 -1
- package/dist/es2019/ui/Renderer/RendererStyleContainer.js +1 -22
- package/dist/es2019/ui/Renderer/index.js +1 -1
- package/dist/es2019/ui/annotations/hooks/user-selection.js +35 -84
- package/dist/esm/react/nodes/blockCard.js +11 -1
- package/dist/esm/ui/Renderer/RendererStyleContainer.js +1 -16
- package/dist/esm/ui/Renderer/index.js +1 -1
- package/dist/esm/ui/annotations/hooks/user-selection.js +34 -81
- package/package.json +5 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 124.9.10
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`b0103f4f35c6d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b0103f4f35c6d) -
|
|
8
|
+
Removed fg platform_renderer_triple_click_selects_paragraph
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 124.9.9
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`7f5f1ce3e4c0d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7f5f1ce3e4c0d) -
|
|
16
|
+
Add marginTop spacing to datasourceContainerStyle to match editor styling
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 124.9.8
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -34,6 +34,16 @@ var datasourceContainerStyle = (0, _react.css)({
|
|
|
34
34
|
marginBottom: "var(--ds-space-150, 0.75rem)",
|
|
35
35
|
transform: 'translateX(-50%)'
|
|
36
36
|
});
|
|
37
|
+
var datasourceContainerStyleWithMarginTop = (0, _react.css)({
|
|
38
|
+
borderRadius: "var(--ds-radius-large, 8px)",
|
|
39
|
+
border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N40, ")")),
|
|
40
|
+
overflow: 'hidden',
|
|
41
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
42
|
+
marginLeft: '50%',
|
|
43
|
+
marginBottom: "var(--ds-space-150, 0.75rem)",
|
|
44
|
+
transform: 'translateX(-50%)',
|
|
45
|
+
marginTop: "var(--ds-space-150, 0.75rem)"
|
|
46
|
+
});
|
|
37
47
|
function BlockCard(props) {
|
|
38
48
|
var url = props.url,
|
|
39
49
|
data = props.data,
|
|
@@ -106,7 +116,7 @@ function BlockCard(props) {
|
|
|
106
116
|
}, cardProps), (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref5) {
|
|
107
117
|
var width = _ref5.width;
|
|
108
118
|
return (0, _react.jsx)("div", {
|
|
109
|
-
css: datasourceContainerStyle,
|
|
119
|
+
css: (0, _platformFeatureFlags.fg)('platform_editor_fix_sllv_margin_renderer') ? datasourceContainerStyleWithMarginTop : datasourceContainerStyle,
|
|
110
120
|
"data-testid": "renderer-datasource-table",
|
|
111
121
|
"data-local-id": localId,
|
|
112
122
|
style: {
|
|
@@ -1298,21 +1298,6 @@ var rendererTableSortableColumnStyles = (0, _react.css)((0, _defineProperty2.def
|
|
|
1298
1298
|
})), "&:hover:not(\n\t\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t\t.".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, "\n\t\t\t\t\t\t\t\t\t\t.").concat(_consts.RendererCssClassName.SORTABLE_COLUMN, ":hover\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t\t> .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN, "\n\t\t\t\t\t\t> .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER), (0, _defineProperty2.default)({}, ".".concat(_table2.SORTABLE_COLUMN_ICON_CLASSNAME), {
|
|
1299
1299
|
opacity: 1
|
|
1300
1300
|
}))))));
|
|
1301
|
-
|
|
1302
|
-
// TODO: ED-27229 - Cleanup with `platform_editor_tables_numbered_column_correction`
|
|
1303
|
-
var rendererTableColumnStylesOld = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_styles.TableSharedCssClassName.TABLE_CONTAINER), {
|
|
1304
|
-
'table[data-number-column="true"]': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.NUMBER_COLUMN), {
|
|
1305
|
-
backgroundColor: "".concat("var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")")),
|
|
1306
|
-
borderRight: "var(--ds-border-width, 1px)".concat(" solid\n\t\t\t\t\t\t\t\t", "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")")),
|
|
1307
|
-
width: "".concat(_editorSharedStyles.akEditorTableNumberColumnWidth, "px"),
|
|
1308
|
-
textAlign: 'center',
|
|
1309
|
-
color: "".concat("var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
|
|
1310
|
-
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
1311
|
-
fontSize: "".concat(14 / 16, " rem")
|
|
1312
|
-
}), ".fixed .".concat(_consts.RendererCssClassName.NUMBER_COLUMN), {
|
|
1313
|
-
borderRight: "0px none"
|
|
1314
|
-
})
|
|
1315
|
-
}));
|
|
1316
1301
|
var rendererTableColumnStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_styles.TableSharedCssClassName.TABLE_CONTAINER), {
|
|
1317
1302
|
'table[data-number-column="true"]': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.NUMBER_COLUMN), {
|
|
1318
1303
|
backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
|
|
@@ -1614,7 +1599,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
|
|
|
1614
1599
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
1615
1600
|
(0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && (0, _platformFeatureFlags.fg)('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
|
|
1616
1601
|
// merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
|
|
1617
|
-
(0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks,
|
|
1602
|
+
(0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, appearance === 'full-width' && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') && denseStyles],
|
|
1618
1603
|
"data-testid": testId
|
|
1619
1604
|
}, children)
|
|
1620
1605
|
);
|
|
@@ -68,7 +68,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
|
68
68
|
// we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
|
|
69
69
|
var TABLE_WIDTH_INFO_TIMEOUT = 10000;
|
|
70
70
|
var packageName = "@atlaskit/renderer";
|
|
71
|
-
var packageVersion = "
|
|
71
|
+
var packageVersion = "0.0.0-development";
|
|
72
72
|
var setAsQueryContainerStyles = (0, _react2.css)({
|
|
73
73
|
containerName: 'ak-renderer-wrapper',
|
|
74
74
|
containerType: 'inline-size'
|
|
@@ -7,8 +7,6 @@ exports.useUserSelectionRange = void 0;
|
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
var _AnnotationRangeContext = require("../contexts/AnnotationRangeContext");
|
|
9
9
|
var _utils = require("./utils");
|
|
10
|
-
var _steps = require("../../../steps");
|
|
11
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
10
|
var _AnnotationManagerContext = require("../contexts/AnnotationManagerContext");
|
|
13
11
|
var useUserSelectionRange = exports.useUserSelectionRange = function useUserSelectionRange(props) {
|
|
14
12
|
var rendererDOM = props.rendererRef.current;
|
|
@@ -25,91 +23,46 @@ var useUserSelectionRange = exports.useUserSelectionRange = function useUserSele
|
|
|
25
23
|
var lastRangeRef = (0, _react.useRef)(null);
|
|
26
24
|
var isAnnotationManagerEnabled = !!annotationManager;
|
|
27
25
|
var onSelectionChange = (0, _react.useCallback)(function (event) {
|
|
28
|
-
if (
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
clearSelectionRange();
|
|
38
|
-
}
|
|
39
|
-
return;
|
|
26
|
+
if (selectionTimeoutRef.current) {
|
|
27
|
+
clearTimeout(selectionTimeoutRef.current);
|
|
28
|
+
}
|
|
29
|
+
selectionTimeoutRef.current = setTimeout(function () {
|
|
30
|
+
var sel = document.getSelection();
|
|
31
|
+
if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
|
|
32
|
+
lastRangeRef.current = null; // Clear last range if selection is invalid
|
|
33
|
+
if (isAnnotationManagerEnabled) {
|
|
34
|
+
clearSelectionRange();
|
|
40
35
|
}
|
|
41
|
-
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
var _range = sel.getRangeAt(0);
|
|
42
39
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
if (rendererDOM && (0, _utils.isRangeInsideOfRendererContainer)(rendererDOM, _range)) {
|
|
48
|
-
var _range2 = _range,
|
|
49
|
-
startContainer = _range2.startContainer,
|
|
50
|
-
endContainer = _range2.endContainer;
|
|
51
|
-
var isTripleClick = endContainer.nodeType !== Node.TEXT_NODE;
|
|
52
|
-
if (isTripleClick) {
|
|
53
|
-
var p = startContainer;
|
|
54
|
-
while (p && p.nodeName !== 'P' && p !== rendererDOM) {
|
|
55
|
-
p = p.parentNode;
|
|
56
|
-
}
|
|
57
|
-
if (p && p.nodeName === 'P' && p instanceof Element) {
|
|
58
|
-
var _range3 = document.createRange();
|
|
59
|
-
_range3.selectNodeContents(p);
|
|
60
|
-
sel.removeAllRanges();
|
|
61
|
-
sel.addRange(_range3);
|
|
62
|
-
_range = sel.getRangeAt(0);
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
setSelectionRange(_range.cloneRange());
|
|
66
|
-
lastRangeRef.current = _range;
|
|
67
|
-
}
|
|
68
|
-
}, 100);
|
|
69
|
-
} else {
|
|
70
|
-
if (selectionTimeoutRef.current) {
|
|
71
|
-
clearTimeout(selectionTimeoutRef.current);
|
|
40
|
+
// Skip if the selection hasn't changed
|
|
41
|
+
if (lastRangeRef.current && _range.compareBoundaryPoints(Range.START_TO_START, lastRangeRef.current) === 0 && _range.compareBoundaryPoints(Range.END_TO_END, lastRangeRef.current) === 0) {
|
|
42
|
+
return;
|
|
72
43
|
}
|
|
73
|
-
|
|
74
|
-
var
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
44
|
+
if (rendererDOM && (0, _utils.isRangeInsideOfRendererContainer)(rendererDOM, _range)) {
|
|
45
|
+
var _range2 = _range,
|
|
46
|
+
startContainer = _range2.startContainer,
|
|
47
|
+
endContainer = _range2.endContainer;
|
|
48
|
+
var isTripleClick = endContainer.nodeType !== Node.TEXT_NODE;
|
|
49
|
+
if (isTripleClick) {
|
|
50
|
+
var p = startContainer;
|
|
51
|
+
while (p && p.nodeName !== 'P' && p !== rendererDOM) {
|
|
52
|
+
p = p.parentNode;
|
|
78
53
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
commonAncestorContainer = _range.commonAncestorContainer;
|
|
86
|
-
var parentNode = startContainer.parentNode;
|
|
87
|
-
|
|
88
|
-
// ED-23493
|
|
89
|
-
// On triple-click in Chrome and Safari, the native Selection API's range has endContainer as a non-text node
|
|
90
|
-
// and commonAncestorContainer as root level div.ak-renderer-document when the node is followed by div or hr.
|
|
91
|
-
|
|
92
|
-
// Triple clicks are the only case that can cause the endContainer to be a non-text node
|
|
93
|
-
// Same check for highlight range logic in confluence/next/packages/comments-util/src/domUtils.ts Line 180
|
|
94
|
-
var isTripleClick = endContainer.nodeType !== Node.TEXT_NODE;
|
|
95
|
-
|
|
96
|
-
// isAnnotationAllowedOnRange range validation is checking if the parent container is root element and disable the comment if it is.
|
|
97
|
-
// platform/packages/editor/renderer/src/steps/index.ts Line 180
|
|
98
|
-
|
|
99
|
-
// This workaround ensures the endContainer is set to a text node when endContainer is non-text and the parent container is the root element
|
|
100
|
-
if (isTripleClick && commonAncestorContainer && commonAncestorContainer.nodeType === Node.ELEMENT_NODE &&
|
|
101
|
-
// Ignored via go/ees005
|
|
102
|
-
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
103
|
-
(0, _steps.isRoot)(commonAncestorContainer) && (parentNode === null || parentNode === void 0 ? void 0 : parentNode.nodeName) === 'P' // ignore if the parent node is strong, em, etc.
|
|
104
|
-
) {
|
|
105
|
-
var _parentNode$lastChild, _parentNode$lastChild2;
|
|
106
|
-
var lastChild = parentNode !== null && parentNode !== void 0 && parentNode.lastChild && (parentNode === null || parentNode === void 0 || (_parentNode$lastChild = parentNode.lastChild) === null || _parentNode$lastChild === void 0 ? void 0 : _parentNode$lastChild.nodeType) === Node.TEXT_NODE ? parentNode === null || parentNode === void 0 ? void 0 : parentNode.lastChild : parentNode === null || parentNode === void 0 || (_parentNode$lastChild2 = parentNode.lastChild) === null || _parentNode$lastChild2 === void 0 ? void 0 : _parentNode$lastChild2.childNodes[0];
|
|
107
|
-
_range.setEnd(lastChild, lastChild.length || 0);
|
|
54
|
+
if (p && p.nodeName === 'P' && p instanceof Element) {
|
|
55
|
+
var _range3 = document.createRange();
|
|
56
|
+
_range3.selectNodeContents(p);
|
|
57
|
+
sel.removeAllRanges();
|
|
58
|
+
sel.addRange(_range3);
|
|
59
|
+
_range = sel.getRangeAt(0);
|
|
108
60
|
}
|
|
109
|
-
setSelectionRange(_range.cloneRange());
|
|
110
61
|
}
|
|
111
|
-
|
|
112
|
-
|
|
62
|
+
setSelectionRange(_range.cloneRange());
|
|
63
|
+
lastRangeRef.current = _range;
|
|
64
|
+
}
|
|
65
|
+
}, 100);
|
|
113
66
|
}, [rendererDOM, setSelectionRange, clearSelectionRange, isAnnotationManagerEnabled]);
|
|
114
67
|
(0, _react.useEffect)(function () {
|
|
115
68
|
if (!document || !rendererDOM) {
|
|
@@ -26,6 +26,16 @@ const datasourceContainerStyle = css({
|
|
|
26
26
|
marginBottom: `${"var(--ds-space-150, 0.75rem)"}`,
|
|
27
27
|
transform: 'translateX(-50%)'
|
|
28
28
|
});
|
|
29
|
+
const datasourceContainerStyleWithMarginTop = css({
|
|
30
|
+
borderRadius: `${"var(--ds-radius-large, 8px)"}`,
|
|
31
|
+
border: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border, ${N40})`}`,
|
|
32
|
+
overflow: 'hidden',
|
|
33
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
34
|
+
marginLeft: '50%',
|
|
35
|
+
marginBottom: `${"var(--ds-space-150, 0.75rem)"}`,
|
|
36
|
+
transform: 'translateX(-50%)',
|
|
37
|
+
marginTop: `${"var(--ds-space-150, 0.75rem)"}`
|
|
38
|
+
});
|
|
29
39
|
export default function BlockCard(props) {
|
|
30
40
|
const {
|
|
31
41
|
url,
|
|
@@ -94,7 +104,7 @@ export default function BlockCard(props) {
|
|
|
94
104
|
}, cardProps), jsx(WidthConsumer, null, ({
|
|
95
105
|
width
|
|
96
106
|
}) => jsx("div", {
|
|
97
|
-
css: datasourceContainerStyle,
|
|
107
|
+
css: fg('platform_editor_fix_sllv_margin_renderer') ? datasourceContainerStyleWithMarginTop : datasourceContainerStyle,
|
|
98
108
|
"data-testid": "renderer-datasource-table",
|
|
99
109
|
"data-local-id": localId,
|
|
100
110
|
style: {
|
|
@@ -1653,27 +1653,6 @@ const rendererTableSortableColumnStyles = css({
|
|
|
1653
1653
|
}
|
|
1654
1654
|
}
|
|
1655
1655
|
});
|
|
1656
|
-
|
|
1657
|
-
// TODO: ED-27229 - Cleanup with `platform_editor_tables_numbered_column_correction`
|
|
1658
|
-
const rendererTableColumnStylesOld = css({
|
|
1659
|
-
[`.${RendererCssClassName.DOCUMENT} .${TableSharedCssClassName.TABLE_CONTAINER}`]: {
|
|
1660
|
-
'table[data-number-column="true"]': {
|
|
1661
|
-
[`.${RendererCssClassName.NUMBER_COLUMN}`]: {
|
|
1662
|
-
backgroundColor: `${`var(--ds-background-neutral, ${akEditorTableToolbar})`}`,
|
|
1663
|
-
borderRight: `${"var(--ds-border-width, 1px)"} solid
|
|
1664
|
-
${`var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`}`,
|
|
1665
|
-
width: `${akEditorTableNumberColumnWidth}px`,
|
|
1666
|
-
textAlign: 'center',
|
|
1667
|
-
color: `${`var(--ds-text-subtlest, ${N200})`}`,
|
|
1668
|
-
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
1669
|
-
fontSize: `${14 / 16} rem`
|
|
1670
|
-
},
|
|
1671
|
-
[`.fixed .${RendererCssClassName.NUMBER_COLUMN}`]: {
|
|
1672
|
-
borderRight: `0px none`
|
|
1673
|
-
}
|
|
1674
|
-
}
|
|
1675
|
-
}
|
|
1676
|
-
});
|
|
1677
1656
|
const rendererTableColumnStyles = css({
|
|
1678
1657
|
[`.${RendererCssClassName.DOCUMENT} .${TableSharedCssClassName.TABLE_CONTAINER}`]: {
|
|
1679
1658
|
'table[data-number-column="true"]': {
|
|
@@ -2031,7 +2010,7 @@ export const RendererStyleContainer = props => {
|
|
|
2031
2010
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
2032
2011
|
fg('editor_inline_comments_on_inline_nodes') && fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
|
|
2033
2012
|
// merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
|
|
2034
|
-
fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks,
|
|
2013
|
+
fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, appearance === 'full-width' && responsiveBreakoutWidthFullWidth, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && denseStyles],
|
|
2035
2014
|
"data-testid": testId
|
|
2036
2015
|
}, children)
|
|
2037
2016
|
);
|
|
@@ -54,7 +54,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
|
54
54
|
// we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
|
|
55
55
|
const TABLE_WIDTH_INFO_TIMEOUT = 10000;
|
|
56
56
|
const packageName = "@atlaskit/renderer";
|
|
57
|
-
const packageVersion = "
|
|
57
|
+
const packageVersion = "0.0.0-development";
|
|
58
58
|
const setAsQueryContainerStyles = css({
|
|
59
59
|
containerName: 'ak-renderer-wrapper',
|
|
60
60
|
containerType: 'inline-size'
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { useEffect, useRef, useCallback } from 'react';
|
|
2
2
|
import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
|
|
3
3
|
import { isRangeInsideOfRendererContainer } from './utils';
|
|
4
|
-
import { isRoot } from '../../../steps';
|
|
5
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
4
|
import { useAnnotationManagerDispatch } from '../contexts/AnnotationManagerContext';
|
|
7
5
|
export const useUserSelectionRange = props => {
|
|
8
6
|
const {
|
|
@@ -26,94 +24,47 @@ export const useUserSelectionRange = props => {
|
|
|
26
24
|
const lastRangeRef = useRef(null);
|
|
27
25
|
const isAnnotationManagerEnabled = !!annotationManager;
|
|
28
26
|
const onSelectionChange = useCallback(event => {
|
|
29
|
-
if (
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
clearSelectionRange();
|
|
39
|
-
}
|
|
40
|
-
return;
|
|
27
|
+
if (selectionTimeoutRef.current) {
|
|
28
|
+
clearTimeout(selectionTimeoutRef.current);
|
|
29
|
+
}
|
|
30
|
+
selectionTimeoutRef.current = setTimeout(() => {
|
|
31
|
+
const sel = document.getSelection();
|
|
32
|
+
if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
|
|
33
|
+
lastRangeRef.current = null; // Clear last range if selection is invalid
|
|
34
|
+
if (isAnnotationManagerEnabled) {
|
|
35
|
+
clearSelectionRange();
|
|
41
36
|
}
|
|
42
|
-
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
let _range = sel.getRangeAt(0);
|
|
43
40
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
if (rendererDOM && isRangeInsideOfRendererContainer(rendererDOM, _range)) {
|
|
49
|
-
const {
|
|
50
|
-
startContainer,
|
|
51
|
-
endContainer
|
|
52
|
-
} = _range;
|
|
53
|
-
const isTripleClick = endContainer.nodeType !== Node.TEXT_NODE;
|
|
54
|
-
if (isTripleClick) {
|
|
55
|
-
let p = startContainer;
|
|
56
|
-
while (p && p.nodeName !== 'P' && p !== rendererDOM) {
|
|
57
|
-
p = p.parentNode;
|
|
58
|
-
}
|
|
59
|
-
if (p && p.nodeName === 'P' && p instanceof Element) {
|
|
60
|
-
const range = document.createRange();
|
|
61
|
-
range.selectNodeContents(p);
|
|
62
|
-
sel.removeAllRanges();
|
|
63
|
-
sel.addRange(range);
|
|
64
|
-
_range = sel.getRangeAt(0);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
setSelectionRange(_range.cloneRange());
|
|
68
|
-
lastRangeRef.current = _range;
|
|
69
|
-
}
|
|
70
|
-
}, 100);
|
|
71
|
-
} else {
|
|
72
|
-
if (selectionTimeoutRef.current) {
|
|
73
|
-
clearTimeout(selectionTimeoutRef.current);
|
|
41
|
+
// Skip if the selection hasn't changed
|
|
42
|
+
if (lastRangeRef.current && _range.compareBoundaryPoints(Range.START_TO_START, lastRangeRef.current) === 0 && _range.compareBoundaryPoints(Range.END_TO_END, lastRangeRef.current) === 0) {
|
|
43
|
+
return;
|
|
74
44
|
}
|
|
75
|
-
|
|
76
|
-
const
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
45
|
+
if (rendererDOM && isRangeInsideOfRendererContainer(rendererDOM, _range)) {
|
|
46
|
+
const {
|
|
47
|
+
startContainer,
|
|
48
|
+
endContainer
|
|
49
|
+
} = _range;
|
|
50
|
+
const isTripleClick = endContainer.nodeType !== Node.TEXT_NODE;
|
|
51
|
+
if (isTripleClick) {
|
|
52
|
+
let p = startContainer;
|
|
53
|
+
while (p && p.nodeName !== 'P' && p !== rendererDOM) {
|
|
54
|
+
p = p.parentNode;
|
|
80
55
|
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
endContainer,
|
|
88
|
-
commonAncestorContainer
|
|
89
|
-
} = _range;
|
|
90
|
-
const parentNode = startContainer.parentNode;
|
|
91
|
-
|
|
92
|
-
// ED-23493
|
|
93
|
-
// On triple-click in Chrome and Safari, the native Selection API's range has endContainer as a non-text node
|
|
94
|
-
// and commonAncestorContainer as root level div.ak-renderer-document when the node is followed by div or hr.
|
|
95
|
-
|
|
96
|
-
// Triple clicks are the only case that can cause the endContainer to be a non-text node
|
|
97
|
-
// Same check for highlight range logic in confluence/next/packages/comments-util/src/domUtils.ts Line 180
|
|
98
|
-
const isTripleClick = endContainer.nodeType !== Node.TEXT_NODE;
|
|
99
|
-
|
|
100
|
-
// isAnnotationAllowedOnRange range validation is checking if the parent container is root element and disable the comment if it is.
|
|
101
|
-
// platform/packages/editor/renderer/src/steps/index.ts Line 180
|
|
102
|
-
|
|
103
|
-
// This workaround ensures the endContainer is set to a text node when endContainer is non-text and the parent container is the root element
|
|
104
|
-
if (isTripleClick && commonAncestorContainer && commonAncestorContainer.nodeType === Node.ELEMENT_NODE &&
|
|
105
|
-
// Ignored via go/ees005
|
|
106
|
-
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
107
|
-
isRoot(commonAncestorContainer) && (parentNode === null || parentNode === void 0 ? void 0 : parentNode.nodeName) === 'P' // ignore if the parent node is strong, em, etc.
|
|
108
|
-
) {
|
|
109
|
-
var _parentNode$lastChild, _parentNode$lastChild2;
|
|
110
|
-
const lastChild = parentNode !== null && parentNode !== void 0 && parentNode.lastChild && (parentNode === null || parentNode === void 0 ? void 0 : (_parentNode$lastChild = parentNode.lastChild) === null || _parentNode$lastChild === void 0 ? void 0 : _parentNode$lastChild.nodeType) === Node.TEXT_NODE ? parentNode === null || parentNode === void 0 ? void 0 : parentNode.lastChild : parentNode === null || parentNode === void 0 ? void 0 : (_parentNode$lastChild2 = parentNode.lastChild) === null || _parentNode$lastChild2 === void 0 ? void 0 : _parentNode$lastChild2.childNodes[0];
|
|
111
|
-
_range.setEnd(lastChild, lastChild.length || 0);
|
|
56
|
+
if (p && p.nodeName === 'P' && p instanceof Element) {
|
|
57
|
+
const range = document.createRange();
|
|
58
|
+
range.selectNodeContents(p);
|
|
59
|
+
sel.removeAllRanges();
|
|
60
|
+
sel.addRange(range);
|
|
61
|
+
_range = sel.getRangeAt(0);
|
|
112
62
|
}
|
|
113
|
-
setSelectionRange(_range.cloneRange());
|
|
114
63
|
}
|
|
115
|
-
|
|
116
|
-
|
|
64
|
+
setSelectionRange(_range.cloneRange());
|
|
65
|
+
lastRangeRef.current = _range;
|
|
66
|
+
}
|
|
67
|
+
}, 100);
|
|
117
68
|
}, [rendererDOM, setSelectionRange, clearSelectionRange, isAnnotationManagerEnabled]);
|
|
118
69
|
useEffect(() => {
|
|
119
70
|
if (!document || !rendererDOM) {
|
|
@@ -26,6 +26,16 @@ var datasourceContainerStyle = css({
|
|
|
26
26
|
marginBottom: "var(--ds-space-150, 0.75rem)",
|
|
27
27
|
transform: 'translateX(-50%)'
|
|
28
28
|
});
|
|
29
|
+
var datasourceContainerStyleWithMarginTop = css({
|
|
30
|
+
borderRadius: "var(--ds-radius-large, 8px)",
|
|
31
|
+
border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(N40, ")")),
|
|
32
|
+
overflow: 'hidden',
|
|
33
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
34
|
+
marginLeft: '50%',
|
|
35
|
+
marginBottom: "var(--ds-space-150, 0.75rem)",
|
|
36
|
+
transform: 'translateX(-50%)',
|
|
37
|
+
marginTop: "var(--ds-space-150, 0.75rem)"
|
|
38
|
+
});
|
|
29
39
|
export default function BlockCard(props) {
|
|
30
40
|
var url = props.url,
|
|
31
41
|
data = props.data,
|
|
@@ -98,7 +108,7 @@ export default function BlockCard(props) {
|
|
|
98
108
|
}, cardProps), jsx(WidthConsumer, null, function (_ref5) {
|
|
99
109
|
var width = _ref5.width;
|
|
100
110
|
return jsx("div", {
|
|
101
|
-
css: datasourceContainerStyle,
|
|
111
|
+
css: fg('platform_editor_fix_sllv_margin_renderer') ? datasourceContainerStyleWithMarginTop : datasourceContainerStyle,
|
|
102
112
|
"data-testid": "renderer-datasource-table",
|
|
103
113
|
"data-local-id": localId,
|
|
104
114
|
style: {
|
|
@@ -1291,21 +1291,6 @@ var rendererTableSortableColumnStyles = css(_defineProperty({}, ".".concat(Rende
|
|
|
1291
1291
|
})), "&:hover:not(\n\t\t\t\t\t\t\t:has(\n\t\t\t\t\t\t\t\t\t.".concat(RendererCssClassName.SORTABLE_COLUMN_WRAPPER, "\n\t\t\t\t\t\t\t\t\t\t.").concat(RendererCssClassName.SORTABLE_COLUMN, ":hover\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t\t> .").concat(RendererCssClassName.SORTABLE_COLUMN, "\n\t\t\t\t\t\t> .").concat(RendererCssClassName.SORTABLE_COLUMN_NO_ORDER), _defineProperty({}, ".".concat(SORTABLE_COLUMN_ICON_CLASSNAME), {
|
|
1292
1292
|
opacity: 1
|
|
1293
1293
|
}))))));
|
|
1294
|
-
|
|
1295
|
-
// TODO: ED-27229 - Cleanup with `platform_editor_tables_numbered_column_correction`
|
|
1296
|
-
var rendererTableColumnStylesOld = css(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " .").concat(TableSharedCssClassName.TABLE_CONTAINER), {
|
|
1297
|
-
'table[data-number-column="true"]': _defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.NUMBER_COLUMN), {
|
|
1298
|
-
backgroundColor: "".concat("var(--ds-background-neutral, ".concat(akEditorTableToolbar, ")")),
|
|
1299
|
-
borderRight: "var(--ds-border-width, 1px)".concat(" solid\n\t\t\t\t\t\t\t\t", "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")")),
|
|
1300
|
-
width: "".concat(akEditorTableNumberColumnWidth, "px"),
|
|
1301
|
-
textAlign: 'center',
|
|
1302
|
-
color: "".concat("var(--ds-text-subtlest, ".concat(N200, ")")),
|
|
1303
|
-
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
1304
|
-
fontSize: "".concat(14 / 16, " rem")
|
|
1305
|
-
}), ".fixed .".concat(RendererCssClassName.NUMBER_COLUMN), {
|
|
1306
|
-
borderRight: "0px none"
|
|
1307
|
-
})
|
|
1308
|
-
}));
|
|
1309
1294
|
var rendererTableColumnStyles = css(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " .").concat(TableSharedCssClassName.TABLE_CONTAINER), {
|
|
1310
1295
|
'table[data-number-column="true"]': _defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.NUMBER_COLUMN), {
|
|
1311
1296
|
backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
|
|
@@ -1607,7 +1592,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
|
|
|
1607
1592
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
1608
1593
|
fg('editor_inline_comments_on_inline_nodes') && fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
|
|
1609
1594
|
// merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
|
|
1610
|
-
fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks,
|
|
1595
|
+
fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, appearance === 'full-width' && responsiveBreakoutWidthFullWidth, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') && denseStyles],
|
|
1611
1596
|
"data-testid": testId
|
|
1612
1597
|
}, children)
|
|
1613
1598
|
);
|
|
@@ -59,7 +59,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
|
59
59
|
// we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
|
|
60
60
|
var TABLE_WIDTH_INFO_TIMEOUT = 10000;
|
|
61
61
|
var packageName = "@atlaskit/renderer";
|
|
62
|
-
var packageVersion = "
|
|
62
|
+
var packageVersion = "0.0.0-development";
|
|
63
63
|
var setAsQueryContainerStyles = css({
|
|
64
64
|
containerName: 'ak-renderer-wrapper',
|
|
65
65
|
containerType: 'inline-size'
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { useEffect, useRef, useCallback } from 'react';
|
|
2
2
|
import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
|
|
3
3
|
import { isRangeInsideOfRendererContainer } from './utils';
|
|
4
|
-
import { isRoot } from '../../../steps';
|
|
5
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
4
|
import { useAnnotationManagerDispatch } from '../contexts/AnnotationManagerContext';
|
|
7
5
|
export var useUserSelectionRange = function useUserSelectionRange(props) {
|
|
8
6
|
var rendererDOM = props.rendererRef.current;
|
|
@@ -19,91 +17,46 @@ export var useUserSelectionRange = function useUserSelectionRange(props) {
|
|
|
19
17
|
var lastRangeRef = useRef(null);
|
|
20
18
|
var isAnnotationManagerEnabled = !!annotationManager;
|
|
21
19
|
var onSelectionChange = useCallback(function (event) {
|
|
22
|
-
if (
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
clearSelectionRange();
|
|
32
|
-
}
|
|
33
|
-
return;
|
|
20
|
+
if (selectionTimeoutRef.current) {
|
|
21
|
+
clearTimeout(selectionTimeoutRef.current);
|
|
22
|
+
}
|
|
23
|
+
selectionTimeoutRef.current = setTimeout(function () {
|
|
24
|
+
var sel = document.getSelection();
|
|
25
|
+
if (!sel || sel.type !== 'Range' || sel.rangeCount !== 1) {
|
|
26
|
+
lastRangeRef.current = null; // Clear last range if selection is invalid
|
|
27
|
+
if (isAnnotationManagerEnabled) {
|
|
28
|
+
clearSelectionRange();
|
|
34
29
|
}
|
|
35
|
-
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
var _range = sel.getRangeAt(0);
|
|
36
33
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
if (rendererDOM && isRangeInsideOfRendererContainer(rendererDOM, _range)) {
|
|
42
|
-
var _range2 = _range,
|
|
43
|
-
startContainer = _range2.startContainer,
|
|
44
|
-
endContainer = _range2.endContainer;
|
|
45
|
-
var isTripleClick = endContainer.nodeType !== Node.TEXT_NODE;
|
|
46
|
-
if (isTripleClick) {
|
|
47
|
-
var 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
|
-
var _range3 = document.createRange();
|
|
53
|
-
_range3.selectNodeContents(p);
|
|
54
|
-
sel.removeAllRanges();
|
|
55
|
-
sel.addRange(_range3);
|
|
56
|
-
_range = sel.getRangeAt(0);
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
setSelectionRange(_range.cloneRange());
|
|
60
|
-
lastRangeRef.current = _range;
|
|
61
|
-
}
|
|
62
|
-
}, 100);
|
|
63
|
-
} else {
|
|
64
|
-
if (selectionTimeoutRef.current) {
|
|
65
|
-
clearTimeout(selectionTimeoutRef.current);
|
|
34
|
+
// Skip if the selection hasn't changed
|
|
35
|
+
if (lastRangeRef.current && _range.compareBoundaryPoints(Range.START_TO_START, lastRangeRef.current) === 0 && _range.compareBoundaryPoints(Range.END_TO_END, lastRangeRef.current) === 0) {
|
|
36
|
+
return;
|
|
66
37
|
}
|
|
67
|
-
|
|
68
|
-
var
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
38
|
+
if (rendererDOM && isRangeInsideOfRendererContainer(rendererDOM, _range)) {
|
|
39
|
+
var _range2 = _range,
|
|
40
|
+
startContainer = _range2.startContainer,
|
|
41
|
+
endContainer = _range2.endContainer;
|
|
42
|
+
var isTripleClick = endContainer.nodeType !== Node.TEXT_NODE;
|
|
43
|
+
if (isTripleClick) {
|
|
44
|
+
var p = startContainer;
|
|
45
|
+
while (p && p.nodeName !== 'P' && p !== rendererDOM) {
|
|
46
|
+
p = p.parentNode;
|
|
72
47
|
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
commonAncestorContainer = _range.commonAncestorContainer;
|
|
80
|
-
var parentNode = startContainer.parentNode;
|
|
81
|
-
|
|
82
|
-
// ED-23493
|
|
83
|
-
// On triple-click in Chrome and Safari, the native Selection API's range has endContainer as a non-text node
|
|
84
|
-
// and commonAncestorContainer as root level div.ak-renderer-document when the node is followed by div or hr.
|
|
85
|
-
|
|
86
|
-
// Triple clicks are the only case that can cause the endContainer to be a non-text node
|
|
87
|
-
// Same check for highlight range logic in confluence/next/packages/comments-util/src/domUtils.ts Line 180
|
|
88
|
-
var isTripleClick = endContainer.nodeType !== Node.TEXT_NODE;
|
|
89
|
-
|
|
90
|
-
// isAnnotationAllowedOnRange range validation is checking if the parent container is root element and disable the comment if it is.
|
|
91
|
-
// platform/packages/editor/renderer/src/steps/index.ts Line 180
|
|
92
|
-
|
|
93
|
-
// This workaround ensures the endContainer is set to a text node when endContainer is non-text and the parent container is the root element
|
|
94
|
-
if (isTripleClick && commonAncestorContainer && commonAncestorContainer.nodeType === Node.ELEMENT_NODE &&
|
|
95
|
-
// Ignored via go/ees005
|
|
96
|
-
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
97
|
-
isRoot(commonAncestorContainer) && (parentNode === null || parentNode === void 0 ? void 0 : parentNode.nodeName) === 'P' // ignore if the parent node is strong, em, etc.
|
|
98
|
-
) {
|
|
99
|
-
var _parentNode$lastChild, _parentNode$lastChild2;
|
|
100
|
-
var lastChild = parentNode !== null && parentNode !== void 0 && parentNode.lastChild && (parentNode === null || parentNode === void 0 || (_parentNode$lastChild = parentNode.lastChild) === null || _parentNode$lastChild === void 0 ? void 0 : _parentNode$lastChild.nodeType) === Node.TEXT_NODE ? parentNode === null || parentNode === void 0 ? void 0 : parentNode.lastChild : parentNode === null || parentNode === void 0 || (_parentNode$lastChild2 = parentNode.lastChild) === null || _parentNode$lastChild2 === void 0 ? void 0 : _parentNode$lastChild2.childNodes[0];
|
|
101
|
-
_range.setEnd(lastChild, lastChild.length || 0);
|
|
48
|
+
if (p && p.nodeName === 'P' && p instanceof Element) {
|
|
49
|
+
var _range3 = document.createRange();
|
|
50
|
+
_range3.selectNodeContents(p);
|
|
51
|
+
sel.removeAllRanges();
|
|
52
|
+
sel.addRange(_range3);
|
|
53
|
+
_range = sel.getRangeAt(0);
|
|
102
54
|
}
|
|
103
|
-
setSelectionRange(_range.cloneRange());
|
|
104
55
|
}
|
|
105
|
-
|
|
106
|
-
|
|
56
|
+
setSelectionRange(_range.cloneRange());
|
|
57
|
+
lastRangeRef.current = _range;
|
|
58
|
+
}
|
|
59
|
+
}, 100);
|
|
107
60
|
}, [rendererDOM, setSelectionRange, clearSelectionRange, isAnnotationManagerEnabled]);
|
|
108
61
|
useEffect(function () {
|
|
109
62
|
if (!document || !rendererDOM) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/renderer",
|
|
3
|
-
"version": "124.9.
|
|
3
|
+
"version": "124.9.10",
|
|
4
4
|
"description": "Renderer component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@atlaskit/feature-gate-js-client": "^5.5.0",
|
|
42
42
|
"@atlaskit/icon": "^28.5.0",
|
|
43
43
|
"@atlaskit/link": "^3.2.0",
|
|
44
|
-
"@atlaskit/link-datasource": "^4.
|
|
44
|
+
"@atlaskit/link-datasource": "^4.29.0",
|
|
45
45
|
"@atlaskit/link-extractors": "^2.4.0",
|
|
46
46
|
"@atlaskit/media-card": "^79.6.0",
|
|
47
47
|
"@atlaskit/media-client": "^35.5.0",
|
|
@@ -170,9 +170,6 @@
|
|
|
170
170
|
"platform_editor_content_mode_button_mvp": {
|
|
171
171
|
"type": "boolean"
|
|
172
172
|
},
|
|
173
|
-
"platform_editor_tables_numbered_column_correction": {
|
|
174
|
-
"type": "boolean"
|
|
175
|
-
},
|
|
176
173
|
"platform_editor_nested_dnd_styles_changes": {
|
|
177
174
|
"type": "boolean"
|
|
178
175
|
},
|
|
@@ -185,9 +182,6 @@
|
|
|
185
182
|
"platform_renderer_isPresentational": {
|
|
186
183
|
"type": "boolean"
|
|
187
184
|
},
|
|
188
|
-
"platform_renderer_triple_click_selects_paragraph": {
|
|
189
|
-
"type": "boolean"
|
|
190
|
-
},
|
|
191
185
|
"platform_ssr_smartlink_embeds": {
|
|
192
186
|
"type": "boolean"
|
|
193
187
|
},
|
|
@@ -244,6 +238,9 @@
|
|
|
244
238
|
},
|
|
245
239
|
"media-perf-uplift-mutation-fix": {
|
|
246
240
|
"type": "boolean"
|
|
241
|
+
},
|
|
242
|
+
"platform_editor_fix_sllv_margin_renderer": {
|
|
243
|
+
"type": "boolean"
|
|
247
244
|
}
|
|
248
245
|
}
|
|
249
246
|
}
|