@atlaskit/renderer 108.15.14 → 108.15.16
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 +14 -0
- package/dist/cjs/i18n/da.js +6 -1
- package/dist/cjs/i18n/de.js +6 -1
- package/dist/cjs/i18n/es.js +6 -1
- package/dist/cjs/i18n/fr.js +6 -1
- package/dist/cjs/i18n/hu.js +6 -1
- package/dist/cjs/i18n/it.js +6 -1
- package/dist/cjs/i18n/ko.js +6 -1
- package/dist/cjs/i18n/nb.js +6 -1
- package/dist/cjs/i18n/nl.js +6 -1
- package/dist/cjs/i18n/pl.js +6 -1
- package/dist/cjs/i18n/sv.js +6 -1
- package/dist/cjs/i18n/th.js +6 -1
- package/dist/cjs/i18n/tr.js +6 -1
- package/dist/cjs/i18n/uk.js +1 -1
- package/dist/cjs/i18n/vi.js +6 -1
- package/dist/cjs/i18n/zh.js +6 -1
- package/dist/cjs/i18n/zh_TW.js +6 -1
- package/dist/cjs/react/marks/textColor.js +64 -1
- package/dist/cjs/react/nodes/mediaInline.js +2 -2
- package/dist/cjs/react/nodes/tableCell.js +175 -133
- package/dist/cjs/ui/MediaCard.js +2 -2
- package/dist/cjs/ui/Renderer/index.js +1 -1
- package/dist/cjs/ui/Renderer/style.js +1 -1
- package/dist/es2019/i18n/da.js +6 -1
- package/dist/es2019/i18n/de.js +6 -1
- package/dist/es2019/i18n/es.js +6 -1
- package/dist/es2019/i18n/fr.js +6 -1
- package/dist/es2019/i18n/hu.js +6 -1
- package/dist/es2019/i18n/it.js +6 -1
- package/dist/es2019/i18n/ko.js +6 -1
- package/dist/es2019/i18n/nb.js +6 -1
- package/dist/es2019/i18n/nl.js +6 -1
- package/dist/es2019/i18n/pl.js +6 -1
- package/dist/es2019/i18n/sv.js +6 -1
- package/dist/es2019/i18n/th.js +6 -1
- package/dist/es2019/i18n/tr.js +6 -1
- package/dist/es2019/i18n/uk.js +1 -1
- package/dist/es2019/i18n/vi.js +6 -1
- package/dist/es2019/i18n/zh.js +6 -1
- package/dist/es2019/i18n/zh_TW.js +6 -1
- package/dist/es2019/react/marks/textColor.js +65 -1
- package/dist/es2019/react/nodes/mediaInline.js +1 -1
- package/dist/es2019/react/nodes/tableCell.js +180 -106
- package/dist/es2019/ui/MediaCard.js +1 -1
- package/dist/es2019/ui/Renderer/index.js +1 -1
- package/dist/es2019/ui/Renderer/style.js +4 -2
- package/dist/esm/i18n/da.js +6 -1
- package/dist/esm/i18n/de.js +6 -1
- package/dist/esm/i18n/es.js +6 -1
- package/dist/esm/i18n/fr.js +6 -1
- package/dist/esm/i18n/hu.js +6 -1
- package/dist/esm/i18n/it.js +6 -1
- package/dist/esm/i18n/ko.js +6 -1
- package/dist/esm/i18n/nb.js +6 -1
- package/dist/esm/i18n/nl.js +6 -1
- package/dist/esm/i18n/pl.js +6 -1
- package/dist/esm/i18n/sv.js +6 -1
- package/dist/esm/i18n/th.js +6 -1
- package/dist/esm/i18n/tr.js +6 -1
- package/dist/esm/i18n/uk.js +1 -1
- package/dist/esm/i18n/vi.js +6 -1
- package/dist/esm/i18n/zh.js +6 -1
- package/dist/esm/i18n/zh_TW.js +6 -1
- package/dist/esm/react/marks/textColor.js +64 -1
- package/dist/esm/react/nodes/mediaInline.js +1 -1
- package/dist/esm/react/nodes/tableCell.js +177 -135
- package/dist/esm/ui/MediaCard.js +1 -1
- package/dist/esm/ui/Renderer/index.js +1 -1
- package/dist/esm/ui/Renderer/style.js +1 -1
- package/dist/types/i18n/da.d.ts +5 -0
- package/dist/types/i18n/de.d.ts +5 -0
- package/dist/types/i18n/es.d.ts +5 -0
- package/dist/types/i18n/fr.d.ts +5 -0
- package/dist/types/i18n/hu.d.ts +5 -0
- package/dist/types/i18n/it.d.ts +5 -0
- package/dist/types/i18n/ko.d.ts +5 -0
- package/dist/types/i18n/nb.d.ts +5 -0
- package/dist/types/i18n/nl.d.ts +5 -0
- package/dist/types/i18n/pl.d.ts +5 -0
- package/dist/types/i18n/sv.d.ts +5 -0
- package/dist/types/i18n/th.d.ts +5 -0
- package/dist/types/i18n/tr.d.ts +5 -0
- package/dist/types/i18n/vi.d.ts +5 -0
- package/dist/types/i18n/zh.d.ts +5 -0
- package/dist/types/i18n/zh_TW.d.ts +5 -0
- package/dist/types/react/marks/textColor.d.ts +2 -2
- package/dist/types/react/nodes/mediaInline.d.ts +7 -7
- package/dist/types/react/nodes/tableCell.d.ts +5 -62
- package/dist/types-ts4.5/i18n/da.d.ts +5 -0
- package/dist/types-ts4.5/i18n/de.d.ts +5 -0
- package/dist/types-ts4.5/i18n/es.d.ts +5 -0
- package/dist/types-ts4.5/i18n/fr.d.ts +5 -0
- package/dist/types-ts4.5/i18n/hu.d.ts +5 -0
- package/dist/types-ts4.5/i18n/it.d.ts +5 -0
- package/dist/types-ts4.5/i18n/ko.d.ts +5 -0
- package/dist/types-ts4.5/i18n/nb.d.ts +5 -0
- package/dist/types-ts4.5/i18n/nl.d.ts +5 -0
- package/dist/types-ts4.5/i18n/pl.d.ts +5 -0
- package/dist/types-ts4.5/i18n/sv.d.ts +5 -0
- package/dist/types-ts4.5/i18n/th.d.ts +5 -0
- package/dist/types-ts4.5/i18n/tr.d.ts +5 -0
- package/dist/types-ts4.5/i18n/vi.d.ts +5 -0
- package/dist/types-ts4.5/i18n/zh.d.ts +5 -0
- package/dist/types-ts4.5/i18n/zh_TW.d.ts +5 -0
- package/dist/types-ts4.5/react/marks/textColor.d.ts +2 -2
- package/dist/types-ts4.5/react/nodes/mediaInline.d.ts +7 -7
- package/dist/types-ts4.5/react/nodes/tableCell.d.ts +5 -62
- package/package.json +16 -9
|
@@ -1,11 +1,75 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import React, { useMemo } from 'react';
|
|
3
|
+
import { isHex, isRgb, rgbToHex } from '@atlaskit/adf-schema';
|
|
3
4
|
import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
|
|
5
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
6
|
+
import { useThemeObserver } from '@atlaskit/tokens';
|
|
7
|
+
/**
|
|
8
|
+
* This function is duplicated in
|
|
9
|
+
* - @atlaskit/adf-schema
|
|
10
|
+
* - ../nodes/tableCell.tsx
|
|
11
|
+
* it takes a color string, and if the color string is a hex or rgb value
|
|
12
|
+
* it will invert the color and return the inverted color.
|
|
13
|
+
*/
|
|
14
|
+
function invertCustomColor(customColor) {
|
|
15
|
+
let hex;
|
|
16
|
+
if (isHex(customColor)) {
|
|
17
|
+
hex = customColor;
|
|
18
|
+
} else if (isRgb(customColor)) {
|
|
19
|
+
hex = rgbToHex(customColor);
|
|
20
|
+
} else {
|
|
21
|
+
return customColor;
|
|
22
|
+
}
|
|
23
|
+
const hexWithoutHash = hex.replace('#', '');
|
|
24
|
+
|
|
25
|
+
// This inverts the hex color by
|
|
26
|
+
// 1. converting the hex code to a number
|
|
27
|
+
// 2. XORing it with 0xffffff
|
|
28
|
+
// 3. Converting the result back to hex
|
|
29
|
+
// 4. Removing the leading 1 from the result
|
|
30
|
+
return `#${(Number(`0x1${hexWithoutHash}`) ^ 0xffffff).toString(16).substring(1).toUpperCase()}`;
|
|
31
|
+
}
|
|
4
32
|
export default function TextColor(props) {
|
|
33
|
+
const {
|
|
34
|
+
colorMode
|
|
35
|
+
} = useThemeObserver();
|
|
5
36
|
// Note -- while there is no way to create custom colors using default tooling
|
|
6
37
|
// the editor does supported ad hoc color values -- and there may be content
|
|
7
38
|
// which has been migrated or created via apis which use such values.
|
|
8
|
-
|
|
39
|
+
let paletteColorValue;
|
|
40
|
+
if (getBooleanFF('platform.editor.dm-invert-text-color_cvho2')) {
|
|
41
|
+
/**
|
|
42
|
+
* The Editor persists custom text colors when content has been migrated from the old editor, or created via
|
|
43
|
+
* apis.
|
|
44
|
+
*
|
|
45
|
+
* This behaviour predates the introduction of dark mode.
|
|
46
|
+
*
|
|
47
|
+
* Without the inversion logic below, text with custom colors, can be hard to read when the user loads the page in dark mode.
|
|
48
|
+
*
|
|
49
|
+
* This introduces inversion of the presentation of the custom text colors when the user is in dark mode.
|
|
50
|
+
*
|
|
51
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
|
52
|
+
* how we detect text colors copied from external editor sources. Where we load the background color from a
|
|
53
|
+
* seperate attribute (data-text-custom-color), instead of the inline style.
|
|
54
|
+
*
|
|
55
|
+
* See the following document for more details on this behaviour
|
|
56
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2908658046/Unsupported+custom+text+colors+in+dark+theme+Editor+Job+Story
|
|
57
|
+
*/
|
|
58
|
+
const tokenColor = hexToEditorTextPaletteColor(props.color);
|
|
59
|
+
if (tokenColor) {
|
|
60
|
+
paletteColorValue = hexToEditorTextPaletteColor(props.color) || props.color;
|
|
61
|
+
} else {
|
|
62
|
+
if (colorMode === 'dark') {
|
|
63
|
+
// if we have a custom color, we need to check if we are in dark mode
|
|
64
|
+
paletteColorValue = invertCustomColor(props.color);
|
|
65
|
+
} else {
|
|
66
|
+
// if we are in light mode, we can just set the color
|
|
67
|
+
paletteColorValue = props.color;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
} else {
|
|
71
|
+
paletteColorValue = hexToEditorTextPaletteColor(props.color) || props.color;
|
|
72
|
+
}
|
|
9
73
|
const style = useMemo(() => ({
|
|
10
74
|
['--custom-palette-color']: paletteColorValue
|
|
11
75
|
}), [paletteColorValue]);
|
|
@@ -3,7 +3,7 @@ import React, { useEffect, useState, useCallback } from 'react';
|
|
|
3
3
|
import { MediaInlineCard } from '@atlaskit/media-card';
|
|
4
4
|
import { MediaInlineCardErroredView, MediaInlineCardLoadingView, messages } from '@atlaskit/media-ui';
|
|
5
5
|
import { WithProviders } from '@atlaskit/editor-common/provider-factory';
|
|
6
|
-
import { getMediaClient } from '@atlaskit/media-client';
|
|
6
|
+
import { getMediaClient } from '@atlaskit/media-client-react';
|
|
7
7
|
import { getClipboardAttrs, mediaIdentifierMap } from '../../ui/MediaCard';
|
|
8
8
|
import { createIntl, injectIntl } from 'react-intl-next';
|
|
9
9
|
export const RenderMediaInline = ({
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
2
|
import React from 'react';
|
|
4
|
-
import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
|
|
5
|
-
import {
|
|
3
|
+
import { isHex, isRgb, rgbToHex, tableBackgroundColorPalette } from '@atlaskit/adf-schema';
|
|
4
|
+
import { useThemeObserver } from '@atlaskit/tokens';
|
|
6
5
|
import { SortOrder } from '@atlaskit/editor-common/types';
|
|
7
6
|
import { hexToEditorBackgroundPaletteRawValue } from '@atlaskit/editor-palette';
|
|
7
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
8
8
|
import SortingIcon from '../../ui/SortingIcon';
|
|
9
9
|
import { MODE, PLATFORM } from '../../analytics/events';
|
|
10
10
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
11
11
|
import { RendererCssClassName } from '../../consts';
|
|
12
|
-
import {
|
|
12
|
+
import { useIntl } from 'react-intl-next';
|
|
13
13
|
import { tableCellMessages } from '../../messages';
|
|
14
14
|
const IgnoreSorting = ['LABEL', 'INPUT'];
|
|
15
15
|
const nextStatusOrder = currentSortOrder => {
|
|
@@ -64,13 +64,77 @@ const getDataAttributes = (colwidth, background) => {
|
|
|
64
64
|
}
|
|
65
65
|
return attrs;
|
|
66
66
|
};
|
|
67
|
-
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* This function is duplicated in
|
|
70
|
+
* - @atlaskit/adf-schema
|
|
71
|
+
* - ../marks/textColor.tsx
|
|
72
|
+
* it takes a color string, and if the color string is a hex or rgb value
|
|
73
|
+
* it will invert the color and return the inverted color.
|
|
74
|
+
*/
|
|
75
|
+
function invertCustomColor(customColor) {
|
|
76
|
+
let hex;
|
|
77
|
+
if (isHex(customColor)) {
|
|
78
|
+
hex = customColor;
|
|
79
|
+
} else if (isRgb(customColor)) {
|
|
80
|
+
hex = rgbToHex(customColor);
|
|
81
|
+
} else {
|
|
82
|
+
return customColor;
|
|
83
|
+
}
|
|
84
|
+
const hexWithoutHash = hex.replace('#', '');
|
|
85
|
+
|
|
86
|
+
// This inverts the hex color by
|
|
87
|
+
// 1. converting the hex code to a number
|
|
88
|
+
// 2. XORing it with 0xffffff
|
|
89
|
+
// 3. Converting the result back to hex
|
|
90
|
+
// 4. Removing the leading 1 from the result
|
|
91
|
+
return `#${(Number(`0x1${hexWithoutHash}`) ^ 0xffffff).toString(16).substring(1).toUpperCase()}`;
|
|
92
|
+
}
|
|
93
|
+
const getStyle = ({
|
|
94
|
+
background,
|
|
95
|
+
colGroupWidth,
|
|
96
|
+
offsetTop,
|
|
97
|
+
colorMode
|
|
98
|
+
}) => {
|
|
68
99
|
const style = {};
|
|
69
100
|
if (background &&
|
|
70
101
|
// ignore setting inline styles if ds neutral token is detected
|
|
71
102
|
!background.includes('--ds-background-neutral')) {
|
|
72
|
-
|
|
73
|
-
|
|
103
|
+
if (getBooleanFF('platform.editor.dm-invert-tablecell-bgcolor_9fz6s')) {
|
|
104
|
+
/**
|
|
105
|
+
* The Editor supports users pasting content from external sources with custom table cell backgrounds and having those
|
|
106
|
+
* backgrounds persisted.
|
|
107
|
+
*
|
|
108
|
+
* This feature predates the introduction of dark mode.
|
|
109
|
+
*
|
|
110
|
+
* Without the inversion logic below, tokenised content (ie. text), can be hard to read when the user loads the page in dark mode.
|
|
111
|
+
*
|
|
112
|
+
* This introduces inversion of the presentation of the custom background color when the user is in dark mode.
|
|
113
|
+
*
|
|
114
|
+
* This can be done without additional changes to account for users copying and pasting content inside the Editor, because of
|
|
115
|
+
* how we detect table cell background colors copied from external editor sources. Where we load the background color from a
|
|
116
|
+
* seperate attribute (data-cell-background), instead of the inline style.
|
|
117
|
+
*
|
|
118
|
+
* See the following document for more details on this behaviour
|
|
119
|
+
* https://hello.atlassian.net/wiki/spaces/CCECO/pages/2892247168/Unsupported+custom+table+cell+background+colors+in+dark+theme+Editor+Job+Story
|
|
120
|
+
*/
|
|
121
|
+
const tokenColor = hexToEditorBackgroundPaletteRawValue(background);
|
|
122
|
+
if (tokenColor) {
|
|
123
|
+
style.backgroundColor = tokenColor;
|
|
124
|
+
} else {
|
|
125
|
+
// if we have a custom color, we need to check if we are in dark mode
|
|
126
|
+
if (colorMode === 'dark') {
|
|
127
|
+
// if we are in dark mode, we need to invert the color
|
|
128
|
+
style.backgroundColor = invertCustomColor(background);
|
|
129
|
+
} else {
|
|
130
|
+
// if we are in light mode, we can just set the color
|
|
131
|
+
style.backgroundColor = background;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
} else {
|
|
135
|
+
const tokenColor = hexToEditorBackgroundPaletteRawValue(background) || background;
|
|
136
|
+
style.backgroundColor = tokenColor;
|
|
137
|
+
}
|
|
74
138
|
}
|
|
75
139
|
if (colGroupWidth) {
|
|
76
140
|
style.width = colGroupWidth;
|
|
@@ -81,113 +145,123 @@ const getStyle = (background, colGroupWidth, offsetTop) => {
|
|
|
81
145
|
}
|
|
82
146
|
return style;
|
|
83
147
|
};
|
|
84
|
-
const
|
|
85
|
-
return
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
148
|
+
const getWithCellProps = WrapperComponent => {
|
|
149
|
+
return function WithCellProps(props) {
|
|
150
|
+
const {
|
|
151
|
+
colorMode
|
|
152
|
+
} = useThemeObserver();
|
|
153
|
+
const {
|
|
154
|
+
children,
|
|
155
|
+
className,
|
|
156
|
+
onClick,
|
|
157
|
+
colwidth,
|
|
158
|
+
colGroupWidth,
|
|
159
|
+
rowspan,
|
|
160
|
+
colspan,
|
|
161
|
+
background,
|
|
162
|
+
offsetTop,
|
|
163
|
+
ariaSort
|
|
164
|
+
} = props;
|
|
165
|
+
|
|
166
|
+
// This is used to set the background color of the cell
|
|
167
|
+
// to a dark mode color in mobile dark mode
|
|
168
|
+
const colorName = background ? tableBackgroundColorPalette.get(background) : '';
|
|
169
|
+
return /*#__PURE__*/React.createElement(WrapperComponent, _extends({
|
|
170
|
+
rowSpan: rowspan,
|
|
171
|
+
colSpan: colspan
|
|
172
|
+
// Note: When content from a renderer is pasted into an editor
|
|
173
|
+
// the background color is not taken from the inline style.
|
|
174
|
+
// Instead it is taken from the data-cell-background attribute
|
|
175
|
+
// (added via getDataAttributes below).
|
|
176
|
+
,
|
|
177
|
+
style: getStyle({
|
|
95
178
|
background,
|
|
179
|
+
colGroupWidth,
|
|
96
180
|
offsetTop,
|
|
97
|
-
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
onClick: onClick,
|
|
106
|
-
className: className
|
|
107
|
-
}, getDataAttributes(colwidth, background), {
|
|
108
|
-
"aria-sort": ariaSort
|
|
109
|
-
}), children);
|
|
110
|
-
}
|
|
181
|
+
colorMode
|
|
182
|
+
}),
|
|
183
|
+
colorname: colorName,
|
|
184
|
+
onClick: onClick,
|
|
185
|
+
className: className
|
|
186
|
+
}, getDataAttributes(colwidth, background), {
|
|
187
|
+
"aria-sort": ariaSort
|
|
188
|
+
}), children);
|
|
111
189
|
};
|
|
112
190
|
};
|
|
191
|
+
const TH = getWithCellProps('th');
|
|
113
192
|
export const withSortableColumn = WrapperComponent => {
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
fireAnalyticsEvent && fireAnalyticsEvent({
|
|
151
|
-
action: ACTION.SORT_COLUMN_NOT_ALLOWED,
|
|
152
|
-
actionSubject: ACTION_SUBJECT.TABLE,
|
|
153
|
-
attributes: {
|
|
154
|
-
platform: PLATFORM.WEB,
|
|
155
|
-
mode: MODE.RENDERER
|
|
156
|
-
},
|
|
157
|
-
eventType: EVENT_TYPE.TRACK
|
|
158
|
-
});
|
|
159
|
-
}
|
|
160
|
-
});
|
|
193
|
+
return function THWithSortableColumn(props) {
|
|
194
|
+
const intl = useIntl();
|
|
195
|
+
const {
|
|
196
|
+
allowColumnSorting,
|
|
197
|
+
onSorting,
|
|
198
|
+
children,
|
|
199
|
+
sortOrdered,
|
|
200
|
+
isHeaderRow
|
|
201
|
+
} = props;
|
|
202
|
+
const sortOrderedClassName = sortOrdered === SortOrder.NO_ORDER ? RendererCssClassName.SORTABLE_COLUMN_NO_ORDER : '';
|
|
203
|
+
if (!allowColumnSorting || !isHeaderRow) {
|
|
204
|
+
return /*#__PURE__*/React.createElement(WrapperComponent, props);
|
|
205
|
+
}
|
|
206
|
+
return /*#__PURE__*/React.createElement(WrapperComponent, _extends({}, props, {
|
|
207
|
+
className: RendererCssClassName.SORTABLE_COLUMN_WRAPPER,
|
|
208
|
+
ariaSort: getSortOrderLabel(intl, sortOrdered)
|
|
209
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
210
|
+
className: RendererCssClassName.SORTABLE_COLUMN
|
|
211
|
+
}, children, /*#__PURE__*/React.createElement("figure", {
|
|
212
|
+
className: `${RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER} ${sortOrderedClassName}`
|
|
213
|
+
}, /*#__PURE__*/React.createElement(SortingIcon, {
|
|
214
|
+
isSortingAllowed: !!onSorting,
|
|
215
|
+
sortOrdered: sortOrdered,
|
|
216
|
+
onClick: sort,
|
|
217
|
+
onKeyDown: onKeyPress
|
|
218
|
+
}))));
|
|
219
|
+
function onKeyPress(event) {
|
|
220
|
+
const keys = [' ', 'Enter', 'Spacebar'];
|
|
221
|
+
const {
|
|
222
|
+
tagName
|
|
223
|
+
} = event.target;
|
|
224
|
+
// trigger sorting if space or enter are clicked but not when in an input field (template variables)
|
|
225
|
+
if (keys.includes(event.key) && !IgnoreSorting.includes(tagName)) {
|
|
226
|
+
event.preventDefault();
|
|
227
|
+
sort();
|
|
228
|
+
}
|
|
161
229
|
}
|
|
162
|
-
|
|
230
|
+
function sort() {
|
|
163
231
|
const {
|
|
164
|
-
|
|
232
|
+
fireAnalyticsEvent,
|
|
165
233
|
onSorting,
|
|
166
|
-
|
|
167
|
-
sortOrdered
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
234
|
+
columnIndex,
|
|
235
|
+
sortOrdered
|
|
236
|
+
} = props;
|
|
237
|
+
if (onSorting && columnIndex != null) {
|
|
238
|
+
const sortOrder = nextStatusOrder(sortOrdered);
|
|
239
|
+
onSorting(columnIndex, sortOrder);
|
|
240
|
+
fireAnalyticsEvent && fireAnalyticsEvent({
|
|
241
|
+
action: ACTION.SORT_COLUMN,
|
|
242
|
+
actionSubject: ACTION_SUBJECT.TABLE,
|
|
243
|
+
attributes: {
|
|
244
|
+
platform: PLATFORM.WEB,
|
|
245
|
+
mode: MODE.RENDERER,
|
|
246
|
+
columnIndex,
|
|
247
|
+
sortOrder
|
|
248
|
+
},
|
|
249
|
+
eventType: EVENT_TYPE.TRACK
|
|
250
|
+
});
|
|
251
|
+
} else {
|
|
252
|
+
fireAnalyticsEvent && fireAnalyticsEvent({
|
|
253
|
+
action: ACTION.SORT_COLUMN_NOT_ALLOWED,
|
|
254
|
+
actionSubject: ACTION_SUBJECT.TABLE,
|
|
255
|
+
attributes: {
|
|
256
|
+
platform: PLATFORM.WEB,
|
|
257
|
+
mode: MODE.RENDERER
|
|
258
|
+
},
|
|
259
|
+
eventType: EVENT_TYPE.TRACK
|
|
260
|
+
});
|
|
174
261
|
}
|
|
175
|
-
return /*#__PURE__*/React.createElement(WrapperComponent, _extends({}, this.props, {
|
|
176
|
-
className: RendererCssClassName.SORTABLE_COLUMN_WRAPPER,
|
|
177
|
-
ariaSort: getSortOrderLabel(intl, sortOrdered)
|
|
178
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
179
|
-
className: RendererCssClassName.SORTABLE_COLUMN
|
|
180
|
-
}, children, /*#__PURE__*/React.createElement("figure", {
|
|
181
|
-
className: `${RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER} ${sortOrderedClassName}`
|
|
182
|
-
}, /*#__PURE__*/React.createElement(SortingIcon, {
|
|
183
|
-
isSortingAllowed: !!onSorting,
|
|
184
|
-
sortOrdered: sortOrdered,
|
|
185
|
-
onClick: this.sort,
|
|
186
|
-
onKeyDown: this.onKeyPress
|
|
187
|
-
}))));
|
|
188
262
|
}
|
|
189
|
-
}
|
|
190
|
-
return injectIntl(WithSortableColumn);
|
|
263
|
+
};
|
|
191
264
|
};
|
|
192
|
-
export const TableHeader =
|
|
193
|
-
|
|
265
|
+
export const TableHeader = withSortableColumn(TH);
|
|
266
|
+
const TD = getWithCellProps('td');
|
|
267
|
+
export const TableCell = TD;
|
|
@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import React, { Component } from 'react';
|
|
3
3
|
import { filter } from '@atlaskit/adf-utils/traverse';
|
|
4
4
|
import { Card, CardLoading, CardError } from '@atlaskit/media-card';
|
|
5
|
-
import { getMediaClient } from '@atlaskit/media-client';
|
|
5
|
+
import { getMediaClient } from '@atlaskit/media-client-react';
|
|
6
6
|
import { withImageLoader } from '@atlaskit/editor-common/utils';
|
|
7
7
|
export const mediaIdentifierMap = new Map();
|
|
8
8
|
export const getListOfIdentifiersFromDoc = doc => {
|
|
@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
|
|
|
35
35
|
export const NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
36
36
|
export const DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
37
37
|
const packageName = "@atlaskit/renderer";
|
|
38
|
-
const packageVersion = "108.15.
|
|
38
|
+
const packageVersion = "108.15.16";
|
|
39
39
|
export class Renderer extends PureComponent {
|
|
40
40
|
constructor(props) {
|
|
41
41
|
super(props);
|
|
@@ -347,12 +347,14 @@ const breakoutWidthStyle = () => {
|
|
|
347
347
|
return css`
|
|
348
348
|
*:not([data-mark-type='fragment'])
|
|
349
349
|
.${TableSharedCssClassName.TABLE_CONTAINER} {
|
|
350
|
-
|
|
350
|
+
// TODO - improve inline style logic on table container so important styles aren't required here
|
|
351
|
+
width: 100% !important;
|
|
351
352
|
left: 0 !important;
|
|
352
353
|
}
|
|
353
354
|
|
|
354
355
|
[data-mark-type='fragment'] * .${TableSharedCssClassName.TABLE_CONTAINER} {
|
|
355
|
-
|
|
356
|
+
// TODO - improve inline style logic on table container so important styles aren't required here
|
|
357
|
+
width: 100% !important;
|
|
356
358
|
left: 0 !important;
|
|
357
359
|
}
|
|
358
360
|
`;
|
package/dist/esm/i18n/da.js
CHANGED
|
@@ -17,5 +17,10 @@ export default {
|
|
|
17
17
|
'fabric.editor.headingLink.failedToCopy': 'Kopiering mislykkedes',
|
|
18
18
|
'fabric.editor.headingLink.invalidLabel': '⚠️ En tabel med flettede celler kan ikke sorteres',
|
|
19
19
|
'fabric.editor.headingLink.noOrderLabel': 'Sortér kolonnen fra A til Å',
|
|
20
|
-
'fabric.editor.headingLink.noneSortingLabel': 'ingen'
|
|
20
|
+
'fabric.editor.headingLink.noneSortingLabel': 'ingen',
|
|
21
|
+
'fabric.editor.tableHeader.sorting.asc': 'Stigende sortering anvendt',
|
|
22
|
+
'fabric.editor.tableHeader.sorting.default': 'Sortér kolonnen',
|
|
23
|
+
'fabric.editor.tableHeader.sorting.desc': 'Faldende sortering anvendt',
|
|
24
|
+
'fabric.editor.tableHeader.sorting.invalid': 'Du kan ikke sortere en tabel med flettede celler',
|
|
25
|
+
'fabric.editor.tableHeader.sorting.no': 'Ingen sortering anvendt på kolonnen'
|
|
21
26
|
};
|
package/dist/esm/i18n/de.js
CHANGED
|
@@ -17,5 +17,10 @@ export default {
|
|
|
17
17
|
'fabric.editor.headingLink.failedToCopy': 'Kopieren ist fehlgeschlagen',
|
|
18
18
|
'fabric.editor.headingLink.invalidLabel': '⚠️ Tabellen mit zusammengeführten Zellen können nicht sortiert werden.',
|
|
19
19
|
'fabric.editor.headingLink.noOrderLabel': 'Spalte von A nach Z sortieren',
|
|
20
|
-
'fabric.editor.headingLink.noneSortingLabel': 'Keine'
|
|
20
|
+
'fabric.editor.headingLink.noneSortingLabel': 'Keine',
|
|
21
|
+
'fabric.editor.tableHeader.sorting.asc': 'Aufsteigend sortiert',
|
|
22
|
+
'fabric.editor.tableHeader.sorting.default': 'Spalte sortieren',
|
|
23
|
+
'fabric.editor.tableHeader.sorting.desc': 'Absteigend sortiert',
|
|
24
|
+
'fabric.editor.tableHeader.sorting.invalid': 'Tabellen mit zusammengeführten Zellen können nicht sortiert werden.',
|
|
25
|
+
'fabric.editor.tableHeader.sorting.no': 'Keine Sortierung auf die Spalte angewendet'
|
|
21
26
|
};
|
package/dist/esm/i18n/es.js
CHANGED
|
@@ -17,5 +17,10 @@ export default {
|
|
|
17
17
|
'fabric.editor.headingLink.failedToCopy': 'Copia fallida',
|
|
18
18
|
'fabric.editor.headingLink.invalidLabel': '⚠️ No puedes ordenar una tabla con celdas combinadas',
|
|
19
19
|
'fabric.editor.headingLink.noOrderLabel': 'Ordenar columna de la A a la Z',
|
|
20
|
-
'fabric.editor.headingLink.noneSortingLabel': 'ninguno'
|
|
20
|
+
'fabric.editor.headingLink.noneSortingLabel': 'ninguno',
|
|
21
|
+
'fabric.editor.tableHeader.sorting.asc': 'Se ha aplicado el orden ascendente',
|
|
22
|
+
'fabric.editor.tableHeader.sorting.default': 'Ordenar la columna',
|
|
23
|
+
'fabric.editor.tableHeader.sorting.desc': 'Se ha aplicado el orden descendente',
|
|
24
|
+
'fabric.editor.tableHeader.sorting.invalid': 'No puedes ordenar una tabla con celdas combinadas',
|
|
25
|
+
'fabric.editor.tableHeader.sorting.no': 'No hay ningún orden aplicado a la columna'
|
|
21
26
|
};
|
package/dist/esm/i18n/fr.js
CHANGED
|
@@ -17,5 +17,10 @@ export default {
|
|
|
17
17
|
'fabric.editor.headingLink.failedToCopy': 'Copie impossible',
|
|
18
18
|
'fabric.editor.headingLink.invalidLabel': '⚠️ Impossible de trier un tableau comportant des cellules fusionnées',
|
|
19
19
|
'fabric.editor.headingLink.noOrderLabel': 'Trier la colonne de A à Z',
|
|
20
|
-
'fabric.editor.headingLink.noneSortingLabel': 'Néant'
|
|
20
|
+
'fabric.editor.headingLink.noneSortingLabel': 'Néant',
|
|
21
|
+
'fabric.editor.tableHeader.sorting.asc': 'Tri par ordre croissant appliqué',
|
|
22
|
+
'fabric.editor.tableHeader.sorting.default': 'Trier la colonne',
|
|
23
|
+
'fabric.editor.tableHeader.sorting.desc': 'Tri par ordre décroissant appliqué',
|
|
24
|
+
'fabric.editor.tableHeader.sorting.invalid': 'Impossible de trier un tableau comportant des cellules fusionnées',
|
|
25
|
+
'fabric.editor.tableHeader.sorting.no': 'Aucun tri appliqué à la colonne'
|
|
21
26
|
};
|
package/dist/esm/i18n/hu.js
CHANGED
|
@@ -17,5 +17,10 @@ export default {
|
|
|
17
17
|
'fabric.editor.headingLink.failedToCopy': 'A másolás nem sikerült',
|
|
18
18
|
'fabric.editor.headingLink.invalidLabel': '⚠️ Nem rendezhetsz egyesített cellákat tartalmazó táblázatot',
|
|
19
19
|
'fabric.editor.headingLink.noOrderLabel': 'Oszlop rendezése: A → Z',
|
|
20
|
-
'fabric.editor.headingLink.noneSortingLabel': 'Nincs'
|
|
20
|
+
'fabric.editor.headingLink.noneSortingLabel': 'Nincs',
|
|
21
|
+
'fabric.editor.tableHeader.sorting.asc': 'Növekvő sorrendbe állítva',
|
|
22
|
+
'fabric.editor.tableHeader.sorting.default': 'Oszlop rendezése',
|
|
23
|
+
'fabric.editor.tableHeader.sorting.desc': 'Csökkenő sorrendbe állítva',
|
|
24
|
+
'fabric.editor.tableHeader.sorting.invalid': 'Nem rendezhetsz egyesített cellákat tartalmazó táblázatot',
|
|
25
|
+
'fabric.editor.tableHeader.sorting.no': 'Az oszlop nincs rendezve'
|
|
21
26
|
};
|
package/dist/esm/i18n/it.js
CHANGED
|
@@ -17,5 +17,10 @@ export default {
|
|
|
17
17
|
'fabric.editor.headingLink.failedToCopy': 'Copia non riuscita',
|
|
18
18
|
'fabric.editor.headingLink.invalidLabel': '⚠️ Non puoi ordinare una tabella con celle unite',
|
|
19
19
|
'fabric.editor.headingLink.noOrderLabel': 'Ordina colonna da A a Z',
|
|
20
|
-
'fabric.editor.headingLink.noneSortingLabel': 'nessuno'
|
|
20
|
+
'fabric.editor.headingLink.noneSortingLabel': 'nessuno',
|
|
21
|
+
'fabric.editor.tableHeader.sorting.asc': 'Ordinamento crescente applicato',
|
|
22
|
+
'fabric.editor.tableHeader.sorting.default': 'Ordina la colonna',
|
|
23
|
+
'fabric.editor.tableHeader.sorting.desc': 'Ordinamento decrescente applicato',
|
|
24
|
+
'fabric.editor.tableHeader.sorting.invalid': 'Non puoi ordinare una tabella con celle unite',
|
|
25
|
+
'fabric.editor.tableHeader.sorting.no': 'Nessun ordinamento applicato alla colonna'
|
|
21
26
|
};
|
package/dist/esm/i18n/ko.js
CHANGED
|
@@ -17,5 +17,10 @@ export default {
|
|
|
17
17
|
'fabric.editor.headingLink.failedToCopy': '복사 실패',
|
|
18
18
|
'fabric.editor.headingLink.invalidLabel': '⚠️ 병합된 셀이 있는 표를 정렬할 수 없습니다',
|
|
19
19
|
'fabric.editor.headingLink.noOrderLabel': '오름차순으로 열 정렬',
|
|
20
|
-
'fabric.editor.headingLink.noneSortingLabel': '없음'
|
|
20
|
+
'fabric.editor.headingLink.noneSortingLabel': '없음',
|
|
21
|
+
'fabric.editor.tableHeader.sorting.asc': '오름차순 정렬 적용',
|
|
22
|
+
'fabric.editor.tableHeader.sorting.default': '열 정렬',
|
|
23
|
+
'fabric.editor.tableHeader.sorting.desc': '내림차순 정렬 적용',
|
|
24
|
+
'fabric.editor.tableHeader.sorting.invalid': '병합된 셀이 있는 표를 정렬할 수 없습니다',
|
|
25
|
+
'fabric.editor.tableHeader.sorting.no': '열에 적용한 정렬이 없습니다'
|
|
21
26
|
};
|
package/dist/esm/i18n/nb.js
CHANGED
|
@@ -17,5 +17,10 @@ export default {
|
|
|
17
17
|
'fabric.editor.headingLink.failedToCopy': 'Kopiering mislyktes',
|
|
18
18
|
'fabric.editor.headingLink.invalidLabel': '⚠️ Du kan ikke sortere en tabell med sammenslåtte celler',
|
|
19
19
|
'fabric.editor.headingLink.noOrderLabel': 'Sorter kolonne A til Å',
|
|
20
|
-
'fabric.editor.headingLink.noneSortingLabel': 'ingen'
|
|
20
|
+
'fabric.editor.headingLink.noneSortingLabel': 'ingen',
|
|
21
|
+
'fabric.editor.tableHeader.sorting.asc': 'Stigende sortering brukt',
|
|
22
|
+
'fabric.editor.tableHeader.sorting.default': 'Sorter kolonnen',
|
|
23
|
+
'fabric.editor.tableHeader.sorting.desc': 'Synkende sortering brukt',
|
|
24
|
+
'fabric.editor.tableHeader.sorting.invalid': 'Du kan ikke sortere en tabell med sammenslåtte celler',
|
|
25
|
+
'fabric.editor.tableHeader.sorting.no': 'Ingen sortering brukt for kolonnen'
|
|
21
26
|
};
|
package/dist/esm/i18n/nl.js
CHANGED
|
@@ -17,5 +17,10 @@ export default {
|
|
|
17
17
|
'fabric.editor.headingLink.failedToCopy': 'Kopiëren mislukt',
|
|
18
18
|
'fabric.editor.headingLink.invalidLabel': '⚠️ Je kan een tabel met samengevoegde cellen niet rangschikken',
|
|
19
19
|
'fabric.editor.headingLink.noOrderLabel': 'Rangschik kolom van A tot Z',
|
|
20
|
-
'fabric.editor.headingLink.noneSortingLabel': 'Geen'
|
|
20
|
+
'fabric.editor.headingLink.noneSortingLabel': 'Geen',
|
|
21
|
+
'fabric.editor.tableHeader.sorting.asc': 'Oplopende sortering toegepast',
|
|
22
|
+
'fabric.editor.tableHeader.sorting.default': 'Sorteer de kolom',
|
|
23
|
+
'fabric.editor.tableHeader.sorting.desc': 'Aflopende sortering toegepast',
|
|
24
|
+
'fabric.editor.tableHeader.sorting.invalid': 'Je kunt een tabel met samengevoegde cellen niet rangschikken',
|
|
25
|
+
'fabric.editor.tableHeader.sorting.no': 'Geen sortering toegepast op de kolom'
|
|
21
26
|
};
|
package/dist/esm/i18n/pl.js
CHANGED
|
@@ -17,5 +17,10 @@ export default {
|
|
|
17
17
|
'fabric.editor.headingLink.failedToCopy': 'Kopiowanie nie powiodło się',
|
|
18
18
|
'fabric.editor.headingLink.invalidLabel': '⚠️ Nie można sortować tabeli ze scalonymi komórkami',
|
|
19
19
|
'fabric.editor.headingLink.noOrderLabel': 'Sortuj kolumnę od A do Z',
|
|
20
|
-
'fabric.editor.headingLink.noneSortingLabel': 'Brak'
|
|
20
|
+
'fabric.editor.headingLink.noneSortingLabel': 'Brak',
|
|
21
|
+
'fabric.editor.tableHeader.sorting.asc': 'Posortowano rosnąco',
|
|
22
|
+
'fabric.editor.tableHeader.sorting.default': 'Sortuj kolumnę',
|
|
23
|
+
'fabric.editor.tableHeader.sorting.desc': 'Posortowano malejąco',
|
|
24
|
+
'fabric.editor.tableHeader.sorting.invalid': 'Nie można sortować tabeli ze scalonymi komórkami',
|
|
25
|
+
'fabric.editor.tableHeader.sorting.no': 'Do kolumny nie zastosowano żadnego sortowania'
|
|
21
26
|
};
|
package/dist/esm/i18n/sv.js
CHANGED
|
@@ -17,5 +17,10 @@ export default {
|
|
|
17
17
|
'fabric.editor.headingLink.failedToCopy': 'Kopiering misslyckades',
|
|
18
18
|
'fabric.editor.headingLink.invalidLabel': '⚠️ Du kan inte sortera en panelvy med sammanslagna celler',
|
|
19
19
|
'fabric.editor.headingLink.noOrderLabel': 'Sortera kolumn A till Ö',
|
|
20
|
-
'fabric.editor.headingLink.noneSortingLabel': 'Ingen'
|
|
20
|
+
'fabric.editor.headingLink.noneSortingLabel': 'Ingen',
|
|
21
|
+
'fabric.editor.tableHeader.sorting.asc': 'Stigande sortering används',
|
|
22
|
+
'fabric.editor.tableHeader.sorting.default': 'Sortera kolumnen',
|
|
23
|
+
'fabric.editor.tableHeader.sorting.desc': 'Fallande sortering används',
|
|
24
|
+
'fabric.editor.tableHeader.sorting.invalid': 'Du kan inte sortera en tabell med sammanslagna celler',
|
|
25
|
+
'fabric.editor.tableHeader.sorting.no': 'Ingen sortering används på kolumnen'
|
|
21
26
|
};
|
package/dist/esm/i18n/th.js
CHANGED
|
@@ -17,5 +17,10 @@ export default {
|
|
|
17
17
|
'fabric.editor.headingLink.failedToCopy': 'การคัดลอกไม่สำเร็จ',
|
|
18
18
|
'fabric.editor.headingLink.invalidLabel': '⚠️ คุณไม่สามารถจัดเรียงตารางด้วยช่องข้อมูลที่ถูกรวมได้',
|
|
19
19
|
'fabric.editor.headingLink.noOrderLabel': 'เรียงจากคอลัมน์ A ไป Z',
|
|
20
|
-
'fabric.editor.headingLink.noneSortingLabel': 'ไม่มี'
|
|
20
|
+
'fabric.editor.headingLink.noneSortingLabel': 'ไม่มี',
|
|
21
|
+
'fabric.editor.tableHeader.sorting.asc': 'ใช้การเรียงลำดับจากน้อยไปมาก',
|
|
22
|
+
'fabric.editor.tableHeader.sorting.default': 'จัดเรียงคอลัมน์',
|
|
23
|
+
'fabric.editor.tableHeader.sorting.desc': 'ใช้การเรียงลำดับจากมากไปน้อย',
|
|
24
|
+
'fabric.editor.tableHeader.sorting.invalid': 'คุณไม่สามารถจัดเรียงตารางด้วยช่องข้อมูลที่ถูกรวมได้',
|
|
25
|
+
'fabric.editor.tableHeader.sorting.no': 'ไม่มีการใช้การจัดเรียงกับคอลัมน์'
|
|
21
26
|
};
|
package/dist/esm/i18n/tr.js
CHANGED
|
@@ -17,5 +17,10 @@ export default {
|
|
|
17
17
|
'fabric.editor.headingLink.failedToCopy': 'Kopyalama işlemi başarısız oldu',
|
|
18
18
|
'fabric.editor.headingLink.invalidLabel': '⚠️ Birleştirilmiş hücre içeren bir tabloyu sıralayamazsınız',
|
|
19
19
|
'fabric.editor.headingLink.noOrderLabel': "Sütunu A'dan Z'ye sırala",
|
|
20
|
-
'fabric.editor.headingLink.noneSortingLabel': 'yok'
|
|
20
|
+
'fabric.editor.headingLink.noneSortingLabel': 'yok',
|
|
21
|
+
'fabric.editor.tableHeader.sorting.asc': 'Artan biçimde sıralama uygulandı',
|
|
22
|
+
'fabric.editor.tableHeader.sorting.default': 'Sütunu sırala',
|
|
23
|
+
'fabric.editor.tableHeader.sorting.desc': 'Azalan biçimde sıralama uygulandı',
|
|
24
|
+
'fabric.editor.tableHeader.sorting.invalid': 'Birleştirilmiş hücreler içeren bir tabloyu sıralayamazsınız',
|
|
25
|
+
'fabric.editor.tableHeader.sorting.no': 'Sütuna sıralama uygulanmadı'
|
|
21
26
|
};
|
package/dist/esm/i18n/uk.js
CHANGED
|
@@ -22,5 +22,5 @@ export default {
|
|
|
22
22
|
'fabric.editor.tableHeader.sorting.default': 'Сортувати стовпець',
|
|
23
23
|
'fabric.editor.tableHeader.sorting.desc': 'Застосовано сортування за спаданням',
|
|
24
24
|
'fabric.editor.tableHeader.sorting.invalid': 'Не можна сортувати таблицю, у якій є об’єднані клітинки',
|
|
25
|
-
'fabric.editor.tableHeader.sorting.no': '
|
|
25
|
+
'fabric.editor.tableHeader.sorting.no': 'Стовпець не сортувався'
|
|
26
26
|
};
|