@atlaskit/code 14.4.5 → 14.4.7
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 +12 -0
- package/__perf__/code-block-100-lines.tsx +7 -0
- package/__perf__/code-block-1000-lines.tsx +7 -0
- package/__perf__/code-block-4458-lines.tsx +7 -0
- package/__perf__/code-block-500-lines.tsx +7 -0
- package/__perf__/{code-block-text.tsx → code-block-no-syntax-highlighting.tsx} +1 -1
- package/__perf__/{code-block-jsx.tsx → code-block-syntax-highlighting.tsx} +0 -0
- package/__perf__/{default.tsx → inline-code.tsx} +0 -0
- package/__perf__/source-code-examples/100-line-example.tsx +101 -0
- package/__perf__/source-code-examples/1000-line-example.tsx +1000 -0
- package/__perf__/source-code-examples/4458-line-example.tsx +4461 -0
- package/__perf__/source-code-examples/500-line-example.tsx +501 -0
- package/dist/cjs/bidi-warning/bidi-warning-decorator.js +6 -19
- package/dist/cjs/bidi-warning/index.js +0 -2
- package/dist/cjs/bidi-warning/ui/index.js +6 -17
- package/dist/cjs/bidi-warning/ui/styled.js +7 -12
- package/dist/cjs/code-block.js +25 -34
- package/dist/cjs/code.js +11 -33
- package/dist/cjs/constants.js +0 -2
- package/dist/cjs/entry-points/block.js +0 -2
- package/dist/cjs/entry-points/constants.js +0 -1
- package/dist/cjs/entry-points/inline.js +0 -4
- package/dist/cjs/extract-react-types/code-block.js +0 -1
- package/dist/cjs/extract-react-types/code.js +0 -1
- package/dist/cjs/index.js +0 -7
- package/dist/cjs/internal/hooks/use-highlight.js +10 -24
- package/dist/cjs/internal/theme/constants.js +2 -3
- package/dist/cjs/internal/theme/get-theme.js +0 -16
- package/dist/cjs/internal/theme/styles.js +4 -23
- package/dist/cjs/internal/utils/get-normalized-language.js +2 -8
- package/dist/cjs/react-syntax-highlighter-bidi-warning-renderer.js +17 -41
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/bidi-warning/bidi-warning-decorator.js +5 -9
- package/dist/es2019/bidi-warning/ui/index.js +0 -1
- package/dist/es2019/bidi-warning/ui/styled.js +5 -6
- package/dist/es2019/code-block.js +5 -3
- package/dist/es2019/code.js +0 -7
- package/dist/es2019/internal/hooks/use-highlight.js +4 -8
- package/dist/es2019/internal/theme/constants.js +2 -1
- package/dist/es2019/internal/theme/get-theme.js +2 -3
- package/dist/es2019/internal/theme/styles.js +8 -9
- package/dist/es2019/internal/utils/get-normalized-language.js +2 -3
- package/dist/es2019/react-syntax-highlighter-bidi-warning-renderer.js +14 -21
- package/dist/es2019/version.json +1 -1
- package/dist/esm/bidi-warning/bidi-warning-decorator.js +6 -16
- package/dist/esm/bidi-warning/ui/index.js +6 -9
- package/dist/esm/bidi-warning/ui/styled.js +7 -8
- package/dist/esm/code-block.js +26 -26
- package/dist/esm/code.js +11 -21
- package/dist/esm/internal/hooks/use-highlight.js +10 -19
- package/dist/esm/internal/theme/constants.js +2 -1
- package/dist/esm/internal/theme/get-theme.js +0 -5
- package/dist/esm/internal/theme/styles.js +4 -10
- package/dist/esm/internal/utils/get-normalized-language.js +2 -3
- package/dist/esm/react-syntax-highlighter-bidi-warning-renderer.js +20 -33
- package/dist/esm/version.json +1 -1
- package/package.json +1 -1
- package/report.api.md +14 -1
|
@@ -2,7 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
// @ts-nocheck
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import CodeBidiWarning from './bidi-warning';
|
|
5
|
-
import codeBidiWarningDecorator from './bidi-warning/bidi-warning-decorator';
|
|
5
|
+
import codeBidiWarningDecorator from './bidi-warning/bidi-warning-decorator';
|
|
6
|
+
|
|
7
|
+
// File mostly vendored from react-syntax-highlighter
|
|
6
8
|
//
|
|
7
9
|
// - https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/efc3f7b7537d1729193b7a472067bcbe6cbecaf1/src/highlight.js#L272-L281
|
|
8
10
|
// - https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/efc3f7b7537d1729193b7a472067bcbe6cbecaf1/src/create-element.js
|
|
@@ -23,55 +25,47 @@ export function createBidiWarningRenderer(codeBidiWarningConfig) {
|
|
|
23
25
|
key: `code-segement${i}`
|
|
24
26
|
}));
|
|
25
27
|
};
|
|
26
|
-
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// Get all possible permutations of all power sets
|
|
27
31
|
//
|
|
28
32
|
// Super simple, non-algorithmic solution since the
|
|
29
33
|
// number of class names will not be greater than 4
|
|
30
|
-
|
|
31
34
|
function powerSetPermutations(arr) {
|
|
32
35
|
const arrLength = arr.length;
|
|
33
|
-
|
|
34
36
|
if (arrLength === 0 || arrLength === 1) {
|
|
35
37
|
return arr;
|
|
36
38
|
}
|
|
37
|
-
|
|
38
39
|
if (arrLength === 2) {
|
|
39
40
|
// prettier-ignore
|
|
40
41
|
return [arr[0], arr[1], `${arr[0]}.${arr[1]}`, `${arr[1]}.${arr[0]}`];
|
|
41
42
|
}
|
|
42
|
-
|
|
43
43
|
if (arrLength === 3) {
|
|
44
44
|
return [arr[0], arr[1], arr[2], `${arr[0]}.${arr[1]}`, `${arr[0]}.${arr[2]}`, `${arr[1]}.${arr[0]}`, `${arr[1]}.${arr[2]}`, `${arr[2]}.${arr[0]}`, `${arr[2]}.${arr[1]}`, `${arr[0]}.${arr[1]}.${arr[2]}`, `${arr[0]}.${arr[2]}.${arr[1]}`, `${arr[1]}.${arr[0]}.${arr[2]}`, `${arr[1]}.${arr[2]}.${arr[0]}`, `${arr[2]}.${arr[0]}.${arr[1]}`, `${arr[2]}.${arr[1]}.${arr[0]}`];
|
|
45
45
|
}
|
|
46
|
-
|
|
47
46
|
if (arrLength >= 4) {
|
|
48
47
|
// Currently does not support more than 4 extra
|
|
49
48
|
// class names (after `.token` has been removed)
|
|
50
49
|
return [arr[0], arr[1], arr[2], arr[3], `${arr[0]}.${arr[1]}`, `${arr[0]}.${arr[2]}`, `${arr[0]}.${arr[3]}`, `${arr[1]}.${arr[0]}`, `${arr[1]}.${arr[2]}`, `${arr[1]}.${arr[3]}`, `${arr[2]}.${arr[0]}`, `${arr[2]}.${arr[1]}`, `${arr[2]}.${arr[3]}`, `${arr[3]}.${arr[0]}`, `${arr[3]}.${arr[1]}`, `${arr[3]}.${arr[2]}`, `${arr[0]}.${arr[1]}.${arr[2]}`, `${arr[0]}.${arr[1]}.${arr[3]}`, `${arr[0]}.${arr[2]}.${arr[1]}`, `${arr[0]}.${arr[2]}.${arr[3]}`, `${arr[0]}.${arr[3]}.${arr[1]}`, `${arr[0]}.${arr[3]}.${arr[2]}`, `${arr[1]}.${arr[0]}.${arr[2]}`, `${arr[1]}.${arr[0]}.${arr[3]}`, `${arr[1]}.${arr[2]}.${arr[0]}`, `${arr[1]}.${arr[2]}.${arr[3]}`, `${arr[1]}.${arr[3]}.${arr[0]}`, `${arr[1]}.${arr[3]}.${arr[2]}`, `${arr[2]}.${arr[0]}.${arr[1]}`, `${arr[2]}.${arr[0]}.${arr[3]}`, `${arr[2]}.${arr[1]}.${arr[0]}`, `${arr[2]}.${arr[1]}.${arr[3]}`, `${arr[2]}.${arr[3]}.${arr[0]}`, `${arr[2]}.${arr[3]}.${arr[1]}`, `${arr[3]}.${arr[0]}.${arr[1]}`, `${arr[3]}.${arr[0]}.${arr[2]}`, `${arr[3]}.${arr[1]}.${arr[0]}`, `${arr[3]}.${arr[1]}.${arr[2]}`, `${arr[3]}.${arr[2]}.${arr[0]}`, `${arr[3]}.${arr[2]}.${arr[1]}`, `${arr[0]}.${arr[1]}.${arr[2]}.${arr[3]}`, `${arr[0]}.${arr[1]}.${arr[3]}.${arr[2]}`, `${arr[0]}.${arr[2]}.${arr[1]}.${arr[3]}`, `${arr[0]}.${arr[2]}.${arr[3]}.${arr[1]}`, `${arr[0]}.${arr[3]}.${arr[1]}.${arr[2]}`, `${arr[0]}.${arr[3]}.${arr[2]}.${arr[1]}`, `${arr[1]}.${arr[0]}.${arr[2]}.${arr[3]}`, `${arr[1]}.${arr[0]}.${arr[3]}.${arr[2]}`, `${arr[1]}.${arr[2]}.${arr[0]}.${arr[3]}`, `${arr[1]}.${arr[2]}.${arr[3]}.${arr[0]}`, `${arr[1]}.${arr[3]}.${arr[0]}.${arr[2]}`, `${arr[1]}.${arr[3]}.${arr[2]}.${arr[0]}`, `${arr[2]}.${arr[0]}.${arr[1]}.${arr[3]}`, `${arr[2]}.${arr[0]}.${arr[3]}.${arr[1]}`, `${arr[2]}.${arr[1]}.${arr[0]}.${arr[3]}`, `${arr[2]}.${arr[1]}.${arr[3]}.${arr[0]}`, `${arr[2]}.${arr[3]}.${arr[0]}.${arr[1]}`, `${arr[2]}.${arr[3]}.${arr[1]}.${arr[0]}`, `${arr[3]}.${arr[0]}.${arr[1]}.${arr[2]}`, `${arr[3]}.${arr[0]}.${arr[2]}.${arr[1]}`, `${arr[3]}.${arr[1]}.${arr[0]}.${arr[2]}`, `${arr[3]}.${arr[1]}.${arr[2]}.${arr[0]}`, `${arr[3]}.${arr[2]}.${arr[0]}.${arr[1]}`, `${arr[3]}.${arr[2]}.${arr[1]}.${arr[0]}`];
|
|
51
50
|
}
|
|
52
51
|
}
|
|
53
|
-
|
|
54
52
|
const classNameCombinations = {};
|
|
55
|
-
|
|
56
53
|
function getClassNameCombinations(classNames) {
|
|
57
54
|
if (classNames.length === 0 || classNames.length === 1) {
|
|
58
55
|
return classNames;
|
|
59
56
|
}
|
|
60
|
-
|
|
61
57
|
const key = classNames.join('.');
|
|
62
|
-
|
|
63
58
|
if (!classNameCombinations[key]) {
|
|
64
59
|
classNameCombinations[key] = powerSetPermutations(classNames);
|
|
65
60
|
}
|
|
66
|
-
|
|
67
61
|
return classNameCombinations[key];
|
|
68
62
|
}
|
|
69
|
-
|
|
70
63
|
export function createStyleObject(classNames, elementStyle = {}, stylesheet) {
|
|
71
64
|
const nonTokenClassNames = classNames.filter(className => className !== 'token');
|
|
72
65
|
const classNamesCombinations = getClassNameCombinations(nonTokenClassNames);
|
|
73
66
|
return classNamesCombinations.reduce((styleObject, className) => {
|
|
74
|
-
return {
|
|
67
|
+
return {
|
|
68
|
+
...styleObject,
|
|
75
69
|
...stylesheet[className]
|
|
76
70
|
};
|
|
77
71
|
}, elementStyle);
|
|
@@ -92,7 +86,6 @@ export function createChildren(stylesheet, useInlineStyles, codeBidiWarningConfi
|
|
|
92
86
|
}));
|
|
93
87
|
};
|
|
94
88
|
}
|
|
95
|
-
|
|
96
89
|
function createElement({
|
|
97
90
|
node,
|
|
98
91
|
stylesheet,
|
|
@@ -107,7 +100,6 @@ function createElement({
|
|
|
107
100
|
tagName: TagName,
|
|
108
101
|
value
|
|
109
102
|
} = node;
|
|
110
|
-
|
|
111
103
|
if (type === 'text') {
|
|
112
104
|
// occasionally react-syntax-highlighter passes a numeric value when the
|
|
113
105
|
// type is text
|
|
@@ -125,9 +117,9 @@ function createElement({
|
|
|
125
117
|
} else if (TagName) {
|
|
126
118
|
const childrenCreator = createChildren(stylesheet, useInlineStyles, codeBidiWarningConfig);
|
|
127
119
|
let props;
|
|
128
|
-
|
|
129
120
|
if (!useInlineStyles) {
|
|
130
|
-
props = {
|
|
121
|
+
props = {
|
|
122
|
+
...properties,
|
|
131
123
|
className: createClassNameString(properties.className)
|
|
132
124
|
};
|
|
133
125
|
} else {
|
|
@@ -138,16 +130,17 @@ function createElement({
|
|
|
138
130
|
}
|
|
139
131
|
});
|
|
140
132
|
return classes;
|
|
141
|
-
}, []);
|
|
133
|
+
}, []);
|
|
142
134
|
|
|
135
|
+
// For compatibility with older versions of react-syntax-highlighter
|
|
143
136
|
const startingClassName = properties.className && properties.className.includes('token') ? ['token'] : [];
|
|
144
137
|
const className = properties.className && startingClassName.concat(properties.className.filter(className => !allStylesheetSelectors.includes(className)));
|
|
145
|
-
props = {
|
|
138
|
+
props = {
|
|
139
|
+
...properties,
|
|
146
140
|
className: createClassNameString(className) || undefined,
|
|
147
141
|
style: createStyleObject(properties.className, Object.assign({}, properties.style, style), stylesheet)
|
|
148
142
|
};
|
|
149
143
|
}
|
|
150
|
-
|
|
151
144
|
const children = childrenCreator(node.children);
|
|
152
145
|
return /*#__PURE__*/React.createElement(TagName, _extends({
|
|
153
146
|
key: key
|
package/dist/es2019/version.json
CHANGED
|
@@ -1,46 +1,37 @@
|
|
|
1
1
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
-
|
|
3
2
|
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
4
|
-
|
|
5
3
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
6
|
-
|
|
7
4
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
8
|
-
|
|
9
5
|
export var bidiCharacterRegex = /[\u202A-\u202E\u2066-\u2069]/g;
|
|
10
6
|
export default function codeBidiWarningDecorator(originalText, decorate) {
|
|
11
7
|
var matches = _toConsumableArray(originalText.matchAll(bidiCharacterRegex));
|
|
12
|
-
|
|
13
8
|
if (matches.length === 0) {
|
|
14
9
|
// No matches encountered, so we return the originalText value
|
|
15
10
|
return originalText;
|
|
16
11
|
}
|
|
17
|
-
|
|
18
12
|
var children = [];
|
|
19
13
|
var mappedTo = 0;
|
|
20
|
-
|
|
21
14
|
var _iterator = _createForOfIteratorHelper(matches),
|
|
22
|
-
|
|
23
|
-
|
|
15
|
+
_step;
|
|
24
16
|
try {
|
|
25
17
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
26
18
|
var match = _step.value;
|
|
27
|
-
|
|
28
19
|
if (mappedTo !== match.index) {
|
|
29
20
|
// There were unmatched characters prior to this match which haven't been
|
|
30
21
|
// mapped to the children.
|
|
31
22
|
// Add them as plain text.
|
|
32
23
|
children.push(originalText.substring(mappedTo, match.index));
|
|
33
24
|
}
|
|
34
|
-
|
|
35
25
|
children.push(decorate({
|
|
36
26
|
bidiCharacter: match[0],
|
|
37
27
|
index: match.index
|
|
38
|
-
}));
|
|
28
|
+
}));
|
|
29
|
+
|
|
30
|
+
// While index is guaranteed to be present, it needs to be asserted due
|
|
39
31
|
// to a limitation of typescripts regex handling
|
|
40
32
|
//
|
|
41
33
|
// https://github.com/microsoft/TypeScript/issues/36788
|
|
42
34
|
// Decorate bidi character
|
|
43
|
-
|
|
44
35
|
mappedTo = match.index + match[0].length;
|
|
45
36
|
}
|
|
46
37
|
} catch (err) {
|
|
@@ -48,14 +39,13 @@ export default function codeBidiWarningDecorator(originalText, decorate) {
|
|
|
48
39
|
} finally {
|
|
49
40
|
_iterator.f();
|
|
50
41
|
}
|
|
51
|
-
|
|
52
42
|
if (mappedTo !== originalText.length) {
|
|
53
43
|
// There is text following the final match, which needs to be mapped
|
|
54
44
|
// to the children.
|
|
55
45
|
// Added as plain text.
|
|
56
46
|
children.push(originalText.substring(mappedTo, originalText.length));
|
|
57
|
-
}
|
|
58
|
-
|
|
47
|
+
}
|
|
59
48
|
|
|
49
|
+
// return the mapped children with decorated bidi characters
|
|
60
50
|
return children;
|
|
61
51
|
}
|
|
@@ -6,12 +6,11 @@ import Tooltip from '@atlaskit/tooltip';
|
|
|
6
6
|
import { Decorator } from './styled';
|
|
7
7
|
export default function BidiWarning(_ref) {
|
|
8
8
|
var testId = _ref.testId,
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
bidiCharacter = _ref.bidiCharacter,
|
|
10
|
+
skipChildren = _ref.skipChildren,
|
|
11
|
+
tooltipEnabled = _ref.tooltipEnabled,
|
|
12
|
+
_ref$label = _ref.label,
|
|
13
|
+
label = _ref$label === void 0 ? 'Bidirectional characters change the order that text is rendered. This could be used to obscure malicious code.' : _ref$label;
|
|
15
14
|
if (tooltipEnabled) {
|
|
16
15
|
return (
|
|
17
16
|
/*#__PURE__*/
|
|
@@ -26,7 +25,6 @@ export default function BidiWarning(_ref) {
|
|
|
26
25
|
}, skipChildren ? null : bidiCharacter))
|
|
27
26
|
);
|
|
28
27
|
}
|
|
29
|
-
|
|
30
28
|
return /*#__PURE__*/React.createElement(Decorator, {
|
|
31
29
|
testId: testId,
|
|
32
30
|
bidiCharacter: bidiCharacter
|
|
@@ -34,8 +32,7 @@ export default function BidiWarning(_ref) {
|
|
|
34
32
|
}
|
|
35
33
|
var CustomizedTagWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
36
34
|
var children = props.children,
|
|
37
|
-
|
|
38
|
-
|
|
35
|
+
rest = _objectWithoutProperties(props, _excluded);
|
|
39
36
|
return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
|
|
40
37
|
ref: ref
|
|
41
38
|
}), children);
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
|
+
|
|
2
3
|
import { css, jsx } from '@emotion/react';
|
|
3
4
|
import { Y75 } from '@atlaskit/theme/colors';
|
|
4
5
|
var decoration = css({
|
|
@@ -10,17 +11,16 @@ var decoration = css({
|
|
|
10
11
|
position: 'relative',
|
|
11
12
|
':before': {
|
|
12
13
|
display: 'inline-flex',
|
|
13
|
-
padding: "var(--ds-
|
|
14
|
+
padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
|
|
14
15
|
alignItems: 'center',
|
|
15
16
|
justifyContent: 'center',
|
|
16
17
|
flexDirection: 'row',
|
|
17
18
|
background: "var(--ds-background-warning, ".concat(Y75, ")"),
|
|
18
19
|
color: "var(--ds-text-warning, #7F5F01)",
|
|
19
20
|
content: '"<"attr(data-bidi-character-code)">"',
|
|
20
|
-
fontSize:
|
|
21
|
+
fontSize: "var(--ds-font-size-100, 14px)",
|
|
21
22
|
fontStyle: 'normal',
|
|
22
23
|
lineHeight: '18px',
|
|
23
|
-
|
|
24
24
|
/**
|
|
25
25
|
* Ensures the decoration receives pointer events when it occurs with
|
|
26
26
|
* an ancestor that disables them.
|
|
@@ -34,15 +34,16 @@ var decoration = css({
|
|
|
34
34
|
});
|
|
35
35
|
export function Decorator(_ref) {
|
|
36
36
|
var bidiCharacter = _ref.bidiCharacter,
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
children = _ref.children,
|
|
38
|
+
testId = _ref.testId;
|
|
39
39
|
var bidiCharacterCode = getBidiCharacterCode(bidiCharacter);
|
|
40
40
|
return jsx("span", {
|
|
41
41
|
"aria-label": bidiCharacterCode
|
|
42
42
|
}, jsx("span", {
|
|
43
43
|
css: decoration,
|
|
44
44
|
"data-testid": testId,
|
|
45
|
-
"data-bidi-character-code": bidiCharacterCode
|
|
45
|
+
"data-bidi-character-code": bidiCharacterCode
|
|
46
|
+
// This is set to true so that the content is not read out by
|
|
46
47
|
// screen readers as the content includes angle brackets for
|
|
47
48
|
// visual decoration purposes.
|
|
48
49
|
// We use a span with the aria-label set to the bidi character code
|
|
@@ -51,10 +52,8 @@ export function Decorator(_ref) {
|
|
|
51
52
|
"aria-hidden": "true"
|
|
52
53
|
}, children));
|
|
53
54
|
}
|
|
54
|
-
|
|
55
55
|
function getBidiCharacterCode(bidiCharacter) {
|
|
56
56
|
var _bidiCharacter$codePo;
|
|
57
|
-
|
|
58
57
|
var bidiCharacterCode = (_bidiCharacter$codePo = bidiCharacter.codePointAt(0)) === null || _bidiCharacter$codePo === void 0 ? void 0 : _bidiCharacter$codePo.toString(16);
|
|
59
58
|
return "U+".concat(bidiCharacterCode);
|
|
60
59
|
}
|
package/dist/esm/code-block.js
CHANGED
|
@@ -7,6 +7,7 @@ import { useHighlightLines } from './internal/hooks/use-highlight';
|
|
|
7
7
|
import { getCodeBlockStyles, getCodeBlockTheme } from './internal/theme/styles';
|
|
8
8
|
import { normalizeLanguage } from './internal/utils/get-normalized-language';
|
|
9
9
|
import { createBidiWarningRenderer } from './react-syntax-highlighter-bidi-warning-renderer';
|
|
10
|
+
|
|
10
11
|
/**
|
|
11
12
|
* __Code block__
|
|
12
13
|
*
|
|
@@ -16,25 +17,24 @@ import { createBidiWarningRenderer } from './react-syntax-highlighter-bidi-warni
|
|
|
16
17
|
* - [Code](https://atlassian.design/components/code/code-block/code)
|
|
17
18
|
* - [Usage](https://atlassian.design/components/code/code-block/usage)
|
|
18
19
|
*/
|
|
19
|
-
|
|
20
20
|
var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
|
|
21
21
|
var _ref$showLineNumbers = _ref.showLineNumbers,
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
22
|
+
showLineNumbers = _ref$showLineNumbers === void 0 ? true : _ref$showLineNumbers,
|
|
23
|
+
_ref$language = _ref.language,
|
|
24
|
+
providedLanguage = _ref$language === void 0 ? 'text' : _ref$language,
|
|
25
|
+
_ref$highlight = _ref.highlight,
|
|
26
|
+
highlight = _ref$highlight === void 0 ? '' : _ref$highlight,
|
|
27
|
+
_ref$highlightedStart = _ref.highlightedStartText,
|
|
28
|
+
highlightedStartText = _ref$highlightedStart === void 0 ? 'Highlight start' : _ref$highlightedStart,
|
|
29
|
+
_ref$highlightedEndTe = _ref.highlightedEndText,
|
|
30
|
+
highlightedEndText = _ref$highlightedEndTe === void 0 ? 'Highlight end' : _ref$highlightedEndTe,
|
|
31
|
+
testId = _ref.testId,
|
|
32
|
+
text = _ref.text,
|
|
33
|
+
_ref$codeBidiWarnings = _ref.codeBidiWarnings,
|
|
34
|
+
codeBidiWarnings = _ref$codeBidiWarnings === void 0 ? true : _ref$codeBidiWarnings,
|
|
35
|
+
codeBidiWarningLabel = _ref.codeBidiWarningLabel,
|
|
36
|
+
_ref$codeBidiWarningT = _ref.codeBidiWarningTooltipEnabled,
|
|
37
|
+
codeBidiWarningTooltipEnabled = _ref$codeBidiWarningT === void 0 ? true : _ref$codeBidiWarningT;
|
|
38
38
|
var numLines = (text || '').split('\n').length;
|
|
39
39
|
var globalTheme = useGlobalTheme();
|
|
40
40
|
var theme = useMemo(function () {
|
|
@@ -46,21 +46,20 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
|
|
|
46
46
|
var styles = useMemo(function () {
|
|
47
47
|
return css(getStyles(highlightedStartText, highlightedEndText, showLineNumbers));
|
|
48
48
|
}, [highlightedStartText, highlightedEndText, showLineNumbers, getStyles]);
|
|
49
|
-
|
|
50
49
|
var _useHighlightLines = useHighlightLines({
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
50
|
+
highlight: highlight,
|
|
51
|
+
testId: testId
|
|
52
|
+
}),
|
|
53
|
+
getHighlightStyles = _useHighlightLines.getHighlightStyles,
|
|
54
|
+
highlightedLines = _useHighlightLines.highlightedLines;
|
|
57
55
|
var getLineProps = useCallback(function (line) {
|
|
58
56
|
return getHighlightStyles(line, highlightedLines);
|
|
59
57
|
}, [getHighlightStyles, highlightedLines]);
|
|
60
58
|
var language = useMemo(function () {
|
|
61
59
|
return normalizeLanguage(providedLanguage);
|
|
62
|
-
}, [providedLanguage]);
|
|
60
|
+
}, [providedLanguage]);
|
|
63
61
|
|
|
62
|
+
// https://product-fabric.atlassian.net/browse/DST-2472
|
|
64
63
|
var languageToUse = text ? language : 'text';
|
|
65
64
|
var renderer = codeBidiWarnings ? createBidiWarningRenderer({
|
|
66
65
|
codeBidiWarningLabel: codeBidiWarningLabel,
|
|
@@ -73,7 +72,8 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
|
|
|
73
72
|
css: styles,
|
|
74
73
|
language: languageToUse,
|
|
75
74
|
PreTag: "span",
|
|
76
|
-
showLineNumbers: showLineNumbers
|
|
75
|
+
showLineNumbers: showLineNumbers
|
|
76
|
+
// Wrap lines is needed to set styles on the line when highlighting.
|
|
77
77
|
,
|
|
78
78
|
wrapLines: highlight.length > 0 || !!testId,
|
|
79
79
|
lineProps: getLineProps,
|
package/dist/esm/code.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["testId"],
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
_excluded2 = ["children", "codeBidiWarnings", "codeBidiWarningLabel", "codeBidiWarningTooltipEnabled"];
|
|
6
5
|
/** @jsx jsx */
|
|
7
6
|
import React, { forwardRef, memo, useMemo } from 'react';
|
|
8
7
|
import { css, jsx } from '@emotion/react';
|
|
@@ -10,7 +9,6 @@ import { useGlobalTheme } from '@atlaskit/theme/components';
|
|
|
10
9
|
import CodeBidiWarning from './bidi-warning';
|
|
11
10
|
import codeBidiWarningDecorator from './bidi-warning/bidi-warning-decorator';
|
|
12
11
|
import { getCodeStyles } from './internal/theme/styles';
|
|
13
|
-
|
|
14
12
|
/**
|
|
15
13
|
* __Code__
|
|
16
14
|
*
|
|
@@ -22,21 +20,18 @@ import { getCodeStyles } from './internal/theme/styles';
|
|
|
22
20
|
*/
|
|
23
21
|
var Code = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Code(_ref, ref) {
|
|
24
22
|
var testId = _ref.testId,
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
27
24
|
var theme = useGlobalTheme();
|
|
28
25
|
var styles = useMemo(function () {
|
|
29
26
|
return css(getCodeStyles(theme));
|
|
30
27
|
}, [theme]);
|
|
31
|
-
|
|
32
28
|
var children = props.children,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
29
|
+
_props$codeBidiWarnin = props.codeBidiWarnings,
|
|
30
|
+
codeBidiWarnings = _props$codeBidiWarnin === void 0 ? true : _props$codeBidiWarnin,
|
|
31
|
+
codeBidiWarningLabel = props.codeBidiWarningLabel,
|
|
32
|
+
_props$codeBidiWarnin2 = props.codeBidiWarningTooltipEnabled,
|
|
33
|
+
codeBidiWarningTooltipEnabled = _props$codeBidiWarnin2 === void 0 ? true : _props$codeBidiWarnin2,
|
|
34
|
+
otherProps = _objectWithoutProperties(props, _excluded2);
|
|
40
35
|
var decoratedChildren = codeBidiWarnings ? jsx(RenderCodeChildrenWithBidiWarnings, {
|
|
41
36
|
codeBidiWarningLabel: codeBidiWarningLabel,
|
|
42
37
|
codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
|
|
@@ -47,16 +42,15 @@ var Code = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Code(_ref, ref) {
|
|
|
47
42
|
css: styles
|
|
48
43
|
}, otherProps), decoratedChildren);
|
|
49
44
|
}));
|
|
50
|
-
|
|
51
45
|
function RenderCodeChildrenWithBidiWarnings(_ref2) {
|
|
52
46
|
var children = _ref2.children,
|
|
53
|
-
|
|
54
|
-
|
|
47
|
+
codeBidiWarningLabel = _ref2.codeBidiWarningLabel,
|
|
48
|
+
codeBidiWarningTooltipEnabled = _ref2.codeBidiWarningTooltipEnabled;
|
|
55
49
|
var replacedChildren = React.Children.map(children, function (childNode) {
|
|
56
50
|
if (typeof childNode === 'string') {
|
|
57
51
|
var decorated = codeBidiWarningDecorator(childNode, function (_ref3) {
|
|
58
52
|
var bidiCharacter = _ref3.bidiCharacter,
|
|
59
|
-
|
|
53
|
+
index = _ref3.index;
|
|
60
54
|
return jsx(CodeBidiWarning, {
|
|
61
55
|
bidiCharacter: bidiCharacter,
|
|
62
56
|
key: index,
|
|
@@ -66,7 +60,6 @@ function RenderCodeChildrenWithBidiWarnings(_ref2) {
|
|
|
66
60
|
});
|
|
67
61
|
return decorated;
|
|
68
62
|
}
|
|
69
|
-
|
|
70
63
|
if (isReactElement(childNode) && childNode.props.children) {
|
|
71
64
|
// eslint-disable-next-line @repo/internal/react/no-clone-element
|
|
72
65
|
var newChildNode = /*#__PURE__*/React.cloneElement(childNode, {
|
|
@@ -77,16 +70,13 @@ function RenderCodeChildrenWithBidiWarnings(_ref2) {
|
|
|
77
70
|
});
|
|
78
71
|
return newChildNode;
|
|
79
72
|
}
|
|
80
|
-
|
|
81
73
|
return childNode;
|
|
82
74
|
});
|
|
83
75
|
return jsx(React.Fragment, null, replacedChildren);
|
|
84
76
|
}
|
|
85
|
-
|
|
86
77
|
function isReactElement(child) {
|
|
87
78
|
return !!child.type;
|
|
88
79
|
}
|
|
89
|
-
|
|
90
80
|
Code.displayName = 'Code';
|
|
91
81
|
export { getCodeStyles };
|
|
92
82
|
export default Code;
|
|
@@ -1,46 +1,39 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
|
-
|
|
4
3
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
5
|
-
|
|
6
4
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
7
|
-
|
|
8
5
|
import { useCallback, useMemo } from 'react';
|
|
9
6
|
var DEFAULT_LINE_EL_ATTR_OBJ = {
|
|
10
7
|
'data-ds--code--row': ''
|
|
11
8
|
};
|
|
12
|
-
|
|
13
9
|
var getLineStyleObject = function getLineStyleObject(lineNumber, testId) {
|
|
14
10
|
return testId ? _objectSpread({
|
|
15
11
|
'data-testid': "".concat(testId, "-line-").concat(lineNumber)
|
|
16
12
|
}, DEFAULT_LINE_EL_ATTR_OBJ) : DEFAULT_LINE_EL_ATTR_OBJ;
|
|
17
13
|
};
|
|
18
|
-
|
|
19
14
|
export var useHighlightLines = function useHighlightLines(_ref) {
|
|
20
15
|
var _ref$highlight = _ref.highlight,
|
|
21
|
-
|
|
22
|
-
|
|
16
|
+
highlight = _ref$highlight === void 0 ? '' : _ref$highlight,
|
|
17
|
+
testId = _ref.testId;
|
|
23
18
|
var highlightedLines = useMemo(function () {
|
|
24
19
|
if (!highlight) {
|
|
25
20
|
return [];
|
|
26
21
|
}
|
|
27
|
-
|
|
28
22
|
return highlight.split(',').map(function (num) {
|
|
29
23
|
if (num.indexOf('-') > 0) {
|
|
30
24
|
// We found a line group, e.g. 1-3
|
|
31
|
-
var _num$split$map$sort = num.split('-').map(Number)
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
25
|
+
var _num$split$map$sort = num.split('-').map(Number)
|
|
26
|
+
// Sort by lowest value first, highest value last.
|
|
27
|
+
.sort(function (a, b) {
|
|
28
|
+
return a - b;
|
|
29
|
+
}),
|
|
30
|
+
_num$split$map$sort2 = _slicedToArray(_num$split$map$sort, 2),
|
|
31
|
+
from = _num$split$map$sort2[0],
|
|
32
|
+
to = _num$split$map$sort2[1];
|
|
39
33
|
return Array(to + 1).fill(undefined).map(function (_, index) {
|
|
40
34
|
return index;
|
|
41
35
|
}).slice(from, to + 1);
|
|
42
36
|
}
|
|
43
|
-
|
|
44
37
|
return Number(num);
|
|
45
38
|
}).reduce(function (acc, val) {
|
|
46
39
|
return acc.concat(val);
|
|
@@ -50,14 +43,12 @@ export var useHighlightLines = function useHighlightLines(_ref) {
|
|
|
50
43
|
if (!highlight || highlightedLines.length === 0) {
|
|
51
44
|
return getLineStyleObject(lineNumber, testId);
|
|
52
45
|
}
|
|
53
|
-
|
|
54
46
|
if (highlightedLines.includes(lineNumber)) {
|
|
55
47
|
var highlightedDataAttrObj = {
|
|
56
48
|
'data-ds--code--row--highlight': ''
|
|
57
49
|
};
|
|
58
50
|
return _objectSpread(_objectSpread({}, highlightedDataAttrObj), getLineStyleObject(lineNumber, testId));
|
|
59
51
|
}
|
|
60
|
-
|
|
61
52
|
return getLineStyleObject(lineNumber, testId);
|
|
62
53
|
}, [highlight, testId]);
|
|
63
54
|
return {
|
|
@@ -5,6 +5,7 @@ export var HIGHLIGHT_BORDER_WIDTH = '4px';
|
|
|
5
5
|
export var SPACING = gridSize();
|
|
6
6
|
export var LINE_NUMBER_GUTTER = SPACING * 2;
|
|
7
7
|
export var VAR_CODE_LINE_NUMBER_BG_COLOR = '--ds--code--line-number-bg-color';
|
|
8
|
-
export var VAR_CODE_BG_COLOR = '--ds--code--bg-color';
|
|
8
|
+
export var VAR_CODE_BG_COLOR = '--ds--code--bg-color';
|
|
9
9
|
|
|
10
|
+
// selector for codeblock
|
|
10
11
|
export var CODE_BLOCK_SELECTOR = "data-ds--code--code-block";
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
|
|
3
2
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
4
|
-
|
|
5
3
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
|
-
|
|
7
4
|
import memoizeOne from 'memoize-one';
|
|
8
5
|
import * as colors from '@atlaskit/theme/colors';
|
|
9
6
|
import { themed } from '@atlaskit/theme/components';
|
|
@@ -229,9 +226,7 @@ export var getColorPalette = memoizeOne(function (theme) {
|
|
|
229
226
|
})(akTheme)
|
|
230
227
|
};
|
|
231
228
|
});
|
|
232
|
-
|
|
233
229
|
var getTheme = function getTheme(theme) {
|
|
234
230
|
return _objectSpread(_objectSpread({}, getBaseTheme(theme)), getColorPalette(theme));
|
|
235
231
|
};
|
|
236
|
-
|
|
237
232
|
export default getTheme;
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
|
|
3
2
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
4
|
-
|
|
5
3
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
|
-
|
|
7
4
|
import { borderRadius } from '@atlaskit/theme/constants';
|
|
8
5
|
import { CODE_FONT_SIZE, CODE_LINE_HEIGHT, HIGHLIGHT_BORDER_WIDTH, LINE_NUMBER_GUTTER, SPACING, VAR_CODE_BG_COLOR, VAR_CODE_LINE_NUMBER_BG_COLOR } from './constants';
|
|
9
6
|
import { getBaseTheme, getColorPalette } from './get-theme';
|
|
@@ -11,10 +8,8 @@ export var getLineNumWidth = function getLineNumWidth(numLines) {
|
|
|
11
8
|
if (!numLines) {
|
|
12
9
|
return '1ch';
|
|
13
10
|
}
|
|
14
|
-
|
|
15
11
|
return "".concat(numLines.toFixed(0).length, "ch");
|
|
16
12
|
};
|
|
17
|
-
|
|
18
13
|
var lineNumberStyle = function lineNumberStyle(theme) {
|
|
19
14
|
return {
|
|
20
15
|
// width of the line number gutter
|
|
@@ -34,9 +29,9 @@ var lineNumberStyle = function lineNumberStyle(theme) {
|
|
|
34
29
|
// this is to fix SSR spacing issue
|
|
35
30
|
display: 'block'
|
|
36
31
|
};
|
|
37
|
-
};
|
|
38
|
-
|
|
32
|
+
};
|
|
39
33
|
|
|
34
|
+
// order of these keys does matter as it will affect the css precedence
|
|
40
35
|
var syntaxKeywordColors = function syntaxKeywordColors(theme) {
|
|
41
36
|
return {
|
|
42
37
|
'.token': {
|
|
@@ -184,11 +179,10 @@ var syntaxKeywordColors = function syntaxKeywordColors(theme) {
|
|
|
184
179
|
}
|
|
185
180
|
};
|
|
186
181
|
};
|
|
182
|
+
|
|
187
183
|
/**
|
|
188
184
|
* Styles applied at the root element level, common across code/codeblock
|
|
189
185
|
*/
|
|
190
|
-
|
|
191
|
-
|
|
192
186
|
export var getBaseCodeStyles = function getBaseCodeStyles(theme) {
|
|
193
187
|
return {
|
|
194
188
|
fontSize: CODE_FONT_SIZE,
|
|
@@ -200,13 +194,13 @@ export var getBaseCodeStyles = function getBaseCodeStyles(theme) {
|
|
|
200
194
|
borderRadius: "".concat(borderRadius(), "px")
|
|
201
195
|
};
|
|
202
196
|
};
|
|
197
|
+
|
|
203
198
|
/**
|
|
204
199
|
* Takes an implemented CodeBlock theme, and returns styles required for
|
|
205
200
|
* react-syntax-highlighter.
|
|
206
201
|
*
|
|
207
202
|
* @param theme
|
|
208
203
|
*/
|
|
209
|
-
|
|
210
204
|
export var getCodeBlockStyles = function getCodeBlockStyles(theme) {
|
|
211
205
|
return function (highlightedStartText, highlightedEndText, hasLineNumbers) {
|
|
212
206
|
return _objectSpread(_objectSpread(_objectSpread({
|
|
@@ -4,10 +4,9 @@ export var normalizeLanguage = memoizeOne(function (language) {
|
|
|
4
4
|
if (!language) {
|
|
5
5
|
return '';
|
|
6
6
|
}
|
|
7
|
-
|
|
8
7
|
var match = SUPPORTED_LANGUAGES.find(function (val) {
|
|
9
8
|
return val.name === language || val.alias.includes(language);
|
|
10
|
-
});
|
|
11
|
-
|
|
9
|
+
});
|
|
10
|
+
// Fallback to plain monospaced text if language passed but not supported
|
|
12
11
|
return match ? match.value : 'text';
|
|
13
12
|
});
|