@atlaskit/editor-common 111.0.4 → 111.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 +18 -0
- package/dist/cjs/selection/index.js +12 -0
- package/dist/cjs/selection/utils.js +33 -2
- package/dist/cjs/ui/FloatingToolbar/styles.js +2 -35
- package/dist/cjs/ui/Toolbar/ButtonGroup.js +1 -6
- package/dist/cjs/ui/Toolbar/DropdownTriggerWrapper.js +1 -3
- package/dist/cjs/ui-menu/ColorPickerButton/index.js +3 -67
- package/dist/es2019/selection/index.js +1 -1
- package/dist/es2019/selection/utils.js +31 -1
- package/dist/es2019/ui/FloatingToolbar/styles.js +2 -35
- package/dist/es2019/ui/Toolbar/ButtonGroup.js +1 -6
- package/dist/es2019/ui/Toolbar/DropdownTriggerWrapper.js +1 -3
- package/dist/es2019/ui-menu/ColorPickerButton/index.js +3 -67
- package/dist/esm/selection/index.js +1 -1
- package/dist/esm/selection/utils.js +30 -1
- package/dist/esm/ui/FloatingToolbar/styles.js +2 -35
- package/dist/esm/ui/Toolbar/ButtonGroup.js +1 -6
- package/dist/esm/ui/Toolbar/DropdownTriggerWrapper.js +1 -3
- package/dist/esm/ui-menu/ColorPickerButton/index.js +3 -67
- package/dist/types/selection/index.d.ts +1 -1
- package/dist/types/selection/utils.d.ts +8 -3
- package/dist/types-ts4.5/selection/index.d.ts +1 -1
- package/dist/types-ts4.5/selection/utils.d.ts +8 -3
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/editor-common
|
|
2
2
|
|
|
3
|
+
## 111.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`00e69e0b7c839`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/00e69e0b7c839) -
|
|
8
|
+
Clean up and removal of the `platform-visual-refresh-icons` feature flag.
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
|
|
14
|
+
## 111.0.5
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- [`4bf196f8645a7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4bf196f8645a7) -
|
|
19
|
+
Editor-4011: Added util function isMultiNodeSelection
|
|
20
|
+
|
|
3
21
|
## 111.0.4
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -110,6 +110,18 @@ Object.defineProperty(exports, "isIgnored", {
|
|
|
110
110
|
return _isIgnored.isIgnored;
|
|
111
111
|
}
|
|
112
112
|
});
|
|
113
|
+
Object.defineProperty(exports, "isMultiBlockRange", {
|
|
114
|
+
enumerable: true,
|
|
115
|
+
get: function get() {
|
|
116
|
+
return _utils2.isMultiBlockRange;
|
|
117
|
+
}
|
|
118
|
+
});
|
|
119
|
+
Object.defineProperty(exports, "isMultiBlockSelection", {
|
|
120
|
+
enumerable: true,
|
|
121
|
+
get: function get() {
|
|
122
|
+
return _utils2.isMultiBlockSelection;
|
|
123
|
+
}
|
|
124
|
+
});
|
|
113
125
|
Object.defineProperty(exports, "isSelectionAtEndOfNode", {
|
|
114
126
|
enumerable: true,
|
|
115
127
|
get: function get() {
|
|
@@ -9,7 +9,9 @@ exports.atTheEndOfBlock = atTheEndOfBlock;
|
|
|
9
9
|
exports.atTheEndOfDoc = atTheEndOfDoc;
|
|
10
10
|
exports.deleteSelectedRange = void 0;
|
|
11
11
|
exports.endPositionOfParent = endPositionOfParent;
|
|
12
|
-
exports.
|
|
12
|
+
exports.isMultiBlockRange = exports.expandToBlockRange = exports.expandSelectionToBlockRange = exports.expandSelectionBounds = void 0;
|
|
13
|
+
exports.isMultiBlockSelection = isMultiBlockSelection;
|
|
14
|
+
exports.isSelectionAtStartOfNode = exports.isSelectionAtEndOfNode = void 0;
|
|
13
15
|
exports.startPositionOfParent = startPositionOfParent;
|
|
14
16
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
15
17
|
var _utils = require("@atlaskit/editor-tables/utils");
|
|
@@ -206,4 +208,33 @@ var expandSelectionToBlockRange = exports.expandSelectionToBlockRange = function
|
|
|
206
208
|
var $from = _ref2.$from,
|
|
207
209
|
$to = _ref2.$to;
|
|
208
210
|
return expandToBlockRange($from, $to);
|
|
209
|
-
};
|
|
211
|
+
};
|
|
212
|
+
var isMultiBlockRange = exports.isMultiBlockRange = function isMultiBlockRange(range) {
|
|
213
|
+
if (range.endIndex - range.startIndex <= 1) {
|
|
214
|
+
return false; // At most one child
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
// Count block nodes in the range, return true if more than one
|
|
218
|
+
var blockCount = 0;
|
|
219
|
+
for (var i = range.startIndex; i < range.endIndex; i++) {
|
|
220
|
+
if (range.parent.child(i).isBlock) {
|
|
221
|
+
blockCount++;
|
|
222
|
+
}
|
|
223
|
+
if (blockCount > 1) {
|
|
224
|
+
return true;
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
return false;
|
|
228
|
+
};
|
|
229
|
+
|
|
230
|
+
/**
|
|
231
|
+
* Determines if a selection contains multiple block nodes.
|
|
232
|
+
*/
|
|
233
|
+
function isMultiBlockSelection(selection) {
|
|
234
|
+
var _expandSelectionToBlo = expandSelectionToBlockRange(selection),
|
|
235
|
+
range = _expandSelectionToBlo.range;
|
|
236
|
+
if (!range) {
|
|
237
|
+
return false;
|
|
238
|
+
}
|
|
239
|
+
return isMultiBlockRange(range);
|
|
240
|
+
}
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.iconOnlySpacing = exports.getButtonStyles = void 0;
|
|
7
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
8
7
|
var iconOnlySpacing = exports.iconOnlySpacing = {
|
|
9
8
|
'&&': {
|
|
10
9
|
padding: '0px'
|
|
@@ -25,22 +24,6 @@ var getStyles = function getStyles(property, _ref) {
|
|
|
25
24
|
}
|
|
26
25
|
return property[appearance][state][mode];
|
|
27
26
|
};
|
|
28
|
-
var background = {
|
|
29
|
-
danger: {
|
|
30
|
-
default: {
|
|
31
|
-
light: 'inherit',
|
|
32
|
-
dark: 'inherit'
|
|
33
|
-
},
|
|
34
|
-
hover: {
|
|
35
|
-
light: "var(--ds-background-neutral-subtle-hovered, #0515240F)",
|
|
36
|
-
dark: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
|
|
37
|
-
},
|
|
38
|
-
active: {
|
|
39
|
-
light: "var(--ds-background-neutral-pressed, #080F214A)",
|
|
40
|
-
dark: "var(--ds-background-neutral-pressed, #080F214A)"
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
27
|
var backgroundVisualRefresh = {
|
|
45
28
|
danger: {
|
|
46
29
|
default: {
|
|
@@ -57,22 +40,6 @@ var backgroundVisualRefresh = {
|
|
|
57
40
|
}
|
|
58
41
|
}
|
|
59
42
|
};
|
|
60
|
-
var color = {
|
|
61
|
-
danger: {
|
|
62
|
-
default: {
|
|
63
|
-
light: "var(--ds-icon, #292A2E)",
|
|
64
|
-
dark: "var(--ds-icon, #292A2E)"
|
|
65
|
-
},
|
|
66
|
-
hover: {
|
|
67
|
-
light: "var(--ds-icon-danger, #C9372C)",
|
|
68
|
-
dark: "var(--ds-icon-danger, #C9372C)"
|
|
69
|
-
},
|
|
70
|
-
active: {
|
|
71
|
-
light: "var(--ds-icon-danger, #C9372C)",
|
|
72
|
-
dark: "var(--ds-icon-danger, #C9372C)"
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
};
|
|
76
43
|
var colorVisualRefresh = {
|
|
77
44
|
danger: {
|
|
78
45
|
default: {
|
|
@@ -94,7 +61,7 @@ var colorVisualRefresh = {
|
|
|
94
61
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
95
62
|
var getButtonStyles = exports.getButtonStyles = function getButtonStyles(props) {
|
|
96
63
|
return {
|
|
97
|
-
background: getStyles(
|
|
98
|
-
color: getStyles(
|
|
64
|
+
background: getStyles(backgroundVisualRefresh, props),
|
|
65
|
+
color: getStyles(colorVisualRefresh, props)
|
|
99
66
|
};
|
|
100
67
|
};
|
|
@@ -9,18 +9,13 @@ exports.ToolbarButtonGroup = ToolbarButtonGroup;
|
|
|
9
9
|
require("./ButtonGroup.compiled.css");
|
|
10
10
|
var _runtime = require("@compiled/react/runtime");
|
|
11
11
|
var _react = _interopRequireDefault(require("react"));
|
|
12
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
12
|
var buttonGroupStyle = null;
|
|
14
13
|
|
|
15
14
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- This rule thinks this isn't a `css()` call due to the name mapping
|
|
16
15
|
var buttonGroupStyleUnbounded = null;
|
|
17
|
-
var buttonGroupStyleBeforeVisualRefresh = null;
|
|
18
|
-
|
|
19
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- This rule thinks this isn't a `css()` call due to the name mapping
|
|
20
|
-
var buttonGroupStyleBeforeVisualRefreshUnbounded = null;
|
|
21
16
|
function ToolbarButtonGroup(_ref) {
|
|
22
17
|
var children = _ref.children;
|
|
23
18
|
return /*#__PURE__*/_react.default.createElement("span", {
|
|
24
|
-
className: (0, _runtime.ax)([
|
|
19
|
+
className: (0, _runtime.ax)(["_zulp1b66 _1e0c116y _4cvr1h6o", "_11ko1txw _1p8dglyw _89rs1b66"])
|
|
25
20
|
}, children);
|
|
26
21
|
}
|
|
@@ -9,15 +9,13 @@ exports.ToolbarDropdownTriggerWrapper = ToolbarDropdownTriggerWrapper;
|
|
|
9
9
|
require("./DropdownTriggerWrapper.compiled.css");
|
|
10
10
|
var _runtime = require("@compiled/react/runtime");
|
|
11
11
|
var _react = _interopRequireDefault(require("react"));
|
|
12
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
12
|
var triggerWrapperStylesWithPadding = null;
|
|
14
|
-
var triggerWrapperStyles = null;
|
|
15
13
|
|
|
16
14
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- This rule thinks this isn't a `css()` call due to the name mapping
|
|
17
15
|
var triggerWrapperStylesUnbounded = null;
|
|
18
16
|
function ToolbarDropdownTriggerWrapper(_ref) {
|
|
19
17
|
var children = _ref.children;
|
|
20
18
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
21
|
-
className: (0, _runtime.ax)([
|
|
19
|
+
className: (0, _runtime.ax)(["_1e0c1txw _u5f3v77o", "_1fvdglyw"])
|
|
22
20
|
}, children);
|
|
23
21
|
}
|
|
@@ -12,7 +12,6 @@ var _reactIntlNext = require("react-intl-next");
|
|
|
12
12
|
var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsContext"));
|
|
13
13
|
var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
|
|
14
14
|
var _new = _interopRequireDefault(require("@atlaskit/button/new"));
|
|
15
|
-
var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
|
|
16
15
|
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
|
|
17
16
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
18
17
|
var _primitives = require("@atlaskit/primitives");
|
|
@@ -38,12 +37,6 @@ var _types = require("../ArrowKeyNavigationProvider/types");
|
|
|
38
37
|
var colorPickerButtonWrapper = (0, _react2.css)({
|
|
39
38
|
position: 'relative'
|
|
40
39
|
});
|
|
41
|
-
var colorPickerExpandContainer = (0, _primitives.xcss)({
|
|
42
|
-
marginTop: 'space.0',
|
|
43
|
-
marginBottom: 'space.0',
|
|
44
|
-
marginLeft: 'space.negative.050',
|
|
45
|
-
marginRight: 'space.negative.050'
|
|
46
|
-
});
|
|
47
40
|
var colorPickerExpandContainerVisualRefresh = (0, _primitives.xcss)({
|
|
48
41
|
marginTop: 'space.negative.025',
|
|
49
42
|
marginRight: 'space.negative.050'
|
|
@@ -204,11 +197,9 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
204
197
|
};
|
|
205
198
|
var title = props.title || '';
|
|
206
199
|
var currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
|
|
207
|
-
var
|
|
200
|
+
var buttonStyleVisualRefresh = function buttonStyleVisualRefresh() {
|
|
208
201
|
var _props$size, _props$size2, _props$size3;
|
|
209
202
|
return (0, _react2.css)({
|
|
210
|
-
padding: "var(--ds-space-075, 6px)".concat(" 10px"),
|
|
211
|
-
backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
|
|
212
203
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
213
204
|
height: "".concat(!!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) ? 'inherit' : ''),
|
|
214
205
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
@@ -227,35 +218,6 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
227
218
|
width: ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px',
|
|
228
219
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
229
220
|
height: ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px',
|
|
230
|
-
padding: 0,
|
|
231
|
-
margin: "0px ".concat("var(--ds-space-025, 2px)")
|
|
232
|
-
},
|
|
233
|
-
'&:hover': {
|
|
234
|
-
background: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
|
|
235
|
-
}
|
|
236
|
-
});
|
|
237
|
-
};
|
|
238
|
-
var buttonStyleVisualRefresh = function buttonStyleVisualRefresh() {
|
|
239
|
-
var _props$size4, _props$size5, _props$size6;
|
|
240
|
-
return (0, _react2.css)({
|
|
241
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
242
|
-
height: "".concat(!!((_props$size4 = props.size) !== null && _props$size4 !== void 0 && _props$size4.height) ? 'inherit' : ''),
|
|
243
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
244
|
-
'&:before': {
|
|
245
|
-
display: 'flex',
|
|
246
|
-
justifyContent: 'center',
|
|
247
|
-
alignItems: 'center',
|
|
248
|
-
alignSelf: 'center',
|
|
249
|
-
content: "''",
|
|
250
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
251
|
-
border: "var(--ds-border-width, 1px)".concat(" solid ", _uiColor.DEFAULT_BORDER_COLOR),
|
|
252
|
-
borderRadius: "var(--ds-radius-small, 3px)",
|
|
253
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
254
|
-
backgroundColor: currentColor || 'transparent',
|
|
255
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
256
|
-
width: ((_props$size5 = props.size) === null || _props$size5 === void 0 ? void 0 : _props$size5.width) || '14px',
|
|
257
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
258
|
-
height: ((_props$size6 = props.size) === null || _props$size6 === void 0 ? void 0 : _props$size6.height) || '14px',
|
|
259
221
|
marginTop: "var(--ds-space-025, 2px)"
|
|
260
222
|
}
|
|
261
223
|
});
|
|
@@ -265,7 +227,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
265
227
|
}, (0, _react2.jsx)(_tooltip.default, {
|
|
266
228
|
content: title,
|
|
267
229
|
position: "top"
|
|
268
|
-
}, (0,
|
|
230
|
+
}, (0, _react2.jsx)("div", {
|
|
269
231
|
css: colorPickerButtonStyle
|
|
270
232
|
}, (0, _react2.jsx)(_new.default, {
|
|
271
233
|
appearance: 'subtle',
|
|
@@ -295,33 +257,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
295
257
|
spacing: "spacious",
|
|
296
258
|
label: "color-picker-chevron-down",
|
|
297
259
|
size: "small"
|
|
298
|
-
})))))
|
|
299
|
-
appearance: 'subtle',
|
|
300
|
-
ref: buttonRef,
|
|
301
|
-
"aria-label": title,
|
|
302
|
-
"aria-expanded": props.isAriaExpanded ? isPopupOpen : undefined,
|
|
303
|
-
spacing: "compact",
|
|
304
|
-
onClick: togglePopup,
|
|
305
|
-
onKeyDown: function onKeyDown(event) {
|
|
306
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
307
|
-
event.preventDefault();
|
|
308
|
-
togglePopup();
|
|
309
|
-
setIsOpenedByKeyboard(true);
|
|
310
|
-
}
|
|
311
|
-
}
|
|
312
|
-
// eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
|
|
313
|
-
,
|
|
314
|
-
css: buttonStyle,
|
|
315
|
-
iconAfter: (0, _react2.jsx)(_primitives.Box, {
|
|
316
|
-
xcss: colorPickerExpandContainer
|
|
317
|
-
}, (0, _react2.jsx)(_chevronDown.default, {
|
|
318
|
-
color: "currentColor",
|
|
319
|
-
spacing: "spacious",
|
|
320
|
-
label: "color-picker-chevron-down",
|
|
321
|
-
size: "small"
|
|
322
|
-
})),
|
|
323
|
-
"data-selected-color": props.currentColor
|
|
324
|
-
})), renderPopup());
|
|
260
|
+
})))))), renderPopup());
|
|
325
261
|
};
|
|
326
262
|
var _default = exports.default = (0, _withAnalyticsContext.default)({
|
|
327
263
|
source: 'ConfigPanel'
|
|
@@ -12,7 +12,7 @@ export { isIgnored } from './gap-cursor/utils/is-ignored';
|
|
|
12
12
|
export { isValidTargetNode } from './gap-cursor/utils/is-valid-target-node';
|
|
13
13
|
export { setGapCursorSelection } from './gap-cursor/utils/setGapCursorSelection';
|
|
14
14
|
export { hideCaretModifier, gapCursorStyles } from './gap-cursor/styles';
|
|
15
|
-
export { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, atTheEndOfDoc, deleteSelectedRange, endPositionOfParent, expandSelectionBounds, expandSelectionToBlockRange, expandToBlockRange, isSelectionAtEndOfNode, isSelectionAtStartOfNode, startPositionOfParent } from './utils';
|
|
15
|
+
export { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, atTheEndOfDoc, deleteSelectedRange, endPositionOfParent, expandSelectionBounds, expandSelectionToBlockRange, expandToBlockRange, isMultiBlockRange, isMultiBlockSelection, isSelectionAtEndOfNode, isSelectionAtStartOfNode, startPositionOfParent } from './utils';
|
|
16
16
|
export function getNodeSelectionAnalyticsPayload(selection) {
|
|
17
17
|
if (selection instanceof NodeSelection) {
|
|
18
18
|
return {
|
|
@@ -204,4 +204,34 @@ export const expandSelectionToBlockRange = ({
|
|
|
204
204
|
$to
|
|
205
205
|
}) => {
|
|
206
206
|
return expandToBlockRange($from, $to);
|
|
207
|
-
};
|
|
207
|
+
};
|
|
208
|
+
export const isMultiBlockRange = range => {
|
|
209
|
+
if (range.endIndex - range.startIndex <= 1) {
|
|
210
|
+
return false; // At most one child
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
// Count block nodes in the range, return true if more than one
|
|
214
|
+
let blockCount = 0;
|
|
215
|
+
for (let i = range.startIndex; i < range.endIndex; i++) {
|
|
216
|
+
if (range.parent.child(i).isBlock) {
|
|
217
|
+
blockCount++;
|
|
218
|
+
}
|
|
219
|
+
if (blockCount > 1) {
|
|
220
|
+
return true;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
return false;
|
|
224
|
+
};
|
|
225
|
+
|
|
226
|
+
/**
|
|
227
|
+
* Determines if a selection contains multiple block nodes.
|
|
228
|
+
*/
|
|
229
|
+
export function isMultiBlockSelection(selection) {
|
|
230
|
+
const {
|
|
231
|
+
range
|
|
232
|
+
} = expandSelectionToBlockRange(selection);
|
|
233
|
+
if (!range) {
|
|
234
|
+
return false;
|
|
235
|
+
}
|
|
236
|
+
return isMultiBlockRange(range);
|
|
237
|
+
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
1
|
export const iconOnlySpacing = {
|
|
3
2
|
'&&': {
|
|
4
3
|
padding: '0px'
|
|
@@ -17,22 +16,6 @@ const getStyles = (property, {
|
|
|
17
16
|
}
|
|
18
17
|
return property[appearance][state][mode];
|
|
19
18
|
};
|
|
20
|
-
const background = {
|
|
21
|
-
danger: {
|
|
22
|
-
default: {
|
|
23
|
-
light: 'inherit',
|
|
24
|
-
dark: 'inherit'
|
|
25
|
-
},
|
|
26
|
-
hover: {
|
|
27
|
-
light: "var(--ds-background-neutral-subtle-hovered, #0515240F)",
|
|
28
|
-
dark: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
|
|
29
|
-
},
|
|
30
|
-
active: {
|
|
31
|
-
light: "var(--ds-background-neutral-pressed, #080F214A)",
|
|
32
|
-
dark: "var(--ds-background-neutral-pressed, #080F214A)"
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
19
|
const backgroundVisualRefresh = {
|
|
37
20
|
danger: {
|
|
38
21
|
default: {
|
|
@@ -49,22 +32,6 @@ const backgroundVisualRefresh = {
|
|
|
49
32
|
}
|
|
50
33
|
}
|
|
51
34
|
};
|
|
52
|
-
const color = {
|
|
53
|
-
danger: {
|
|
54
|
-
default: {
|
|
55
|
-
light: "var(--ds-icon, #292A2E)",
|
|
56
|
-
dark: "var(--ds-icon, #292A2E)"
|
|
57
|
-
},
|
|
58
|
-
hover: {
|
|
59
|
-
light: "var(--ds-icon-danger, #C9372C)",
|
|
60
|
-
dark: "var(--ds-icon-danger, #C9372C)"
|
|
61
|
-
},
|
|
62
|
-
active: {
|
|
63
|
-
light: "var(--ds-icon-danger, #C9372C)",
|
|
64
|
-
dark: "var(--ds-icon-danger, #C9372C)"
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
35
|
const colorVisualRefresh = {
|
|
69
36
|
danger: {
|
|
70
37
|
default: {
|
|
@@ -85,6 +52,6 @@ const colorVisualRefresh = {
|
|
|
85
52
|
// Ignored via go/ees005
|
|
86
53
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
87
54
|
export const getButtonStyles = props => ({
|
|
88
|
-
background: getStyles(
|
|
89
|
-
color: getStyles(
|
|
55
|
+
background: getStyles(backgroundVisualRefresh, props),
|
|
56
|
+
color: getStyles(colorVisualRefresh, props)
|
|
90
57
|
});
|
|
@@ -2,19 +2,14 @@
|
|
|
2
2
|
import "./ButtonGroup.compiled.css";
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import React from 'react';
|
|
5
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
5
|
const buttonGroupStyle = null;
|
|
7
6
|
|
|
8
7
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- This rule thinks this isn't a `css()` call due to the name mapping
|
|
9
8
|
const buttonGroupStyleUnbounded = null;
|
|
10
|
-
const buttonGroupStyleBeforeVisualRefresh = null;
|
|
11
|
-
|
|
12
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- This rule thinks this isn't a `css()` call due to the name mapping
|
|
13
|
-
const buttonGroupStyleBeforeVisualRefreshUnbounded = null;
|
|
14
9
|
export function ToolbarButtonGroup({
|
|
15
10
|
children
|
|
16
11
|
}) {
|
|
17
12
|
return /*#__PURE__*/React.createElement("span", {
|
|
18
|
-
className: ax([
|
|
13
|
+
className: ax(["_zulp1b66 _1e0c116y _4cvr1h6o", "_11ko1txw _1p8dglyw _89rs1b66"])
|
|
19
14
|
}, children);
|
|
20
15
|
}
|
|
@@ -2,9 +2,7 @@
|
|
|
2
2
|
import "./DropdownTriggerWrapper.compiled.css";
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import React from 'react';
|
|
5
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
5
|
const triggerWrapperStylesWithPadding = null;
|
|
7
|
-
const triggerWrapperStyles = null;
|
|
8
6
|
|
|
9
7
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- This rule thinks this isn't a `css()` call due to the name mapping
|
|
10
8
|
const triggerWrapperStylesUnbounded = null;
|
|
@@ -12,6 +10,6 @@ export function ToolbarDropdownTriggerWrapper({
|
|
|
12
10
|
children
|
|
13
11
|
}) {
|
|
14
12
|
return /*#__PURE__*/React.createElement("div", {
|
|
15
|
-
className: ax([
|
|
13
|
+
className: ax(["_1e0c1txw _u5f3v77o", "_1fvdglyw"])
|
|
16
14
|
}, children);
|
|
17
15
|
}
|
|
@@ -10,7 +10,6 @@ import { useIntl } from 'react-intl-next';
|
|
|
10
10
|
import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
|
|
11
11
|
import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
12
12
|
import Button from '@atlaskit/button/new';
|
|
13
|
-
import LegacyButton from '@atlaskit/button/standard-button';
|
|
14
13
|
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
|
|
15
14
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
16
15
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
@@ -29,12 +28,6 @@ import { ArrowKeyNavigationType } from '../ArrowKeyNavigationProvider/types';
|
|
|
29
28
|
const colorPickerButtonWrapper = css({
|
|
30
29
|
position: 'relative'
|
|
31
30
|
});
|
|
32
|
-
const colorPickerExpandContainer = xcss({
|
|
33
|
-
marginTop: 'space.0',
|
|
34
|
-
marginBottom: 'space.0',
|
|
35
|
-
marginLeft: 'space.negative.050',
|
|
36
|
-
marginRight: 'space.negative.050'
|
|
37
|
-
});
|
|
38
31
|
const colorPickerExpandContainerVisualRefresh = xcss({
|
|
39
32
|
marginTop: 'space.negative.025',
|
|
40
33
|
marginRight: 'space.negative.050'
|
|
@@ -184,11 +177,9 @@ const ColorPickerButton = props => {
|
|
|
184
177
|
};
|
|
185
178
|
const title = props.title || '';
|
|
186
179
|
const currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
|
|
187
|
-
const
|
|
180
|
+
const buttonStyleVisualRefresh = () => {
|
|
188
181
|
var _props$size, _props$size2, _props$size3;
|
|
189
182
|
return css({
|
|
190
|
-
padding: `${"var(--ds-space-075, 6px)"} 10px`,
|
|
191
|
-
backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
|
|
192
183
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
193
184
|
height: `${!!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) ? 'inherit' : ''}`,
|
|
194
185
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
@@ -207,35 +198,6 @@ const ColorPickerButton = props => {
|
|
|
207
198
|
width: ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px',
|
|
208
199
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
209
200
|
height: ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px',
|
|
210
|
-
padding: 0,
|
|
211
|
-
margin: `0px ${"var(--ds-space-025, 2px)"}`
|
|
212
|
-
},
|
|
213
|
-
'&:hover': {
|
|
214
|
-
background: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
|
|
215
|
-
}
|
|
216
|
-
});
|
|
217
|
-
};
|
|
218
|
-
const buttonStyleVisualRefresh = () => {
|
|
219
|
-
var _props$size4, _props$size5, _props$size6;
|
|
220
|
-
return css({
|
|
221
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
222
|
-
height: `${!!((_props$size4 = props.size) !== null && _props$size4 !== void 0 && _props$size4.height) ? 'inherit' : ''}`,
|
|
223
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
224
|
-
'&:before': {
|
|
225
|
-
display: 'flex',
|
|
226
|
-
justifyContent: 'center',
|
|
227
|
-
alignItems: 'center',
|
|
228
|
-
alignSelf: 'center',
|
|
229
|
-
content: "''",
|
|
230
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
231
|
-
border: `${"var(--ds-border-width, 1px)"} solid ${DEFAULT_BORDER_COLOR}`,
|
|
232
|
-
borderRadius: "var(--ds-radius-small, 3px)",
|
|
233
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
234
|
-
backgroundColor: currentColor || 'transparent',
|
|
235
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
236
|
-
width: ((_props$size5 = props.size) === null || _props$size5 === void 0 ? void 0 : _props$size5.width) || '14px',
|
|
237
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
238
|
-
height: ((_props$size6 = props.size) === null || _props$size6 === void 0 ? void 0 : _props$size6.height) || '14px',
|
|
239
201
|
marginTop: `${"var(--ds-space-025, 2px)"}`
|
|
240
202
|
}
|
|
241
203
|
});
|
|
@@ -245,7 +207,7 @@ const ColorPickerButton = props => {
|
|
|
245
207
|
}, jsx(Tooltip, {
|
|
246
208
|
content: title,
|
|
247
209
|
position: "top"
|
|
248
|
-
},
|
|
210
|
+
}, jsx("div", {
|
|
249
211
|
css: colorPickerButtonStyle
|
|
250
212
|
}, jsx(Button, {
|
|
251
213
|
appearance: 'subtle',
|
|
@@ -275,33 +237,7 @@ const ColorPickerButton = props => {
|
|
|
275
237
|
spacing: "spacious",
|
|
276
238
|
label: "color-picker-chevron-down",
|
|
277
239
|
size: "small"
|
|
278
|
-
})))))
|
|
279
|
-
appearance: 'subtle',
|
|
280
|
-
ref: buttonRef,
|
|
281
|
-
"aria-label": title,
|
|
282
|
-
"aria-expanded": props.isAriaExpanded ? isPopupOpen : undefined,
|
|
283
|
-
spacing: "compact",
|
|
284
|
-
onClick: togglePopup,
|
|
285
|
-
onKeyDown: event => {
|
|
286
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
287
|
-
event.preventDefault();
|
|
288
|
-
togglePopup();
|
|
289
|
-
setIsOpenedByKeyboard(true);
|
|
290
|
-
}
|
|
291
|
-
}
|
|
292
|
-
// eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
|
|
293
|
-
,
|
|
294
|
-
css: buttonStyle,
|
|
295
|
-
iconAfter: jsx(Box, {
|
|
296
|
-
xcss: colorPickerExpandContainer
|
|
297
|
-
}, jsx(ChevronDownIcon, {
|
|
298
|
-
color: "currentColor",
|
|
299
|
-
spacing: "spacious",
|
|
300
|
-
label: "color-picker-chevron-down",
|
|
301
|
-
size: "small"
|
|
302
|
-
})),
|
|
303
|
-
"data-selected-color": props.currentColor
|
|
304
|
-
})), renderPopup());
|
|
240
|
+
})))))), renderPopup());
|
|
305
241
|
};
|
|
306
242
|
export default withAnalyticsContext({
|
|
307
243
|
source: 'ConfigPanel'
|
|
@@ -12,7 +12,7 @@ export { isIgnored } from './gap-cursor/utils/is-ignored';
|
|
|
12
12
|
export { isValidTargetNode } from './gap-cursor/utils/is-valid-target-node';
|
|
13
13
|
export { setGapCursorSelection } from './gap-cursor/utils/setGapCursorSelection';
|
|
14
14
|
export { hideCaretModifier, gapCursorStyles } from './gap-cursor/styles';
|
|
15
|
-
export { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, atTheEndOfDoc, deleteSelectedRange, endPositionOfParent, expandSelectionBounds, expandSelectionToBlockRange, expandToBlockRange, isSelectionAtEndOfNode, isSelectionAtStartOfNode, startPositionOfParent } from './utils';
|
|
15
|
+
export { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, atTheEndOfDoc, deleteSelectedRange, endPositionOfParent, expandSelectionBounds, expandSelectionToBlockRange, expandToBlockRange, isMultiBlockRange, isMultiBlockSelection, isSelectionAtEndOfNode, isSelectionAtStartOfNode, startPositionOfParent } from './utils';
|
|
16
16
|
export function getNodeSelectionAnalyticsPayload(selection) {
|
|
17
17
|
if (selection instanceof NodeSelection) {
|
|
18
18
|
return {
|
|
@@ -193,4 +193,33 @@ export var expandSelectionToBlockRange = function expandSelectionToBlockRange(_r
|
|
|
193
193
|
var $from = _ref2.$from,
|
|
194
194
|
$to = _ref2.$to;
|
|
195
195
|
return expandToBlockRange($from, $to);
|
|
196
|
-
};
|
|
196
|
+
};
|
|
197
|
+
export var isMultiBlockRange = function isMultiBlockRange(range) {
|
|
198
|
+
if (range.endIndex - range.startIndex <= 1) {
|
|
199
|
+
return false; // At most one child
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
// Count block nodes in the range, return true if more than one
|
|
203
|
+
var blockCount = 0;
|
|
204
|
+
for (var i = range.startIndex; i < range.endIndex; i++) {
|
|
205
|
+
if (range.parent.child(i).isBlock) {
|
|
206
|
+
blockCount++;
|
|
207
|
+
}
|
|
208
|
+
if (blockCount > 1) {
|
|
209
|
+
return true;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
return false;
|
|
213
|
+
};
|
|
214
|
+
|
|
215
|
+
/**
|
|
216
|
+
* Determines if a selection contains multiple block nodes.
|
|
217
|
+
*/
|
|
218
|
+
export function isMultiBlockSelection(selection) {
|
|
219
|
+
var _expandSelectionToBlo = expandSelectionToBlockRange(selection),
|
|
220
|
+
range = _expandSelectionToBlo.range;
|
|
221
|
+
if (!range) {
|
|
222
|
+
return false;
|
|
223
|
+
}
|
|
224
|
+
return isMultiBlockRange(range);
|
|
225
|
+
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
1
|
export var iconOnlySpacing = {
|
|
3
2
|
'&&': {
|
|
4
3
|
padding: '0px'
|
|
@@ -19,22 +18,6 @@ var getStyles = function getStyles(property, _ref) {
|
|
|
19
18
|
}
|
|
20
19
|
return property[appearance][state][mode];
|
|
21
20
|
};
|
|
22
|
-
var background = {
|
|
23
|
-
danger: {
|
|
24
|
-
default: {
|
|
25
|
-
light: 'inherit',
|
|
26
|
-
dark: 'inherit'
|
|
27
|
-
},
|
|
28
|
-
hover: {
|
|
29
|
-
light: "var(--ds-background-neutral-subtle-hovered, #0515240F)",
|
|
30
|
-
dark: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
|
|
31
|
-
},
|
|
32
|
-
active: {
|
|
33
|
-
light: "var(--ds-background-neutral-pressed, #080F214A)",
|
|
34
|
-
dark: "var(--ds-background-neutral-pressed, #080F214A)"
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
21
|
var backgroundVisualRefresh = {
|
|
39
22
|
danger: {
|
|
40
23
|
default: {
|
|
@@ -51,22 +34,6 @@ var backgroundVisualRefresh = {
|
|
|
51
34
|
}
|
|
52
35
|
}
|
|
53
36
|
};
|
|
54
|
-
var color = {
|
|
55
|
-
danger: {
|
|
56
|
-
default: {
|
|
57
|
-
light: "var(--ds-icon, #292A2E)",
|
|
58
|
-
dark: "var(--ds-icon, #292A2E)"
|
|
59
|
-
},
|
|
60
|
-
hover: {
|
|
61
|
-
light: "var(--ds-icon-danger, #C9372C)",
|
|
62
|
-
dark: "var(--ds-icon-danger, #C9372C)"
|
|
63
|
-
},
|
|
64
|
-
active: {
|
|
65
|
-
light: "var(--ds-icon-danger, #C9372C)",
|
|
66
|
-
dark: "var(--ds-icon-danger, #C9372C)"
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
37
|
var colorVisualRefresh = {
|
|
71
38
|
danger: {
|
|
72
39
|
default: {
|
|
@@ -88,7 +55,7 @@ var colorVisualRefresh = {
|
|
|
88
55
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
89
56
|
export var getButtonStyles = function getButtonStyles(props) {
|
|
90
57
|
return {
|
|
91
|
-
background: getStyles(
|
|
92
|
-
color: getStyles(
|
|
58
|
+
background: getStyles(backgroundVisualRefresh, props),
|
|
59
|
+
color: getStyles(colorVisualRefresh, props)
|
|
93
60
|
};
|
|
94
61
|
};
|
|
@@ -2,18 +2,13 @@
|
|
|
2
2
|
import "./ButtonGroup.compiled.css";
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import React from 'react';
|
|
5
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
5
|
var buttonGroupStyle = null;
|
|
7
6
|
|
|
8
7
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- This rule thinks this isn't a `css()` call due to the name mapping
|
|
9
8
|
var buttonGroupStyleUnbounded = null;
|
|
10
|
-
var buttonGroupStyleBeforeVisualRefresh = null;
|
|
11
|
-
|
|
12
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- This rule thinks this isn't a `css()` call due to the name mapping
|
|
13
|
-
var buttonGroupStyleBeforeVisualRefreshUnbounded = null;
|
|
14
9
|
export function ToolbarButtonGroup(_ref) {
|
|
15
10
|
var children = _ref.children;
|
|
16
11
|
return /*#__PURE__*/React.createElement("span", {
|
|
17
|
-
className: ax([
|
|
12
|
+
className: ax(["_zulp1b66 _1e0c116y _4cvr1h6o", "_11ko1txw _1p8dglyw _89rs1b66"])
|
|
18
13
|
}, children);
|
|
19
14
|
}
|
|
@@ -2,15 +2,13 @@
|
|
|
2
2
|
import "./DropdownTriggerWrapper.compiled.css";
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import React from 'react';
|
|
5
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
5
|
var triggerWrapperStylesWithPadding = null;
|
|
7
|
-
var triggerWrapperStyles = null;
|
|
8
6
|
|
|
9
7
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- This rule thinks this isn't a `css()` call due to the name mapping
|
|
10
8
|
var triggerWrapperStylesUnbounded = null;
|
|
11
9
|
export function ToolbarDropdownTriggerWrapper(_ref) {
|
|
12
10
|
var children = _ref.children;
|
|
13
11
|
return /*#__PURE__*/React.createElement("div", {
|
|
14
|
-
className: ax([
|
|
12
|
+
className: ax(["_1e0c1txw _u5f3v77o", "_1fvdglyw"])
|
|
15
13
|
}, children);
|
|
16
14
|
}
|
|
@@ -11,7 +11,6 @@ import { useIntl } from 'react-intl-next';
|
|
|
11
11
|
import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
|
|
12
12
|
import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
13
13
|
import Button from '@atlaskit/button/new';
|
|
14
|
-
import LegacyButton from '@atlaskit/button/standard-button';
|
|
15
14
|
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
|
|
16
15
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
17
16
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
@@ -30,12 +29,6 @@ import { ArrowKeyNavigationType } from '../ArrowKeyNavigationProvider/types';
|
|
|
30
29
|
var colorPickerButtonWrapper = css({
|
|
31
30
|
position: 'relative'
|
|
32
31
|
});
|
|
33
|
-
var colorPickerExpandContainer = xcss({
|
|
34
|
-
marginTop: 'space.0',
|
|
35
|
-
marginBottom: 'space.0',
|
|
36
|
-
marginLeft: 'space.negative.050',
|
|
37
|
-
marginRight: 'space.negative.050'
|
|
38
|
-
});
|
|
39
32
|
var colorPickerExpandContainerVisualRefresh = xcss({
|
|
40
33
|
marginTop: 'space.negative.025',
|
|
41
34
|
marginRight: 'space.negative.050'
|
|
@@ -196,11 +189,9 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
196
189
|
};
|
|
197
190
|
var title = props.title || '';
|
|
198
191
|
var currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
|
|
199
|
-
var
|
|
192
|
+
var buttonStyleVisualRefresh = function buttonStyleVisualRefresh() {
|
|
200
193
|
var _props$size, _props$size2, _props$size3;
|
|
201
194
|
return css({
|
|
202
|
-
padding: "var(--ds-space-075, 6px)".concat(" 10px"),
|
|
203
|
-
backgroundColor: "var(--ds-background-neutral-subtle, transparent)",
|
|
204
195
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
205
196
|
height: "".concat(!!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) ? 'inherit' : ''),
|
|
206
197
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
@@ -219,35 +210,6 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
219
210
|
width: ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px',
|
|
220
211
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
221
212
|
height: ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px',
|
|
222
|
-
padding: 0,
|
|
223
|
-
margin: "0px ".concat("var(--ds-space-025, 2px)")
|
|
224
|
-
},
|
|
225
|
-
'&:hover': {
|
|
226
|
-
background: "var(--ds-background-neutral-subtle-hovered, #0515240F)"
|
|
227
|
-
}
|
|
228
|
-
});
|
|
229
|
-
};
|
|
230
|
-
var buttonStyleVisualRefresh = function buttonStyleVisualRefresh() {
|
|
231
|
-
var _props$size4, _props$size5, _props$size6;
|
|
232
|
-
return css({
|
|
233
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
234
|
-
height: "".concat(!!((_props$size4 = props.size) !== null && _props$size4 !== void 0 && _props$size4.height) ? 'inherit' : ''),
|
|
235
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
236
|
-
'&:before': {
|
|
237
|
-
display: 'flex',
|
|
238
|
-
justifyContent: 'center',
|
|
239
|
-
alignItems: 'center',
|
|
240
|
-
alignSelf: 'center',
|
|
241
|
-
content: "''",
|
|
242
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
243
|
-
border: "var(--ds-border-width, 1px)".concat(" solid ", DEFAULT_BORDER_COLOR),
|
|
244
|
-
borderRadius: "var(--ds-radius-small, 3px)",
|
|
245
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
246
|
-
backgroundColor: currentColor || 'transparent',
|
|
247
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
248
|
-
width: ((_props$size5 = props.size) === null || _props$size5 === void 0 ? void 0 : _props$size5.width) || '14px',
|
|
249
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
250
|
-
height: ((_props$size6 = props.size) === null || _props$size6 === void 0 ? void 0 : _props$size6.height) || '14px',
|
|
251
213
|
marginTop: "var(--ds-space-025, 2px)"
|
|
252
214
|
}
|
|
253
215
|
});
|
|
@@ -257,7 +219,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
257
219
|
}, jsx(Tooltip, {
|
|
258
220
|
content: title,
|
|
259
221
|
position: "top"
|
|
260
|
-
},
|
|
222
|
+
}, jsx("div", {
|
|
261
223
|
css: colorPickerButtonStyle
|
|
262
224
|
}, jsx(Button, {
|
|
263
225
|
appearance: 'subtle',
|
|
@@ -287,33 +249,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
|
|
|
287
249
|
spacing: "spacious",
|
|
288
250
|
label: "color-picker-chevron-down",
|
|
289
251
|
size: "small"
|
|
290
|
-
})))))
|
|
291
|
-
appearance: 'subtle',
|
|
292
|
-
ref: buttonRef,
|
|
293
|
-
"aria-label": title,
|
|
294
|
-
"aria-expanded": props.isAriaExpanded ? isPopupOpen : undefined,
|
|
295
|
-
spacing: "compact",
|
|
296
|
-
onClick: togglePopup,
|
|
297
|
-
onKeyDown: function onKeyDown(event) {
|
|
298
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
299
|
-
event.preventDefault();
|
|
300
|
-
togglePopup();
|
|
301
|
-
setIsOpenedByKeyboard(true);
|
|
302
|
-
}
|
|
303
|
-
}
|
|
304
|
-
// eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides
|
|
305
|
-
,
|
|
306
|
-
css: buttonStyle,
|
|
307
|
-
iconAfter: jsx(Box, {
|
|
308
|
-
xcss: colorPickerExpandContainer
|
|
309
|
-
}, jsx(ChevronDownIcon, {
|
|
310
|
-
color: "currentColor",
|
|
311
|
-
spacing: "spacious",
|
|
312
|
-
label: "color-picker-chevron-down",
|
|
313
|
-
size: "small"
|
|
314
|
-
})),
|
|
315
|
-
"data-selected-color": props.currentColor
|
|
316
|
-
})), renderPopup());
|
|
252
|
+
})))))), renderPopup());
|
|
317
253
|
};
|
|
318
254
|
export default withAnalyticsContext({
|
|
319
255
|
source: 'ConfigPanel'
|
|
@@ -11,7 +11,7 @@ export { isIgnored } from './gap-cursor/utils/is-ignored';
|
|
|
11
11
|
export { isValidTargetNode } from './gap-cursor/utils/is-valid-target-node';
|
|
12
12
|
export { setGapCursorSelection } from './gap-cursor/utils/setGapCursorSelection';
|
|
13
13
|
export { hideCaretModifier, gapCursorStyles } from './gap-cursor/styles';
|
|
14
|
-
export { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, atTheEndOfDoc, deleteSelectedRange, endPositionOfParent, expandSelectionBounds, expandSelectionToBlockRange, expandToBlockRange, isSelectionAtEndOfNode, isSelectionAtStartOfNode, startPositionOfParent, } from './utils';
|
|
14
|
+
export { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, atTheEndOfDoc, deleteSelectedRange, endPositionOfParent, expandSelectionBounds, expandSelectionToBlockRange, expandToBlockRange, isMultiBlockRange, isMultiBlockSelection, isSelectionAtEndOfNode, isSelectionAtStartOfNode, startPositionOfParent, } from './utils';
|
|
15
15
|
export declare function getNodeSelectionAnalyticsPayload(selection: Selection): AnalyticsEventPayload | undefined;
|
|
16
16
|
export declare function getAllSelectionAnalyticsPayload(selection: Selection): AnalyticsEventPayload | undefined;
|
|
17
17
|
export declare function getCellSelectionAnalyticsPayload(state: EditorState): AnalyticsEventPayload | undefined;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
|
|
1
|
+
import type { NodeRange, Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
import { type Selection } from '@atlaskit/editor-prosemirror/state';
|
|
4
4
|
export declare const isSelectionAtStartOfNode: ($pos: ResolvedPos, parentNode?: PMNode) => boolean;
|
|
@@ -46,7 +46,7 @@ export declare const expandToBlockRange: ($from: ResolvedPos, $to: ResolvedPos,
|
|
|
46
46
|
} | {
|
|
47
47
|
$from: ResolvedPos;
|
|
48
48
|
$to: ResolvedPos;
|
|
49
|
-
range:
|
|
49
|
+
range: NodeRange;
|
|
50
50
|
};
|
|
51
51
|
/**
|
|
52
52
|
* Expands a given selection to a block range, considering specific node types that require expansion.
|
|
@@ -67,5 +67,10 @@ export declare const expandSelectionToBlockRange: ({ $from, $to }: Selection) =>
|
|
|
67
67
|
} | {
|
|
68
68
|
$from: ResolvedPos;
|
|
69
69
|
$to: ResolvedPos;
|
|
70
|
-
range:
|
|
70
|
+
range: NodeRange;
|
|
71
71
|
};
|
|
72
|
+
export declare const isMultiBlockRange: (range: NodeRange) => boolean;
|
|
73
|
+
/**
|
|
74
|
+
* Determines if a selection contains multiple block nodes.
|
|
75
|
+
*/
|
|
76
|
+
export declare function isMultiBlockSelection(selection: Selection): boolean;
|
|
@@ -11,7 +11,7 @@ export { isIgnored } from './gap-cursor/utils/is-ignored';
|
|
|
11
11
|
export { isValidTargetNode } from './gap-cursor/utils/is-valid-target-node';
|
|
12
12
|
export { setGapCursorSelection } from './gap-cursor/utils/setGapCursorSelection';
|
|
13
13
|
export { hideCaretModifier, gapCursorStyles } from './gap-cursor/styles';
|
|
14
|
-
export { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, atTheEndOfDoc, deleteSelectedRange, endPositionOfParent, expandSelectionBounds, expandSelectionToBlockRange, expandToBlockRange, isSelectionAtEndOfNode, isSelectionAtStartOfNode, startPositionOfParent, } from './utils';
|
|
14
|
+
export { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, atTheEndOfDoc, deleteSelectedRange, endPositionOfParent, expandSelectionBounds, expandSelectionToBlockRange, expandToBlockRange, isMultiBlockRange, isMultiBlockSelection, isSelectionAtEndOfNode, isSelectionAtStartOfNode, startPositionOfParent, } from './utils';
|
|
15
15
|
export declare function getNodeSelectionAnalyticsPayload(selection: Selection): AnalyticsEventPayload | undefined;
|
|
16
16
|
export declare function getAllSelectionAnalyticsPayload(selection: Selection): AnalyticsEventPayload | undefined;
|
|
17
17
|
export declare function getCellSelectionAnalyticsPayload(state: EditorState): AnalyticsEventPayload | undefined;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
|
|
1
|
+
import type { NodeRange, Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
import { type Selection } from '@atlaskit/editor-prosemirror/state';
|
|
4
4
|
export declare const isSelectionAtStartOfNode: ($pos: ResolvedPos, parentNode?: PMNode) => boolean;
|
|
@@ -46,7 +46,7 @@ export declare const expandToBlockRange: ($from: ResolvedPos, $to: ResolvedPos,
|
|
|
46
46
|
} | {
|
|
47
47
|
$from: ResolvedPos;
|
|
48
48
|
$to: ResolvedPos;
|
|
49
|
-
range:
|
|
49
|
+
range: NodeRange;
|
|
50
50
|
};
|
|
51
51
|
/**
|
|
52
52
|
* Expands a given selection to a block range, considering specific node types that require expansion.
|
|
@@ -67,5 +67,10 @@ export declare const expandSelectionToBlockRange: ({ $from, $to }: Selection) =>
|
|
|
67
67
|
} | {
|
|
68
68
|
$from: ResolvedPos;
|
|
69
69
|
$to: ResolvedPos;
|
|
70
|
-
range:
|
|
70
|
+
range: NodeRange;
|
|
71
71
|
};
|
|
72
|
+
export declare const isMultiBlockRange: (range: NodeRange) => boolean;
|
|
73
|
+
/**
|
|
74
|
+
* Determines if a selection contains multiple block nodes.
|
|
75
|
+
*/
|
|
76
|
+
export declare function isMultiBlockSelection(selection: Selection): boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-common",
|
|
3
|
-
"version": "111.0
|
|
3
|
+
"version": "111.1.0",
|
|
4
4
|
"description": "A package that contains common classes and components for editor and renderer",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@atlaskit/codemod-utils": "^4.2.0",
|
|
42
42
|
"@atlaskit/css": "^0.19.0",
|
|
43
43
|
"@atlaskit/custom-steps": "^0.16.0",
|
|
44
|
-
"@atlaskit/dropdown-menu": "^16.
|
|
44
|
+
"@atlaskit/dropdown-menu": "^16.4.0",
|
|
45
45
|
"@atlaskit/editor-json-transformer": "^8.31.0",
|
|
46
46
|
"@atlaskit/editor-palette": "^2.1.0",
|
|
47
47
|
"@atlaskit/editor-prosemirror": "^7.2.0",
|
|
@@ -52,10 +52,10 @@
|
|
|
52
52
|
"@atlaskit/emoji": "^69.9.0",
|
|
53
53
|
"@atlaskit/icon": "^29.3.0",
|
|
54
54
|
"@atlaskit/icon-object": "^7.4.0",
|
|
55
|
-
"@atlaskit/link": "^3.
|
|
55
|
+
"@atlaskit/link": "^3.3.0",
|
|
56
56
|
"@atlaskit/link-datasource": "^4.30.0",
|
|
57
57
|
"@atlaskit/link-picker": "^4.2.0",
|
|
58
|
-
"@atlaskit/media-card": "^79.
|
|
58
|
+
"@atlaskit/media-card": "^79.12.0",
|
|
59
59
|
"@atlaskit/media-client": "^35.7.0",
|
|
60
60
|
"@atlaskit/media-client-react": "^4.1.0",
|
|
61
61
|
"@atlaskit/media-common": "^12.3.0",
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"@atlaskit/prosemirror-history": "^0.2.0",
|
|
75
75
|
"@atlaskit/react-ufo": "^4.16.0",
|
|
76
76
|
"@atlaskit/section-message": "^8.11.0",
|
|
77
|
-
"@atlaskit/smart-card": "^43.
|
|
77
|
+
"@atlaskit/smart-card": "^43.18.0",
|
|
78
78
|
"@atlaskit/smart-user-picker": "^8.5.0",
|
|
79
79
|
"@atlaskit/spinner": "^19.0.0",
|
|
80
80
|
"@atlaskit/status": "^3.0.0",
|