@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 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
@@ -35,6 +35,9 @@
35
35
  {
36
36
  "path": "../../editor-toolbar-model/afm-cc/tsconfig.json"
37
37
  },
38
+ {
39
+ "path": "../../tmp-editor-statsig/afm-cc/tsconfig.json"
40
+ },
38
41
  {
39
42
  "path": "../../editor-common/afm-cc/tsconfig.json"
40
43
  }
@@ -35,6 +35,9 @@
35
35
  {
36
36
  "path": "../../editor-toolbar-model/afm-dev-agents/tsconfig.json"
37
37
  },
38
+ {
39
+ "path": "../../tmp-editor-statsig/afm-dev-agents/tsconfig.json"
40
+ },
38
41
  {
39
42
  "path": "../../editor-common/afm-dev-agents/tsconfig.json"
40
43
  }
@@ -35,6 +35,9 @@
35
35
  {
36
36
  "path": "../../editor-toolbar-model/afm-jira/tsconfig.json"
37
37
  },
38
+ {
39
+ "path": "../../tmp-editor-statsig/afm-jira/tsconfig.json"
40
+ },
38
41
  {
39
42
  "path": "../../editor-common/afm-jira/tsconfig.json"
40
43
  }
@@ -35,6 +35,9 @@
35
35
  {
36
36
  "path": "../../editor-toolbar-model/afm-passionfruit/tsconfig.json"
37
37
  },
38
+ {
39
+ "path": "../../tmp-editor-statsig/afm-passionfruit/tsconfig.json"
40
+ },
38
41
  {
39
42
  "path": "../../editor-common/afm-passionfruit/tsconfig.json"
40
43
  }
@@ -35,6 +35,9 @@
35
35
  {
36
36
  "path": "../../editor-toolbar-model/afm-post-office/tsconfig.json"
37
37
  },
38
+ {
39
+ "path": "../../tmp-editor-statsig/afm-post-office/tsconfig.json"
40
+ },
38
41
  {
39
42
  "path": "../../editor-common/afm-post-office/tsconfig.json"
40
43
  }
@@ -35,6 +35,9 @@
35
35
  {
36
36
  "path": "../../editor-toolbar-model/afm-rovo-extension/tsconfig.json"
37
37
  },
38
+ {
39
+ "path": "../../tmp-editor-statsig/afm-rovo-extension/tsconfig.json"
40
+ },
38
41
  {
39
42
  "path": "../../editor-common/afm-rovo-extension/tsconfig.json"
40
43
  }
@@ -35,6 +35,9 @@
35
35
  {
36
36
  "path": "../../editor-toolbar-model/afm-townsquare/tsconfig.json"
37
37
  },
38
+ {
39
+ "path": "../../tmp-editor-statsig/afm-townsquare/tsconfig.json"
40
+ },
38
41
  {
39
42
  "path": "../../editor-common/afm-townsquare/tsconfig.json"
40
43
  }
@@ -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.1",
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.23.0",
46
+ "@atlaskit/editor-common": "^107.25.0",
46
47
  "react": "^18.2.0"
47
48
  },
48
49
  "techstack": {