@atlaskit/renderer 122.2.0 → 122.3.0
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 +13 -0
- package/dist/cjs/react/index.js +2 -2
- package/dist/cjs/react/nodes/blockquote.js +3 -1
- package/dist/cjs/react/nodes/bulletList.js +1 -0
- package/dist/cjs/react/nodes/codeBlock/codeBlock.js +3 -1
- package/dist/cjs/react/nodes/codeBlock/components/codeBlockContainer.js +2 -0
- package/dist/cjs/react/nodes/heading.js +3 -1
- package/dist/cjs/react/nodes/layoutSection.js +4 -2
- package/dist/cjs/react/nodes/orderedList.js +1 -0
- package/dist/cjs/react/nodes/panel.js +3 -1
- package/dist/cjs/react/nodes/paragraph.js +6 -2
- package/dist/cjs/ui/Renderer/RendererStyleContainer.js +5 -0
- package/dist/cjs/ui/Renderer/index.js +1 -1
- package/dist/cjs/ui/hooks/useScrollToLocalId.js +59 -0
- package/dist/es2019/react/index.js +2 -2
- package/dist/es2019/react/nodes/blockquote.js +3 -1
- package/dist/es2019/react/nodes/bulletList.js +1 -0
- package/dist/es2019/react/nodes/codeBlock/codeBlock.js +3 -1
- package/dist/es2019/react/nodes/codeBlock/components/codeBlockContainer.js +2 -0
- package/dist/es2019/react/nodes/heading.js +3 -1
- package/dist/es2019/react/nodes/layoutSection.js +4 -2
- package/dist/es2019/react/nodes/orderedList.js +1 -0
- package/dist/es2019/react/nodes/panel.js +3 -1
- package/dist/es2019/react/nodes/paragraph.js +6 -2
- package/dist/es2019/ui/Renderer/RendererStyleContainer.js +5 -0
- package/dist/es2019/ui/Renderer/index.js +1 -1
- package/dist/es2019/ui/hooks/useScrollToLocalId.js +54 -0
- package/dist/esm/react/index.js +2 -2
- package/dist/esm/react/nodes/blockquote.js +3 -1
- package/dist/esm/react/nodes/bulletList.js +1 -0
- package/dist/esm/react/nodes/codeBlock/codeBlock.js +3 -1
- package/dist/esm/react/nodes/codeBlock/components/codeBlockContainer.js +2 -0
- package/dist/esm/react/nodes/heading.js +3 -1
- package/dist/esm/react/nodes/layoutSection.js +4 -2
- package/dist/esm/react/nodes/orderedList.js +1 -0
- package/dist/esm/react/nodes/panel.js +3 -1
- package/dist/esm/react/nodes/paragraph.js +6 -2
- package/dist/esm/ui/Renderer/RendererStyleContainer.js +5 -0
- package/dist/esm/ui/Renderer/index.js +1 -1
- package/dist/esm/ui/hooks/useScrollToLocalId.js +54 -0
- package/dist/types/react/nodes/blockquote.d.ts +3 -1
- package/dist/types/react/nodes/bulletList.d.ts +1 -0
- package/dist/types/react/nodes/codeBlock/codeBlock.d.ts +1 -0
- package/dist/types/react/nodes/codeBlock/components/codeBlockContainer.d.ts +2 -1
- package/dist/types/react/nodes/heading.d.ts +2 -1
- package/dist/types/react/nodes/layoutSection.d.ts +1 -0
- package/dist/types/react/nodes/orderedList.d.ts +1 -0
- package/dist/types/react/nodes/panel.d.ts +1 -0
- package/dist/types/react/nodes/paragraph.d.ts +1 -1
- package/dist/types/ui/hooks/useScrollToLocalId.d.ts +1 -0
- package/dist/types-ts4.5/react/nodes/blockquote.d.ts +3 -1
- package/dist/types-ts4.5/react/nodes/bulletList.d.ts +1 -0
- package/dist/types-ts4.5/react/nodes/codeBlock/codeBlock.d.ts +1 -0
- package/dist/types-ts4.5/react/nodes/codeBlock/components/codeBlockContainer.d.ts +2 -1
- package/dist/types-ts4.5/react/nodes/heading.d.ts +2 -1
- package/dist/types-ts4.5/react/nodes/layoutSection.d.ts +1 -0
- package/dist/types-ts4.5/react/nodes/orderedList.d.ts +1 -0
- package/dist/types-ts4.5/react/nodes/panel.d.ts +1 -0
- package/dist/types-ts4.5/react/nodes/paragraph.d.ts +1 -1
- package/dist/types-ts4.5/ui/hooks/useScrollToLocalId.d.ts +1 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 122.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`d352feb9b2d97`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d352feb9b2d97) -
|
|
8
|
+
[ux] NO-ISSUE Change blocktaskItem enablement experiment to a new tenantId based experiment
|
|
9
|
+
- [`b7f7b3822d9ed`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b7f7b3822d9ed) -
|
|
10
|
+
Add data-local-id on node components and scroll to block under platform_editor_block_menu FG
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
3
16
|
## 122.2.0
|
|
4
17
|
|
|
5
18
|
### Minor Changes
|
package/dist/cjs/react/index.js
CHANGED
|
@@ -67,10 +67,10 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
|
|
|
67
67
|
parentInfo = _ref.parentInfo;
|
|
68
68
|
var pos = _this.startPos;
|
|
69
69
|
var currentPath = parentInfo && parentInfo.path || [];
|
|
70
|
-
var parentIsIncompleteTask = (node.type.name === 'taskItem' || node.type.name === 'blockTaskItem' && (0, _expValEquals.expValEquals)('
|
|
70
|
+
var parentIsIncompleteTask = (node.type.name === 'taskItem' || node.type.name === 'blockTaskItem' && (0, _expValEquals.expValEquals)('platform_editor_blocktaskitem_node_tenantid', 'isEnabled', true)) && node.attrs.state !== 'DONE' ||
|
|
71
71
|
// If blockTaskItem is in the schema, check if the parent of the current node
|
|
72
72
|
// is an incomplete task item, because blockTaskItems can have nested nodes
|
|
73
|
-
node.type.schema.nodes.blockTaskItem && (parentInfo === null || parentInfo === void 0 ? void 0 : parentInfo.parentIsIncompleteTask) === true && (0, _expValEquals.expValEquals)('
|
|
73
|
+
node.type.schema.nodes.blockTaskItem && (parentInfo === null || parentInfo === void 0 ? void 0 : parentInfo.parentIsIncompleteTask) === true && (0, _expValEquals.expValEquals)('platform_editor_blocktaskitem_node_tenantid', 'isEnabled', true);
|
|
74
74
|
var nodeKey = "".concat(node.type.name, "__").concat(_this.startPos);
|
|
75
75
|
var serializedContent = _this.serializeFragment(node.content, _this.getNodeProps(node, parentInfo), (0, _nodes.toReact)(node, {
|
|
76
76
|
allowSelectAllTrap: _this.allowSelectAllTrap,
|
|
@@ -7,5 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = Blockquote;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
function Blockquote(props) {
|
|
10
|
-
return /*#__PURE__*/_react.default.createElement("blockquote",
|
|
10
|
+
return /*#__PURE__*/_react.default.createElement("blockquote", {
|
|
11
|
+
"data-local-id": props.localId
|
|
12
|
+
}, props.children);
|
|
11
13
|
}
|
|
@@ -12,6 +12,7 @@ function BulletList(props) {
|
|
|
12
12
|
return /*#__PURE__*/_react.default.createElement("ul", {
|
|
13
13
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
14
14
|
className: _adfSchema.bulletListSelector.substr(1),
|
|
15
|
+
"data-local-id": props.localId,
|
|
15
16
|
"data-indent-level": props.path ? (0, _lists.getListIndentLevel)(props.path) : 1
|
|
16
17
|
}, props.children);
|
|
17
18
|
}
|
|
@@ -27,7 +27,8 @@ function CodeBlock(props) {
|
|
|
27
27
|
allowCopyToClipboard = _props$allowCopyToCli === void 0 ? false : _props$allowCopyToCli,
|
|
28
28
|
_props$allowWrapCodeB = props.allowWrapCodeBlock,
|
|
29
29
|
allowWrapCodeBlock = _props$allowWrapCodeB === void 0 ? false : _props$allowWrapCodeB,
|
|
30
|
-
codeBidiWarningTooltipEnabled = props.codeBidiWarningTooltipEnabled
|
|
30
|
+
codeBidiWarningTooltipEnabled = props.codeBidiWarningTooltipEnabled,
|
|
31
|
+
localId = props.localId;
|
|
31
32
|
var codeBidiWarningLabel = props.intl.formatMessage(_messages.codeBidiWarningMessages.label);
|
|
32
33
|
var className = [_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, props.className].join(' ');
|
|
33
34
|
var _useState = (0, _react.useState)(false),
|
|
@@ -40,6 +41,7 @@ function CodeBlock(props) {
|
|
|
40
41
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
41
42
|
,
|
|
42
43
|
className: className,
|
|
44
|
+
localId: localId,
|
|
43
45
|
setWrapLongLines: setWrapLongLines,
|
|
44
46
|
text: text,
|
|
45
47
|
wrapLongLines: wrapLongLines
|
|
@@ -44,12 +44,14 @@ var CodeBlockContainer = function CodeBlockContainer(_ref) {
|
|
|
44
44
|
allowWrapCodeBlock = _ref.allowWrapCodeBlock,
|
|
45
45
|
children = _ref.children,
|
|
46
46
|
className = _ref.className,
|
|
47
|
+
localId = _ref.localId,
|
|
47
48
|
setWrapLongLines = _ref.setWrapLongLines,
|
|
48
49
|
text = _ref.text,
|
|
49
50
|
wrapLongLines = _ref.wrapLongLines;
|
|
50
51
|
return (0, _react.jsx)("div", {
|
|
51
52
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
52
53
|
className: className,
|
|
54
|
+
"data-local-id": localId,
|
|
53
55
|
css: codeBlockStyleOverrides
|
|
54
56
|
}, (0, _react.jsx)(_codeBlockButtonContainer.default, {
|
|
55
57
|
allowCopyToClipboard: allowCopyToClipboard,
|
|
@@ -56,7 +56,8 @@ function Heading(props) {
|
|
|
56
56
|
dataAttributes = props.dataAttributes,
|
|
57
57
|
allowHeadingAnchorLinks = props.allowHeadingAnchorLinks,
|
|
58
58
|
marks = props.marks,
|
|
59
|
-
invisible = props.invisible
|
|
59
|
+
invisible = props.invisible,
|
|
60
|
+
localId = props.localId;
|
|
60
61
|
var HX = "h".concat(props.level);
|
|
61
62
|
var mouseEntered = _react.default.useRef(false);
|
|
62
63
|
var showAnchorLink = !!props.showAnchorLink;
|
|
@@ -74,6 +75,7 @@ function Heading(props) {
|
|
|
74
75
|
};
|
|
75
76
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HX, {
|
|
76
77
|
id: headingIdToUse,
|
|
78
|
+
"data-local-id": localId,
|
|
77
79
|
"data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
|
|
78
80
|
onMouseEnter: mouseEnterHandler
|
|
79
81
|
}, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showAnchorLink && headingId && isRightAligned && /*#__PURE__*/_react.default.createElement(WrappedHeadingAnchor, {
|
|
@@ -13,11 +13,13 @@ function LayoutSection(props) {
|
|
|
13
13
|
/*#__PURE__*/
|
|
14
14
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
15
15
|
_react.default.createElement("div", {
|
|
16
|
-
className: "layout-section-container"
|
|
16
|
+
className: "layout-section-container",
|
|
17
|
+
"data-local-id": props.localId
|
|
17
18
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
18
19
|
"data-layout-section": true,
|
|
19
20
|
"data-layout-columns": props === null || props === void 0 || (_props$content = props.content) === null || _props$content === void 0 ? void 0 : _props$content.length
|
|
20
21
|
}, props.children)) : /*#__PURE__*/_react.default.createElement("div", {
|
|
21
|
-
"data-layout-section": true
|
|
22
|
+
"data-layout-section": true,
|
|
23
|
+
"data-local-id": props.localId
|
|
22
24
|
}, props.children);
|
|
23
25
|
}
|
|
@@ -27,6 +27,7 @@ function OrderedList(props) {
|
|
|
27
27
|
return /*#__PURE__*/_react.default.createElement("ol", (0, _extends2.default)({
|
|
28
28
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
29
29
|
className: _adfSchema.orderedListSelector.substr(1),
|
|
30
|
+
"data-local-id": props.localId,
|
|
30
31
|
"data-indent-level": props.path ? (0, _lists.getListIndentLevel)(props.path) : 1,
|
|
31
32
|
start: props.start
|
|
32
33
|
// Ignored via go/ees005
|
|
@@ -203,7 +203,8 @@ var Panel = function Panel(props) {
|
|
|
203
203
|
panelIconId = props.panelIconId,
|
|
204
204
|
panelIconText = props.panelIconText,
|
|
205
205
|
providers = props.providers,
|
|
206
|
-
children = props.children
|
|
206
|
+
children = props.children,
|
|
207
|
+
localId = props.localId;
|
|
207
208
|
// only allow custom panel type if flag is set
|
|
208
209
|
// otherwise fall back to info if custom panel is given
|
|
209
210
|
var panelType = allowCustomPanels ? type : type === _adfSchema.PanelType.CUSTOM ? _adfSchema.PanelType.INFO : type;
|
|
@@ -237,6 +238,7 @@ var Panel = function Panel(props) {
|
|
|
237
238
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
238
239
|
, {
|
|
239
240
|
className: _panel.PanelSharedCssClassName.prefix,
|
|
241
|
+
"data-local-id": localId,
|
|
240
242
|
"data-panel-type": panelType,
|
|
241
243
|
"data-panel-color": panelColor,
|
|
242
244
|
"data-panel-icon": panelIcon,
|
|
@@ -5,17 +5,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.default = Paragraph;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
8
9
|
var _react = _interopRequireDefault(require("react"));
|
|
9
10
|
var _inline = _interopRequireDefault(require("./inline"));
|
|
10
11
|
function Paragraph(_ref) {
|
|
11
12
|
var children = _ref.children,
|
|
12
|
-
dataAttributes = _ref.dataAttributes
|
|
13
|
+
dataAttributes = _ref.dataAttributes,
|
|
14
|
+
localId = _ref.localId;
|
|
13
15
|
return (
|
|
14
16
|
/*#__PURE__*/
|
|
15
17
|
// ignore the eslint warning Text primitive does not support dataAttributes
|
|
16
18
|
// eslint-disable-next-line @atlaskit/design-system/use-primitives-text
|
|
17
19
|
// Ignored via go/ees005
|
|
18
20
|
// eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/use-primitives-text
|
|
19
|
-
_react.default.createElement("p",
|
|
21
|
+
_react.default.createElement("p", (0, _extends2.default)({}, dataAttributes, {
|
|
22
|
+
"data-local-id": localId
|
|
23
|
+
}), /*#__PURE__*/_react.default.createElement(_inline.default, null, children))
|
|
20
24
|
);
|
|
21
25
|
}
|
|
@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.RendererStyleContainer = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
|
+
var _useScrollToLocalId = require("../hooks/useScrollToLocalId");
|
|
10
11
|
var _colors = require("@atlaskit/theme/colors");
|
|
11
12
|
var _style = require("./style");
|
|
12
13
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
14
|
+
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
13
15
|
var _consts = require("../../consts");
|
|
14
16
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
15
17
|
var _mediaInline = require("@atlaskit/editor-common/media-inline");
|
|
@@ -1480,6 +1482,9 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
|
|
|
1480
1482
|
children = props.children,
|
|
1481
1483
|
innerRef = props.innerRef,
|
|
1482
1484
|
testId = props.testId;
|
|
1485
|
+
|
|
1486
|
+
// Scroll to localId functionality
|
|
1487
|
+
(0, _useScrollToLocalId.useScrollToLocalId)(innerRef, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true));
|
|
1483
1488
|
var isAdvancedLayoutsOn = (0, _experiments.editorExperiment)('advanced_layouts', true);
|
|
1484
1489
|
var isPreviewPanelResponsivenessOn = (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
|
|
1485
1490
|
exposure: true
|
|
@@ -63,7 +63,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
63
63
|
var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
64
64
|
var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
65
65
|
var packageName = "@atlaskit/renderer";
|
|
66
|
-
var packageVersion = "122.
|
|
66
|
+
var packageVersion = "122.2.0";
|
|
67
67
|
var setAsQueryContainerStyles = (0, _react2.css)({
|
|
68
68
|
containerName: 'ak-renderer-wrapper',
|
|
69
69
|
containerType: 'inline-size'
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useScrollToLocalId = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
// Find editor node dom with localId - similar to confluence useScrollOnUrlChange.ts
|
|
9
|
+
var getLocalIdSelector = function getLocalIdSelector(localId, container) {
|
|
10
|
+
// Check if the element with data-local-id exists
|
|
11
|
+
var element = container.querySelector("[data-local-id=\"".concat(localId, "\"]"));
|
|
12
|
+
if (element) {
|
|
13
|
+
return element;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
// Special case for decision lists and task lists which already have localId
|
|
17
|
+
element = container.querySelector("[data-decision-list-local-id=\"".concat(localId, "\"]"));
|
|
18
|
+
if (element) {
|
|
19
|
+
return element;
|
|
20
|
+
}
|
|
21
|
+
element = container.querySelector("[data-task-list-local-id=\"".concat(localId, "\"]"));
|
|
22
|
+
if (element) {
|
|
23
|
+
return element;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
// Special case for tables which use data-table-local-id
|
|
27
|
+
element = container.querySelector("[data-table-local-id=\"".concat(localId, "\"]"));
|
|
28
|
+
if (element) {
|
|
29
|
+
return element;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
// Special case for extension, smart cards and media which use lowercase localid
|
|
33
|
+
element = container.querySelector("[localid=\"".concat(localId, "\"]"));
|
|
34
|
+
if (element) {
|
|
35
|
+
return element;
|
|
36
|
+
}
|
|
37
|
+
return null;
|
|
38
|
+
};
|
|
39
|
+
var useScrollToLocalId = exports.useScrollToLocalId = function useScrollToLocalId(containerRef, shouldScrollToLocalId) {
|
|
40
|
+
(0, _react.useEffect)(function () {
|
|
41
|
+
// Only run in browser environment
|
|
42
|
+
if (typeof window === 'undefined' || !(containerRef !== null && containerRef !== void 0 && containerRef.current) || !shouldScrollToLocalId) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
// Parse URL parameters for block ID
|
|
47
|
+
var urlParams = new URLSearchParams(window.location.search);
|
|
48
|
+
var blockId = urlParams.get('block');
|
|
49
|
+
if (blockId) {
|
|
50
|
+
// Search within the renderer container using the selector function
|
|
51
|
+
var element = getLocalIdSelector(blockId, containerRef.current);
|
|
52
|
+
if (element) {
|
|
53
|
+
element.scrollIntoView({
|
|
54
|
+
behavior: 'smooth'
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}, [containerRef, shouldScrollToLocalId]);
|
|
59
|
+
};
|
|
@@ -52,10 +52,10 @@ export default class ReactSerializer {
|
|
|
52
52
|
}) => {
|
|
53
53
|
const pos = this.startPos;
|
|
54
54
|
const currentPath = parentInfo && parentInfo.path || [];
|
|
55
|
-
const parentIsIncompleteTask = (node.type.name === 'taskItem' || node.type.name === 'blockTaskItem' && expValEquals('
|
|
55
|
+
const parentIsIncompleteTask = (node.type.name === 'taskItem' || node.type.name === 'blockTaskItem' && expValEquals('platform_editor_blocktaskitem_node_tenantid', 'isEnabled', true)) && node.attrs.state !== 'DONE' ||
|
|
56
56
|
// If blockTaskItem is in the schema, check if the parent of the current node
|
|
57
57
|
// is an incomplete task item, because blockTaskItems can have nested nodes
|
|
58
|
-
node.type.schema.nodes.blockTaskItem && (parentInfo === null || parentInfo === void 0 ? void 0 : parentInfo.parentIsIncompleteTask) === true && expValEquals('
|
|
58
|
+
node.type.schema.nodes.blockTaskItem && (parentInfo === null || parentInfo === void 0 ? void 0 : parentInfo.parentIsIncompleteTask) === true && expValEquals('platform_editor_blocktaskitem_node_tenantid', 'isEnabled', true);
|
|
59
59
|
const nodeKey = `${node.type.name}__${this.startPos}`;
|
|
60
60
|
const serializedContent = this.serializeFragment(node.content, this.getNodeProps(node, parentInfo), toReact(node, {
|
|
61
61
|
allowSelectAllTrap: this.allowSelectAllTrap,
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export default function Blockquote(props) {
|
|
3
|
-
return /*#__PURE__*/React.createElement("blockquote",
|
|
3
|
+
return /*#__PURE__*/React.createElement("blockquote", {
|
|
4
|
+
"data-local-id": props.localId
|
|
5
|
+
}, props.children);
|
|
4
6
|
}
|
|
@@ -5,6 +5,7 @@ export default function BulletList(props) {
|
|
|
5
5
|
return /*#__PURE__*/React.createElement("ul", {
|
|
6
6
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
7
7
|
className: bulletListSelector.substr(1),
|
|
8
|
+
"data-local-id": props.localId,
|
|
8
9
|
"data-indent-level": props.path ? getListIndentLevel(props.path) : 1
|
|
9
10
|
}, props.children);
|
|
10
11
|
}
|
|
@@ -16,7 +16,8 @@ function CodeBlock(props) {
|
|
|
16
16
|
language,
|
|
17
17
|
allowCopyToClipboard = false,
|
|
18
18
|
allowWrapCodeBlock = false,
|
|
19
|
-
codeBidiWarningTooltipEnabled
|
|
19
|
+
codeBidiWarningTooltipEnabled,
|
|
20
|
+
localId
|
|
20
21
|
} = props;
|
|
21
22
|
const codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
|
|
22
23
|
const className = [CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, props.className].join(' ');
|
|
@@ -27,6 +28,7 @@ function CodeBlock(props) {
|
|
|
27
28
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
28
29
|
,
|
|
29
30
|
className: className,
|
|
31
|
+
localId: localId,
|
|
30
32
|
setWrapLongLines: setWrapLongLines,
|
|
31
33
|
text: text,
|
|
32
34
|
wrapLongLines: wrapLongLines
|
|
@@ -69,6 +69,7 @@ const CodeBlockContainer = ({
|
|
|
69
69
|
allowWrapCodeBlock,
|
|
70
70
|
children,
|
|
71
71
|
className,
|
|
72
|
+
localId,
|
|
72
73
|
setWrapLongLines,
|
|
73
74
|
text,
|
|
74
75
|
wrapLongLines
|
|
@@ -76,6 +77,7 @@ const CodeBlockContainer = ({
|
|
|
76
77
|
return jsx("div", {
|
|
77
78
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
78
79
|
className: className,
|
|
80
|
+
"data-local-id": localId,
|
|
79
81
|
css: codeBlockStyleOverrides
|
|
80
82
|
}, jsx(CodeBlockButtonContainer, {
|
|
81
83
|
allowCopyToClipboard: allowCopyToClipboard,
|
|
@@ -47,7 +47,8 @@ function Heading(props) {
|
|
|
47
47
|
dataAttributes,
|
|
48
48
|
allowHeadingAnchorLinks,
|
|
49
49
|
marks,
|
|
50
|
-
invisible
|
|
50
|
+
invisible,
|
|
51
|
+
localId
|
|
51
52
|
} = props;
|
|
52
53
|
const HX = `h${props.level}`;
|
|
53
54
|
const mouseEntered = React.useRef(false);
|
|
@@ -66,6 +67,7 @@ function Heading(props) {
|
|
|
66
67
|
};
|
|
67
68
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HX, {
|
|
68
69
|
id: headingIdToUse,
|
|
70
|
+
"data-local-id": localId,
|
|
69
71
|
"data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
|
|
70
72
|
onMouseEnter: mouseEnterHandler
|
|
71
73
|
}, /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && headingId && isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
|
|
@@ -6,11 +6,13 @@ export default function LayoutSection(props) {
|
|
|
6
6
|
/*#__PURE__*/
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
8
8
|
React.createElement("div", {
|
|
9
|
-
className: "layout-section-container"
|
|
9
|
+
className: "layout-section-container",
|
|
10
|
+
"data-local-id": props.localId
|
|
10
11
|
}, /*#__PURE__*/React.createElement("div", {
|
|
11
12
|
"data-layout-section": true,
|
|
12
13
|
"data-layout-columns": props === null || props === void 0 ? void 0 : (_props$content = props.content) === null || _props$content === void 0 ? void 0 : _props$content.length
|
|
13
14
|
}, props.children)) : /*#__PURE__*/React.createElement("div", {
|
|
14
|
-
"data-layout-section": true
|
|
15
|
+
"data-layout-section": true,
|
|
16
|
+
"data-local-id": props.localId
|
|
15
17
|
}, props.children);
|
|
16
18
|
}
|
|
@@ -20,6 +20,7 @@ export default function OrderedList(props) {
|
|
|
20
20
|
return /*#__PURE__*/React.createElement("ol", _extends({
|
|
21
21
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
22
22
|
className: orderedListSelector.substr(1),
|
|
23
|
+
"data-local-id": props.localId,
|
|
23
24
|
"data-indent-level": props.path ? getListIndentLevel(props.path) : 1,
|
|
24
25
|
start: props.start
|
|
25
26
|
// Ignored via go/ees005
|
|
@@ -196,7 +196,8 @@ const Panel = props => {
|
|
|
196
196
|
panelIconId,
|
|
197
197
|
panelIconText,
|
|
198
198
|
providers,
|
|
199
|
-
children
|
|
199
|
+
children,
|
|
200
|
+
localId
|
|
200
201
|
} = props;
|
|
201
202
|
// only allow custom panel type if flag is set
|
|
202
203
|
// otherwise fall back to info if custom panel is given
|
|
@@ -231,6 +232,7 @@ const Panel = props => {
|
|
|
231
232
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
232
233
|
, {
|
|
233
234
|
className: PanelSharedCssClassName.prefix,
|
|
235
|
+
"data-local-id": localId,
|
|
234
236
|
"data-panel-type": panelType,
|
|
235
237
|
"data-panel-color": panelColor,
|
|
236
238
|
"data-panel-icon": panelIcon,
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import Inline from './inline';
|
|
3
4
|
export default function Paragraph({
|
|
4
5
|
children,
|
|
5
|
-
dataAttributes
|
|
6
|
+
dataAttributes,
|
|
7
|
+
localId
|
|
6
8
|
}) {
|
|
7
9
|
return (
|
|
8
10
|
/*#__PURE__*/
|
|
@@ -10,6 +12,8 @@ export default function Paragraph({
|
|
|
10
12
|
// eslint-disable-next-line @atlaskit/design-system/use-primitives-text
|
|
11
13
|
// Ignored via go/ees005
|
|
12
14
|
// eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/use-primitives-text
|
|
13
|
-
React.createElement("p",
|
|
15
|
+
React.createElement("p", _extends({}, dataAttributes, {
|
|
16
|
+
"data-local-id": localId
|
|
17
|
+
}), /*#__PURE__*/React.createElement(Inline, null, children))
|
|
14
18
|
);
|
|
15
19
|
}
|
|
@@ -7,9 +7,11 @@
|
|
|
7
7
|
*/
|
|
8
8
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
9
9
|
import { css, jsx } from '@emotion/react';
|
|
10
|
+
import { useScrollToLocalId } from '../hooks/useScrollToLocalId';
|
|
10
11
|
import { B300, B400, B500, N20, N200, N30A, N40A, N60A, N800, R50, R500, Y300, Y75 } from '@atlaskit/theme/colors';
|
|
11
12
|
import { FullPagePadding } from './style';
|
|
12
13
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
|
+
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
13
15
|
import { RendererCssClassName } from '../../consts';
|
|
14
16
|
import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
|
|
15
17
|
import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
|
|
@@ -1881,6 +1883,9 @@ export const RendererStyleContainer = props => {
|
|
|
1881
1883
|
innerRef,
|
|
1882
1884
|
testId
|
|
1883
1885
|
} = props;
|
|
1886
|
+
|
|
1887
|
+
// Scroll to localId functionality
|
|
1888
|
+
useScrollToLocalId(innerRef, expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true));
|
|
1884
1889
|
const isAdvancedLayoutsOn = editorExperiment('advanced_layouts', true);
|
|
1885
1890
|
const isPreviewPanelResponsivenessOn = editorExperiment('platform_editor_preview_panel_responsiveness', true, {
|
|
1886
1891
|
exposure: true
|
|
@@ -49,7 +49,7 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
|
|
|
49
49
|
export const NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
50
50
|
export const DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
51
51
|
const packageName = "@atlaskit/renderer";
|
|
52
|
-
const packageVersion = "122.
|
|
52
|
+
const packageVersion = "122.2.0";
|
|
53
53
|
const setAsQueryContainerStyles = css({
|
|
54
54
|
containerName: 'ak-renderer-wrapper',
|
|
55
55
|
containerType: 'inline-size'
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
// Find editor node dom with localId - similar to confluence useScrollOnUrlChange.ts
|
|
4
|
+
const getLocalIdSelector = (localId, container) => {
|
|
5
|
+
// Check if the element with data-local-id exists
|
|
6
|
+
let element = container.querySelector(`[data-local-id="${localId}"]`);
|
|
7
|
+
if (element) {
|
|
8
|
+
return element;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// Special case for decision lists and task lists which already have localId
|
|
12
|
+
element = container.querySelector(`[data-decision-list-local-id="${localId}"]`);
|
|
13
|
+
if (element) {
|
|
14
|
+
return element;
|
|
15
|
+
}
|
|
16
|
+
element = container.querySelector(`[data-task-list-local-id="${localId}"]`);
|
|
17
|
+
if (element) {
|
|
18
|
+
return element;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// Special case for tables which use data-table-local-id
|
|
22
|
+
element = container.querySelector(`[data-table-local-id="${localId}"]`);
|
|
23
|
+
if (element) {
|
|
24
|
+
return element;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// Special case for extension, smart cards and media which use lowercase localid
|
|
28
|
+
element = container.querySelector(`[localid="${localId}"]`);
|
|
29
|
+
if (element) {
|
|
30
|
+
return element;
|
|
31
|
+
}
|
|
32
|
+
return null;
|
|
33
|
+
};
|
|
34
|
+
export const useScrollToLocalId = (containerRef, shouldScrollToLocalId) => {
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
// Only run in browser environment
|
|
37
|
+
if (typeof window === 'undefined' || !(containerRef !== null && containerRef !== void 0 && containerRef.current) || !shouldScrollToLocalId) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// Parse URL parameters for block ID
|
|
42
|
+
const urlParams = new URLSearchParams(window.location.search);
|
|
43
|
+
const blockId = urlParams.get('block');
|
|
44
|
+
if (blockId) {
|
|
45
|
+
// Search within the renderer container using the selector function
|
|
46
|
+
const element = getLocalIdSelector(blockId, containerRef.current);
|
|
47
|
+
if (element) {
|
|
48
|
+
element.scrollIntoView({
|
|
49
|
+
behavior: 'smooth'
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}, [containerRef, shouldScrollToLocalId]);
|
|
54
|
+
};
|
package/dist/esm/react/index.js
CHANGED
|
@@ -60,10 +60,10 @@ var ReactSerializer = /*#__PURE__*/function () {
|
|
|
60
60
|
parentInfo = _ref.parentInfo;
|
|
61
61
|
var pos = _this.startPos;
|
|
62
62
|
var currentPath = parentInfo && parentInfo.path || [];
|
|
63
|
-
var parentIsIncompleteTask = (node.type.name === 'taskItem' || node.type.name === 'blockTaskItem' && expValEquals('
|
|
63
|
+
var parentIsIncompleteTask = (node.type.name === 'taskItem' || node.type.name === 'blockTaskItem' && expValEquals('platform_editor_blocktaskitem_node_tenantid', 'isEnabled', true)) && node.attrs.state !== 'DONE' ||
|
|
64
64
|
// If blockTaskItem is in the schema, check if the parent of the current node
|
|
65
65
|
// is an incomplete task item, because blockTaskItems can have nested nodes
|
|
66
|
-
node.type.schema.nodes.blockTaskItem && (parentInfo === null || parentInfo === void 0 ? void 0 : parentInfo.parentIsIncompleteTask) === true && expValEquals('
|
|
66
|
+
node.type.schema.nodes.blockTaskItem && (parentInfo === null || parentInfo === void 0 ? void 0 : parentInfo.parentIsIncompleteTask) === true && expValEquals('platform_editor_blocktaskitem_node_tenantid', 'isEnabled', true);
|
|
67
67
|
var nodeKey = "".concat(node.type.name, "__").concat(_this.startPos);
|
|
68
68
|
var serializedContent = _this.serializeFragment(node.content, _this.getNodeProps(node, parentInfo), toReact(node, {
|
|
69
69
|
allowSelectAllTrap: _this.allowSelectAllTrap,
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export default function Blockquote(props) {
|
|
3
|
-
return /*#__PURE__*/React.createElement("blockquote",
|
|
3
|
+
return /*#__PURE__*/React.createElement("blockquote", {
|
|
4
|
+
"data-local-id": props.localId
|
|
5
|
+
}, props.children);
|
|
4
6
|
}
|
|
@@ -5,6 +5,7 @@ export default function BulletList(props) {
|
|
|
5
5
|
return /*#__PURE__*/React.createElement("ul", {
|
|
6
6
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
7
7
|
className: bulletListSelector.substr(1),
|
|
8
|
+
"data-local-id": props.localId,
|
|
8
9
|
"data-indent-level": props.path ? getListIndentLevel(props.path) : 1
|
|
9
10
|
}, props.children);
|
|
10
11
|
}
|
|
@@ -18,7 +18,8 @@ function CodeBlock(props) {
|
|
|
18
18
|
allowCopyToClipboard = _props$allowCopyToCli === void 0 ? false : _props$allowCopyToCli,
|
|
19
19
|
_props$allowWrapCodeB = props.allowWrapCodeBlock,
|
|
20
20
|
allowWrapCodeBlock = _props$allowWrapCodeB === void 0 ? false : _props$allowWrapCodeB,
|
|
21
|
-
codeBidiWarningTooltipEnabled = props.codeBidiWarningTooltipEnabled
|
|
21
|
+
codeBidiWarningTooltipEnabled = props.codeBidiWarningTooltipEnabled,
|
|
22
|
+
localId = props.localId;
|
|
22
23
|
var codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
|
|
23
24
|
var className = [CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, props.className].join(' ');
|
|
24
25
|
var _useState = useState(false),
|
|
@@ -31,6 +32,7 @@ function CodeBlock(props) {
|
|
|
31
32
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
32
33
|
,
|
|
33
34
|
className: className,
|
|
35
|
+
localId: localId,
|
|
34
36
|
setWrapLongLines: setWrapLongLines,
|
|
35
37
|
text: text,
|
|
36
38
|
wrapLongLines: wrapLongLines
|
|
@@ -36,12 +36,14 @@ var CodeBlockContainer = function CodeBlockContainer(_ref) {
|
|
|
36
36
|
allowWrapCodeBlock = _ref.allowWrapCodeBlock,
|
|
37
37
|
children = _ref.children,
|
|
38
38
|
className = _ref.className,
|
|
39
|
+
localId = _ref.localId,
|
|
39
40
|
setWrapLongLines = _ref.setWrapLongLines,
|
|
40
41
|
text = _ref.text,
|
|
41
42
|
wrapLongLines = _ref.wrapLongLines;
|
|
42
43
|
return jsx("div", {
|
|
43
44
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
44
45
|
className: className,
|
|
46
|
+
"data-local-id": localId,
|
|
45
47
|
css: codeBlockStyleOverrides
|
|
46
48
|
}, jsx(CodeBlockButtonContainer, {
|
|
47
49
|
allowCopyToClipboard: allowCopyToClipboard,
|
|
@@ -49,7 +49,8 @@ function Heading(props) {
|
|
|
49
49
|
dataAttributes = props.dataAttributes,
|
|
50
50
|
allowHeadingAnchorLinks = props.allowHeadingAnchorLinks,
|
|
51
51
|
marks = props.marks,
|
|
52
|
-
invisible = props.invisible
|
|
52
|
+
invisible = props.invisible,
|
|
53
|
+
localId = props.localId;
|
|
53
54
|
var HX = "h".concat(props.level);
|
|
54
55
|
var mouseEntered = React.useRef(false);
|
|
55
56
|
var showAnchorLink = !!props.showAnchorLink;
|
|
@@ -67,6 +68,7 @@ function Heading(props) {
|
|
|
67
68
|
};
|
|
68
69
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HX, {
|
|
69
70
|
id: headingIdToUse,
|
|
71
|
+
"data-local-id": localId,
|
|
70
72
|
"data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
|
|
71
73
|
onMouseEnter: mouseEnterHandler
|
|
72
74
|
}, /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && headingId && isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
|
|
@@ -6,11 +6,13 @@ export default function LayoutSection(props) {
|
|
|
6
6
|
/*#__PURE__*/
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
8
8
|
React.createElement("div", {
|
|
9
|
-
className: "layout-section-container"
|
|
9
|
+
className: "layout-section-container",
|
|
10
|
+
"data-local-id": props.localId
|
|
10
11
|
}, /*#__PURE__*/React.createElement("div", {
|
|
11
12
|
"data-layout-section": true,
|
|
12
13
|
"data-layout-columns": props === null || props === void 0 || (_props$content = props.content) === null || _props$content === void 0 ? void 0 : _props$content.length
|
|
13
14
|
}, props.children)) : /*#__PURE__*/React.createElement("div", {
|
|
14
|
-
"data-layout-section": true
|
|
15
|
+
"data-layout-section": true,
|
|
16
|
+
"data-local-id": props.localId
|
|
15
17
|
}, props.children);
|
|
16
18
|
}
|
|
@@ -20,6 +20,7 @@ export default function OrderedList(props) {
|
|
|
20
20
|
return /*#__PURE__*/React.createElement("ol", _extends({
|
|
21
21
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
22
22
|
className: orderedListSelector.substr(1),
|
|
23
|
+
"data-local-id": props.localId,
|
|
23
24
|
"data-indent-level": props.path ? getListIndentLevel(props.path) : 1,
|
|
24
25
|
start: props.start
|
|
25
26
|
// Ignored via go/ees005
|
|
@@ -196,7 +196,8 @@ var Panel = function Panel(props) {
|
|
|
196
196
|
panelIconId = props.panelIconId,
|
|
197
197
|
panelIconText = props.panelIconText,
|
|
198
198
|
providers = props.providers,
|
|
199
|
-
children = props.children
|
|
199
|
+
children = props.children,
|
|
200
|
+
localId = props.localId;
|
|
200
201
|
// only allow custom panel type if flag is set
|
|
201
202
|
// otherwise fall back to info if custom panel is given
|
|
202
203
|
var panelType = allowCustomPanels ? type : type === PanelType.CUSTOM ? PanelType.INFO : type;
|
|
@@ -230,6 +231,7 @@ var Panel = function Panel(props) {
|
|
|
230
231
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
231
232
|
, {
|
|
232
233
|
className: PanelSharedCssClassName.prefix,
|
|
234
|
+
"data-local-id": localId,
|
|
233
235
|
"data-panel-type": panelType,
|
|
234
236
|
"data-panel-color": panelColor,
|
|
235
237
|
"data-panel-icon": panelIcon,
|
|
@@ -1,14 +1,18 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import Inline from './inline';
|
|
3
4
|
export default function Paragraph(_ref) {
|
|
4
5
|
var children = _ref.children,
|
|
5
|
-
dataAttributes = _ref.dataAttributes
|
|
6
|
+
dataAttributes = _ref.dataAttributes,
|
|
7
|
+
localId = _ref.localId;
|
|
6
8
|
return (
|
|
7
9
|
/*#__PURE__*/
|
|
8
10
|
// ignore the eslint warning Text primitive does not support dataAttributes
|
|
9
11
|
// eslint-disable-next-line @atlaskit/design-system/use-primitives-text
|
|
10
12
|
// Ignored via go/ees005
|
|
11
13
|
// eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/use-primitives-text
|
|
12
|
-
React.createElement("p",
|
|
14
|
+
React.createElement("p", _extends({}, dataAttributes, {
|
|
15
|
+
"data-local-id": localId
|
|
16
|
+
}), /*#__PURE__*/React.createElement(Inline, null, children))
|
|
13
17
|
);
|
|
14
18
|
}
|
|
@@ -9,9 +9,11 @@ var _css, _css8;
|
|
|
9
9
|
*/
|
|
10
10
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
11
11
|
import { css, jsx } from '@emotion/react';
|
|
12
|
+
import { useScrollToLocalId } from '../hooks/useScrollToLocalId';
|
|
12
13
|
import { B300, B400, B500, N20, N200, N30A, N40A, N60A, N800, R50, R500, Y300, Y75 } from '@atlaskit/theme/colors';
|
|
13
14
|
import { FullPagePadding } from './style';
|
|
14
15
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
16
|
+
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
15
17
|
import { RendererCssClassName } from '../../consts';
|
|
16
18
|
import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
|
|
17
19
|
import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
|
|
@@ -1473,6 +1475,9 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
|
|
|
1473
1475
|
children = props.children,
|
|
1474
1476
|
innerRef = props.innerRef,
|
|
1475
1477
|
testId = props.testId;
|
|
1478
|
+
|
|
1479
|
+
// Scroll to localId functionality
|
|
1480
|
+
useScrollToLocalId(innerRef, expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true));
|
|
1476
1481
|
var isAdvancedLayoutsOn = editorExperiment('advanced_layouts', true);
|
|
1477
1482
|
var isPreviewPanelResponsivenessOn = editorExperiment('platform_editor_preview_panel_responsiveness', true, {
|
|
1478
1483
|
exposure: true
|
|
@@ -54,7 +54,7 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
|
|
|
54
54
|
export var NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
55
55
|
export var DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
56
56
|
var packageName = "@atlaskit/renderer";
|
|
57
|
-
var packageVersion = "122.
|
|
57
|
+
var packageVersion = "122.2.0";
|
|
58
58
|
var setAsQueryContainerStyles = css({
|
|
59
59
|
containerName: 'ak-renderer-wrapper',
|
|
60
60
|
containerType: 'inline-size'
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
// Find editor node dom with localId - similar to confluence useScrollOnUrlChange.ts
|
|
4
|
+
var getLocalIdSelector = function getLocalIdSelector(localId, container) {
|
|
5
|
+
// Check if the element with data-local-id exists
|
|
6
|
+
var element = container.querySelector("[data-local-id=\"".concat(localId, "\"]"));
|
|
7
|
+
if (element) {
|
|
8
|
+
return element;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// Special case for decision lists and task lists which already have localId
|
|
12
|
+
element = container.querySelector("[data-decision-list-local-id=\"".concat(localId, "\"]"));
|
|
13
|
+
if (element) {
|
|
14
|
+
return element;
|
|
15
|
+
}
|
|
16
|
+
element = container.querySelector("[data-task-list-local-id=\"".concat(localId, "\"]"));
|
|
17
|
+
if (element) {
|
|
18
|
+
return element;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// Special case for tables which use data-table-local-id
|
|
22
|
+
element = container.querySelector("[data-table-local-id=\"".concat(localId, "\"]"));
|
|
23
|
+
if (element) {
|
|
24
|
+
return element;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// Special case for extension, smart cards and media which use lowercase localid
|
|
28
|
+
element = container.querySelector("[localid=\"".concat(localId, "\"]"));
|
|
29
|
+
if (element) {
|
|
30
|
+
return element;
|
|
31
|
+
}
|
|
32
|
+
return null;
|
|
33
|
+
};
|
|
34
|
+
export var useScrollToLocalId = function useScrollToLocalId(containerRef, shouldScrollToLocalId) {
|
|
35
|
+
useEffect(function () {
|
|
36
|
+
// Only run in browser environment
|
|
37
|
+
if (typeof window === 'undefined' || !(containerRef !== null && containerRef !== void 0 && containerRef.current) || !shouldScrollToLocalId) {
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// Parse URL parameters for block ID
|
|
42
|
+
var urlParams = new URLSearchParams(window.location.search);
|
|
43
|
+
var blockId = urlParams.get('block');
|
|
44
|
+
if (blockId) {
|
|
45
|
+
// Search within the renderer container using the selector function
|
|
46
|
+
var element = getLocalIdSelector(blockId, containerRef.current);
|
|
47
|
+
if (element) {
|
|
48
|
+
element.scrollIntoView({
|
|
49
|
+
behavior: 'smooth'
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}, [containerRef, shouldScrollToLocalId]);
|
|
54
|
+
};
|
|
@@ -6,6 +6,7 @@ export interface Props {
|
|
|
6
6
|
className?: string;
|
|
7
7
|
codeBidiWarningTooltipEnabled: boolean;
|
|
8
8
|
language: SupportedLanguages;
|
|
9
|
+
localId?: string;
|
|
9
10
|
text: string;
|
|
10
11
|
}
|
|
11
12
|
declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
|
|
@@ -8,6 +8,7 @@ import type { CodeBlockButtonContainerProps } from './codeBlockButtonContainer';
|
|
|
8
8
|
interface ContainerProps extends CodeBlockButtonContainerProps {
|
|
9
9
|
children: ReactNode;
|
|
10
10
|
className?: string;
|
|
11
|
+
localId?: string;
|
|
11
12
|
}
|
|
12
|
-
declare const CodeBlockContainer: ({ allowCopyToClipboard, allowWrapCodeBlock, children, className, setWrapLongLines, text, wrapLongLines, }: ContainerProps) => jsx.JSX.Element;
|
|
13
|
+
declare const CodeBlockContainer: ({ allowCopyToClipboard, allowWrapCodeBlock, children, className, localId, setWrapLongLines, text, wrapLongLines, }: ContainerProps) => jsx.JSX.Element;
|
|
13
14
|
export default CodeBlockContainer;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
3
|
-
import {
|
|
3
|
+
import type { NodeProps } from '../types';
|
|
4
4
|
import { type HeadingAnchorLinksProps } from '../../ui/Renderer/types';
|
|
5
5
|
export type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;
|
|
6
6
|
declare function Heading(props: NodeProps<{
|
|
@@ -8,6 +8,7 @@ declare function Heading(props: NodeProps<{
|
|
|
8
8
|
headingId?: string;
|
|
9
9
|
invisible?: boolean;
|
|
10
10
|
level: HeadingLevels;
|
|
11
|
+
localId?: string;
|
|
11
12
|
marks?: PMNode['marks'];
|
|
12
13
|
showAnchorLink?: boolean;
|
|
13
14
|
}>): React.JSX.Element;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type NodeProps } from '../types';
|
|
3
|
-
export default function Paragraph({ children, dataAttributes }: NodeProps): React.JSX.Element;
|
|
3
|
+
export default function Paragraph({ children, dataAttributes, localId }: NodeProps): React.JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useScrollToLocalId: (containerRef?: React.RefObject<HTMLDivElement>, shouldScrollToLocalId?: boolean) => void;
|
|
@@ -6,6 +6,7 @@ export interface Props {
|
|
|
6
6
|
className?: string;
|
|
7
7
|
codeBidiWarningTooltipEnabled: boolean;
|
|
8
8
|
language: SupportedLanguages;
|
|
9
|
+
localId?: string;
|
|
9
10
|
text: string;
|
|
10
11
|
}
|
|
11
12
|
declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
|
|
@@ -8,6 +8,7 @@ import type { CodeBlockButtonContainerProps } from './codeBlockButtonContainer';
|
|
|
8
8
|
interface ContainerProps extends CodeBlockButtonContainerProps {
|
|
9
9
|
children: ReactNode;
|
|
10
10
|
className?: string;
|
|
11
|
+
localId?: string;
|
|
11
12
|
}
|
|
12
|
-
declare const CodeBlockContainer: ({ allowCopyToClipboard, allowWrapCodeBlock, children, className, setWrapLongLines, text, wrapLongLines, }: ContainerProps) => jsx.JSX.Element;
|
|
13
|
+
declare const CodeBlockContainer: ({ allowCopyToClipboard, allowWrapCodeBlock, children, className, localId, setWrapLongLines, text, wrapLongLines, }: ContainerProps) => jsx.JSX.Element;
|
|
13
14
|
export default CodeBlockContainer;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
3
|
-
import {
|
|
3
|
+
import type { NodeProps } from '../types';
|
|
4
4
|
import { type HeadingAnchorLinksProps } from '../../ui/Renderer/types';
|
|
5
5
|
export type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;
|
|
6
6
|
declare function Heading(props: NodeProps<{
|
|
@@ -8,6 +8,7 @@ declare function Heading(props: NodeProps<{
|
|
|
8
8
|
headingId?: string;
|
|
9
9
|
invisible?: boolean;
|
|
10
10
|
level: HeadingLevels;
|
|
11
|
+
localId?: string;
|
|
11
12
|
marks?: PMNode['marks'];
|
|
12
13
|
showAnchorLink?: boolean;
|
|
13
14
|
}>): React.JSX.Element;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { type NodeProps } from '../types';
|
|
3
|
-
export default function Paragraph({ children, dataAttributes }: NodeProps): React.JSX.Element;
|
|
3
|
+
export default function Paragraph({ children, dataAttributes, localId }: NodeProps): React.JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useScrollToLocalId: (containerRef?: React.RefObject<HTMLDivElement>, shouldScrollToLocalId?: boolean) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/renderer",
|
|
3
|
-
"version": "122.
|
|
3
|
+
"version": "122.3.0",
|
|
4
4
|
"description": "Renderer component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"@atlaskit/status": "^3.0.0",
|
|
55
55
|
"@atlaskit/task-decision": "^19.2.0",
|
|
56
56
|
"@atlaskit/theme": "^21.0.0",
|
|
57
|
-
"@atlaskit/tmp-editor-statsig": "^12.
|
|
57
|
+
"@atlaskit/tmp-editor-statsig": "^12.16.0",
|
|
58
58
|
"@atlaskit/tokens": "^6.3.0",
|
|
59
59
|
"@atlaskit/tooltip": "^20.4.0",
|
|
60
60
|
"@atlaskit/visually-hidden": "^3.0.0",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"@atlaskit/mention": "^24.2.0",
|
|
90
90
|
"@atlaskit/modal-dialog": "^14.3.0",
|
|
91
91
|
"@atlaskit/navigation-next": "patch:@atlaskit/navigation-next@npm%3A9.0.17#~/.yarn/patches/@atlaskit-navigation-next-npm-9.0.17-958ca0ab9d.patch",
|
|
92
|
-
"@atlaskit/profilecard": "^24.
|
|
92
|
+
"@atlaskit/profilecard": "^24.13.0",
|
|
93
93
|
"@atlaskit/util-data-test": "^18.2.0",
|
|
94
94
|
"@atlassian/feature-flags-test-utils": "^0.3.0",
|
|
95
95
|
"@testing-library/react": "^13.4.0",
|