@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 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
- var paletteColorValue = (0, _editorPalette.hexToEditorTextPaletteColor)(mark.attrs.color) || mark.attrs.color;
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
- var tokenColor = (0, _editorPalette.hexToEditorBackgroundPaletteRawValue)(color) || color;
94
- attrs.style = "".concat(attrs.style || '', "background-color: ").concat(tokenColor, ";");
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
- const paletteColorValue = hexToEditorTextPaletteColor(mark.attrs.color) || mark.attrs.color;
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
- const tokenColor = hexToEditorBackgroundPaletteRawValue(color) || color;
78
- attrs.style = `${attrs.style || ''}background-color: ${tokenColor};`;
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
- var paletteColorValue = hexToEditorTextPaletteColor(mark.attrs.color) || mark.attrs.color;
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
- var tokenColor = hexToEditorBackgroundPaletteRawValue(color) || color;
81
- attrs.style = "".concat(attrs.style || '', "background-color: ").concat(tokenColor, ";");
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;
@@ -42,6 +42,7 @@ export type CellDomAttrs = {
42
42
  'data-cell-background'?: string;
43
43
  class?: string;
44
44
  };
45
+ export declare const setGlobalTheme: (theme: string) => void;
45
46
  /**
46
47
  * gets cell dom attributes based on node attributes
47
48
  * @returns CellDomAttrs
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/adf-schema",
3
- "version": "33.0.0",
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
  }