@atlaskit/editor-plugin-block-type 11.2.27 → 11.2.28

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 (10) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/ui/QuoteBlockMenuItem.compiled.css +2 -0
  3. package/dist/cjs/ui/QuoteBlockMenuItem.js +15 -5
  4. package/dist/es2019/ui/QuoteBlockMenuItem.compiled.css +2 -0
  5. package/dist/es2019/ui/QuoteBlockMenuItem.js +15 -5
  6. package/dist/esm/ui/QuoteBlockMenuItem.compiled.css +2 -0
  7. package/dist/esm/ui/QuoteBlockMenuItem.js +15 -5
  8. package/dist/types/ui/QuoteBlockMenuItem.d.ts +4 -0
  9. package/dist/types-ts4.5/ui/QuoteBlockMenuItem.d.ts +4 -0
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/editor-plugin-block-type
2
2
 
3
+ ## 11.2.28
4
+
5
+ ### Patch Changes
6
+
7
+ - [`47211917d90fc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/47211917d90fc) -
8
+ Editor 5281 fix block menu icon cut off when zoom
9
+
3
10
  ## 11.2.27
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/ui/QuoteBlockMenuItem.compiled.css ADDED
@@ -0,0 +1,2 @@
1
+ ._172sewfl svg{overflow-y:visible}
2
+ ._1wrmewfl svg{overflow-x:visible}
package/dist/cjs/ui/QuoteBlockMenuItem.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* QuoteBlockMenuItem.tsx generated by @compiled/babel-plugin v0.38.1 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.createQuoteBlockMenuItem = void 0;
9
+ require("./QuoteBlockMenuItem.compiled.css");
10
+ var _runtime = require("@compiled/react/runtime");
8
11
  var _react = _interopRequireDefault(require("react"));
9
12
  var _reactIntlNext = require("react-intl-next");
10
13
  var _analytics = require("@atlaskit/editor-common/analytics");
@@ -12,6 +15,9 @@ var _messages = require("@atlaskit/editor-common/messages");
12
15
  var _editorToolbar = require("@atlaskit/editor-toolbar");
13
16
  var _quotationMark = _interopRequireDefault(require("@atlaskit/icon/core/quotation-mark"));
14
17
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
+ var styles = {
19
+ svgOverflow: "_1wrmewfl _172sewfl"
20
+ };
15
21
  var NODE_NAME = 'blockquote';
16
22
  var QuoteBlockMenuItem = function QuoteBlockMenuItem(_ref) {
17
23
  var api = _ref.api;
@@ -36,14 +42,18 @@ var QuoteBlockMenuItem = function QuoteBlockMenuItem(_ref) {
36
42
 
37
43
  // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
38
44
  // Adds size="small" to icons for better visual consistency in block menu.
39
- // To clean up: remove conditional, keep only size="small" version.
45
+ // Adds overflow: visible to SVGs to fix when view port is in different zoom level, sometimes the right edge of the icon is cut off.
46
+ // To clean up: remove conditionals, keep only size="small" version and always apply svgOverflowStyles wrapper.
40
47
  var iconSize = (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_3') ? 'small' : undefined;
48
+ var icon = /*#__PURE__*/_react.default.createElement(_quotationMark.default, {
49
+ label: "",
50
+ size: iconSize
51
+ });
41
52
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
42
53
  onClick: handleClick,
43
- elemBefore: /*#__PURE__*/_react.default.createElement(_quotationMark.default, {
44
- label: "",
45
- size: iconSize
46
- })
54
+ elemBefore: (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_3') ? /*#__PURE__*/_react.default.createElement("span", {
55
+ className: (0, _runtime.ax)([styles.svgOverflow])
56
+ }, icon) : icon
47
57
  }, formatMessage(_messages.blockTypeMessages.blockquote));
48
58
  };
49
59
  var createQuoteBlockMenuItem = exports.createQuoteBlockMenuItem = function createQuoteBlockMenuItem(_ref3) {
package/dist/es2019/ui/QuoteBlockMenuItem.compiled.css ADDED
@@ -0,0 +1,2 @@
1
+ ._172sewfl svg{overflow-y:visible}
2
+ ._1wrmewfl svg{overflow-x:visible}
package/dist/es2019/ui/QuoteBlockMenuItem.js CHANGED
@@ -1,3 +1,6 @@
1
+ /* QuoteBlockMenuItem.tsx generated by @compiled/babel-plugin v0.38.1 */
2
+ import "./QuoteBlockMenuItem.compiled.css";
3
+ import { ax, ix } from "@compiled/react/runtime";
1
4
  import React from 'react';
2
5
  import { useIntl } from 'react-intl-next';
3
6
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -5,6 +8,9 @@ import { blockTypeMessages } from '@atlaskit/editor-common/messages';
5
8
  import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
6
9
  import QuotationMarkIcon from '@atlaskit/icon/core/quotation-mark';
7
10
  import { fg } from '@atlaskit/platform-feature-flags';
11
+ const styles = {
12
+ svgOverflow: "_1wrmewfl _172sewfl"
13
+ };
8
14
  const NODE_NAME = 'blockquote';
9
15
  const QuoteBlockMenuItem = ({
10
16
  api
@@ -32,14 +38,18 @@ const QuoteBlockMenuItem = ({
32
38
 
33
39
  // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
34
40
  // Adds size="small" to icons for better visual consistency in block menu.
35
- // To clean up: remove conditional, keep only size="small" version.
41
+ // Adds overflow: visible to SVGs to fix when view port is in different zoom level, sometimes the right edge of the icon is cut off.
42
+ // To clean up: remove conditionals, keep only size="small" version and always apply svgOverflowStyles wrapper.
36
43
  const iconSize = fg('platform_editor_block_menu_v2_patch_3') ? 'small' : undefined;
44
+ const icon = /*#__PURE__*/React.createElement(QuotationMarkIcon, {
45
+ label: "",
46
+ size: iconSize
47
+ });
37
48
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
38
49
  onClick: handleClick,
39
- elemBefore: /*#__PURE__*/React.createElement(QuotationMarkIcon, {
40
- label: "",
41
- size: iconSize
42
- })
50
+ elemBefore: fg('platform_editor_block_menu_v2_patch_3') ? /*#__PURE__*/React.createElement("span", {
51
+ className: ax([styles.svgOverflow])
52
+ }, icon) : icon
43
53
  }, formatMessage(blockTypeMessages.blockquote));
44
54
  };
45
55
  export const createQuoteBlockMenuItem = ({
package/dist/esm/ui/QuoteBlockMenuItem.compiled.css ADDED
@@ -0,0 +1,2 @@
1
+ ._172sewfl svg{overflow-y:visible}
2
+ ._1wrmewfl svg{overflow-x:visible}
package/dist/esm/ui/QuoteBlockMenuItem.js CHANGED
@@ -1,3 +1,6 @@
1
+ /* QuoteBlockMenuItem.tsx generated by @compiled/babel-plugin v0.38.1 */
2
+ import "./QuoteBlockMenuItem.compiled.css";
3
+ import { ax, ix } from "@compiled/react/runtime";
1
4
  import React from 'react';
2
5
  import { useIntl } from 'react-intl-next';
3
6
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -5,6 +8,9 @@ import { blockTypeMessages } from '@atlaskit/editor-common/messages';
5
8
  import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
6
9
  import QuotationMarkIcon from '@atlaskit/icon/core/quotation-mark';
7
10
  import { fg } from '@atlaskit/platform-feature-flags';
11
+ var styles = {
12
+ svgOverflow: "_1wrmewfl _172sewfl"
13
+ };
8
14
  var NODE_NAME = 'blockquote';
9
15
  var QuoteBlockMenuItem = function QuoteBlockMenuItem(_ref) {
10
16
  var api = _ref.api;
@@ -29,14 +35,18 @@ var QuoteBlockMenuItem = function QuoteBlockMenuItem(_ref) {
29
35
 
30
36
  // [FEATURE FLAG: platform_editor_block_menu_v2_patch_3]
31
37
  // Adds size="small" to icons for better visual consistency in block menu.
32
- // To clean up: remove conditional, keep only size="small" version.
38
+ // Adds overflow: visible to SVGs to fix when view port is in different zoom level, sometimes the right edge of the icon is cut off.
39
+ // To clean up: remove conditionals, keep only size="small" version and always apply svgOverflowStyles wrapper.
33
40
  var iconSize = fg('platform_editor_block_menu_v2_patch_3') ? 'small' : undefined;
41
+ var icon = /*#__PURE__*/React.createElement(QuotationMarkIcon, {
42
+ label: "",
43
+ size: iconSize
44
+ });
34
45
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
35
46
  onClick: handleClick,
36
- elemBefore: /*#__PURE__*/React.createElement(QuotationMarkIcon, {
37
- label: "",
38
- size: iconSize
39
- })
47
+ elemBefore: fg('platform_editor_block_menu_v2_patch_3') ? /*#__PURE__*/React.createElement("span", {
48
+ className: ax([styles.svgOverflow])
49
+ }, icon) : icon
40
50
  }, formatMessage(blockTypeMessages.blockquote));
41
51
  };
42
52
  export var createQuoteBlockMenuItem = function createQuoteBlockMenuItem(_ref3) {
package/dist/types/ui/QuoteBlockMenuItem.d.ts CHANGED
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
1
5
  import React from 'react';
2
6
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
7
  import type { BlockTypePlugin } from '../blockTypePluginType';
package/dist/types-ts4.5/ui/QuoteBlockMenuItem.d.ts CHANGED
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
1
5
  import React from 'react';
2
6
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
7
  import type { BlockTypePlugin } from '../blockTypePluginType';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-type",
3
- "version": "11.2.27",
3
+ "version": "11.2.28",
4
4
  "description": "BlockType plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",