@atlaskit/renderer 82.1.0 → 82.2.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 +10 -0
- package/dist/cjs/react/index.js +25 -8
- package/dist/cjs/react/marks/code.js +9 -2
- package/dist/cjs/react/nodes/codeBlock.js +4 -2
- package/dist/cjs/react/nodes/text-wrapper.js +5 -6
- package/dist/cjs/ui/annotations/draft/component.js +6 -6
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/react/index.js +22 -5
- package/dist/es2019/react/marks/code.js +5 -1
- package/dist/es2019/react/nodes/codeBlock.js +4 -2
- package/dist/es2019/react/nodes/text-wrapper.js +7 -6
- package/dist/es2019/ui/annotations/draft/component.js +6 -6
- package/dist/es2019/version.json +1 -1
- package/dist/esm/react/index.js +24 -8
- package/dist/esm/react/marks/code.js +5 -1
- package/dist/esm/react/nodes/codeBlock.js +4 -2
- package/dist/esm/react/nodes/text-wrapper.js +7 -6
- package/dist/esm/ui/annotations/draft/component.js +6 -6
- package/dist/esm/version.json +1 -1
- package/dist/types/react/marks/code.d.ts +11 -3
- package/dist/types/react/nodes/codeBlock.d.ts +4 -3
- package/dist/types/react/nodes/index.d.ts +6 -6
- package/dist/types/react/nodes/text-wrapper.d.ts +2 -3
- package/dist/types/ui/annotations/draft/component.d.ts +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 82.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`db3477abb18`](https://bitbucket.org/atlassian/atlassian-frontend/commits/db3477abb18) - [ux] ED-13938 disabled code-bidi warning tooltip for mobile, reworked TextWrapper to fix bidi mitigation, and fixed issue where bidi warnings were not presented when renderer used with an annotation provider with draftMode set to true
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies
|
|
12
|
+
|
|
3
13
|
## 82.1.0
|
|
4
14
|
|
|
5
15
|
### Minor Changes
|
package/dist/cjs/react/index.js
CHANGED
|
@@ -39,6 +39,8 @@ var _prosemirrorUtils = require("prosemirror-utils");
|
|
|
39
39
|
|
|
40
40
|
var _rendererNode = require("./renderer-node");
|
|
41
41
|
|
|
42
|
+
var _code = require("./marks/code");
|
|
43
|
+
|
|
42
44
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
43
45
|
|
|
44
46
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
@@ -153,13 +155,22 @@ var ReactSerializer = /*#__PURE__*/function () {
|
|
|
153
155
|
otherAttrs = (0, _objectWithoutProperties2.default)(_mark$attrs, ["key"]);
|
|
154
156
|
var extraProps = {
|
|
155
157
|
isInline: node === null || node === void 0 ? void 0 : node.isInline
|
|
156
|
-
};
|
|
157
|
-
|
|
158
|
-
var
|
|
158
|
+
}; // currently the only mark which has custom props is the code mark
|
|
159
|
+
|
|
160
|
+
var markSpecificProps = (0, _code.isCodeMark)(mark) ? {
|
|
161
|
+
// The appearance being mobile indicates we are in an renderer being
|
|
162
|
+
// rendered by mobile bridge in a web view.
|
|
163
|
+
// The tooltip is likely to have unexpected behaviour there, with being cut
|
|
164
|
+
// off, so we disable it. This is also to keep the behaviour consistent with
|
|
165
|
+
// the rendering in the mobile Native Renderer.
|
|
166
|
+
codeBidiWarningTooltipEnabled: _this.appearance !== 'mobile'
|
|
167
|
+
} : {};
|
|
168
|
+
|
|
169
|
+
var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
|
|
159
170
|
eventHandlers: _this.eventHandlers,
|
|
160
171
|
fireAnalyticsEvent: _this.fireAnalyticsEvent,
|
|
161
172
|
markKey: key
|
|
162
|
-
}, otherAttrs), extraProps), {}, {
|
|
173
|
+
}, otherAttrs), extraProps), markSpecificProps), {}, {
|
|
163
174
|
dataAttributes: {
|
|
164
175
|
'data-renderer-mark': true
|
|
165
176
|
}
|
|
@@ -342,9 +353,8 @@ var ReactSerializer = /*#__PURE__*/function () {
|
|
|
342
353
|
return /*#__PURE__*/_react.default.createElement(_textWrapper.default, {
|
|
343
354
|
key: textKey,
|
|
344
355
|
startPos: startPos + parentDepth,
|
|
345
|
-
endPos: endPos + parentDepth
|
|
346
|
-
|
|
347
|
-
});
|
|
356
|
+
endPos: endPos + parentDepth
|
|
357
|
+
}, mark.text);
|
|
348
358
|
}
|
|
349
359
|
|
|
350
360
|
return mark.text || '';
|
|
@@ -512,8 +522,15 @@ var ReactSerializer = /*#__PURE__*/function () {
|
|
|
512
522
|
}, {
|
|
513
523
|
key: "getCodeBlockProps",
|
|
514
524
|
value: function getCodeBlockProps(node) {
|
|
525
|
+
// The appearance being mobile indicates we are in an renderer being
|
|
526
|
+
// rendered by mobile bridge in a web view.
|
|
527
|
+
// The tooltip is likely to have unexpected behaviour there, with being cut
|
|
528
|
+
// off, so we disable it. This is also to keep the behaviour consistent with
|
|
529
|
+
// the rendering in the mobile Native Renderer.
|
|
530
|
+
var codeBidiWarningTooltipEnabled = this.appearance !== 'mobile';
|
|
515
531
|
return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
|
|
516
|
-
text: node.textContent
|
|
532
|
+
text: node.textContent,
|
|
533
|
+
codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
|
|
517
534
|
});
|
|
518
535
|
}
|
|
519
536
|
}, {
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.CodeWithIntl = CodeWithIntl;
|
|
9
|
-
exports.default = void 0;
|
|
9
|
+
exports.default = exports.isCodeMark = void 0;
|
|
10
10
|
|
|
11
11
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
12
12
|
|
|
@@ -20,13 +20,20 @@ var _messages = require("@atlaskit/editor-common/messages");
|
|
|
20
20
|
|
|
21
21
|
var _useFeatureFlags = require("../../use-feature-flags");
|
|
22
22
|
|
|
23
|
+
var isCodeMark = function isCodeMark(mark) {
|
|
24
|
+
return mark && mark.type && mark.type.name === 'code';
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
exports.isCodeMark = isCodeMark;
|
|
28
|
+
|
|
23
29
|
function CodeWithIntl(props) {
|
|
24
30
|
var featureFlags = (0, _useFeatureFlags.useFeatureFlags)();
|
|
25
31
|
var codeBidiWarningLabel = props.intl.formatMessage(_messages.codeBidiWarningMessages.label);
|
|
26
32
|
return /*#__PURE__*/_react.default.createElement(_inline.default, (0, _extends2.default)({
|
|
27
33
|
className: "code",
|
|
28
34
|
codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
|
|
29
|
-
codeBidiWarningLabel: codeBidiWarningLabel
|
|
35
|
+
codeBidiWarningLabel: codeBidiWarningLabel,
|
|
36
|
+
codeBidiWarningTooltipEnabled: props.codeBidiWarningTooltipEnabled
|
|
30
37
|
}, props.dataAttributes), props.children);
|
|
31
38
|
}
|
|
32
39
|
|
|
@@ -37,7 +37,8 @@ function CodeBlock(props) {
|
|
|
37
37
|
var text = props.text,
|
|
38
38
|
language = props.language,
|
|
39
39
|
_props$allowCopyToCli = props.allowCopyToClipboard,
|
|
40
|
-
allowCopyToClipboard = _props$allowCopyToCli === void 0 ? false : _props$allowCopyToCli
|
|
40
|
+
allowCopyToClipboard = _props$allowCopyToCli === void 0 ? false : _props$allowCopyToCli,
|
|
41
|
+
codeBidiWarningTooltipEnabled = props.codeBidiWarningTooltipEnabled;
|
|
41
42
|
var featureFlags = (0, _useFeatureFlags.useFeatureFlags)();
|
|
42
43
|
var codeBidiWarningLabel = props.intl.formatMessage(_messages.codeBidiWarningMessages.label);
|
|
43
44
|
var className = ['code-block', props.className].join(' ');
|
|
@@ -49,7 +50,8 @@ function CodeBlock(props) {
|
|
|
49
50
|
language: language,
|
|
50
51
|
text: text,
|
|
51
52
|
codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
|
|
52
|
-
codeBidiWarningLabel: codeBidiWarningLabel
|
|
53
|
+
codeBidiWarningLabel: codeBidiWarningLabel,
|
|
54
|
+
codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
|
|
53
55
|
}));
|
|
54
56
|
}
|
|
55
57
|
|
|
@@ -11,21 +11,20 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
11
11
|
|
|
12
12
|
var _annotations = require("../../ui/annotations");
|
|
13
13
|
|
|
14
|
-
var TextWrapper =
|
|
14
|
+
var TextWrapper = function TextWrapper(props) {
|
|
15
15
|
var startPos = props.startPos,
|
|
16
16
|
endPos = props.endPos;
|
|
17
|
-
var
|
|
17
|
+
var children = props.children;
|
|
18
18
|
|
|
19
|
-
if (!
|
|
19
|
+
if (!children) {
|
|
20
20
|
return null;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
return /*#__PURE__*/_react.default.createElement(_annotations.TextWithAnnotationDraft, {
|
|
24
|
-
text: text,
|
|
25
24
|
startPos: startPos,
|
|
26
25
|
endPos: endPos
|
|
27
|
-
});
|
|
28
|
-
}
|
|
26
|
+
}, children);
|
|
27
|
+
};
|
|
29
28
|
|
|
30
29
|
var _default = TextWrapper;
|
|
31
30
|
exports.default = _default;
|
|
@@ -83,7 +83,7 @@ exports.applyAnnotationOnText = applyAnnotationOnText;
|
|
|
83
83
|
var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
|
|
84
84
|
var startPos = _ref3.startPos,
|
|
85
85
|
endPos = _ref3.endPos,
|
|
86
|
-
|
|
86
|
+
children = _ref3.children;
|
|
87
87
|
|
|
88
88
|
var textPosition = _react.default.useMemo(function () {
|
|
89
89
|
return {
|
|
@@ -103,21 +103,21 @@ var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
|
|
|
103
103
|
}, [nextDraftPosition, textPosition]);
|
|
104
104
|
|
|
105
105
|
if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
|
|
106
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null,
|
|
106
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
if (shouldApplyAnnotationAt === _types.InsertDraftPosition.AROUND_TEXT) {
|
|
110
110
|
return /*#__PURE__*/_react.default.createElement(AnnotationDraft, {
|
|
111
111
|
key: 0,
|
|
112
112
|
draftPosition: nextDraftPosition
|
|
113
|
-
},
|
|
113
|
+
}, children);
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
-
var offsets = (0, _text.calcTextSplitOffset)(nextDraftPosition, textPosition,
|
|
117
|
-
var texts = (0, _text.splitText)(
|
|
116
|
+
var offsets = (0, _text.calcTextSplitOffset)(nextDraftPosition, textPosition, children);
|
|
117
|
+
var texts = (0, _text.splitText)(children, offsets);
|
|
118
118
|
|
|
119
119
|
if (!texts) {
|
|
120
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null,
|
|
120
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
var components = applyAnnotationOnText({
|
package/dist/cjs/version.json
CHANGED
|
@@ -10,6 +10,7 @@ import { getMarksByOrder, isSameMark, calcTableColumnWidths } from '@atlaskit/ed
|
|
|
10
10
|
import { getText } from '../utils';
|
|
11
11
|
import { findChildrenByType } from 'prosemirror-utils';
|
|
12
12
|
import { insideBreakoutLayout } from './renderer-node';
|
|
13
|
+
import { isCodeMark } from './marks/code';
|
|
13
14
|
|
|
14
15
|
function mergeMarks(marksAndNodes) {
|
|
15
16
|
return marksAndNodes.reduce((acc, markOrNode) => {
|
|
@@ -128,13 +129,23 @@ export default class ReactSerializer {
|
|
|
128
129
|
} = mark.attrs;
|
|
129
130
|
const extraProps = {
|
|
130
131
|
isInline: node === null || node === void 0 ? void 0 : node.isInline
|
|
131
|
-
};
|
|
132
|
+
}; // currently the only mark which has custom props is the code mark
|
|
133
|
+
|
|
134
|
+
const markSpecificProps = isCodeMark(mark) ? {
|
|
135
|
+
// The appearance being mobile indicates we are in an renderer being
|
|
136
|
+
// rendered by mobile bridge in a web view.
|
|
137
|
+
// The tooltip is likely to have unexpected behaviour there, with being cut
|
|
138
|
+
// off, so we disable it. This is also to keep the behaviour consistent with
|
|
139
|
+
// the rendering in the mobile Native Renderer.
|
|
140
|
+
codeBidiWarningTooltipEnabled: this.appearance !== 'mobile'
|
|
141
|
+
} : {};
|
|
132
142
|
const props = {
|
|
133
143
|
eventHandlers: this.eventHandlers,
|
|
134
144
|
fireAnalyticsEvent: this.fireAnalyticsEvent,
|
|
135
145
|
markKey: key,
|
|
136
146
|
...otherAttrs,
|
|
137
147
|
...extraProps,
|
|
148
|
+
...markSpecificProps,
|
|
138
149
|
dataAttributes: {
|
|
139
150
|
'data-renderer-mark': true
|
|
140
151
|
}
|
|
@@ -299,9 +310,8 @@ export default class ReactSerializer {
|
|
|
299
310
|
return /*#__PURE__*/React.createElement(TextWrapperComponent, {
|
|
300
311
|
key: textKey,
|
|
301
312
|
startPos: startPos + parentDepth,
|
|
302
|
-
endPos: endPos + parentDepth
|
|
303
|
-
|
|
304
|
-
});
|
|
313
|
+
endPos: endPos + parentDepth
|
|
314
|
+
}, mark.text);
|
|
305
315
|
}
|
|
306
316
|
|
|
307
317
|
return mark.text || '';
|
|
@@ -438,8 +448,15 @@ export default class ReactSerializer {
|
|
|
438
448
|
}
|
|
439
449
|
|
|
440
450
|
getCodeBlockProps(node) {
|
|
451
|
+
// The appearance being mobile indicates we are in an renderer being
|
|
452
|
+
// rendered by mobile bridge in a web view.
|
|
453
|
+
// The tooltip is likely to have unexpected behaviour there, with being cut
|
|
454
|
+
// off, so we disable it. This is also to keep the behaviour consistent with
|
|
455
|
+
// the rendering in the mobile Native Renderer.
|
|
456
|
+
const codeBidiWarningTooltipEnabled = this.appearance !== 'mobile';
|
|
441
457
|
return { ...this.getProps(node),
|
|
442
|
-
text: node.textContent
|
|
458
|
+
text: node.textContent,
|
|
459
|
+
codeBidiWarningTooltipEnabled
|
|
443
460
|
};
|
|
444
461
|
}
|
|
445
462
|
|
|
@@ -4,13 +4,17 @@ import { injectIntl } from 'react-intl';
|
|
|
4
4
|
import AkCode from '@atlaskit/code/inline';
|
|
5
5
|
import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
|
|
6
6
|
import { useFeatureFlags } from '../../use-feature-flags';
|
|
7
|
+
export const isCodeMark = mark => {
|
|
8
|
+
return mark && mark.type && mark.type.name === 'code';
|
|
9
|
+
};
|
|
7
10
|
export function CodeWithIntl(props) {
|
|
8
11
|
const featureFlags = useFeatureFlags();
|
|
9
12
|
const codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
|
|
10
13
|
return /*#__PURE__*/React.createElement(AkCode, _extends({
|
|
11
14
|
className: "code",
|
|
12
15
|
codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
|
|
13
|
-
codeBidiWarningLabel: codeBidiWarningLabel
|
|
16
|
+
codeBidiWarningLabel: codeBidiWarningLabel,
|
|
17
|
+
codeBidiWarningTooltipEnabled: props.codeBidiWarningTooltipEnabled
|
|
14
18
|
}, props.dataAttributes), props.children);
|
|
15
19
|
}
|
|
16
20
|
export default injectIntl(CodeWithIntl);
|
|
@@ -14,7 +14,8 @@ function CodeBlock(props) {
|
|
|
14
14
|
const {
|
|
15
15
|
text,
|
|
16
16
|
language,
|
|
17
|
-
allowCopyToClipboard = false
|
|
17
|
+
allowCopyToClipboard = false,
|
|
18
|
+
codeBidiWarningTooltipEnabled
|
|
18
19
|
} = props;
|
|
19
20
|
const featureFlags = useFeatureFlags();
|
|
20
21
|
const codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
|
|
@@ -27,7 +28,8 @@ function CodeBlock(props) {
|
|
|
27
28
|
language: language,
|
|
28
29
|
text: text,
|
|
29
30
|
codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
|
|
30
|
-
codeBidiWarningLabel: codeBidiWarningLabel
|
|
31
|
+
codeBidiWarningLabel: codeBidiWarningLabel,
|
|
32
|
+
codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
|
|
31
33
|
}));
|
|
32
34
|
}
|
|
33
35
|
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TextWithAnnotationDraft } from '../../ui/annotations';
|
|
3
|
-
|
|
3
|
+
|
|
4
|
+
const TextWrapper = props => {
|
|
4
5
|
const {
|
|
5
6
|
startPos,
|
|
6
7
|
endPos
|
|
7
8
|
} = props;
|
|
8
9
|
const {
|
|
9
|
-
|
|
10
|
+
children
|
|
10
11
|
} = props;
|
|
11
12
|
|
|
12
|
-
if (!
|
|
13
|
+
if (!children) {
|
|
13
14
|
return null;
|
|
14
15
|
}
|
|
15
16
|
|
|
16
17
|
return /*#__PURE__*/React.createElement(TextWithAnnotationDraft, {
|
|
17
|
-
text: text,
|
|
18
18
|
startPos: startPos,
|
|
19
19
|
endPos: endPos
|
|
20
|
-
});
|
|
21
|
-
}
|
|
20
|
+
}, children);
|
|
21
|
+
};
|
|
22
|
+
|
|
22
23
|
export default TextWrapper;
|
|
@@ -59,7 +59,7 @@ export const applyAnnotationOnText = ({
|
|
|
59
59
|
export const TextWithAnnotationDraft = ({
|
|
60
60
|
startPos,
|
|
61
61
|
endPos,
|
|
62
|
-
|
|
62
|
+
children
|
|
63
63
|
}) => {
|
|
64
64
|
const textPosition = React.useMemo(() => ({
|
|
65
65
|
start: startPos,
|
|
@@ -75,21 +75,21 @@ export const TextWithAnnotationDraft = ({
|
|
|
75
75
|
}, [nextDraftPosition, textPosition]);
|
|
76
76
|
|
|
77
77
|
if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
|
|
78
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null,
|
|
78
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
if (shouldApplyAnnotationAt === InsertDraftPosition.AROUND_TEXT) {
|
|
82
82
|
return /*#__PURE__*/React.createElement(AnnotationDraft, {
|
|
83
83
|
key: 0,
|
|
84
84
|
draftPosition: nextDraftPosition
|
|
85
|
-
},
|
|
85
|
+
}, children);
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
const offsets = calcTextSplitOffset(nextDraftPosition, textPosition,
|
|
89
|
-
const texts = splitText(
|
|
88
|
+
const offsets = calcTextSplitOffset(nextDraftPosition, textPosition, children);
|
|
89
|
+
const texts = splitText(children, offsets);
|
|
90
90
|
|
|
91
91
|
if (!texts) {
|
|
92
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null,
|
|
92
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
const components = applyAnnotationOnText({
|
package/dist/es2019/version.json
CHANGED
package/dist/esm/react/index.js
CHANGED
|
@@ -19,6 +19,7 @@ import { getMarksByOrder, isSameMark, calcTableColumnWidths } from '@atlaskit/ed
|
|
|
19
19
|
import { getText } from '../utils';
|
|
20
20
|
import { findChildrenByType } from 'prosemirror-utils';
|
|
21
21
|
import { insideBreakoutLayout } from './renderer-node';
|
|
22
|
+
import { isCodeMark } from './marks/code';
|
|
22
23
|
|
|
23
24
|
function mergeMarks(marksAndNodes) {
|
|
24
25
|
return marksAndNodes.reduce(function (acc, markOrNode) {
|
|
@@ -144,13 +145,22 @@ var ReactSerializer = /*#__PURE__*/function () {
|
|
|
144
145
|
|
|
145
146
|
var extraProps = {
|
|
146
147
|
isInline: node === null || node === void 0 ? void 0 : node.isInline
|
|
147
|
-
};
|
|
148
|
-
|
|
149
|
-
var
|
|
148
|
+
}; // currently the only mark which has custom props is the code mark
|
|
149
|
+
|
|
150
|
+
var markSpecificProps = isCodeMark(mark) ? {
|
|
151
|
+
// The appearance being mobile indicates we are in an renderer being
|
|
152
|
+
// rendered by mobile bridge in a web view.
|
|
153
|
+
// The tooltip is likely to have unexpected behaviour there, with being cut
|
|
154
|
+
// off, so we disable it. This is also to keep the behaviour consistent with
|
|
155
|
+
// the rendering in the mobile Native Renderer.
|
|
156
|
+
codeBidiWarningTooltipEnabled: _this.appearance !== 'mobile'
|
|
157
|
+
} : {};
|
|
158
|
+
|
|
159
|
+
var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
|
|
150
160
|
eventHandlers: _this.eventHandlers,
|
|
151
161
|
fireAnalyticsEvent: _this.fireAnalyticsEvent,
|
|
152
162
|
markKey: key
|
|
153
|
-
}, otherAttrs), extraProps), {}, {
|
|
163
|
+
}, otherAttrs), extraProps), markSpecificProps), {}, {
|
|
154
164
|
dataAttributes: {
|
|
155
165
|
'data-renderer-mark': true
|
|
156
166
|
}
|
|
@@ -334,9 +344,8 @@ var ReactSerializer = /*#__PURE__*/function () {
|
|
|
334
344
|
return /*#__PURE__*/React.createElement(TextWrapperComponent, {
|
|
335
345
|
key: textKey,
|
|
336
346
|
startPos: startPos + parentDepth,
|
|
337
|
-
endPos: endPos + parentDepth
|
|
338
|
-
|
|
339
|
-
});
|
|
347
|
+
endPos: endPos + parentDepth
|
|
348
|
+
}, mark.text);
|
|
340
349
|
}
|
|
341
350
|
|
|
342
351
|
return mark.text || '';
|
|
@@ -504,8 +513,15 @@ var ReactSerializer = /*#__PURE__*/function () {
|
|
|
504
513
|
}, {
|
|
505
514
|
key: "getCodeBlockProps",
|
|
506
515
|
value: function getCodeBlockProps(node) {
|
|
516
|
+
// The appearance being mobile indicates we are in an renderer being
|
|
517
|
+
// rendered by mobile bridge in a web view.
|
|
518
|
+
// The tooltip is likely to have unexpected behaviour there, with being cut
|
|
519
|
+
// off, so we disable it. This is also to keep the behaviour consistent with
|
|
520
|
+
// the rendering in the mobile Native Renderer.
|
|
521
|
+
var codeBidiWarningTooltipEnabled = this.appearance !== 'mobile';
|
|
507
522
|
return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
|
|
508
|
-
text: node.textContent
|
|
523
|
+
text: node.textContent,
|
|
524
|
+
codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
|
|
509
525
|
});
|
|
510
526
|
}
|
|
511
527
|
}, {
|
|
@@ -4,13 +4,17 @@ import { injectIntl } from 'react-intl';
|
|
|
4
4
|
import AkCode from '@atlaskit/code/inline';
|
|
5
5
|
import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
|
|
6
6
|
import { useFeatureFlags } from '../../use-feature-flags';
|
|
7
|
+
export var isCodeMark = function isCodeMark(mark) {
|
|
8
|
+
return mark && mark.type && mark.type.name === 'code';
|
|
9
|
+
};
|
|
7
10
|
export function CodeWithIntl(props) {
|
|
8
11
|
var featureFlags = useFeatureFlags();
|
|
9
12
|
var codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
|
|
10
13
|
return /*#__PURE__*/React.createElement(AkCode, _extends({
|
|
11
14
|
className: "code",
|
|
12
15
|
codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
|
|
13
|
-
codeBidiWarningLabel: codeBidiWarningLabel
|
|
16
|
+
codeBidiWarningLabel: codeBidiWarningLabel,
|
|
17
|
+
codeBidiWarningTooltipEnabled: props.codeBidiWarningTooltipEnabled
|
|
14
18
|
}, props.dataAttributes), props.children);
|
|
15
19
|
}
|
|
16
20
|
export default injectIntl(CodeWithIntl);
|
|
@@ -18,7 +18,8 @@ function CodeBlock(props) {
|
|
|
18
18
|
var text = props.text,
|
|
19
19
|
language = props.language,
|
|
20
20
|
_props$allowCopyToCli = props.allowCopyToClipboard,
|
|
21
|
-
allowCopyToClipboard = _props$allowCopyToCli === void 0 ? false : _props$allowCopyToCli
|
|
21
|
+
allowCopyToClipboard = _props$allowCopyToCli === void 0 ? false : _props$allowCopyToCli,
|
|
22
|
+
codeBidiWarningTooltipEnabled = props.codeBidiWarningTooltipEnabled;
|
|
22
23
|
var featureFlags = useFeatureFlags();
|
|
23
24
|
var codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
|
|
24
25
|
var className = ['code-block', props.className].join(' ');
|
|
@@ -30,7 +31,8 @@ function CodeBlock(props) {
|
|
|
30
31
|
language: language,
|
|
31
32
|
text: text,
|
|
32
33
|
codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
|
|
33
|
-
codeBidiWarningLabel: codeBidiWarningLabel
|
|
34
|
+
codeBidiWarningLabel: codeBidiWarningLabel,
|
|
35
|
+
codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
|
|
34
36
|
}));
|
|
35
37
|
}
|
|
36
38
|
|
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TextWithAnnotationDraft } from '../../ui/annotations';
|
|
3
|
-
|
|
3
|
+
|
|
4
|
+
var TextWrapper = function TextWrapper(props) {
|
|
4
5
|
var startPos = props.startPos,
|
|
5
6
|
endPos = props.endPos;
|
|
6
|
-
var
|
|
7
|
+
var children = props.children;
|
|
7
8
|
|
|
8
|
-
if (!
|
|
9
|
+
if (!children) {
|
|
9
10
|
return null;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
return /*#__PURE__*/React.createElement(TextWithAnnotationDraft, {
|
|
13
|
-
text: text,
|
|
14
14
|
startPos: startPos,
|
|
15
15
|
endPos: endPos
|
|
16
|
-
});
|
|
17
|
-
}
|
|
16
|
+
}, children);
|
|
17
|
+
};
|
|
18
|
+
|
|
18
19
|
export default TextWrapper;
|
|
@@ -55,7 +55,7 @@ export var applyAnnotationOnText = function applyAnnotationOnText(_ref2) {
|
|
|
55
55
|
export var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
|
|
56
56
|
var startPos = _ref3.startPos,
|
|
57
57
|
endPos = _ref3.endPos,
|
|
58
|
-
|
|
58
|
+
children = _ref3.children;
|
|
59
59
|
var textPosition = React.useMemo(function () {
|
|
60
60
|
return {
|
|
61
61
|
start: startPos,
|
|
@@ -72,21 +72,21 @@ export var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
|
|
|
72
72
|
}, [nextDraftPosition, textPosition]);
|
|
73
73
|
|
|
74
74
|
if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
|
|
75
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null,
|
|
75
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
if (shouldApplyAnnotationAt === InsertDraftPosition.AROUND_TEXT) {
|
|
79
79
|
return /*#__PURE__*/React.createElement(AnnotationDraft, {
|
|
80
80
|
key: 0,
|
|
81
81
|
draftPosition: nextDraftPosition
|
|
82
|
-
},
|
|
82
|
+
}, children);
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
var offsets = calcTextSplitOffset(nextDraftPosition, textPosition,
|
|
86
|
-
var texts = splitText(
|
|
85
|
+
var offsets = calcTextSplitOffset(nextDraftPosition, textPosition, children);
|
|
86
|
+
var texts = splitText(children, offsets);
|
|
87
87
|
|
|
88
88
|
if (!texts) {
|
|
89
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null,
|
|
89
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
var components = applyAnnotationOnText({
|
package/dist/esm/version.json
CHANGED
|
@@ -1,8 +1,16 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { InjectedIntlProps } from 'react-intl';
|
|
3
|
+
import { Mark } from 'prosemirror-model';
|
|
3
4
|
import type { MarkProps } from '../types';
|
|
4
|
-
export declare
|
|
5
|
-
declare
|
|
6
|
-
|
|
5
|
+
export declare const isCodeMark: (mark: Mark) => boolean;
|
|
6
|
+
export declare function CodeWithIntl(props: MarkProps<{
|
|
7
|
+
codeBidiWarningTooltipEnabled: boolean;
|
|
8
|
+
}> & InjectedIntlProps): JSX.Element;
|
|
9
|
+
declare const _default: React.ComponentClass<{
|
|
10
|
+
codeBidiWarningTooltipEnabled: boolean;
|
|
11
|
+
} & import("../types").MarkMeta, any> & {
|
|
12
|
+
WrappedComponent: ReactIntl.ComponentConstructor<{
|
|
13
|
+
codeBidiWarningTooltipEnabled: boolean;
|
|
14
|
+
} & import("../types").MarkMeta & InjectedIntlProps>;
|
|
7
15
|
};
|
|
8
16
|
export default _default;
|
|
@@ -3,13 +3,14 @@ export interface Props {
|
|
|
3
3
|
text: string;
|
|
4
4
|
language: SupportedLanguages;
|
|
5
5
|
allowCopyToClipboard?: boolean;
|
|
6
|
+
codeBidiWarningTooltipEnabled: boolean;
|
|
6
7
|
className?: string;
|
|
7
8
|
}
|
|
8
|
-
declare const _default: import("styled-components").StyledComponentClass<(Props & import("@atlaskit/theme").AtlaskitThemeProps) | (Props & import("@atlaskit/theme").CustomThemeProps) | (Props & import("@atlaskit/theme").NoThemeProps), any, (Pick<Props, "text" | "className" | "language" | "allowCopyToClipboard"> & {
|
|
9
|
+
declare const _default: import("styled-components").StyledComponentClass<(Props & import("@atlaskit/theme").AtlaskitThemeProps) | (Props & import("@atlaskit/theme").CustomThemeProps) | (Props & import("@atlaskit/theme").NoThemeProps), any, (Pick<Props, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
|
|
9
10
|
theme?: any;
|
|
10
|
-
} & import("@atlaskit/theme").AtlaskitThemeProps) | (Pick<Props, "text" | "className" | "language" | "allowCopyToClipboard"> & {
|
|
11
|
+
} & import("@atlaskit/theme").AtlaskitThemeProps) | (Pick<Props, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
|
|
11
12
|
theme?: any;
|
|
12
|
-
} & import("@atlaskit/theme").CustomThemeProps) | (Pick<Props, "text" | "className" | "language" | "allowCopyToClipboard"> & {
|
|
13
|
+
} & import("@atlaskit/theme").CustomThemeProps) | (Pick<Props, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
|
|
13
14
|
theme?: any;
|
|
14
15
|
} & import("@atlaskit/theme").NoThemeProps)>;
|
|
15
16
|
export default _default;
|
|
@@ -26,17 +26,17 @@ import TableRow from './tableRow';
|
|
|
26
26
|
import UnknownBlock from './unknownBlock';
|
|
27
27
|
import Loadable from 'react-loadable';
|
|
28
28
|
import EmbedCard from './embedCard';
|
|
29
|
-
declare const CodeBlock: (React.ComponentClass<import("styled-components").ThemedOuterStyledProps<(Pick<import("./codeBlock").Props, "text" | "className" | "language" | "allowCopyToClipboard"> & {
|
|
29
|
+
declare const CodeBlock: (React.ComponentClass<import("styled-components").ThemedOuterStyledProps<(Pick<import("./codeBlock").Props, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
|
|
30
30
|
theme?: any;
|
|
31
|
-
} & import("@atlaskit/theme").AtlaskitThemeProps) | (Pick<import("./codeBlock").Props, "text" | "className" | "language" | "allowCopyToClipboard"> & {
|
|
31
|
+
} & import("@atlaskit/theme").AtlaskitThemeProps) | (Pick<import("./codeBlock").Props, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
|
|
32
32
|
theme?: any;
|
|
33
|
-
} & import("@atlaskit/theme").CustomThemeProps) | (Pick<import("./codeBlock").Props, "text" | "className" | "language" | "allowCopyToClipboard"> & {
|
|
33
|
+
} & import("@atlaskit/theme").CustomThemeProps) | (Pick<import("./codeBlock").Props, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
|
|
34
34
|
theme?: any;
|
|
35
|
-
} & import("@atlaskit/theme").NoThemeProps), any>, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("styled-components").ThemedOuterStyledProps<(Pick<import("./codeBlock").Props, "text" | "className" | "language" | "allowCopyToClipboard"> & {
|
|
35
|
+
} & import("@atlaskit/theme").NoThemeProps), any>, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("styled-components").ThemedOuterStyledProps<(Pick<import("./codeBlock").Props, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
|
|
36
36
|
theme?: any;
|
|
37
|
-
} & import("@atlaskit/theme").AtlaskitThemeProps) | (Pick<import("./codeBlock").Props, "text" | "className" | "language" | "allowCopyToClipboard"> & {
|
|
37
|
+
} & import("@atlaskit/theme").AtlaskitThemeProps) | (Pick<import("./codeBlock").Props, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
|
|
38
38
|
theme?: any;
|
|
39
|
-
} & import("@atlaskit/theme").CustomThemeProps) | (Pick<import("./codeBlock").Props, "text" | "className" | "language" | "allowCopyToClipboard"> & {
|
|
39
|
+
} & import("@atlaskit/theme").CustomThemeProps) | (Pick<import("./codeBlock").Props, "text" | "className" | "language" | "allowCopyToClipboard" | "codeBidiWarningTooltipEnabled"> & {
|
|
40
40
|
theme?: any;
|
|
41
41
|
} & import("@atlaskit/theme").NoThemeProps), any>> & Loadable.LoadableComponent);
|
|
42
42
|
declare const TaskItem: (React.ComponentClass<import("../types").NodeProps<import("./taskItem").Props>, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("../types").NodeProps<import("./taskItem").Props>> & Loadable.LoadableComponent);
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
declare type Props = {
|
|
3
2
|
startPos: number;
|
|
4
3
|
endPos: number;
|
|
5
|
-
|
|
4
|
+
children?: string | null;
|
|
6
5
|
};
|
|
7
|
-
declare const TextWrapper:
|
|
6
|
+
declare const TextWrapper: (props: Props) => JSX.Element | null;
|
|
8
7
|
export default TextWrapper;
|
|
@@ -13,7 +13,7 @@ export declare const applyAnnotationOnText: ({ texts, shouldApplyAnnotationAt, d
|
|
|
13
13
|
declare type Props = {
|
|
14
14
|
startPos: number;
|
|
15
15
|
endPos: number;
|
|
16
|
-
|
|
16
|
+
children: string;
|
|
17
17
|
};
|
|
18
18
|
export declare const TextWithAnnotationDraft: React.FC<Props>;
|
|
19
19
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/renderer",
|
|
3
|
-
"version": "82.
|
|
3
|
+
"version": "82.2.0",
|
|
4
4
|
"description": "Renderer component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"@atlaskit/analytics-namespaced-context": "^6.3.0",
|
|
31
31
|
"@atlaskit/analytics-next": "^8.2.0",
|
|
32
32
|
"@atlaskit/button": "^16.1.0",
|
|
33
|
-
"@atlaskit/code": "^14.
|
|
33
|
+
"@atlaskit/code": "^14.3.0",
|
|
34
34
|
"@atlaskit/editor-common": "^60.3.0",
|
|
35
35
|
"@atlaskit/editor-json-transformer": "^8.6.0",
|
|
36
36
|
"@atlaskit/editor-shared-styles": "^1.6.0",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"@atlaskit/build-utils": "^2.6.2",
|
|
70
70
|
"@atlaskit/css-reset": "^6.2.0",
|
|
71
71
|
"@atlaskit/docs": "*",
|
|
72
|
-
"@atlaskit/editor-core": "^151.
|
|
72
|
+
"@atlaskit/editor-core": "^151.2.0",
|
|
73
73
|
"@atlaskit/editor-test-helpers": "^15.5.0",
|
|
74
74
|
"@atlaskit/field-range": "^9.0.0",
|
|
75
75
|
"@atlaskit/logo": "^13.5.0",
|