@atlaskit/editor-plugin-media 1.45.0 → 1.45.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-media
 
+## 1.45.1
+
+### Patch Changes
+
+- [#112160](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112160)
+  [`00ccb71f91143`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/00ccb71f91143) -
+  ED-26483 cleanup platform_editor_media_interaction_improvements
+
 ## 1.45.0
 
 ### Minor Changes

package/dist/cjs/mediaPlugin.js

@@ -67,7 +67,7 @@ var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_re
   // when document changes are made while media viewer is open
 
   var mediaItems = (0, _react.useMemo)(function () {
-    if (mediaState !== null && mediaState !== void 0 && mediaState.isMediaViewerVisible && (0, _platformFeatureFlags.fg)('platform_editor_media_interaction_improvements')) {
+    if (mediaState !== null && mediaState !== void 0 && mediaState.isMediaViewerVisible) {
       var mediaNodes = (0, _mediaCommon2.extractMediaNodes)(editorView.state.doc);
       return (0, _mediaCommon2.createMediaIdentifierArray)(mediaNodes);
     }
@@ -86,7 +86,7 @@ var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_re
     mediaClientConfig: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig,
     onClose: handleOnClose,
     selectedNodeAttrs: mediaState.mediaViewerSelectedMedia,
-    items: (0, _platformFeatureFlags.fg)('platform_editor_media_interaction_improvements') ? mediaItems : undefined
+    items: mediaItems
   });
 };
 var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {

package/dist/cjs/nodeviews/mediaSingle.js

@@ -19,6 +19,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _media = require("@atlaskit/editor-common/media");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
@@ -528,10 +529,12 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
       // remove typecasting
       , {
         ref: this.captionPlaceHolderRef,
-        onClick: this.clickPlaceholder
+        onClick: this.clickPlaceholder,
+        placeholderMessage: mediaOptions.allowImagePreview ? _media.captionMessages.placeholderWithDoubleClickPrompt : _media.captionMessages.placeholder
       }) : (0, _react2.jsx)(_CaptionPlaceholder.CaptionPlaceholder, {
         ref: this.captionPlaceHolderRef,
-        onClick: this.clickPlaceholder
+        onClick: this.clickPlaceholder,
+        placeholderMessage: mediaOptions.allowImagePreview ? _media.captionMessages.placeholderWithDoubleClickPrompt : _media.captionMessages.placeholder
       })));
       return (0, _react2.jsx)(_react.Fragment, null, canResize ? (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience') ? (0, _react2.jsx)(_ResizableMediaSingleNext.default
       // Ignored via go/ees005

package/dist/cjs/nodeviews/mediaSingleNext.js

@@ -13,6 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _media = require("@atlaskit/editor-common/media");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -527,10 +528,12 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
   // remove typecasting
   , {
     ref: captionPlaceHolderRef,
-    onClick: clickPlaceholder
+    onClick: clickPlaceholder,
+    placeholderMessage: mediaOptions.allowImagePreview ? _media.captionMessages.placeholderWithDoubleClickPrompt : _media.captionMessages.placeholder
   }) : (0, _react2.jsx)(_CaptionPlaceholder.CaptionPlaceholder, {
     ref: captionPlaceHolderRef,
-    onClick: clickPlaceholder
+    onClick: clickPlaceholder,
+    placeholderMessage: mediaOptions.allowImagePreview ? _media.captionMessages.placeholderWithDoubleClickPrompt : _media.captionMessages.placeholder
   })));
   return (0, _react2.jsx)(_react.Fragment, null, canResize ? (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience') ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, {
     view: view,

package/dist/cjs/pm-plugins/main.js

@@ -1011,9 +1011,11 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
         return false;
       },
       handleDoubleClickOn: function handleDoubleClickOn(view) {
-        var _pluginInjectionApi$e;
-        if (!(0, _platformFeatureFlags.fg)('platform_editor_media_interaction_improvements')) {
-          return;
+        var _pluginState$mediaOpt, _pluginInjectionApi$e;
+        // Check if media viewer is enabled
+        var pluginState = getMediaPluginState(view.state);
+        if (!((_pluginState$mediaOpt = pluginState.mediaOptions) !== null && _pluginState$mediaOpt !== void 0 && _pluginState$mediaOpt.allowImagePreview)) {
+          return false;
         }
         var isLivePagesViewMode = (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$e = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e === void 0 || (_pluginInjectionApi$e = _pluginInjectionApi$e.sharedState.currentState()) === null || _pluginInjectionApi$e === void 0 ? void 0 : _pluginInjectionApi$e.mode) === 'view';
 

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CaptionPlaceholderButton = exports.CaptionPlaceholder = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
@@ -24,24 +23,22 @@ var _templateObject;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // 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 placeholderButton = (0, _primitives.xcss)({
   width: '100%',
   marginTop: 'space.100'
 });
-
 // platform_editor_typography_ugc clean up
 // Remove this component
 var CaptionPlaceholder = exports.CaptionPlaceholder = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var onClick = _ref.onClick;
+  var onClick = _ref.onClick,
+    placeholderMessage = _ref.placeholderMessage;
   var handlePointerDown = (0, _react.useCallback)(function (e) {
     e.preventDefault();
     onClick();
   }, [onClick]);
-  var message = (0, _platformFeatureFlags.fg)('platform_editor_media_interaction_improvements') ? _objectSpread({}, _media.captionMessages.placeholderWithDoubleClickPrompt) : _objectSpread({}, _media.captionMessages.placeholder);
+  var computedPlaceholderMessage = placeholderMessage ? placeholderMessage : _media.captionMessages.placeholder;
 
   // 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.
@@ -57,7 +54,7 @@ var CaptionPlaceholder = exports.CaptionPlaceholder = /*#__PURE__*/_react.defaul
       }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
-      , message))
+      , computedPlaceholderMessage))
     );
   }
   return (
@@ -71,17 +68,18 @@ var CaptionPlaceholder = exports.CaptionPlaceholder = /*#__PURE__*/_react.defaul
     }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
-    , message))
+    , computedPlaceholderMessage))
   );
 });
 var CaptionPlaceholderButton = exports.CaptionPlaceholderButton = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
-  var onClick = _ref2.onClick;
+  var onClick = _ref2.onClick,
+    placeholderMessage = _ref2.placeholderMessage;
   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
     e.preventDefault();
   }, []);
-  var message = (0, _platformFeatureFlags.fg)('platform_editor_media_interaction_improvements') ? _objectSpread({}, _media.captionMessages.placeholderWithDoubleClickPrompt) : _objectSpread({}, _media.captionMessages.placeholder);
+  var computedPlaceholderMessage = placeholderMessage ? placeholderMessage : _media.captionMessages.placeholder;
   return (0, _react2.jsx)(_primitives.Pressable, {
     ref: ref,
     backgroundColor: "color.background.neutral.subtle",
@@ -97,5 +95,5 @@ var CaptionPlaceholderButton = exports.CaptionPlaceholderButton = /*#__PURE__*/_
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
-  , message)));
+  , computedPlaceholderMessage)));
 });

package/dist/cjs/ui/toolbar/assets/commentWithDotIcon.js

@@ -8,35 +8,7 @@ exports.CommentWithDotIcon = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _icon = _interopRequireDefault(require("@atlaskit/icon"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
-var IconCommentWithDotGlyph = function IconCommentWithDotGlyph() {
-  return /*#__PURE__*/_react.default.createElement("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M4.998 11.513C4.998 8.475 8.139 6.003 12 6.003C15.861 6.003 19.002 8.475 19.002 11.513C19.002 14.552 15.861 17.023 12 17.023C8.139 17.023 4.998 14.552 4.998 11.513ZM19.838 19.284V19.282C19.838 19.282 18.274 17.022 19.071 16.166L19.034 16.186C20.261 14.902 21 13.279 21 11.513C21 7.371 16.963 4 12 4C7.037 4 3 7.37 3 11.513C3 15.656 7.037 19.027 12 19.027C13.42 19.027 14.76 18.742 15.957 18.251C16.96 19.273 18.244 19.823 19.197 19.97L19.199 19.967C19.2515 19.9867 19.3069 19.9979 19.363 20C19.448 20 19.5317 19.9789 19.6067 19.9386C19.6816 19.8984 19.7453 19.8402 19.7923 19.7693C19.8392 19.6984 19.8679 19.6169 19.8757 19.5323C19.8835 19.4476 19.8712 19.3623 19.838 19.284Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M16 9H8C7.44772 9 7 9.44772 7 10C7 10.5523 7.44772 11 8 11H16C16.5523 11 17 10.5523 17 10C17 9.44772 16.5523 9 16 9Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M11 12H8C7.44772 12 7 12.4477 7 13C7 13.5523 7.44772 14 8 14H11C11.5523 14 12 13.5523 12 13C12 12.4477 11.5523 12 11 12Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/_react.default.createElement("rect", {
-    x: "14",
-    y: "2",
-    width: "8",
-    height: "8",
-    rx: "4",
-    fill: "var(--ds-background-warning-bold, ".concat(_colors.Y300, ")")
-  }));
-};
 var IconCommentConfluenceTypeWithDotGlyph = function IconCommentConfluenceTypeWithDotGlyph() {
   return /*#__PURE__*/_react.default.createElement("svg", {
     width: "24",
@@ -68,7 +40,7 @@ var IconCommentConfluenceTypeWithDotGlyph = function IconCommentConfluenceTypeWi
 };
 var CommentWithDotIcon = exports.CommentWithDotIcon = function CommentWithDotIcon(props) {
   return /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
-    glyph: (0, _platformFeatureFlags.fg)('platform_editor_media_interaction_improvements') ? IconCommentConfluenceTypeWithDotGlyph : IconCommentWithDotGlyph
+    glyph: IconCommentConfluenceTypeWithDotGlyph
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, props));

package/dist/es2019/mediaPlugin.js

@@ -61,7 +61,7 @@ const MediaViewerFunctionalComponent = ({
   // when document changes are made while media viewer is open
 
   const mediaItems = useMemo(() => {
-    if (mediaState !== null && mediaState !== void 0 && mediaState.isMediaViewerVisible && fg('platform_editor_media_interaction_improvements')) {
+    if (mediaState !== null && mediaState !== void 0 && mediaState.isMediaViewerVisible) {
       const mediaNodes = extractMediaNodes(editorView.state.doc);
       return createMediaIdentifierArray(mediaNodes);
     }
@@ -80,7 +80,7 @@ const MediaViewerFunctionalComponent = ({
     mediaClientConfig: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig,
     onClose: handleOnClose,
     selectedNodeAttrs: mediaState.mediaViewerSelectedMedia,
-    items: fg('platform_editor_media_interaction_improvements') ? mediaItems : undefined
+    items: mediaItems
   });
 };
 export const mediaPlugin = ({

package/dist/es2019/nodeviews/mediaSingle.js

@@ -11,6 +11,7 @@ import React, { Component, Fragment, useMemo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { captionMessages } from '@atlaskit/editor-common/media';
 import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, ExternalImageBadge, getMaxWidthForNestedNode, MEDIA_SINGLE_GUTTER_SIZE, MediaBadges } from '@atlaskit/editor-common/media-single';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
@@ -445,10 +446,12 @@ export default class MediaSingleNode extends Component {
     // remove typecasting
     , {
       ref: this.captionPlaceHolderRef,
-      onClick: this.clickPlaceholder
+      onClick: this.clickPlaceholder,
+      placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
     }) : jsx(CaptionPlaceholder, {
       ref: this.captionPlaceHolderRef,
-      onClick: this.clickPlaceholder
+      onClick: this.clickPlaceholder,
+      placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
     })));
     return jsx(Fragment, null, canResize ? fg('platform_editor_media_extended_resize_experience') ? jsx(ResizableMediaSingleNext
     // Ignored via go/ees005

package/dist/es2019/nodeviews/mediaSingleNext.js

@@ -8,6 +8,7 @@ import React, { Fragment } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { usePreviousState } from '@atlaskit/editor-common/hooks';
+import { captionMessages } from '@atlaskit/editor-common/media';
 import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, ExternalImageBadge, getMaxWidthForNestedNode, MEDIA_SINGLE_GUTTER_SIZE, MediaBadges } from '@atlaskit/editor-common/media-single';
 import { MediaSingle } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
@@ -487,10 +488,12 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
   // remove typecasting
   , {
     ref: captionPlaceHolderRef,
-    onClick: clickPlaceholder
+    onClick: clickPlaceholder,
+    placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
   }) : jsx(CaptionPlaceholder, {
     ref: captionPlaceHolderRef,
-    onClick: clickPlaceholder
+    onClick: clickPlaceholder,
+    placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
   })));
   return jsx(Fragment, null, canResize ? fg('platform_editor_media_extended_resize_experience') ? jsx(ResizableMediaSingleNext, {
     view: view,

package/dist/es2019/pm-plugins/main.js

@@ -902,9 +902,11 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, node
         return false;
       },
       handleDoubleClickOn: view => {
-        var _pluginInjectionApi$e, _pluginInjectionApi$e2;
-        if (!fg('platform_editor_media_interaction_improvements')) {
-          return;
+        var _pluginState$mediaOpt, _pluginInjectionApi$e, _pluginInjectionApi$e2;
+        // Check if media viewer is enabled
+        const pluginState = getMediaPluginState(view.state);
+        if (!((_pluginState$mediaOpt = pluginState.mediaOptions) !== null && _pluginState$mediaOpt !== void 0 && _pluginState$mediaOpt.allowImagePreview)) {
+          return false;
         }
         const isLivePagesViewMode = (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$e = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e === void 0 ? void 0 : (_pluginInjectionApi$e2 = _pluginInjectionApi$e.sharedState.currentState()) === null || _pluginInjectionApi$e2 === void 0 ? void 0 : _pluginInjectionApi$e2.mode) === 'view';
 

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

@@ -24,21 +24,17 @@ const placeholderButton = xcss({
   width: '100%',
   marginTop: 'space.100'
 });
-
 // platform_editor_typography_ugc clean up
 // Remove this component
 export const CaptionPlaceholder = /*#__PURE__*/React.forwardRef(({
-  onClick
+  onClick,
+  placeholderMessage
 }, ref) => {
   const handlePointerDown = useCallback(e => {
     e.preventDefault();
     onClick();
   }, [onClick]);
-  const message = fg('platform_editor_media_interaction_improvements') ? {
-    ...messages.placeholderWithDoubleClickPrompt
-  } : {
-    ...messages.placeholder
-  };
+  const computedPlaceholderMessage = placeholderMessage ? placeholderMessage : messages.placeholder;
 
   // 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.
@@ -54,7 +50,7 @@ export const CaptionPlaceholder = /*#__PURE__*/React.forwardRef(({
       }, jsx(FormattedMessage
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
-      , message))
+      , computedPlaceholderMessage))
     );
   }
   return (
@@ -68,22 +64,19 @@ export const CaptionPlaceholder = /*#__PURE__*/React.forwardRef(({
     }, jsx(FormattedMessage
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
-    , message))
+    , computedPlaceholderMessage))
   );
 });
 export const CaptionPlaceholderButton = /*#__PURE__*/React.forwardRef(({
-  onClick
+  onClick,
+  placeholderMessage
 }, ref) => {
   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
     e.preventDefault();
   }, []);
-  const message = fg('platform_editor_media_interaction_improvements') ? {
-    ...messages.placeholderWithDoubleClickPrompt
-  } : {
-    ...messages.placeholder
-  };
+  const computedPlaceholderMessage = placeholderMessage ? placeholderMessage : messages.placeholder;
   return jsx(Pressable, {
     ref: ref,
     backgroundColor: "color.background.neutral.subtle",
@@ -99,5 +92,5 @@ export const CaptionPlaceholderButton = /*#__PURE__*/React.forwardRef(({
   }, jsx(FormattedMessage
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
-  , message)));
+  , computedPlaceholderMessage)));
 });

package/dist/es2019/ui/toolbar/assets/commentWithDotIcon.js

@@ -1,35 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Icon from '@atlaskit/icon';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { N0, Y300 } from '@atlaskit/theme/colors';
-const IconCommentWithDotGlyph = () => {
-  return /*#__PURE__*/React.createElement("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M4.998 11.513C4.998 8.475 8.139 6.003 12 6.003C15.861 6.003 19.002 8.475 19.002 11.513C19.002 14.552 15.861 17.023 12 17.023C8.139 17.023 4.998 14.552 4.998 11.513ZM19.838 19.284V19.282C19.838 19.282 18.274 17.022 19.071 16.166L19.034 16.186C20.261 14.902 21 13.279 21 11.513C21 7.371 16.963 4 12 4C7.037 4 3 7.37 3 11.513C3 15.656 7.037 19.027 12 19.027C13.42 19.027 14.76 18.742 15.957 18.251C16.96 19.273 18.244 19.823 19.197 19.97L19.199 19.967C19.2515 19.9867 19.3069 19.9979 19.363 20C19.448 20 19.5317 19.9789 19.6067 19.9386C19.6816 19.8984 19.7453 19.8402 19.7923 19.7693C19.8392 19.6984 19.8679 19.6169 19.8757 19.5323C19.8835 19.4476 19.8712 19.3623 19.838 19.284Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M16 9H8C7.44772 9 7 9.44772 7 10C7 10.5523 7.44772 11 8 11H16C16.5523 11 17 10.5523 17 10C17 9.44772 16.5523 9 16 9Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M11 12H8C7.44772 12 7 12.4477 7 13C7 13.5523 7.44772 14 8 14H11C11.5523 14 12 13.5523 12 13C12 12.4477 11.5523 12 11 12Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "14",
-    y: "2",
-    width: "8",
-    height: "8",
-    rx: "4",
-    fill: `var(--ds-background-warning-bold, ${Y300})`
-  }));
-};
+import { N0 } from '@atlaskit/theme/colors';
 const IconCommentConfluenceTypeWithDotGlyph = () => {
   return /*#__PURE__*/React.createElement("svg", {
     width: "24",
@@ -61,7 +33,7 @@ const IconCommentConfluenceTypeWithDotGlyph = () => {
 };
 export const CommentWithDotIcon = props => {
   return /*#__PURE__*/React.createElement(Icon, _extends({
-    glyph: fg('platform_editor_media_interaction_improvements') ? IconCommentConfluenceTypeWithDotGlyph : IconCommentWithDotGlyph
+    glyph: IconCommentConfluenceTypeWithDotGlyph
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, props));

package/dist/esm/mediaPlugin.js

@@ -57,7 +57,7 @@ var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_re
   // when document changes are made while media viewer is open
 
   var mediaItems = useMemo(function () {
-    if (mediaState !== null && mediaState !== void 0 && mediaState.isMediaViewerVisible && fg('platform_editor_media_interaction_improvements')) {
+    if (mediaState !== null && mediaState !== void 0 && mediaState.isMediaViewerVisible) {
       var mediaNodes = extractMediaNodes(editorView.state.doc);
       return createMediaIdentifierArray(mediaNodes);
     }
@@ -76,7 +76,7 @@ var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_re
     mediaClientConfig: mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaClientConfig,
     onClose: handleOnClose,
     selectedNodeAttrs: mediaState.mediaViewerSelectedMedia,
-    items: fg('platform_editor_media_interaction_improvements') ? mediaItems : undefined
+    items: mediaItems
   });
 };
 export var mediaPlugin = function mediaPlugin(_ref3) {

package/dist/esm/nodeviews/mediaSingle.js

@@ -24,6 +24,7 @@ import React, { Component, Fragment, useMemo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { captionMessages } from '@atlaskit/editor-common/media';
 import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, ExternalImageBadge, getMaxWidthForNestedNode, MEDIA_SINGLE_GUTTER_SIZE, MediaBadges } from '@atlaskit/editor-common/media-single';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
@@ -522,10 +523,12 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       // remove typecasting
       , {
         ref: this.captionPlaceHolderRef,
-        onClick: this.clickPlaceholder
+        onClick: this.clickPlaceholder,
+        placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
       }) : jsx(CaptionPlaceholder, {
         ref: this.captionPlaceHolderRef,
-        onClick: this.clickPlaceholder
+        onClick: this.clickPlaceholder,
+        placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
       })));
       return jsx(Fragment, null, canResize ? fg('platform_editor_media_extended_resize_experience') ? jsx(ResizableMediaSingleNext
       // Ignored via go/ees005

package/dist/esm/nodeviews/mediaSingleNext.js

@@ -14,6 +14,7 @@ import React, { Fragment } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { usePreviousState } from '@atlaskit/editor-common/hooks';
+import { captionMessages } from '@atlaskit/editor-common/media';
 import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, ExternalImageBadge, getMaxWidthForNestedNode, MEDIA_SINGLE_GUTTER_SIZE, MediaBadges } from '@atlaskit/editor-common/media-single';
 import { MediaSingle } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
@@ -520,10 +521,12 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
   // remove typecasting
   , {
     ref: captionPlaceHolderRef,
-    onClick: clickPlaceholder
+    onClick: clickPlaceholder,
+    placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
   }) : jsx(CaptionPlaceholder, {
     ref: captionPlaceHolderRef,
-    onClick: clickPlaceholder
+    onClick: clickPlaceholder,
+    placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
   })));
   return jsx(Fragment, null, canResize ? fg('platform_editor_media_extended_resize_experience') ? jsx(ResizableMediaSingleNext, {
     view: view,

package/dist/esm/pm-plugins/main.js

@@ -1002,9 +1002,11 @@ export var createPlugin = function createPlugin(_schema, options, getIntl, plugi
         return false;
       },
       handleDoubleClickOn: function handleDoubleClickOn(view) {
-        var _pluginInjectionApi$e;
-        if (!fg('platform_editor_media_interaction_improvements')) {
-          return;
+        var _pluginState$mediaOpt, _pluginInjectionApi$e;
+        // Check if media viewer is enabled
+        var pluginState = getMediaPluginState(view.state);
+        if (!((_pluginState$mediaOpt = pluginState.mediaOptions) !== null && _pluginState$mediaOpt !== void 0 && _pluginState$mediaOpt.allowImagePreview)) {
+          return false;
         }
         var isLivePagesViewMode = (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$e = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e === void 0 || (_pluginInjectionApi$e = _pluginInjectionApi$e.sharedState.currentState()) === null || _pluginInjectionApi$e === void 0 ? void 0 : _pluginInjectionApi$e.mode) === 'view';
 

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

@@ -1,8 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -23,16 +20,16 @@ var placeholderButton = xcss({
   width: '100%',
   marginTop: 'space.100'
 });
-
 // platform_editor_typography_ugc clean up
 // Remove this component
 export var CaptionPlaceholder = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var onClick = _ref.onClick;
+  var onClick = _ref.onClick,
+    placeholderMessage = _ref.placeholderMessage;
   var handlePointerDown = useCallback(function (e) {
     e.preventDefault();
     onClick();
   }, [onClick]);
-  var message = fg('platform_editor_media_interaction_improvements') ? _objectSpread({}, messages.placeholderWithDoubleClickPrompt) : _objectSpread({}, messages.placeholder);
+  var computedPlaceholderMessage = placeholderMessage ? placeholderMessage : messages.placeholder;
 
   // 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.
@@ -48,7 +45,7 @@ export var CaptionPlaceholder = /*#__PURE__*/React.forwardRef(function (_ref, re
       }, jsx(FormattedMessage
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
-      , message))
+      , computedPlaceholderMessage))
     );
   }
   return (
@@ -62,17 +59,18 @@ export var CaptionPlaceholder = /*#__PURE__*/React.forwardRef(function (_ref, re
     }, jsx(FormattedMessage
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
-    , message))
+    , computedPlaceholderMessage))
   );
 });
 export var CaptionPlaceholderButton = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var onClick = _ref2.onClick;
+  var onClick = _ref2.onClick,
+    placeholderMessage = _ref2.placeholderMessage;
   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
     e.preventDefault();
   }, []);
-  var message = fg('platform_editor_media_interaction_improvements') ? _objectSpread({}, messages.placeholderWithDoubleClickPrompt) : _objectSpread({}, messages.placeholder);
+  var computedPlaceholderMessage = placeholderMessage ? placeholderMessage : messages.placeholder;
   return jsx(Pressable, {
     ref: ref,
     backgroundColor: "color.background.neutral.subtle",
@@ -88,5 +86,5 @@ export var CaptionPlaceholderButton = /*#__PURE__*/React.forwardRef(function (_r
   }, jsx(FormattedMessage
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
-  , message)));
+  , computedPlaceholderMessage)));
 });

package/dist/esm/ui/toolbar/assets/commentWithDotIcon.js

@@ -1,35 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Icon from '@atlaskit/icon';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { N0, Y300 } from '@atlaskit/theme/colors';
-var IconCommentWithDotGlyph = function IconCommentWithDotGlyph() {
-  return /*#__PURE__*/React.createElement("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M4.998 11.513C4.998 8.475 8.139 6.003 12 6.003C15.861 6.003 19.002 8.475 19.002 11.513C19.002 14.552 15.861 17.023 12 17.023C8.139 17.023 4.998 14.552 4.998 11.513ZM19.838 19.284V19.282C19.838 19.282 18.274 17.022 19.071 16.166L19.034 16.186C20.261 14.902 21 13.279 21 11.513C21 7.371 16.963 4 12 4C7.037 4 3 7.37 3 11.513C3 15.656 7.037 19.027 12 19.027C13.42 19.027 14.76 18.742 15.957 18.251C16.96 19.273 18.244 19.823 19.197 19.97L19.199 19.967C19.2515 19.9867 19.3069 19.9979 19.363 20C19.448 20 19.5317 19.9789 19.6067 19.9386C19.6816 19.8984 19.7453 19.8402 19.7923 19.7693C19.8392 19.6984 19.8679 19.6169 19.8757 19.5323C19.8835 19.4476 19.8712 19.3623 19.838 19.284Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M16 9H8C7.44772 9 7 9.44772 7 10C7 10.5523 7.44772 11 8 11H16C16.5523 11 17 10.5523 17 10C17 9.44772 16.5523 9 16 9Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M11 12H8C7.44772 12 7 12.4477 7 13C7 13.5523 7.44772 14 8 14H11C11.5523 14 12 13.5523 12 13C12 12.4477 11.5523 12 11 12Z",
-    fill: "currentColor"
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "14",
-    y: "2",
-    width: "8",
-    height: "8",
-    rx: "4",
-    fill: "var(--ds-background-warning-bold, ".concat(Y300, ")")
-  }));
-};
+import { N0 } from '@atlaskit/theme/colors';
 var IconCommentConfluenceTypeWithDotGlyph = function IconCommentConfluenceTypeWithDotGlyph() {
   return /*#__PURE__*/React.createElement("svg", {
     width: "24",
@@ -61,7 +33,7 @@ var IconCommentConfluenceTypeWithDotGlyph = function IconCommentConfluenceTypeWi
 };
 export var CommentWithDotIcon = function CommentWithDotIcon(props) {
   return /*#__PURE__*/React.createElement(Icon, _extends({
-    glyph: fg('platform_editor_media_interaction_improvements') ? IconCommentConfluenceTypeWithDotGlyph : IconCommentWithDotGlyph
+    glyph: IconCommentConfluenceTypeWithDotGlyph
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, props));

package/dist/types/ui/CaptionPlaceholder/index.d.ts

@@ -3,9 +3,14 @@
  * @jsx jsx
  */
 import React from 'react';
-export declare const CaptionPlaceholder: React.ForwardRefExoticComponent<{
+type CaptionPlaceholderProps = {
     onClick: () => void;
-} & React.RefAttributes<HTMLSpanElement>>;
-export declare const CaptionPlaceholderButton: React.ForwardRefExoticComponent<{
-    onClick: () => void;
-} & React.RefAttributes<HTMLButtonElement>>;
+    placeholderMessage?: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export declare const CaptionPlaceholder: React.ForwardRefExoticComponent<CaptionPlaceholderProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const CaptionPlaceholderButton: React.ForwardRefExoticComponent<CaptionPlaceholderProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/types-ts4.5/ui/CaptionPlaceholder/index.d.ts

@@ -3,9 +3,14 @@
  * @jsx jsx
  */
 import React from 'react';
-export declare const CaptionPlaceholder: React.ForwardRefExoticComponent<{
+type CaptionPlaceholderProps = {
     onClick: () => void;
-} & React.RefAttributes<HTMLSpanElement>>;
-export declare const CaptionPlaceholderButton: React.ForwardRefExoticComponent<{
-    onClick: () => void;
-} & React.RefAttributes<HTMLButtonElement>>;
+    placeholderMessage?: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export declare const CaptionPlaceholder: React.ForwardRefExoticComponent<CaptionPlaceholderProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const CaptionPlaceholderButton: React.ForwardRefExoticComponent<CaptionPlaceholderProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "1.45.0",
+	"version": "1.45.1",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,11 +36,11 @@
 		"@atlaskit/analytics-namespaced-context": "^6.13.0",
 		"@atlaskit/analytics-next": "^10.3.0",
 		"@atlaskit/button": "^20.5.0",
-		"@atlaskit/editor-common": "^99.10.0",
+		"@atlaskit/editor-common": "^99.11.0",
 		"@atlaskit/editor-palette": "1.7.0",
 		"@atlaskit/editor-plugin-analytics": "^1.12.0",
 		"@atlaskit/editor-plugin-annotation": "1.28.0",
-		"@atlaskit/editor-plugin-connectivity": "^1.2.0",
+		"@atlaskit/editor-plugin-connectivity": "^1.3.0",
 		"@atlaskit/editor-plugin-decorations": "^1.5.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.5.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.2.0",
@@ -48,13 +48,13 @@
 		"@atlaskit/editor-plugin-focus": "^1.5.0",
 		"@atlaskit/editor-plugin-grid": "^1.4.0",
 		"@atlaskit/editor-plugin-guideline": "^1.4.0",
-		"@atlaskit/editor-plugin-selection": "^1.7.0",
+		"@atlaskit/editor-plugin-selection": "^1.8.0",
 		"@atlaskit/editor-plugin-width": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.2.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/form": "^11.1.0",
-		"@atlaskit/icon": "^23.7.0",
+		"@atlaskit/icon": "^23.8.0",
 		"@atlaskit/media-card": "^78.19.0",
 		"@atlaskit/media-client": "^31.1.0",
 		"@atlaskit/media-client-react": "^3.0.0",
@@ -67,7 +67,7 @@
 		"@atlaskit/primitives": "^13.5.0",
 		"@atlaskit/textfield": "^6.8.0",
 		"@atlaskit/theme": "^15.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.43.0",
+		"@atlaskit/tmp-editor-statsig": "^2.45.0",
 		"@atlaskit/tokens": "^3.3.0",
 		"@atlaskit/tooltip": "^19.1.0",
 		"@babel/runtime": "^7.0.0",
@@ -136,9 +136,6 @@
 		"platform_editor_media_batch_updates": {
 			"type": "boolean"
 		},
-		"platform_editor_media_interaction_improvements": {
-			"type": "boolean"
-		},
 		"platform_editor_typography_ugc": {
 			"type": "boolean"
 		},