@atlaskit/editor-plugin-media 0.11.2 → 0.11.3
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 +7 -0
- package/dist/cjs/commands/helpers.js +2 -0
- package/dist/cjs/pm-plugins/alt-text/commands.js +14 -5
- package/dist/cjs/pm-plugins/alt-text/ui/AltTextEdit.js +12 -5
- package/dist/cjs/toolbar/alt-text.js +4 -0
- package/dist/cjs/toolbar/commands.js +2 -2
- package/dist/es2019/commands/helpers.js +2 -0
- package/dist/es2019/pm-plugins/alt-text/commands.js +17 -6
- package/dist/es2019/pm-plugins/alt-text/ui/AltTextEdit.js +11 -5
- package/dist/es2019/toolbar/alt-text.js +4 -0
- package/dist/es2019/toolbar/commands.js +1 -1
- package/dist/esm/commands/helpers.js +2 -0
- package/dist/esm/pm-plugins/alt-text/commands.js +14 -5
- package/dist/esm/pm-plugins/alt-text/ui/AltTextEdit.js +12 -5
- package/dist/esm/toolbar/alt-text.js +4 -0
- package/dist/esm/toolbar/commands.js +1 -1
- package/dist/types/pm-plugins/alt-text/ui/AltTextEdit.d.ts +2 -0
- package/dist/types/toolbar/commands.d.ts +2 -0
- package/dist/types-ts4.5/pm-plugins/alt-text/ui/AltTextEdit.d.ts +2 -0
- package/dist/types-ts4.5/toolbar/commands.d.ts +2 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-media
|
|
2
2
|
|
|
3
|
+
## 0.11.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#66631](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66631) [`c1d10d6c2013`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c1d10d6c2013) - Updated alt text analytics to log additional attributes
|
|
8
|
+
- [#67194](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67194) [`37379761475c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/37379761475c) - [ED-21806] Skip changes from NCS and tinted transactions.
|
|
9
|
+
|
|
3
10
|
## 0.11.2
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
|
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.updateMediaSingleNodeAttrs = exports.updateCurrentMediaNodeAttrs = exports.updateAllMediaSingleNodesAttrs = exports.replaceExternalMedia = exports.isMediaNode = exports.findMediaSingleNode = exports.findAllMediaSingleNodes = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _steps = require("@atlaskit/adf-schema/steps");
|
|
10
|
+
var _collab = require("@atlaskit/editor-common/collab");
|
|
10
11
|
var _pluginKey = require("../pm-plugins/plugin-key");
|
|
11
12
|
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; }
|
|
12
13
|
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; }
|
|
@@ -65,6 +66,7 @@ var updateAllMediaSingleNodesAttrs = exports.updateAllMediaSingleNodesAttrs = fu
|
|
|
65
66
|
return tr.step(new _steps.SetAttrsStep(pos, attrs));
|
|
66
67
|
});
|
|
67
68
|
tr.setMeta('addToHistory', false);
|
|
69
|
+
(0, _collab.tintDirtyTransaction)(tr);
|
|
68
70
|
if (dispatch) {
|
|
69
71
|
dispatch(tr);
|
|
70
72
|
}
|
|
@@ -9,17 +9,26 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
9
9
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
10
10
|
var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
|
|
11
11
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
12
|
+
var _commands = require("../../toolbar/commands");
|
|
12
13
|
var _mediaCommon = require("../../utils/media-common");
|
|
13
14
|
var _index = require("./index");
|
|
14
15
|
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; }
|
|
15
16
|
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; }
|
|
16
17
|
var createCommandWithAnalytics = function createCommandWithAnalytics(actionType, action, transform) {
|
|
17
18
|
return function (editorAnalyticsAPI) {
|
|
18
|
-
return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, function (state) {
|
|
20
|
+
var mediaNode = (0, _mediaCommon.getMediaSingleOrInlineNodeFromSelection)(state);
|
|
21
|
+
var type = (0, _commands.getNodeType)(state);
|
|
22
|
+
return {
|
|
23
|
+
action: actionType,
|
|
24
|
+
actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
|
|
25
|
+
actionSubjectId: _analytics.ACTION_SUBJECT_ID.ALT_TEXT,
|
|
26
|
+
eventType: _analytics.EVENT_TYPE.TRACK,
|
|
27
|
+
attributes: {
|
|
28
|
+
type: type,
|
|
29
|
+
mediaType: mediaNode.attrs.type
|
|
30
|
+
}
|
|
31
|
+
};
|
|
23
32
|
})((0, _index.createCommand)(action, transform));
|
|
24
33
|
};
|
|
25
34
|
};
|
|
@@ -114,13 +114,13 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
|
|
|
114
114
|
key: "componentWillUnmount",
|
|
115
115
|
value: function componentWillUnmount() {
|
|
116
116
|
this.fireAnalytics(_analytics.ACTION.CLOSED);
|
|
117
|
-
if (!this.prevValue && this.
|
|
117
|
+
if (!this.prevValue && this.state.lastValue) {
|
|
118
118
|
this.fireAnalytics(_analytics.ACTION.ADDED);
|
|
119
119
|
}
|
|
120
|
-
if (this.prevValue && !this.
|
|
120
|
+
if (this.prevValue && !this.state.lastValue) {
|
|
121
121
|
this.fireAnalytics(_analytics.ACTION.CLEARED);
|
|
122
122
|
}
|
|
123
|
-
if (this.prevValue && this.prevValue !== this.
|
|
123
|
+
if (this.prevValue && this.prevValue !== this.state.lastValue) {
|
|
124
124
|
this.fireAnalytics(_analytics.ACTION.EDITED);
|
|
125
125
|
}
|
|
126
126
|
}
|
|
@@ -202,14 +202,21 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
|
|
|
202
202
|
}, {
|
|
203
203
|
key: "fireAnalytics",
|
|
204
204
|
value: function fireAnalytics(actionType) {
|
|
205
|
-
var
|
|
205
|
+
var _this$props2 = this.props,
|
|
206
|
+
createAnalyticsEvent = _this$props2.createAnalyticsEvent,
|
|
207
|
+
nodeType = _this$props2.nodeType,
|
|
208
|
+
mediaType = _this$props2.mediaType;
|
|
206
209
|
if (createAnalyticsEvent && this.fireCustomAnalytics) {
|
|
207
210
|
this.fireCustomAnalytics({
|
|
208
211
|
payload: {
|
|
209
212
|
action: actionType,
|
|
210
213
|
actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
|
|
211
214
|
actionSubjectId: _analytics.ACTION_SUBJECT_ID.ALT_TEXT,
|
|
212
|
-
eventType: _analytics.EVENT_TYPE.TRACK
|
|
215
|
+
eventType: _analytics.EVENT_TYPE.TRACK,
|
|
216
|
+
attributes: {
|
|
217
|
+
type: nodeType,
|
|
218
|
+
mediaType: mediaType
|
|
219
|
+
}
|
|
213
220
|
}
|
|
214
221
|
});
|
|
215
222
|
}
|
|
@@ -14,6 +14,7 @@ var _commands = require("../pm-plugins/alt-text/commands");
|
|
|
14
14
|
var _messages = require("../pm-plugins/alt-text/messages");
|
|
15
15
|
var _AltTextEdit = _interopRequireWildcard(require("../pm-plugins/alt-text/ui/AltTextEdit"));
|
|
16
16
|
var _mediaCommon = require("../utils/media-common");
|
|
17
|
+
var _commands2 = require("./commands");
|
|
17
18
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
18
19
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
20
|
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; }
|
|
@@ -62,9 +63,12 @@ var altTextEditComponent = exports.altTextEditComponent = function altTextEditCo
|
|
|
62
63
|
dispatch(newTr);
|
|
63
64
|
}
|
|
64
65
|
};
|
|
66
|
+
var type = (0, _commands2.getNodeType)(state);
|
|
65
67
|
return /*#__PURE__*/_react.default.createElement(_AltTextEdit.default, {
|
|
66
68
|
view: view,
|
|
67
69
|
key: idx,
|
|
70
|
+
nodeType: type,
|
|
71
|
+
mediaType: mediaNode.attrs.type,
|
|
68
72
|
value: mediaNode.attrs.alt,
|
|
69
73
|
altTextValidator: options && options.altTextValidator,
|
|
70
74
|
onEscape: handleEsc
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.updateMediaSingleWidth = exports.toggleBorderMark = exports.setBorderMark = exports.removeInlineCard = exports.changeMediaSingleToMediaInline = exports.changeMediaInlineToMediaSingle = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = exports.DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_COLOR = void 0;
|
|
7
|
+
exports.updateMediaSingleWidth = exports.toggleBorderMark = exports.setBorderMark = exports.removeInlineCard = exports.getNodeType = exports.changeMediaSingleToMediaInline = exports.changeMediaInlineToMediaSingle = exports.changeMediaCardToInline = exports.changeInlineToMediaCard = exports.DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_COLOR = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
10
10
|
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
@@ -20,7 +20,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
20
20
|
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; }
|
|
21
21
|
var DEFAULT_BORDER_COLOR = exports.DEFAULT_BORDER_COLOR = '#091e4224';
|
|
22
22
|
var DEFAULT_BORDER_SIZE = exports.DEFAULT_BORDER_SIZE = 2;
|
|
23
|
-
var getNodeType = function getNodeType(state) {
|
|
23
|
+
var getNodeType = exports.getNodeType = function getNodeType(state) {
|
|
24
24
|
var _state$schema$nodes = state.schema.nodes,
|
|
25
25
|
mediaSingle = _state$schema$nodes.mediaSingle,
|
|
26
26
|
mediaInline = _state$schema$nodes.mediaInline;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
|
|
2
|
+
import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
|
|
2
3
|
import { stateKey as mediaPluginKey } from '../pm-plugins/plugin-key';
|
|
3
4
|
/**
|
|
4
5
|
* Note that Media Inline is inserted like a media single node into the media plugin state.
|
|
@@ -57,6 +58,7 @@ export const updateAllMediaSingleNodesAttrs = (id, attrs) => (state, dispatch) =
|
|
|
57
58
|
const tr = state.tr;
|
|
58
59
|
validMediaNodePositions.forEach(pos => tr.step(new SetAttrsStep(pos, attrs)));
|
|
59
60
|
tr.setMeta('addToHistory', false);
|
|
61
|
+
tintDirtyTransaction(tr);
|
|
60
62
|
if (dispatch) {
|
|
61
63
|
dispatch(tr);
|
|
62
64
|
}
|
|
@@ -1,15 +1,26 @@
|
|
|
1
1
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
2
2
|
import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
|
|
3
3
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
4
|
+
import { getNodeType } from '../../toolbar/commands';
|
|
4
5
|
import { getMediaSingleOrInlineNodeFromSelection, isMediaSingleOrInlineNodeSelected } from '../../utils/media-common';
|
|
5
6
|
import { createCommand } from './index';
|
|
6
7
|
const createCommandWithAnalytics = (actionType, action, transform) => {
|
|
7
|
-
return editorAnalyticsAPI =>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
return editorAnalyticsAPI => {
|
|
9
|
+
return withAnalytics(editorAnalyticsAPI, state => {
|
|
10
|
+
const mediaNode = getMediaSingleOrInlineNodeFromSelection(state);
|
|
11
|
+
const type = getNodeType(state);
|
|
12
|
+
return {
|
|
13
|
+
action: actionType,
|
|
14
|
+
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
15
|
+
actionSubjectId: ACTION_SUBJECT_ID.ALT_TEXT,
|
|
16
|
+
eventType: EVENT_TYPE.TRACK,
|
|
17
|
+
attributes: {
|
|
18
|
+
type,
|
|
19
|
+
mediaType: mediaNode.attrs.type
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
})(createCommand(action, transform));
|
|
23
|
+
};
|
|
13
24
|
};
|
|
14
25
|
|
|
15
26
|
// pass in undefined to close the alt text menu without saving
|
|
@@ -124,13 +124,13 @@ export class AltTextEditComponent extends React.Component {
|
|
|
124
124
|
}
|
|
125
125
|
componentWillUnmount() {
|
|
126
126
|
this.fireAnalytics(ACTION.CLOSED);
|
|
127
|
-
if (!this.prevValue && this.
|
|
127
|
+
if (!this.prevValue && this.state.lastValue) {
|
|
128
128
|
this.fireAnalytics(ACTION.ADDED);
|
|
129
129
|
}
|
|
130
|
-
if (this.prevValue && !this.
|
|
130
|
+
if (this.prevValue && !this.state.lastValue) {
|
|
131
131
|
this.fireAnalytics(ACTION.CLEARED);
|
|
132
132
|
}
|
|
133
|
-
if (this.prevValue && this.prevValue !== this.
|
|
133
|
+
if (this.prevValue && this.prevValue !== this.state.lastValue) {
|
|
134
134
|
this.fireAnalytics(ACTION.EDITED);
|
|
135
135
|
}
|
|
136
136
|
}
|
|
@@ -215,7 +215,9 @@ export class AltTextEditComponent extends React.Component {
|
|
|
215
215
|
}
|
|
216
216
|
fireAnalytics(actionType) {
|
|
217
217
|
const {
|
|
218
|
-
createAnalyticsEvent
|
|
218
|
+
createAnalyticsEvent,
|
|
219
|
+
nodeType,
|
|
220
|
+
mediaType
|
|
219
221
|
} = this.props;
|
|
220
222
|
if (createAnalyticsEvent && this.fireCustomAnalytics) {
|
|
221
223
|
this.fireCustomAnalytics({
|
|
@@ -223,7 +225,11 @@ export class AltTextEditComponent extends React.Component {
|
|
|
223
225
|
action: actionType,
|
|
224
226
|
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
225
227
|
actionSubjectId: ACTION_SUBJECT_ID.ALT_TEXT,
|
|
226
|
-
eventType: EVENT_TYPE.TRACK
|
|
228
|
+
eventType: EVENT_TYPE.TRACK,
|
|
229
|
+
attributes: {
|
|
230
|
+
type: nodeType,
|
|
231
|
+
mediaType
|
|
232
|
+
}
|
|
227
233
|
}
|
|
228
234
|
});
|
|
229
235
|
}
|
|
@@ -5,6 +5,7 @@ import { openMediaAltTextMenu } from '../pm-plugins/alt-text/commands';
|
|
|
5
5
|
import { messages } from '../pm-plugins/alt-text/messages';
|
|
6
6
|
import AltTextEdit, { CONTAINER_WIDTH_IN_PX } from '../pm-plugins/alt-text/ui/AltTextEdit';
|
|
7
7
|
import { getMediaSingleOrInlineNodeFromSelection } from '../utils/media-common';
|
|
8
|
+
import { getNodeType } from './commands';
|
|
8
9
|
const testId = 'alt-text-edit-button';
|
|
9
10
|
export const altTextButton = (intl, state, editorAnalyticsAPI) => {
|
|
10
11
|
const mediaNode = getMediaSingleOrInlineNodeFromSelection(state);
|
|
@@ -53,9 +54,12 @@ export const altTextEditComponent = options => {
|
|
|
53
54
|
dispatch(newTr);
|
|
54
55
|
}
|
|
55
56
|
};
|
|
57
|
+
const type = getNodeType(state);
|
|
56
58
|
return /*#__PURE__*/React.createElement(AltTextEdit, {
|
|
57
59
|
view: view,
|
|
58
60
|
key: idx,
|
|
61
|
+
nodeType: type,
|
|
62
|
+
mediaType: mediaNode.attrs.type,
|
|
59
63
|
value: mediaNode.attrs.alt,
|
|
60
64
|
altTextValidator: options && options.altTextValidator,
|
|
61
65
|
onEscape: handleEsc
|
|
@@ -10,7 +10,7 @@ import { changeFromMediaInlineToMediaSingleNode } from '../utils/media-single';
|
|
|
10
10
|
import { getSelectedMediaSingle, removeMediaGroupNode } from './utils';
|
|
11
11
|
export const DEFAULT_BORDER_COLOR = '#091e4224';
|
|
12
12
|
export const DEFAULT_BORDER_SIZE = 2;
|
|
13
|
-
const getNodeType = state => {
|
|
13
|
+
export const getNodeType = state => {
|
|
14
14
|
const {
|
|
15
15
|
mediaSingle,
|
|
16
16
|
mediaInline
|
|
@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
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; }
|
|
3
3
|
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; }
|
|
4
4
|
import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
|
|
5
|
+
import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
|
|
5
6
|
import { stateKey as mediaPluginKey } from '../pm-plugins/plugin-key';
|
|
6
7
|
/**
|
|
7
8
|
* Note that Media Inline is inserted like a media single node into the media plugin state.
|
|
@@ -58,6 +59,7 @@ export var updateAllMediaSingleNodesAttrs = function updateAllMediaSingleNodesAt
|
|
|
58
59
|
return tr.step(new SetAttrsStep(pos, attrs));
|
|
59
60
|
});
|
|
60
61
|
tr.setMeta('addToHistory', false);
|
|
62
|
+
tintDirtyTransaction(tr);
|
|
61
63
|
if (dispatch) {
|
|
62
64
|
dispatch(tr);
|
|
63
65
|
}
|
|
@@ -4,15 +4,24 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
4
4
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
5
5
|
import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
|
|
6
6
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
7
|
+
import { getNodeType } from '../../toolbar/commands';
|
|
7
8
|
import { getMediaSingleOrInlineNodeFromSelection, isMediaSingleOrInlineNodeSelected } from '../../utils/media-common';
|
|
8
9
|
import { createCommand } from './index';
|
|
9
10
|
var createCommandWithAnalytics = function createCommandWithAnalytics(actionType, action, transform) {
|
|
10
11
|
return function (editorAnalyticsAPI) {
|
|
11
|
-
return withAnalytics(editorAnalyticsAPI, {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
return withAnalytics(editorAnalyticsAPI, function (state) {
|
|
13
|
+
var mediaNode = getMediaSingleOrInlineNodeFromSelection(state);
|
|
14
|
+
var type = getNodeType(state);
|
|
15
|
+
return {
|
|
16
|
+
action: actionType,
|
|
17
|
+
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
18
|
+
actionSubjectId: ACTION_SUBJECT_ID.ALT_TEXT,
|
|
19
|
+
eventType: EVENT_TYPE.TRACK,
|
|
20
|
+
attributes: {
|
|
21
|
+
type: type,
|
|
22
|
+
mediaType: mediaNode.attrs.type
|
|
23
|
+
}
|
|
24
|
+
};
|
|
16
25
|
})(createCommand(action, transform));
|
|
17
26
|
};
|
|
18
27
|
};
|
|
@@ -108,13 +108,13 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
108
108
|
key: "componentWillUnmount",
|
|
109
109
|
value: function componentWillUnmount() {
|
|
110
110
|
this.fireAnalytics(ACTION.CLOSED);
|
|
111
|
-
if (!this.prevValue && this.
|
|
111
|
+
if (!this.prevValue && this.state.lastValue) {
|
|
112
112
|
this.fireAnalytics(ACTION.ADDED);
|
|
113
113
|
}
|
|
114
|
-
if (this.prevValue && !this.
|
|
114
|
+
if (this.prevValue && !this.state.lastValue) {
|
|
115
115
|
this.fireAnalytics(ACTION.CLEARED);
|
|
116
116
|
}
|
|
117
|
-
if (this.prevValue && this.prevValue !== this.
|
|
117
|
+
if (this.prevValue && this.prevValue !== this.state.lastValue) {
|
|
118
118
|
this.fireAnalytics(ACTION.EDITED);
|
|
119
119
|
}
|
|
120
120
|
}
|
|
@@ -196,14 +196,21 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
196
196
|
}, {
|
|
197
197
|
key: "fireAnalytics",
|
|
198
198
|
value: function fireAnalytics(actionType) {
|
|
199
|
-
var
|
|
199
|
+
var _this$props2 = this.props,
|
|
200
|
+
createAnalyticsEvent = _this$props2.createAnalyticsEvent,
|
|
201
|
+
nodeType = _this$props2.nodeType,
|
|
202
|
+
mediaType = _this$props2.mediaType;
|
|
200
203
|
if (createAnalyticsEvent && this.fireCustomAnalytics) {
|
|
201
204
|
this.fireCustomAnalytics({
|
|
202
205
|
payload: {
|
|
203
206
|
action: actionType,
|
|
204
207
|
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
205
208
|
actionSubjectId: ACTION_SUBJECT_ID.ALT_TEXT,
|
|
206
|
-
eventType: EVENT_TYPE.TRACK
|
|
209
|
+
eventType: EVENT_TYPE.TRACK,
|
|
210
|
+
attributes: {
|
|
211
|
+
type: nodeType,
|
|
212
|
+
mediaType: mediaType
|
|
213
|
+
}
|
|
207
214
|
}
|
|
208
215
|
});
|
|
209
216
|
}
|
|
@@ -8,6 +8,7 @@ import { openMediaAltTextMenu } from '../pm-plugins/alt-text/commands';
|
|
|
8
8
|
import { messages } from '../pm-plugins/alt-text/messages';
|
|
9
9
|
import AltTextEdit, { CONTAINER_WIDTH_IN_PX } from '../pm-plugins/alt-text/ui/AltTextEdit';
|
|
10
10
|
import { getMediaSingleOrInlineNodeFromSelection } from '../utils/media-common';
|
|
11
|
+
import { getNodeType } from './commands';
|
|
11
12
|
var testId = 'alt-text-edit-button';
|
|
12
13
|
export var altTextButton = function altTextButton(intl, state, editorAnalyticsAPI) {
|
|
13
14
|
var mediaNode = getMediaSingleOrInlineNodeFromSelection(state);
|
|
@@ -52,9 +53,12 @@ export var altTextEditComponent = function altTextEditComponent(options) {
|
|
|
52
53
|
dispatch(newTr);
|
|
53
54
|
}
|
|
54
55
|
};
|
|
56
|
+
var type = getNodeType(state);
|
|
55
57
|
return /*#__PURE__*/React.createElement(AltTextEdit, {
|
|
56
58
|
view: view,
|
|
57
59
|
key: idx,
|
|
60
|
+
nodeType: type,
|
|
61
|
+
mediaType: mediaNode.attrs.type,
|
|
58
62
|
value: mediaNode.attrs.alt,
|
|
59
63
|
altTextValidator: options && options.altTextValidator,
|
|
60
64
|
onEscape: handleEsc
|
|
@@ -13,7 +13,7 @@ import { changeFromMediaInlineToMediaSingleNode } from '../utils/media-single';
|
|
|
13
13
|
import { getSelectedMediaSingle, removeMediaGroupNode } from './utils';
|
|
14
14
|
export var DEFAULT_BORDER_COLOR = '#091e4224';
|
|
15
15
|
export var DEFAULT_BORDER_SIZE = 2;
|
|
16
|
-
var getNodeType = function getNodeType(state) {
|
|
16
|
+
export var getNodeType = function getNodeType(state) {
|
|
17
17
|
var _state$schema$nodes = state.schema.nodes,
|
|
18
18
|
mediaSingle = _state$schema$nodes.mediaSingle,
|
|
19
19
|
mediaInline = _state$schema$nodes.mediaInline;
|
|
@@ -7,6 +7,8 @@ export declare const CONTAINER_WIDTH_IN_PX = 420;
|
|
|
7
7
|
export declare const MAX_ALT_TEXT_LENGTH = 510;
|
|
8
8
|
type Props = {
|
|
9
9
|
view: EditorView;
|
|
10
|
+
nodeType: 'mediaSingle' | 'mediaInline';
|
|
11
|
+
mediaType: 'file' | 'image' | 'external';
|
|
10
12
|
value?: string;
|
|
11
13
|
altTextValidator?: (value: string) => string[];
|
|
12
14
|
onEscape?: () => void;
|
|
@@ -3,10 +3,12 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
|
3
3
|
import type { Command } from '@atlaskit/editor-common/types';
|
|
4
4
|
import type { ForceFocusSelector } from '@atlaskit/editor-plugin-floating-toolbar';
|
|
5
5
|
import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
|
|
6
|
+
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
6
7
|
import type { EventInput } from '../pm-plugins/types';
|
|
7
8
|
import type { PixelEntryValidation } from '../ui/PixelEntry/types';
|
|
8
9
|
export declare const DEFAULT_BORDER_COLOR = "#091e4224";
|
|
9
10
|
export declare const DEFAULT_BORDER_SIZE = 2;
|
|
11
|
+
export declare const getNodeType: (state: EditorState) => "mediaInline" | "mediaSingle";
|
|
10
12
|
export declare const changeInlineToMediaCard: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
|
|
11
13
|
export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
|
|
12
14
|
export declare const changeMediaInlineToMediaSingle: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined) => Command;
|
|
@@ -7,6 +7,8 @@ export declare const CONTAINER_WIDTH_IN_PX = 420;
|
|
|
7
7
|
export declare const MAX_ALT_TEXT_LENGTH = 510;
|
|
8
8
|
type Props = {
|
|
9
9
|
view: EditorView;
|
|
10
|
+
nodeType: 'mediaSingle' | 'mediaInline';
|
|
11
|
+
mediaType: 'file' | 'image' | 'external';
|
|
10
12
|
value?: string;
|
|
11
13
|
altTextValidator?: (value: string) => string[];
|
|
12
14
|
onEscape?: () => void;
|
|
@@ -3,10 +3,12 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
|
3
3
|
import type { Command } from '@atlaskit/editor-common/types';
|
|
4
4
|
import type { ForceFocusSelector } from '@atlaskit/editor-plugin-floating-toolbar';
|
|
5
5
|
import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
|
|
6
|
+
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
6
7
|
import type { EventInput } from '../pm-plugins/types';
|
|
7
8
|
import type { PixelEntryValidation } from '../ui/PixelEntry/types';
|
|
8
9
|
export declare const DEFAULT_BORDER_COLOR = "#091e4224";
|
|
9
10
|
export declare const DEFAULT_BORDER_SIZE = 2;
|
|
11
|
+
export declare const getNodeType: (state: EditorState) => "mediaInline" | "mediaSingle";
|
|
10
12
|
export declare const changeInlineToMediaCard: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
|
|
11
13
|
export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
|
|
12
14
|
export declare const changeMediaInlineToMediaSingle: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined) => Command;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-media",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.3",
|
|
4
4
|
"description": "Media plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"singleton": true,
|
|
14
14
|
"runReact18": false
|
|
15
15
|
},
|
|
16
|
-
"repository": "https://bitbucket.org/atlassian/atlassian-frontend",
|
|
16
|
+
"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
|
|
17
17
|
"main": "dist/cjs/index.js",
|
|
18
18
|
"module": "dist/esm/index.js",
|
|
19
19
|
"module:es2019": "dist/es2019/index.js",
|