@atlaskit/editor-core 187.14.9 → 187.14.11
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 +6 -0
- package/dist/cjs/plugins/media/commands/captions.js +29 -27
- package/dist/cjs/plugins/media/commands/linking.js +21 -17
- package/dist/cjs/plugins/media/index.js +4 -3
- package/dist/cjs/plugins/media/nodeviews/mediaSingle.js +4 -2
- package/dist/cjs/plugins/media/pm-plugins/keymap.js +17 -15
- package/dist/cjs/plugins/media/pm-plugins/main.js +7 -5
- package/dist/cjs/plugins/media/toolbar/commands.js +149 -141
- package/dist/cjs/plugins/media/toolbar/index.js +20 -16
- package/dist/cjs/plugins/media/toolbar/linking.js +4 -3
- package/dist/cjs/plugins/media/utils/media-files.js +78 -75
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/plugins/media/commands/captions.js +4 -4
- package/dist/es2019/plugins/media/commands/linking.js +12 -11
- package/dist/es2019/plugins/media/index.js +6 -3
- package/dist/es2019/plugins/media/nodeviews/mediaSingle.js +4 -2
- package/dist/es2019/plugins/media/pm-plugins/keymap.js +5 -5
- package/dist/es2019/plugins/media/pm-plugins/main.js +7 -5
- package/dist/es2019/plugins/media/toolbar/commands.js +15 -15
- package/dist/es2019/plugins/media/toolbar/index.js +20 -16
- package/dist/es2019/plugins/media/toolbar/linking.js +6 -3
- package/dist/es2019/plugins/media/utils/media-files.js +5 -6
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/plugins/media/commands/captions.js +29 -27
- package/dist/esm/plugins/media/commands/linking.js +21 -17
- package/dist/esm/plugins/media/index.js +4 -3
- package/dist/esm/plugins/media/nodeviews/mediaSingle.js +4 -2
- package/dist/esm/plugins/media/pm-plugins/keymap.js +17 -15
- package/dist/esm/plugins/media/pm-plugins/main.js +7 -5
- package/dist/esm/plugins/media/toolbar/commands.js +148 -140
- package/dist/esm/plugins/media/toolbar/index.js +20 -16
- package/dist/esm/plugins/media/toolbar/linking.js +4 -3
- package/dist/esm/plugins/media/utils/media-files.js +78 -75
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/plugins/media/commands/captions.d.ts +2 -1
- package/dist/types/plugins/media/commands/linking.d.ts +3 -3
- package/dist/types/plugins/media/pm-plugins/keymap.d.ts +2 -1
- package/dist/types/plugins/media/pm-plugins/main.d.ts +1 -1
- package/dist/types/plugins/media/toolbar/commands.d.ts +5 -4
- package/dist/types/plugins/media/utils/media-files.d.ts +3 -2
- package/dist/types-ts4.5/plugins/media/commands/captions.d.ts +2 -1
- package/dist/types-ts4.5/plugins/media/commands/linking.d.ts +3 -3
- package/dist/types-ts4.5/plugins/media/pm-plugins/keymap.d.ts +2 -1
- package/dist/types-ts4.5/plugins/media/pm-plugins/main.d.ts +1 -1
- package/dist/types-ts4.5/plugins/media/toolbar/commands.d.ts +5 -4
- package/dist/types-ts4.5/plugins/media/utils/media-files.d.ts +3 -2
- package/package.json +4 -4
|
@@ -54,7 +54,7 @@ var createDropPlaceholder = function createDropPlaceholder(intl, allowDropLine)
|
|
|
54
54
|
};
|
|
55
55
|
var MEDIA_RESOLVED_STATES = ['ready', 'error', 'cancelled'];
|
|
56
56
|
export var MediaPluginStateImplementation = /*#__PURE__*/function () {
|
|
57
|
-
function MediaPluginStateImplementation(_state, options, mediaOptions, newInsertionBehaviour, _dispatch,
|
|
57
|
+
function MediaPluginStateImplementation(_state, options, mediaOptions, newInsertionBehaviour, _dispatch, _pluginInjectionApi) {
|
|
58
58
|
var _this = this;
|
|
59
59
|
_classCallCheck(this, MediaPluginStateImplementation);
|
|
60
60
|
_defineProperty(this, "allowsUploads", false);
|
|
@@ -206,7 +206,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
|
|
|
206
206
|
*
|
|
207
207
|
* called when we insert a new file via the picker (connected via pickerfacade)
|
|
208
208
|
*/
|
|
209
|
-
_defineProperty(this, "insertFile", function (mediaState, onMediaStateChanged, pickerType) {
|
|
209
|
+
_defineProperty(this, "insertFile", function (mediaState, onMediaStateChanged, pickerType, pluginInjectionApi) {
|
|
210
210
|
var _mediaState$collectio, _this$mediaOptions2;
|
|
211
211
|
var state = _this.view.state;
|
|
212
212
|
var mediaStateWithContext = _objectSpread(_objectSpread({}, mediaState), {}, {
|
|
@@ -229,9 +229,11 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
|
|
|
229
229
|
var widthPluginState = (_this$pluginInjection = _this.pluginInjectionApi) === null || _this$pluginInjection === void 0 ? void 0 : _this$pluginInjection.dependencies.width.sharedState.currentState();
|
|
230
230
|
insertMediaSingleNode(_this.view, mediaStateWithContext, _this.getInputMethod(pickerType), collection, _this.mediaOptions && _this.mediaOptions.alignLeftOnInsert, _this.newInsertionBehaviour, widthPluginState);
|
|
231
231
|
} else if (getMediaFeatureFlag('mediaInline', (_this$mediaOptions2 = _this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags) && !isInEmptyLine(state) && (!isInsidePotentialEmptyParagraph(state) || isInListItem(state)) && canInsertMediaInline(state)) {
|
|
232
|
-
|
|
232
|
+
var _pluginInjectionApi$d, _pluginInjectionApi$d2;
|
|
233
|
+
insertMediaInlineNode(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions)(_this.view, mediaStateWithContext, collection, _this.getInputMethod(pickerType));
|
|
233
234
|
} else {
|
|
234
|
-
|
|
235
|
+
var _pluginInjectionApi$d3, _pluginInjectionApi$d4;
|
|
236
|
+
insertMediaGroupNode(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d3 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : (_pluginInjectionApi$d4 = _pluginInjectionApi$d3.analytics) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions)(_this.view, [mediaStateWithContext], collection, _this.getInputMethod(pickerType));
|
|
235
237
|
}
|
|
236
238
|
|
|
237
239
|
// do events when media state changes
|
|
@@ -468,7 +470,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
|
|
|
468
470
|
this.mediaOptions = mediaOptions;
|
|
469
471
|
this.newInsertionBehaviour = newInsertionBehaviour;
|
|
470
472
|
this.dispatch = _dispatch;
|
|
471
|
-
this.pluginInjectionApi =
|
|
473
|
+
this.pluginInjectionApi = _pluginInjectionApi;
|
|
472
474
|
this.waitForMediaUpload = options.waitForMediaUpload === undefined ? true : options.waitForMediaUpload;
|
|
473
475
|
var nodes = _state.schema.nodes;
|
|
474
476
|
assert(nodes.media && (nodes.mediaGroup || nodes.mediaSingle), 'Editor: unable to init media plugin - media or mediaGroup/mediaSingle node absent in schema');
|
|
@@ -1,82 +1,86 @@
|
|
|
1
1
|
import { Fragment } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
3
3
|
import { isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
|
|
4
|
-
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID,
|
|
4
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
5
5
|
import { removeMediaGroupNode } from './utils';
|
|
6
6
|
import { currentMediaNodeWithPos } from '../utils/current-media-node';
|
|
7
7
|
export var DEFAULT_BORDER_COLOR = '#091e4224';
|
|
8
8
|
export var DEFAULT_BORDER_SIZE = 2;
|
|
9
|
-
export var changeInlineToMediaCard = function changeInlineToMediaCard(
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
var group = mediaGroup.createChecked({}, mediaNode);
|
|
28
|
-
var nodePos = state.tr.doc.resolve(state.selection.from).end();
|
|
29
|
-
var tr = state.tr;
|
|
30
|
-
tr = removeSelectedNode(tr);
|
|
31
|
-
tr = safeInsert(group, nodePos, true)(tr);
|
|
32
|
-
if (dispatch) {
|
|
33
|
-
addAnalytics(state, tr, {
|
|
34
|
-
action: ACTION.CHANGED_TYPE,
|
|
35
|
-
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
36
|
-
eventType: EVENT_TYPE.TRACK,
|
|
37
|
-
attributes: {
|
|
38
|
-
newType: ACTION_SUBJECT_ID.MEDIA_GROUP,
|
|
39
|
-
previousType: ACTION_SUBJECT_ID.MEDIA_INLINE
|
|
40
|
-
}
|
|
9
|
+
export var changeInlineToMediaCard = function changeInlineToMediaCard(editorAnalyticsAPI) {
|
|
10
|
+
return function (state, dispatch) {
|
|
11
|
+
var _state$schema$nodes = state.schema.nodes,
|
|
12
|
+
media = _state$schema$nodes.media,
|
|
13
|
+
mediaInline = _state$schema$nodes.mediaInline,
|
|
14
|
+
mediaGroup = _state$schema$nodes.mediaGroup;
|
|
15
|
+
var selectedNode = state.selection instanceof NodeSelection && state.selection.node.type === mediaInline && state.selection.node;
|
|
16
|
+
if (!selectedNode) {
|
|
17
|
+
return false;
|
|
18
|
+
}
|
|
19
|
+
var _selectedNode$attrs = selectedNode.attrs,
|
|
20
|
+
id = _selectedNode$attrs.id,
|
|
21
|
+
type = _selectedNode$attrs.type,
|
|
22
|
+
collection = _selectedNode$attrs.collection;
|
|
23
|
+
var mediaNode = media.createChecked({
|
|
24
|
+
id: id,
|
|
25
|
+
type: type,
|
|
26
|
+
collection: collection
|
|
41
27
|
});
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
28
|
+
var group = mediaGroup.createChecked({}, mediaNode);
|
|
29
|
+
var nodePos = state.tr.doc.resolve(state.selection.from).end();
|
|
30
|
+
var tr = state.tr;
|
|
31
|
+
tr = removeSelectedNode(tr);
|
|
32
|
+
tr = safeInsert(group, nodePos, true)(tr);
|
|
33
|
+
if (dispatch) {
|
|
34
|
+
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
|
|
35
|
+
action: ACTION.CHANGED_TYPE,
|
|
36
|
+
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
37
|
+
eventType: EVENT_TYPE.TRACK,
|
|
38
|
+
attributes: {
|
|
39
|
+
newType: ACTION_SUBJECT_ID.MEDIA_GROUP,
|
|
40
|
+
previousType: ACTION_SUBJECT_ID.MEDIA_INLINE
|
|
41
|
+
}
|
|
42
|
+
})(tr);
|
|
43
|
+
dispatch(tr);
|
|
44
|
+
}
|
|
45
|
+
return true;
|
|
46
|
+
};
|
|
45
47
|
};
|
|
46
|
-
export var changeMediaCardToInline = function changeMediaCardToInline(
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
export var changeMediaCardToInline = function changeMediaCardToInline(editorAnalyticsAPI) {
|
|
49
|
+
return function (state, dispatch) {
|
|
50
|
+
var _state$schema$nodes2 = state.schema.nodes,
|
|
51
|
+
media = _state$schema$nodes2.media,
|
|
52
|
+
mediaInline = _state$schema$nodes2.mediaInline,
|
|
53
|
+
paragraph = _state$schema$nodes2.paragraph;
|
|
54
|
+
var selectedNode = state.selection instanceof NodeSelection && state.selection.node;
|
|
52
55
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
});
|
|
61
|
-
var space = state.schema.text(' ');
|
|
62
|
-
var content = Fragment.from([mediaInlineNode, space]);
|
|
63
|
-
var node = paragraph.createChecked({}, content);
|
|
64
|
-
var nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
|
|
65
|
-
var tr = removeMediaGroupNode(state);
|
|
66
|
-
tr = safeInsert(node, nodePos, true)(tr);
|
|
67
|
-
if (dispatch) {
|
|
68
|
-
addAnalytics(state, tr, {
|
|
69
|
-
action: ACTION.CHANGED_TYPE,
|
|
70
|
-
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
71
|
-
eventType: EVENT_TYPE.TRACK,
|
|
72
|
-
attributes: {
|
|
73
|
-
newType: ACTION_SUBJECT_ID.MEDIA_INLINE,
|
|
74
|
-
previousType: ACTION_SUBJECT_ID.MEDIA_GROUP
|
|
75
|
-
}
|
|
56
|
+
// @ts-ignore - [unblock prosemirror bump] redundant check comparing boolean to media
|
|
57
|
+
if (!selectedNode || !selectedNode.type === media) {
|
|
58
|
+
return false;
|
|
59
|
+
}
|
|
60
|
+
var mediaInlineNode = mediaInline.create({
|
|
61
|
+
id: selectedNode.attrs.id,
|
|
62
|
+
collection: selectedNode.attrs.collection
|
|
76
63
|
});
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
64
|
+
var space = state.schema.text(' ');
|
|
65
|
+
var content = Fragment.from([mediaInlineNode, space]);
|
|
66
|
+
var node = paragraph.createChecked({}, content);
|
|
67
|
+
var nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
|
|
68
|
+
var tr = removeMediaGroupNode(state);
|
|
69
|
+
tr = safeInsert(node, nodePos, true)(tr);
|
|
70
|
+
if (dispatch) {
|
|
71
|
+
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
|
|
72
|
+
action: ACTION.CHANGED_TYPE,
|
|
73
|
+
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
74
|
+
eventType: EVENT_TYPE.TRACK,
|
|
75
|
+
attributes: {
|
|
76
|
+
newType: ACTION_SUBJECT_ID.MEDIA_INLINE,
|
|
77
|
+
previousType: ACTION_SUBJECT_ID.MEDIA_GROUP
|
|
78
|
+
}
|
|
79
|
+
})(tr);
|
|
80
|
+
dispatch(tr);
|
|
81
|
+
}
|
|
82
|
+
return true;
|
|
83
|
+
};
|
|
80
84
|
};
|
|
81
85
|
export var removeInlineCard = function removeInlineCard(state, dispatch) {
|
|
82
86
|
if (isNodeSelection(state.selection)) {
|
|
@@ -87,76 +91,22 @@ export var removeInlineCard = function removeInlineCard(state, dispatch) {
|
|
|
87
91
|
}
|
|
88
92
|
return false;
|
|
89
93
|
};
|
|
90
|
-
export var toggleBorderMark = function toggleBorderMark(
|
|
91
|
-
var nodeWithPos = currentMediaNodeWithPos(state);
|
|
92
|
-
if (!nodeWithPos) {
|
|
93
|
-
return false;
|
|
94
|
-
}
|
|
95
|
-
var node = nodeWithPos.node,
|
|
96
|
-
pos = nodeWithPos.pos;
|
|
97
|
-
var borderMark = node.marks.find(function (m) {
|
|
98
|
-
return m.type.name === 'border';
|
|
99
|
-
});
|
|
100
|
-
var marks = node.marks.filter(function (m) {
|
|
101
|
-
return m.type.name !== 'border';
|
|
102
|
-
}).concat(borderMark ? [] : state.schema.marks.border.create({
|
|
103
|
-
color: DEFAULT_BORDER_COLOR,
|
|
104
|
-
size: DEFAULT_BORDER_SIZE
|
|
105
|
-
}));
|
|
106
|
-
var tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, marks);
|
|
107
|
-
tr.setMeta('scrollIntoView', false);
|
|
108
|
-
if (state.selection instanceof NodeSelection) {
|
|
109
|
-
if (state.selection.$anchor.pos === state.selection.from) {
|
|
110
|
-
tr.setSelection(NodeSelection.create(tr.doc, state.selection.from));
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
if (dispatch) {
|
|
114
|
-
if (borderMark !== null && borderMark !== void 0 && borderMark.attrs) {
|
|
115
|
-
addAnalytics(state, tr, {
|
|
116
|
-
action: ACTION.DELETED,
|
|
117
|
-
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
118
|
-
actionSubjectId: ACTION_SUBJECT_ID.BORDER,
|
|
119
|
-
eventType: EVENT_TYPE.TRACK,
|
|
120
|
-
attributes: {
|
|
121
|
-
previousColor: borderMark.attrs.color,
|
|
122
|
-
previousSize: borderMark.attrs.size
|
|
123
|
-
}
|
|
124
|
-
});
|
|
125
|
-
} else {
|
|
126
|
-
addAnalytics(state, tr, {
|
|
127
|
-
action: ACTION.ADDED,
|
|
128
|
-
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
129
|
-
actionSubjectId: ACTION_SUBJECT_ID.BORDER,
|
|
130
|
-
eventType: EVENT_TYPE.TRACK,
|
|
131
|
-
attributes: {
|
|
132
|
-
color: DEFAULT_BORDER_COLOR,
|
|
133
|
-
size: DEFAULT_BORDER_SIZE
|
|
134
|
-
}
|
|
135
|
-
});
|
|
136
|
-
}
|
|
137
|
-
dispatch(tr);
|
|
138
|
-
}
|
|
139
|
-
return true;
|
|
140
|
-
};
|
|
141
|
-
export var setBorderMark = function setBorderMark(attrs) {
|
|
94
|
+
export var toggleBorderMark = function toggleBorderMark(editorAnalyticsAPI) {
|
|
142
95
|
return function (state, dispatch) {
|
|
143
|
-
var _node$marks$find, _ref, _attrs$color, _ref2, _attrs$size;
|
|
144
96
|
var nodeWithPos = currentMediaNodeWithPos(state);
|
|
145
97
|
if (!nodeWithPos) {
|
|
146
98
|
return false;
|
|
147
99
|
}
|
|
148
100
|
var node = nodeWithPos.node,
|
|
149
101
|
pos = nodeWithPos.pos;
|
|
150
|
-
var borderMark =
|
|
102
|
+
var borderMark = node.marks.find(function (m) {
|
|
151
103
|
return m.type.name === 'border';
|
|
152
|
-
})
|
|
153
|
-
var color = (_ref = (_attrs$color = attrs.color) !== null && _attrs$color !== void 0 ? _attrs$color : borderMark === null || borderMark === void 0 ? void 0 : borderMark.color) !== null && _ref !== void 0 ? _ref : DEFAULT_BORDER_COLOR;
|
|
154
|
-
var size = (_ref2 = (_attrs$size = attrs.size) !== null && _attrs$size !== void 0 ? _attrs$size : borderMark === null || borderMark === void 0 ? void 0 : borderMark.size) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_BORDER_SIZE;
|
|
104
|
+
});
|
|
155
105
|
var marks = node.marks.filter(function (m) {
|
|
156
106
|
return m.type.name !== 'border';
|
|
157
|
-
}).concat(state.schema.marks.border.create({
|
|
158
|
-
color:
|
|
159
|
-
size:
|
|
107
|
+
}).concat(borderMark ? [] : state.schema.marks.border.create({
|
|
108
|
+
color: DEFAULT_BORDER_COLOR,
|
|
109
|
+
size: DEFAULT_BORDER_SIZE
|
|
160
110
|
}));
|
|
161
111
|
var tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, marks);
|
|
162
112
|
tr.setMeta('scrollIntoView', false);
|
|
@@ -166,20 +116,78 @@ export var setBorderMark = function setBorderMark(attrs) {
|
|
|
166
116
|
}
|
|
167
117
|
}
|
|
168
118
|
if (dispatch) {
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
}
|
|
180
|
-
}
|
|
119
|
+
if (borderMark !== null && borderMark !== void 0 && borderMark.attrs) {
|
|
120
|
+
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
|
|
121
|
+
action: ACTION.DELETED,
|
|
122
|
+
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
123
|
+
actionSubjectId: ACTION_SUBJECT_ID.BORDER,
|
|
124
|
+
eventType: EVENT_TYPE.TRACK,
|
|
125
|
+
attributes: {
|
|
126
|
+
previousColor: borderMark.attrs.color,
|
|
127
|
+
previousSize: borderMark.attrs.size
|
|
128
|
+
}
|
|
129
|
+
})(tr);
|
|
130
|
+
} else {
|
|
131
|
+
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
|
|
132
|
+
action: ACTION.ADDED,
|
|
133
|
+
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
134
|
+
actionSubjectId: ACTION_SUBJECT_ID.BORDER,
|
|
135
|
+
eventType: EVENT_TYPE.TRACK,
|
|
136
|
+
attributes: {
|
|
137
|
+
color: DEFAULT_BORDER_COLOR,
|
|
138
|
+
size: DEFAULT_BORDER_SIZE
|
|
139
|
+
}
|
|
140
|
+
})(tr);
|
|
141
|
+
}
|
|
181
142
|
dispatch(tr);
|
|
182
143
|
}
|
|
183
144
|
return true;
|
|
184
145
|
};
|
|
146
|
+
};
|
|
147
|
+
export var setBorderMark = function setBorderMark(editorAnalyticsAPI) {
|
|
148
|
+
return function (attrs) {
|
|
149
|
+
return function (state, dispatch) {
|
|
150
|
+
var _node$marks$find, _ref, _attrs$color, _ref2, _attrs$size;
|
|
151
|
+
var nodeWithPos = currentMediaNodeWithPos(state);
|
|
152
|
+
if (!nodeWithPos) {
|
|
153
|
+
return false;
|
|
154
|
+
}
|
|
155
|
+
var node = nodeWithPos.node,
|
|
156
|
+
pos = nodeWithPos.pos;
|
|
157
|
+
var borderMark = (_node$marks$find = node.marks.find(function (m) {
|
|
158
|
+
return m.type.name === 'border';
|
|
159
|
+
})) === null || _node$marks$find === void 0 ? void 0 : _node$marks$find.attrs;
|
|
160
|
+
var color = (_ref = (_attrs$color = attrs.color) !== null && _attrs$color !== void 0 ? _attrs$color : borderMark === null || borderMark === void 0 ? void 0 : borderMark.color) !== null && _ref !== void 0 ? _ref : DEFAULT_BORDER_COLOR;
|
|
161
|
+
var size = (_ref2 = (_attrs$size = attrs.size) !== null && _attrs$size !== void 0 ? _attrs$size : borderMark === null || borderMark === void 0 ? void 0 : borderMark.size) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_BORDER_SIZE;
|
|
162
|
+
var marks = node.marks.filter(function (m) {
|
|
163
|
+
return m.type.name !== 'border';
|
|
164
|
+
}).concat(state.schema.marks.border.create({
|
|
165
|
+
color: color,
|
|
166
|
+
size: size
|
|
167
|
+
}));
|
|
168
|
+
var tr = state.tr.setNodeMarkup(pos, node.type, node.attrs, marks);
|
|
169
|
+
tr.setMeta('scrollIntoView', false);
|
|
170
|
+
if (state.selection instanceof NodeSelection) {
|
|
171
|
+
if (state.selection.$anchor.pos === state.selection.from) {
|
|
172
|
+
tr.setSelection(NodeSelection.create(tr.doc, state.selection.from));
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
if (dispatch) {
|
|
176
|
+
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
|
|
177
|
+
action: ACTION.UPDATED,
|
|
178
|
+
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
179
|
+
actionSubjectId: ACTION_SUBJECT_ID.BORDER,
|
|
180
|
+
eventType: EVENT_TYPE.TRACK,
|
|
181
|
+
attributes: {
|
|
182
|
+
previousColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.color,
|
|
183
|
+
previousSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.size,
|
|
184
|
+
newColor: color,
|
|
185
|
+
newSize: size
|
|
186
|
+
}
|
|
187
|
+
})(tr);
|
|
188
|
+
dispatch(tr);
|
|
189
|
+
}
|
|
190
|
+
return true;
|
|
191
|
+
};
|
|
192
|
+
};
|
|
185
193
|
};
|
|
@@ -41,7 +41,7 @@ var handleRemoveMediaGroup = function handleRemoveMediaGroup(state, dispatch) {
|
|
|
41
41
|
}
|
|
42
42
|
return true;
|
|
43
43
|
};
|
|
44
|
-
var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration) {
|
|
44
|
+
var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
|
|
45
45
|
var mediaGroup = state.schema.nodes.mediaGroup;
|
|
46
46
|
var items = [{
|
|
47
47
|
id: 'editor.media.view.switcher',
|
|
@@ -52,7 +52,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
|
|
|
52
52
|
title: intl.formatMessage(cardMessages.inline),
|
|
53
53
|
selected: false,
|
|
54
54
|
disabled: false,
|
|
55
|
-
onClick: changeMediaCardToInline,
|
|
55
|
+
onClick: changeMediaCardToInline(editorAnalyticsAPI),
|
|
56
56
|
testId: 'inline-appearance'
|
|
57
57
|
}, {
|
|
58
58
|
id: 'editor.media.view.switcher.thumbnail',
|
|
@@ -114,7 +114,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
|
|
|
114
114
|
}];
|
|
115
115
|
return items;
|
|
116
116
|
};
|
|
117
|
-
var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration) {
|
|
117
|
+
var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI) {
|
|
118
118
|
var mediaInline = state.schema.nodes.mediaInline;
|
|
119
119
|
var items = [{
|
|
120
120
|
id: 'editor.media.view.switcher',
|
|
@@ -134,7 +134,7 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
|
|
|
134
134
|
title: intl.formatMessage(messages.displayThumbnail),
|
|
135
135
|
selected: false,
|
|
136
136
|
disabled: false,
|
|
137
|
-
onClick: changeInlineToMediaCard,
|
|
137
|
+
onClick: changeInlineToMediaCard(editorAnalyticsAPI),
|
|
138
138
|
testId: 'thumbnail-appearance'
|
|
139
139
|
}]
|
|
140
140
|
}, {
|
|
@@ -188,7 +188,7 @@ var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToo
|
|
|
188
188
|
return items;
|
|
189
189
|
};
|
|
190
190
|
var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi, getEditorFeatureFlags) {
|
|
191
|
-
var _pluginInjectionApi$
|
|
191
|
+
var _pluginInjectionApi$d7;
|
|
192
192
|
var mediaSingle = state.schema.nodes.mediaSingle;
|
|
193
193
|
var allowResizing = options.allowResizing,
|
|
194
194
|
allowLinking = options.allowLinking,
|
|
@@ -209,10 +209,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
209
209
|
var borderMark = currentMediaNodeBorderMark(state);
|
|
210
210
|
return /*#__PURE__*/React.createElement(ImageBorderItem, {
|
|
211
211
|
toggleBorder: function toggleBorder() {
|
|
212
|
-
|
|
212
|
+
var _pluginInjectionApi$d, _pluginInjectionApi$d2;
|
|
213
|
+
toggleBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions)(state, dispatch);
|
|
213
214
|
},
|
|
214
215
|
setBorder: function setBorder(attrs) {
|
|
215
|
-
|
|
216
|
+
var _pluginInjectionApi$d3, _pluginInjectionApi$d4;
|
|
217
|
+
setBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d3 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : (_pluginInjectionApi$d4 = _pluginInjectionApi$d3.analytics) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions)(attrs)(state, dispatch);
|
|
216
218
|
},
|
|
217
219
|
showSomewhatSemanticTooltips: getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags().useSomewhatSemanticTextColorNames,
|
|
218
220
|
borderMark: borderMark,
|
|
@@ -225,7 +227,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
225
227
|
});
|
|
226
228
|
}
|
|
227
229
|
if (allowAdvancedToolBarOptions) {
|
|
228
|
-
var _pluginInjectionApi$
|
|
230
|
+
var _pluginInjectionApi$d5;
|
|
229
231
|
var widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.width;
|
|
230
232
|
var isChangingLayoutDisabled = false;
|
|
231
233
|
if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
|
|
@@ -239,7 +241,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
239
241
|
}
|
|
240
242
|
}
|
|
241
243
|
}
|
|
242
|
-
var layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
244
|
+
var layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d5 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : _pluginInjectionApi$d5.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
|
|
243
245
|
toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), _toConsumableArray(layoutButtons));
|
|
244
246
|
if (layoutButtons.length) {
|
|
245
247
|
toolbarButtons.push({
|
|
@@ -261,10 +263,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
261
263
|
};
|
|
262
264
|
var openLink = function openLink() {
|
|
263
265
|
if (editorView) {
|
|
264
|
-
var _pluginInjectionApi$
|
|
266
|
+
var _pluginInjectionApi$d6;
|
|
265
267
|
var tr = editorView.state.tr,
|
|
266
268
|
dispatch = editorView.dispatch;
|
|
267
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
269
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d6 = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d6 === void 0 ? void 0 : _pluginInjectionApi$d6.actions.attachAnalyticsEvent({
|
|
268
270
|
eventType: EVENT_TYPE.TRACK,
|
|
269
271
|
action: ACTION.VISITED,
|
|
270
272
|
actionSubject: ACTION_SUBJECT.MEDIA,
|
|
@@ -294,7 +296,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
294
296
|
type: 'separator'
|
|
295
297
|
});
|
|
296
298
|
}
|
|
297
|
-
var _ref = (_pluginInjectionApi$
|
|
299
|
+
var _ref = (_pluginInjectionApi$d7 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d7 !== void 0 ? _pluginInjectionApi$d7 : {},
|
|
298
300
|
hoverDecoration = _ref.hoverDecoration;
|
|
299
301
|
var removeButton = {
|
|
300
302
|
id: 'editor.media.delete',
|
|
@@ -323,7 +325,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
323
325
|
return items;
|
|
324
326
|
};
|
|
325
327
|
export var floatingToolbar = function floatingToolbar(state, intl) {
|
|
326
|
-
var _pluginInjectionApi$
|
|
328
|
+
var _pluginInjectionApi$d8;
|
|
327
329
|
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
328
330
|
var pluginInjectionApi = arguments.length > 3 ? arguments[3] : undefined;
|
|
329
331
|
var _state$schema$nodes = state.schema.nodes,
|
|
@@ -339,7 +341,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
|
|
|
339
341
|
getEditorFeatureFlags = options.getEditorFeatureFlags;
|
|
340
342
|
var mediaPluginState = stateKey.getState(state);
|
|
341
343
|
var mediaLinkingState = getMediaLinkingState(state);
|
|
342
|
-
var _ref2 = (_pluginInjectionApi$
|
|
344
|
+
var _ref2 = (_pluginInjectionApi$d8 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d8 !== void 0 ? _pluginInjectionApi$d8 : {},
|
|
343
345
|
hoverDecoration = _ref2.hoverDecoration;
|
|
344
346
|
if (!mediaPluginState || mediaPluginState.isResizing) {
|
|
345
347
|
return;
|
|
@@ -373,20 +375,22 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
|
|
|
373
375
|
selectedNodeType = state.selection.node.type;
|
|
374
376
|
}
|
|
375
377
|
if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
|
|
378
|
+
var _pluginInjectionApi$d9, _pluginInjectionApi$d10;
|
|
376
379
|
var mediaOffset = state.selection.$from.parentOffset + 1;
|
|
377
380
|
baseToolbar.getDomRef = function () {
|
|
378
381
|
var _mediaPluginState$ele;
|
|
379
382
|
var selector = mediaFilmstripItemDOMSelector(mediaOffset);
|
|
380
383
|
return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
|
|
381
384
|
};
|
|
382
|
-
items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration);
|
|
385
|
+
items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d9 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d9 === void 0 ? void 0 : (_pluginInjectionApi$d10 = _pluginInjectionApi$d9.analytics) === null || _pluginInjectionApi$d10 === void 0 ? void 0 : _pluginInjectionApi$d10.actions);
|
|
383
386
|
} else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
|
|
387
|
+
var _pluginInjectionApi$d11, _pluginInjectionApi$d12;
|
|
384
388
|
baseToolbar.getDomRef = function () {
|
|
385
389
|
var _mediaPluginState$ele2;
|
|
386
390
|
var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(MediaInlineNodeSelector));
|
|
387
391
|
return element || mediaPluginState.element;
|
|
388
392
|
};
|
|
389
|
-
items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration);
|
|
393
|
+
items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d11 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d11 === void 0 ? void 0 : (_pluginInjectionApi$d12 = _pluginInjectionApi$d11.analytics) === null || _pluginInjectionApi$d12 === void 0 ? void 0 : _pluginInjectionApi$d12.actions);
|
|
390
394
|
} else {
|
|
391
395
|
baseToolbar.getDomRef = function () {
|
|
392
396
|
var _mediaPluginState$ele3;
|
|
@@ -50,7 +50,8 @@ export var getLinkingToolbar = function getLinkingToolbar(toolbarBaseConfig, med
|
|
|
50
50
|
intl: intl,
|
|
51
51
|
editing: editing,
|
|
52
52
|
onUnlink: function onUnlink() {
|
|
53
|
-
|
|
53
|
+
var _pluginInjectionApi$d, _pluginInjectionApi$d2;
|
|
54
|
+
return unlink(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions)(view.state, view.dispatch, view);
|
|
54
55
|
},
|
|
55
56
|
onBack: function onBack(href, meta) {
|
|
56
57
|
if (href.trim() && meta.inputMethod) {
|
|
@@ -59,14 +60,14 @@ export var getLinkingToolbar = function getLinkingToolbar(toolbarBaseConfig, med
|
|
|
59
60
|
hideLinkingToolbar(view.state, view.dispatch, view);
|
|
60
61
|
},
|
|
61
62
|
onCancel: function onCancel() {
|
|
62
|
-
var _pluginInjectionApi$
|
|
63
|
+
var _pluginInjectionApi$d3;
|
|
63
64
|
hideLinkingToolbar(view.state, view.dispatch, view, true);
|
|
64
65
|
/** Focus should move to the 'Add link' button when the toolbar closes
|
|
65
66
|
* and not close the floating toolbar.
|
|
66
67
|
*/
|
|
67
68
|
var tr = view.state.tr,
|
|
68
69
|
dispatch = view.dispatch;
|
|
69
|
-
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$
|
|
70
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d3 = pluginInjectionApi.dependencies.floatingToolbar.actions) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.forceFocusSelector(FORCE_FOCUS_SELECTOR)(tr);
|
|
70
71
|
dispatch(tr);
|
|
71
72
|
},
|
|
72
73
|
onSubmit: function onSubmit(href, meta) {
|