@atlaskit/editor-plugin-media 5.4.4 → 6.0.1

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,21 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 6.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`e5001e144b74e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e5001e144b74e) -
8
+ Internal changes to how border radius is applied.
9
+ - Updated dependencies
10
+
11
+ ## 6.0.0
12
+
13
+ ### Patch Changes
14
+
15
+ - [`eaaa054620847`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/eaaa054620847) -
16
+ Cleanup media toolbar performance experiment
17
+ - Updated dependencies
18
+
3
19
  ## 5.4.4
4
20
 
5
21
  ### Patch Changes
@@ -64,7 +64,7 @@ var mediaSpecWithFixedToDOM = exports.mediaSpecWithFixedToDOM = function mediaSp
64
64
  marginLeft: '0',
65
65
  marginRight: 'var(--ak-editor-media-margin-right, 4px)',
66
66
  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
67
- borderRadius: "var(--ds-border-radius-100, 3px)",
67
+ borderRadius: "var(--ds-radius-small, 3px)",
68
68
  outline: 'none',
69
69
  flexBasis: "".concat(defaultImageCardDimensions.width, "px"),
70
70
  backgroundColor: 'var(--ak-editor-media-card-background-color)',
@@ -31,10 +31,10 @@ var itemSpacing = exports.itemSpacing = 4;
31
31
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
32
32
  var contextualMenuArrow = exports.contextualMenuArrow = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\t&::after {\n\t\tcontent: '\u203A';\n\t\tmargin-left: ", ";\n\t\tline-height: 20px;\n\t\tcolor: ", ";\n\t}\n"])), "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
33
33
  var contextualMenuColorIcon = exports.contextualMenuColorIcon = function contextualMenuColorIcon(color) {
34
- return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\t&::before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: ", ";\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\t", "\n\t}\n"])), contextualMenuArrow, _uiColor.DEFAULT_BORDER_COLOR, "var(--ds-border-radius-100, 3px)", color && "background: ".concat(color));
34
+ return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\t&::before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: ", ";\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\t", "\n\t}\n"])), contextualMenuArrow, _uiColor.DEFAULT_BORDER_COLOR, "var(--ds-radius-small, 3px)", color && "background: ".concat(color));
35
35
  };
36
36
  var contextualSubMenu = exports.contextualSubMenu = function contextualSubMenu(index) {
37
- return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tborder-radius: ", ";\n\tbackground: ", ";\n\tbox-shadow: ", ";\n\tdisplay: flex;\n\tposition: absolute;\n\ttop: ", "px;\n\tleft: ", "px;\n\tpadding: ", ";\n\n\t> div {\n\t\tpadding: 0;\n\t}\n"])), "var(--ds-border-radius-100, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width, "var(--ds-space-100, 8px)");
37
+ return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tborder-radius: ", ";\n\tbackground: ", ";\n\tbox-shadow: ", ";\n\tdisplay: flex;\n\tposition: absolute;\n\ttop: ", "px;\n\tleft: ", "px;\n\tpadding: ", ";\n\n\t> div {\n\t\tpadding: 0;\n\t}\n"])), "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width, "var(--ds-space-100, 8px)");
38
38
  };
39
39
  var buttonStyle = exports.buttonStyle = function buttonStyle(selected) {
40
40
  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\theight: 26px;\n\twidth: 26px;\n\tpadding: 0;\n\tborder-radius: 4px;\n\tbackground-color: ", ";\n\tborder: 1px solid ", ";\n\tcursor: pointer;\n\tdisplay: block;\n"])), selected ? "var(--ds-text, ".concat(_colors.N800, ")") : "var(--ds-background-neutral, ".concat(_colors.N20A, ")"), _uiColor.DEFAULT_BORDER_COLOR);
@@ -23,7 +23,7 @@ var iconWrapperStyles = (0, _react.css)({
23
23
  color: "var(--ds-icon-accent-blue, ".concat((0, _adfSchema.hexToRgba)(_colors.B400, 0.4) || _colors.B400, ")"),
24
24
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
25
25
  background: "var(--ds-background-accent-blue-subtle, ".concat((0, _adfSchema.hexToRgba)(_colors.B300, 0.6) || _colors.B300, ")"),
26
- borderRadius: "var(--ds-border-radius-100, 3px)",
26
+ borderRadius: "var(--ds-radius-small, 3px)",
27
27
  margin: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-300, 24px)"),
28
28
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
29
29
  width: "".concat(_media2.FILE_WIDTH, "px"),
@@ -35,7 +35,7 @@ var iconWrapperStyles = (0, _react.css)({
35
35
  });
36
36
  var dropLineStyles = (0, _react.css)({
37
37
  background: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
38
- borderRadius: "var(--ds-border-radius-100, 3px)",
38
+ borderRadius: "var(--ds-radius-small, 3px)",
39
39
  margin: "var(--ds-space-025, 2px)".concat(" 0"),
40
40
  width: '100%',
41
41
  height: '2px'
@@ -731,10 +731,8 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
731
731
  }
732
732
  var nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];
733
733
  var isSelectedNodeMediaSingle = state.selection instanceof _state2.NodeSelection && state.selection.node.type === mediaSingle;
734
- if ((0, _expValEquals.expValEquals)('platform_editor_media_floating_toolbar_early_exit', 'isEnabled', true)) {
735
- if (!isMediaSelection(state.selection, nodeType)) {
736
- return;
737
- }
734
+ if (!isMediaSelection(state.selection, nodeType)) {
735
+ return;
738
736
  }
739
737
  var baseToolbar = {
740
738
  title: 'Media floating controls',
@@ -57,7 +57,7 @@ export const mediaSpecWithFixedToDOM = () => {
57
57
  marginLeft: '0',
58
58
  marginRight: 'var(--ak-editor-media-margin-right, 4px)',
59
59
  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
60
- borderRadius: "var(--ds-border-radius-100, 3px)",
60
+ borderRadius: "var(--ds-radius-small, 3px)",
61
61
  outline: 'none',
62
62
  flexBasis: `${defaultImageCardDimensions.width}px`,
63
63
  backgroundColor: 'var(--ak-editor-media-card-background-color)',
@@ -33,14 +33,14 @@ export const contextualMenuColorIcon = color => css`
33
33
  content: '';
34
34
  display: block;
35
35
  border: 1px solid ${DEFAULT_BORDER_COLOR};
36
- border-radius: ${"var(--ds-border-radius-100, 3px)"};
36
+ border-radius: ${"var(--ds-radius-small, 3px)"};
37
37
  width: 20px;
38
38
  height: 20px;
39
39
  ${color && `background: ${color}`}
40
40
  }
41
41
  `;
42
42
  export const contextualSubMenu = index => css`
43
- border-radius: ${"var(--ds-border-radius-100, 3px)"};
43
+ border-radius: ${"var(--ds-radius-small, 3px)"};
44
44
  background: ${"var(--ds-surface-overlay, white)"};
45
45
  box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
46
46
  display: flex;
@@ -15,7 +15,7 @@ const iconWrapperStyles = css({
15
15
  color: `var(--ds-icon-accent-blue, ${hexToRgba(B400, 0.4) || B400})`,
16
16
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
17
17
  background: `var(--ds-background-accent-blue-subtle, ${hexToRgba(B300, 0.6) || B300})`,
18
- borderRadius: "var(--ds-border-radius-100, 3px)",
18
+ borderRadius: "var(--ds-radius-small, 3px)",
19
19
  margin: `${"var(--ds-space-075, 6px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-300, 24px)"}`,
20
20
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
21
21
  width: `${FILE_WIDTH}px`,
@@ -27,7 +27,7 @@ const iconWrapperStyles = css({
27
27
  });
28
28
  const dropLineStyles = css({
29
29
  background: `var(--ds-border-focused, ${B200})`,
30
- borderRadius: "var(--ds-border-radius-100, 3px)",
30
+ borderRadius: "var(--ds-radius-small, 3px)",
31
31
  margin: `${"var(--ds-space-025, 2px)"} 0`,
32
32
  width: '100%',
33
33
  height: '2px'
@@ -731,10 +731,8 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
731
731
  }
732
732
  const nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];
733
733
  const isSelectedNodeMediaSingle = state.selection instanceof NodeSelection && state.selection.node.type === mediaSingle;
734
- if (expValEquals('platform_editor_media_floating_toolbar_early_exit', 'isEnabled', true)) {
735
- if (!isMediaSelection(state.selection, nodeType)) {
736
- return;
737
- }
734
+ if (!isMediaSelection(state.selection, nodeType)) {
735
+ return;
738
736
  }
739
737
  const baseToolbar = {
740
738
  title: 'Media floating controls',
@@ -58,7 +58,7 @@ export var mediaSpecWithFixedToDOM = function mediaSpecWithFixedToDOM() {
58
58
  marginLeft: '0',
59
59
  marginRight: 'var(--ak-editor-media-margin-right, 4px)',
60
60
  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
61
- borderRadius: "var(--ds-border-radius-100, 3px)",
61
+ borderRadius: "var(--ds-radius-small, 3px)",
62
62
  outline: 'none',
63
63
  flexBasis: "".concat(defaultImageCardDimensions.width, "px"),
64
64
  backgroundColor: 'var(--ak-editor-media-card-background-color)',
@@ -22,10 +22,10 @@ export var itemSpacing = 4;
22
22
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
23
23
  export var contextualMenuArrow = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tdisplay: flex;\n\t&::after {\n\t\tcontent: '\u203A';\n\t\tmargin-left: ", ";\n\t\tline-height: 20px;\n\t\tcolor: ", ";\n\t}\n"])), "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
24
24
  export var contextualMenuColorIcon = function contextualMenuColorIcon(color) {
25
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t", "\n\t&::before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: ", ";\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\t", "\n\t}\n"])), contextualMenuArrow, DEFAULT_BORDER_COLOR, "var(--ds-border-radius-100, 3px)", color && "background: ".concat(color));
25
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t", "\n\t&::before {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: ", ";\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\t", "\n\t}\n"])), contextualMenuArrow, DEFAULT_BORDER_COLOR, "var(--ds-radius-small, 3px)", color && "background: ".concat(color));
26
26
  };
27
27
  export var contextualSubMenu = function contextualSubMenu(index) {
28
- return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\tborder-radius: ", ";\n\tbackground: ", ";\n\tbox-shadow: ", ";\n\tdisplay: flex;\n\tposition: absolute;\n\ttop: ", "px;\n\tleft: ", "px;\n\tpadding: ", ";\n\n\t> div {\n\t\tpadding: 0;\n\t}\n"])), "var(--ds-border-radius-100, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width, "var(--ds-space-100, 8px)");
28
+ return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\tborder-radius: ", ";\n\tbackground: ", ";\n\tbox-shadow: ", ";\n\tdisplay: flex;\n\tposition: absolute;\n\ttop: ", "px;\n\tleft: ", "px;\n\tpadding: ", ";\n\n\t> div {\n\t\tpadding: 0;\n\t}\n"])), "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width, "var(--ds-space-100, 8px)");
29
29
  };
30
30
  export var buttonStyle = function buttonStyle(selected) {
31
31
  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\theight: 26px;\n\twidth: 26px;\n\tpadding: 0;\n\tborder-radius: 4px;\n\tbackground-color: ", ";\n\tborder: 1px solid ", ";\n\tcursor: pointer;\n\tdisplay: block;\n"])), selected ? "var(--ds-text, ".concat(N800, ")") : "var(--ds-background-neutral, ".concat(N20A, ")"), DEFAULT_BORDER_COLOR);
@@ -15,7 +15,7 @@ var iconWrapperStyles = css({
15
15
  color: "var(--ds-icon-accent-blue, ".concat(hexToRgba(B400, 0.4) || B400, ")"),
16
16
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
17
17
  background: "var(--ds-background-accent-blue-subtle, ".concat(hexToRgba(B300, 0.6) || B300, ")"),
18
- borderRadius: "var(--ds-border-radius-100, 3px)",
18
+ borderRadius: "var(--ds-radius-small, 3px)",
19
19
  margin: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-300, 24px)"),
20
20
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
21
21
  width: "".concat(FILE_WIDTH, "px"),
@@ -27,7 +27,7 @@ var iconWrapperStyles = css({
27
27
  });
28
28
  var dropLineStyles = css({
29
29
  background: "var(--ds-border-focused, ".concat(B200, ")"),
30
- borderRadius: "var(--ds-border-radius-100, 3px)",
30
+ borderRadius: "var(--ds-radius-small, 3px)",
31
31
  margin: "var(--ds-space-025, 2px)".concat(" 0"),
32
32
  width: '100%',
33
33
  height: '2px'
@@ -722,10 +722,8 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
722
722
  }
723
723
  var nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];
724
724
  var isSelectedNodeMediaSingle = state.selection instanceof NodeSelection && state.selection.node.type === mediaSingle;
725
- if (expValEquals('platform_editor_media_floating_toolbar_early_exit', 'isEnabled', true)) {
726
- if (!isMediaSelection(state.selection, nodeType)) {
727
- return;
728
- }
725
+ if (!isMediaSelection(state.selection, nodeType)) {
726
+ return;
729
727
  }
730
728
  var baseToolbar = {
731
729
  title: 'Media floating controls',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media",
3
- "version": "5.4.4",
3
+ "version": "6.0.1",
4
4
  "description": "Media plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,23 +34,23 @@
34
34
  "@atlaskit/analytics-next": "^11.1.0",
35
35
  "@atlaskit/button": "^23.4.0",
36
36
  "@atlaskit/editor-palette": "^2.1.0",
37
- "@atlaskit/editor-plugin-analytics": "^3.0.0",
38
- "@atlaskit/editor-plugin-annotation": "^3.3.0",
39
- "@atlaskit/editor-plugin-connectivity": "^3.1.0",
40
- "@atlaskit/editor-plugin-decorations": "^3.1.0",
41
- "@atlaskit/editor-plugin-editor-disabled": "^3.0.0",
42
- "@atlaskit/editor-plugin-editor-viewmode": "^5.0.0",
43
- "@atlaskit/editor-plugin-floating-toolbar": "^5.2.0",
44
- "@atlaskit/editor-plugin-focus": "^2.0.0",
45
- "@atlaskit/editor-plugin-grid": "^3.1.0",
46
- "@atlaskit/editor-plugin-guideline": "^3.0.0",
47
- "@atlaskit/editor-plugin-interaction": "^5.0.0",
48
- "@atlaskit/editor-plugin-selection": "^3.2.0",
49
- "@atlaskit/editor-plugin-width": "^4.0.0",
37
+ "@atlaskit/editor-plugin-analytics": "^4.0.0",
38
+ "@atlaskit/editor-plugin-annotation": "^4.0.0",
39
+ "@atlaskit/editor-plugin-connectivity": "^4.0.0",
40
+ "@atlaskit/editor-plugin-decorations": "^4.0.0",
41
+ "@atlaskit/editor-plugin-editor-disabled": "^4.0.0",
42
+ "@atlaskit/editor-plugin-editor-viewmode": "^6.0.0",
43
+ "@atlaskit/editor-plugin-floating-toolbar": "^6.0.0",
44
+ "@atlaskit/editor-plugin-focus": "^3.0.0",
45
+ "@atlaskit/editor-plugin-grid": "^4.0.0",
46
+ "@atlaskit/editor-plugin-guideline": "^4.0.0",
47
+ "@atlaskit/editor-plugin-interaction": "^6.0.0",
48
+ "@atlaskit/editor-plugin-selection": "^4.0.0",
49
+ "@atlaskit/editor-plugin-width": "^5.0.0",
50
50
  "@atlaskit/editor-prosemirror": "7.0.0",
51
51
  "@atlaskit/editor-shared-styles": "^3.6.0",
52
52
  "@atlaskit/editor-tables": "^2.9.0",
53
- "@atlaskit/form": "^12.2.0",
53
+ "@atlaskit/form": "^12.4.0",
54
54
  "@atlaskit/icon": "^28.1.0",
55
55
  "@atlaskit/icon-lab": "^5.7.0",
56
56
  "@atlaskit/media-card": "^79.5.0",
@@ -65,7 +65,7 @@
65
65
  "@atlaskit/primitives": "^14.12.0",
66
66
  "@atlaskit/textfield": "^8.0.0",
67
67
  "@atlaskit/theme": "^20.0.0",
68
- "@atlaskit/tmp-editor-statsig": "^11.12.0",
68
+ "@atlaskit/tmp-editor-statsig": "^12.1.0",
69
69
  "@atlaskit/tokens": "^6.1.0",
70
70
  "@atlaskit/tooltip": "^20.4.0",
71
71
  "@babel/runtime": "^7.0.0",
@@ -77,7 +77,7 @@
77
77
  "uuid": "^3.1.0"
78
78
  },
79
79
  "peerDependencies": {
80
- "@atlaskit/editor-common": "^107.35.0",
80
+ "@atlaskit/editor-common": "^108.0.0",
81
81
  "@atlaskit/media-core": "^37.0.0",
82
82
  "react": "^18.2.0",
83
83
  "react-dom": "^18.2.0",