@atlaskit/editor-plugin-media 8.1.2 → 8.1.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-media
 
+## 8.1.4
+
+### Patch Changes
+
+- [`5c07f0d4e428f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5c07f0d4e428f) -
+  [EDITOR-1998] Make media captions follow dense/ compact content mode
+- Updated dependencies
+
+## 8.1.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.1.2
 
 ### Patch Changes
@@ -135,7 +149,6 @@
 
 - [`0d0fe7a300841`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d0fe7a300841) -
   Cleanup platform_editor_usesharedpluginstatewithselector experiment
-
   - BREAKING CHANGE: sharedPluginStateHookMigratorFactory is deleted from @atlaskit/editor-common
 
 - Updated dependencies
@@ -503,7 +516,6 @@
   shared context or singletons.
 
   **HOW TO ADJUST:**
-
   - Consumers must now explicitly install `@atlaskit/editor-common` in their own project if they use
     any of these editor plugins.
   - Ensure the version you install matches the version required by the plugins.
@@ -1908,12 +1920,10 @@
   [ux] [ED-25085] Migrate typography \
 
   editor-plugin-media:
-
   - replace caption placeholder span with button
   - replace x between width and height pixel entry with symbol × \
 
   tmp-editor-statsig:
-
   - Add experiment `platform_editor_typography_migration_ugc`
 
 - Updated dependencies
@@ -1977,7 +1987,6 @@
 - [#146446](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/146446)
   [`c98c34dd5f307`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c98c34dd5f307) -
   [ED-24941] Added analytics for media-insert
-
   - **@atlaskit/editor-common**: Add enums and types for new anaylics params
   - **@atlaskit/editor-plugin-media**: Include 'insertMediaVia' on analytics events for inserting
     media into the document
@@ -3324,7 +3333,6 @@
   ## WHAT?:
 
   Removing feature flags:
-
   - singleLayout
   - newInsertionBehaviour
   - interactiveExpand
@@ -3338,7 +3346,6 @@
   maintenance burden
 
   ## HOW to update your code:
-
   - If you were using the feature flag - the behaviour is now default and you can remove the flags
   - If you were not using the feature flag - the behaviour is now default.
   - If you have opted out of using the feature flag - we have been careful to ensure no-one has
@@ -3831,7 +3838,6 @@
 - [#43646](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43646)
   [`d43f8e9402f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d43f8e9402f) - Make
   feature flags plugin optional in all plugins including:
-
   - analytics
   - base
   - card

package/dist/cjs/ui/CaptionPlaceholder/index.js

@@ -12,8 +12,10 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _media = require("@atlaskit/editor-common/media");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _templateObject;
 /**
  * @jsxRuntime classic
@@ -24,6 +26,9 @@ var _templateObject;
 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); }
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 var placeholder = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tcolor: ", ";\n\twidth: 100%;\n\ttext-align: center;\n\tmargin-top: ", " !important;\n\tdisplay: block;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-100, 8px)");
+var placeholderText = (0, _react2.css)({
+  color: "var(--ds-text-subtlest, #626F86)"
+});
 var placeholderButton = (0, _primitives.xcss)({
   width: '100%',
   marginTop: 'space.100'
@@ -42,11 +47,15 @@ var CaptionPlaceholder = exports.CaptionPlaceholder = /*#__PURE__*/_react.defaul
   // This issue is a temporary fix for users being able to edit captions on edge browsers. This will be removed
   // replaced with CaptionPlaceholderButton in the near future and this code can be removed.
   return (
-    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text, @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/no-static-element-interactions
+    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
     (0, _react2.jsx)("span", {
       ref: ref,
       css: placeholder,
-      onPointerDown: handlePointerDown,
+      onPointerDown: handlePointerDown
+      // This id is just used for setting styles at the moment, if it's needed for anything more specific
+      // It may need to be generated to avoid overlap
+      ,
+      id: (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? _mediaSingle.CAPTION_PLACEHOLDER_ID : undefined,
       "data-id": _mediaSingle.CAPTION_PLACEHOLDER_ID,
       "data-testid": "caption-placeholder"
     }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage
@@ -58,6 +67,7 @@ var CaptionPlaceholder = exports.CaptionPlaceholder = /*#__PURE__*/_react.defaul
 var CaptionPlaceholderButton = exports.CaptionPlaceholderButton = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
   var onClick = _ref2.onClick,
     placeholderMessage = _ref2.placeholderMessage;
+  var intl = (0, _reactIntlNext.useIntl)();
   var handleMouseDown = (0, _react.useCallback)(function (e) {
     // In firefox, button is focused when mouse down, which make editor lose focus
     // Hence we want to disabled it so that user can type in caption directly after click
@@ -73,11 +83,18 @@ var CaptionPlaceholderButton = exports.CaptionPlaceholderButton = /*#__PURE__*/_
     testId: "caption-placeholder",
     padding: "space.0",
     xcss: placeholderButton
-  }, (0, _react2.jsx)(_primitives.Text, {
-    color: "color.text.subtlest",
-    size: "large"
+  }, (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ?
+  // This id is just used for setting styles at the moment, if it's needed for anything more specific
+  // It may need to be generated to avoid overlap
+  // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
+  (0, _react2.jsx)("span", {
+    css: placeholderText,
+    id: _mediaSingle.CAPTION_PLACEHOLDER_ID
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
-  , computedPlaceholderMessage)));
+  , computedPlaceholderMessage)) : (0, _react2.jsx)(_primitives.Text, {
+    color: "color.text.subtlest",
+    size: "large"
+  }, intl.formatMessage(computedPlaceholderMessage)));
 });

package/dist/es2019/ui/CaptionPlaceholder/index.js

@@ -6,12 +6,14 @@ import React, { useCallback } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessage, useIntl } from 'react-intl-next';
 import { captionMessages as messages } from '@atlaskit/editor-common/media';
 import { CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Pressable, Text, xcss } from '@atlaskit/primitives';
 import { N200 } from '@atlaskit/theme/colors';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 const placeholder = css`
 	color: ${`var(--ds-text-subtlest, ${N200})`};
@@ -20,6 +22,9 @@ const placeholder = css`
 	margin-top: ${"var(--ds-space-100, 8px)"} !important;
 	display: block;
 `;
+const placeholderText = css({
+  color: "var(--ds-text-subtlest, #626F86)"
+});
 const placeholderButton = xcss({
   width: '100%',
   marginTop: 'space.100'
@@ -39,11 +44,15 @@ export const CaptionPlaceholder = /*#__PURE__*/React.forwardRef(({
   // This issue is a temporary fix for users being able to edit captions on edge browsers. This will be removed
   // replaced with CaptionPlaceholderButton in the near future and this code can be removed.
   return (
-    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text, @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/no-static-element-interactions
+    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
     jsx("span", {
       ref: ref,
       css: placeholder,
-      onPointerDown: handlePointerDown,
+      onPointerDown: handlePointerDown
+      // This id is just used for setting styles at the moment, if it's needed for anything more specific
+      // It may need to be generated to avoid overlap
+      ,
+      id: expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? CAPTION_PLACEHOLDER_ID : undefined,
       "data-id": CAPTION_PLACEHOLDER_ID,
       "data-testid": "caption-placeholder"
     }, jsx(FormattedMessage
@@ -56,6 +65,7 @@ export const CaptionPlaceholderButton = /*#__PURE__*/React.forwardRef(({
   onClick,
   placeholderMessage
 }, ref) => {
+  const intl = useIntl();
   const handleMouseDown = useCallback(e => {
     // In firefox, button is focused when mouse down, which make editor lose focus
     // Hence we want to disabled it so that user can type in caption directly after click
@@ -71,11 +81,18 @@ export const CaptionPlaceholderButton = /*#__PURE__*/React.forwardRef(({
     testId: "caption-placeholder",
     padding: "space.0",
     xcss: placeholderButton
-  }, jsx(Text, {
-    color: "color.text.subtlest",
-    size: "large"
+  }, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ?
+  // This id is just used for setting styles at the moment, if it's needed for anything more specific
+  // It may need to be generated to avoid overlap
+  // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
+  jsx("span", {
+    css: placeholderText,
+    id: CAPTION_PLACEHOLDER_ID
   }, jsx(FormattedMessage
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
-  , computedPlaceholderMessage)));
+  , computedPlaceholderMessage)) : jsx(Text, {
+    color: "color.text.subtlest",
+    size: "large"
+  }, intl.formatMessage(computedPlaceholderMessage)));
 });

package/dist/esm/ui/CaptionPlaceholder/index.js

@@ -8,14 +8,19 @@ import React, { useCallback } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessage, useIntl } from 'react-intl-next';
 import { captionMessages as messages } from '@atlaskit/editor-common/media';
 import { CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Pressable, Text, xcss } from '@atlaskit/primitives';
 import { N200 } from '@atlaskit/theme/colors';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 var placeholder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tcolor: ", ";\n\twidth: 100%;\n\ttext-align: center;\n\tmargin-top: ", " !important;\n\tdisplay: block;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-100, 8px)");
+var placeholderText = css({
+  color: "var(--ds-text-subtlest, #626F86)"
+});
 var placeholderButton = xcss({
   width: '100%',
   marginTop: 'space.100'
@@ -34,11 +39,15 @@ export var CaptionPlaceholder = /*#__PURE__*/React.forwardRef(function (_ref, re
   // This issue is a temporary fix for users being able to edit captions on edge browsers. This will be removed
   // replaced with CaptionPlaceholderButton in the near future and this code can be removed.
   return (
-    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text, @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/no-static-element-interactions
+    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
     jsx("span", {
       ref: ref,
       css: placeholder,
-      onPointerDown: handlePointerDown,
+      onPointerDown: handlePointerDown
+      // This id is just used for setting styles at the moment, if it's needed for anything more specific
+      // It may need to be generated to avoid overlap
+      ,
+      id: expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? CAPTION_PLACEHOLDER_ID : undefined,
       "data-id": CAPTION_PLACEHOLDER_ID,
       "data-testid": "caption-placeholder"
     }, jsx(FormattedMessage
@@ -50,6 +59,7 @@ export var CaptionPlaceholder = /*#__PURE__*/React.forwardRef(function (_ref, re
 export var CaptionPlaceholderButton = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var onClick = _ref2.onClick,
     placeholderMessage = _ref2.placeholderMessage;
+  var intl = useIntl();
   var handleMouseDown = useCallback(function (e) {
     // In firefox, button is focused when mouse down, which make editor lose focus
     // Hence we want to disabled it so that user can type in caption directly after click
@@ -65,11 +75,18 @@ export var CaptionPlaceholderButton = /*#__PURE__*/React.forwardRef(function (_r
     testId: "caption-placeholder",
     padding: "space.0",
     xcss: placeholderButton
-  }, jsx(Text, {
-    color: "color.text.subtlest",
-    size: "large"
+  }, expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ?
+  // This id is just used for setting styles at the moment, if it's needed for anything more specific
+  // It may need to be generated to avoid overlap
+  // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
+  jsx("span", {
+    css: placeholderText,
+    id: CAPTION_PLACEHOLDER_ID
   }, jsx(FormattedMessage
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
-  , computedPlaceholderMessage)));
+  , computedPlaceholderMessage)) : jsx(Text, {
+    color: "color.text.subtlest",
+    size: "large"
+  }, intl.formatMessage(computedPlaceholderMessage)));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "8.1.2",
+	"version": "8.1.4",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -46,7 +46,7 @@
 		"@atlaskit/editor-plugin-guideline": "^6.0.0",
 		"@atlaskit/editor-plugin-interaction": "^8.0.0",
 		"@atlaskit/editor-plugin-selection": "^6.1.0",
-		"@atlaskit/editor-plugin-toolbar": "^3.2.0",
+		"@atlaskit/editor-plugin-toolbar": "^3.3.0",
 		"@atlaskit/editor-plugin-width": "^7.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.7.0",
@@ -63,11 +63,11 @@
 		"@atlaskit/media-ui": "^28.7.0",
 		"@atlaskit/media-viewer": "^52.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.15.0",
+		"@atlaskit/primitives": "^15.0.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.10.0",
-		"@atlaskit/tokens": "^6.4.0",
+		"@atlaskit/tmp-editor-statsig": "^13.12.0",
+		"@atlaskit/tokens": "^6.5.0",
 		"@atlaskit/tooltip": "^20.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -78,7 +78,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.10.0",
+		"@atlaskit/editor-common": "^110.13.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
@@ -148,6 +148,9 @@
 		"platform_editor_remove_media_inline_feature_flag": {
 			"type": "boolean"
 		},
+		"platform_editor_content_mode_button_mvp": {
+			"type": "boolean"
+		},
 		"platform_editor_ssr_media": {
 			"type": "boolean"
 		},