@atlaskit/editor-plugin-floating-toolbar 21.1.0 → 21.2.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 +21 -0
- package/dist/cjs/floatingToolbarPlugin.js +3 -1
- package/dist/cjs/ui/CheckboxModal.js +1 -1
- package/dist/cjs/ui/ExtensionsPlaceholder.js +1 -1
- package/dist/cjs/ui/SimpleModal.js +1 -1
- package/dist/cjs/ui/Toolbar.js +23 -13
- package/dist/es2019/entry-points/floatingToolbarPlugin.js +1 -0
- package/dist/es2019/floatingToolbarPlugin.js +3 -1
- package/dist/es2019/ui/CheckboxModal.js +1 -1
- package/dist/es2019/ui/ExtensionsPlaceholder.js +2 -2
- package/dist/es2019/ui/SimpleModal.js +1 -1
- package/dist/es2019/ui/Toolbar.js +20 -8
- package/dist/esm/entry-points/floatingToolbarPlugin.js +1 -0
- package/dist/esm/floatingToolbarPlugin.js +3 -1
- package/dist/esm/ui/CheckboxModal.js +1 -1
- package/dist/esm/ui/ExtensionsPlaceholder.js +2 -2
- package/dist/esm/ui/SimpleModal.js +1 -1
- package/dist/esm/ui/Toolbar.js +24 -13
- package/dist/types/ui/Toolbar.d.ts +2 -0
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-floating-toolbar
|
|
2
2
|
|
|
3
|
+
## 21.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`9df8889f51f21`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9df8889f51f21) -
|
|
8
|
+
Add an opt-in LinkPickerOptions.popupContainerSurface ('default' | 'none') that lets a custom link
|
|
9
|
+
picker component (e.g. RovoLinkPicker) suppress the editor's floating toolbar popup surface
|
|
10
|
+
(background, box-shadow, border-radius, padding) when it renders its own complete surface.
|
|
11
|
+
Threaded through FloatingToolbarConfig/Toolbar's new containerSurface prop. Defaults to the
|
|
12
|
+
existing wrapper surface; only a caller that explicitly opts in is affected.
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
18
|
+
## 21.1.1
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- Updated dependencies
|
|
23
|
+
|
|
3
24
|
## 21.1.0
|
|
4
25
|
|
|
5
26
|
### Minor Changes
|
|
@@ -292,6 +292,7 @@ function ContentComponent(_ref5) {
|
|
|
292
292
|
align = _config$align === void 0 ? 'center' : _config$align,
|
|
293
293
|
_config$className = config.className,
|
|
294
294
|
className = _config$className === void 0 ? '' : _config$className,
|
|
295
|
+
containerSurface = config.containerSurface,
|
|
295
296
|
height = config.height,
|
|
296
297
|
width = config.width,
|
|
297
298
|
zIndex = config.zIndex,
|
|
@@ -468,7 +469,8 @@ function ContentComponent(_ref5) {
|
|
|
468
469
|
editorView: editorView
|
|
469
470
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
470
471
|
,
|
|
471
|
-
className: className
|
|
472
|
+
className: className,
|
|
473
|
+
containerSurface: containerSurface
|
|
472
474
|
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
473
475
|
,
|
|
474
476
|
focusEditor: function focusEditor() {
|
|
@@ -12,8 +12,8 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
12
12
|
var _button = _interopRequireDefault(require("@atlaskit/button/default/button"));
|
|
13
13
|
var _checkbox = require("@atlaskit/checkbox/checkbox");
|
|
14
14
|
var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
|
|
15
|
-
var _modalDialog = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-dialog"));
|
|
16
15
|
var _modalBody = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-body"));
|
|
16
|
+
var _modalDialog = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-dialog"));
|
|
17
17
|
var _modalFooter = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-footer"));
|
|
18
18
|
var _modalHeader = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-header"));
|
|
19
19
|
var _modalTitle = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-title"));
|
|
@@ -11,13 +11,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
|
|
|
11
11
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
var _reactLoadable = _interopRequireDefault(require("react-loadable"));
|
|
14
|
+
var _reactLooselyLazy = require("react-loosely-lazy");
|
|
14
15
|
var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
|
|
15
16
|
var _extensions = require("@atlaskit/editor-common/extensions");
|
|
16
17
|
var _nesting = require("@atlaskit/editor-common/nesting");
|
|
17
18
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
18
19
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
19
20
|
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
|
|
20
|
-
var _reactLooselyLazy = require("react-loosely-lazy");
|
|
21
21
|
var _Dropdown = _interopRequireDefault(require("./Dropdown"));
|
|
22
22
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
|
|
23
23
|
// oxlint-disable-next-line @atlassian/no-restricted-imports
|
|
@@ -8,8 +8,8 @@ exports.SimpleModal = void 0;
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _button = _interopRequireDefault(require("@atlaskit/button/default/button"));
|
|
10
10
|
var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
|
|
11
|
-
var _modalDialog = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-dialog"));
|
|
12
11
|
var _modalBody = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-body"));
|
|
12
|
+
var _modalDialog = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-dialog"));
|
|
13
13
|
var _modalFooter = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-footer"));
|
|
14
14
|
var _modalHeader = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-header"));
|
|
15
15
|
var _modalTitle = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-title"));
|
package/dist/cjs/ui/Toolbar.js
CHANGED
|
@@ -445,24 +445,33 @@ var buttonGroupStylesNew = (0, _react2.css)({
|
|
|
445
445
|
display: 'flex',
|
|
446
446
|
gap: "var(--ds-space-075, 6px)"
|
|
447
447
|
});
|
|
448
|
+
var toolbarContainerBase = (0, _react2.css)({
|
|
449
|
+
display: 'flex',
|
|
450
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
451
|
+
lineHeight: 1,
|
|
452
|
+
boxSizing: 'border-box',
|
|
453
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
454
|
+
'& > div > div': {
|
|
455
|
+
alignItems: 'center'
|
|
456
|
+
}
|
|
457
|
+
});
|
|
448
458
|
|
|
449
459
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
450
460
|
var toolbarContainer = function toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect, firstElementIsSelect) {
|
|
451
|
-
|
|
461
|
+
var containerSurface = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'default';
|
|
462
|
+
return (0, _react2.css)(
|
|
463
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
464
|
+
containerSurface === 'none' ? undefined : {
|
|
452
465
|
backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
|
|
453
466
|
borderRadius: "var(--ds-radius-small, 3px)",
|
|
454
|
-
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"
|
|
455
|
-
display: 'flex',
|
|
456
|
-
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
457
|
-
lineHeight: 1,
|
|
458
|
-
boxSizing: 'border-box',
|
|
459
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
460
|
-
'& > div > div': {
|
|
461
|
-
alignItems: 'center'
|
|
462
|
-
}
|
|
467
|
+
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"
|
|
463
468
|
},
|
|
464
469
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
465
|
-
|
|
470
|
+
containerSurface === 'none' ?
|
|
471
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
472
|
+
(0, _react2.css)({
|
|
473
|
+
padding: "var(--ds-space-0, 0px)"
|
|
474
|
+
}) : scrollable ?
|
|
466
475
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
467
476
|
(0, _react2.css)(
|
|
468
477
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
@@ -692,7 +701,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
|
|
|
692
701
|
}, {
|
|
693
702
|
key: "render",
|
|
694
703
|
value: function render() {
|
|
695
|
-
var _this$props$api2
|
|
704
|
+
var _this$props$api2,
|
|
705
|
+
_this2 = this;
|
|
696
706
|
var _this$props2 = this.props,
|
|
697
707
|
items = _this$props2.items,
|
|
698
708
|
className = _this$props2.className,
|
|
@@ -720,7 +730,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
|
|
|
720
730
|
}, (0, _react2.jsx)("div", {
|
|
721
731
|
ref: this.toolbarContainerRef,
|
|
722
732
|
css: function css() {
|
|
723
|
-
return [toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect)];
|
|
733
|
+
return [toolbarContainerBase, toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect, _this2.props.containerSurface)];
|
|
724
734
|
},
|
|
725
735
|
"aria-label": intl.formatMessage(_floatingToolbar.messages.floatingToolbarAriaLabel),
|
|
726
736
|
role: "toolbar",
|
|
@@ -283,6 +283,7 @@ export function ContentComponent({
|
|
|
283
283
|
getDomRef = getDomRefFromSelection,
|
|
284
284
|
align = 'center',
|
|
285
285
|
className = '',
|
|
286
|
+
containerSurface,
|
|
286
287
|
height,
|
|
287
288
|
width,
|
|
288
289
|
zIndex,
|
|
@@ -450,7 +451,8 @@ export function ContentComponent({
|
|
|
450
451
|
editorView: editorView
|
|
451
452
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
452
453
|
,
|
|
453
|
-
className: className
|
|
454
|
+
className: className,
|
|
455
|
+
containerSurface: containerSurface
|
|
454
456
|
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
455
457
|
,
|
|
456
458
|
focusEditor: () => editorView.focus(),
|
|
@@ -3,8 +3,8 @@ import React, { useState } from 'react';
|
|
|
3
3
|
import Button from '@atlaskit/button/default/button';
|
|
4
4
|
import { Checkbox } from '@atlaskit/checkbox/checkbox';
|
|
5
5
|
import { messages } from '@atlaskit/editor-common/floating-toolbar';
|
|
6
|
-
import Modal from '@atlaskit/modal-dialog/modal-dialog';
|
|
7
6
|
import ModalBody from '@atlaskit/modal-dialog/modal-body';
|
|
7
|
+
import Modal from '@atlaskit/modal-dialog/modal-dialog';
|
|
8
8
|
import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
|
|
9
9
|
import ModalHeader from '@atlaskit/modal-dialog/modal-header';
|
|
10
10
|
import ModalTitle from '@atlaskit/modal-dialog/modal-title';
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React, { useEffect, useState } from 'react';
|
|
2
2
|
import Loadable from 'react-loadable';
|
|
3
|
+
// oxlint-disable-next-line @atlassian/no-restricted-imports
|
|
4
|
+
import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
|
|
3
5
|
import ButtonGroup from '@atlaskit/button/button-group';
|
|
4
6
|
import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common/extensions';
|
|
5
7
|
import { isNestedTablesSupported, isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
|
|
6
8
|
import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
|
|
7
9
|
import { nodeToJSON } from '@atlaskit/editor-common/utils';
|
|
8
10
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
9
|
-
// oxlint-disable-next-line @atlassian/no-restricted-imports
|
|
10
|
-
import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
|
|
11
11
|
import Dropdown from './Dropdown';
|
|
12
12
|
const noop = () => null;
|
|
13
13
|
const isDefaultExport = mod => {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import Button from '@atlaskit/button/default/button';
|
|
3
3
|
import { messages } from '@atlaskit/editor-common/floating-toolbar';
|
|
4
|
-
import Modal from '@atlaskit/modal-dialog/modal-dialog';
|
|
5
4
|
import ModalBody from '@atlaskit/modal-dialog/modal-body';
|
|
5
|
+
import Modal from '@atlaskit/modal-dialog/modal-dialog';
|
|
6
6
|
import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
|
|
7
7
|
import ModalHeader from '@atlaskit/modal-dialog/modal-header';
|
|
8
8
|
import ModalTitle from '@atlaskit/modal-dialog/modal-title';
|
|
@@ -5,6 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
5
5
|
* @jsxRuntime classic
|
|
6
6
|
* @jsx jsx
|
|
7
7
|
*/
|
|
8
|
+
|
|
8
9
|
import React, { Component } from 'react';
|
|
9
10
|
|
|
10
11
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
@@ -412,12 +413,7 @@ const buttonGroupStylesNew = css({
|
|
|
412
413
|
display: 'flex',
|
|
413
414
|
gap: "var(--ds-space-075, 6px)"
|
|
414
415
|
});
|
|
415
|
-
|
|
416
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
417
|
-
const toolbarContainer = (areAnyNewToolbarFlagsEnabled, scrollable, hasSelect, firstElementIsSelect) => css({
|
|
418
|
-
backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
|
|
419
|
-
borderRadius: "var(--ds-radius-small, 3px)",
|
|
420
|
-
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
|
|
416
|
+
const toolbarContainerBase = css({
|
|
421
417
|
display: 'flex',
|
|
422
418
|
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
423
419
|
lineHeight: 1,
|
|
@@ -426,9 +422,25 @@ const toolbarContainer = (areAnyNewToolbarFlagsEnabled, scrollable, hasSelect, f
|
|
|
426
422
|
'& > div > div': {
|
|
427
423
|
alignItems: 'center'
|
|
428
424
|
}
|
|
425
|
+
});
|
|
426
|
+
|
|
427
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
428
|
+
const toolbarContainer = (areAnyNewToolbarFlagsEnabled, scrollable, hasSelect, firstElementIsSelect,
|
|
429
|
+
// See `FloatingToolbarConfig.containerSurface`: 'none' is for a single custom item that
|
|
430
|
+
// already renders its own complete surface, so this wrapper's own surface is omitted.
|
|
431
|
+
containerSurface = 'default') => css(
|
|
432
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
433
|
+
containerSurface === 'none' ? undefined : {
|
|
434
|
+
backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
|
|
435
|
+
borderRadius: "var(--ds-radius-small, 3px)",
|
|
436
|
+
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"
|
|
429
437
|
},
|
|
430
438
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
431
|
-
|
|
439
|
+
containerSurface === 'none' ?
|
|
440
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
441
|
+
css({
|
|
442
|
+
padding: "var(--ds-space-0, 0px)"
|
|
443
|
+
}) : scrollable ?
|
|
432
444
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
433
445
|
css(
|
|
434
446
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
@@ -673,7 +685,7 @@ class Toolbar extends Component {
|
|
|
673
685
|
intl: intl
|
|
674
686
|
}, jsx("div", {
|
|
675
687
|
ref: this.toolbarContainerRef,
|
|
676
|
-
css: () => [toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect)],
|
|
688
|
+
css: () => [toolbarContainerBase, toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect, this.props.containerSurface)],
|
|
677
689
|
"aria-label": intl.formatMessage(messages.floatingToolbarAriaLabel),
|
|
678
690
|
role: "toolbar",
|
|
679
691
|
"data-testid": "editor-floating-toolbar"
|
|
@@ -282,6 +282,7 @@ export function ContentComponent(_ref5) {
|
|
|
282
282
|
align = _config$align === void 0 ? 'center' : _config$align,
|
|
283
283
|
_config$className = config.className,
|
|
284
284
|
className = _config$className === void 0 ? '' : _config$className,
|
|
285
|
+
containerSurface = config.containerSurface,
|
|
285
286
|
height = config.height,
|
|
286
287
|
width = config.width,
|
|
287
288
|
zIndex = config.zIndex,
|
|
@@ -458,7 +459,8 @@ export function ContentComponent(_ref5) {
|
|
|
458
459
|
editorView: editorView
|
|
459
460
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
460
461
|
,
|
|
461
|
-
className: className
|
|
462
|
+
className: className,
|
|
463
|
+
containerSurface: containerSurface
|
|
462
464
|
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
463
465
|
,
|
|
464
466
|
focusEditor: function focusEditor() {
|
|
@@ -4,8 +4,8 @@ import React, { useState } from 'react';
|
|
|
4
4
|
import Button from '@atlaskit/button/default/button';
|
|
5
5
|
import { Checkbox } from '@atlaskit/checkbox/checkbox';
|
|
6
6
|
import { messages } from '@atlaskit/editor-common/floating-toolbar';
|
|
7
|
-
import Modal from '@atlaskit/modal-dialog/modal-dialog';
|
|
8
7
|
import ModalBody from '@atlaskit/modal-dialog/modal-body';
|
|
8
|
+
import Modal from '@atlaskit/modal-dialog/modal-dialog';
|
|
9
9
|
import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
|
|
10
10
|
import ModalHeader from '@atlaskit/modal-dialog/modal-header';
|
|
11
11
|
import ModalTitle from '@atlaskit/modal-dialog/modal-title';
|
|
@@ -3,14 +3,14 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
|
3
3
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
4
4
|
import React, { useEffect, useState } from 'react';
|
|
5
5
|
import Loadable from 'react-loadable';
|
|
6
|
+
// oxlint-disable-next-line @atlassian/no-restricted-imports
|
|
7
|
+
import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
|
|
6
8
|
import ButtonGroup from '@atlaskit/button/button-group';
|
|
7
9
|
import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common/extensions';
|
|
8
10
|
import { isNestedTablesSupported, isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
|
|
9
11
|
import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
|
|
10
12
|
import { nodeToJSON } from '@atlaskit/editor-common/utils';
|
|
11
13
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
12
|
-
// oxlint-disable-next-line @atlassian/no-restricted-imports
|
|
13
|
-
import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
|
|
14
14
|
import Dropdown from './Dropdown';
|
|
15
15
|
var noop = function noop() {
|
|
16
16
|
return null;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import Button from '@atlaskit/button/default/button';
|
|
3
3
|
import { messages } from '@atlaskit/editor-common/floating-toolbar';
|
|
4
|
-
import Modal from '@atlaskit/modal-dialog/modal-dialog';
|
|
5
4
|
import ModalBody from '@atlaskit/modal-dialog/modal-body';
|
|
5
|
+
import Modal from '@atlaskit/modal-dialog/modal-dialog';
|
|
6
6
|
import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
|
|
7
7
|
import ModalHeader from '@atlaskit/modal-dialog/modal-header';
|
|
8
8
|
import ModalTitle from '@atlaskit/modal-dialog/modal-title';
|
package/dist/esm/ui/Toolbar.js
CHANGED
|
@@ -14,6 +14,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
14
14
|
* @jsxRuntime classic
|
|
15
15
|
* @jsx jsx
|
|
16
16
|
*/
|
|
17
|
+
|
|
17
18
|
import React, { Component } from 'react';
|
|
18
19
|
|
|
19
20
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
@@ -439,24 +440,33 @@ var buttonGroupStylesNew = css({
|
|
|
439
440
|
display: 'flex',
|
|
440
441
|
gap: "var(--ds-space-075, 6px)"
|
|
441
442
|
});
|
|
443
|
+
var toolbarContainerBase = css({
|
|
444
|
+
display: 'flex',
|
|
445
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
446
|
+
lineHeight: 1,
|
|
447
|
+
boxSizing: 'border-box',
|
|
448
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
449
|
+
'& > div > div': {
|
|
450
|
+
alignItems: 'center'
|
|
451
|
+
}
|
|
452
|
+
});
|
|
442
453
|
|
|
443
454
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
444
455
|
var toolbarContainer = function toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect, firstElementIsSelect) {
|
|
445
|
-
|
|
456
|
+
var containerSurface = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'default';
|
|
457
|
+
return css(
|
|
458
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
459
|
+
containerSurface === 'none' ? undefined : {
|
|
446
460
|
backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
|
|
447
461
|
borderRadius: "var(--ds-radius-small, 3px)",
|
|
448
|
-
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"
|
|
449
|
-
display: 'flex',
|
|
450
|
-
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
451
|
-
lineHeight: 1,
|
|
452
|
-
boxSizing: 'border-box',
|
|
453
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
454
|
-
'& > div > div': {
|
|
455
|
-
alignItems: 'center'
|
|
456
|
-
}
|
|
462
|
+
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"
|
|
457
463
|
},
|
|
458
464
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
459
|
-
|
|
465
|
+
containerSurface === 'none' ?
|
|
466
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
467
|
+
css({
|
|
468
|
+
padding: "var(--ds-space-0, 0px)"
|
|
469
|
+
}) : scrollable ?
|
|
460
470
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
461
471
|
css(
|
|
462
472
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
@@ -686,7 +696,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
|
|
|
686
696
|
}, {
|
|
687
697
|
key: "render",
|
|
688
698
|
value: function render() {
|
|
689
|
-
var _this$props$api2
|
|
699
|
+
var _this$props$api2,
|
|
700
|
+
_this2 = this;
|
|
690
701
|
var _this$props2 = this.props,
|
|
691
702
|
items = _this$props2.items,
|
|
692
703
|
className = _this$props2.className,
|
|
@@ -714,7 +725,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
|
|
|
714
725
|
}, jsx("div", {
|
|
715
726
|
ref: this.toolbarContainerRef,
|
|
716
727
|
css: function css() {
|
|
717
|
-
return [toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect)];
|
|
728
|
+
return [toolbarContainerBase, toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect, _this2.props.containerSurface)];
|
|
718
729
|
},
|
|
719
730
|
"aria-label": intl.formatMessage(messages.floatingToolbarAriaLabel),
|
|
720
731
|
role: "toolbar",
|
|
@@ -15,6 +15,8 @@ import type { FloatingToolbarPlugin } from '../floatingToolbarPluginType';
|
|
|
15
15
|
export interface Props {
|
|
16
16
|
api: ExtractInjectionAPI<FloatingToolbarPlugin> | undefined;
|
|
17
17
|
className?: string;
|
|
18
|
+
/** See `FloatingToolbarConfig.containerSurface`. Defaults to `'default'`. */
|
|
19
|
+
containerSurface?: 'default' | 'none';
|
|
18
20
|
dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
|
|
19
21
|
dispatchCommand: (command?: Function) => void;
|
|
20
22
|
editorView?: EditorView;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-floating-toolbar",
|
|
3
|
-
"version": "21.
|
|
3
|
+
"version": "21.2.0",
|
|
4
4
|
"description": "Floating toolbar plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"atlaskit:src": "src/index.ts",
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@atlaskit/adf-utils": "^20.9.0",
|
|
25
|
-
"@atlaskit/button": "^25.
|
|
25
|
+
"@atlaskit/button": "^25.4.0",
|
|
26
26
|
"@atlaskit/checkbox": "^19.2.0",
|
|
27
27
|
"@atlaskit/editor-palette": "^3.5.0",
|
|
28
28
|
"@atlaskit/editor-plugin-analytics": "^19.0.0",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"@atlaskit/platform-feature-flags": "^2.2.0",
|
|
45
45
|
"@atlaskit/primitives": "^22.5.0",
|
|
46
46
|
"@atlaskit/select": "^22.11.0",
|
|
47
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
47
|
+
"@atlaskit/tmp-editor-statsig": "^201.0.0",
|
|
48
48
|
"@atlaskit/tokens": "^18.2.0",
|
|
49
49
|
"@atlaskit/tooltip": "^24.3.0",
|
|
50
50
|
"@babel/runtime": "^7.0.0",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"react-loosely-lazy": "^1.0.0"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
|
-
"@atlaskit/editor-common": "^123.
|
|
59
|
+
"@atlaskit/editor-common": "^123.4.0",
|
|
60
60
|
"react": "^18.2.0 || ^19.2.0",
|
|
61
61
|
"react-dom": "^18.2.0 || ^19.2.0",
|
|
62
62
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|