@atlaskit/editor-plugin-media 14.2.11 → 14.2.12

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-media
 
+## 14.2.12
+
+### Patch Changes
+
+- [`a72d5084ae782`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a72d5084ae782) -
+  Add a rendered analytics event for remix generated images
+- Updated dependencies
+
 ## 14.2.11
 
 ### Patch Changes

package/compass.yml

@@ -1,7 +1,7 @@
 configVersion: 1
 id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/f230eb1f-41c6-4222-88dc-a040bf5a72ce
 name: '@atlaskit/editor-plugin-media'
-ownerId: ari:cloud:identity::team/e611522d-1773-43e4-85a5-e62f7cde47d6 # Editor - Core Experiences
+ownerId: ari:cloud:identity::team/0250ee69-f755-47fd-a468-bf8a9d10a3c5 # Editor AI
 labels:
   - platform-code
   - platform-afm
@@ -24,6 +24,9 @@ customFields:
   - name: Department
     type: text
     value: Eng - Editor
+  - name: Trusted Reviewer Teams
+    type: text
+    value: ari:cloud:identity::team/cf6a670b-5252-4c68-a769-9207de366beb
   - name: Technical Owner
     type: user
     value: ari:cloud:identity::user/612646c53fe26c00694fbe6a # Chris Kimber

package/dist/cjs/nodeviews/mediaNodeView/media.js

@@ -19,6 +19,7 @@ var _bindEventListener = require("bind-event-listener");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
@@ -44,6 +45,11 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)(_this, "state", {});
     (0, _defineProperty2.default)(_this, "videoControlsWrapperRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)(_this, "unbindKeyDown", null);
+    (0, _defineProperty2.default)(_this, "getDataConsumerMark", function () {
+      return (0, _platformFeatureFlags.fg)('cc-maui-add-mark-for-remix-generated-images') ? _this.props.node.marks.find(function (m) {
+        return m.type.name === 'dataConsumer';
+      }) : undefined;
+    });
     (0, _defineProperty2.default)(_this, "setViewMediaClientConfig", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
       var mediaProvider, viewMediaClientConfig, viewAndUploadMediaClientConfig;
       return _regenerator.default.wrap(function (_context) {
@@ -194,11 +200,28 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var contextIdentifierProvider, _t, _t2;
+        var _dataConsumerMark$att;
+        var _this$props2, node, pluginInjectionApi, dataConsumerMark, infographicType, _pluginInjectionApi$a, contextIdentifierProvider, _t, _t2;
         return _regenerator.default.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               this.handleNewNode(this.props);
+              _this$props2 = this.props, node = _this$props2.node, pluginInjectionApi = _this$props2.pluginInjectionApi;
+              dataConsumerMark = this.getDataConsumerMark();
+              infographicType = dataConsumerMark === null || dataConsumerMark === void 0 || (_dataConsumerMark$att = dataConsumerMark.attrs.sources) === null || _dataConsumerMark$att === void 0 ? void 0 : _dataConsumerMark$att[0];
+              if (infographicType) {
+                pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.actions.fireAnalyticsEvent({
+                  action: _analytics.ACTION.RENDERED,
+                  actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+                  actionSubjectId: node.attrs.id,
+                  eventType: _analytics.EVENT_TYPE.TRACK,
+                  attributes: {
+                    infographicType: infographicType,
+                    pageMode: 'edit',
+                    mediaId: node.attrs.id
+                  }
+                });
+              }
               contextIdentifierProvider = this.props.contextIdentifierProvider;
               _t = this;
               _context2.next = 1;
@@ -298,20 +321,18 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _dataConsumerMark$att;
-      var _this$props2 = this.props,
-        node = _this$props2.node,
-        selected = _this$props2.selected,
-        originalDimensions = _this$props2.originalDimensions,
-        isLoading = _this$props2.isLoading,
-        maxDimensions = _this$props2.maxDimensions,
-        mediaOptions = _this$props2.mediaOptions;
+      var _dataConsumerMark$att2;
+      var _this$props3 = this.props,
+        node = _this$props3.node,
+        selected = _this$props3.selected,
+        originalDimensions = _this$props3.originalDimensions,
+        isLoading = _this$props3.isLoading,
+        maxDimensions = _this$props3.maxDimensions,
+        mediaOptions = _this$props3.mediaOptions;
       var borderMark = node.marks.find(function (m) {
         return m.type.name === 'border';
       });
-      var dataConsumerMark = (0, _platformFeatureFlags.fg)('cc-maui-add-mark-for-remix-generated-images') ? node.marks.find(function (m) {
-        return m.type.name === 'dataConsumer';
-      }) : undefined;
+      var dataConsumerMark = this.getDataConsumerMark();
       var _this$state = this.state,
         viewMediaClientConfig = _this$state.viewMediaClientConfig,
         viewAndUploadMediaClientConfig = _this$state.viewAndUploadMediaClientConfig,
@@ -373,7 +394,7 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
           border: !!borderMark,
           // Only defined for remix-generated media (i.e. media nodes with a dataConsumer mark).
           // Format: "remix:{type}:{subtype}" e.g. "remix:infographic:corporate-doodle"
-          remixSource: dataConsumerMark === null || dataConsumerMark === void 0 || (_dataConsumerMark$att = dataConsumerMark.attrs.sources) === null || _dataConsumerMark$att === void 0 ? void 0 : _dataConsumerMark$att[0]
+          remixSource: dataConsumerMark === null || dataConsumerMark === void 0 || (_dataConsumerMark$att2 = dataConsumerMark.attrs.sources) === null || _dataConsumerMark$att2 === void 0 ? void 0 : _dataConsumerMark$att2[0]
         })
       }, /*#__PURE__*/_react.default.createElement(_mediaCard.Card, {
         mediaClientConfig: mediaClientConfig,

package/dist/es2019/nodeviews/mediaNodeView/media.js

@@ -4,6 +4,7 @@ import { bind } from 'bind-event-listener';
 import memoizeOne from 'memoize-one';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { setNodeSelection, setTextSelection, withImageLoader } from '@atlaskit/editor-common/utils';
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
@@ -25,6 +26,7 @@ export class MediaNode extends Component {
     _defineProperty(this, "state", {});
     _defineProperty(this, "videoControlsWrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "unbindKeyDown", null);
+    _defineProperty(this, "getDataConsumerMark", () => fg('cc-maui-add-mark-for-remix-generated-images') ? this.props.node.marks.find(m => m.type.name === 'dataConsumer') : undefined);
     _defineProperty(this, "setViewMediaClientConfig", async () => {
       // mediaProvider is Promise<MediaProvider>, so await it first to get the actual provider
       const mediaProvider = await this.props.mediaProvider;
@@ -162,7 +164,28 @@ export class MediaNode extends Component {
     return false;
   }
   async componentDidMount() {
+    var _dataConsumerMark$att;
     this.handleNewNode(this.props);
+    const {
+      node,
+      pluginInjectionApi
+    } = this.props;
+    const dataConsumerMark = this.getDataConsumerMark();
+    const infographicType = dataConsumerMark === null || dataConsumerMark === void 0 ? void 0 : (_dataConsumerMark$att = dataConsumerMark.attrs.sources) === null || _dataConsumerMark$att === void 0 ? void 0 : _dataConsumerMark$att[0];
+    if (infographicType) {
+      var _pluginInjectionApi$a;
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.fireAnalyticsEvent({
+        action: ACTION.RENDERED,
+        actionSubject: ACTION_SUBJECT.MEDIA,
+        actionSubjectId: node.attrs.id,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          infographicType,
+          pageMode: 'edit',
+          mediaId: node.attrs.id
+        }
+      });
+    }
     const {
       contextIdentifierProvider
     } = this.props;
@@ -241,7 +264,7 @@ export class MediaNode extends Component {
     }
   }
   render() {
-    var _dataConsumerMark$att;
+    var _dataConsumerMark$att2;
     const {
       node,
       selected,
@@ -251,7 +274,7 @@ export class MediaNode extends Component {
       mediaOptions
     } = this.props;
     const borderMark = node.marks.find(m => m.type.name === 'border');
-    const dataConsumerMark = fg('cc-maui-add-mark-for-remix-generated-images') ? node.marks.find(m => m.type.name === 'dataConsumer') : undefined;
+    const dataConsumerMark = this.getDataConsumerMark();
     const {
       viewMediaClientConfig,
       viewAndUploadMediaClientConfig,
@@ -314,7 +337,7 @@ export class MediaNode extends Component {
           border: !!borderMark,
           // Only defined for remix-generated media (i.e. media nodes with a dataConsumer mark).
           // Format: "remix:{type}:{subtype}" e.g. "remix:infographic:corporate-doodle"
-          remixSource: dataConsumerMark === null || dataConsumerMark === void 0 ? void 0 : (_dataConsumerMark$att = dataConsumerMark.attrs.sources) === null || _dataConsumerMark$att === void 0 ? void 0 : _dataConsumerMark$att[0]
+          remixSource: dataConsumerMark === null || dataConsumerMark === void 0 ? void 0 : (_dataConsumerMark$att2 = dataConsumerMark.attrs.sources) === null || _dataConsumerMark$att2 === void 0 ? void 0 : _dataConsumerMark$att2[0]
         }
       }
     }, /*#__PURE__*/React.createElement(Card, {

package/dist/esm/nodeviews/mediaNodeView/media.js

@@ -13,6 +13,7 @@ import { bind } from 'bind-event-listener';
 import memoizeOne from 'memoize-one';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { setNodeSelection, setTextSelection, withImageLoader } from '@atlaskit/editor-common/utils';
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
@@ -36,6 +37,11 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "state", {});
     _defineProperty(_this, "videoControlsWrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(_this, "unbindKeyDown", null);
+    _defineProperty(_this, "getDataConsumerMark", function () {
+      return fg('cc-maui-add-mark-for-remix-generated-images') ? _this.props.node.marks.find(function (m) {
+        return m.type.name === 'dataConsumer';
+      }) : undefined;
+    });
     _defineProperty(_this, "setViewMediaClientConfig", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var mediaProvider, viewMediaClientConfig, viewAndUploadMediaClientConfig;
       return _regeneratorRuntime.wrap(function (_context) {
@@ -186,11 +192,28 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var contextIdentifierProvider, _t, _t2;
+        var _dataConsumerMark$att;
+        var _this$props2, node, pluginInjectionApi, dataConsumerMark, infographicType, _pluginInjectionApi$a, contextIdentifierProvider, _t, _t2;
         return _regeneratorRuntime.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               this.handleNewNode(this.props);
+              _this$props2 = this.props, node = _this$props2.node, pluginInjectionApi = _this$props2.pluginInjectionApi;
+              dataConsumerMark = this.getDataConsumerMark();
+              infographicType = dataConsumerMark === null || dataConsumerMark === void 0 || (_dataConsumerMark$att = dataConsumerMark.attrs.sources) === null || _dataConsumerMark$att === void 0 ? void 0 : _dataConsumerMark$att[0];
+              if (infographicType) {
+                pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.actions.fireAnalyticsEvent({
+                  action: ACTION.RENDERED,
+                  actionSubject: ACTION_SUBJECT.MEDIA,
+                  actionSubjectId: node.attrs.id,
+                  eventType: EVENT_TYPE.TRACK,
+                  attributes: {
+                    infographicType: infographicType,
+                    pageMode: 'edit',
+                    mediaId: node.attrs.id
+                  }
+                });
+              }
               contextIdentifierProvider = this.props.contextIdentifierProvider;
               _t = this;
               _context2.next = 1;
@@ -290,20 +313,18 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _dataConsumerMark$att;
-      var _this$props2 = this.props,
-        node = _this$props2.node,
-        selected = _this$props2.selected,
-        originalDimensions = _this$props2.originalDimensions,
-        isLoading = _this$props2.isLoading,
-        maxDimensions = _this$props2.maxDimensions,
-        mediaOptions = _this$props2.mediaOptions;
+      var _dataConsumerMark$att2;
+      var _this$props3 = this.props,
+        node = _this$props3.node,
+        selected = _this$props3.selected,
+        originalDimensions = _this$props3.originalDimensions,
+        isLoading = _this$props3.isLoading,
+        maxDimensions = _this$props3.maxDimensions,
+        mediaOptions = _this$props3.mediaOptions;
       var borderMark = node.marks.find(function (m) {
         return m.type.name === 'border';
       });
-      var dataConsumerMark = fg('cc-maui-add-mark-for-remix-generated-images') ? node.marks.find(function (m) {
-        return m.type.name === 'dataConsumer';
-      }) : undefined;
+      var dataConsumerMark = this.getDataConsumerMark();
       var _this$state = this.state,
         viewMediaClientConfig = _this$state.viewMediaClientConfig,
         viewAndUploadMediaClientConfig = _this$state.viewAndUploadMediaClientConfig,
@@ -365,7 +386,7 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
           border: !!borderMark,
           // Only defined for remix-generated media (i.e. media nodes with a dataConsumer mark).
           // Format: "remix:{type}:{subtype}" e.g. "remix:infographic:corporate-doodle"
-          remixSource: dataConsumerMark === null || dataConsumerMark === void 0 || (_dataConsumerMark$att = dataConsumerMark.attrs.sources) === null || _dataConsumerMark$att === void 0 ? void 0 : _dataConsumerMark$att[0]
+          remixSource: dataConsumerMark === null || dataConsumerMark === void 0 || (_dataConsumerMark$att2 = dataConsumerMark.attrs.sources) === null || _dataConsumerMark$att2 === void 0 ? void 0 : _dataConsumerMark$att2[0]
         })
       }, /*#__PURE__*/React.createElement(Card, {
         mediaClientConfig: mediaClientConfig,

package/dist/types/nodeviews/mediaNodeView/media.d.ts

@@ -41,6 +41,7 @@ export declare class MediaNode extends Component<MediaNodeProps, MediaNodeState>
     unbindKeyDown: UnbindFn | null;
     constructor(props: MediaNodeProps);
     shouldComponentUpdate(nextProps: MediaNodeProps, nextState: MediaNodeState): boolean;
+    private getDataConsumerMark;
     componentDidMount(): Promise<void>;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: Readonly<MediaNodeProps>): void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "14.2.11",
+	"version": "14.2.12",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -57,7 +57,7 @@
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/primitives": "^20.3.0",
 		"@atlaskit/textfield": "^9.1.0",
-		"@atlaskit/tmp-editor-statsig": "^119.0.0",
+		"@atlaskit/tmp-editor-statsig": "^119.3.0",
 		"@atlaskit/tokens": "^15.3.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@babel/runtime": "^7.0.0",