@atlaskit/editor-common 72.5.0 → 72.6.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 +47 -0
- package/dist/cjs/node-width/index.js +18 -4
- package/dist/cjs/preset/builder.js +180 -0
- package/dist/cjs/preset/index.js +19 -0
- package/dist/cjs/preset/plugin-injection-api.js +223 -0
- package/dist/cjs/styles/shared/media-single.js +1 -1
- package/dist/cjs/styles/shared/panel.js +2 -2
- package/dist/cjs/styles/shared/table.js +2 -1
- package/dist/cjs/styles/shared/tableCell.js +31 -0
- package/dist/cjs/ui/DropList/index.js +6 -3
- package/dist/cjs/ui-color/ColorPalette/Color/styles.js +1 -1
- package/dist/cjs/ui-color/ColorPalette/Palettes/index.js +14 -1
- package/dist/cjs/ui-color/ColorPalette/Palettes/paletteMessagesTokenModeNames.js +139 -8
- package/dist/cjs/ui-color/ColorPalette/index.js +10 -11
- package/dist/cjs/ui-color/index.js +13 -0
- package/dist/cjs/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js +2 -2
- package/dist/cjs/ui-menu/Dropdown/index.js +18 -8
- package/dist/cjs/ui-menu/DropdownMenu/index.js +1 -1
- package/dist/cjs/utils/breakout.js +12 -4
- package/dist/cjs/utils/index.js +12 -7
- package/dist/cjs/utils/nodes.js +38 -2
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/node-width/index.js +18 -4
- package/dist/es2019/preset/builder.js +138 -0
- package/dist/es2019/preset/index.js +2 -0
- package/dist/es2019/preset/plugin-injection-api.js +176 -0
- package/dist/es2019/styles/shared/media-single.js +9 -0
- package/dist/es2019/styles/shared/panel.js +2 -2
- package/dist/es2019/styles/shared/table.js +2 -0
- package/dist/es2019/styles/shared/tableCell.js +27 -0
- package/dist/es2019/ui/DropList/index.js +6 -3
- package/dist/es2019/ui-color/ColorPalette/Color/styles.js +3 -1
- package/dist/es2019/ui-color/ColorPalette/Palettes/index.js +2 -1
- package/dist/es2019/ui-color/ColorPalette/Palettes/paletteMessagesTokenModeNames.js +137 -7
- package/dist/es2019/ui-color/ColorPalette/index.js +10 -8
- package/dist/es2019/ui-color/index.js +1 -0
- package/dist/es2019/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js +2 -2
- package/dist/es2019/ui-menu/Dropdown/index.js +18 -6
- package/dist/es2019/ui-menu/DropdownMenu/index.js +1 -1
- package/dist/es2019/utils/breakout.js +13 -5
- package/dist/es2019/utils/index.js +1 -2
- package/dist/es2019/utils/nodes.js +34 -0
- package/dist/es2019/version.json +1 -1
- package/dist/esm/node-width/index.js +18 -4
- package/dist/esm/preset/builder.js +172 -0
- package/dist/esm/preset/index.js +2 -0
- package/dist/esm/preset/plugin-injection-api.js +213 -0
- package/dist/esm/styles/shared/media-single.js +1 -1
- package/dist/esm/styles/shared/panel.js +2 -2
- package/dist/esm/styles/shared/table.js +2 -1
- package/dist/esm/styles/shared/tableCell.js +24 -0
- package/dist/esm/ui/DropList/index.js +6 -3
- package/dist/esm/ui-color/ColorPalette/Color/styles.js +1 -1
- package/dist/esm/ui-color/ColorPalette/Palettes/index.js +2 -1
- package/dist/esm/ui-color/ColorPalette/Palettes/paletteMessagesTokenModeNames.js +132 -5
- package/dist/esm/ui-color/ColorPalette/index.js +10 -11
- package/dist/esm/ui-color/index.js +1 -0
- package/dist/esm/ui-menu/ArrowKeyNavigationProvider/MenuArrowKeyNavigationProvider/index.js +2 -2
- package/dist/esm/ui-menu/Dropdown/index.js +18 -8
- package/dist/esm/ui-menu/DropdownMenu/index.js +1 -1
- package/dist/esm/utils/breakout.js +13 -5
- package/dist/esm/utils/index.js +1 -2
- package/dist/esm/utils/nodes.js +34 -0
- package/dist/esm/version.json +1 -1
- package/dist/types/card/cardOptions.d.ts +1 -0
- package/dist/types/preset/builder.d.ts +30 -0
- package/dist/types/preset/index.d.ts +2 -0
- package/dist/types/preset/plugin-injection-api.d.ts +43 -0
- package/dist/types/provider-factory/provider-factory.d.ts +1 -1
- package/dist/types/styles/shared/tableCell.d.ts +1 -0
- package/dist/types/types/feature-flags.d.ts +18 -3
- package/dist/types/types/index.d.ts +1 -1
- package/dist/types/types/next-editor-plugin.d.ts +56 -28
- package/dist/types/ui/DropList/index.d.ts +2 -1
- package/dist/types/ui-color/ColorPalette/Palettes/index.d.ts +1 -0
- package/dist/types/ui-color/ColorPalette/Palettes/paletteMessagesTokenModeNames.d.ts +648 -2
- package/dist/types/ui-color/ColorPalette/Palettes/type.d.ts +4 -0
- package/dist/types/ui-color/ColorPalette/index.d.ts +36 -17
- package/dist/types/ui-color/index.d.ts +2 -1
- package/dist/types/ui-menu/Dropdown/index.d.ts +3 -0
- package/dist/types/utils/breakout.d.ts +10 -2
- package/dist/types/utils/index.d.ts +1 -2
- package/dist/types/utils/nodes.d.ts +15 -1
- package/package.json +13 -12
- package/preset/package.json +15 -0
- package/dist/cjs/utils/builder.js +0 -34
- package/dist/es2019/utils/builder.js +0 -14
- package/dist/esm/utils/builder.js +0 -26
- package/dist/types/utils/builder.d.ts +0 -8
|
@@ -3,9 +3,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
3
3
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
4
|
import { defineMessages } from 'react-intl-next';
|
|
5
5
|
|
|
6
|
-
// These messages are only to be used when
|
|
7
|
-
|
|
8
|
-
export var newLightPalette = defineMessages({
|
|
6
|
+
// These messages are only to be used when showSomewhatSemanticTooltips is true.
|
|
7
|
+
export var lightTextPaletteTooltipMessages = defineMessages({
|
|
9
8
|
'#FFFFFF': {
|
|
10
9
|
id: 'fabric.theme.white',
|
|
11
10
|
defaultMessage: 'White',
|
|
@@ -112,11 +111,139 @@ export var newLightPalette = defineMessages({
|
|
|
112
111
|
description: 'Name of a color'
|
|
113
112
|
}
|
|
114
113
|
});
|
|
115
|
-
var
|
|
114
|
+
var darkModeTextPaletteOverrides = defineMessages({
|
|
116
115
|
'#FFFFFF': {
|
|
117
116
|
id: 'fabric.theme.dark-gray',
|
|
118
117
|
defaultMessage: 'Dark gray',
|
|
119
118
|
description: 'Name of a color'
|
|
120
119
|
}
|
|
121
120
|
});
|
|
122
|
-
export var
|
|
121
|
+
export var darkTextPaletteTooltipMessages = _objectSpread(_objectSpread({}, lightTextPaletteTooltipMessages), darkModeTextPaletteOverrides);
|
|
122
|
+
export var textPaletteTooltipMessages = {
|
|
123
|
+
light: lightTextPaletteTooltipMessages,
|
|
124
|
+
dark: darkTextPaletteTooltipMessages
|
|
125
|
+
};
|
|
126
|
+
export var lightBackgroundPaletteTooltipMessages = defineMessages({
|
|
127
|
+
'#DEEBFF': {
|
|
128
|
+
id: 'fabric.theme.subtle-blue',
|
|
129
|
+
defaultMessage: 'Subtle blue',
|
|
130
|
+
description: 'Name of a color'
|
|
131
|
+
},
|
|
132
|
+
'#B3D4FF': {
|
|
133
|
+
id: 'fabric.theme.blue',
|
|
134
|
+
defaultMessage: 'Blue',
|
|
135
|
+
description: 'Name of a color'
|
|
136
|
+
},
|
|
137
|
+
'#4C9AFF': {
|
|
138
|
+
id: 'fabric.theme.bold-blue',
|
|
139
|
+
defaultMessage: 'Bold blue',
|
|
140
|
+
description: 'Name of a color'
|
|
141
|
+
},
|
|
142
|
+
'#E6FCFF': {
|
|
143
|
+
id: 'fabric.theme.subtle-teal',
|
|
144
|
+
defaultMessage: 'Subtle teal',
|
|
145
|
+
description: 'Name of a color'
|
|
146
|
+
},
|
|
147
|
+
'#B3F5FF': {
|
|
148
|
+
id: 'fabric.theme.teal',
|
|
149
|
+
defaultMessage: 'Teal',
|
|
150
|
+
description: 'Name of a color'
|
|
151
|
+
},
|
|
152
|
+
'#79E2F2': {
|
|
153
|
+
id: 'fabric.theme.bold-teal',
|
|
154
|
+
defaultMessage: 'Bold teal',
|
|
155
|
+
description: 'Name of a color'
|
|
156
|
+
},
|
|
157
|
+
'#E3FCEF': {
|
|
158
|
+
id: 'fabric.theme.subtle-green',
|
|
159
|
+
defaultMessage: 'Subtle green',
|
|
160
|
+
description: 'Name of a color'
|
|
161
|
+
},
|
|
162
|
+
'#ABF5D1': {
|
|
163
|
+
id: 'fabric.theme.green',
|
|
164
|
+
defaultMessage: 'Green',
|
|
165
|
+
description: 'Name of a color'
|
|
166
|
+
},
|
|
167
|
+
'#57D9A3': {
|
|
168
|
+
id: 'fabric.theme.bold-green',
|
|
169
|
+
defaultMessage: 'Bold green',
|
|
170
|
+
description: 'Name of a color'
|
|
171
|
+
},
|
|
172
|
+
'#FFFAE6': {
|
|
173
|
+
id: 'fabric.theme.subtle-yellow',
|
|
174
|
+
defaultMessage: 'Subtle yellow',
|
|
175
|
+
description: 'Name of a color'
|
|
176
|
+
},
|
|
177
|
+
'#FFF0B3': {
|
|
178
|
+
id: 'fabric.theme.yellow',
|
|
179
|
+
defaultMessage: 'Yellow',
|
|
180
|
+
description: 'Name of a color'
|
|
181
|
+
},
|
|
182
|
+
'#FFC400': {
|
|
183
|
+
id: 'fabric.theme.bold-yellow',
|
|
184
|
+
defaultMessage: 'Bold yellow',
|
|
185
|
+
description: 'Name of a color'
|
|
186
|
+
},
|
|
187
|
+
'#FFEBE6': {
|
|
188
|
+
id: 'fabric.theme.subtle-red',
|
|
189
|
+
defaultMessage: 'Subtle red',
|
|
190
|
+
description: 'Name of a color'
|
|
191
|
+
},
|
|
192
|
+
'#FFBDAD': {
|
|
193
|
+
id: 'fabric.theme.red',
|
|
194
|
+
defaultMessage: 'Red',
|
|
195
|
+
description: 'Name of a color.'
|
|
196
|
+
},
|
|
197
|
+
'#FF8F73': {
|
|
198
|
+
id: 'fabric.theme.bold-red',
|
|
199
|
+
defaultMessage: 'Bold red',
|
|
200
|
+
description: 'Name of a color'
|
|
201
|
+
},
|
|
202
|
+
'#EAE6FF': {
|
|
203
|
+
id: 'fabric.theme.subtle-purple',
|
|
204
|
+
defaultMessage: 'Subtle purple',
|
|
205
|
+
description: 'Name of a color'
|
|
206
|
+
},
|
|
207
|
+
'#C0B6F2': {
|
|
208
|
+
id: 'fabric.theme.purple',
|
|
209
|
+
defaultMessage: 'Purple',
|
|
210
|
+
description: 'Name of a color'
|
|
211
|
+
},
|
|
212
|
+
'#998DD9': {
|
|
213
|
+
id: 'fabric.theme.bold-purple',
|
|
214
|
+
defaultMessage: 'Bold purple',
|
|
215
|
+
description: 'Name of a color'
|
|
216
|
+
},
|
|
217
|
+
'#FFFFFF': {
|
|
218
|
+
id: 'fabric.theme.white',
|
|
219
|
+
defaultMessage: 'White',
|
|
220
|
+
description: 'Name of a color'
|
|
221
|
+
},
|
|
222
|
+
'#F4F5F7': {
|
|
223
|
+
id: 'fabric.theme.gray',
|
|
224
|
+
defaultMessage: 'Gray',
|
|
225
|
+
description: 'Name of a color'
|
|
226
|
+
},
|
|
227
|
+
'#B3BAC5': {
|
|
228
|
+
id: 'fabric.theme.bold-gray',
|
|
229
|
+
defaultMessage: 'Bold gray',
|
|
230
|
+
description: 'Name of a color'
|
|
231
|
+
}
|
|
232
|
+
});
|
|
233
|
+
var darkModeBackgroundPaletteOverrides = defineMessages({
|
|
234
|
+
'#FFFFFF': {
|
|
235
|
+
id: 'fabric.theme.subtle-gray',
|
|
236
|
+
defaultMessage: 'Subtle gray',
|
|
237
|
+
description: 'Name of a color'
|
|
238
|
+
},
|
|
239
|
+
'#B3BAC5': {
|
|
240
|
+
id: 'fabric.theme.bold-gray',
|
|
241
|
+
defaultMessage: 'Bold gray',
|
|
242
|
+
description: 'Name of a color'
|
|
243
|
+
}
|
|
244
|
+
});
|
|
245
|
+
export var darkBackgroundPaletteTooltipMessages = _objectSpread(_objectSpread({}, lightBackgroundPaletteTooltipMessages), darkModeBackgroundPaletteOverrides);
|
|
246
|
+
export var backgroundPaletteTooltipMessages = {
|
|
247
|
+
light: lightBackgroundPaletteTooltipMessages,
|
|
248
|
+
dark: darkBackgroundPaletteTooltipMessages
|
|
249
|
+
};
|
|
@@ -7,7 +7,6 @@ import { N0, N500 } from '@atlaskit/theme/colors';
|
|
|
7
7
|
import { useThemeObserver } from '@atlaskit/tokens';
|
|
8
8
|
import Color from './Color';
|
|
9
9
|
import getColorMessage from './Palettes/getColorMessage';
|
|
10
|
-
import { newDarkPalette, newLightPalette } from './Palettes/paletteMessagesTokenModeNames';
|
|
11
10
|
import { colorPaletteWrapper } from './styles';
|
|
12
11
|
import { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette } from './utils';
|
|
13
12
|
/**
|
|
@@ -33,18 +32,18 @@ function getCheckMarkColor(color, useIconToken) {
|
|
|
33
32
|
return contrastColor === N0 ? "var(--ds-icon-inverse, ".concat(N0, ")") : "var(--ds-icon, ".concat(N500, ")");
|
|
34
33
|
}
|
|
35
34
|
var ColorPalette = function ColorPalette(props) {
|
|
36
|
-
var
|
|
37
|
-
_props$cols = props.cols,
|
|
35
|
+
var _props$cols = props.cols,
|
|
38
36
|
cols = _props$cols === void 0 ? DEFAULT_COLOR_PICKER_COLUMNS : _props$cols,
|
|
39
37
|
onClick = props.onClick,
|
|
40
38
|
selectedColor = props.selectedColor,
|
|
41
39
|
className = props.className,
|
|
42
40
|
formatMessage = props.intl.formatMessage,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
hexToPaletteColor =
|
|
46
|
-
|
|
47
|
-
|
|
41
|
+
paletteOptions = props.paletteOptions;
|
|
42
|
+
var palette = paletteOptions.palette,
|
|
43
|
+
hexToPaletteColor = paletteOptions.hexToPaletteColor,
|
|
44
|
+
_paletteOptions$showS = paletteOptions.showSomewhatSemanticTooltips,
|
|
45
|
+
showSomewhatSemanticTooltips = _paletteOptions$showS === void 0 ? false : _paletteOptions$showS,
|
|
46
|
+
paletteColorTooltipMessages = paletteOptions.paletteColorTooltipMessages;
|
|
48
47
|
var _useThemeObserver = useThemeObserver(),
|
|
49
48
|
tokenTheme = _useThemeObserver.colorMode;
|
|
50
49
|
var useIconToken = !!hexToPaletteColor;
|
|
@@ -62,12 +61,12 @@ var ColorPalette = function ColorPalette(props) {
|
|
|
62
61
|
label = _ref.label,
|
|
63
62
|
border = _ref.border,
|
|
64
63
|
message = _ref.message;
|
|
65
|
-
if (
|
|
64
|
+
if (showSomewhatSemanticTooltips && paletteColorTooltipMessages) {
|
|
66
65
|
if (tokenTheme === 'dark') {
|
|
67
|
-
message = getColorMessage(
|
|
66
|
+
message = getColorMessage(paletteColorTooltipMessages.dark, value.toUpperCase());
|
|
68
67
|
}
|
|
69
68
|
if (tokenTheme === 'light') {
|
|
70
|
-
message = getColorMessage(
|
|
69
|
+
message = getColorMessage(paletteColorTooltipMessages.light, value.toUpperCase());
|
|
71
70
|
}
|
|
72
71
|
}
|
|
73
72
|
return jsx(Color, {
|
|
@@ -6,4 +6,5 @@ export { default as colorPaletteMessages } from './ColorPalette/Palettes/palette
|
|
|
6
6
|
export { panelBackgroundPalette, panelDarkModeBackgroundPalette } from './ColorPalette/Palettes/panelBackgroundPalette';
|
|
7
7
|
export { lightModeStatusColorPalette, darkModeStatusColorPalette } from './ColorPalette/Palettes/statusColorPalette';
|
|
8
8
|
export { textColorPalette } from './ColorPalette/Palettes/textColorPalette';
|
|
9
|
+
export { backgroundPaletteTooltipMessages, textPaletteTooltipMessages } from './ColorPalette/Palettes';
|
|
9
10
|
export { DEFAULT_BORDER_COLOR } from './ColorPalette/Palettes/common';
|
|
@@ -104,20 +104,20 @@ export var MenuArrowKeyNavigationProvider = function MenuArrowKeyNavigationProvi
|
|
|
104
104
|
if (!targetElement.closest('.custom-key-handler-wrapper')) {
|
|
105
105
|
return;
|
|
106
106
|
}
|
|
107
|
+
handleClose(event);
|
|
107
108
|
if (!targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
|
|
108
109
|
keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowLeft();
|
|
109
110
|
}
|
|
110
|
-
handleClose(event);
|
|
111
111
|
break;
|
|
112
112
|
case 'ArrowRight':
|
|
113
113
|
//Filter out the events from outside the menu
|
|
114
114
|
if (!targetElement.closest('.custom-key-handler-wrapper')) {
|
|
115
115
|
return;
|
|
116
116
|
}
|
|
117
|
+
handleClose(event);
|
|
117
118
|
if (!targetElement.closest('[data-testid="editor-floating-toolbar"]')) {
|
|
118
119
|
keyDownHandlerContext === null || keyDownHandlerContext === void 0 ? void 0 : keyDownHandlerContext.handleArrowRight();
|
|
119
120
|
}
|
|
120
|
-
handleClose(event);
|
|
121
121
|
break;
|
|
122
122
|
case 'Escape':
|
|
123
123
|
handleClose(event);
|
|
@@ -36,6 +36,19 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
|
|
|
36
36
|
popupPlacement: placement
|
|
37
37
|
});
|
|
38
38
|
});
|
|
39
|
+
_defineProperty(_assertThisInitialized(_this), "handleCloseAndFocus", function (event) {
|
|
40
|
+
var _this$state$target, _this$state$target$qu;
|
|
41
|
+
(_this$state$target = _this.state.target) === null || _this$state$target === void 0 ? void 0 : (_this$state$target$qu = _this$state$target.querySelector('button')) === null || _this$state$target$qu === void 0 ? void 0 : _this$state$target$qu.focus();
|
|
42
|
+
_this.handleClose(event);
|
|
43
|
+
});
|
|
44
|
+
_defineProperty(_assertThisInitialized(_this), "handleClose", function (event) {
|
|
45
|
+
if (_this.props.onOpenChange) {
|
|
46
|
+
_this.props.onOpenChange({
|
|
47
|
+
isOpen: false,
|
|
48
|
+
event: event
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
});
|
|
39
52
|
_this.state = {
|
|
40
53
|
popupPlacement: ['bottom', 'left']
|
|
41
54
|
};
|
|
@@ -56,7 +69,8 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
|
|
|
56
69
|
fitHeight = _this$props.fitHeight,
|
|
57
70
|
fitWidth = _this$props.fitWidth,
|
|
58
71
|
zIndex = _this$props.zIndex,
|
|
59
|
-
arrowKeyNavigationProviderOptions = _this$props.arrowKeyNavigationProviderOptions
|
|
72
|
+
arrowKeyNavigationProviderOptions = _this$props.arrowKeyNavigationProviderOptions,
|
|
73
|
+
dropdownListId = _this$props.dropdownListId;
|
|
60
74
|
return /*#__PURE__*/React.createElement(Popup, {
|
|
61
75
|
target: target,
|
|
62
76
|
mountTo: mountTo,
|
|
@@ -68,12 +82,7 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
|
|
|
68
82
|
zIndex: zIndex
|
|
69
83
|
}, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, _extends({}, arrowKeyNavigationProviderOptions, {
|
|
70
84
|
closeOnTab: true,
|
|
71
|
-
handleClose:
|
|
72
|
-
return onOpenChange && onOpenChange({
|
|
73
|
-
isOpen: false,
|
|
74
|
-
event: event
|
|
75
|
-
});
|
|
76
|
-
}
|
|
85
|
+
handleClose: this.handleCloseAndFocus
|
|
77
86
|
}), /*#__PURE__*/React.createElement("div", {
|
|
78
87
|
style: {
|
|
79
88
|
height: 0,
|
|
@@ -83,7 +92,8 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
|
|
|
83
92
|
isOpen: true,
|
|
84
93
|
onOpenChange: onOpenChange,
|
|
85
94
|
position: popupPlacement.join(' '),
|
|
86
|
-
shouldFitContainer: true
|
|
95
|
+
shouldFitContainer: true,
|
|
96
|
+
id: dropdownListId
|
|
87
97
|
}, children))));
|
|
88
98
|
}
|
|
89
99
|
}, {
|
|
@@ -94,8 +94,8 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
|
|
|
94
94
|
});
|
|
95
95
|
_defineProperty(_assertThisInitialized(_this), "handleCloseAndFocus", function () {
|
|
96
96
|
var _this$state$target, _this$state$target$qu;
|
|
97
|
-
_this.handleClose();
|
|
98
97
|
(_this$state$target = _this.state.target) === null || _this$state$target === void 0 ? void 0 : (_this$state$target$qu = _this$state$target.querySelector('button')) === null || _this$state$target$qu === void 0 ? void 0 : _this$state$target$qu.focus();
|
|
98
|
+
_this.handleClose();
|
|
99
99
|
});
|
|
100
100
|
_defineProperty(_assertThisInitialized(_this), "handleClose", function () {
|
|
101
101
|
if (_this.props.onOpenChange) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { akEditorBreakoutPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
|
|
1
|
+
import { akEditorBreakoutPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorSwoopCubicBezier, akEditorWideLayoutWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
|
|
2
2
|
import { mapBreakpointToLayoutMaxWidth } from '../ui/BaseTheme';
|
|
3
3
|
import { getBreakpoint } from '../ui/WidthProvider';
|
|
4
4
|
import { parsePx } from './dom';
|
|
@@ -78,11 +78,15 @@ export function calculateBreakoutStyles(_ref) {
|
|
|
78
78
|
// it breaks things like sticky headers.
|
|
79
79
|
//
|
|
80
80
|
// It can also cause bluriness for some child content (such as iframes)
|
|
81
|
+
|
|
81
82
|
return {
|
|
82
83
|
type: 'line-length-unknown',
|
|
83
84
|
width: breakoutWidth,
|
|
84
|
-
|
|
85
|
-
|
|
85
|
+
minWidth: breakoutWidthPx,
|
|
86
|
+
display: 'flex',
|
|
87
|
+
justifyContent: 'center',
|
|
88
|
+
transform: 'none',
|
|
89
|
+
transition: "min-width 0.5s ".concat(akEditorSwoopCubicBezier)
|
|
86
90
|
};
|
|
87
91
|
}
|
|
88
92
|
|
|
@@ -91,11 +95,15 @@ export function calculateBreakoutStyles(_ref) {
|
|
|
91
95
|
// full-page appearance modes. There is a slight delay before
|
|
92
96
|
// the widthState is updated.
|
|
93
97
|
// During this period -- the marginLeftPx will be incorrect.
|
|
94
|
-
|
|
98
|
+
// const marginLeftPx = -(breakoutWidthPx - widthStateLineLength) / 2;
|
|
99
|
+
|
|
95
100
|
return {
|
|
96
101
|
type: 'line-length-known',
|
|
97
102
|
width: breakoutWidth,
|
|
98
|
-
|
|
103
|
+
minWidth: breakoutWidthPx,
|
|
104
|
+
transition: "min-width 0.5s ".concat(akEditorSwoopCubicBezier),
|
|
105
|
+
transform: "translateX(-50%)",
|
|
106
|
+
marginLeft: "50%"
|
|
99
107
|
};
|
|
100
108
|
}
|
|
101
109
|
export function calcBreakoutWidthPx(mode, widthStateWidth) {
|
package/dist/esm/utils/index.js
CHANGED
|
@@ -6,7 +6,7 @@ export { isPastDate, timestampToIsoFormat, timestampToString, timestampToTaskCon
|
|
|
6
6
|
export { isElementInTableCell, isTextSelection, isLastItemMediaGroup, setNodeSelection, setTextSelection, nonNullable, stepAddsOneOf, stepHasSlice, extractSliceFromStep, isValidPosition } from './editor-core-utils';
|
|
7
7
|
export { withImageLoader } from './imageLoader';
|
|
8
8
|
export { absoluteBreakoutWidth, calcBreakoutWidth, calcWideWidth, breakoutConsts, calculateBreakoutStyles, calcBreakoutWidthPx } from './breakout';
|
|
9
|
-
export { findChangedNodesFromTransaction, validNode, validateNodes, isType, isParagraph, isText, isLinkMark, SelectedState, isNodeSelectedOrInRange, isSupportedInParent } from './nodes';
|
|
9
|
+
export { findChangedNodesFromTransaction, validNode, validateNodes, isType, isParagraph, isText, isLinkMark, SelectedState, isNodeSelectedOrInRange, isSupportedInParent, isMediaNode, isNodeBeforeMediaNode } from './nodes';
|
|
10
10
|
export { pluginFactory } from './plugin-state-factory';
|
|
11
11
|
export { getFragmentBackingArray, mapFragment, mapSlice, flatmap, mapChildren } from './slice';
|
|
12
12
|
export { walkUpTreeUntil, unwrap, removeNestedEmptyEls, containsClassName, closest, closestElement, parsePx, mapElem, maphElem } from './dom';
|
|
@@ -35,5 +35,4 @@ export { useComponentRenderTracking } from './performance/hooks/use-component-re
|
|
|
35
35
|
export { isOutdatedBrowser } from './outdated-browsers';
|
|
36
36
|
export { isReferencedSource, removeConnectedNodes, getChildrenInfo, getNodeName } from './referentiality';
|
|
37
37
|
export { sendLogs } from './sendLogs';
|
|
38
|
-
export { Builder } from './builder';
|
|
39
38
|
export { getItemCounterDigitsSize, getOrderFromOrderedListNode, resolveOrder } from './list';
|
package/dist/esm/utils/nodes.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { findParentNodeOfType } from 'prosemirror-utils';
|
|
1
2
|
/**
|
|
2
3
|
* Finds all top level nodes affected by the transaction
|
|
3
4
|
* Uses from/to positions in transaction's steps to work out which nodes will
|
|
@@ -89,4 +90,37 @@ export var isSupportedInParent = function isSupportedInParent(state, fragment, c
|
|
|
89
90
|
var depth = currentAppearance === 'embed' || currentAppearance === 'block' ? undefined : -1;
|
|
90
91
|
var parent = state.selection.$from.node(depth);
|
|
91
92
|
return parent && parent.type.validContent(fragment);
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* Checks if the passed in node is a media node
|
|
97
|
+
* Includes media, mediaInline, mediaGroup, mediaSingle
|
|
98
|
+
* @param node The PM node to be checked
|
|
99
|
+
*/
|
|
100
|
+
export var isMediaNode = function isMediaNode(node) {
|
|
101
|
+
return ['media', 'mediaInline', 'mediaGroup', 'mediaSingle'].includes(node.type.name);
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
/**
|
|
105
|
+
* Checks if the node before selection is a media node
|
|
106
|
+
* If there is no node before, checks the node before the parent node
|
|
107
|
+
* Includes media, mediaInline, mediaGroup, mediaSingle
|
|
108
|
+
* @param $pos The position of the selection
|
|
109
|
+
* @param state The editor state
|
|
110
|
+
*/
|
|
111
|
+
export var isNodeBeforeMediaNode = function isNodeBeforeMediaNode($pos, state) {
|
|
112
|
+
var nodeBefore = $pos.nodeBefore;
|
|
113
|
+
if (!nodeBefore) {
|
|
114
|
+
var depthOfParent = $pos.depth - 1 || 1;
|
|
115
|
+
var parentNode = findParentNodeOfType([state.schema.nodes["".concat($pos.node(depthOfParent).type.name)]])(state.selection);
|
|
116
|
+
var resolvedPosOfParentNode = parentNode ? state.tr.doc.resolve(parentNode.pos) : undefined;
|
|
117
|
+
var nodeBeforeParent = resolvedPosOfParentNode && resolvedPosOfParentNode.pos < state.doc.nodeSize ? resolvedPosOfParentNode.nodeBefore : undefined;
|
|
118
|
+
if (nodeBeforeParent) {
|
|
119
|
+
nodeBefore = nodeBeforeParent;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
if (nodeBefore) {
|
|
123
|
+
return ['media', 'mediaInline', 'mediaGroup', 'mediaSingle'].includes(nodeBefore.type.name);
|
|
124
|
+
}
|
|
125
|
+
return false;
|
|
92
126
|
};
|
package/dist/esm/version.json
CHANGED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { AllEditorPresetPluginTypes, ExtractPluginNameFromAllBuilderPlugins, NextEditorPlugin, SafePresetCheck } from '../types';
|
|
2
|
+
import type { EditorPlugin } from '../types/editor-plugin';
|
|
3
|
+
import type { EditorPluginInjectionAPI } from './plugin-injection-api';
|
|
4
|
+
interface ProcessProps {
|
|
5
|
+
pluginInjectionAPI?: EditorPluginInjectionAPI;
|
|
6
|
+
excludePlugins?: Set<string>;
|
|
7
|
+
}
|
|
8
|
+
interface BuildProps extends ProcessProps {
|
|
9
|
+
excludePlugins?: Set<string>;
|
|
10
|
+
pluginInjectionAPI?: EditorPluginInjectionAPI;
|
|
11
|
+
}
|
|
12
|
+
export declare class EditorPresetBuilder<PluginNames extends string[] = [], StackPlugins extends AllEditorPresetPluginTypes[] = []> {
|
|
13
|
+
private readonly data;
|
|
14
|
+
constructor(...more: [...StackPlugins]);
|
|
15
|
+
add<NewPlugin extends AllEditorPresetPluginTypes>(nextOrTuple: SafePresetCheck<NewPlugin, StackPlugins>): EditorPresetBuilder<[
|
|
16
|
+
...PluginNames,
|
|
17
|
+
ExtractPluginNameFromAllBuilderPlugins<NewPlugin>
|
|
18
|
+
], [
|
|
19
|
+
...[NewPlugin],
|
|
20
|
+
...StackPlugins
|
|
21
|
+
]>;
|
|
22
|
+
maybeAdd<MaybePlugin extends NextEditorPlugin<any, any>, MaybePluginNames extends string[], MaybeStackPlugins extends AllEditorPresetPluginTypes[], MaybeEditorPresetBuilder extends EditorPresetBuilder<MaybePluginNames, MaybeStackPlugins>>(pluginToAdd: MaybePlugin, add: (pluginToAdd: MaybePlugin, maybeEditorPresetBuilder: MaybeEditorPresetBuilder) => MaybeEditorPresetBuilder): MaybeEditorPresetBuilder;
|
|
23
|
+
has(plugin: AllEditorPresetPluginTypes): boolean;
|
|
24
|
+
build({ pluginInjectionAPI, excludePlugins: maybeExcludePlugins, }?: BuildProps): EditorPlugin[];
|
|
25
|
+
private verifyDuplicatedPlugins;
|
|
26
|
+
private processEditorPlugins;
|
|
27
|
+
private removeExcludedPlugins;
|
|
28
|
+
private safeEntry;
|
|
29
|
+
}
|
|
30
|
+
export {};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import type { EditorState } from 'prosemirror-state';
|
|
2
|
+
import type { DefaultEditorPlugin, NextEditorPlugin, PluginDependenciesAPI, PluginInjectionAPI } from '../types/next-editor-plugin';
|
|
3
|
+
declare type NextEditorPluginInitializedType = ReturnType<NextEditorPlugin<any>>;
|
|
4
|
+
declare type SharedStateAPIProps = {
|
|
5
|
+
getEditorState: () => EditorState | undefined;
|
|
6
|
+
};
|
|
7
|
+
declare type EditorStateDiff = {
|
|
8
|
+
readonly newEditorState: EditorState;
|
|
9
|
+
readonly oldEditorState: EditorState | undefined;
|
|
10
|
+
};
|
|
11
|
+
export declare class PluginsData {
|
|
12
|
+
}
|
|
13
|
+
export declare class SharedStateAPI {
|
|
14
|
+
private getEditorState;
|
|
15
|
+
private listeners;
|
|
16
|
+
constructor({ getEditorState }: SharedStateAPIProps);
|
|
17
|
+
createAPI(plugin: NextEditorPluginInitializedType | undefined): PluginDependenciesAPI<NextEditorPlugin<any, any>>['sharedState'];
|
|
18
|
+
notifyListeners({ newEditorState, oldEditorState, plugins, }: EditorStateDiff & Record<'plugins', Map<string, NextEditorPluginInitializedType>>): void;
|
|
19
|
+
destroy(): void;
|
|
20
|
+
}
|
|
21
|
+
declare type EditorStateDelta = {
|
|
22
|
+
readonly newEditorState: EditorState;
|
|
23
|
+
readonly oldEditorState: EditorState;
|
|
24
|
+
};
|
|
25
|
+
interface PluginInjectionAPIDefinition {
|
|
26
|
+
api: <T extends NextEditorPlugin<any, any>>() => PluginInjectionAPI<T extends NextEditorPlugin<infer Name, any> ? Name : never, T extends NextEditorPlugin<any, infer Metadata> ? Metadata : never>;
|
|
27
|
+
onEditorViewUpdated: (props: EditorStateDelta) => void;
|
|
28
|
+
onEditorPluginInitialized: (plugin: NextEditorPluginInitializedType) => void;
|
|
29
|
+
}
|
|
30
|
+
export declare class EditorPluginInjectionAPI implements PluginInjectionAPIDefinition {
|
|
31
|
+
private sharedStateAPI;
|
|
32
|
+
private actionsAPI;
|
|
33
|
+
private plugins;
|
|
34
|
+
constructor({ getEditorState }: SharedStateAPIProps);
|
|
35
|
+
api<T extends NextEditorPlugin<any, any>>(): {
|
|
36
|
+
externalPlugins: import("../types/next-editor-plugin").CreatePluginDependenciesAPI<[NextEditorPlugin<T extends (config?: any, api?: PluginInjectionAPI<infer Name, any> | undefined) => DefaultEditorPlugin<infer Name, any> ? Name : never, T extends NextEditorPlugin<any, infer Metadata> ? Metadata : never>, ..."dependencies" extends keyof (T extends NextEditorPlugin<any, infer Metadata> ? Metadata : never) ? (T extends NextEditorPlugin<any, infer Metadata> ? Metadata : never)["dependencies"] extends (((config?: any, api?: PluginInjectionAPI<any, any> | undefined) => DefaultEditorPlugin<any, any>) | import("../types/next-editor-plugin").OptionalPlugin<(config?: any, api?: PluginInjectionAPI<any, any> | undefined) => DefaultEditorPlugin<any, any>>)[] ? Exclude<(T extends NextEditorPlugin<any, infer Metadata> ? Metadata : never)["dependencies"], undefined> : [] : []]>;
|
|
37
|
+
};
|
|
38
|
+
onEditorViewUpdated: ({ newEditorState, oldEditorState, }: EditorStateDiff) => void;
|
|
39
|
+
onEditorPluginInitialized: (plugin: NextEditorPluginInitializedType) => void;
|
|
40
|
+
private addPlugin;
|
|
41
|
+
private getPluginByName;
|
|
42
|
+
}
|
|
43
|
+
export {};
|
|
@@ -7,7 +7,7 @@ export default class ProviderFactory {
|
|
|
7
7
|
}): ProviderFactory;
|
|
8
8
|
destroy(): void;
|
|
9
9
|
isEmpty(): boolean;
|
|
10
|
-
setProvider<T extends
|
|
10
|
+
setProvider<T extends ProviderName>(name: T, provider?: ProviderType<T>): void;
|
|
11
11
|
removeProvider<T extends string>(name: T | ProviderName): void;
|
|
12
12
|
subscribe<T extends string>(name: T, handler: ProviderHandler<typeof name>): void;
|
|
13
13
|
unsubscribe<T extends string>(name: T, handler: ProviderHandler<typeof name>): void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const tableCellBackgroundStyleOverride: () => import("@emotion/react").SerializedStyles;
|
|
@@ -357,12 +357,15 @@ export declare type FeatureFlags = {
|
|
|
357
357
|
restartNumberedListsToolbar?: boolean;
|
|
358
358
|
/**
|
|
359
359
|
* @description
|
|
360
|
-
*
|
|
360
|
+
* This feature flag is used to turn on or off somewhat semantic
|
|
361
|
+
* tooltip names in text, background and table charts color palette.
|
|
362
|
+
* Show semantic color names in tooltips when hovering over colors in the text,
|
|
363
|
+
* background and table charts color picker.
|
|
361
364
|
* Note that this flag is called 'somewhat semantic' as the text color names for white/dark gray
|
|
362
|
-
* colors are not semantic.
|
|
363
|
-
*
|
|
365
|
+
* colors are not semantic. As well as white color name in background color palette.
|
|
364
366
|
* @see https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3365994869/EXTERNAL+MAKE+PP+COMMIT-5058+Enable+dark+mode+usage+of+text+colors+in+UGC+and+non+custom+panels+in+Jira
|
|
365
367
|
* @see https://product-fabric.atlassian.net/browse/ED-16176
|
|
368
|
+
* @see https://product-fabric.atlassian.net/browse/ED-16725
|
|
366
369
|
* @default false
|
|
367
370
|
*/
|
|
368
371
|
useSomewhatSemanticTextColorNames?: boolean;
|
|
@@ -386,6 +389,18 @@ export declare type FeatureFlags = {
|
|
|
386
389
|
* @default false
|
|
387
390
|
*/
|
|
388
391
|
useEditorNext?: boolean;
|
|
392
|
+
/**
|
|
393
|
+
* @description
|
|
394
|
+
* Expanded chart color options from 20 to 36, uses design tokens to enable light/dark mode colors.
|
|
395
|
+
*
|
|
396
|
+
* @see https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3472785427/EXTERNAL+MAKE+PP+COMMIT-5233+Enable+Themed+rendering+of+remaining+UGC+Editor+content+tables+custom+panels+and+extension+color+palettes
|
|
397
|
+
* @see https://product-fabric.atlassian.net/browse/ED-17086
|
|
398
|
+
* @see https://product-fabric.atlassian.net/browse/ED-17132
|
|
399
|
+
* DUE DATE: June 2023
|
|
400
|
+
*
|
|
401
|
+
* @default false
|
|
402
|
+
*/
|
|
403
|
+
expandedChartColors?: boolean | undefined;
|
|
389
404
|
};
|
|
390
405
|
export declare type FeatureFlagKey = keyof FeatureFlags;
|
|
391
406
|
export declare type GetEditorFeatureFlags = () => FeatureFlags;
|
|
@@ -29,7 +29,7 @@ export type { EditorReactContext } from './editor-react-context';
|
|
|
29
29
|
export type { PMPluginFactoryParams, PMPluginFactory, PMPlugin, } from './plugin-factory';
|
|
30
30
|
export type { NodeConfig, MarkConfig, NodeViewConfig, } from './prosemirror-config';
|
|
31
31
|
export type { PluginsOptions, EditorPlugin, getPosHandler, getPosHandlerNode, } from './editor-plugin';
|
|
32
|
-
export type {
|
|
32
|
+
export type { NextEditorPlugin, AllEditorPresetPluginTypes, PluginDependenciesAPI, ExtractPluginNameFromAllBuilderPlugins, SafePresetCheck, DefaultEditorPlugin, OptionalPlugin, PluginInjectionAPI, CreatePluginDependenciesAPI, NextEditorPluginMetadata, } from './next-editor-plugin';
|
|
33
33
|
export declare type IconProps = {
|
|
34
34
|
label?: string;
|
|
35
35
|
};
|