@atlaskit/renderer 108.15.17 → 108.15.19
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/dist/cjs/react/marks/textColor.js +33 -31
- package/dist/cjs/react/nodes/tableCell.js +33 -33
- package/dist/cjs/ui/Renderer/index.js +1 -1
- package/dist/es2019/react/marks/textColor.js +33 -31
- package/dist/es2019/react/nodes/tableCell.js +33 -33
- package/dist/es2019/ui/Renderer/index.js +1 -1
- package/dist/esm/react/marks/textColor.js +33 -31
- package/dist/esm/react/nodes/tableCell.js +33 -33
- package/dist/esm/ui/Renderer/index.js +1 -1
- package/package.json +6 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 108.15.19
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 108.15.18
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#42725](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42725) [`a05b3548339`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a05b3548339) - [ux] ED-20700 Clean up color inversion feature flag
|
|
14
|
+
|
|
3
15
|
## 108.15.17
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -11,7 +11,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
11
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
12
|
var _adfSchema = require("@atlaskit/adf-schema");
|
|
13
13
|
var _editorPalette = require("@atlaskit/editor-palette");
|
|
14
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
15
14
|
var _tokens = require("@atlaskit/tokens");
|
|
16
15
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
16
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -28,6 +27,12 @@ function invertCustomColor(customColor) {
|
|
|
28
27
|
hex = customColor;
|
|
29
28
|
} else if ((0, _adfSchema.isRgb)(customColor)) {
|
|
30
29
|
hex = (0, _adfSchema.rgbToHex)(customColor);
|
|
30
|
+
if (hex === null) {
|
|
31
|
+
// in some cases the rgb color is invalid, in this case we just return the color
|
|
32
|
+
// See https://product-fabric.atlassian.net/browse/DTR-2003 for a ticket to improve the isRgb function
|
|
33
|
+
// to align with the rgbToHex function
|
|
34
|
+
return customColor;
|
|
35
|
+
}
|
|
31
36
|
} else {
|
|
32
37
|
return customColor;
|
|
33
38
|
}
|
|
@@ -47,38 +52,35 @@ function TextColor(props) {
|
|
|
47
52
|
// the editor does supported ad hoc color values -- and there may be content
|
|
48
53
|
// which has been migrated or created via apis which use such values.
|
|
49
54
|
var paletteColorValue;
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
55
|
+
|
|
56
|
+
/**
|
|
57
|
+
* The Editor persists custom text colors when content has been migrated from the old editor, or created via
|
|
58
|
+
* apis.
|
|
59
|
+
*
|
|
60
|
+
* This behaviour predates the introduction of dark mode.
|
|
61
|
+
*
|
|
62
|
+
* Without the inversion logic below, text with custom colors, can be hard to read when the user loads the page in dark mode.
|
|
63
|
+
*
|
|
64
|
+
* This introduces inversion of the presentation of the custom text colors when the user is in dark mode.
|
|
65
|
+
*
|
|
66
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
|
67
|
+
* how we detect text colors copied from external editor sources. Where we load the background color from a
|
|
68
|
+
* seperate attribute (data-text-custom-color), instead of the inline style.
|
|
69
|
+
*
|
|
70
|
+
* See the following document for more details on this behaviour
|
|
71
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2908658046/Unsupported+custom+text+colors+in+dark+theme+Editor+Job+Story
|
|
72
|
+
*/
|
|
73
|
+
var tokenColor = (0, _editorPalette.hexToEditorTextPaletteColor)(props.color);
|
|
74
|
+
if (tokenColor) {
|
|
75
|
+
paletteColorValue = (0, _editorPalette.hexToEditorTextPaletteColor)(props.color) || props.color;
|
|
76
|
+
} else {
|
|
77
|
+
if (colorMode === 'dark') {
|
|
78
|
+
// if we have a custom color, we need to check if we are in dark mode
|
|
79
|
+
paletteColorValue = invertCustomColor(props.color);
|
|
71
80
|
} else {
|
|
72
|
-
if
|
|
73
|
-
|
|
74
|
-
paletteColorValue = invertCustomColor(props.color);
|
|
75
|
-
} else {
|
|
76
|
-
// if we are in light mode, we can just set the color
|
|
77
|
-
paletteColorValue = props.color;
|
|
78
|
-
}
|
|
81
|
+
// if we are in light mode, we can just set the color
|
|
82
|
+
paletteColorValue = props.color;
|
|
79
83
|
}
|
|
80
|
-
} else {
|
|
81
|
-
paletteColorValue = (0, _editorPalette.hexToEditorTextPaletteColor)(props.color) || props.color;
|
|
82
84
|
}
|
|
83
85
|
var style = (0, _react.useMemo)(function () {
|
|
84
86
|
return (0, _defineProperty2.default)({}, '--custom-palette-color', paletteColorValue);
|
|
@@ -11,7 +11,6 @@ var _adfSchema = require("@atlaskit/adf-schema");
|
|
|
11
11
|
var _tokens = require("@atlaskit/tokens");
|
|
12
12
|
var _types = require("@atlaskit/editor-common/types");
|
|
13
13
|
var _editorPalette = require("@atlaskit/editor-palette");
|
|
14
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
15
14
|
var _SortingIcon = _interopRequireDefault(require("../../ui/SortingIcon"));
|
|
16
15
|
var _events = require("../../analytics/events");
|
|
17
16
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
@@ -83,6 +82,12 @@ function invertCustomColor(customColor) {
|
|
|
83
82
|
hex = customColor;
|
|
84
83
|
} else if ((0, _adfSchema.isRgb)(customColor)) {
|
|
85
84
|
hex = (0, _adfSchema.rgbToHex)(customColor);
|
|
85
|
+
if (hex === null) {
|
|
86
|
+
// in some cases the rgb color is invalid, in this case we just return the color
|
|
87
|
+
// See https://product-fabric.atlassian.net/browse/DTR-2003 for a ticket to improve the isRgb function
|
|
88
|
+
// to align with the rgbToHex function
|
|
89
|
+
return customColor;
|
|
90
|
+
}
|
|
86
91
|
} else {
|
|
87
92
|
return customColor;
|
|
88
93
|
}
|
|
@@ -104,40 +109,35 @@ var getStyle = function getStyle(_ref) {
|
|
|
104
109
|
if (background &&
|
|
105
110
|
// ignore setting inline styles if ds neutral token is detected
|
|
106
111
|
!background.includes('--ds-background-neutral')) {
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
112
|
+
/**
|
|
113
|
+
* The Editor supports users pasting content from external sources with custom table cell backgrounds and having those
|
|
114
|
+
* backgrounds persisted.
|
|
115
|
+
*
|
|
116
|
+
* This feature predates the introduction of dark mode.
|
|
117
|
+
*
|
|
118
|
+
* Without the inversion logic below, tokenised content (ie. text), can be hard to read when the user loads the page in dark mode.
|
|
119
|
+
*
|
|
120
|
+
* This introduces inversion of the presentation of the custom background color when the user is in dark mode.
|
|
121
|
+
*
|
|
122
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
|
123
|
+
* how we detect table cell background colors copied from external editor sources. Where we load the background color from a
|
|
124
|
+
* seperate attribute (data-cell-background), instead of the inline style.
|
|
125
|
+
*
|
|
126
|
+
* See the following document for more details on this behaviour
|
|
127
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2892247168/Unsupported+custom+table+cell+background+colors+in+dark+theme+Editor+Job+Story
|
|
128
|
+
*/
|
|
129
|
+
var tokenColor = (0, _editorPalette.hexToEditorBackgroundPaletteRawValue)(background);
|
|
130
|
+
if (tokenColor) {
|
|
131
|
+
style.backgroundColor = tokenColor;
|
|
132
|
+
} else {
|
|
133
|
+
// if we have a custom color, we need to check if we are in dark mode
|
|
134
|
+
if (colorMode === 'dark') {
|
|
135
|
+
// if we are in dark mode, we need to invert the color
|
|
136
|
+
style.backgroundColor = invertCustomColor(background);
|
|
128
137
|
} else {
|
|
129
|
-
// if we
|
|
130
|
-
|
|
131
|
-
// if we are in dark mode, we need to invert the color
|
|
132
|
-
style.backgroundColor = invertCustomColor(background);
|
|
133
|
-
} else {
|
|
134
|
-
// if we are in light mode, we can just set the color
|
|
135
|
-
style.backgroundColor = background;
|
|
136
|
-
}
|
|
138
|
+
// if we are in light mode, we can just set the color
|
|
139
|
+
style.backgroundColor = background;
|
|
137
140
|
}
|
|
138
|
-
} else {
|
|
139
|
-
var _tokenColor = (0, _editorPalette.hexToEditorBackgroundPaletteRawValue)(background) || background;
|
|
140
|
-
style.backgroundColor = _tokenColor;
|
|
141
141
|
}
|
|
142
142
|
}
|
|
143
143
|
if (colGroupWidth) {
|
|
@@ -53,7 +53,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
|
|
|
53
53
|
var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
54
54
|
var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
55
55
|
var packageName = "@atlaskit/renderer";
|
|
56
|
-
var packageVersion = "108.15.
|
|
56
|
+
var packageVersion = "108.15.19";
|
|
57
57
|
var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
58
58
|
(0, _inherits2.default)(Renderer, _PureComponent);
|
|
59
59
|
var _super = _createSuper(Renderer);
|
|
@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import React, { useMemo } from 'react';
|
|
3
3
|
import { isHex, isRgb, rgbToHex } from '@atlaskit/adf-schema';
|
|
4
4
|
import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
|
|
5
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
6
5
|
import { useThemeObserver } from '@atlaskit/tokens';
|
|
7
6
|
/**
|
|
8
7
|
* This function is duplicated in
|
|
@@ -17,6 +16,12 @@ function invertCustomColor(customColor) {
|
|
|
17
16
|
hex = customColor;
|
|
18
17
|
} else if (isRgb(customColor)) {
|
|
19
18
|
hex = rgbToHex(customColor);
|
|
19
|
+
if (hex === null) {
|
|
20
|
+
// in some cases the rgb color is invalid, in this case we just return the color
|
|
21
|
+
// See https://product-fabric.atlassian.net/browse/DTR-2003 for a ticket to improve the isRgb function
|
|
22
|
+
// to align with the rgbToHex function
|
|
23
|
+
return customColor;
|
|
24
|
+
}
|
|
20
25
|
} else {
|
|
21
26
|
return customColor;
|
|
22
27
|
}
|
|
@@ -37,38 +42,35 @@ export default function TextColor(props) {
|
|
|
37
42
|
// the editor does supported ad hoc color values -- and there may be content
|
|
38
43
|
// which has been migrated or created via apis which use such values.
|
|
39
44
|
let paletteColorValue;
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* The Editor persists custom text colors when content has been migrated from the old editor, or created via
|
|
48
|
+
* apis.
|
|
49
|
+
*
|
|
50
|
+
* This behaviour predates the introduction of dark mode.
|
|
51
|
+
*
|
|
52
|
+
* Without the inversion logic below, text with custom colors, can be hard to read when the user loads the page in dark mode.
|
|
53
|
+
*
|
|
54
|
+
* This introduces inversion of the presentation of the custom text colors when the user is in dark mode.
|
|
55
|
+
*
|
|
56
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
|
57
|
+
* how we detect text colors copied from external editor sources. Where we load the background color from a
|
|
58
|
+
* seperate attribute (data-text-custom-color), instead of the inline style.
|
|
59
|
+
*
|
|
60
|
+
* See the following document for more details on this behaviour
|
|
61
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2908658046/Unsupported+custom+text+colors+in+dark+theme+Editor+Job+Story
|
|
62
|
+
*/
|
|
63
|
+
const tokenColor = hexToEditorTextPaletteColor(props.color);
|
|
64
|
+
if (tokenColor) {
|
|
65
|
+
paletteColorValue = hexToEditorTextPaletteColor(props.color) || props.color;
|
|
66
|
+
} else {
|
|
67
|
+
if (colorMode === 'dark') {
|
|
68
|
+
// if we have a custom color, we need to check if we are in dark mode
|
|
69
|
+
paletteColorValue = invertCustomColor(props.color);
|
|
61
70
|
} else {
|
|
62
|
-
if
|
|
63
|
-
|
|
64
|
-
paletteColorValue = invertCustomColor(props.color);
|
|
65
|
-
} else {
|
|
66
|
-
// if we are in light mode, we can just set the color
|
|
67
|
-
paletteColorValue = props.color;
|
|
68
|
-
}
|
|
71
|
+
// if we are in light mode, we can just set the color
|
|
72
|
+
paletteColorValue = props.color;
|
|
69
73
|
}
|
|
70
|
-
} else {
|
|
71
|
-
paletteColorValue = hexToEditorTextPaletteColor(props.color) || props.color;
|
|
72
74
|
}
|
|
73
75
|
const style = useMemo(() => ({
|
|
74
76
|
['--custom-palette-color']: paletteColorValue
|
|
@@ -4,7 +4,6 @@ import { isHex, isRgb, rgbToHex, tableBackgroundColorPalette } from '@atlaskit/a
|
|
|
4
4
|
import { useThemeObserver } from '@atlaskit/tokens';
|
|
5
5
|
import { SortOrder } from '@atlaskit/editor-common/types';
|
|
6
6
|
import { hexToEditorBackgroundPaletteRawValue } from '@atlaskit/editor-palette';
|
|
7
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
8
7
|
import SortingIcon from '../../ui/SortingIcon';
|
|
9
8
|
import { MODE, PLATFORM } from '../../analytics/events';
|
|
10
9
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
@@ -78,6 +77,12 @@ function invertCustomColor(customColor) {
|
|
|
78
77
|
hex = customColor;
|
|
79
78
|
} else if (isRgb(customColor)) {
|
|
80
79
|
hex = rgbToHex(customColor);
|
|
80
|
+
if (hex === null) {
|
|
81
|
+
// in some cases the rgb color is invalid, in this case we just return the color
|
|
82
|
+
// See https://product-fabric.atlassian.net/browse/DTR-2003 for a ticket to improve the isRgb function
|
|
83
|
+
// to align with the rgbToHex function
|
|
84
|
+
return customColor;
|
|
85
|
+
}
|
|
81
86
|
} else {
|
|
82
87
|
return customColor;
|
|
83
88
|
}
|
|
@@ -100,40 +105,35 @@ const getStyle = ({
|
|
|
100
105
|
if (background &&
|
|
101
106
|
// ignore setting inline styles if ds neutral token is detected
|
|
102
107
|
!background.includes('--ds-background-neutral')) {
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
108
|
+
/**
|
|
109
|
+
* The Editor supports users pasting content from external sources with custom table cell backgrounds and having those
|
|
110
|
+
* backgrounds persisted.
|
|
111
|
+
*
|
|
112
|
+
* This feature predates the introduction of dark mode.
|
|
113
|
+
*
|
|
114
|
+
* Without the inversion logic below, tokenised content (ie. text), can be hard to read when the user loads the page in dark mode.
|
|
115
|
+
*
|
|
116
|
+
* This introduces inversion of the presentation of the custom background color when the user is in dark mode.
|
|
117
|
+
*
|
|
118
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
|
119
|
+
* how we detect table cell background colors copied from external editor sources. Where we load the background color from a
|
|
120
|
+
* seperate attribute (data-cell-background), instead of the inline style.
|
|
121
|
+
*
|
|
122
|
+
* See the following document for more details on this behaviour
|
|
123
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2892247168/Unsupported+custom+table+cell+background+colors+in+dark+theme+Editor+Job+Story
|
|
124
|
+
*/
|
|
125
|
+
const tokenColor = hexToEditorBackgroundPaletteRawValue(background);
|
|
126
|
+
if (tokenColor) {
|
|
127
|
+
style.backgroundColor = tokenColor;
|
|
128
|
+
} else {
|
|
129
|
+
// if we have a custom color, we need to check if we are in dark mode
|
|
130
|
+
if (colorMode === 'dark') {
|
|
131
|
+
// if we are in dark mode, we need to invert the color
|
|
132
|
+
style.backgroundColor = invertCustomColor(background);
|
|
124
133
|
} else {
|
|
125
|
-
// if we
|
|
126
|
-
|
|
127
|
-
// if we are in dark mode, we need to invert the color
|
|
128
|
-
style.backgroundColor = invertCustomColor(background);
|
|
129
|
-
} else {
|
|
130
|
-
// if we are in light mode, we can just set the color
|
|
131
|
-
style.backgroundColor = background;
|
|
132
|
-
}
|
|
134
|
+
// if we are in light mode, we can just set the color
|
|
135
|
+
style.backgroundColor = background;
|
|
133
136
|
}
|
|
134
|
-
} else {
|
|
135
|
-
const tokenColor = hexToEditorBackgroundPaletteRawValue(background) || background;
|
|
136
|
-
style.backgroundColor = tokenColor;
|
|
137
137
|
}
|
|
138
138
|
}
|
|
139
139
|
if (colGroupWidth) {
|
|
@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
|
|
|
35
35
|
export const NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
36
36
|
export const DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
37
37
|
const packageName = "@atlaskit/renderer";
|
|
38
|
-
const packageVersion = "108.15.
|
|
38
|
+
const packageVersion = "108.15.19";
|
|
39
39
|
export class Renderer extends PureComponent {
|
|
40
40
|
constructor(props) {
|
|
41
41
|
super(props);
|
|
@@ -3,7 +3,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
3
3
|
import React, { useMemo } from 'react';
|
|
4
4
|
import { isHex, isRgb, rgbToHex } from '@atlaskit/adf-schema';
|
|
5
5
|
import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
|
|
6
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
7
6
|
import { useThemeObserver } from '@atlaskit/tokens';
|
|
8
7
|
/**
|
|
9
8
|
* This function is duplicated in
|
|
@@ -18,6 +17,12 @@ function invertCustomColor(customColor) {
|
|
|
18
17
|
hex = customColor;
|
|
19
18
|
} else if (isRgb(customColor)) {
|
|
20
19
|
hex = rgbToHex(customColor);
|
|
20
|
+
if (hex === null) {
|
|
21
|
+
// in some cases the rgb color is invalid, in this case we just return the color
|
|
22
|
+
// See https://product-fabric.atlassian.net/browse/DTR-2003 for a ticket to improve the isRgb function
|
|
23
|
+
// to align with the rgbToHex function
|
|
24
|
+
return customColor;
|
|
25
|
+
}
|
|
21
26
|
} else {
|
|
22
27
|
return customColor;
|
|
23
28
|
}
|
|
@@ -37,38 +42,35 @@ export default function TextColor(props) {
|
|
|
37
42
|
// the editor does supported ad hoc color values -- and there may be content
|
|
38
43
|
// which has been migrated or created via apis which use such values.
|
|
39
44
|
var paletteColorValue;
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* The Editor persists custom text colors when content has been migrated from the old editor, or created via
|
|
48
|
+
* apis.
|
|
49
|
+
*
|
|
50
|
+
* This behaviour predates the introduction of dark mode.
|
|
51
|
+
*
|
|
52
|
+
* Without the inversion logic below, text with custom colors, can be hard to read when the user loads the page in dark mode.
|
|
53
|
+
*
|
|
54
|
+
* This introduces inversion of the presentation of the custom text colors when the user is in dark mode.
|
|
55
|
+
*
|
|
56
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
|
57
|
+
* how we detect text colors copied from external editor sources. Where we load the background color from a
|
|
58
|
+
* seperate attribute (data-text-custom-color), instead of the inline style.
|
|
59
|
+
*
|
|
60
|
+
* See the following document for more details on this behaviour
|
|
61
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2908658046/Unsupported+custom+text+colors+in+dark+theme+Editor+Job+Story
|
|
62
|
+
*/
|
|
63
|
+
var tokenColor = hexToEditorTextPaletteColor(props.color);
|
|
64
|
+
if (tokenColor) {
|
|
65
|
+
paletteColorValue = hexToEditorTextPaletteColor(props.color) || props.color;
|
|
66
|
+
} else {
|
|
67
|
+
if (colorMode === 'dark') {
|
|
68
|
+
// if we have a custom color, we need to check if we are in dark mode
|
|
69
|
+
paletteColorValue = invertCustomColor(props.color);
|
|
61
70
|
} else {
|
|
62
|
-
if
|
|
63
|
-
|
|
64
|
-
paletteColorValue = invertCustomColor(props.color);
|
|
65
|
-
} else {
|
|
66
|
-
// if we are in light mode, we can just set the color
|
|
67
|
-
paletteColorValue = props.color;
|
|
68
|
-
}
|
|
71
|
+
// if we are in light mode, we can just set the color
|
|
72
|
+
paletteColorValue = props.color;
|
|
69
73
|
}
|
|
70
|
-
} else {
|
|
71
|
-
paletteColorValue = hexToEditorTextPaletteColor(props.color) || props.color;
|
|
72
74
|
}
|
|
73
75
|
var style = useMemo(function () {
|
|
74
76
|
return _defineProperty({}, '--custom-palette-color', paletteColorValue);
|
|
@@ -4,7 +4,6 @@ import { isHex, isRgb, rgbToHex, tableBackgroundColorPalette } from '@atlaskit/a
|
|
|
4
4
|
import { useThemeObserver } from '@atlaskit/tokens';
|
|
5
5
|
import { SortOrder } from '@atlaskit/editor-common/types';
|
|
6
6
|
import { hexToEditorBackgroundPaletteRawValue } from '@atlaskit/editor-palette';
|
|
7
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
8
7
|
import SortingIcon from '../../ui/SortingIcon';
|
|
9
8
|
import { MODE, PLATFORM } from '../../analytics/events';
|
|
10
9
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
@@ -76,6 +75,12 @@ function invertCustomColor(customColor) {
|
|
|
76
75
|
hex = customColor;
|
|
77
76
|
} else if (isRgb(customColor)) {
|
|
78
77
|
hex = rgbToHex(customColor);
|
|
78
|
+
if (hex === null) {
|
|
79
|
+
// in some cases the rgb color is invalid, in this case we just return the color
|
|
80
|
+
// See https://product-fabric.atlassian.net/browse/DTR-2003 for a ticket to improve the isRgb function
|
|
81
|
+
// to align with the rgbToHex function
|
|
82
|
+
return customColor;
|
|
83
|
+
}
|
|
79
84
|
} else {
|
|
80
85
|
return customColor;
|
|
81
86
|
}
|
|
@@ -97,40 +102,35 @@ var getStyle = function getStyle(_ref) {
|
|
|
97
102
|
if (background &&
|
|
98
103
|
// ignore setting inline styles if ds neutral token is detected
|
|
99
104
|
!background.includes('--ds-background-neutral')) {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
105
|
+
/**
|
|
106
|
+
* The Editor supports users pasting content from external sources with custom table cell backgrounds and having those
|
|
107
|
+
* backgrounds persisted.
|
|
108
|
+
*
|
|
109
|
+
* This feature predates the introduction of dark mode.
|
|
110
|
+
*
|
|
111
|
+
* Without the inversion logic below, tokenised content (ie. text), can be hard to read when the user loads the page in dark mode.
|
|
112
|
+
*
|
|
113
|
+
* This introduces inversion of the presentation of the custom background color when the user is in dark mode.
|
|
114
|
+
*
|
|
115
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
|
116
|
+
* how we detect table cell background colors copied from external editor sources. Where we load the background color from a
|
|
117
|
+
* seperate attribute (data-cell-background), instead of the inline style.
|
|
118
|
+
*
|
|
119
|
+
* See the following document for more details on this behaviour
|
|
120
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2892247168/Unsupported+custom+table+cell+background+colors+in+dark+theme+Editor+Job+Story
|
|
121
|
+
*/
|
|
122
|
+
var tokenColor = hexToEditorBackgroundPaletteRawValue(background);
|
|
123
|
+
if (tokenColor) {
|
|
124
|
+
style.backgroundColor = tokenColor;
|
|
125
|
+
} else {
|
|
126
|
+
// if we have a custom color, we need to check if we are in dark mode
|
|
127
|
+
if (colorMode === 'dark') {
|
|
128
|
+
// if we are in dark mode, we need to invert the color
|
|
129
|
+
style.backgroundColor = invertCustomColor(background);
|
|
121
130
|
} else {
|
|
122
|
-
// if we
|
|
123
|
-
|
|
124
|
-
// if we are in dark mode, we need to invert the color
|
|
125
|
-
style.backgroundColor = invertCustomColor(background);
|
|
126
|
-
} else {
|
|
127
|
-
// if we are in light mode, we can just set the color
|
|
128
|
-
style.backgroundColor = background;
|
|
129
|
-
}
|
|
131
|
+
// if we are in light mode, we can just set the color
|
|
132
|
+
style.backgroundColor = background;
|
|
130
133
|
}
|
|
131
|
-
} else {
|
|
132
|
-
var _tokenColor = hexToEditorBackgroundPaletteRawValue(background) || background;
|
|
133
|
-
style.backgroundColor = _tokenColor;
|
|
134
134
|
}
|
|
135
135
|
}
|
|
136
136
|
if (colGroupWidth) {
|
|
@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
|
|
|
45
45
|
export var NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
46
46
|
export var DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
47
47
|
var packageName = "@atlaskit/renderer";
|
|
48
|
-
var packageVersion = "108.15.
|
|
48
|
+
var packageVersion = "108.15.19";
|
|
49
49
|
export var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
50
50
|
_inherits(Renderer, _PureComponent);
|
|
51
51
|
var _super = _createSuper(Renderer);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/renderer",
|
|
3
|
-
"version": "108.15.
|
|
3
|
+
"version": "108.15.19",
|
|
4
4
|
"description": "Renderer component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -29,17 +29,17 @@
|
|
|
29
29
|
"@atlaskit/analytics-listeners": "^8.7.0",
|
|
30
30
|
"@atlaskit/analytics-namespaced-context": "^6.7.0",
|
|
31
31
|
"@atlaskit/analytics-next": "^9.1.0",
|
|
32
|
-
"@atlaskit/button": "^16.
|
|
32
|
+
"@atlaskit/button": "^16.14.0",
|
|
33
33
|
"@atlaskit/code": "^14.6.0",
|
|
34
34
|
"@atlaskit/editor-common": "^76.18.0",
|
|
35
35
|
"@atlaskit/editor-json-transformer": "^8.10.0",
|
|
36
|
-
"@atlaskit/editor-palette": "1.5.
|
|
36
|
+
"@atlaskit/editor-palette": "1.5.2",
|
|
37
37
|
"@atlaskit/editor-prosemirror": "1.1.0",
|
|
38
38
|
"@atlaskit/editor-shared-styles": "^2.8.0",
|
|
39
39
|
"@atlaskit/emoji": "^67.5.0",
|
|
40
40
|
"@atlaskit/icon": "^21.12.0",
|
|
41
|
-
"@atlaskit/link-datasource": "^1.
|
|
42
|
-
"@atlaskit/media-card": "^77.
|
|
41
|
+
"@atlaskit/link-datasource": "^1.15.0",
|
|
42
|
+
"@atlaskit/media-card": "^77.3.0",
|
|
43
43
|
"@atlaskit/media-client": "^25.0.0",
|
|
44
44
|
"@atlaskit/media-client-react": "^1.3.0",
|
|
45
45
|
"@atlaskit/media-common": "^10.0.0",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"@atlaskit/media-ui": "^25.0.0",
|
|
48
48
|
"@atlaskit/media-viewer": "^48.1.0",
|
|
49
49
|
"@atlaskit/platform-feature-flags": "^0.2.0",
|
|
50
|
-
"@atlaskit/smart-card": "^26.
|
|
50
|
+
"@atlaskit/smart-card": "^26.42.0",
|
|
51
51
|
"@atlaskit/status": "^1.4.0",
|
|
52
52
|
"@atlaskit/task-decision": "^17.9.0",
|
|
53
53
|
"@atlaskit/theme": "^12.6.0",
|
|
@@ -124,12 +124,6 @@
|
|
|
124
124
|
},
|
|
125
125
|
"platform.editor.table.increase-shadow-visibility_lh89r": {
|
|
126
126
|
"type": "boolean"
|
|
127
|
-
},
|
|
128
|
-
"platform.editor.dm-invert-tablecell-bgcolor_9fz6s": {
|
|
129
|
-
"type": "boolean"
|
|
130
|
-
},
|
|
131
|
-
"platform.editor.dm-invert-text-color_cvho2": {
|
|
132
|
-
"type": "boolean"
|
|
133
127
|
}
|
|
134
128
|
}
|
|
135
129
|
}
|