@atlaskit/adf-schema 33.1.2 → 33.1.3
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 +6 -0
- package/dist/cjs/schema/marks/text-color.js +33 -31
- package/dist/cjs/schema/nodes/tableNodes.js +34 -33
- package/dist/es2019/schema/marks/text-color.js +33 -31
- package/dist/es2019/schema/nodes/tableNodes.js +34 -33
- package/dist/esm/schema/marks/text-color.js +33 -31
- package/dist/esm/schema/nodes/tableNodes.js +34 -33
- package/package.json +1 -12
package/CHANGELOG.md
CHANGED
@@ -10,7 +10,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
|
|
10
10
|
var _editorPalette = require("../../utils/editor-palette");
|
11
11
|
var _groups = require("../groups");
|
12
12
|
var _colors = require("../../utils/colors");
|
13
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
14
13
|
/**
|
15
14
|
* @name textColor_mark
|
16
15
|
*/
|
@@ -84,6 +83,12 @@ function invertCustomColor(customColor) {
|
|
84
83
|
hex = customColor;
|
85
84
|
} else if ((0, _colors.isRgb)(customColor)) {
|
86
85
|
hex = (0, _colors.rgbToHex)(customColor);
|
86
|
+
if (hex === null) {
|
87
|
+
// in some cases the rgb color is invalid, in this case we just return the color
|
88
|
+
// See https://product-fabric.atlassian.net/browse/DTR-2003 for a ticket to improve the isRgb function
|
89
|
+
// to align with the rgbToHex function
|
90
|
+
return customColor;
|
91
|
+
}
|
87
92
|
} else {
|
88
93
|
return customColor;
|
89
94
|
}
|
@@ -168,38 +173,35 @@ var textColor = {
|
|
168
173
|
// Note -- while there is no way to create custom colors using default tooling
|
169
174
|
// the editor does supported ad hoc color values -- and there may be content
|
170
175
|
// which has been migrated or created via apis which use such values.
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
176
|
+
|
177
|
+
/**
|
178
|
+
* The Editor persists custom text colors when content has been migrated from the old editor, or created via
|
179
|
+
* apis.
|
180
|
+
*
|
181
|
+
* This behaviour predates the introduction of dark mode.
|
182
|
+
*
|
183
|
+
* Without the inversion logic below, text with custom colors, can be hard to read when the user loads the page in dark mode.
|
184
|
+
*
|
185
|
+
* This introduces inversion of the presentation of the custom text colors when the user is in dark mode.
|
186
|
+
*
|
187
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
188
|
+
* how we detect text colors copied from external editor sources. Where we load the background color from a
|
189
|
+
* seperate attribute (data-text-custom-color), instead of the inline style.
|
190
|
+
*
|
191
|
+
* See the following document for more details on this behaviour
|
192
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2908658046/Unsupported+custom+text+colors+in+dark+theme+Editor+Job+Story
|
193
|
+
*/
|
194
|
+
var tokenColor = (0, _editorPalette.hexToEditorTextPaletteColor)(mark.attrs.color);
|
195
|
+
if (tokenColor) {
|
196
|
+
paletteColorValue = (0, _editorPalette.hexToEditorTextPaletteColor)(mark.attrs.color) || mark.attrs.color;
|
197
|
+
} else {
|
198
|
+
if (getGlobalTheme().colorMode === 'dark') {
|
199
|
+
// if we have a custom color, we need to check if we are in dark mode
|
200
|
+
paletteColorValue = invertCustomColor(mark.attrs.color);
|
192
201
|
} else {
|
193
|
-
if
|
194
|
-
|
195
|
-
paletteColorValue = invertCustomColor(mark.attrs.color);
|
196
|
-
} else {
|
197
|
-
// if we are in light mode, we can just set the color
|
198
|
-
paletteColorValue = mark.attrs.color;
|
199
|
-
}
|
202
|
+
// if we are in light mode, we can just set the color
|
203
|
+
paletteColorValue = mark.attrs.color;
|
200
204
|
}
|
201
|
-
} else {
|
202
|
-
paletteColorValue = (0, _editorPalette.hexToEditorTextPaletteColor)(mark.attrs.color) || mark.attrs.color;
|
203
205
|
}
|
204
206
|
return ['span', (0, _defineProperty2.default)({
|
205
207
|
class: 'fabric-text-color-mark',
|
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
7
7
|
exports.toJSONTableHeader = exports.toJSONTableCell = exports.tableWithCustomWidth = exports.tableToJSON = exports.tableRow = exports.tablePrefixSelector = exports.tableHeaderSelector = exports.tableHeader = exports.tableCellSelector = exports.tableCellContentWrapperSelector = exports.tableCellContentDomSelector = exports.tableCell = exports.tableBackgroundColorPalette = exports.tableBackgroundColorNames = exports.tableBackgroundBorderColor = exports.table = exports.setGlobalTheme = exports.getCellDomAttrs = exports.getCellAttrs = void 0;
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
10
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
11
10
|
var _editorPalette = require("../../utils/editor-palette");
|
12
11
|
var _colors = require("../../utils/colors");
|
13
12
|
var _uuid = require("../../utils/uuid");
|
@@ -74,6 +73,12 @@ function invertCustomColor(customColor) {
|
|
74
73
|
hex = customColor;
|
75
74
|
} else if ((0, _colors.isRgb)(customColor)) {
|
76
75
|
hex = (0, _colors.rgbToHex)(customColor);
|
76
|
+
if (hex === null) {
|
77
|
+
// in some cases the rgb color is invalid, in this case we just return the color
|
78
|
+
// See https://product-fabric.atlassian.net/browse/DTR-2003 for a ticket to improve the isRgb function
|
79
|
+
// to align with the rgbToHex function
|
80
|
+
return customColor;
|
81
|
+
}
|
77
82
|
} else {
|
78
83
|
return customColor;
|
79
84
|
}
|
@@ -140,40 +145,36 @@ var getCellDomAttrs = function getCellDomAttrs(node) {
|
|
140
145
|
attrs.style = '';
|
141
146
|
} else {
|
142
147
|
var color = (0, _colors.isRgb)(background) && (0, _colors.rgbToHex)(background) ? (0, _colors.rgbToHex)(background) : background;
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
148
|
+
|
149
|
+
/**
|
150
|
+
* The Editor supports users pasting content from external sources with custom table cell backgrounds and having those
|
151
|
+
* backgrounds persisted.
|
152
|
+
*
|
153
|
+
* This feature predates the introduction of dark mode.
|
154
|
+
*
|
155
|
+
* Without the inversion logic below, tokenised content (ie. text), can be hard to read when the user loads the page in dark mode.
|
156
|
+
*
|
157
|
+
* This introduces inversion of the presentation of the custom background color when the user is in dark mode.
|
158
|
+
*
|
159
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
160
|
+
* how we detect table cell background colors copied from external editor sources. Where we load the background color from a
|
161
|
+
* seperate attribute (data-cell-background), instead of the inline style.
|
162
|
+
*
|
163
|
+
* See the following document for more details on this behaviour
|
164
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2892247168/Unsupported+custom+table+cell+background+colors+in+dark+theme+Editor+Job+Story
|
165
|
+
*/
|
166
|
+
var tokenColor = (0, _editorPalette.hexToEditorBackgroundPaletteRawValue)(color);
|
167
|
+
if (tokenColor) {
|
168
|
+
attrs.style = "background-color: ".concat(tokenColor, ";");
|
169
|
+
} else {
|
170
|
+
// if we have a custom color, we need to check if we are in dark mode
|
171
|
+
if (getGlobalTheme().colorMode === 'dark') {
|
165
172
|
// if we have a custom color, we need to check if we are in dark mode
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
// if we are in light mode, we can just set the color
|
171
|
-
attrs.style = "background-color: ".concat(background, ";");
|
172
|
-
}
|
173
|
+
attrs.style = "background-color: ".concat(invertCustomColor(color), ";");
|
174
|
+
} else {
|
175
|
+
// if we are in light mode, we can just set the color
|
176
|
+
attrs.style = "background-color: ".concat(background, ";");
|
173
177
|
}
|
174
|
-
} else {
|
175
|
-
var _tokenColor = (0, _editorPalette.hexToEditorBackgroundPaletteRawValue)(color) || color;
|
176
|
-
attrs.style = "".concat(attrs.style || '', "background-color: ").concat(_tokenColor, ";");
|
177
178
|
}
|
178
179
|
|
179
180
|
/**
|
@@ -1,7 +1,6 @@
|
|
1
1
|
import { hexToEditorTextPaletteColor } from '../../utils/editor-palette';
|
2
2
|
import { COLOR } from '../groups';
|
3
3
|
import { rgbToHex, N0, N80, P50, P300, P500, T75, T300, T500, G75, G300, G500, R75, R300, R500, Y75, Y200, Y400, B75, B100, B500, isHex, isRgb } from '../../utils/colors';
|
4
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
5
4
|
|
6
5
|
/**
|
7
6
|
* @name textColor_mark
|
@@ -69,6 +68,12 @@ function invertCustomColor(customColor) {
|
|
69
68
|
hex = customColor;
|
70
69
|
} else if (isRgb(customColor)) {
|
71
70
|
hex = rgbToHex(customColor);
|
71
|
+
if (hex === null) {
|
72
|
+
// in some cases the rgb color is invalid, in this case we just return the color
|
73
|
+
// See https://product-fabric.atlassian.net/browse/DTR-2003 for a ticket to improve the isRgb function
|
74
|
+
// to align with the rgbToHex function
|
75
|
+
return customColor;
|
76
|
+
}
|
72
77
|
} else {
|
73
78
|
return customColor;
|
74
79
|
}
|
@@ -152,38 +157,35 @@ export const textColor = {
|
|
152
157
|
// Note -- while there is no way to create custom colors using default tooling
|
153
158
|
// the editor does supported ad hoc color values -- and there may be content
|
154
159
|
// which has been migrated or created via apis which use such values.
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
160
|
+
|
161
|
+
/**
|
162
|
+
* The Editor persists custom text colors when content has been migrated from the old editor, or created via
|
163
|
+
* apis.
|
164
|
+
*
|
165
|
+
* This behaviour predates the introduction of dark mode.
|
166
|
+
*
|
167
|
+
* Without the inversion logic below, text with custom colors, can be hard to read when the user loads the page in dark mode.
|
168
|
+
*
|
169
|
+
* This introduces inversion of the presentation of the custom text colors when the user is in dark mode.
|
170
|
+
*
|
171
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
172
|
+
* how we detect text colors copied from external editor sources. Where we load the background color from a
|
173
|
+
* seperate attribute (data-text-custom-color), instead of the inline style.
|
174
|
+
*
|
175
|
+
* See the following document for more details on this behaviour
|
176
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2908658046/Unsupported+custom+text+colors+in+dark+theme+Editor+Job+Story
|
177
|
+
*/
|
178
|
+
const tokenColor = hexToEditorTextPaletteColor(mark.attrs.color);
|
179
|
+
if (tokenColor) {
|
180
|
+
paletteColorValue = hexToEditorTextPaletteColor(mark.attrs.color) || mark.attrs.color;
|
181
|
+
} else {
|
182
|
+
if (getGlobalTheme().colorMode === 'dark') {
|
183
|
+
// if we have a custom color, we need to check if we are in dark mode
|
184
|
+
paletteColorValue = invertCustomColor(mark.attrs.color);
|
176
185
|
} else {
|
177
|
-
if
|
178
|
-
|
179
|
-
paletteColorValue = invertCustomColor(mark.attrs.color);
|
180
|
-
} else {
|
181
|
-
// if we are in light mode, we can just set the color
|
182
|
-
paletteColorValue = mark.attrs.color;
|
183
|
-
}
|
186
|
+
// if we are in light mode, we can just set the color
|
187
|
+
paletteColorValue = mark.attrs.color;
|
184
188
|
}
|
185
|
-
} else {
|
186
|
-
paletteColorValue = hexToEditorTextPaletteColor(mark.attrs.color) || mark.attrs.color;
|
187
189
|
}
|
188
190
|
return ['span', {
|
189
191
|
class: 'fabric-text-color-mark',
|
@@ -1,4 +1,3 @@
|
|
1
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
2
1
|
import { hexToEditorBackgroundPaletteRawValue } from '../../utils/editor-palette';
|
3
2
|
import { B100, B50, B75, G200, G50, G75, hexToRgba, isHex, isRgb, N0, N20, N60, N800, P100, P50, P75, R100, R50, R75, rgbToHex, T100, T50, T75, Y200, Y50, Y75 } from '../../utils/colors';
|
4
3
|
import { uuid } from '../../utils/uuid';
|
@@ -56,6 +55,12 @@ function invertCustomColor(customColor) {
|
|
56
55
|
hex = customColor;
|
57
56
|
} else if (isRgb(customColor)) {
|
58
57
|
hex = rgbToHex(customColor);
|
58
|
+
if (hex === null) {
|
59
|
+
// in some cases the rgb color is invalid, in this case we just return the color
|
60
|
+
// See https://product-fabric.atlassian.net/browse/DTR-2003 for a ticket to improve the isRgb function
|
61
|
+
// to align with the rgbToHex function
|
62
|
+
return customColor;
|
63
|
+
}
|
59
64
|
} else {
|
60
65
|
return customColor;
|
61
66
|
}
|
@@ -123,40 +128,36 @@ export const getCellDomAttrs = node => {
|
|
123
128
|
attrs.style = '';
|
124
129
|
} else {
|
125
130
|
const color = isRgb(background) && rgbToHex(background) ? rgbToHex(background) : background;
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
131
|
+
|
132
|
+
/**
|
133
|
+
* The Editor supports users pasting content from external sources with custom table cell backgrounds and having those
|
134
|
+
* backgrounds persisted.
|
135
|
+
*
|
136
|
+
* This feature predates the introduction of dark mode.
|
137
|
+
*
|
138
|
+
* Without the inversion logic below, tokenised content (ie. text), can be hard to read when the user loads the page in dark mode.
|
139
|
+
*
|
140
|
+
* This introduces inversion of the presentation of the custom background color when the user is in dark mode.
|
141
|
+
*
|
142
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
143
|
+
* how we detect table cell background colors copied from external editor sources. Where we load the background color from a
|
144
|
+
* seperate attribute (data-cell-background), instead of the inline style.
|
145
|
+
*
|
146
|
+
* See the following document for more details on this behaviour
|
147
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2892247168/Unsupported+custom+table+cell+background+colors+in+dark+theme+Editor+Job+Story
|
148
|
+
*/
|
149
|
+
const tokenColor = hexToEditorBackgroundPaletteRawValue(color);
|
150
|
+
if (tokenColor) {
|
151
|
+
attrs.style = `background-color: ${tokenColor};`;
|
152
|
+
} else {
|
153
|
+
// if we have a custom color, we need to check if we are in dark mode
|
154
|
+
if (getGlobalTheme().colorMode === 'dark') {
|
148
155
|
// if we have a custom color, we need to check if we are in dark mode
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
// if we are in light mode, we can just set the color
|
154
|
-
attrs.style = `background-color: ${background};`;
|
155
|
-
}
|
156
|
+
attrs.style = `background-color: ${invertCustomColor(color)};`;
|
157
|
+
} else {
|
158
|
+
// if we are in light mode, we can just set the color
|
159
|
+
attrs.style = `background-color: ${background};`;
|
156
160
|
}
|
157
|
-
} else {
|
158
|
-
const tokenColor = hexToEditorBackgroundPaletteRawValue(color) || color;
|
159
|
-
attrs.style = `${attrs.style || ''}background-color: ${tokenColor};`;
|
160
161
|
}
|
161
162
|
|
162
163
|
/**
|
@@ -3,7 +3,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
import { hexToEditorTextPaletteColor } from '../../utils/editor-palette';
|
4
4
|
import { COLOR } from '../groups';
|
5
5
|
import { rgbToHex, N0, N80, P50, P300, P500, T75, T300, T500, G75, G300, G500, R75, R300, R500, Y75, Y200, Y400, B75, B100, B500, isHex, isRgb } from '../../utils/colors';
|
6
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
7
6
|
|
8
7
|
/**
|
9
8
|
* @name textColor_mark
|
@@ -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
|
}
|
@@ -159,38 +164,35 @@ export var textColor = {
|
|
159
164
|
// Note -- while there is no way to create custom colors using default tooling
|
160
165
|
// the editor does supported ad hoc color values -- and there may be content
|
161
166
|
// which has been migrated or created via apis which use such values.
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
167
|
+
|
168
|
+
/**
|
169
|
+
* The Editor persists custom text colors when content has been migrated from the old editor, or created via
|
170
|
+
* apis.
|
171
|
+
*
|
172
|
+
* This behaviour predates the introduction of dark mode.
|
173
|
+
*
|
174
|
+
* Without the inversion logic below, text with custom colors, can be hard to read when the user loads the page in dark mode.
|
175
|
+
*
|
176
|
+
* This introduces inversion of the presentation of the custom text colors when the user is in dark mode.
|
177
|
+
*
|
178
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
179
|
+
* how we detect text colors copied from external editor sources. Where we load the background color from a
|
180
|
+
* seperate attribute (data-text-custom-color), instead of the inline style.
|
181
|
+
*
|
182
|
+
* See the following document for more details on this behaviour
|
183
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2908658046/Unsupported+custom+text+colors+in+dark+theme+Editor+Job+Story
|
184
|
+
*/
|
185
|
+
var tokenColor = hexToEditorTextPaletteColor(mark.attrs.color);
|
186
|
+
if (tokenColor) {
|
187
|
+
paletteColorValue = hexToEditorTextPaletteColor(mark.attrs.color) || mark.attrs.color;
|
188
|
+
} else {
|
189
|
+
if (getGlobalTheme().colorMode === 'dark') {
|
190
|
+
// if we have a custom color, we need to check if we are in dark mode
|
191
|
+
paletteColorValue = invertCustomColor(mark.attrs.color);
|
183
192
|
} else {
|
184
|
-
if
|
185
|
-
|
186
|
-
paletteColorValue = invertCustomColor(mark.attrs.color);
|
187
|
-
} else {
|
188
|
-
// if we are in light mode, we can just set the color
|
189
|
-
paletteColorValue = mark.attrs.color;
|
190
|
-
}
|
193
|
+
// if we are in light mode, we can just set the color
|
194
|
+
paletteColorValue = mark.attrs.color;
|
191
195
|
}
|
192
|
-
} else {
|
193
|
-
paletteColorValue = hexToEditorTextPaletteColor(mark.attrs.color) || mark.attrs.color;
|
194
196
|
}
|
195
197
|
return ['span', _defineProperty({
|
196
198
|
class: 'fabric-text-color-mark',
|
@@ -2,7 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
3
3
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
4
4
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
5
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
6
5
|
import { hexToEditorBackgroundPaletteRawValue } from '../../utils/editor-palette';
|
7
6
|
import { B100, B50, B75, G200, G50, G75, hexToRgba, isHex, isRgb, N0, N20, N60, N800, P100, P50, P75, R100, R50, R75, rgbToHex, T100, T50, T75, Y200, Y50, Y75 } from '../../utils/colors';
|
8
7
|
import { uuid } from '../../utils/uuid';
|
@@ -61,6 +60,12 @@ function invertCustomColor(customColor) {
|
|
61
60
|
hex = customColor;
|
62
61
|
} else if (isRgb(customColor)) {
|
63
62
|
hex = rgbToHex(customColor);
|
63
|
+
if (hex === null) {
|
64
|
+
// in some cases the rgb color is invalid, in this case we just return the color
|
65
|
+
// See https://product-fabric.atlassian.net/browse/DTR-2003 for a ticket to improve the isRgb function
|
66
|
+
// to align with the rgbToHex function
|
67
|
+
return customColor;
|
68
|
+
}
|
64
69
|
} else {
|
65
70
|
return customColor;
|
66
71
|
}
|
@@ -126,40 +131,36 @@ export var getCellDomAttrs = function getCellDomAttrs(node) {
|
|
126
131
|
attrs.style = '';
|
127
132
|
} else {
|
128
133
|
var color = isRgb(background) && rgbToHex(background) ? rgbToHex(background) : background;
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
134
|
+
|
135
|
+
/**
|
136
|
+
* The Editor supports users pasting content from external sources with custom table cell backgrounds and having those
|
137
|
+
* backgrounds persisted.
|
138
|
+
*
|
139
|
+
* This feature predates the introduction of dark mode.
|
140
|
+
*
|
141
|
+
* Without the inversion logic below, tokenised content (ie. text), can be hard to read when the user loads the page in dark mode.
|
142
|
+
*
|
143
|
+
* This introduces inversion of the presentation of the custom background color when the user is in dark mode.
|
144
|
+
*
|
145
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
146
|
+
* how we detect table cell background colors copied from external editor sources. Where we load the background color from a
|
147
|
+
* seperate attribute (data-cell-background), instead of the inline style.
|
148
|
+
*
|
149
|
+
* See the following document for more details on this behaviour
|
150
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2892247168/Unsupported+custom+table+cell+background+colors+in+dark+theme+Editor+Job+Story
|
151
|
+
*/
|
152
|
+
var tokenColor = hexToEditorBackgroundPaletteRawValue(color);
|
153
|
+
if (tokenColor) {
|
154
|
+
attrs.style = "background-color: ".concat(tokenColor, ";");
|
155
|
+
} else {
|
156
|
+
// if we have a custom color, we need to check if we are in dark mode
|
157
|
+
if (getGlobalTheme().colorMode === 'dark') {
|
151
158
|
// if we have a custom color, we need to check if we are in dark mode
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
// if we are in light mode, we can just set the color
|
157
|
-
attrs.style = "background-color: ".concat(background, ";");
|
158
|
-
}
|
159
|
+
attrs.style = "background-color: ".concat(invertCustomColor(color), ";");
|
160
|
+
} else {
|
161
|
+
// if we are in light mode, we can just set the color
|
162
|
+
attrs.style = "background-color: ".concat(background, ";");
|
159
163
|
}
|
160
|
-
} else {
|
161
|
-
var _tokenColor = hexToEditorBackgroundPaletteRawValue(color) || color;
|
162
|
-
attrs.style = "".concat(attrs.style || '', "background-color: ").concat(_tokenColor, ";");
|
163
164
|
}
|
164
165
|
|
165
166
|
/**
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@atlaskit/adf-schema",
|
3
|
-
"version": "33.1.
|
3
|
+
"version": "33.1.3",
|
4
4
|
"description": "Shared package that contains the ADF-schema (json) and ProseMirror node/mark specs",
|
5
5
|
"publishConfig": {
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
@@ -34,7 +34,6 @@
|
|
34
34
|
"@atlaskit/codemod-utils": "^4.2.0",
|
35
35
|
"@atlaskit/editor-prosemirror": "*",
|
36
36
|
"@atlaskit/json-schema-generator": "^3.3.6",
|
37
|
-
"@atlaskit/platform-feature-flags": "^0.2.4",
|
38
37
|
"@babel/runtime": "^7.0.0",
|
39
38
|
"css-color-names": "0.0.4",
|
40
39
|
"linkify-it": "^2.0.3",
|
@@ -42,8 +41,6 @@
|
|
42
41
|
},
|
43
42
|
"devDependencies": {
|
44
43
|
"@atlassian/adf-schema-json": "^1.2.0",
|
45
|
-
"@atlaskit/platform-feature-flags": "^0.2.4",
|
46
|
-
"@atlassian/feature-flags-test-utils": "^0.1.2",
|
47
44
|
"@babel/cli": "^7.22.9",
|
48
45
|
"@babel/core": "^7.22.9",
|
49
46
|
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
@@ -71,13 +68,5 @@
|
|
71
68
|
"styled-components": "^3.2.6",
|
72
69
|
"ts-jest": "^29.1.1",
|
73
70
|
"typescript": "~4.9.5"
|
74
|
-
},
|
75
|
-
"platform-feature-flags": {
|
76
|
-
"platform.editor.dm-invert-tablecell-bgcolor_9fz6s": {
|
77
|
-
"type": "boolean"
|
78
|
-
},
|
79
|
-
"platform.editor.dm-invert-text-color_cvho2": {
|
80
|
-
"type": "boolean"
|
81
|
-
}
|
82
71
|
}
|
83
72
|
}
|