@atlaskit/code 14.1.5 → 14.3.2
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 +24 -0
- package/__perf__/default.tsx +1 -1
- package/bidi-warning/package.json +7 -0
- package/bidi-warning-decorator/package.json +7 -0
- package/codemods/__tests__/14.0.0-lite-mode/14.0.0-lite-mode.ts +10 -10
- package/codemods/__tests__/14.0.0-lite-mode/remove-language.ts +6 -6
- package/codemods/__tests__/14.0.0-lite-mode/text-to-child.ts +10 -10
- package/dist/cjs/bidi-warning/bidi-warning-decorator.js +73 -0
- package/dist/cjs/bidi-warning/index.js +15 -0
- package/dist/cjs/bidi-warning/ui/index.js +57 -0
- package/dist/cjs/bidi-warning/ui/styled.js +74 -0
- package/dist/cjs/bidi-warning/ui/types.js +5 -0
- package/dist/cjs/code-block.js +14 -2
- package/dist/cjs/code.js +70 -5
- package/dist/cjs/index.js +6 -6
- package/dist/cjs/internal/hooks/use-highlight.js +2 -2
- package/dist/cjs/internal/theme/constants.js +1 -1
- package/dist/cjs/internal/theme/get-theme.js +3 -3
- package/dist/cjs/internal/theme/styles.js +3 -3
- package/dist/cjs/react-syntax-highlighter-bidi-warning-renderer.js +180 -0
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/bidi-warning/bidi-warning-decorator.js +42 -0
- package/dist/es2019/bidi-warning/index.js +1 -0
- package/dist/es2019/bidi-warning/ui/index.js +40 -0
- package/dist/es2019/bidi-warning/ui/styled.js +65 -0
- package/dist/es2019/bidi-warning/ui/types.js +1 -0
- package/dist/es2019/code-block.js +11 -2
- package/dist/es2019/code.js +54 -2
- package/dist/es2019/react-syntax-highlighter-bidi-warning-renderer.js +156 -0
- package/dist/es2019/version.json +1 -1
- package/dist/esm/bidi-warning/bidi-warning-decorator.js +61 -0
- package/dist/esm/bidi-warning/index.js +1 -0
- package/dist/esm/bidi-warning/ui/index.js +42 -0
- package/dist/esm/bidi-warning/ui/styled.js +64 -0
- package/dist/esm/bidi-warning/ui/types.js +1 -0
- package/dist/esm/code-block.js +13 -2
- package/dist/esm/code.js +59 -3
- package/dist/esm/internal/hooks/use-highlight.js +2 -2
- package/dist/esm/internal/theme/get-theme.js +2 -2
- package/dist/esm/internal/theme/styles.js +2 -2
- package/dist/esm/react-syntax-highlighter-bidi-warning-renderer.js +168 -0
- package/dist/esm/version.json +1 -1
- package/dist/types/bidi-warning/bidi-warning-decorator.d.ts +5 -0
- package/dist/types/bidi-warning/index.d.ts +1 -0
- package/dist/types/bidi-warning/ui/index.d.ts +3 -0
- package/dist/types/bidi-warning/ui/styled.d.ts +7 -0
- package/dist/types/bidi-warning/ui/types.d.ts +29 -0
- package/dist/types/code.d.ts +3 -2
- package/dist/types/internal/types.d.ts +19 -0
- package/dist/types/react-syntax-highlighter-bidi-warning-renderer.d.ts +9 -0
- package/dist/types/types.d.ts +19 -0
- package/package.json +10 -8
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
// @ts-nocheck
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import CodeBidiWarning from './bidi-warning';
|
|
5
|
+
import codeBidiWarningDecorator from './bidi-warning/bidi-warning-decorator'; // File mostly vendored from react-syntax-highlighter
|
|
6
|
+
//
|
|
7
|
+
// - https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/efc3f7b7537d1729193b7a472067bcbe6cbecaf1/src/highlight.js#L272-L281
|
|
8
|
+
// - https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/efc3f7b7537d1729193b7a472067bcbe6cbecaf1/src/create-element.js
|
|
9
|
+
//
|
|
10
|
+
// Patching react syntax-highlighter with a decoration feature is likely preferable
|
|
11
|
+
|
|
12
|
+
export function createBidiWarningRenderer(codeBidiWarningConfig) {
|
|
13
|
+
return function bidiWarningRenderer({
|
|
14
|
+
rows,
|
|
15
|
+
stylesheet,
|
|
16
|
+
useInlineStyles
|
|
17
|
+
}) {
|
|
18
|
+
return rows.map((node, i) => createElement({
|
|
19
|
+
node,
|
|
20
|
+
stylesheet,
|
|
21
|
+
useInlineStyles,
|
|
22
|
+
codeBidiWarningConfig,
|
|
23
|
+
key: `code-segement${i}`
|
|
24
|
+
}));
|
|
25
|
+
};
|
|
26
|
+
} // Get all possible permutations of all power sets
|
|
27
|
+
//
|
|
28
|
+
// Super simple, non-algorithmic solution since the
|
|
29
|
+
// number of class names will not be greater than 4
|
|
30
|
+
|
|
31
|
+
function powerSetPermutations(arr) {
|
|
32
|
+
const arrLength = arr.length;
|
|
33
|
+
|
|
34
|
+
if (arrLength === 0 || arrLength === 1) {
|
|
35
|
+
return arr;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
if (arrLength === 2) {
|
|
39
|
+
// prettier-ignore
|
|
40
|
+
return [arr[0], arr[1], `${arr[0]}.${arr[1]}`, `${arr[1]}.${arr[0]}`];
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
if (arrLength === 3) {
|
|
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
|
+
}
|
|
46
|
+
|
|
47
|
+
if (arrLength >= 4) {
|
|
48
|
+
// Currently does not support more than 4 extra
|
|
49
|
+
// class names (after `.token` has been removed)
|
|
50
|
+
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
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
const classNameCombinations = {};
|
|
55
|
+
|
|
56
|
+
function getClassNameCombinations(classNames) {
|
|
57
|
+
if (classNames.length === 0 || classNames.length === 1) {
|
|
58
|
+
return classNames;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
const key = classNames.join('.');
|
|
62
|
+
|
|
63
|
+
if (!classNameCombinations[key]) {
|
|
64
|
+
classNameCombinations[key] = powerSetPermutations(classNames);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
return classNameCombinations[key];
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
export function createStyleObject(classNames, elementStyle = {}, stylesheet) {
|
|
71
|
+
const nonTokenClassNames = classNames.filter(className => className !== 'token');
|
|
72
|
+
const classNamesCombinations = getClassNameCombinations(nonTokenClassNames);
|
|
73
|
+
return classNamesCombinations.reduce((styleObject, className) => {
|
|
74
|
+
return { ...styleObject,
|
|
75
|
+
...stylesheet[className]
|
|
76
|
+
};
|
|
77
|
+
}, elementStyle);
|
|
78
|
+
}
|
|
79
|
+
export function createClassNameString(classNames) {
|
|
80
|
+
return classNames.join(' ');
|
|
81
|
+
}
|
|
82
|
+
export function createChildren(stylesheet, useInlineStyles, codeBidiWarningConfig) {
|
|
83
|
+
let childrenCount = 0;
|
|
84
|
+
return children => {
|
|
85
|
+
childrenCount += 1;
|
|
86
|
+
return children.map((child, i) => createElement({
|
|
87
|
+
node: child,
|
|
88
|
+
stylesheet,
|
|
89
|
+
useInlineStyles,
|
|
90
|
+
codeBidiWarningConfig,
|
|
91
|
+
key: `code-segment-${childrenCount}-${i}`
|
|
92
|
+
}));
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
function createElement({
|
|
97
|
+
node,
|
|
98
|
+
stylesheet,
|
|
99
|
+
style = {},
|
|
100
|
+
useInlineStyles,
|
|
101
|
+
codeBidiWarningConfig,
|
|
102
|
+
key
|
|
103
|
+
}) {
|
|
104
|
+
const {
|
|
105
|
+
properties,
|
|
106
|
+
type,
|
|
107
|
+
tagName: TagName,
|
|
108
|
+
value
|
|
109
|
+
} = node;
|
|
110
|
+
|
|
111
|
+
if (type === 'text') {
|
|
112
|
+
// occasionally react-syntax-highlighter passes a numeric value when the
|
|
113
|
+
// type is text
|
|
114
|
+
const textValue = value + '';
|
|
115
|
+
const decorated = codeBidiWarningDecorator(textValue, ({
|
|
116
|
+
bidiCharacter,
|
|
117
|
+
index
|
|
118
|
+
}) => /*#__PURE__*/React.createElement(CodeBidiWarning, {
|
|
119
|
+
bidiCharacter: bidiCharacter,
|
|
120
|
+
key: index,
|
|
121
|
+
label: codeBidiWarningConfig.codeBidiWarningLabel,
|
|
122
|
+
tooltipEnabled: codeBidiWarningConfig.codeBidiWarningTooltipEnabled
|
|
123
|
+
}));
|
|
124
|
+
return decorated;
|
|
125
|
+
} else if (TagName) {
|
|
126
|
+
const childrenCreator = createChildren(stylesheet, useInlineStyles, codeBidiWarningConfig);
|
|
127
|
+
let props;
|
|
128
|
+
|
|
129
|
+
if (!useInlineStyles) {
|
|
130
|
+
props = { ...properties,
|
|
131
|
+
className: createClassNameString(properties.className)
|
|
132
|
+
};
|
|
133
|
+
} else {
|
|
134
|
+
const allStylesheetSelectors = Object.keys(stylesheet).reduce((classes, selector) => {
|
|
135
|
+
selector.split('.').forEach(className => {
|
|
136
|
+
if (!classes.includes(className)) {
|
|
137
|
+
classes.push(className);
|
|
138
|
+
}
|
|
139
|
+
});
|
|
140
|
+
return classes;
|
|
141
|
+
}, []); // For compatibility with older versions of react-syntax-highlighter
|
|
142
|
+
|
|
143
|
+
const startingClassName = properties.className && properties.className.includes('token') ? ['token'] : [];
|
|
144
|
+
const className = properties.className && startingClassName.concat(properties.className.filter(className => !allStylesheetSelectors.includes(className)));
|
|
145
|
+
props = { ...properties,
|
|
146
|
+
className: createClassNameString(className) || undefined,
|
|
147
|
+
style: createStyleObject(properties.className, Object.assign({}, properties.style, style), stylesheet)
|
|
148
|
+
};
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
const children = childrenCreator(node.children);
|
|
152
|
+
return /*#__PURE__*/React.createElement(TagName, _extends({
|
|
153
|
+
key: key
|
|
154
|
+
}, props), children);
|
|
155
|
+
}
|
|
156
|
+
}
|
package/dist/es2019/version.json
CHANGED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
+
|
|
3
|
+
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
|
+
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
|
+
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
|
+
export var bidiCharacterRegex = /[\u202A-\u202E\u2066-\u2069]/g;
|
|
10
|
+
export default function codeBidiWarningDecorator(originalText, decorate) {
|
|
11
|
+
var matches = _toConsumableArray(originalText.matchAll(bidiCharacterRegex));
|
|
12
|
+
|
|
13
|
+
if (matches.length === 0) {
|
|
14
|
+
// No matches encountered, so we return the originalText value
|
|
15
|
+
return originalText;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
var children = [];
|
|
19
|
+
var mappedTo = 0;
|
|
20
|
+
|
|
21
|
+
var _iterator = _createForOfIteratorHelper(matches),
|
|
22
|
+
_step;
|
|
23
|
+
|
|
24
|
+
try {
|
|
25
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
26
|
+
var match = _step.value;
|
|
27
|
+
|
|
28
|
+
if (mappedTo !== match.index) {
|
|
29
|
+
// There were unmatched characters prior to this match which haven't been
|
|
30
|
+
// mapped to the children.
|
|
31
|
+
// Add them as plain text.
|
|
32
|
+
children.push(originalText.substring(mappedTo, match.index));
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
children.push(decorate({
|
|
36
|
+
bidiCharacter: match[0],
|
|
37
|
+
index: match.index
|
|
38
|
+
})); // While index is guaranteed to be present, it needs to be asserted due
|
|
39
|
+
// to a limitation of typescripts regex handling
|
|
40
|
+
//
|
|
41
|
+
// https://github.com/microsoft/TypeScript/issues/36788
|
|
42
|
+
// Decorate bidi character
|
|
43
|
+
|
|
44
|
+
mappedTo = match.index + match[0].length;
|
|
45
|
+
}
|
|
46
|
+
} catch (err) {
|
|
47
|
+
_iterator.e(err);
|
|
48
|
+
} finally {
|
|
49
|
+
_iterator.f();
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
if (mappedTo !== originalText.length) {
|
|
53
|
+
// There is text following the final match, which needs to be mapped
|
|
54
|
+
// to the children.
|
|
55
|
+
// Added as plain text.
|
|
56
|
+
children.push(originalText.substring(mappedTo, originalText.length));
|
|
57
|
+
} // return the mapped children with decorated bidi characters
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
return children;
|
|
61
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './ui';
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["children"];
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import Tooltip from '@atlaskit/tooltip';
|
|
6
|
+
import { Decorator } from './styled';
|
|
7
|
+
export default function BidiWarning(_ref) {
|
|
8
|
+
var testId = _ref.testId,
|
|
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;
|
|
14
|
+
|
|
15
|
+
if (tooltipEnabled) {
|
|
16
|
+
return (
|
|
17
|
+
/*#__PURE__*/
|
|
18
|
+
// Following patches, this should be updated to use the render props signature which will provide aria attributes.
|
|
19
|
+
// Note: this should be tested, as initial testing did not see attributes work with current tooltip implementation.
|
|
20
|
+
React.createElement(Tooltip, {
|
|
21
|
+
content: label,
|
|
22
|
+
tag: CustomizedTagWithRef
|
|
23
|
+
}, /*#__PURE__*/React.createElement(Decorator, {
|
|
24
|
+
testId: testId,
|
|
25
|
+
bidiCharacter: bidiCharacter
|
|
26
|
+
}, skipChildren ? null : bidiCharacter))
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
return /*#__PURE__*/React.createElement(Decorator, {
|
|
31
|
+
testId: testId,
|
|
32
|
+
bidiCharacter: bidiCharacter
|
|
33
|
+
}, skipChildren ? null : bidiCharacter);
|
|
34
|
+
}
|
|
35
|
+
var CustomizedTagWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
36
|
+
var children = props.children,
|
|
37
|
+
rest = _objectWithoutProperties(props, _excluded);
|
|
38
|
+
|
|
39
|
+
return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
|
|
40
|
+
ref: ref
|
|
41
|
+
}), children);
|
|
42
|
+
});
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import { css, jsx } from '@emotion/core';
|
|
3
|
+
import { Y75 } from '@atlaskit/theme/colors';
|
|
4
|
+
var decoration = css({
|
|
5
|
+
// Required as otherwise the following bidi characters cause the span
|
|
6
|
+
// to not receive hover events.
|
|
7
|
+
//
|
|
8
|
+
// U+2066 LEFT-TO-RIGHT ISOLATE (when using pseudo element before)
|
|
9
|
+
// U+202E RIGHT-TO-LEFT OVERRIDE' (when using pseudo element after)
|
|
10
|
+
position: 'relative',
|
|
11
|
+
':before': {
|
|
12
|
+
/* layout */
|
|
13
|
+
display: 'inline-flex',
|
|
14
|
+
flexDirection: 'row',
|
|
15
|
+
justifyContent: 'center',
|
|
16
|
+
alignItems: 'center',
|
|
17
|
+
padding: '0 4px',
|
|
18
|
+
fontSize: '14px',
|
|
19
|
+
lineHeight: '18px',
|
|
20
|
+
background: Y75,
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Ensures the decoration receives pointer events when it occurs with
|
|
24
|
+
* an ancestor that disables them.
|
|
25
|
+
*/
|
|
26
|
+
pointerEvents: 'auto',
|
|
27
|
+
|
|
28
|
+
/* contents */
|
|
29
|
+
content: '"<"attr(data-bidi-character-code)">"',
|
|
30
|
+
// This color is Y800 which is not yet rolled out
|
|
31
|
+
// https://hello.atlassian.net/wiki/spaces/~tswan/pages/1366555782?focusedCommentId=1370387374#comment-1370387374
|
|
32
|
+
color: '#7F5F01',
|
|
33
|
+
fontStyle: 'normal'
|
|
34
|
+
},
|
|
35
|
+
':hover:before': {
|
|
36
|
+
color: '#533F04'
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
export function Decorator(_ref) {
|
|
40
|
+
var bidiCharacter = _ref.bidiCharacter,
|
|
41
|
+
children = _ref.children,
|
|
42
|
+
testId = _ref.testId;
|
|
43
|
+
var bidiCharacterCode = getBidiCharacterCode(bidiCharacter);
|
|
44
|
+
return jsx("span", {
|
|
45
|
+
"aria-label": bidiCharacterCode
|
|
46
|
+
}, jsx("span", {
|
|
47
|
+
css: decoration,
|
|
48
|
+
"data-testid": testId,
|
|
49
|
+
"data-bidi-character-code": bidiCharacterCode // This is set to true so that the content is not read out by
|
|
50
|
+
// screen readers as the content includes angle brackets for
|
|
51
|
+
// visual decoration purposes.
|
|
52
|
+
// We use a span with the aria-label set to the bidi character code
|
|
53
|
+
// above this span for screen readers.
|
|
54
|
+
,
|
|
55
|
+
"aria-hidden": "true"
|
|
56
|
+
}, children));
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
function getBidiCharacterCode(bidiCharacter) {
|
|
60
|
+
var _bidiCharacter$codePo;
|
|
61
|
+
|
|
62
|
+
var bidiCharacterCode = (_bidiCharacter$codePo = bidiCharacter.codePointAt(0)) === null || _bidiCharacter$codePo === void 0 ? void 0 : _bidiCharacter$codePo.toString(16);
|
|
63
|
+
return "U+".concat(bidiCharacterCode);
|
|
64
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/esm/code-block.js
CHANGED
|
@@ -6,6 +6,7 @@ import { useGlobalTheme } from '@atlaskit/theme/components';
|
|
|
6
6
|
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
|
+
import { createBidiWarningRenderer } from './react-syntax-highlighter-bidi-warning-renderer';
|
|
9
10
|
var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
|
|
10
11
|
var _ref$showLineNumbers = _ref.showLineNumbers,
|
|
11
12
|
showLineNumbers = _ref$showLineNumbers === void 0 ? true : _ref$showLineNumbers,
|
|
@@ -18,7 +19,12 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
|
|
|
18
19
|
_ref$highlightedEndTe = _ref.highlightedEndText,
|
|
19
20
|
highlightedEndText = _ref$highlightedEndTe === void 0 ? 'Highlight end' : _ref$highlightedEndTe,
|
|
20
21
|
testId = _ref.testId,
|
|
21
|
-
text = _ref.text
|
|
22
|
+
text = _ref.text,
|
|
23
|
+
_ref$codeBidiWarnings = _ref.codeBidiWarnings,
|
|
24
|
+
codeBidiWarnings = _ref$codeBidiWarnings === void 0 ? true : _ref$codeBidiWarnings,
|
|
25
|
+
codeBidiWarningLabel = _ref.codeBidiWarningLabel,
|
|
26
|
+
_ref$codeBidiWarningT = _ref.codeBidiWarningTooltipEnabled,
|
|
27
|
+
codeBidiWarningTooltipEnabled = _ref$codeBidiWarningT === void 0 ? true : _ref$codeBidiWarningT;
|
|
22
28
|
var numLines = (text || '').split('\n').length;
|
|
23
29
|
var globalTheme = useGlobalTheme();
|
|
24
30
|
var theme = useMemo(function () {
|
|
@@ -46,6 +52,10 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
|
|
|
46
52
|
}, [providedLanguage]); // https://product-fabric.atlassian.net/browse/DST-2472
|
|
47
53
|
|
|
48
54
|
var languageToUse = text ? language : 'text';
|
|
55
|
+
var renderer = codeBidiWarnings ? createBidiWarningRenderer({
|
|
56
|
+
codeBidiWarningLabel: codeBidiWarningLabel,
|
|
57
|
+
codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
|
|
58
|
+
}) : undefined;
|
|
49
59
|
return jsx(SyntaxHighlighter, {
|
|
50
60
|
"data-testid": testId,
|
|
51
61
|
"data-code-lang": language,
|
|
@@ -57,7 +67,8 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
|
|
|
57
67
|
,
|
|
58
68
|
wrapLines: highlight.length > 0 || !!testId,
|
|
59
69
|
lineProps: getLineProps,
|
|
60
|
-
useInlineStyles: false
|
|
70
|
+
useInlineStyles: false,
|
|
71
|
+
renderer: renderer
|
|
61
72
|
}, text);
|
|
62
73
|
});
|
|
63
74
|
CodeBlock.displayName = 'CodeBlock';
|
package/dist/esm/code.js
CHANGED
|
@@ -1,25 +1,81 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["testId"],
|
|
4
|
+
_excluded2 = ["children", "codeBidiWarnings", "codeBidiWarningLabel", "codeBidiWarningTooltipEnabled"];
|
|
3
5
|
|
|
4
6
|
/** @jsx jsx */
|
|
5
|
-
import { forwardRef, memo, useMemo } from 'react';
|
|
7
|
+
import React, { forwardRef, memo, useMemo } from 'react';
|
|
6
8
|
import { jsx } from '@emotion/core';
|
|
7
9
|
import { useGlobalTheme } from '@atlaskit/theme/components';
|
|
10
|
+
import CodeBidiWarning from './bidi-warning';
|
|
11
|
+
import codeBidiWarningDecorator from './bidi-warning/bidi-warning-decorator';
|
|
8
12
|
import { getCodeStyles } from './internal/theme/styles';
|
|
9
13
|
var Code = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Code(_ref, ref) {
|
|
10
14
|
var testId = _ref.testId,
|
|
11
|
-
props = _objectWithoutProperties(_ref,
|
|
15
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
12
16
|
|
|
13
17
|
var theme = useGlobalTheme();
|
|
14
18
|
var styles = useMemo(function () {
|
|
15
19
|
return getCodeStyles(theme);
|
|
16
20
|
}, [theme]);
|
|
21
|
+
|
|
22
|
+
var children = props.children,
|
|
23
|
+
_props$codeBidiWarnin = props.codeBidiWarnings,
|
|
24
|
+
codeBidiWarnings = _props$codeBidiWarnin === void 0 ? true : _props$codeBidiWarnin,
|
|
25
|
+
codeBidiWarningLabel = props.codeBidiWarningLabel,
|
|
26
|
+
_props$codeBidiWarnin2 = props.codeBidiWarningTooltipEnabled,
|
|
27
|
+
codeBidiWarningTooltipEnabled = _props$codeBidiWarnin2 === void 0 ? true : _props$codeBidiWarnin2,
|
|
28
|
+
otherProps = _objectWithoutProperties(props, _excluded2);
|
|
29
|
+
|
|
30
|
+
var decoratedChildren = codeBidiWarnings ? jsx(RenderCodeChildrenWithBidiWarnings, {
|
|
31
|
+
codeBidiWarningLabel: codeBidiWarningLabel,
|
|
32
|
+
codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
|
|
33
|
+
}, children) : children;
|
|
17
34
|
return jsx("code", _extends({
|
|
18
35
|
ref: ref,
|
|
19
36
|
"data-testid": testId,
|
|
20
37
|
css: styles
|
|
21
|
-
},
|
|
38
|
+
}, otherProps), decoratedChildren);
|
|
22
39
|
}));
|
|
40
|
+
|
|
41
|
+
function RenderCodeChildrenWithBidiWarnings(_ref2) {
|
|
42
|
+
var children = _ref2.children,
|
|
43
|
+
codeBidiWarningLabel = _ref2.codeBidiWarningLabel,
|
|
44
|
+
codeBidiWarningTooltipEnabled = _ref2.codeBidiWarningTooltipEnabled;
|
|
45
|
+
var replacedChildren = React.Children.map(children, function (childNode) {
|
|
46
|
+
if (typeof childNode === 'string') {
|
|
47
|
+
var decorated = codeBidiWarningDecorator(childNode, function (_ref3) {
|
|
48
|
+
var bidiCharacter = _ref3.bidiCharacter,
|
|
49
|
+
index = _ref3.index;
|
|
50
|
+
return jsx(CodeBidiWarning, {
|
|
51
|
+
bidiCharacter: bidiCharacter,
|
|
52
|
+
key: index,
|
|
53
|
+
label: codeBidiWarningLabel,
|
|
54
|
+
tooltipEnabled: codeBidiWarningTooltipEnabled
|
|
55
|
+
});
|
|
56
|
+
});
|
|
57
|
+
return decorated;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
if (isReactElement(childNode) && childNode.props.children) {
|
|
61
|
+
var newChildNode = /*#__PURE__*/React.cloneElement(childNode, {
|
|
62
|
+
children: jsx(RenderCodeChildrenWithBidiWarnings, {
|
|
63
|
+
codeBidiWarningLabel: codeBidiWarningLabel,
|
|
64
|
+
codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
|
|
65
|
+
}, childNode.props.children)
|
|
66
|
+
});
|
|
67
|
+
return newChildNode;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
return childNode;
|
|
71
|
+
});
|
|
72
|
+
return jsx(React.Fragment, null, replacedChildren);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
function isReactElement(child) {
|
|
76
|
+
return !!child.type;
|
|
77
|
+
}
|
|
78
|
+
|
|
23
79
|
Code.displayName = 'Code';
|
|
24
80
|
export { getCodeStyles };
|
|
25
81
|
export default Code;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
|
|
4
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
4
|
+
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
5
|
|
|
6
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
6
|
+
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
7
|
|
|
8
8
|
import { useCallback, useMemo } from 'react';
|
|
9
9
|
var DEFAULT_LINE_EL_ATTR_OBJ = {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
|
|
3
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
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; }
|
|
4
4
|
|
|
5
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
5
|
+
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
6
|
|
|
7
7
|
import memoizeOne from 'memoize-one';
|
|
8
8
|
import * as colors from '@atlaskit/theme/colors';
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
|
|
3
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
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; }
|
|
4
4
|
|
|
5
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
5
|
+
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
6
|
|
|
7
7
|
import { borderRadius } from '@atlaskit/theme/constants';
|
|
8
8
|
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';
|