@atlaskit/editor-plugin-media 0.4.1 → 0.4.2
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/plugin.js +19 -21
- package/dist/cjs/pm-plugins/keymap.js +1 -96
- package/dist/cjs/toolbar/commands.js +1 -1
- package/dist/cjs/toolbar/index.js +1 -1
- package/dist/es2019/plugin.js +2 -5
- package/dist/es2019/pm-plugins/keymap.js +2 -87
- package/dist/es2019/toolbar/commands.js +1 -1
- package/dist/es2019/toolbar/index.js +1 -1
- package/dist/esm/plugin.js +19 -21
- package/dist/esm/pm-plugins/keymap.js +2 -97
- package/dist/esm/toolbar/commands.js +1 -1
- package/dist/esm/toolbar/index.js +1 -1
- package/dist/types/pm-plugins/keymap.d.ts +1 -2
- package/dist/types/pm-plugins/types.d.ts +0 -1
- package/dist/types/toolbar/commands.d.ts +1 -2
- package/dist/types-ts4.5/pm-plugins/keymap.d.ts +1 -2
- package/dist/types-ts4.5/pm-plugins/types.d.ts +0 -1
- package/dist/types-ts4.5/toolbar/commands.d.ts +1 -2
- package/package.json +1 -1
- package/dist/cjs/pm-plugins/mediaResizeAnnouncerMess.js +0 -34
- package/dist/es2019/pm-plugins/mediaResizeAnnouncerMess.js +0 -28
- package/dist/esm/pm-plugins/mediaResizeAnnouncerMess.js +0 -28
- package/dist/types/pm-plugins/mediaResizeAnnouncerMess.d.ts +0 -27
- package/dist/types-ts4.5/pm-plugins/mediaResizeAnnouncerMess.d.ts +0 -27
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-media
|
|
2
2
|
|
|
3
|
+
## 0.4.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#43436](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43436) [`6bf14e25965`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6bf14e25965) - Revert "Resize media for the keyboard users"
|
|
8
|
+
|
|
3
9
|
## 0.4.1
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
package/dist/cjs/plugin.js
CHANGED
|
@@ -58,7 +58,6 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
|
|
|
58
58
|
options = _ref2$config === void 0 ? {} : _ref2$config,
|
|
59
59
|
api = _ref2.api;
|
|
60
60
|
var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
|
|
61
|
-
var apiWidth = api === null || api === void 0 ? void 0 : api.width;
|
|
62
61
|
return {
|
|
63
62
|
name: 'media',
|
|
64
63
|
getSharedState: function getSharedState(editorState) {
|
|
@@ -146,17 +145,16 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
|
|
|
146
145
|
}
|
|
147
146
|
}, {
|
|
148
147
|
name: 'mediaKeymap',
|
|
149
|
-
plugin: function plugin(
|
|
148
|
+
plugin: function plugin() {
|
|
150
149
|
var _api$analytics2;
|
|
151
|
-
|
|
152
|
-
return (0, _keymap2.default)(options, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.selection.actions, apiWidth, getIntl);
|
|
150
|
+
return (0, _keymap2.default)(options, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.selection.actions);
|
|
153
151
|
}
|
|
154
152
|
}];
|
|
155
153
|
if (options && options.allowMediaSingle) {
|
|
156
154
|
pmPlugins.push({
|
|
157
155
|
name: 'mediaSingleKeymap',
|
|
158
|
-
plugin: function plugin(
|
|
159
|
-
var schema =
|
|
156
|
+
plugin: function plugin(_ref5) {
|
|
157
|
+
var schema = _ref5.schema;
|
|
160
158
|
return (0, _keymapMediaSingle.default)(schema);
|
|
161
159
|
}
|
|
162
160
|
});
|
|
@@ -168,9 +166,9 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
|
|
|
168
166
|
});
|
|
169
167
|
pmPlugins.push({
|
|
170
168
|
name: 'mediaAltTextKeymap',
|
|
171
|
-
plugin: function plugin(
|
|
169
|
+
plugin: function plugin(_ref6) {
|
|
172
170
|
var _api$analytics3;
|
|
173
|
-
var schema =
|
|
171
|
+
var schema = _ref6.schema;
|
|
174
172
|
return (0, _keymap.default)(schema, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
|
|
175
173
|
}
|
|
176
174
|
});
|
|
@@ -178,15 +176,15 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
|
|
|
178
176
|
if (options && options.allowLinking) {
|
|
179
177
|
pmPlugins.push({
|
|
180
178
|
name: 'mediaLinking',
|
|
181
|
-
plugin: function plugin(
|
|
182
|
-
var dispatch =
|
|
179
|
+
plugin: function plugin(_ref7) {
|
|
180
|
+
var dispatch = _ref7.dispatch;
|
|
183
181
|
return (0, _linking.default)(dispatch);
|
|
184
182
|
}
|
|
185
183
|
});
|
|
186
184
|
pmPlugins.push({
|
|
187
185
|
name: 'mediaLinkingKeymap',
|
|
188
|
-
plugin: function plugin(
|
|
189
|
-
var schema =
|
|
186
|
+
plugin: function plugin(_ref8) {
|
|
187
|
+
var schema = _ref8.schema;
|
|
190
188
|
return (0, _keymap3.default)(schema);
|
|
191
189
|
}
|
|
192
190
|
});
|
|
@@ -222,19 +220,19 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
|
|
|
222
220
|
});
|
|
223
221
|
return pmPlugins;
|
|
224
222
|
},
|
|
225
|
-
contentComponent: function contentComponent(
|
|
226
|
-
var editorView =
|
|
227
|
-
appearance =
|
|
223
|
+
contentComponent: function contentComponent(_ref9) {
|
|
224
|
+
var editorView = _ref9.editorView,
|
|
225
|
+
appearance = _ref9.appearance;
|
|
228
226
|
return /*#__PURE__*/_react.default.createElement(MediaPickerFunctionalComponent, {
|
|
229
227
|
editorDomElement: editorView.dom,
|
|
230
228
|
appearance: appearance,
|
|
231
229
|
api: api
|
|
232
230
|
});
|
|
233
231
|
},
|
|
234
|
-
secondaryToolbarComponent: function secondaryToolbarComponent(
|
|
235
|
-
var editorView =
|
|
236
|
-
eventDispatcher =
|
|
237
|
-
disabled =
|
|
232
|
+
secondaryToolbarComponent: function secondaryToolbarComponent(_ref10) {
|
|
233
|
+
var editorView = _ref10.editorView,
|
|
234
|
+
eventDispatcher = _ref10.eventDispatcher,
|
|
235
|
+
disabled = _ref10.disabled;
|
|
238
236
|
return /*#__PURE__*/_react.default.createElement(_ToolbarMedia.default, {
|
|
239
237
|
isDisabled: disabled,
|
|
240
238
|
isReducedSpacing: true,
|
|
@@ -242,8 +240,8 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
|
|
|
242
240
|
});
|
|
243
241
|
},
|
|
244
242
|
pluginsOptions: {
|
|
245
|
-
quickInsert: function quickInsert(
|
|
246
|
-
var formatMessage =
|
|
243
|
+
quickInsert: function quickInsert(_ref11) {
|
|
244
|
+
var formatMessage = _ref11.formatMessage;
|
|
247
245
|
return [{
|
|
248
246
|
id: 'media',
|
|
249
247
|
title: formatMessage(_messages.toolbarInsertBlockMessages.mediaFiles),
|
|
@@ -6,17 +6,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
exports.keymapPlugin = keymapPlugin;
|
|
8
8
|
var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
9
|
-
var _mediaSingle = require("@atlaskit/editor-common/media-single");
|
|
10
9
|
var _selection = require("@atlaskit/editor-common/selection");
|
|
11
10
|
var _keymap = require("@atlaskit/editor-prosemirror/keymap");
|
|
12
11
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
13
|
-
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
14
12
|
var _captions = require("../commands/captions");
|
|
15
13
|
var _pluginKey = require("../pm-plugins/plugin-key");
|
|
16
|
-
|
|
17
|
-
var _utils = require("../toolbar/utils");
|
|
18
|
-
var _mediaResizeAnnouncerMess = require("./mediaResizeAnnouncerMess");
|
|
19
|
-
function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, widthPlugin, getIntl) {
|
|
14
|
+
function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
|
|
20
15
|
var list = {};
|
|
21
16
|
(0, _keymaps.bindKeymapWithCommand)(_keymaps.undo.common, ignoreLinksInSteps, list);
|
|
22
17
|
(0, _keymaps.bindKeymapWithCommand)(_keymaps.enter.common, splitMediaGroup, list);
|
|
@@ -27,10 +22,6 @@ function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, widthPlug
|
|
|
27
22
|
(0, _keymaps.bindKeymapWithCommand)(_keymaps.moveRight.common, arrowRightFromMediaSingle(editorSelectionAPI), list);
|
|
28
23
|
}
|
|
29
24
|
(0, _keymaps.bindKeymapWithCommand)(_keymaps.insertNewLine.common, splitMediaGroup, list);
|
|
30
|
-
(0, _keymaps.bindKeymapWithCommand)(_keymaps.increaseMediaSize.common, handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
|
|
31
|
-
(0, _keymaps.bindKeymapWithCommand)(_keymaps.decreaseMediaSize.common, handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
|
|
32
|
-
(0, _keymaps.bindKeymapWithCommand)(_keymaps.quickIncreaseMediaSize.common, handleMediaQuickIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
|
|
33
|
-
(0, _keymaps.bindKeymapWithCommand)(_keymaps.quickDecreaseMediaSize.common, handleMediaQuickDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
|
|
34
25
|
return (0, _keymap.keymap)(list);
|
|
35
26
|
}
|
|
36
27
|
var ignoreLinksInSteps = function ignoreLinksInSteps(state) {
|
|
@@ -42,92 +33,6 @@ var splitMediaGroup = function splitMediaGroup(state) {
|
|
|
42
33
|
var mediaPluginState = _pluginKey.stateKey.getState(state);
|
|
43
34
|
return mediaPluginState.splitMediaGroup();
|
|
44
35
|
};
|
|
45
|
-
var createAnnouncer = function createAnnouncer(action, mediaWidth, changeAmount, validation, getIntl) {
|
|
46
|
-
var announcerContainer = document.getElementById('media-announcer') || document.createElement('div');
|
|
47
|
-
var intl = getIntl();
|
|
48
|
-
if (!announcerContainer.id) {
|
|
49
|
-
announcerContainer.id = 'media-announcer';
|
|
50
|
-
announcerContainer.setAttribute('role', 'status');
|
|
51
|
-
announcerContainer.setAttribute('aria-live', 'polite');
|
|
52
|
-
announcerContainer.setAttribute('aria-atomic', 'true');
|
|
53
|
-
var style = announcerContainer.style;
|
|
54
|
-
style.position = 'absolute';
|
|
55
|
-
style.width = '1px';
|
|
56
|
-
style.height = '1px';
|
|
57
|
-
style.marginTop = '-1px';
|
|
58
|
-
style.opacity = '0';
|
|
59
|
-
style.overflow = 'hidden';
|
|
60
|
-
document.body.appendChild(announcerContainer);
|
|
61
|
-
} else {
|
|
62
|
-
var newMediaWidth = mediaWidth + changeAmount;
|
|
63
|
-
if (validation === 'greater-than-max') {
|
|
64
|
-
announcerContainer.textContent = intl.formatMessage(_mediaResizeAnnouncerMess.mediaResizeAnnouncerMess.MediaWidthIsMax);
|
|
65
|
-
} else if (validation === 'less-than-min') {
|
|
66
|
-
announcerContainer.textContent = intl.formatMessage(_mediaResizeAnnouncerMess.mediaResizeAnnouncerMess.MediaWidthIsMin);
|
|
67
|
-
} else {
|
|
68
|
-
announcerContainer.textContent = intl.formatMessage(_mediaResizeAnnouncerMess.mediaResizeAnnouncerMess.DefaultMediaWidth, {
|
|
69
|
-
action: action,
|
|
70
|
-
newMediaWidth: newMediaWidth
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
var handleMediaSizeChange = function handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, changeAmount, action, getIntl) {
|
|
76
|
-
return function (state, dispatch) {
|
|
77
|
-
var _selectedNode$node, _selectedNode$node2, _widthPlugin$sharedSt;
|
|
78
|
-
var selectedNode = (0, _utils.getSelectedMediaSingle)(state);
|
|
79
|
-
var layout = selectedNode === null || selectedNode === void 0 || (_selectedNode$node = selectedNode.node) === null || _selectedNode$node === void 0 || (_selectedNode$node = _selectedNode$node.attrs) === null || _selectedNode$node === void 0 ? void 0 : _selectedNode$node.layout;
|
|
80
|
-
var mediaWidth = selectedNode === null || selectedNode === void 0 || (_selectedNode$node2 = selectedNode.node) === null || _selectedNode$node2 === void 0 || (_selectedNode$node2 = _selectedNode$node2.attrs) === null || _selectedNode$node2 === void 0 ? void 0 : _selectedNode$node2.width;
|
|
81
|
-
var contentWidth =
|
|
82
|
-
// @ts-ignore readonly sharedState
|
|
83
|
-
(widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength) || _editorSharedStyles.akEditorDefaultLayoutWidth;
|
|
84
|
-
var minWidth = _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH;
|
|
85
|
-
var maxWidth;
|
|
86
|
-
var validation = 'valid';
|
|
87
|
-
var newWidth = mediaWidth + changeAmount;
|
|
88
|
-
var intl = getIntl();
|
|
89
|
-
if (options !== null && options !== void 0 && options.fullWidthEnabled) {
|
|
90
|
-
var _widthPlugin$sharedSt2;
|
|
91
|
-
// @ts-ignore readonly sharedState
|
|
92
|
-
maxWidth = widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength;
|
|
93
|
-
} else {
|
|
94
|
-
var _widthPlugin$sharedSt3;
|
|
95
|
-
maxWidth = (0, _mediaSingle.calcMediaSingleMaxWidth)( // @ts-ignore readonly sharedState
|
|
96
|
-
widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.width);
|
|
97
|
-
}
|
|
98
|
-
if (newWidth > maxWidth) {
|
|
99
|
-
newWidth = maxWidth;
|
|
100
|
-
validation = 'greater-than-max';
|
|
101
|
-
} else if (newWidth < minWidth) {
|
|
102
|
-
newWidth = minWidth;
|
|
103
|
-
validation = 'less-than-min';
|
|
104
|
-
} else {
|
|
105
|
-
newWidth;
|
|
106
|
-
validation = 'valid';
|
|
107
|
-
}
|
|
108
|
-
if (action === 'increased') {
|
|
109
|
-
action = intl.formatMessage(_mediaResizeAnnouncerMess.mediaResizeAnnouncerMess.IncreasedAction);
|
|
110
|
-
} else if (action === 'decreased') {
|
|
111
|
-
action = intl.formatMessage(_mediaResizeAnnouncerMess.mediaResizeAnnouncerMess.DecreasedAction);
|
|
112
|
-
}
|
|
113
|
-
var newLayout = (0, _utils.calcNewLayout)(newWidth, layout, contentWidth, options === null || options === void 0 ? void 0 : options.fullWidthEnabled);
|
|
114
|
-
(0, _commands.updateMediaSingleWidth)(editorAnalyticsAPI)(newWidth, validation, 'keyboard', newLayout)(state, dispatch);
|
|
115
|
-
createAnnouncer(action, mediaWidth, changeAmount, validation, getIntl);
|
|
116
|
-
return true;
|
|
117
|
-
};
|
|
118
|
-
};
|
|
119
|
-
var handleMediaIncrease = function handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl) {
|
|
120
|
-
return handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, 1, 'increased', getIntl);
|
|
121
|
-
};
|
|
122
|
-
var handleMediaDecrease = function handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl) {
|
|
123
|
-
return handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, -1, 'decreased', getIntl);
|
|
124
|
-
};
|
|
125
|
-
var handleMediaQuickIncrease = function handleMediaQuickIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl) {
|
|
126
|
-
return handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, 10, 'increased', getIntl);
|
|
127
|
-
};
|
|
128
|
-
var handleMediaQuickDecrease = function handleMediaQuickDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl) {
|
|
129
|
-
return handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, -10, 'decreased', getIntl);
|
|
130
|
-
};
|
|
131
36
|
var insertAndSelectCaption = function insertAndSelectCaption(editorAnalyticsAPI) {
|
|
132
37
|
return function (state, dispatch) {
|
|
133
38
|
var selection = state.selection,
|
|
@@ -203,7 +203,7 @@ var setBorderMark = exports.setBorderMark = function setBorderMark(editorAnalyti
|
|
|
203
203
|
};
|
|
204
204
|
};
|
|
205
205
|
var updateMediaSingleWidth = exports.updateMediaSingleWidth = function updateMediaSingleWidth(editorAnalyticsAPI) {
|
|
206
|
-
return function (width, validation,
|
|
206
|
+
return function (width, validation, layout) {
|
|
207
207
|
return function (state, dispatch) {
|
|
208
208
|
var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
|
|
209
209
|
if (!selectedMediaSingleNode) {
|
|
@@ -322,7 +322,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
322
322
|
var width = _ref2.width,
|
|
323
323
|
validation = _ref2.validation;
|
|
324
324
|
var newLayout = (0, _utils2.calcNewLayout)(width, layout, contentWidth, options.fullWidthEnabled, isNested);
|
|
325
|
-
(0, _commands.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation,
|
|
325
|
+
(0, _commands.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, newLayout)(state, dispatch);
|
|
326
326
|
},
|
|
327
327
|
onMigrate: function onMigrate() {
|
|
328
328
|
var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
|
package/dist/es2019/plugin.js
CHANGED
|
@@ -49,7 +49,6 @@ export const mediaPlugin = ({
|
|
|
49
49
|
}) => {
|
|
50
50
|
var _api$featureFlags;
|
|
51
51
|
const featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
|
|
52
|
-
const apiWidth = api === null || api === void 0 ? void 0 : api.width;
|
|
53
52
|
return {
|
|
54
53
|
name: 'media',
|
|
55
54
|
getSharedState(editorState) {
|
|
@@ -137,11 +136,9 @@ export const mediaPlugin = ({
|
|
|
137
136
|
}
|
|
138
137
|
}, {
|
|
139
138
|
name: 'mediaKeymap',
|
|
140
|
-
plugin: ({
|
|
141
|
-
getIntl
|
|
142
|
-
}) => {
|
|
139
|
+
plugin: () => {
|
|
143
140
|
var _api$analytics2;
|
|
144
|
-
return keymapPlugin(options, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.selection.actions
|
|
141
|
+
return keymapPlugin(options, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.selection.actions);
|
|
145
142
|
}
|
|
146
143
|
}];
|
|
147
144
|
if (options && options.allowMediaSingle) {
|
|
@@ -1,15 +1,10 @@
|
|
|
1
|
-
import { bindKeymapWithCommand,
|
|
2
|
-
import { calcMediaSingleMaxWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
|
|
1
|
+
import { bindKeymapWithCommand, enter, insertNewLine, moveDown, moveLeft, moveRight, tab, undo } from '@atlaskit/editor-common/keymaps';
|
|
3
2
|
import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
|
|
4
3
|
import { keymap } from '@atlaskit/editor-prosemirror/keymap';
|
|
5
4
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
6
|
-
import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
7
5
|
import { insertAndSelectCaptionFromMediaSinglePos, selectCaptionFromMediaSinglePos } from '../commands/captions';
|
|
8
6
|
import { stateKey } from '../pm-plugins/plugin-key';
|
|
9
|
-
|
|
10
|
-
import { calcNewLayout, getSelectedMediaSingle } from '../toolbar/utils';
|
|
11
|
-
import { mediaResizeAnnouncerMess } from './mediaResizeAnnouncerMess';
|
|
12
|
-
export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, widthPlugin, getIntl) {
|
|
7
|
+
export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
|
|
13
8
|
const list = {};
|
|
14
9
|
bindKeymapWithCommand(undo.common, ignoreLinksInSteps, list);
|
|
15
10
|
bindKeymapWithCommand(enter.common, splitMediaGroup, list);
|
|
@@ -20,10 +15,6 @@ export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, wi
|
|
|
20
15
|
bindKeymapWithCommand(moveRight.common, arrowRightFromMediaSingle(editorSelectionAPI), list);
|
|
21
16
|
}
|
|
22
17
|
bindKeymapWithCommand(insertNewLine.common, splitMediaGroup, list);
|
|
23
|
-
bindKeymapWithCommand(increaseMediaSize.common, handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
|
|
24
|
-
bindKeymapWithCommand(decreaseMediaSize.common, handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
|
|
25
|
-
bindKeymapWithCommand(quickIncreaseMediaSize.common, handleMediaQuickIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
|
|
26
|
-
bindKeymapWithCommand(quickDecreaseMediaSize.common, handleMediaQuickDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
|
|
27
18
|
return keymap(list);
|
|
28
19
|
}
|
|
29
20
|
const ignoreLinksInSteps = state => {
|
|
@@ -35,82 +26,6 @@ const splitMediaGroup = state => {
|
|
|
35
26
|
const mediaPluginState = stateKey.getState(state);
|
|
36
27
|
return mediaPluginState.splitMediaGroup();
|
|
37
28
|
};
|
|
38
|
-
const createAnnouncer = (action, mediaWidth, changeAmount, validation, getIntl) => {
|
|
39
|
-
let announcerContainer = document.getElementById('media-announcer') || document.createElement('div');
|
|
40
|
-
const intl = getIntl();
|
|
41
|
-
if (!announcerContainer.id) {
|
|
42
|
-
announcerContainer.id = 'media-announcer';
|
|
43
|
-
announcerContainer.setAttribute('role', 'status');
|
|
44
|
-
announcerContainer.setAttribute('aria-live', 'polite');
|
|
45
|
-
announcerContainer.setAttribute('aria-atomic', 'true');
|
|
46
|
-
const style = announcerContainer.style;
|
|
47
|
-
style.position = 'absolute';
|
|
48
|
-
style.width = '1px';
|
|
49
|
-
style.height = '1px';
|
|
50
|
-
style.marginTop = '-1px';
|
|
51
|
-
style.opacity = '0';
|
|
52
|
-
style.overflow = 'hidden';
|
|
53
|
-
document.body.appendChild(announcerContainer);
|
|
54
|
-
} else {
|
|
55
|
-
const newMediaWidth = mediaWidth + changeAmount;
|
|
56
|
-
if (validation === 'greater-than-max') {
|
|
57
|
-
announcerContainer.textContent = intl.formatMessage(mediaResizeAnnouncerMess.MediaWidthIsMax);
|
|
58
|
-
} else if (validation === 'less-than-min') {
|
|
59
|
-
announcerContainer.textContent = intl.formatMessage(mediaResizeAnnouncerMess.MediaWidthIsMin);
|
|
60
|
-
} else {
|
|
61
|
-
announcerContainer.textContent = intl.formatMessage(mediaResizeAnnouncerMess.DefaultMediaWidth, {
|
|
62
|
-
action: action,
|
|
63
|
-
newMediaWidth: newMediaWidth
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
const handleMediaSizeChange = (editorAnalyticsAPI, widthPlugin, options, changeAmount, action, getIntl) => (state, dispatch) => {
|
|
69
|
-
var _selectedNode$node, _selectedNode$node$at, _selectedNode$node2, _selectedNode$node2$a, _widthPlugin$sharedSt;
|
|
70
|
-
const selectedNode = getSelectedMediaSingle(state);
|
|
71
|
-
const layout = selectedNode === null || selectedNode === void 0 ? void 0 : (_selectedNode$node = selectedNode.node) === null || _selectedNode$node === void 0 ? void 0 : (_selectedNode$node$at = _selectedNode$node.attrs) === null || _selectedNode$node$at === void 0 ? void 0 : _selectedNode$node$at.layout;
|
|
72
|
-
const mediaWidth = selectedNode === null || selectedNode === void 0 ? void 0 : (_selectedNode$node2 = selectedNode.node) === null || _selectedNode$node2 === void 0 ? void 0 : (_selectedNode$node2$a = _selectedNode$node2.attrs) === null || _selectedNode$node2$a === void 0 ? void 0 : _selectedNode$node2$a.width;
|
|
73
|
-
const contentWidth =
|
|
74
|
-
// @ts-ignore readonly sharedState
|
|
75
|
-
(widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength) || akEditorDefaultLayoutWidth;
|
|
76
|
-
const minWidth = MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH;
|
|
77
|
-
let maxWidth;
|
|
78
|
-
let validation = 'valid';
|
|
79
|
-
let newWidth = mediaWidth + changeAmount;
|
|
80
|
-
const intl = getIntl();
|
|
81
|
-
if (options !== null && options !== void 0 && options.fullWidthEnabled) {
|
|
82
|
-
var _widthPlugin$sharedSt2;
|
|
83
|
-
// @ts-ignore readonly sharedState
|
|
84
|
-
maxWidth = widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength;
|
|
85
|
-
} else {
|
|
86
|
-
var _widthPlugin$sharedSt3;
|
|
87
|
-
maxWidth = calcMediaSingleMaxWidth( // @ts-ignore readonly sharedState
|
|
88
|
-
widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.width);
|
|
89
|
-
}
|
|
90
|
-
if (newWidth > maxWidth) {
|
|
91
|
-
newWidth = maxWidth;
|
|
92
|
-
validation = 'greater-than-max';
|
|
93
|
-
} else if (newWidth < minWidth) {
|
|
94
|
-
newWidth = minWidth;
|
|
95
|
-
validation = 'less-than-min';
|
|
96
|
-
} else {
|
|
97
|
-
newWidth;
|
|
98
|
-
validation = 'valid';
|
|
99
|
-
}
|
|
100
|
-
if (action === 'increased') {
|
|
101
|
-
action = intl.formatMessage(mediaResizeAnnouncerMess.IncreasedAction);
|
|
102
|
-
} else if (action === 'decreased') {
|
|
103
|
-
action = intl.formatMessage(mediaResizeAnnouncerMess.DecreasedAction);
|
|
104
|
-
}
|
|
105
|
-
const newLayout = calcNewLayout(newWidth, layout, contentWidth, options === null || options === void 0 ? void 0 : options.fullWidthEnabled);
|
|
106
|
-
updateMediaSingleWidth(editorAnalyticsAPI)(newWidth, validation, 'keyboard', newLayout)(state, dispatch);
|
|
107
|
-
createAnnouncer(action, mediaWidth, changeAmount, validation, getIntl);
|
|
108
|
-
return true;
|
|
109
|
-
};
|
|
110
|
-
const handleMediaIncrease = (editorAnalyticsAPI, widthPlugin, options, getIntl) => handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, 1, 'increased', getIntl);
|
|
111
|
-
const handleMediaDecrease = (editorAnalyticsAPI, widthPlugin, options, getIntl) => handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, -1, 'decreased', getIntl);
|
|
112
|
-
const handleMediaQuickIncrease = (editorAnalyticsAPI, widthPlugin, options, getIntl) => handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, 10, 'increased', getIntl);
|
|
113
|
-
const handleMediaQuickDecrease = (editorAnalyticsAPI, widthPlugin, options, getIntl) => handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, -10, 'decreased', getIntl);
|
|
114
29
|
const insertAndSelectCaption = editorAnalyticsAPI => (state, dispatch) => {
|
|
115
30
|
const {
|
|
116
31
|
selection,
|
|
@@ -181,7 +181,7 @@ export const setBorderMark = editorAnalyticsAPI => attrs => (state, dispatch) =>
|
|
|
181
181
|
}
|
|
182
182
|
return true;
|
|
183
183
|
};
|
|
184
|
-
export const updateMediaSingleWidth = editorAnalyticsAPI => (width, validation,
|
|
184
|
+
export const updateMediaSingleWidth = editorAnalyticsAPI => (width, validation, layout) => (state, dispatch) => {
|
|
185
185
|
const selectedMediaSingleNode = getSelectedMediaSingle(state);
|
|
186
186
|
if (!selectedMediaSingleNode) {
|
|
187
187
|
return false;
|
|
@@ -324,7 +324,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
324
324
|
}) => {
|
|
325
325
|
var _pluginInjectionApi$a4;
|
|
326
326
|
const newLayout = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled, isNested);
|
|
327
|
-
updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation,
|
|
327
|
+
updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, newLayout)(state, dispatch);
|
|
328
328
|
},
|
|
329
329
|
onMigrate: () => {
|
|
330
330
|
const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
|
package/dist/esm/plugin.js
CHANGED
|
@@ -47,7 +47,6 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
|
|
|
47
47
|
options = _ref2$config === void 0 ? {} : _ref2$config,
|
|
48
48
|
api = _ref2.api;
|
|
49
49
|
var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
|
|
50
|
-
var apiWidth = api === null || api === void 0 ? void 0 : api.width;
|
|
51
50
|
return {
|
|
52
51
|
name: 'media',
|
|
53
52
|
getSharedState: function getSharedState(editorState) {
|
|
@@ -135,17 +134,16 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
|
|
|
135
134
|
}
|
|
136
135
|
}, {
|
|
137
136
|
name: 'mediaKeymap',
|
|
138
|
-
plugin: function plugin(
|
|
137
|
+
plugin: function plugin() {
|
|
139
138
|
var _api$analytics2;
|
|
140
|
-
|
|
141
|
-
return keymapPlugin(options, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.selection.actions, apiWidth, getIntl);
|
|
139
|
+
return keymapPlugin(options, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.selection.actions);
|
|
142
140
|
}
|
|
143
141
|
}];
|
|
144
142
|
if (options && options.allowMediaSingle) {
|
|
145
143
|
pmPlugins.push({
|
|
146
144
|
name: 'mediaSingleKeymap',
|
|
147
|
-
plugin: function plugin(
|
|
148
|
-
var schema =
|
|
145
|
+
plugin: function plugin(_ref5) {
|
|
146
|
+
var schema = _ref5.schema;
|
|
149
147
|
return keymapMediaSinglePlugin(schema);
|
|
150
148
|
}
|
|
151
149
|
});
|
|
@@ -157,9 +155,9 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
|
|
|
157
155
|
});
|
|
158
156
|
pmPlugins.push({
|
|
159
157
|
name: 'mediaAltTextKeymap',
|
|
160
|
-
plugin: function plugin(
|
|
158
|
+
plugin: function plugin(_ref6) {
|
|
161
159
|
var _api$analytics3;
|
|
162
|
-
var schema =
|
|
160
|
+
var schema = _ref6.schema;
|
|
163
161
|
return keymapMediaAltTextPlugin(schema, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
|
|
164
162
|
}
|
|
165
163
|
});
|
|
@@ -167,15 +165,15 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
|
|
|
167
165
|
if (options && options.allowLinking) {
|
|
168
166
|
pmPlugins.push({
|
|
169
167
|
name: 'mediaLinking',
|
|
170
|
-
plugin: function plugin(
|
|
171
|
-
var dispatch =
|
|
168
|
+
plugin: function plugin(_ref7) {
|
|
169
|
+
var dispatch = _ref7.dispatch;
|
|
172
170
|
return linkingPlugin(dispatch);
|
|
173
171
|
}
|
|
174
172
|
});
|
|
175
173
|
pmPlugins.push({
|
|
176
174
|
name: 'mediaLinkingKeymap',
|
|
177
|
-
plugin: function plugin(
|
|
178
|
-
var schema =
|
|
175
|
+
plugin: function plugin(_ref8) {
|
|
176
|
+
var schema = _ref8.schema;
|
|
179
177
|
return keymapLinkingPlugin(schema);
|
|
180
178
|
}
|
|
181
179
|
});
|
|
@@ -211,19 +209,19 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
|
|
|
211
209
|
});
|
|
212
210
|
return pmPlugins;
|
|
213
211
|
},
|
|
214
|
-
contentComponent: function contentComponent(
|
|
215
|
-
var editorView =
|
|
216
|
-
appearance =
|
|
212
|
+
contentComponent: function contentComponent(_ref9) {
|
|
213
|
+
var editorView = _ref9.editorView,
|
|
214
|
+
appearance = _ref9.appearance;
|
|
217
215
|
return /*#__PURE__*/React.createElement(MediaPickerFunctionalComponent, {
|
|
218
216
|
editorDomElement: editorView.dom,
|
|
219
217
|
appearance: appearance,
|
|
220
218
|
api: api
|
|
221
219
|
});
|
|
222
220
|
},
|
|
223
|
-
secondaryToolbarComponent: function secondaryToolbarComponent(
|
|
224
|
-
var editorView =
|
|
225
|
-
eventDispatcher =
|
|
226
|
-
disabled =
|
|
221
|
+
secondaryToolbarComponent: function secondaryToolbarComponent(_ref10) {
|
|
222
|
+
var editorView = _ref10.editorView,
|
|
223
|
+
eventDispatcher = _ref10.eventDispatcher,
|
|
224
|
+
disabled = _ref10.disabled;
|
|
227
225
|
return /*#__PURE__*/React.createElement(ToolbarMedia, {
|
|
228
226
|
isDisabled: disabled,
|
|
229
227
|
isReducedSpacing: true,
|
|
@@ -231,8 +229,8 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
|
|
|
231
229
|
});
|
|
232
230
|
},
|
|
233
231
|
pluginsOptions: {
|
|
234
|
-
quickInsert: function quickInsert(
|
|
235
|
-
var formatMessage =
|
|
232
|
+
quickInsert: function quickInsert(_ref11) {
|
|
233
|
+
var formatMessage = _ref11.formatMessage;
|
|
236
234
|
return [{
|
|
237
235
|
id: 'media',
|
|
238
236
|
title: formatMessage(messages.mediaFiles),
|
|
@@ -1,15 +1,10 @@
|
|
|
1
|
-
import { bindKeymapWithCommand,
|
|
2
|
-
import { calcMediaSingleMaxWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
|
|
1
|
+
import { bindKeymapWithCommand, enter, insertNewLine, moveDown, moveLeft, moveRight, tab, undo } from '@atlaskit/editor-common/keymaps';
|
|
3
2
|
import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
|
|
4
3
|
import { keymap } from '@atlaskit/editor-prosemirror/keymap';
|
|
5
4
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
6
|
-
import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
7
5
|
import { insertAndSelectCaptionFromMediaSinglePos, selectCaptionFromMediaSinglePos } from '../commands/captions';
|
|
8
6
|
import { stateKey } from '../pm-plugins/plugin-key';
|
|
9
|
-
|
|
10
|
-
import { calcNewLayout, getSelectedMediaSingle } from '../toolbar/utils';
|
|
11
|
-
import { mediaResizeAnnouncerMess } from './mediaResizeAnnouncerMess';
|
|
12
|
-
export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, widthPlugin, getIntl) {
|
|
7
|
+
export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI) {
|
|
13
8
|
var list = {};
|
|
14
9
|
bindKeymapWithCommand(undo.common, ignoreLinksInSteps, list);
|
|
15
10
|
bindKeymapWithCommand(enter.common, splitMediaGroup, list);
|
|
@@ -20,10 +15,6 @@ export function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, wi
|
|
|
20
15
|
bindKeymapWithCommand(moveRight.common, arrowRightFromMediaSingle(editorSelectionAPI), list);
|
|
21
16
|
}
|
|
22
17
|
bindKeymapWithCommand(insertNewLine.common, splitMediaGroup, list);
|
|
23
|
-
bindKeymapWithCommand(increaseMediaSize.common, handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
|
|
24
|
-
bindKeymapWithCommand(decreaseMediaSize.common, handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
|
|
25
|
-
bindKeymapWithCommand(quickIncreaseMediaSize.common, handleMediaQuickIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
|
|
26
|
-
bindKeymapWithCommand(quickDecreaseMediaSize.common, handleMediaQuickDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl), list);
|
|
27
18
|
return keymap(list);
|
|
28
19
|
}
|
|
29
20
|
var ignoreLinksInSteps = function ignoreLinksInSteps(state) {
|
|
@@ -35,92 +26,6 @@ var splitMediaGroup = function splitMediaGroup(state) {
|
|
|
35
26
|
var mediaPluginState = stateKey.getState(state);
|
|
36
27
|
return mediaPluginState.splitMediaGroup();
|
|
37
28
|
};
|
|
38
|
-
var createAnnouncer = function createAnnouncer(action, mediaWidth, changeAmount, validation, getIntl) {
|
|
39
|
-
var announcerContainer = document.getElementById('media-announcer') || document.createElement('div');
|
|
40
|
-
var intl = getIntl();
|
|
41
|
-
if (!announcerContainer.id) {
|
|
42
|
-
announcerContainer.id = 'media-announcer';
|
|
43
|
-
announcerContainer.setAttribute('role', 'status');
|
|
44
|
-
announcerContainer.setAttribute('aria-live', 'polite');
|
|
45
|
-
announcerContainer.setAttribute('aria-atomic', 'true');
|
|
46
|
-
var style = announcerContainer.style;
|
|
47
|
-
style.position = 'absolute';
|
|
48
|
-
style.width = '1px';
|
|
49
|
-
style.height = '1px';
|
|
50
|
-
style.marginTop = '-1px';
|
|
51
|
-
style.opacity = '0';
|
|
52
|
-
style.overflow = 'hidden';
|
|
53
|
-
document.body.appendChild(announcerContainer);
|
|
54
|
-
} else {
|
|
55
|
-
var newMediaWidth = mediaWidth + changeAmount;
|
|
56
|
-
if (validation === 'greater-than-max') {
|
|
57
|
-
announcerContainer.textContent = intl.formatMessage(mediaResizeAnnouncerMess.MediaWidthIsMax);
|
|
58
|
-
} else if (validation === 'less-than-min') {
|
|
59
|
-
announcerContainer.textContent = intl.formatMessage(mediaResizeAnnouncerMess.MediaWidthIsMin);
|
|
60
|
-
} else {
|
|
61
|
-
announcerContainer.textContent = intl.formatMessage(mediaResizeAnnouncerMess.DefaultMediaWidth, {
|
|
62
|
-
action: action,
|
|
63
|
-
newMediaWidth: newMediaWidth
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
var handleMediaSizeChange = function handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, changeAmount, action, getIntl) {
|
|
69
|
-
return function (state, dispatch) {
|
|
70
|
-
var _selectedNode$node, _selectedNode$node2, _widthPlugin$sharedSt;
|
|
71
|
-
var selectedNode = getSelectedMediaSingle(state);
|
|
72
|
-
var layout = selectedNode === null || selectedNode === void 0 || (_selectedNode$node = selectedNode.node) === null || _selectedNode$node === void 0 || (_selectedNode$node = _selectedNode$node.attrs) === null || _selectedNode$node === void 0 ? void 0 : _selectedNode$node.layout;
|
|
73
|
-
var mediaWidth = selectedNode === null || selectedNode === void 0 || (_selectedNode$node2 = selectedNode.node) === null || _selectedNode$node2 === void 0 || (_selectedNode$node2 = _selectedNode$node2.attrs) === null || _selectedNode$node2 === void 0 ? void 0 : _selectedNode$node2.width;
|
|
74
|
-
var contentWidth =
|
|
75
|
-
// @ts-ignore readonly sharedState
|
|
76
|
-
(widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength) || akEditorDefaultLayoutWidth;
|
|
77
|
-
var minWidth = MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH;
|
|
78
|
-
var maxWidth;
|
|
79
|
-
var validation = 'valid';
|
|
80
|
-
var newWidth = mediaWidth + changeAmount;
|
|
81
|
-
var intl = getIntl();
|
|
82
|
-
if (options !== null && options !== void 0 && options.fullWidthEnabled) {
|
|
83
|
-
var _widthPlugin$sharedSt2;
|
|
84
|
-
// @ts-ignore readonly sharedState
|
|
85
|
-
maxWidth = widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength;
|
|
86
|
-
} else {
|
|
87
|
-
var _widthPlugin$sharedSt3;
|
|
88
|
-
maxWidth = calcMediaSingleMaxWidth( // @ts-ignore readonly sharedState
|
|
89
|
-
widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.width);
|
|
90
|
-
}
|
|
91
|
-
if (newWidth > maxWidth) {
|
|
92
|
-
newWidth = maxWidth;
|
|
93
|
-
validation = 'greater-than-max';
|
|
94
|
-
} else if (newWidth < minWidth) {
|
|
95
|
-
newWidth = minWidth;
|
|
96
|
-
validation = 'less-than-min';
|
|
97
|
-
} else {
|
|
98
|
-
newWidth;
|
|
99
|
-
validation = 'valid';
|
|
100
|
-
}
|
|
101
|
-
if (action === 'increased') {
|
|
102
|
-
action = intl.formatMessage(mediaResizeAnnouncerMess.IncreasedAction);
|
|
103
|
-
} else if (action === 'decreased') {
|
|
104
|
-
action = intl.formatMessage(mediaResizeAnnouncerMess.DecreasedAction);
|
|
105
|
-
}
|
|
106
|
-
var newLayout = calcNewLayout(newWidth, layout, contentWidth, options === null || options === void 0 ? void 0 : options.fullWidthEnabled);
|
|
107
|
-
updateMediaSingleWidth(editorAnalyticsAPI)(newWidth, validation, 'keyboard', newLayout)(state, dispatch);
|
|
108
|
-
createAnnouncer(action, mediaWidth, changeAmount, validation, getIntl);
|
|
109
|
-
return true;
|
|
110
|
-
};
|
|
111
|
-
};
|
|
112
|
-
var handleMediaIncrease = function handleMediaIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl) {
|
|
113
|
-
return handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, 1, 'increased', getIntl);
|
|
114
|
-
};
|
|
115
|
-
var handleMediaDecrease = function handleMediaDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl) {
|
|
116
|
-
return handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, -1, 'decreased', getIntl);
|
|
117
|
-
};
|
|
118
|
-
var handleMediaQuickIncrease = function handleMediaQuickIncrease(editorAnalyticsAPI, widthPlugin, options, getIntl) {
|
|
119
|
-
return handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, 10, 'increased', getIntl);
|
|
120
|
-
};
|
|
121
|
-
var handleMediaQuickDecrease = function handleMediaQuickDecrease(editorAnalyticsAPI, widthPlugin, options, getIntl) {
|
|
122
|
-
return handleMediaSizeChange(editorAnalyticsAPI, widthPlugin, options, -10, 'decreased', getIntl);
|
|
123
|
-
};
|
|
124
29
|
var insertAndSelectCaption = function insertAndSelectCaption(editorAnalyticsAPI) {
|
|
125
30
|
return function (state, dispatch) {
|
|
126
31
|
var selection = state.selection,
|
|
@@ -196,7 +196,7 @@ export var setBorderMark = function setBorderMark(editorAnalyticsAPI) {
|
|
|
196
196
|
};
|
|
197
197
|
};
|
|
198
198
|
export var updateMediaSingleWidth = function updateMediaSingleWidth(editorAnalyticsAPI) {
|
|
199
|
-
return function (width, validation,
|
|
199
|
+
return function (width, validation, layout) {
|
|
200
200
|
return function (state, dispatch) {
|
|
201
201
|
var selectedMediaSingleNode = getSelectedMediaSingle(state);
|
|
202
202
|
if (!selectedMediaSingleNode) {
|
|
@@ -312,7 +312,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
|
|
|
312
312
|
var width = _ref2.width,
|
|
313
313
|
validation = _ref2.validation;
|
|
314
314
|
var newLayout = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled, isNested);
|
|
315
|
-
updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation,
|
|
315
|
+
updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions)(width, validation, newLayout)(state, dispatch);
|
|
316
316
|
},
|
|
317
317
|
onMigrate: function onMigrate() {
|
|
318
318
|
var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
2
2
|
import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
3
|
import type { EditorSelectionAPI } from '@atlaskit/editor-plugin-selection';
|
|
4
|
-
import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
|
|
5
4
|
import type { MediaOptions } from '../types';
|
|
6
|
-
export declare function keymapPlugin(options: MediaOptions | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorSelectionAPI: EditorSelectionAPI | undefined
|
|
5
|
+
export declare function keymapPlugin(options: MediaOptions | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorSelectionAPI: EditorSelectionAPI | undefined): SafePlugin;
|
|
7
6
|
export default keymapPlugin;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import type { BorderMarkAttributes, RichMediaLayout } from '@atlaskit/adf-schema';
|
|
2
2
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
3
3
|
import type { Command } from '@atlaskit/editor-common/types';
|
|
4
|
-
import type { EventInput } from '../pm-plugins/types';
|
|
5
4
|
import type { PixelEntryValidation } from '../ui/PixelEntry/types';
|
|
6
5
|
export declare const DEFAULT_BORDER_COLOR = "#091e4224";
|
|
7
6
|
export declare const DEFAULT_BORDER_SIZE = 2;
|
|
@@ -10,4 +9,4 @@ export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyti
|
|
|
10
9
|
export declare const removeInlineCard: Command;
|
|
11
10
|
export declare const toggleBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
|
|
12
11
|
export declare const setBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (attrs: Partial<BorderMarkAttributes>) => Command;
|
|
13
|
-
export declare const updateMediaSingleWidth: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (width: number, validation: PixelEntryValidation,
|
|
12
|
+
export declare const updateMediaSingleWidth: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (width: number, validation: PixelEntryValidation, layout: RichMediaLayout) => Command;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
2
2
|
import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
3
|
import type { EditorSelectionAPI } from '@atlaskit/editor-plugin-selection';
|
|
4
|
-
import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
|
|
5
4
|
import type { MediaOptions } from '../types';
|
|
6
|
-
export declare function keymapPlugin(options: MediaOptions | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorSelectionAPI: EditorSelectionAPI | undefined
|
|
5
|
+
export declare function keymapPlugin(options: MediaOptions | undefined, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorSelectionAPI: EditorSelectionAPI | undefined): SafePlugin;
|
|
7
6
|
export default keymapPlugin;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import type { BorderMarkAttributes, RichMediaLayout } from '@atlaskit/adf-schema';
|
|
2
2
|
import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
|
|
3
3
|
import type { Command } from '@atlaskit/editor-common/types';
|
|
4
|
-
import type { EventInput } from '../pm-plugins/types';
|
|
5
4
|
import type { PixelEntryValidation } from '../ui/PixelEntry/types';
|
|
6
5
|
export declare const DEFAULT_BORDER_COLOR = "#091e4224";
|
|
7
6
|
export declare const DEFAULT_BORDER_SIZE = 2;
|
|
@@ -10,4 +9,4 @@ export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyti
|
|
|
10
9
|
export declare const removeInlineCard: Command;
|
|
11
10
|
export declare const toggleBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
|
|
12
11
|
export declare const setBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (attrs: Partial<BorderMarkAttributes>) => Command;
|
|
13
|
-
export declare const updateMediaSingleWidth: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (width: number, validation: PixelEntryValidation,
|
|
12
|
+
export declare const updateMediaSingleWidth: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (width: number, validation: PixelEntryValidation, layout: RichMediaLayout) => Command;
|
package/package.json
CHANGED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.mediaResizeAnnouncerMess = void 0;
|
|
7
|
-
var _reactIntlNext = require("react-intl-next");
|
|
8
|
-
var mediaResizeAnnouncerMess = exports.mediaResizeAnnouncerMess = (0, _reactIntlNext.defineMessages)({
|
|
9
|
-
MediaWidthIsMax: {
|
|
10
|
-
id: 'fabric.editor.media.pixelEntry.MediaWidthIsMax',
|
|
11
|
-
defaultMessage: 'Media increased to the maximum size',
|
|
12
|
-
description: 'The media has the maximum allowed width'
|
|
13
|
-
},
|
|
14
|
-
MediaWidthIsMin: {
|
|
15
|
-
id: 'fabric.editor.media.MediaWidthIsMin',
|
|
16
|
-
defaultMessage: 'Media decreased to the minimum size',
|
|
17
|
-
description: 'The media has the minimum allowed width'
|
|
18
|
-
},
|
|
19
|
-
DefaultMediaWidth: {
|
|
20
|
-
id: 'fabric.editor.media.DefaultMediaWidth',
|
|
21
|
-
defaultMessage: 'Media width {action} to {newMediaWidth} pixels.',
|
|
22
|
-
description: 'Media width {action} to {newMediaWidth} pixels.'
|
|
23
|
-
},
|
|
24
|
-
IncreasedAction: {
|
|
25
|
-
id: 'fabric.editor.media.decreased',
|
|
26
|
-
defaultMessage: 'increased',
|
|
27
|
-
description: 'Increased action'
|
|
28
|
-
},
|
|
29
|
-
DecreasedAction: {
|
|
30
|
-
id: 'fabric.editor.media.decreased',
|
|
31
|
-
defaultMessage: 'decreased',
|
|
32
|
-
description: 'Decreased action'
|
|
33
|
-
}
|
|
34
|
-
});
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { defineMessages } from 'react-intl-next';
|
|
2
|
-
export const mediaResizeAnnouncerMess = defineMessages({
|
|
3
|
-
MediaWidthIsMax: {
|
|
4
|
-
id: 'fabric.editor.media.pixelEntry.MediaWidthIsMax',
|
|
5
|
-
defaultMessage: 'Media increased to the maximum size',
|
|
6
|
-
description: 'The media has the maximum allowed width'
|
|
7
|
-
},
|
|
8
|
-
MediaWidthIsMin: {
|
|
9
|
-
id: 'fabric.editor.media.MediaWidthIsMin',
|
|
10
|
-
defaultMessage: 'Media decreased to the minimum size',
|
|
11
|
-
description: 'The media has the minimum allowed width'
|
|
12
|
-
},
|
|
13
|
-
DefaultMediaWidth: {
|
|
14
|
-
id: 'fabric.editor.media.DefaultMediaWidth',
|
|
15
|
-
defaultMessage: 'Media width {action} to {newMediaWidth} pixels.',
|
|
16
|
-
description: 'Media width {action} to {newMediaWidth} pixels.'
|
|
17
|
-
},
|
|
18
|
-
IncreasedAction: {
|
|
19
|
-
id: 'fabric.editor.media.decreased',
|
|
20
|
-
defaultMessage: 'increased',
|
|
21
|
-
description: 'Increased action'
|
|
22
|
-
},
|
|
23
|
-
DecreasedAction: {
|
|
24
|
-
id: 'fabric.editor.media.decreased',
|
|
25
|
-
defaultMessage: 'decreased',
|
|
26
|
-
description: 'Decreased action'
|
|
27
|
-
}
|
|
28
|
-
});
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { defineMessages } from 'react-intl-next';
|
|
2
|
-
export var mediaResizeAnnouncerMess = defineMessages({
|
|
3
|
-
MediaWidthIsMax: {
|
|
4
|
-
id: 'fabric.editor.media.pixelEntry.MediaWidthIsMax',
|
|
5
|
-
defaultMessage: 'Media increased to the maximum size',
|
|
6
|
-
description: 'The media has the maximum allowed width'
|
|
7
|
-
},
|
|
8
|
-
MediaWidthIsMin: {
|
|
9
|
-
id: 'fabric.editor.media.MediaWidthIsMin',
|
|
10
|
-
defaultMessage: 'Media decreased to the minimum size',
|
|
11
|
-
description: 'The media has the minimum allowed width'
|
|
12
|
-
},
|
|
13
|
-
DefaultMediaWidth: {
|
|
14
|
-
id: 'fabric.editor.media.DefaultMediaWidth',
|
|
15
|
-
defaultMessage: 'Media width {action} to {newMediaWidth} pixels.',
|
|
16
|
-
description: 'Media width {action} to {newMediaWidth} pixels.'
|
|
17
|
-
},
|
|
18
|
-
IncreasedAction: {
|
|
19
|
-
id: 'fabric.editor.media.decreased',
|
|
20
|
-
defaultMessage: 'increased',
|
|
21
|
-
description: 'Increased action'
|
|
22
|
-
},
|
|
23
|
-
DecreasedAction: {
|
|
24
|
-
id: 'fabric.editor.media.decreased',
|
|
25
|
-
defaultMessage: 'decreased',
|
|
26
|
-
description: 'Decreased action'
|
|
27
|
-
}
|
|
28
|
-
});
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
export declare const mediaResizeAnnouncerMess: {
|
|
2
|
-
MediaWidthIsMax: {
|
|
3
|
-
id: string;
|
|
4
|
-
defaultMessage: string;
|
|
5
|
-
description: string;
|
|
6
|
-
};
|
|
7
|
-
MediaWidthIsMin: {
|
|
8
|
-
id: string;
|
|
9
|
-
defaultMessage: string;
|
|
10
|
-
description: string;
|
|
11
|
-
};
|
|
12
|
-
DefaultMediaWidth: {
|
|
13
|
-
id: string;
|
|
14
|
-
defaultMessage: string;
|
|
15
|
-
description: string;
|
|
16
|
-
};
|
|
17
|
-
IncreasedAction: {
|
|
18
|
-
id: string;
|
|
19
|
-
defaultMessage: string;
|
|
20
|
-
description: string;
|
|
21
|
-
};
|
|
22
|
-
DecreasedAction: {
|
|
23
|
-
id: string;
|
|
24
|
-
defaultMessage: string;
|
|
25
|
-
description: string;
|
|
26
|
-
};
|
|
27
|
-
};
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
export declare const mediaResizeAnnouncerMess: {
|
|
2
|
-
MediaWidthIsMax: {
|
|
3
|
-
id: string;
|
|
4
|
-
defaultMessage: string;
|
|
5
|
-
description: string;
|
|
6
|
-
};
|
|
7
|
-
MediaWidthIsMin: {
|
|
8
|
-
id: string;
|
|
9
|
-
defaultMessage: string;
|
|
10
|
-
description: string;
|
|
11
|
-
};
|
|
12
|
-
DefaultMediaWidth: {
|
|
13
|
-
id: string;
|
|
14
|
-
defaultMessage: string;
|
|
15
|
-
description: string;
|
|
16
|
-
};
|
|
17
|
-
IncreasedAction: {
|
|
18
|
-
id: string;
|
|
19
|
-
defaultMessage: string;
|
|
20
|
-
description: string;
|
|
21
|
-
};
|
|
22
|
-
DecreasedAction: {
|
|
23
|
-
id: string;
|
|
24
|
-
defaultMessage: string;
|
|
25
|
-
description: string;
|
|
26
|
-
};
|
|
27
|
-
};
|