@atlaskit/editor-plugin-block-type 6.2.8 → 6.2.10

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/cjs/pm-plugins/ui/ToolbarBlockType/TextStylesMenuButton.js +27 -8
  3. package/dist/es2019/pm-plugins/ui/ToolbarBlockType/TextStylesMenuButton.js +26 -7
  4. package/dist/esm/pm-plugins/ui/ToolbarBlockType/TextStylesMenuButton.js +25 -7
  5. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlaskit/editor-plugin-block-type
2
2
 
3
+ ## 6.2.10
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 6.2.9
10
+
11
+ ### Patch Changes
12
+
13
+ - [`286abb4d35eba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/286abb4d35eba) -
14
+ [ux] [ED-28960] Finish full page primary toolbar migration
15
+
16
+ - Align with design update (separator, gap, height, icon size)
17
+ - Add keyboard shortcut to focus toolbar and arrow key navigation
18
+ - Address accessibility
19
+
20
+ - Updated dependencies
21
+
3
22
  ## 6.2.8
4
23
 
5
24
  ### Patch Changes
package/dist/cjs/pm-plugins/ui/ToolbarBlockType/TextStylesMenuButton.js CHANGED
@@ -1,16 +1,18 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
3
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.TextStylesMenuButton = void 0;
8
- var _react = _interopRequireDefault(require("react"));
8
+ var _react = _interopRequireWildcard(require("react"));
9
9
  var _reactIntlNext = require("react-intl-next");
10
10
  var _messages = require("@atlaskit/editor-common/messages");
11
+ var _toolbar = require("@atlaskit/editor-common/toolbar");
11
12
  var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
12
13
  var _editorToolbar = require("@atlaskit/editor-toolbar");
13
14
  var _blockTypes = require("../../block-types");
15
+ 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 _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
14
16
  var TextStylesMenuButton = exports.TextStylesMenuButton = function TextStylesMenuButton(_ref) {
15
17
  var _Object$values$find;
16
18
  var api = _ref.api,
@@ -18,18 +20,35 @@ var TextStylesMenuButton = exports.TextStylesMenuButton = function TextStylesMen
18
20
  var _useIntl = (0, _reactIntlNext.useIntl)(),
19
21
  formatMessage = _useIntl.formatMessage;
20
22
  var blockTypesDisabled = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.blockTypesDisabled');
23
+ var blockTypes = (0, _blockTypes.toolbarBlockTypesWithRank)();
24
+ var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
25
+ editorAppearance = _useEditorToolbar.editorAppearance;
21
26
  var currentBlockType = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockType.currentBlockType');
22
- var CurrentIcon = (_Object$values$find = Object.values((0, _blockTypes.toolbarBlockTypesWithRank)()).find(function (blockType) {
27
+ var CurrentIcon = (_Object$values$find = Object.values(blockTypes).find(function (blockType) {
23
28
  return blockType.name === (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name);
24
29
  })) === null || _Object$values$find === void 0 || (_Object$values$find = _Object$values$find.icon) === null || _Object$values$find === void 0 ? void 0 : _Object$values$find.type;
30
+ var normalText = blockTypes.normal;
31
+ var TriggerIcon = (0, _react.useMemo)(function () {
32
+ if (editorAppearance === 'full-page') {
33
+ var hasCurrentBlockType = currentBlockType && CurrentIcon;
34
+ var Icon = hasCurrentBlockType ? CurrentIcon : _editorToolbar.TextIcon;
35
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Icon, {
36
+ label: "",
37
+ size: "small"
38
+ }), hasCurrentBlockType ? formatMessage(currentBlockType.title) : formatMessage(normalText.title));
39
+ }
40
+ return CurrentIcon ? /*#__PURE__*/_react.default.createElement(CurrentIcon, {
41
+ label: "".concat(currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name, " ").concat(formatMessage(_messages.toolbarMessages.textStylesTooltip)),
42
+ size: "small"
43
+ }) : /*#__PURE__*/_react.default.createElement(_editorToolbar.TextIcon, {
44
+ label: formatMessage(_messages.toolbarMessages.textStylesTooltip),
45
+ size: "small"
46
+ });
47
+ }, [editorAppearance, currentBlockType, CurrentIcon, normalText, formatMessage]);
25
48
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
26
49
  content: formatMessage(_messages.toolbarMessages.textStylesTooltip)
27
50
  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
28
51
  isDisabled: blockTypesDisabled,
29
- iconBefore: CurrentIcon ? /*#__PURE__*/_react.default.createElement(CurrentIcon, {
30
- label: "".concat(currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name, " ").concat(formatMessage(_messages.toolbarMessages.textStylesTooltip))
31
- }) : /*#__PURE__*/_react.default.createElement(_editorToolbar.TextIcon, {
32
- label: formatMessage(_messages.toolbarMessages.textStylesTooltip)
33
- })
52
+ iconBefore: TriggerIcon
34
53
  }, children));
35
54
  };
package/dist/es2019/pm-plugins/ui/ToolbarBlockType/TextStylesMenuButton.js CHANGED
@@ -1,6 +1,7 @@
1
- import React from 'react';
1
+ import React, { useMemo } from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
3
  import { toolbarMessages } from '@atlaskit/editor-common/messages';
4
+ import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
4
5
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
5
6
  import { ToolbarDropdownMenu, ToolbarTooltip, TextIcon } from '@atlaskit/editor-toolbar';
6
7
  import { toolbarBlockTypesWithRank } from '../../block-types';
@@ -13,16 +14,34 @@ export const TextStylesMenuButton = ({
13
14
  formatMessage
14
15
  } = useIntl();
15
16
  const blockTypesDisabled = useSharedPluginStateSelector(api, 'blockType.blockTypesDisabled');
17
+ const blockTypes = toolbarBlockTypesWithRank();
18
+ const {
19
+ editorAppearance
20
+ } = useEditorToolbar();
16
21
  const currentBlockType = useSharedPluginStateSelector(api, 'blockType.currentBlockType');
17
- const CurrentIcon = (_Object$values$find = Object.values(toolbarBlockTypesWithRank()).find(blockType => blockType.name === (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name))) === null || _Object$values$find === void 0 ? void 0 : (_Object$values$find$i = _Object$values$find.icon) === null || _Object$values$find$i === void 0 ? void 0 : _Object$values$find$i.type;
22
+ const CurrentIcon = (_Object$values$find = Object.values(blockTypes).find(blockType => blockType.name === (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name))) === null || _Object$values$find === void 0 ? void 0 : (_Object$values$find$i = _Object$values$find.icon) === null || _Object$values$find$i === void 0 ? void 0 : _Object$values$find$i.type;
23
+ const normalText = blockTypes.normal;
24
+ const TriggerIcon = useMemo(() => {
25
+ if (editorAppearance === 'full-page') {
26
+ const hasCurrentBlockType = currentBlockType && CurrentIcon;
27
+ const Icon = hasCurrentBlockType ? CurrentIcon : TextIcon;
28
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
29
+ label: "",
30
+ size: "small"
31
+ }), hasCurrentBlockType ? formatMessage(currentBlockType.title) : formatMessage(normalText.title));
32
+ }
33
+ return CurrentIcon ? /*#__PURE__*/React.createElement(CurrentIcon, {
34
+ label: `${currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name} ${formatMessage(toolbarMessages.textStylesTooltip)}`,
35
+ size: "small"
36
+ }) : /*#__PURE__*/React.createElement(TextIcon, {
37
+ label: formatMessage(toolbarMessages.textStylesTooltip),
38
+ size: "small"
39
+ });
40
+ }, [editorAppearance, currentBlockType, CurrentIcon, normalText, formatMessage]);
18
41
  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
19
42
  content: formatMessage(toolbarMessages.textStylesTooltip)
20
43
  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
21
44
  isDisabled: blockTypesDisabled,
22
- iconBefore: CurrentIcon ? /*#__PURE__*/React.createElement(CurrentIcon, {
23
- label: `${currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name} ${formatMessage(toolbarMessages.textStylesTooltip)}`
24
- }) : /*#__PURE__*/React.createElement(TextIcon, {
25
- label: formatMessage(toolbarMessages.textStylesTooltip)
26
- })
45
+ iconBefore: TriggerIcon
27
46
  }, children));
28
47
  };
package/dist/esm/pm-plugins/ui/ToolbarBlockType/TextStylesMenuButton.js CHANGED
@@ -1,6 +1,7 @@
1
- import React from 'react';
1
+ import React, { useMemo } from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
3
  import { toolbarMessages } from '@atlaskit/editor-common/messages';
4
+ import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
4
5
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
5
6
  import { ToolbarDropdownMenu, ToolbarTooltip, TextIcon } from '@atlaskit/editor-toolbar';
6
7
  import { toolbarBlockTypesWithRank } from '../../block-types';
@@ -11,18 +12,35 @@ export var TextStylesMenuButton = function TextStylesMenuButton(_ref) {
11
12
  var _useIntl = useIntl(),
12
13
  formatMessage = _useIntl.formatMessage;
13
14
  var blockTypesDisabled = useSharedPluginStateSelector(api, 'blockType.blockTypesDisabled');
15
+ var blockTypes = toolbarBlockTypesWithRank();
16
+ var _useEditorToolbar = useEditorToolbar(),
17
+ editorAppearance = _useEditorToolbar.editorAppearance;
14
18
  var currentBlockType = useSharedPluginStateSelector(api, 'blockType.currentBlockType');
15
- var CurrentIcon = (_Object$values$find = Object.values(toolbarBlockTypesWithRank()).find(function (blockType) {
19
+ var CurrentIcon = (_Object$values$find = Object.values(blockTypes).find(function (blockType) {
16
20
  return blockType.name === (currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name);
17
21
  })) === null || _Object$values$find === void 0 || (_Object$values$find = _Object$values$find.icon) === null || _Object$values$find === void 0 ? void 0 : _Object$values$find.type;
22
+ var normalText = blockTypes.normal;
23
+ var TriggerIcon = useMemo(function () {
24
+ if (editorAppearance === 'full-page') {
25
+ var hasCurrentBlockType = currentBlockType && CurrentIcon;
26
+ var Icon = hasCurrentBlockType ? CurrentIcon : TextIcon;
27
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
28
+ label: "",
29
+ size: "small"
30
+ }), hasCurrentBlockType ? formatMessage(currentBlockType.title) : formatMessage(normalText.title));
31
+ }
32
+ return CurrentIcon ? /*#__PURE__*/React.createElement(CurrentIcon, {
33
+ label: "".concat(currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name, " ").concat(formatMessage(toolbarMessages.textStylesTooltip)),
34
+ size: "small"
35
+ }) : /*#__PURE__*/React.createElement(TextIcon, {
36
+ label: formatMessage(toolbarMessages.textStylesTooltip),
37
+ size: "small"
38
+ });
39
+ }, [editorAppearance, currentBlockType, CurrentIcon, normalText, formatMessage]);
18
40
  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
19
41
  content: formatMessage(toolbarMessages.textStylesTooltip)
20
42
  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
21
43
  isDisabled: blockTypesDisabled,
22
- iconBefore: CurrentIcon ? /*#__PURE__*/React.createElement(CurrentIcon, {
23
- label: "".concat(currentBlockType === null || currentBlockType === void 0 ? void 0 : currentBlockType.name, " ").concat(formatMessage(toolbarMessages.textStylesTooltip))
24
- }) : /*#__PURE__*/React.createElement(TextIcon, {
25
- label: formatMessage(toolbarMessages.textStylesTooltip)
26
- })
44
+ iconBefore: TriggerIcon
27
45
  }, children));
28
46
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-type",
3
- "version": "6.2.8",
3
+ "version": "6.2.10",
4
4
  "description": "BlockType plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -39,7 +39,7 @@
39
39
  "@atlaskit/editor-plugin-analytics": "^3.0.0",
40
40
  "@atlaskit/editor-plugin-primary-toolbar": "^4.1.0",
41
41
  "@atlaskit/editor-plugin-selection-toolbar": "^4.3.0",
42
- "@atlaskit/editor-plugin-toolbar": "^0.3.0",
42
+ "@atlaskit/editor-plugin-toolbar": "^0.4.0",
43
43
  "@atlaskit/editor-prosemirror": "7.0.0",
44
44
  "@atlaskit/editor-shared-styles": "^3.6.0",
45
45
  "@atlaskit/editor-tables": "^2.9.0",
@@ -51,13 +51,13 @@
51
51
  "@atlaskit/primitives": "^14.11.0",
52
52
  "@atlaskit/prosemirror-input-rules": "^3.4.0",
53
53
  "@atlaskit/theme": "^19.0.0",
54
- "@atlaskit/tmp-editor-statsig": "^11.3.0",
54
+ "@atlaskit/tmp-editor-statsig": "^11.5.0",
55
55
  "@atlaskit/tokens": "^6.0.0",
56
56
  "@babel/runtime": "^7.0.0",
57
57
  "@emotion/react": "^11.7.1"
58
58
  },
59
59
  "peerDependencies": {
60
- "@atlaskit/editor-common": "^107.26.0",
60
+ "@atlaskit/editor-common": "^107.28.0",
61
61
  "react": "^18.2.0",
62
62
  "react-dom": "^18.2.0",
63
63
  "react-intl-next": "npm:react-intl@^5.18.1"