@atlaskit/editor-plugin-toolbar 0.2.1 → 0.2.3
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 +23 -0
- package/afm-cc/tsconfig.json +3 -0
- package/afm-dev-agents/tsconfig.json +3 -0
- package/afm-jira/tsconfig.json +3 -0
- package/afm-passionfruit/tsconfig.json +3 -0
- package/afm-post-office/tsconfig.json +3 -0
- package/afm-rovo-extension/tsconfig.json +3 -0
- package/afm-townsquare/tsconfig.json +3 -0
- package/dist/cjs/toolbarPlugin.js +4 -2
- package/dist/cjs/ui/SelectionToolbar/index.js +7 -3
- package/dist/es2019/toolbarPlugin.js +4 -2
- package/dist/es2019/ui/SelectionToolbar/index.js +7 -3
- package/dist/esm/toolbarPlugin.js +4 -2
- package/dist/esm/ui/SelectionToolbar/index.js +7 -3
- package/dist/types/ui/SelectionToolbar/index.d.ts +2 -1
- package/dist/types-ts4.5/ui/SelectionToolbar/index.d.ts +2 -1
- package/package.json +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-toolbar
|
|
2
2
|
|
|
3
|
+
## 0.2.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 0.2.2
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`3145f278b1f7a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3145f278b1f7a) -
|
|
14
|
+
[ux] [ED-28473] minor UI updates for editor-toolbar
|
|
15
|
+
|
|
16
|
+
- Use ADS ButtonGroup for ToolbarButtonGroup
|
|
17
|
+
- Remove groupLocation prop and use CSS instead
|
|
18
|
+
- Use DropdownItemGroup for ToolbarDropdownItemSection and expand props for section separator and
|
|
19
|
+
title
|
|
20
|
+
- Support ReactNode as content for ToolbarTooltip and add missing shortcuts in tooltips
|
|
21
|
+
- Center Icons for split buttons and make chevron icon 24px wide
|
|
22
|
+
- Align dropdown menu UI with current editor design
|
|
23
|
+
|
|
24
|
+
- Updated dependencies
|
|
25
|
+
|
|
3
26
|
## 0.2.1
|
|
4
27
|
|
|
5
28
|
### Patch Changes
|
package/afm-cc/tsconfig.json
CHANGED
package/afm-jira/tsconfig.json
CHANGED
|
@@ -24,10 +24,12 @@ var toolbarPlugin = exports.toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
26
|
contentComponent: function contentComponent(_ref2) {
|
|
27
|
-
var editorView = _ref2.editorView
|
|
27
|
+
var editorView = _ref2.editorView,
|
|
28
|
+
popupsMountPoint = _ref2.popupsMountPoint;
|
|
28
29
|
return /*#__PURE__*/_react.default.createElement(_SelectionToolbar.SelectionToolbar, {
|
|
29
30
|
api: api,
|
|
30
|
-
editorView: editorView
|
|
31
|
+
editorView: editorView,
|
|
32
|
+
mountPoint: popupsMountPoint
|
|
31
33
|
});
|
|
32
34
|
}
|
|
33
35
|
};
|
|
@@ -15,13 +15,15 @@ var _state = require("@atlaskit/editor-prosemirror/state");
|
|
|
15
15
|
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
|
|
16
16
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
17
17
|
var _editorToolbarModel = require("@atlaskit/editor-toolbar-model");
|
|
18
|
+
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
18
19
|
var _consts = require("../consts");
|
|
19
20
|
var isToolbarComponent = function isToolbarComponent(component) {
|
|
20
21
|
return component.type === 'toolbar' && component.key === 'inline-text-toolbar';
|
|
21
22
|
};
|
|
22
23
|
var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref) {
|
|
23
24
|
var api = _ref.api,
|
|
24
|
-
editorView = _ref.editorView
|
|
25
|
+
editorView = _ref.editorView,
|
|
26
|
+
mountPoint = _ref.mountPoint;
|
|
25
27
|
var components = api === null || api === void 0 ? void 0 : api.toolbar.actions.getComponents();
|
|
26
28
|
var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
|
|
27
29
|
return isToolbarComponent(component);
|
|
@@ -31,10 +33,11 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
|
|
|
31
33
|
// @ts-expect-error
|
|
32
34
|
var selection = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'selection.selection');
|
|
33
35
|
var isTextSelection = !editorView.state.selection.empty && editorView.state.selection instanceof _state.TextSelection;
|
|
36
|
+
var isCellSelection = !editorView.state.selection.empty && '$anchorCell' in editorView.state.selection;
|
|
34
37
|
if (!components || !toolbar) {
|
|
35
38
|
return null;
|
|
36
39
|
}
|
|
37
|
-
if (!isTextSelection || currentUserIntent === 'dragging' || (0, _coreUtils.isSSR)()) {
|
|
40
|
+
if (!(isTextSelection || isCellSelection) || currentUserIntent === 'dragging' || currentUserIntent === 'blockMenuOpen' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) || (0, _coreUtils.isSSR)()) {
|
|
38
41
|
return null;
|
|
39
42
|
}
|
|
40
43
|
return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
|
|
@@ -42,7 +45,8 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
|
|
|
42
45
|
target: getDomRefFromSelection(editorView),
|
|
43
46
|
onPositionCalculated: function onPositionCalculated(position) {
|
|
44
47
|
return (0, _utils.calculateToolbarPositionTrackHead)(_consts.TOOLBAR_LABEL)(editorView, position);
|
|
45
|
-
}
|
|
48
|
+
},
|
|
49
|
+
mountTo: mountPoint
|
|
46
50
|
}, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
|
|
47
51
|
editorView: editorView
|
|
48
52
|
}, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarUIProvider, {
|
|
@@ -18,11 +18,13 @@ export const toolbarPlugin = ({
|
|
|
18
18
|
}
|
|
19
19
|
},
|
|
20
20
|
contentComponent: ({
|
|
21
|
-
editorView
|
|
21
|
+
editorView,
|
|
22
|
+
popupsMountPoint
|
|
22
23
|
}) => {
|
|
23
24
|
return /*#__PURE__*/React.createElement(SelectionToolbar, {
|
|
24
25
|
api: api,
|
|
25
|
-
editorView: editorView
|
|
26
|
+
editorView: editorView,
|
|
27
|
+
mountPoint: popupsMountPoint
|
|
26
28
|
});
|
|
27
29
|
}
|
|
28
30
|
};
|
|
@@ -8,13 +8,15 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
|
8
8
|
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
9
9
|
import { ToolbarSection, ToolbarButtonGroup, ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
|
|
10
10
|
import { ToolbarModelRenderer } from '@atlaskit/editor-toolbar-model';
|
|
11
|
+
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
11
12
|
import { TOOLBAR_LABEL } from '../consts';
|
|
12
13
|
const isToolbarComponent = component => {
|
|
13
14
|
return component.type === 'toolbar' && component.key === 'inline-text-toolbar';
|
|
14
15
|
};
|
|
15
16
|
export const SelectionToolbar = ({
|
|
16
17
|
api,
|
|
17
|
-
editorView
|
|
18
|
+
editorView,
|
|
19
|
+
mountPoint
|
|
18
20
|
}) => {
|
|
19
21
|
const components = api === null || api === void 0 ? void 0 : api.toolbar.actions.getComponents();
|
|
20
22
|
const toolbar = components === null || components === void 0 ? void 0 : components.find(component => isToolbarComponent(component));
|
|
@@ -23,16 +25,18 @@ export const SelectionToolbar = ({
|
|
|
23
25
|
// @ts-expect-error
|
|
24
26
|
const selection = useSharedPluginStateSelector(api, 'selection.selection');
|
|
25
27
|
const isTextSelection = !editorView.state.selection.empty && editorView.state.selection instanceof TextSelection;
|
|
28
|
+
const isCellSelection = !editorView.state.selection.empty && '$anchorCell' in editorView.state.selection;
|
|
26
29
|
if (!components || !toolbar) {
|
|
27
30
|
return null;
|
|
28
31
|
}
|
|
29
|
-
if (!isTextSelection || currentUserIntent === 'dragging' || isSSR()) {
|
|
32
|
+
if (!(isTextSelection || isCellSelection) || currentUserIntent === 'dragging' || currentUserIntent === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || isSSR()) {
|
|
30
33
|
return null;
|
|
31
34
|
}
|
|
32
35
|
return /*#__PURE__*/React.createElement(Popup, {
|
|
33
36
|
offset: [0, 10],
|
|
34
37
|
target: getDomRefFromSelection(editorView),
|
|
35
|
-
onPositionCalculated: position => calculateToolbarPositionTrackHead(TOOLBAR_LABEL)(editorView, position)
|
|
38
|
+
onPositionCalculated: position => calculateToolbarPositionTrackHead(TOOLBAR_LABEL)(editorView, position),
|
|
39
|
+
mountTo: mountPoint
|
|
36
40
|
}, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
|
|
37
41
|
editorView: editorView
|
|
38
42
|
}, /*#__PURE__*/React.createElement(EditorToolbarUIProvider, {
|
|
@@ -17,10 +17,12 @@ export var toolbarPlugin = function toolbarPlugin(_ref) {
|
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
19
|
contentComponent: function contentComponent(_ref2) {
|
|
20
|
-
var editorView = _ref2.editorView
|
|
20
|
+
var editorView = _ref2.editorView,
|
|
21
|
+
popupsMountPoint = _ref2.popupsMountPoint;
|
|
21
22
|
return /*#__PURE__*/React.createElement(SelectionToolbar, {
|
|
22
23
|
api: api,
|
|
23
|
-
editorView: editorView
|
|
24
|
+
editorView: editorView,
|
|
25
|
+
mountPoint: popupsMountPoint
|
|
24
26
|
});
|
|
25
27
|
}
|
|
26
28
|
};
|
|
@@ -8,13 +8,15 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
|
8
8
|
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
9
9
|
import { ToolbarSection, ToolbarButtonGroup, ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
|
|
10
10
|
import { ToolbarModelRenderer } from '@atlaskit/editor-toolbar-model';
|
|
11
|
+
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
11
12
|
import { TOOLBAR_LABEL } from '../consts';
|
|
12
13
|
var isToolbarComponent = function isToolbarComponent(component) {
|
|
13
14
|
return component.type === 'toolbar' && component.key === 'inline-text-toolbar';
|
|
14
15
|
};
|
|
15
16
|
export var SelectionToolbar = function SelectionToolbar(_ref) {
|
|
16
17
|
var api = _ref.api,
|
|
17
|
-
editorView = _ref.editorView
|
|
18
|
+
editorView = _ref.editorView,
|
|
19
|
+
mountPoint = _ref.mountPoint;
|
|
18
20
|
var components = api === null || api === void 0 ? void 0 : api.toolbar.actions.getComponents();
|
|
19
21
|
var toolbar = components === null || components === void 0 ? void 0 : components.find(function (component) {
|
|
20
22
|
return isToolbarComponent(component);
|
|
@@ -24,10 +26,11 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
|
|
|
24
26
|
// @ts-expect-error
|
|
25
27
|
var selection = useSharedPluginStateSelector(api, 'selection.selection');
|
|
26
28
|
var isTextSelection = !editorView.state.selection.empty && editorView.state.selection instanceof TextSelection;
|
|
29
|
+
var isCellSelection = !editorView.state.selection.empty && '$anchorCell' in editorView.state.selection;
|
|
27
30
|
if (!components || !toolbar) {
|
|
28
31
|
return null;
|
|
29
32
|
}
|
|
30
|
-
if (!isTextSelection || currentUserIntent === 'dragging' || isSSR()) {
|
|
33
|
+
if (!(isTextSelection || isCellSelection) || currentUserIntent === 'dragging' || currentUserIntent === 'blockMenuOpen' && expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) || isSSR()) {
|
|
31
34
|
return null;
|
|
32
35
|
}
|
|
33
36
|
return /*#__PURE__*/React.createElement(Popup, {
|
|
@@ -35,7 +38,8 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
|
|
|
35
38
|
target: getDomRefFromSelection(editorView),
|
|
36
39
|
onPositionCalculated: function onPositionCalculated(position) {
|
|
37
40
|
return calculateToolbarPositionTrackHead(TOOLBAR_LABEL)(editorView, position);
|
|
38
|
-
}
|
|
41
|
+
},
|
|
42
|
+
mountTo: mountPoint
|
|
39
43
|
}, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
|
|
40
44
|
editorView: editorView
|
|
41
45
|
}, /*#__PURE__*/React.createElement(EditorToolbarUIProvider, {
|
|
@@ -5,6 +5,7 @@ import type { ToolbarPlugin } from '../../toolbarPluginType';
|
|
|
5
5
|
type SelectionToolbarProps = {
|
|
6
6
|
editorView: EditorView;
|
|
7
7
|
api?: ExtractInjectionAPI<ToolbarPlugin>;
|
|
8
|
+
mountPoint: HTMLElement | undefined;
|
|
8
9
|
};
|
|
9
|
-
export declare const SelectionToolbar: ({ api, editorView }: SelectionToolbarProps) => React.JSX.Element | null;
|
|
10
|
+
export declare const SelectionToolbar: ({ api, editorView, mountPoint }: SelectionToolbarProps) => React.JSX.Element | null;
|
|
10
11
|
export {};
|
|
@@ -5,6 +5,7 @@ import type { ToolbarPlugin } from '../../toolbarPluginType';
|
|
|
5
5
|
type SelectionToolbarProps = {
|
|
6
6
|
editorView: EditorView;
|
|
7
7
|
api?: ExtractInjectionAPI<ToolbarPlugin>;
|
|
8
|
+
mountPoint: HTMLElement | undefined;
|
|
8
9
|
};
|
|
9
|
-
export declare const SelectionToolbar: ({ api, editorView }: SelectionToolbarProps) => React.JSX.Element | null;
|
|
10
|
+
export declare const SelectionToolbar: ({ api, editorView, mountPoint }: SelectionToolbarProps) => React.JSX.Element | null;
|
|
10
11
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-toolbar",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"description": "Toolbar plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -38,11 +38,12 @@
|
|
|
38
38
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
39
39
|
"@atlaskit/editor-toolbar": "^0.3.0",
|
|
40
40
|
"@atlaskit/editor-toolbar-model": "^0.1.0",
|
|
41
|
+
"@atlaskit/tmp-editor-statsig": "^11.0.0",
|
|
41
42
|
"@babel/runtime": "^7.0.0",
|
|
42
43
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
43
44
|
},
|
|
44
45
|
"peerDependencies": {
|
|
45
|
-
"@atlaskit/editor-common": "^107.
|
|
46
|
+
"@atlaskit/editor-common": "^107.25.0",
|
|
46
47
|
"react": "^18.2.0"
|
|
47
48
|
},
|
|
48
49
|
"techstack": {
|