@atlaskit/adf-schema 33.0.0 → 33.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/dist/cjs/schema/marks/text-color.js +87 -2
- package/dist/cjs/schema/nodes/tableNodes.js +86 -3
- package/dist/es2019/schema/marks/text-color.js +86 -2
- package/dist/es2019/schema/nodes/tableNodes.js +84 -2
- package/dist/esm/schema/marks/text-color.js +86 -2
- package/dist/esm/schema/nodes/tableNodes.js +84 -2
- package/dist/types/schema/marks/text-color.d.ts +1 -0
- package/dist/types/schema/nodes/tableNodes.d.ts +1 -0
- package/package.json +11 -1
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,15 @@
|
|
1
1
|
# @atlaskit/adf-schema
|
2
2
|
|
3
|
+
## 33.1.0
|
4
|
+
|
5
|
+
### Minor Changes
|
6
|
+
|
7
|
+
- 2b9e201: ED-20037 feat(adf-schema): invert custom text colors in dark mode
|
8
|
+
|
9
|
+
### Patch Changes
|
10
|
+
|
11
|
+
- 94ff748: ED-20037 feat(adf-schema): invert custom tableCell backgrounds in dark mode
|
12
|
+
|
3
13
|
## 33.0.0
|
4
14
|
|
5
15
|
### Major Changes
|
@@ -4,12 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
5
5
|
value: true
|
6
6
|
});
|
7
|
-
exports.textColor = exports.colorPaletteExtended = exports.colorPalette = void 0;
|
7
|
+
exports.textColor = exports.setGlobalTheme = exports.colorPaletteExtended = exports.colorPalette = void 0;
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
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");
|
13
14
|
/**
|
14
15
|
* @name textColor_mark
|
15
16
|
*/
|
@@ -71,6 +72,55 @@ colorArrayPalette.forEach(function (_ref) {
|
|
71
72
|
label = _ref2[1];
|
72
73
|
return colorPalette.set(color.toLowerCase(), label);
|
73
74
|
});
|
75
|
+
|
76
|
+
/**
|
77
|
+
* This function is duplicated in @atlaskit/renderer and ../nodes/tableNodes
|
78
|
+
* it takes a color string, and if the color string is a hex or rgb value
|
79
|
+
* it will invert the color and return the inverted color.
|
80
|
+
*/
|
81
|
+
function invertCustomColor(customColor) {
|
82
|
+
var hex;
|
83
|
+
if ((0, _colors.isHex)(customColor)) {
|
84
|
+
hex = customColor;
|
85
|
+
} else if ((0, _colors.isRgb)(customColor)) {
|
86
|
+
hex = (0, _colors.rgbToHex)(customColor);
|
87
|
+
} else {
|
88
|
+
return customColor;
|
89
|
+
}
|
90
|
+
var hexWithoutHash = hex.replace('#', '');
|
91
|
+
|
92
|
+
// This inverts the hex color by
|
93
|
+
// 1. converting the hex code to a number
|
94
|
+
// 2. XORing it with 0xffffff
|
95
|
+
// 3. Converting the result back to hex
|
96
|
+
// 4. Removing the leading 1 from the result
|
97
|
+
return "#".concat((Number("0x1".concat(hexWithoutHash)) ^ 0xffffff).toString(16).substring(1).toUpperCase());
|
98
|
+
}
|
99
|
+
|
100
|
+
// these are for test only
|
101
|
+
var testGlobalTheme;
|
102
|
+
var setGlobalTheme = function setGlobalTheme(theme) {
|
103
|
+
testGlobalTheme = theme;
|
104
|
+
};
|
105
|
+
// This is a minimal duplication of the method from @atlaskit/tokens
|
106
|
+
// to minimise the number of dependencies required as these changes are expected
|
107
|
+
// to be patched onto CR8.
|
108
|
+
exports.setGlobalTheme = setGlobalTheme;
|
109
|
+
var getGlobalTheme = function getGlobalTheme() {
|
110
|
+
// This should only be hit during tests.
|
111
|
+
//
|
112
|
+
// At time of writing Jest mocks are not working in this repository.
|
113
|
+
if (testGlobalTheme) {
|
114
|
+
return {
|
115
|
+
colorMode: testGlobalTheme
|
116
|
+
};
|
117
|
+
}
|
118
|
+
var element = document.documentElement;
|
119
|
+
var colorMode = element.getAttribute('data-color-mode') || '';
|
120
|
+
return {
|
121
|
+
colorMode: colorMode
|
122
|
+
};
|
123
|
+
};
|
74
124
|
var textColor = {
|
75
125
|
attrs: {
|
76
126
|
color: {}
|
@@ -114,12 +164,47 @@ var textColor = {
|
|
114
164
|
}
|
115
165
|
}],
|
116
166
|
toDOM: function toDOM(mark) {
|
167
|
+
var paletteColorValue;
|
117
168
|
// Note -- while there is no way to create custom colors using default tooling
|
118
169
|
// the editor does supported ad hoc color values -- and there may be content
|
119
170
|
// which has been migrated or created via apis which use such values.
|
120
|
-
|
171
|
+
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.dm-invert-text-color_cvho2')) {
|
172
|
+
/**
|
173
|
+
* The Editor persists custom text colors when content has been migrated from the old editor, or created via
|
174
|
+
* apis.
|
175
|
+
*
|
176
|
+
* This behaviour predates the introduction of dark mode.
|
177
|
+
*
|
178
|
+
* Without the inversion logic below, text with custom colors, can be hard to read when the user loads the page in dark mode.
|
179
|
+
*
|
180
|
+
* This introduces inversion of the presentation of the custom text colors when the user is in dark mode.
|
181
|
+
*
|
182
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
183
|
+
* how we detect text colors copied from external editor sources. Where we load the background color from a
|
184
|
+
* seperate attribute (data-text-custom-color), instead of the inline style.
|
185
|
+
*
|
186
|
+
* See the following document for more details on this behaviour
|
187
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2908658046/Unsupported+custom+text+colors+in+dark+theme+Editor+Job+Story
|
188
|
+
*/
|
189
|
+
var tokenColor = (0, _editorPalette.hexToEditorTextPaletteColor)(mark.attrs.color);
|
190
|
+
if (tokenColor) {
|
191
|
+
paletteColorValue = (0, _editorPalette.hexToEditorTextPaletteColor)(mark.attrs.color) || mark.attrs.color;
|
192
|
+
} else {
|
193
|
+
if (getGlobalTheme().colorMode === 'dark') {
|
194
|
+
// if we have a custom color, we need to check if we are in dark mode
|
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
|
+
}
|
200
|
+
}
|
201
|
+
} else {
|
202
|
+
paletteColorValue = (0, _editorPalette.hexToEditorTextPaletteColor)(mark.attrs.color) || mark.attrs.color;
|
203
|
+
}
|
121
204
|
return ['span', (0, _defineProperty2.default)({
|
122
205
|
class: 'fabric-text-color-mark',
|
206
|
+
// Editor common has a common style which uses this css variable as the value for
|
207
|
+
// the color property using the `fabric-text-color-mark` selector applied above.
|
123
208
|
style: "--custom-palette-color: ".concat(paletteColorValue)
|
124
209
|
}, 'data-text-custom-color', mark.attrs.color)];
|
125
210
|
}
|
@@ -4,9 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
5
5
|
value: true
|
6
6
|
});
|
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.getCellDomAttrs = exports.getCellAttrs = void 0;
|
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");
|
10
11
|
var _editorPalette = require("../../utils/editor-palette");
|
11
12
|
var _colors = require("../../utils/colors");
|
12
13
|
var _uuid = require("../../utils/uuid");
|
@@ -62,6 +63,55 @@ var getCellAttrs = function getCellAttrs(dom) {
|
|
62
63
|
};
|
63
64
|
};
|
64
65
|
exports.getCellAttrs = getCellAttrs;
|
66
|
+
/**
|
67
|
+
* This function is duplicated in @atlaskit/renderer
|
68
|
+
* it takes a color string, and if the color string is a hex or rgb value
|
69
|
+
* it will invert the color and return the inverted color.
|
70
|
+
*/
|
71
|
+
function invertCustomColor(customColor) {
|
72
|
+
var hex;
|
73
|
+
if ((0, _colors.isHex)(customColor)) {
|
74
|
+
hex = customColor;
|
75
|
+
} else if ((0, _colors.isRgb)(customColor)) {
|
76
|
+
hex = (0, _colors.rgbToHex)(customColor);
|
77
|
+
} else {
|
78
|
+
return customColor;
|
79
|
+
}
|
80
|
+
var hexWithoutHash = hex.replace('#', '');
|
81
|
+
|
82
|
+
// This inverts the hex color by
|
83
|
+
// 1. converting the hex code to a number
|
84
|
+
// 2. XORing it with 0xffffff
|
85
|
+
// 3. Converting the result back to hex
|
86
|
+
// 4. Removing the leading 1 from the result
|
87
|
+
return "#".concat((Number("0x1".concat(hexWithoutHash)) ^ 0xffffff).toString(16).substring(1).toUpperCase());
|
88
|
+
}
|
89
|
+
|
90
|
+
// these are for test only
|
91
|
+
var testGlobalTheme;
|
92
|
+
var setGlobalTheme = function setGlobalTheme(theme) {
|
93
|
+
testGlobalTheme = theme;
|
94
|
+
};
|
95
|
+
// This is a minimal duplication of the method from @atlaskit/tokens
|
96
|
+
// to minimise the number of dependencies required as these changes are expected
|
97
|
+
// to be patched onto CR8.
|
98
|
+
exports.setGlobalTheme = setGlobalTheme;
|
99
|
+
var getGlobalTheme = function getGlobalTheme() {
|
100
|
+
// This should only be hit during tests.
|
101
|
+
//
|
102
|
+
// At time of writing Jest mocks are not working in this repository.
|
103
|
+
if (testGlobalTheme) {
|
104
|
+
return {
|
105
|
+
colorMode: testGlobalTheme
|
106
|
+
};
|
107
|
+
}
|
108
|
+
var element = document.documentElement;
|
109
|
+
var colorMode = element.getAttribute('data-color-mode') || '';
|
110
|
+
return {
|
111
|
+
colorMode: colorMode
|
112
|
+
};
|
113
|
+
};
|
114
|
+
|
65
115
|
/**
|
66
116
|
* gets cell dom attributes based on node attributes
|
67
117
|
* @returns CellDomAttrs
|
@@ -90,8 +140,41 @@ var getCellDomAttrs = function getCellDomAttrs(node) {
|
|
90
140
|
attrs.style = '';
|
91
141
|
} else {
|
92
142
|
var color = (0, _colors.isRgb)(background) && (0, _colors.rgbToHex)(background) ? (0, _colors.rgbToHex)(background) : background;
|
93
|
-
|
94
|
-
|
143
|
+
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.dm-invert-tablecell-bgcolor_9fz6s')) {
|
144
|
+
/**
|
145
|
+
* The Editor supports users pasting content from external sources with custom table cell backgrounds and having those
|
146
|
+
* backgrounds persisted.
|
147
|
+
*
|
148
|
+
* This feature predates the introduction of dark mode.
|
149
|
+
*
|
150
|
+
* Without the inversion logic below, tokenised content (ie. text), can be hard to read when the user loads the page in dark mode.
|
151
|
+
*
|
152
|
+
* This introduces inversion of the presentation of the custom background color when the user is in dark mode.
|
153
|
+
*
|
154
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
155
|
+
* how we detect table cell background colors copied from external editor sources. Where we load the background color from a
|
156
|
+
* seperate attribute (data-cell-background), instead of the inline style.
|
157
|
+
*
|
158
|
+
* See the following document for more details on this behaviour
|
159
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2892247168/Unsupported+custom+table+cell+background+colors+in+dark+theme+Editor+Job+Story
|
160
|
+
*/
|
161
|
+
var tokenColor = (0, _editorPalette.hexToEditorBackgroundPaletteRawValue)(color);
|
162
|
+
if (tokenColor) {
|
163
|
+
attrs.style = "background-color: ".concat(tokenColor, ";");
|
164
|
+
} else {
|
165
|
+
// if we have a custom color, we need to check if we are in dark mode
|
166
|
+
if (getGlobalTheme().colorMode === 'dark') {
|
167
|
+
// if we have a custom color, we need to check if we are in dark mode
|
168
|
+
attrs.style = "background-color: ".concat(invertCustomColor(color), ";");
|
169
|
+
} else {
|
170
|
+
// if we are in light mode, we can just set the color
|
171
|
+
attrs.style = "background-color: ".concat(background, ";");
|
172
|
+
}
|
173
|
+
}
|
174
|
+
} else {
|
175
|
+
var _tokenColor = (0, _editorPalette.hexToEditorBackgroundPaletteRawValue)(color) || color;
|
176
|
+
attrs.style = "".concat(attrs.style || '', "background-color: ").concat(_tokenColor, ";");
|
177
|
+
}
|
95
178
|
|
96
179
|
/**
|
97
180
|
* Storing hex code in data-cell-background because
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import { hexToEditorTextPaletteColor } from '../../utils/editor-palette';
|
2
2
|
import { COLOR } from '../groups';
|
3
|
-
import { rgbToHex, N0, N80, P50, P300, P500, T75, T300, T500, G75, G300, G500, R75, R300, R500, Y75, Y200, Y400, B75, B100, B500 } from '../../utils/colors';
|
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';
|
4
5
|
|
5
6
|
/**
|
6
7
|
* @name textColor_mark
|
@@ -56,6 +57,54 @@ export const colorPalette = new Map();
|
|
56
57
|
/** @deprecated [ED-15849] The extended palette is now rolled into the main one. Use `colorPalette` instead. */
|
57
58
|
export const colorPaletteExtended = colorPalette;
|
58
59
|
colorArrayPalette.forEach(([color, label]) => colorPalette.set(color.toLowerCase(), label));
|
60
|
+
|
61
|
+
/**
|
62
|
+
* This function is duplicated in @atlaskit/renderer and ../nodes/tableNodes
|
63
|
+
* it takes a color string, and if the color string is a hex or rgb value
|
64
|
+
* it will invert the color and return the inverted color.
|
65
|
+
*/
|
66
|
+
function invertCustomColor(customColor) {
|
67
|
+
let hex;
|
68
|
+
if (isHex(customColor)) {
|
69
|
+
hex = customColor;
|
70
|
+
} else if (isRgb(customColor)) {
|
71
|
+
hex = rgbToHex(customColor);
|
72
|
+
} else {
|
73
|
+
return customColor;
|
74
|
+
}
|
75
|
+
const hexWithoutHash = hex.replace('#', '');
|
76
|
+
|
77
|
+
// This inverts the hex color by
|
78
|
+
// 1. converting the hex code to a number
|
79
|
+
// 2. XORing it with 0xffffff
|
80
|
+
// 3. Converting the result back to hex
|
81
|
+
// 4. Removing the leading 1 from the result
|
82
|
+
return `#${(Number(`0x1${hexWithoutHash}`) ^ 0xffffff).toString(16).substring(1).toUpperCase()}`;
|
83
|
+
}
|
84
|
+
|
85
|
+
// these are for test only
|
86
|
+
let testGlobalTheme;
|
87
|
+
export const setGlobalTheme = theme => {
|
88
|
+
testGlobalTheme = theme;
|
89
|
+
};
|
90
|
+
// This is a minimal duplication of the method from @atlaskit/tokens
|
91
|
+
// to minimise the number of dependencies required as these changes are expected
|
92
|
+
// to be patched onto CR8.
|
93
|
+
const getGlobalTheme = () => {
|
94
|
+
// This should only be hit during tests.
|
95
|
+
//
|
96
|
+
// At time of writing Jest mocks are not working in this repository.
|
97
|
+
if (testGlobalTheme) {
|
98
|
+
return {
|
99
|
+
colorMode: testGlobalTheme
|
100
|
+
};
|
101
|
+
}
|
102
|
+
const element = document.documentElement;
|
103
|
+
const colorMode = element.getAttribute('data-color-mode') || '';
|
104
|
+
return {
|
105
|
+
colorMode
|
106
|
+
};
|
107
|
+
};
|
59
108
|
export const textColor = {
|
60
109
|
attrs: {
|
61
110
|
color: {}
|
@@ -99,12 +148,47 @@ export const textColor = {
|
|
99
148
|
}
|
100
149
|
}],
|
101
150
|
toDOM(mark) {
|
151
|
+
let paletteColorValue;
|
102
152
|
// Note -- while there is no way to create custom colors using default tooling
|
103
153
|
// the editor does supported ad hoc color values -- and there may be content
|
104
154
|
// which has been migrated or created via apis which use such values.
|
105
|
-
|
155
|
+
if (getBooleanFF('platform.editor.dm-invert-text-color_cvho2')) {
|
156
|
+
/**
|
157
|
+
* The Editor persists custom text colors when content has been migrated from the old editor, or created via
|
158
|
+
* apis.
|
159
|
+
*
|
160
|
+
* This behaviour predates the introduction of dark mode.
|
161
|
+
*
|
162
|
+
* Without the inversion logic below, text with custom colors, can be hard to read when the user loads the page in dark mode.
|
163
|
+
*
|
164
|
+
* This introduces inversion of the presentation of the custom text colors when the user is in dark mode.
|
165
|
+
*
|
166
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
167
|
+
* how we detect text colors copied from external editor sources. Where we load the background color from a
|
168
|
+
* seperate attribute (data-text-custom-color), instead of the inline style.
|
169
|
+
*
|
170
|
+
* See the following document for more details on this behaviour
|
171
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2908658046/Unsupported+custom+text+colors+in+dark+theme+Editor+Job+Story
|
172
|
+
*/
|
173
|
+
const tokenColor = hexToEditorTextPaletteColor(mark.attrs.color);
|
174
|
+
if (tokenColor) {
|
175
|
+
paletteColorValue = hexToEditorTextPaletteColor(mark.attrs.color) || mark.attrs.color;
|
176
|
+
} else {
|
177
|
+
if (getGlobalTheme().colorMode === 'dark') {
|
178
|
+
// if we have a custom color, we need to check if we are in dark mode
|
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
|
+
}
|
184
|
+
}
|
185
|
+
} else {
|
186
|
+
paletteColorValue = hexToEditorTextPaletteColor(mark.attrs.color) || mark.attrs.color;
|
187
|
+
}
|
106
188
|
return ['span', {
|
107
189
|
class: 'fabric-text-color-mark',
|
190
|
+
// Editor common has a common style which uses this css variable as the value for
|
191
|
+
// the color property using the `fabric-text-color-mark` selector applied above.
|
108
192
|
style: `--custom-palette-color: ${paletteColorValue}`,
|
109
193
|
['data-text-custom-color']: mark.attrs.color
|
110
194
|
}];
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
1
2
|
import { hexToEditorBackgroundPaletteRawValue } from '../../utils/editor-palette';
|
2
3
|
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';
|
3
4
|
import { uuid } from '../../utils/uuid';
|
@@ -44,6 +45,54 @@ export const getCellAttrs = (dom, defaultValues = {}) => {
|
|
44
45
|
background: backgroundHexCode
|
45
46
|
};
|
46
47
|
};
|
48
|
+
/**
|
49
|
+
* This function is duplicated in @atlaskit/renderer
|
50
|
+
* it takes a color string, and if the color string is a hex or rgb value
|
51
|
+
* it will invert the color and return the inverted color.
|
52
|
+
*/
|
53
|
+
function invertCustomColor(customColor) {
|
54
|
+
let hex;
|
55
|
+
if (isHex(customColor)) {
|
56
|
+
hex = customColor;
|
57
|
+
} else if (isRgb(customColor)) {
|
58
|
+
hex = rgbToHex(customColor);
|
59
|
+
} else {
|
60
|
+
return customColor;
|
61
|
+
}
|
62
|
+
const hexWithoutHash = hex.replace('#', '');
|
63
|
+
|
64
|
+
// This inverts the hex color by
|
65
|
+
// 1. converting the hex code to a number
|
66
|
+
// 2. XORing it with 0xffffff
|
67
|
+
// 3. Converting the result back to hex
|
68
|
+
// 4. Removing the leading 1 from the result
|
69
|
+
return `#${(Number(`0x1${hexWithoutHash}`) ^ 0xffffff).toString(16).substring(1).toUpperCase()}`;
|
70
|
+
}
|
71
|
+
|
72
|
+
// these are for test only
|
73
|
+
let testGlobalTheme;
|
74
|
+
export const setGlobalTheme = theme => {
|
75
|
+
testGlobalTheme = theme;
|
76
|
+
};
|
77
|
+
// This is a minimal duplication of the method from @atlaskit/tokens
|
78
|
+
// to minimise the number of dependencies required as these changes are expected
|
79
|
+
// to be patched onto CR8.
|
80
|
+
const getGlobalTheme = () => {
|
81
|
+
// This should only be hit during tests.
|
82
|
+
//
|
83
|
+
// At time of writing Jest mocks are not working in this repository.
|
84
|
+
if (testGlobalTheme) {
|
85
|
+
return {
|
86
|
+
colorMode: testGlobalTheme
|
87
|
+
};
|
88
|
+
}
|
89
|
+
const element = document.documentElement;
|
90
|
+
const colorMode = element.getAttribute('data-color-mode') || '';
|
91
|
+
return {
|
92
|
+
colorMode
|
93
|
+
};
|
94
|
+
};
|
95
|
+
|
47
96
|
/**
|
48
97
|
* gets cell dom attributes based on node attributes
|
49
98
|
* @returns CellDomAttrs
|
@@ -74,8 +123,41 @@ export const getCellDomAttrs = node => {
|
|
74
123
|
attrs.style = '';
|
75
124
|
} else {
|
76
125
|
const color = isRgb(background) && rgbToHex(background) ? rgbToHex(background) : background;
|
77
|
-
|
78
|
-
|
126
|
+
if (getBooleanFF('platform.editor.dm-invert-tablecell-bgcolor_9fz6s')) {
|
127
|
+
/**
|
128
|
+
* The Editor supports users pasting content from external sources with custom table cell backgrounds and having those
|
129
|
+
* backgrounds persisted.
|
130
|
+
*
|
131
|
+
* This feature predates the introduction of dark mode.
|
132
|
+
*
|
133
|
+
* Without the inversion logic below, tokenised content (ie. text), can be hard to read when the user loads the page in dark mode.
|
134
|
+
*
|
135
|
+
* This introduces inversion of the presentation of the custom background color when the user is in dark mode.
|
136
|
+
*
|
137
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
138
|
+
* how we detect table cell background colors copied from external editor sources. Where we load the background color from a
|
139
|
+
* seperate attribute (data-cell-background), instead of the inline style.
|
140
|
+
*
|
141
|
+
* See the following document for more details on this behaviour
|
142
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2892247168/Unsupported+custom+table+cell+background+colors+in+dark+theme+Editor+Job+Story
|
143
|
+
*/
|
144
|
+
const tokenColor = hexToEditorBackgroundPaletteRawValue(color);
|
145
|
+
if (tokenColor) {
|
146
|
+
attrs.style = `background-color: ${tokenColor};`;
|
147
|
+
} else {
|
148
|
+
// if we have a custom color, we need to check if we are in dark mode
|
149
|
+
if (getGlobalTheme().colorMode === 'dark') {
|
150
|
+
// if we have a custom color, we need to check if we are in dark mode
|
151
|
+
attrs.style = `background-color: ${invertCustomColor(color)};`;
|
152
|
+
} else {
|
153
|
+
// if we are in light mode, we can just set the color
|
154
|
+
attrs.style = `background-color: ${background};`;
|
155
|
+
}
|
156
|
+
}
|
157
|
+
} else {
|
158
|
+
const tokenColor = hexToEditorBackgroundPaletteRawValue(color) || color;
|
159
|
+
attrs.style = `${attrs.style || ''}background-color: ${tokenColor};`;
|
160
|
+
}
|
79
161
|
|
80
162
|
/**
|
81
163
|
* Storing hex code in data-cell-background because
|
@@ -2,7 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
3
3
|
import { hexToEditorTextPaletteColor } from '../../utils/editor-palette';
|
4
4
|
import { COLOR } from '../groups';
|
5
|
-
import { rgbToHex, N0, N80, P50, P300, P500, T75, T300, T500, G75, G300, G500, R75, R300, R500, Y75, Y200, Y400, B75, B100, B500 } from '../../utils/colors';
|
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';
|
6
7
|
|
7
8
|
/**
|
8
9
|
* @name textColor_mark
|
@@ -63,6 +64,54 @@ colorArrayPalette.forEach(function (_ref) {
|
|
63
64
|
label = _ref2[1];
|
64
65
|
return colorPalette.set(color.toLowerCase(), label);
|
65
66
|
});
|
67
|
+
|
68
|
+
/**
|
69
|
+
* This function is duplicated in @atlaskit/renderer and ../nodes/tableNodes
|
70
|
+
* it takes a color string, and if the color string is a hex or rgb value
|
71
|
+
* it will invert the color and return the inverted color.
|
72
|
+
*/
|
73
|
+
function invertCustomColor(customColor) {
|
74
|
+
var hex;
|
75
|
+
if (isHex(customColor)) {
|
76
|
+
hex = customColor;
|
77
|
+
} else if (isRgb(customColor)) {
|
78
|
+
hex = rgbToHex(customColor);
|
79
|
+
} else {
|
80
|
+
return customColor;
|
81
|
+
}
|
82
|
+
var hexWithoutHash = hex.replace('#', '');
|
83
|
+
|
84
|
+
// This inverts the hex color by
|
85
|
+
// 1. converting the hex code to a number
|
86
|
+
// 2. XORing it with 0xffffff
|
87
|
+
// 3. Converting the result back to hex
|
88
|
+
// 4. Removing the leading 1 from the result
|
89
|
+
return "#".concat((Number("0x1".concat(hexWithoutHash)) ^ 0xffffff).toString(16).substring(1).toUpperCase());
|
90
|
+
}
|
91
|
+
|
92
|
+
// these are for test only
|
93
|
+
var testGlobalTheme;
|
94
|
+
export var setGlobalTheme = function setGlobalTheme(theme) {
|
95
|
+
testGlobalTheme = theme;
|
96
|
+
};
|
97
|
+
// This is a minimal duplication of the method from @atlaskit/tokens
|
98
|
+
// to minimise the number of dependencies required as these changes are expected
|
99
|
+
// to be patched onto CR8.
|
100
|
+
var getGlobalTheme = function getGlobalTheme() {
|
101
|
+
// This should only be hit during tests.
|
102
|
+
//
|
103
|
+
// At time of writing Jest mocks are not working in this repository.
|
104
|
+
if (testGlobalTheme) {
|
105
|
+
return {
|
106
|
+
colorMode: testGlobalTheme
|
107
|
+
};
|
108
|
+
}
|
109
|
+
var element = document.documentElement;
|
110
|
+
var colorMode = element.getAttribute('data-color-mode') || '';
|
111
|
+
return {
|
112
|
+
colorMode: colorMode
|
113
|
+
};
|
114
|
+
};
|
66
115
|
export var textColor = {
|
67
116
|
attrs: {
|
68
117
|
color: {}
|
@@ -106,12 +155,47 @@ export var textColor = {
|
|
106
155
|
}
|
107
156
|
}],
|
108
157
|
toDOM: function toDOM(mark) {
|
158
|
+
var paletteColorValue;
|
109
159
|
// Note -- while there is no way to create custom colors using default tooling
|
110
160
|
// the editor does supported ad hoc color values -- and there may be content
|
111
161
|
// which has been migrated or created via apis which use such values.
|
112
|
-
|
162
|
+
if (getBooleanFF('platform.editor.dm-invert-text-color_cvho2')) {
|
163
|
+
/**
|
164
|
+
* The Editor persists custom text colors when content has been migrated from the old editor, or created via
|
165
|
+
* apis.
|
166
|
+
*
|
167
|
+
* This behaviour predates the introduction of dark mode.
|
168
|
+
*
|
169
|
+
* Without the inversion logic below, text with custom colors, can be hard to read when the user loads the page in dark mode.
|
170
|
+
*
|
171
|
+
* This introduces inversion of the presentation of the custom text colors when the user is in dark mode.
|
172
|
+
*
|
173
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
174
|
+
* how we detect text colors copied from external editor sources. Where we load the background color from a
|
175
|
+
* seperate attribute (data-text-custom-color), instead of the inline style.
|
176
|
+
*
|
177
|
+
* See the following document for more details on this behaviour
|
178
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2908658046/Unsupported+custom+text+colors+in+dark+theme+Editor+Job+Story
|
179
|
+
*/
|
180
|
+
var tokenColor = hexToEditorTextPaletteColor(mark.attrs.color);
|
181
|
+
if (tokenColor) {
|
182
|
+
paletteColorValue = hexToEditorTextPaletteColor(mark.attrs.color) || mark.attrs.color;
|
183
|
+
} else {
|
184
|
+
if (getGlobalTheme().colorMode === 'dark') {
|
185
|
+
// if we have a custom color, we need to check if we are in dark mode
|
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
|
+
}
|
191
|
+
}
|
192
|
+
} else {
|
193
|
+
paletteColorValue = hexToEditorTextPaletteColor(mark.attrs.color) || mark.attrs.color;
|
194
|
+
}
|
113
195
|
return ['span', _defineProperty({
|
114
196
|
class: 'fabric-text-color-mark',
|
197
|
+
// Editor common has a common style which uses this css variable as the value for
|
198
|
+
// the color property using the `fabric-text-color-mark` selector applied above.
|
115
199
|
style: "--custom-palette-color: ".concat(paletteColorValue)
|
116
200
|
}, 'data-text-custom-color', mark.attrs.color)];
|
117
201
|
}
|
@@ -2,6 +2,7 @@ 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';
|
5
6
|
import { hexToEditorBackgroundPaletteRawValue } from '../../utils/editor-palette';
|
6
7
|
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';
|
7
8
|
import { uuid } from '../../utils/uuid';
|
@@ -49,6 +50,54 @@ export var getCellAttrs = function getCellAttrs(dom) {
|
|
49
50
|
background: backgroundHexCode
|
50
51
|
};
|
51
52
|
};
|
53
|
+
/**
|
54
|
+
* This function is duplicated in @atlaskit/renderer
|
55
|
+
* it takes a color string, and if the color string is a hex or rgb value
|
56
|
+
* it will invert the color and return the inverted color.
|
57
|
+
*/
|
58
|
+
function invertCustomColor(customColor) {
|
59
|
+
var hex;
|
60
|
+
if (isHex(customColor)) {
|
61
|
+
hex = customColor;
|
62
|
+
} else if (isRgb(customColor)) {
|
63
|
+
hex = rgbToHex(customColor);
|
64
|
+
} else {
|
65
|
+
return customColor;
|
66
|
+
}
|
67
|
+
var hexWithoutHash = hex.replace('#', '');
|
68
|
+
|
69
|
+
// This inverts the hex color by
|
70
|
+
// 1. converting the hex code to a number
|
71
|
+
// 2. XORing it with 0xffffff
|
72
|
+
// 3. Converting the result back to hex
|
73
|
+
// 4. Removing the leading 1 from the result
|
74
|
+
return "#".concat((Number("0x1".concat(hexWithoutHash)) ^ 0xffffff).toString(16).substring(1).toUpperCase());
|
75
|
+
}
|
76
|
+
|
77
|
+
// these are for test only
|
78
|
+
var testGlobalTheme;
|
79
|
+
export var setGlobalTheme = function setGlobalTheme(theme) {
|
80
|
+
testGlobalTheme = theme;
|
81
|
+
};
|
82
|
+
// This is a minimal duplication of the method from @atlaskit/tokens
|
83
|
+
// to minimise the number of dependencies required as these changes are expected
|
84
|
+
// to be patched onto CR8.
|
85
|
+
var getGlobalTheme = function getGlobalTheme() {
|
86
|
+
// This should only be hit during tests.
|
87
|
+
//
|
88
|
+
// At time of writing Jest mocks are not working in this repository.
|
89
|
+
if (testGlobalTheme) {
|
90
|
+
return {
|
91
|
+
colorMode: testGlobalTheme
|
92
|
+
};
|
93
|
+
}
|
94
|
+
var element = document.documentElement;
|
95
|
+
var colorMode = element.getAttribute('data-color-mode') || '';
|
96
|
+
return {
|
97
|
+
colorMode: colorMode
|
98
|
+
};
|
99
|
+
};
|
100
|
+
|
52
101
|
/**
|
53
102
|
* gets cell dom attributes based on node attributes
|
54
103
|
* @returns CellDomAttrs
|
@@ -77,8 +126,41 @@ export var getCellDomAttrs = function getCellDomAttrs(node) {
|
|
77
126
|
attrs.style = '';
|
78
127
|
} else {
|
79
128
|
var color = isRgb(background) && rgbToHex(background) ? rgbToHex(background) : background;
|
80
|
-
|
81
|
-
|
129
|
+
if (getBooleanFF('platform.editor.dm-invert-tablecell-bgcolor_9fz6s')) {
|
130
|
+
/**
|
131
|
+
* The Editor supports users pasting content from external sources with custom table cell backgrounds and having those
|
132
|
+
* backgrounds persisted.
|
133
|
+
*
|
134
|
+
* This feature predates the introduction of dark mode.
|
135
|
+
*
|
136
|
+
* Without the inversion logic below, tokenised content (ie. text), can be hard to read when the user loads the page in dark mode.
|
137
|
+
*
|
138
|
+
* This introduces inversion of the presentation of the custom background color when the user is in dark mode.
|
139
|
+
*
|
140
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
141
|
+
* how we detect table cell background colors copied from external editor sources. Where we load the background color from a
|
142
|
+
* seperate attribute (data-cell-background), instead of the inline style.
|
143
|
+
*
|
144
|
+
* See the following document for more details on this behaviour
|
145
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2892247168/Unsupported+custom+table+cell+background+colors+in+dark+theme+Editor+Job+Story
|
146
|
+
*/
|
147
|
+
var tokenColor = hexToEditorBackgroundPaletteRawValue(color);
|
148
|
+
if (tokenColor) {
|
149
|
+
attrs.style = "background-color: ".concat(tokenColor, ";");
|
150
|
+
} else {
|
151
|
+
// if we have a custom color, we need to check if we are in dark mode
|
152
|
+
if (getGlobalTheme().colorMode === 'dark') {
|
153
|
+
// if we have a custom color, we need to check if we are in dark mode
|
154
|
+
attrs.style = "background-color: ".concat(invertCustomColor(color), ";");
|
155
|
+
} else {
|
156
|
+
// if we are in light mode, we can just set the color
|
157
|
+
attrs.style = "background-color: ".concat(background, ";");
|
158
|
+
}
|
159
|
+
}
|
160
|
+
} else {
|
161
|
+
var _tokenColor = hexToEditorBackgroundPaletteRawValue(color) || color;
|
162
|
+
attrs.style = "".concat(attrs.style || '', "background-color: ").concat(_tokenColor, ";");
|
163
|
+
}
|
82
164
|
|
83
165
|
/**
|
84
166
|
* Storing hex code in data-cell-background because
|
@@ -19,4 +19,5 @@ export type TextColorKey = 'Light gray' | 'Purple' | 'Teal' | 'Green' | 'Red' |
|
|
19
19
|
export declare const colorPalette: Map<string, TextColorKey>;
|
20
20
|
/** @deprecated [ED-15849] The extended palette is now rolled into the main one. Use `colorPalette` instead. */
|
21
21
|
export declare const colorPaletteExtended: Map<string, TextColorKey>;
|
22
|
+
export declare const setGlobalTheme: (theme: string) => void;
|
22
23
|
export declare const textColor: MarkSpec;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@atlaskit/adf-schema",
|
3
|
-
"version": "33.
|
3
|
+
"version": "33.1.0",
|
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,6 +34,7 @@
|
|
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",
|
37
38
|
"@babel/runtime": "^7.0.0",
|
38
39
|
"css-color-names": "0.0.4",
|
39
40
|
"linkify-it": "^2.0.3",
|
@@ -41,6 +42,7 @@
|
|
41
42
|
},
|
42
43
|
"devDependencies": {
|
43
44
|
"@atlassian/adf-schema-json": "^1.2.0",
|
45
|
+
"@atlassian/feature-flags-test-utils": "^0.1.2",
|
44
46
|
"@babel/cli": "^7.22.9",
|
45
47
|
"@babel/core": "^7.22.9",
|
46
48
|
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
@@ -68,5 +70,13 @@
|
|
68
70
|
"styled-components": "^3.2.6",
|
69
71
|
"ts-jest": "^29.1.1",
|
70
72
|
"typescript": "~4.9.5"
|
73
|
+
},
|
74
|
+
"platform-feature-flags": {
|
75
|
+
"platform.editor.dm-invert-tablecell-bgcolor_9fz6s": {
|
76
|
+
"type": "boolean"
|
77
|
+
},
|
78
|
+
"platform.editor.dm-invert-text-color_cvho2": {
|
79
|
+
"type": "boolean"
|
80
|
+
}
|
71
81
|
}
|
72
82
|
}
|