@atlaskit/renderer 109.17.3 → 109.18.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/nodes/extensionFrame.js +4 -6
- package/dist/cjs/react/nodes/media/index.js +47 -10
- package/dist/cjs/steps/index.js +20 -2
- package/dist/cjs/ui/Renderer/index.js +1 -1
- package/dist/es2019/react/nodes/extensionFrame.js +3 -6
- package/dist/es2019/react/nodes/media/index.js +27 -0
- package/dist/es2019/steps/index.js +20 -2
- package/dist/es2019/ui/Renderer/index.js +1 -1
- package/dist/esm/react/nodes/extensionFrame.js +3 -5
- package/dist/esm/react/nodes/media/index.js +47 -10
- package/dist/esm/steps/index.js +20 -2
- package/dist/esm/ui/Renderer/index.js +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 109.18.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#90742](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90742) [`f893b885cc0a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f893b885cc0a) - [ux] Add comment on media badge states
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- [#90680](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90680) [`876804648156`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/876804648156) - ED-22917 fix comment positioning logic to account for inline-card comments
|
|
12
|
+
- [#91106](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91106) [`b6ffa30186b9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6ffa30186b9) - Bump ADF-schema package to version 35.0.0
|
|
13
|
+
- [#89296](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89296) [`14a5e5877b97`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/14a5e5877b97) - [ux] [ED-22875] - Removed borders from multi-bodied extensions
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
3
16
|
## 109.17.3
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -1,20 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.default = void 0;
|
|
8
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
7
|
var _react = require("@emotion/react");
|
|
10
|
-
var _colors = require("@atlaskit/theme/colors");
|
|
11
|
-
var _templateObject;
|
|
12
8
|
/** @jsx jsx */
|
|
9
|
+
|
|
10
|
+
var containerCSS = (0, _react.css)({
|
|
11
|
+
minHeight: '100px'
|
|
12
|
+
});
|
|
13
13
|
var ExtensionFrame = function ExtensionFrame(props) {
|
|
14
|
-
var containerCSS = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n border: 1px solid ", ";\n min-height: 100px;\n "])), "var(--ds-border, ".concat(_colors.N30, ")"));
|
|
15
14
|
return (0, _react.jsx)("div", {
|
|
16
15
|
css: containerCSS,
|
|
17
|
-
className: "extension-frame",
|
|
18
16
|
"data-extension-frame": "true",
|
|
19
17
|
style: {
|
|
20
18
|
flexBasis: "100%"
|
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.default = void 0;
|
|
9
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
9
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
10
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
12
11
|
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
@@ -15,6 +14,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
|
|
|
15
14
|
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
16
15
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
17
16
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
17
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
18
18
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
19
19
|
var _react = _interopRequireWildcard(require("react"));
|
|
20
20
|
var _react2 = require("@emotion/react");
|
|
@@ -35,7 +35,7 @@ var _mediaSingle = require("@atlaskit/editor-common/media-single");
|
|
|
35
35
|
var _reactIntlNext = require("react-intl-next");
|
|
36
36
|
var _hooks = require("../../../ui/annotations/hooks");
|
|
37
37
|
var _types = require("@atlaskit/editor-common/types");
|
|
38
|
-
var _excluded = ["marks"];
|
|
38
|
+
var _excluded = ["marks", "mediaElement"];
|
|
39
39
|
/** @jsx jsx */
|
|
40
40
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
41
41
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -120,7 +120,16 @@ var CommentBadge = (0, _reactIntlNext.injectIntl)(_mediaSingle.CommentBadge);
|
|
|
120
120
|
var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
|
|
121
121
|
var _marks$map;
|
|
122
122
|
var marks = _ref5.marks,
|
|
123
|
+
mediaElement = _ref5.mediaElement,
|
|
123
124
|
rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
|
|
125
|
+
var _useState = (0, _react.useState)('default'),
|
|
126
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
127
|
+
status = _useState2[0],
|
|
128
|
+
setStatus = _useState2[1];
|
|
129
|
+
var _useState3 = (0, _react.useState)(false),
|
|
130
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
131
|
+
entered = _useState4[0],
|
|
132
|
+
setEntered = _useState4[1];
|
|
124
133
|
var updateSubscriber = (0, _hooks.useInlineCommentSubscriberContext)();
|
|
125
134
|
var activeParentIds = (0, _hooks.useInlineCommentsFilter)({
|
|
126
135
|
annotationIds: (_marks$map = marks === null || marks === void 0 ? void 0 : marks.map(function (mark) {
|
|
@@ -130,6 +139,27 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
|
|
|
130
139
|
state: _adfSchema.AnnotationMarkStates.ACTIVE
|
|
131
140
|
}
|
|
132
141
|
});
|
|
142
|
+
(0, _react.useEffect)(function () {
|
|
143
|
+
var observer = new MutationObserver(function (mutationList) {
|
|
144
|
+
mutationList.forEach(function (mutation) {
|
|
145
|
+
if (mutation.attributeName === 'data-has-focus') {
|
|
146
|
+
var _mutation$target$pare;
|
|
147
|
+
var elementHasFocus = !!((_mutation$target$pare = mutation.target.parentNode) !== null && _mutation$target$pare !== void 0 && _mutation$target$pare.querySelector('[data-has-focus="true"]'));
|
|
148
|
+
elementHasFocus ? setStatus('active') : setStatus('default');
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
});
|
|
152
|
+
if (mediaElement) {
|
|
153
|
+
observer.observe(mediaElement, {
|
|
154
|
+
attributes: true,
|
|
155
|
+
subtree: true,
|
|
156
|
+
attributeFilter: ['data-has-focus']
|
|
157
|
+
});
|
|
158
|
+
}
|
|
159
|
+
return function () {
|
|
160
|
+
observer.disconnect();
|
|
161
|
+
};
|
|
162
|
+
}, [mediaElement, setStatus]);
|
|
133
163
|
if (!activeParentIds.length) {
|
|
134
164
|
return null;
|
|
135
165
|
}
|
|
@@ -142,6 +172,13 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
|
|
|
142
172
|
}
|
|
143
173
|
};
|
|
144
174
|
return (0, _react2.jsx)(CommentBadge, (0, _extends2.default)({
|
|
175
|
+
onMouseEnter: function onMouseEnter() {
|
|
176
|
+
return setEntered(true);
|
|
177
|
+
},
|
|
178
|
+
onMouseLeave: function onMouseLeave() {
|
|
179
|
+
return setEntered(false);
|
|
180
|
+
},
|
|
181
|
+
status: entered ? 'entered' : status,
|
|
145
182
|
onClick: onClick
|
|
146
183
|
}, rest));
|
|
147
184
|
};
|
|
@@ -246,14 +283,14 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
|
|
|
246
283
|
var draftPosition = _react.default.useContext(_context.AnnotationsDraftContext);
|
|
247
284
|
var dataAttributes = props.dataAttributes;
|
|
248
285
|
var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
|
|
249
|
-
var
|
|
250
|
-
|
|
251
|
-
position =
|
|
252
|
-
setPosition =
|
|
253
|
-
var
|
|
254
|
-
|
|
255
|
-
shouldApplyDraftAnnotation =
|
|
256
|
-
setShouldApplyDraftAnnotation =
|
|
286
|
+
var _useState5 = (0, _react.useState)(),
|
|
287
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
288
|
+
position = _useState6[0],
|
|
289
|
+
setPosition = _useState6[1];
|
|
290
|
+
var _useState7 = (0, _react.useState)(false),
|
|
291
|
+
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
292
|
+
shouldApplyDraftAnnotation = _useState8[0],
|
|
293
|
+
setShouldApplyDraftAnnotation = _useState8[1];
|
|
257
294
|
(0, _react.useEffect)(function () {
|
|
258
295
|
if (pos === undefined) {
|
|
259
296
|
return;
|
package/dist/cjs/steps/index.js
CHANGED
|
@@ -52,6 +52,23 @@ function isNodeInlineMark(node) {
|
|
|
52
52
|
function isElementInlineMark(element) {
|
|
53
53
|
return !!element && Boolean(element.dataset.rendererMark);
|
|
54
54
|
}
|
|
55
|
+
|
|
56
|
+
/**
|
|
57
|
+
* This returns the text content of a node excluding content
|
|
58
|
+
* inside inline cards (spans with data-inline-card="true").
|
|
59
|
+
*/
|
|
60
|
+
function getPMTextContent(node) {
|
|
61
|
+
if (isTextNode(node)) {
|
|
62
|
+
return node.textContent;
|
|
63
|
+
}
|
|
64
|
+
if (isElementNode(node)) {
|
|
65
|
+
if (node.dataset.inlineCard === 'true') {
|
|
66
|
+
return '';
|
|
67
|
+
}
|
|
68
|
+
return Array.from(node.childNodes).map(getPMTextContent).join('');
|
|
69
|
+
}
|
|
70
|
+
return '';
|
|
71
|
+
}
|
|
55
72
|
function resolveNodePos(node) {
|
|
56
73
|
var resolvedPos = 0;
|
|
57
74
|
var prev = node.previousSibling;
|
|
@@ -60,7 +77,7 @@ function resolveNodePos(node) {
|
|
|
60
77
|
resolvedPos += (prev.textContent || '').length;
|
|
61
78
|
} else if (prev) {
|
|
62
79
|
if (isNodeInlineMark(prev) && prev.textContent) {
|
|
63
|
-
resolvedPos += prev.
|
|
80
|
+
resolvedPos += getPMTextContent(prev).length;
|
|
64
81
|
} else {
|
|
65
82
|
resolvedPos += 1;
|
|
66
83
|
}
|
|
@@ -104,7 +121,8 @@ function resolvePos(node, offset) {
|
|
|
104
121
|
while (current && current.parentElement !== parent) {
|
|
105
122
|
current = current.parentNode;
|
|
106
123
|
if (current) {
|
|
107
|
-
|
|
124
|
+
var nodePos = resolveNodePos(current);
|
|
125
|
+
resolvedPos += nodePos;
|
|
108
126
|
}
|
|
109
127
|
}
|
|
110
128
|
} else {
|
|
@@ -55,7 +55,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
|
|
|
55
55
|
var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
56
56
|
var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
57
57
|
var packageName = "@atlaskit/renderer";
|
|
58
|
-
var packageVersion = "109.
|
|
58
|
+
var packageVersion = "109.18.0";
|
|
59
59
|
var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
60
60
|
(0, _inherits2.default)(Renderer, _PureComponent);
|
|
61
61
|
var _super = _createSuper(Renderer);
|
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
|
|
3
3
|
import { jsx, css } from '@emotion/react';
|
|
4
|
-
|
|
4
|
+
const containerCSS = css({
|
|
5
|
+
minHeight: '100px'
|
|
6
|
+
});
|
|
5
7
|
const ExtensionFrame = props => {
|
|
6
|
-
const containerCSS = css`
|
|
7
|
-
border: 1px solid ${`var(--ds-border, ${N30})`};
|
|
8
|
-
min-height: 100px;
|
|
9
|
-
`;
|
|
10
8
|
return jsx("div", {
|
|
11
9
|
css: containerCSS,
|
|
12
|
-
className: "extension-frame",
|
|
13
10
|
"data-extension-frame": "true",
|
|
14
11
|
style: {
|
|
15
12
|
flexBasis: `100%`
|
|
@@ -100,9 +100,12 @@ const MediaAnnotations = ({
|
|
|
100
100
|
const CommentBadge = injectIntl(CommentBadgeComponent);
|
|
101
101
|
const CommentBadgeWrapper = ({
|
|
102
102
|
marks,
|
|
103
|
+
mediaElement,
|
|
103
104
|
...rest
|
|
104
105
|
}) => {
|
|
105
106
|
var _marks$map;
|
|
107
|
+
const [status, setStatus] = useState('default');
|
|
108
|
+
const [entered, setEntered] = useState(false);
|
|
106
109
|
const updateSubscriber = useInlineCommentSubscriberContext();
|
|
107
110
|
const activeParentIds = useInlineCommentsFilter({
|
|
108
111
|
annotationIds: (_marks$map = marks === null || marks === void 0 ? void 0 : marks.map(mark => mark.attrs.id)) !== null && _marks$map !== void 0 ? _marks$map : [''],
|
|
@@ -110,6 +113,27 @@ const CommentBadgeWrapper = ({
|
|
|
110
113
|
state: AnnotationMarkStates.ACTIVE
|
|
111
114
|
}
|
|
112
115
|
});
|
|
116
|
+
useEffect(() => {
|
|
117
|
+
const observer = new MutationObserver(mutationList => {
|
|
118
|
+
mutationList.forEach(mutation => {
|
|
119
|
+
if (mutation.attributeName === 'data-has-focus') {
|
|
120
|
+
var _mutation$target$pare;
|
|
121
|
+
const elementHasFocus = !!((_mutation$target$pare = mutation.target.parentNode) !== null && _mutation$target$pare !== void 0 && _mutation$target$pare.querySelector('[data-has-focus="true"]'));
|
|
122
|
+
elementHasFocus ? setStatus('active') : setStatus('default');
|
|
123
|
+
}
|
|
124
|
+
});
|
|
125
|
+
});
|
|
126
|
+
if (mediaElement) {
|
|
127
|
+
observer.observe(mediaElement, {
|
|
128
|
+
attributes: true,
|
|
129
|
+
subtree: true,
|
|
130
|
+
attributeFilter: ['data-has-focus']
|
|
131
|
+
});
|
|
132
|
+
}
|
|
133
|
+
return () => {
|
|
134
|
+
observer.disconnect();
|
|
135
|
+
};
|
|
136
|
+
}, [mediaElement, setStatus]);
|
|
113
137
|
if (!activeParentIds.length) {
|
|
114
138
|
return null;
|
|
115
139
|
}
|
|
@@ -122,6 +146,9 @@ const CommentBadgeWrapper = ({
|
|
|
122
146
|
}
|
|
123
147
|
};
|
|
124
148
|
return jsx(CommentBadge, _extends({
|
|
149
|
+
onMouseEnter: () => setEntered(true),
|
|
150
|
+
onMouseLeave: () => setEntered(false),
|
|
151
|
+
status: entered ? 'entered' : status,
|
|
125
152
|
onClick: onClick
|
|
126
153
|
}, rest));
|
|
127
154
|
};
|
|
@@ -46,6 +46,23 @@ function isNodeInlineMark(node) {
|
|
|
46
46
|
function isElementInlineMark(element) {
|
|
47
47
|
return !!element && Boolean(element.dataset.rendererMark);
|
|
48
48
|
}
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* This returns the text content of a node excluding content
|
|
52
|
+
* inside inline cards (spans with data-inline-card="true").
|
|
53
|
+
*/
|
|
54
|
+
function getPMTextContent(node) {
|
|
55
|
+
if (isTextNode(node)) {
|
|
56
|
+
return node.textContent;
|
|
57
|
+
}
|
|
58
|
+
if (isElementNode(node)) {
|
|
59
|
+
if (node.dataset.inlineCard === 'true') {
|
|
60
|
+
return '';
|
|
61
|
+
}
|
|
62
|
+
return Array.from(node.childNodes).map(getPMTextContent).join('');
|
|
63
|
+
}
|
|
64
|
+
return '';
|
|
65
|
+
}
|
|
49
66
|
function resolveNodePos(node) {
|
|
50
67
|
let resolvedPos = 0;
|
|
51
68
|
let prev = node.previousSibling;
|
|
@@ -54,7 +71,7 @@ function resolveNodePos(node) {
|
|
|
54
71
|
resolvedPos += (prev.textContent || '').length;
|
|
55
72
|
} else if (prev) {
|
|
56
73
|
if (isNodeInlineMark(prev) && prev.textContent) {
|
|
57
|
-
resolvedPos += prev.
|
|
74
|
+
resolvedPos += getPMTextContent(prev).length;
|
|
58
75
|
} else {
|
|
59
76
|
resolvedPos += 1;
|
|
60
77
|
}
|
|
@@ -98,7 +115,8 @@ export function resolvePos(node, offset) {
|
|
|
98
115
|
while (current && current.parentElement !== parent) {
|
|
99
116
|
current = current.parentNode;
|
|
100
117
|
if (current) {
|
|
101
|
-
|
|
118
|
+
const nodePos = resolveNodePos(current);
|
|
119
|
+
resolvedPos += nodePos;
|
|
102
120
|
}
|
|
103
121
|
}
|
|
104
122
|
} else {
|
|
@@ -36,7 +36,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
|
|
|
36
36
|
export const NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
37
37
|
export const DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
38
38
|
const packageName = "@atlaskit/renderer";
|
|
39
|
-
const packageVersion = "109.
|
|
39
|
+
const packageVersion = "109.18.0";
|
|
40
40
|
export class Renderer extends PureComponent {
|
|
41
41
|
constructor(props) {
|
|
42
42
|
super(props);
|
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject;
|
|
3
1
|
/** @jsx jsx */
|
|
4
2
|
|
|
5
3
|
import { jsx, css } from '@emotion/react';
|
|
6
|
-
|
|
4
|
+
var containerCSS = css({
|
|
5
|
+
minHeight: '100px'
|
|
6
|
+
});
|
|
7
7
|
var ExtensionFrame = function ExtensionFrame(props) {
|
|
8
|
-
var containerCSS = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: 1px solid ", ";\n min-height: 100px;\n "])), "var(--ds-border, ".concat(N30, ")"));
|
|
9
8
|
return jsx("div", {
|
|
10
9
|
css: containerCSS,
|
|
11
|
-
className: "extension-frame",
|
|
12
10
|
"data-extension-frame": "true",
|
|
13
11
|
style: {
|
|
14
12
|
flexBasis: "100%"
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
1
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
2
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
3
|
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
@@ -7,8 +6,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
|
|
|
7
6
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
8
7
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
9
8
|
import _extends from "@babel/runtime/helpers/extends";
|
|
9
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
10
10
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
11
|
-
var _excluded = ["marks"];
|
|
11
|
+
var _excluded = ["marks", "mediaElement"];
|
|
12
12
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
13
13
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
14
14
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
@@ -111,7 +111,16 @@ var CommentBadge = injectIntl(CommentBadgeComponent);
|
|
|
111
111
|
var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
|
|
112
112
|
var _marks$map;
|
|
113
113
|
var marks = _ref5.marks,
|
|
114
|
+
mediaElement = _ref5.mediaElement,
|
|
114
115
|
rest = _objectWithoutProperties(_ref5, _excluded);
|
|
116
|
+
var _useState = useState('default'),
|
|
117
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
118
|
+
status = _useState2[0],
|
|
119
|
+
setStatus = _useState2[1];
|
|
120
|
+
var _useState3 = useState(false),
|
|
121
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
122
|
+
entered = _useState4[0],
|
|
123
|
+
setEntered = _useState4[1];
|
|
115
124
|
var updateSubscriber = useInlineCommentSubscriberContext();
|
|
116
125
|
var activeParentIds = useInlineCommentsFilter({
|
|
117
126
|
annotationIds: (_marks$map = marks === null || marks === void 0 ? void 0 : marks.map(function (mark) {
|
|
@@ -121,6 +130,27 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
|
|
|
121
130
|
state: AnnotationMarkStates.ACTIVE
|
|
122
131
|
}
|
|
123
132
|
});
|
|
133
|
+
useEffect(function () {
|
|
134
|
+
var observer = new MutationObserver(function (mutationList) {
|
|
135
|
+
mutationList.forEach(function (mutation) {
|
|
136
|
+
if (mutation.attributeName === 'data-has-focus') {
|
|
137
|
+
var _mutation$target$pare;
|
|
138
|
+
var elementHasFocus = !!((_mutation$target$pare = mutation.target.parentNode) !== null && _mutation$target$pare !== void 0 && _mutation$target$pare.querySelector('[data-has-focus="true"]'));
|
|
139
|
+
elementHasFocus ? setStatus('active') : setStatus('default');
|
|
140
|
+
}
|
|
141
|
+
});
|
|
142
|
+
});
|
|
143
|
+
if (mediaElement) {
|
|
144
|
+
observer.observe(mediaElement, {
|
|
145
|
+
attributes: true,
|
|
146
|
+
subtree: true,
|
|
147
|
+
attributeFilter: ['data-has-focus']
|
|
148
|
+
});
|
|
149
|
+
}
|
|
150
|
+
return function () {
|
|
151
|
+
observer.disconnect();
|
|
152
|
+
};
|
|
153
|
+
}, [mediaElement, setStatus]);
|
|
124
154
|
if (!activeParentIds.length) {
|
|
125
155
|
return null;
|
|
126
156
|
}
|
|
@@ -133,6 +163,13 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
|
|
|
133
163
|
}
|
|
134
164
|
};
|
|
135
165
|
return jsx(CommentBadge, _extends({
|
|
166
|
+
onMouseEnter: function onMouseEnter() {
|
|
167
|
+
return setEntered(true);
|
|
168
|
+
},
|
|
169
|
+
onMouseLeave: function onMouseLeave() {
|
|
170
|
+
return setEntered(false);
|
|
171
|
+
},
|
|
172
|
+
status: entered ? 'entered' : status,
|
|
136
173
|
onClick: onClick
|
|
137
174
|
}, rest));
|
|
138
175
|
};
|
|
@@ -237,14 +274,14 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
|
|
|
237
274
|
var draftPosition = React.useContext(AnnotationsDraftContext);
|
|
238
275
|
var dataAttributes = props.dataAttributes;
|
|
239
276
|
var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
|
|
240
|
-
var
|
|
241
|
-
|
|
242
|
-
position =
|
|
243
|
-
setPosition =
|
|
244
|
-
var
|
|
245
|
-
|
|
246
|
-
shouldApplyDraftAnnotation =
|
|
247
|
-
setShouldApplyDraftAnnotation =
|
|
277
|
+
var _useState5 = useState(),
|
|
278
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
279
|
+
position = _useState6[0],
|
|
280
|
+
setPosition = _useState6[1];
|
|
281
|
+
var _useState7 = useState(false),
|
|
282
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
283
|
+
shouldApplyDraftAnnotation = _useState8[0],
|
|
284
|
+
setShouldApplyDraftAnnotation = _useState8[1];
|
|
248
285
|
useEffect(function () {
|
|
249
286
|
if (pos === undefined) {
|
|
250
287
|
return;
|
package/dist/esm/steps/index.js
CHANGED
|
@@ -44,6 +44,23 @@ function isNodeInlineMark(node) {
|
|
|
44
44
|
function isElementInlineMark(element) {
|
|
45
45
|
return !!element && Boolean(element.dataset.rendererMark);
|
|
46
46
|
}
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* This returns the text content of a node excluding content
|
|
50
|
+
* inside inline cards (spans with data-inline-card="true").
|
|
51
|
+
*/
|
|
52
|
+
function getPMTextContent(node) {
|
|
53
|
+
if (isTextNode(node)) {
|
|
54
|
+
return node.textContent;
|
|
55
|
+
}
|
|
56
|
+
if (isElementNode(node)) {
|
|
57
|
+
if (node.dataset.inlineCard === 'true') {
|
|
58
|
+
return '';
|
|
59
|
+
}
|
|
60
|
+
return Array.from(node.childNodes).map(getPMTextContent).join('');
|
|
61
|
+
}
|
|
62
|
+
return '';
|
|
63
|
+
}
|
|
47
64
|
function resolveNodePos(node) {
|
|
48
65
|
var resolvedPos = 0;
|
|
49
66
|
var prev = node.previousSibling;
|
|
@@ -52,7 +69,7 @@ function resolveNodePos(node) {
|
|
|
52
69
|
resolvedPos += (prev.textContent || '').length;
|
|
53
70
|
} else if (prev) {
|
|
54
71
|
if (isNodeInlineMark(prev) && prev.textContent) {
|
|
55
|
-
resolvedPos += prev.
|
|
72
|
+
resolvedPos += getPMTextContent(prev).length;
|
|
56
73
|
} else {
|
|
57
74
|
resolvedPos += 1;
|
|
58
75
|
}
|
|
@@ -96,7 +113,8 @@ export function resolvePos(node, offset) {
|
|
|
96
113
|
while (current && current.parentElement !== parent) {
|
|
97
114
|
current = current.parentNode;
|
|
98
115
|
if (current) {
|
|
99
|
-
|
|
116
|
+
var nodePos = resolveNodePos(current);
|
|
117
|
+
resolvedPos += nodePos;
|
|
100
118
|
}
|
|
101
119
|
}
|
|
102
120
|
} else {
|
|
@@ -46,7 +46,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
|
|
|
46
46
|
export var NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
47
47
|
export var DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
48
48
|
var packageName = "@atlaskit/renderer";
|
|
49
|
-
var packageVersion = "109.
|
|
49
|
+
var packageVersion = "109.18.0";
|
|
50
50
|
export var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
51
51
|
_inherits(Renderer, _PureComponent);
|
|
52
52
|
var _super = _createSuper(Renderer);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/renderer",
|
|
3
|
-
"version": "109.
|
|
3
|
+
"version": "109.18.0",
|
|
4
4
|
"description": "Renderer component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -24,14 +24,14 @@
|
|
|
24
24
|
"runReact18": true
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@atlaskit/adf-schema": "^35.
|
|
27
|
+
"@atlaskit/adf-schema": "^35.9.0",
|
|
28
28
|
"@atlaskit/adf-utils": "^19.0.0",
|
|
29
29
|
"@atlaskit/analytics-listeners": "^8.9.0",
|
|
30
30
|
"@atlaskit/analytics-namespaced-context": "^6.9.0",
|
|
31
31
|
"@atlaskit/analytics-next": "^9.2.0",
|
|
32
32
|
"@atlaskit/button": "^17.12.0",
|
|
33
33
|
"@atlaskit/code": "^15.1.0",
|
|
34
|
-
"@atlaskit/editor-common": "^78.
|
|
34
|
+
"@atlaskit/editor-common": "^78.28.0",
|
|
35
35
|
"@atlaskit/editor-json-transformer": "^8.10.0",
|
|
36
36
|
"@atlaskit/editor-palette": "1.5.3",
|
|
37
37
|
"@atlaskit/editor-prosemirror": "3.0.0",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"@atlaskit/media-ui": "^25.7.0",
|
|
48
48
|
"@atlaskit/media-viewer": "^48.4.0",
|
|
49
49
|
"@atlaskit/platform-feature-flags": "^0.2.0",
|
|
50
|
-
"@atlaskit/smart-card": "^26.
|
|
50
|
+
"@atlaskit/smart-card": "^26.56.0",
|
|
51
51
|
"@atlaskit/status": "^1.4.0",
|
|
52
52
|
"@atlaskit/task-decision": "^17.9.0",
|
|
53
53
|
"@atlaskit/theme": "^12.7.0",
|