@atlaskit/editor-plugin-media 10.0.11 → 10.1.1
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 +18 -0
- package/dist/cjs/mediaPlugin.js +6 -3
- package/dist/cjs/nodeviews/mediaGroup.js +6 -2
- package/dist/cjs/nodeviews/mediaGroupNext.js +1 -0
- package/dist/cjs/nodeviews/mediaInline.js +10 -4
- package/dist/cjs/nodeviews/mediaNodeView/index.js +3 -1
- package/dist/cjs/nodeviews/mediaNodeView/media.js +3 -1
- package/dist/cjs/nodeviews/mediaSingle.js +6 -2
- package/dist/cjs/pm-plugins/pixel-resizing/ui/index.js +12 -4
- package/dist/cjs/pm-plugins/pixel-resizing/ui/pixel-entry.js +79 -73
- package/dist/cjs/ui/CommentBadge/index.js +6 -2
- package/dist/cjs/ui/ImageBorder/index.js +40 -13
- package/dist/cjs/ui/MediaLinkingToolbar.js +18 -6
- package/dist/cjs/ui/MediaPicker/DropzoneWrapper.js +6 -2
- package/dist/cjs/ui/MediaPicker/PickerFacadeProvider.js +1 -0
- package/dist/cjs/ui/MediaViewer/MediaViewerContainer.js +3 -1
- package/dist/cjs/ui/MediaViewer/PortalWrapper.js +4 -2
- package/dist/cjs/ui/ResizableMediaSingle/index.js +1 -0
- package/dist/cjs/ui/toolbar/index.js +6 -2
- package/dist/cjs/ui/toolbar/layout-group.js +3 -1
- package/dist/cjs/ui/toolbar/linking.js +15 -5
- package/dist/cjs/ui/toolbar/mediaInline.js +6 -2
- package/dist/es2019/mediaPlugin.js +6 -3
- package/dist/es2019/nodeviews/mediaGroup.js +6 -2
- package/dist/es2019/nodeviews/mediaGroupNext.js +1 -0
- package/dist/es2019/nodeviews/mediaInline.js +11 -4
- package/dist/es2019/nodeviews/mediaNodeView/index.js +3 -1
- package/dist/es2019/nodeviews/mediaNodeView/media.js +3 -1
- package/dist/es2019/nodeviews/mediaSingle.js +6 -2
- package/dist/es2019/pm-plugins/pixel-resizing/ui/index.js +12 -4
- package/dist/es2019/pm-plugins/pixel-resizing/ui/pixel-entry.js +77 -71
- package/dist/es2019/ui/CommentBadge/index.js +6 -2
- package/dist/es2019/ui/ImageBorder/index.js +40 -13
- package/dist/es2019/ui/MediaLinkingToolbar.js +18 -6
- package/dist/es2019/ui/MediaPicker/DropzoneWrapper.js +6 -2
- package/dist/es2019/ui/MediaPicker/PickerFacadeProvider.js +1 -0
- package/dist/es2019/ui/MediaViewer/MediaViewerContainer.js +3 -1
- package/dist/es2019/ui/MediaViewer/PortalWrapper.js +4 -2
- package/dist/es2019/ui/ResizableMediaSingle/index.js +1 -0
- package/dist/es2019/ui/toolbar/index.js +6 -2
- package/dist/es2019/ui/toolbar/layout-group.js +3 -1
- package/dist/es2019/ui/toolbar/linking.js +15 -5
- package/dist/es2019/ui/toolbar/mediaInline.js +6 -2
- package/dist/esm/mediaPlugin.js +6 -3
- package/dist/esm/nodeviews/mediaGroup.js +6 -2
- package/dist/esm/nodeviews/mediaGroupNext.js +1 -0
- package/dist/esm/nodeviews/mediaInline.js +10 -4
- package/dist/esm/nodeviews/mediaNodeView/index.js +3 -1
- package/dist/esm/nodeviews/mediaNodeView/media.js +3 -1
- package/dist/esm/nodeviews/mediaSingle.js +6 -2
- package/dist/esm/pm-plugins/pixel-resizing/ui/index.js +12 -4
- package/dist/esm/pm-plugins/pixel-resizing/ui/pixel-entry.js +79 -73
- package/dist/esm/ui/CommentBadge/index.js +6 -2
- package/dist/esm/ui/ImageBorder/index.js +40 -13
- package/dist/esm/ui/MediaLinkingToolbar.js +18 -6
- package/dist/esm/ui/MediaPicker/DropzoneWrapper.js +6 -2
- package/dist/esm/ui/MediaPicker/PickerFacadeProvider.js +1 -0
- package/dist/esm/ui/MediaViewer/MediaViewerContainer.js +3 -1
- package/dist/esm/ui/MediaViewer/PortalWrapper.js +4 -2
- package/dist/esm/ui/ResizableMediaSingle/index.js +1 -0
- package/dist/esm/ui/toolbar/index.js +6 -2
- package/dist/esm/ui/toolbar/layout-group.js +3 -1
- package/dist/esm/ui/toolbar/linking.js +15 -5
- package/dist/esm/ui/toolbar/mediaInline.js +6 -2
- package/dist/types/types/index.d.ts +3 -0
- package/dist/types/ui/MediaViewer/MediaViewerContainer.d.ts +3 -1
- package/dist/types/ui/MediaViewer/PortalWrapper.d.ts +3 -1
- package/dist/types-ts4.5/types/index.d.ts +3 -0
- package/dist/types-ts4.5/ui/MediaViewer/MediaViewerContainer.d.ts +3 -1
- package/dist/types-ts4.5/ui/MediaViewer/PortalWrapper.d.ts +3 -1
- package/package.json +5 -5
|
@@ -121,11 +121,15 @@ class LinkAddToolbar extends React.PureComponent {
|
|
|
121
121
|
icon: jsx(ChevronLeftLargeIcon, {
|
|
122
122
|
label: formatLinkAddressText,
|
|
123
123
|
size: "small"
|
|
124
|
-
})
|
|
124
|
+
})
|
|
125
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
126
|
+
,
|
|
125
127
|
onClick: () => this.handleOnBack({
|
|
126
128
|
url: value,
|
|
127
129
|
inputMethod: currentInputMethod
|
|
128
|
-
})
|
|
130
|
+
})
|
|
131
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
132
|
+
,
|
|
129
133
|
onKeyDown: event => {
|
|
130
134
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
131
135
|
event.preventDefault();
|
|
@@ -142,7 +146,9 @@ class LinkAddToolbar extends React.PureComponent {
|
|
|
142
146
|
placeholder: getPlaceholder(!!activityProvider),
|
|
143
147
|
autoFocus: true,
|
|
144
148
|
onCancel: this.handleCancel,
|
|
145
|
-
defaultValue: value
|
|
149
|
+
defaultValue: value
|
|
150
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
151
|
+
,
|
|
146
152
|
onSubmit: inputValue => {
|
|
147
153
|
const validationErrors = this.getValidationErrors(inputValue, currentInputMethod);
|
|
148
154
|
this.setState({
|
|
@@ -151,7 +157,9 @@ class LinkAddToolbar extends React.PureComponent {
|
|
|
151
157
|
if (!validationErrors.length) {
|
|
152
158
|
onSubmit();
|
|
153
159
|
}
|
|
154
|
-
}
|
|
160
|
+
}
|
|
161
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
162
|
+
,
|
|
155
163
|
onChange: value => {
|
|
156
164
|
this.setState({
|
|
157
165
|
validationErrors: []
|
|
@@ -168,8 +176,12 @@ class LinkAddToolbar extends React.PureComponent {
|
|
|
168
176
|
title: formatUnlinkText,
|
|
169
177
|
icon: jsx(EditorUnlinkIcon, {
|
|
170
178
|
label: formatUnlinkText
|
|
171
|
-
})
|
|
172
|
-
|
|
179
|
+
})
|
|
180
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
181
|
+
,
|
|
182
|
+
onClick: () => this.handleUnlink()
|
|
183
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
184
|
+
,
|
|
173
185
|
onKeyDown: event => {
|
|
174
186
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
175
187
|
event.preventDefault();
|
|
@@ -42,8 +42,12 @@ const DropzoneWrapperInternal = ({
|
|
|
42
42
|
config: dropzoneConfig,
|
|
43
43
|
onError: pickerFacadeInstance.handleUploadError,
|
|
44
44
|
onPreviewUpdate: pickerFacadeInstance.handleUploadPreviewUpdate,
|
|
45
|
-
onEnd: pickerFacadeInstance.handleReady
|
|
46
|
-
|
|
45
|
+
onEnd: pickerFacadeInstance.handleReady
|
|
46
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
47
|
+
,
|
|
48
|
+
onDragEnter: () => handleDrag === null || handleDrag === void 0 ? void 0 : handleDrag('enter')
|
|
49
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
50
|
+
,
|
|
47
51
|
onDragLeave: () => handleDrag === null || handleDrag === void 0 ? void 0 : handleDrag('leave'),
|
|
48
52
|
featureFlags: featureFlags
|
|
49
53
|
}) : null;
|
|
@@ -66,6 +66,7 @@ export default function PickerFacadeProvider({
|
|
|
66
66
|
}, [analyticsName, insertFile, mediaOptions, options === null || options === void 0 ? void 0 : options.errorReporter]);
|
|
67
67
|
useEffect(() => {
|
|
68
68
|
if (mediaProvider) {
|
|
69
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
|
|
69
70
|
handleMediaProvider('mediaProvider', Promise.resolve(mediaProvider));
|
|
70
71
|
}
|
|
71
72
|
}, [mediaProvider, handleMediaProvider]);
|
|
@@ -21,6 +21,7 @@ export const MediaViewerContainer = ({
|
|
|
21
21
|
isEditorViewMode = false,
|
|
22
22
|
isSelected = true,
|
|
23
23
|
isInline = false,
|
|
24
|
+
mediaViewerExtensions,
|
|
24
25
|
children
|
|
25
26
|
}) => {
|
|
26
27
|
var _mediaNode$firstChild;
|
|
@@ -50,6 +51,7 @@ export const MediaViewerContainer = ({
|
|
|
50
51
|
}, children), shouldShowViewer && jsx(RenderMediaViewer, {
|
|
51
52
|
selectedNodeAttrs: selectedNodeAttrs,
|
|
52
53
|
mediaClientConfig: mediaClientConfig,
|
|
53
|
-
onClose: closeMediaViewer
|
|
54
|
+
onClose: closeMediaViewer,
|
|
55
|
+
extensions: mediaViewerExtensions
|
|
54
56
|
})) : children);
|
|
55
57
|
};
|
|
@@ -24,7 +24,8 @@ export const RenderMediaViewer = ({
|
|
|
24
24
|
mediaClientConfig,
|
|
25
25
|
onClose,
|
|
26
26
|
selectedNodeAttrs,
|
|
27
|
-
items = []
|
|
27
|
+
items = [],
|
|
28
|
+
extensions
|
|
28
29
|
}) => {
|
|
29
30
|
const identifier = getIdentifier(selectedNodeAttrs);
|
|
30
31
|
const collectionName = isExternalMedia(selectedNodeAttrs) ? '' : selectedNodeAttrs.collection;
|
|
@@ -36,6 +37,7 @@ export const RenderMediaViewer = ({
|
|
|
36
37
|
,
|
|
37
38
|
mediaClientConfig: mediaClientConfig,
|
|
38
39
|
selectedItem: identifier,
|
|
39
|
-
onClose: onClose
|
|
40
|
+
onClose: onClose,
|
|
41
|
+
extensions: extensions
|
|
40
42
|
}), document.body);
|
|
41
43
|
};
|
|
@@ -364,6 +364,7 @@ export default class ResizableMediaSingle extends React.Component {
|
|
|
364
364
|
// when cursor is located below a media with caption,
|
|
365
365
|
// press “Up“ key will result cursor focus on an invalid position, (on the resize handler)
|
|
366
366
|
// This workaround adds an empty div inside the resize handler to prevent the issue.
|
|
367
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
367
368
|
,
|
|
368
369
|
handleComponentFunc: () => jsx("div", {
|
|
369
370
|
contentEditable: false
|
|
@@ -298,11 +298,15 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
|
|
|
298
298
|
state
|
|
299
299
|
} = editorView;
|
|
300
300
|
const borderMark = currentMediaOrInlineNodeBorderMark(state);
|
|
301
|
-
return /*#__PURE__*/React.createElement(ImageBorderItem
|
|
301
|
+
return /*#__PURE__*/React.createElement(ImageBorderItem
|
|
302
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
303
|
+
, {
|
|
302
304
|
toggleBorder: () => {
|
|
303
305
|
var _pluginInjectionApi$a;
|
|
304
306
|
toggleBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(state, dispatch);
|
|
305
|
-
}
|
|
307
|
+
}
|
|
308
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
309
|
+
,
|
|
306
310
|
setBorder: attrs => {
|
|
307
311
|
var _pluginInjectionApi$a2;
|
|
308
312
|
setBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(attrs)(state, dispatch);
|
|
@@ -43,7 +43,9 @@ export const LayoutGroup = ({
|
|
|
43
43
|
}) : undefined,
|
|
44
44
|
title: item.title,
|
|
45
45
|
selected: item.selected,
|
|
46
|
-
disabled: item.disabled
|
|
46
|
+
disabled: item.disabled
|
|
47
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
48
|
+
,
|
|
47
49
|
onClick: () => {
|
|
48
50
|
dispatchCommand(item.onClick);
|
|
49
51
|
hide();
|
|
@@ -76,12 +76,16 @@ export const getLinkingToolbar = (toolbarBaseConfig, mediaLinkingState, state, i
|
|
|
76
76
|
displayUrl: link,
|
|
77
77
|
providerFactory: providerFactory,
|
|
78
78
|
intl: intl,
|
|
79
|
-
editing: editing
|
|
79
|
+
editing: editing
|
|
80
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
81
|
+
,
|
|
80
82
|
onUnlink: setFocus => {
|
|
81
83
|
var _pluginInjectionApi$a;
|
|
82
84
|
unlink(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(view.state, view.dispatch, view);
|
|
83
85
|
setFocusOnFloatingToolbar(setFocus);
|
|
84
|
-
}
|
|
86
|
+
}
|
|
87
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
88
|
+
,
|
|
85
89
|
onBack: (href, meta, setFocus) => {
|
|
86
90
|
if (href.trim() && meta.inputMethod) {
|
|
87
91
|
var _pluginInjectionApi$a2;
|
|
@@ -89,7 +93,9 @@ export const getLinkingToolbar = (toolbarBaseConfig, mediaLinkingState, state, i
|
|
|
89
93
|
}
|
|
90
94
|
hideLinkingToolbar(view.state, view.dispatch, view);
|
|
91
95
|
setFocusOnFloatingToolbar(setFocus);
|
|
92
|
-
}
|
|
96
|
+
}
|
|
97
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
98
|
+
,
|
|
93
99
|
onCancel: () => {
|
|
94
100
|
var _pluginInjectionApi$f3, _pluginInjectionApi$f4;
|
|
95
101
|
hideLinkingToolbar(view.state, view.dispatch, view, true);
|
|
@@ -105,13 +111,17 @@ export const getLinkingToolbar = (toolbarBaseConfig, mediaLinkingState, state, i
|
|
|
105
111
|
const selector = areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar)) ? FORCE_FOCUS_SELECTOR_EDITOR_CONTROLS : FORCE_FOCUS_SELECTOR;
|
|
106
112
|
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : (_pluginInjectionApi$f4 = _pluginInjectionApi$f3.actions) === null || _pluginInjectionApi$f4 === void 0 ? void 0 : _pluginInjectionApi$f4.forceFocusSelector(selector)(tr);
|
|
107
113
|
dispatch(tr);
|
|
108
|
-
}
|
|
114
|
+
}
|
|
115
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
116
|
+
,
|
|
109
117
|
onSubmit: (href, meta) => {
|
|
110
118
|
var _pluginInjectionApi$a3;
|
|
111
119
|
setUrlToMedia(href, meta.inputMethod, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(view.state, view.dispatch, view);
|
|
112
120
|
hideLinkingToolbar(view.state, view.dispatch, view);
|
|
113
121
|
setFocusOnFloatingToolbar(true);
|
|
114
|
-
}
|
|
122
|
+
}
|
|
123
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
124
|
+
,
|
|
115
125
|
onBlur: () => {
|
|
116
126
|
hideLinkingToolbar(view.state, view.dispatch, view);
|
|
117
127
|
},
|
|
@@ -194,11 +194,15 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
|
|
|
194
194
|
state
|
|
195
195
|
} = editorView;
|
|
196
196
|
const borderMark = currentMediaOrInlineNodeBorderMark(state);
|
|
197
|
-
return /*#__PURE__*/React.createElement(ImageBorderItem
|
|
197
|
+
return /*#__PURE__*/React.createElement(ImageBorderItem
|
|
198
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
199
|
+
, {
|
|
198
200
|
toggleBorder: () => {
|
|
199
201
|
var _pluginInjectionApi$a2;
|
|
200
202
|
toggleBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(state, dispatch);
|
|
201
|
-
}
|
|
203
|
+
}
|
|
204
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
205
|
+
,
|
|
202
206
|
setBorder: attrs => {
|
|
203
207
|
var _pluginInjectionApi$a3;
|
|
204
208
|
setBorderMark(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions)(attrs)(state, dispatch);
|
package/dist/esm/mediaPlugin.js
CHANGED
|
@@ -72,7 +72,8 @@ var mediaViewerStateSelector = function mediaViewerStateSelector(states) {
|
|
|
72
72
|
};
|
|
73
73
|
var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_ref2) {
|
|
74
74
|
var api = _ref2.api,
|
|
75
|
-
editorView = _ref2.editorView
|
|
75
|
+
editorView = _ref2.editorView,
|
|
76
|
+
mediaViewerExtensions = _ref2.mediaViewerExtensions;
|
|
76
77
|
// Only traverse document once when media viewer is visible, media viewer items will not update
|
|
77
78
|
// when document changes are made while media viewer is open
|
|
78
79
|
var _useSharedPluginState2 = useSharedPluginStateWithSelector(api, ['media'], mediaViewerStateSelector),
|
|
@@ -99,7 +100,8 @@ var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_re
|
|
|
99
100
|
mediaClientConfig: mediaClientConfig,
|
|
100
101
|
onClose: handleOnClose,
|
|
101
102
|
selectedNodeAttrs: mediaViewerSelectedMedia,
|
|
102
|
-
items: mediaItems
|
|
103
|
+
items: mediaItems,
|
|
104
|
+
extensions: mediaViewerExtensions
|
|
103
105
|
});
|
|
104
106
|
};
|
|
105
107
|
export var mediaPlugin = function mediaPlugin(_ref3) {
|
|
@@ -333,7 +335,8 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
|
|
|
333
335
|
}
|
|
334
336
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MediaViewerFunctionalComponent, {
|
|
335
337
|
api: api,
|
|
336
|
-
editorView: editorView
|
|
338
|
+
editorView: editorView,
|
|
339
|
+
mediaViewerExtensions: options === null || options === void 0 ? void 0 : options.mediaViewerExtensions
|
|
337
340
|
}), /*#__PURE__*/React.createElement(MediaPickerFunctionalComponent, {
|
|
338
341
|
editorDomElement: editorView.dom,
|
|
339
342
|
appearance: appearance,
|
|
@@ -46,9 +46,13 @@ var MediaGroupNodeView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
46
46
|
mediaOptions = props.mediaOptions,
|
|
47
47
|
pluginInjectionApi = props.pluginInjectionApi;
|
|
48
48
|
var getPos = this.getPos;
|
|
49
|
-
return /*#__PURE__*/React.createElement(WithProviders
|
|
49
|
+
return /*#__PURE__*/React.createElement(WithProviders
|
|
50
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
51
|
+
, {
|
|
50
52
|
providers: ['contextIdentifierProvider'],
|
|
51
|
-
providerFactory: providerFactory
|
|
53
|
+
providerFactory: providerFactory
|
|
54
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
55
|
+
,
|
|
52
56
|
renderNode: function renderNode(_ref2) {
|
|
53
57
|
var contextIdentifierProvider = _ref2.contextIdentifierProvider;
|
|
54
58
|
var renderFn = function renderFn(_ref3) {
|
|
@@ -239,6 +239,7 @@ export var MediaGroupNext = injectIntl( /*#__PURE__*/React.memo(function (props)
|
|
|
239
239
|
setViewMediaClientConfig(mediaClientConfig);
|
|
240
240
|
}, [mediaClientConfig]);
|
|
241
241
|
useEffect(function () {
|
|
242
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
|
|
242
243
|
mediaNodesWithOffsets.forEach(function (_ref5) {
|
|
243
244
|
var node = _ref5.node,
|
|
244
245
|
offset = _ref5.offset;
|
|
@@ -196,7 +196,9 @@ export var MediaInline = function MediaInline(props) {
|
|
|
196
196
|
isSelected: props.isSelected,
|
|
197
197
|
alt: alt,
|
|
198
198
|
width: width,
|
|
199
|
-
height: height
|
|
199
|
+
height: height
|
|
200
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
201
|
+
,
|
|
200
202
|
border: {
|
|
201
203
|
borderSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
|
|
202
204
|
borderColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color
|
|
@@ -304,11 +306,15 @@ export var MediaInlineNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
|
|
|
304
306
|
api = props.api;
|
|
305
307
|
var view = this.view;
|
|
306
308
|
var getPos = this.getPos;
|
|
307
|
-
return jsx(WithProviders
|
|
309
|
+
return jsx(WithProviders
|
|
310
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
311
|
+
, {
|
|
308
312
|
providers: ['contextIdentifierProvider'],
|
|
309
|
-
providerFactory: providerFactory
|
|
313
|
+
providerFactory: providerFactory
|
|
314
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
315
|
+
,
|
|
310
316
|
renderNode: function renderNode(_ref4) {
|
|
311
|
-
var
|
|
317
|
+
var _mediaProvider = _ref4.mediaProvider,
|
|
312
318
|
contextIdentifierProvider = _ref4.contextIdentifierProvider;
|
|
313
319
|
return jsx(MediaInlineSharedState, {
|
|
314
320
|
identifier: _this.node.attrs.id,
|
|
@@ -274,7 +274,9 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
|
|
|
274
274
|
key: "render",
|
|
275
275
|
value: function render() {
|
|
276
276
|
var providerFactory = this.reactComponentProps.providerFactory;
|
|
277
|
-
return /*#__PURE__*/React.createElement(WithProviders
|
|
277
|
+
return /*#__PURE__*/React.createElement(WithProviders
|
|
278
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
279
|
+
, {
|
|
278
280
|
providers: ['contextIdentifierProvider'],
|
|
279
281
|
providerFactory: providerFactory,
|
|
280
282
|
renderNode: this.renderMediaNodeWithProviders
|
|
@@ -358,7 +358,9 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
|
|
|
358
358
|
onContextMenu: this.selectMediaSingle,
|
|
359
359
|
borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
|
|
360
360
|
selected: selected
|
|
361
|
-
}, /*#__PURE__*/React.createElement(AnalyticsContext
|
|
361
|
+
}, /*#__PURE__*/React.createElement(AnalyticsContext
|
|
362
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
363
|
+
, {
|
|
362
364
|
data: _defineProperty({}, MEDIA_CONTEXT, {
|
|
363
365
|
border: !!borderMark
|
|
364
366
|
})
|
|
@@ -249,9 +249,13 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
249
249
|
|
|
250
250
|
// getPos is a boolean for marks, since this is a node we know it must be a function
|
|
251
251
|
var getPos = this.getPos;
|
|
252
|
-
return jsx(WithProviders
|
|
252
|
+
return jsx(WithProviders
|
|
253
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
254
|
+
, {
|
|
253
255
|
providers: ['contextIdentifierProvider'],
|
|
254
|
-
providerFactory: providerFactory
|
|
256
|
+
providerFactory: providerFactory
|
|
257
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
258
|
+
,
|
|
255
259
|
renderNode: function renderNode(_ref2) {
|
|
256
260
|
var contextIdentifierProvider = _ref2.contextIdentifierProvider;
|
|
257
261
|
return jsx(MediaSingleNodeWrapper, {
|
|
@@ -75,14 +75,18 @@ export var PixelEntry = function PixelEntry(_ref) {
|
|
|
75
75
|
mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
|
|
76
76
|
mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
|
|
77
77
|
minWidth: minWidth,
|
|
78
|
-
maxWidth: maxWidth
|
|
78
|
+
maxWidth: maxWidth
|
|
79
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
80
|
+
,
|
|
79
81
|
onChange: function onChange(valid) {
|
|
80
82
|
if (valid) {
|
|
81
83
|
hoverDecoration === null || hoverDecoration === void 0 || hoverDecoration(mediaSingle, true, 'warning')(editorView.state, dispatch, editorView);
|
|
82
84
|
} else {
|
|
83
85
|
hoverDecoration === null || hoverDecoration === void 0 || hoverDecoration(mediaSingle, false)(editorView.state, dispatch, editorView);
|
|
84
86
|
}
|
|
85
|
-
}
|
|
87
|
+
}
|
|
88
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
89
|
+
,
|
|
86
90
|
onSubmit: function onSubmit(_ref2) {
|
|
87
91
|
var width = _ref2.width,
|
|
88
92
|
validation = _ref2.validation;
|
|
@@ -90,7 +94,9 @@ export var PixelEntry = function PixelEntry(_ref) {
|
|
|
90
94
|
if (tr) {
|
|
91
95
|
dispatch(tr);
|
|
92
96
|
}
|
|
93
|
-
}
|
|
97
|
+
}
|
|
98
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
99
|
+
,
|
|
94
100
|
onMigrate: function onMigrate() {
|
|
95
101
|
var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
|
|
96
102
|
width: pixelWidthFromElement,
|
|
@@ -103,7 +109,9 @@ export var PixelEntry = function PixelEntry(_ref) {
|
|
|
103
109
|
tr = newTr !== undefined ? newTr : tr;
|
|
104
110
|
}
|
|
105
111
|
dispatch(tr);
|
|
106
|
-
}
|
|
112
|
+
}
|
|
113
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
114
|
+
,
|
|
107
115
|
onCloseAndSave: function onCloseAndSave(_ref3, setFocus) {
|
|
108
116
|
var width = _ref3.width,
|
|
109
117
|
validation = _ref3.validation;
|
|
@@ -13,8 +13,7 @@ import { IconButton } from '@atlaskit/button/new';
|
|
|
13
13
|
import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
|
|
14
14
|
import Form, { Field } from '@atlaskit/form';
|
|
15
15
|
import CrossIcon from '@atlaskit/icon/core/cross';
|
|
16
|
-
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives
|
|
17
|
-
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
16
|
+
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives, @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
18
17
|
import { Inline, Box, Text, xcss } from '@atlaskit/primitives';
|
|
19
18
|
import Textfield from '@atlaskit/textfield';
|
|
20
19
|
import Tooltip from '@atlaskit/tooltip';
|
|
@@ -198,7 +197,7 @@ export var PixelEntryComponent = function PixelEntryComponent(_ref) {
|
|
|
198
197
|
// Ignored via go/ees005
|
|
199
198
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
200
199
|
, _extends({}, fieldProps, {
|
|
201
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/
|
|
200
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
202
201
|
css: [pixelSizingWidthInput, pixelSizingInput],
|
|
203
202
|
appearance: "none",
|
|
204
203
|
isCompact: true,
|
|
@@ -225,7 +224,7 @@ export var PixelEntryComponent = function PixelEntryComponent(_ref) {
|
|
|
225
224
|
// Ignored via go/ees005
|
|
226
225
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
227
226
|
, _extends({}, fieldProps, {
|
|
228
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/
|
|
227
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides, @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
229
228
|
css: [pixelSizingHeightInput, pixelSizingInput],
|
|
230
229
|
appearance: "none",
|
|
231
230
|
isCompact: true,
|
|
@@ -300,73 +299,80 @@ export var PixelEntryComponentNext = function PixelEntryComponentNext(_ref5) {
|
|
|
300
299
|
}, shouldSetFocus);
|
|
301
300
|
}
|
|
302
301
|
}, [computedWidth, computedHeight, handleCloseAndSave]);
|
|
303
|
-
return
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
302
|
+
return (
|
|
303
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
304
|
+
jsx(Box, {
|
|
305
|
+
xcss: [pixelEntryWrapperStyles, isViewMode && pixelEntryWrapperViewModeStyles]
|
|
306
|
+
}, jsx(Inline, {
|
|
307
|
+
alignBlock: "center",
|
|
308
|
+
spread: "space-between"
|
|
309
|
+
}, jsx(Box, {
|
|
310
|
+
paddingInlineStart: "space.100"
|
|
311
|
+
}, jsx(Text, {
|
|
312
|
+
color: "color.text.subtlest"
|
|
313
|
+
}, formatMessage(messages.inputWidthLabel))), jsx("div", {
|
|
314
|
+
css: fieldStyles
|
|
315
|
+
}, jsx(Tooltip, {
|
|
316
|
+
hideTooltipOnMouseDown: true,
|
|
317
|
+
hideTooltipOnClick: true,
|
|
318
|
+
position: "top",
|
|
319
|
+
content: formatMessage(messages.inputWidthTooltip, {
|
|
320
|
+
maxWidth: maxWidth
|
|
321
|
+
})
|
|
322
|
+
}, jsx(Textfield, {
|
|
323
|
+
name: "inputWidth",
|
|
324
|
+
value: computedWidth,
|
|
325
|
+
ref: widthInputRef,
|
|
326
|
+
height: "var(--ds-space-250, 20px)",
|
|
327
|
+
appearance: "none",
|
|
328
|
+
pattern: "\\d*",
|
|
329
|
+
"aria-label": formatMessage(messages.inputWidthAriaLabel, {
|
|
330
|
+
maxWidth: maxWidth
|
|
331
|
+
}),
|
|
332
|
+
onChange: handleFieldChange('inputWidth'),
|
|
333
|
+
onKeyDown: handleKeyDown
|
|
334
|
+
}))), jsx(Box, {
|
|
335
|
+
paddingInlineStart: "space.100"
|
|
336
|
+
}, jsx(Text, {
|
|
337
|
+
color: "color.text.subtlest"
|
|
338
|
+
}, formatMessage(messages.inputHeightTooltip))), jsx("div", {
|
|
339
|
+
css: fieldStyles
|
|
340
|
+
}, jsx(Tooltip, {
|
|
341
|
+
hideTooltipOnMouseDown: true,
|
|
342
|
+
hideTooltipOnClick: true,
|
|
343
|
+
content: formatMessage(messages.inputHeightTooltip),
|
|
344
|
+
position: "top"
|
|
345
|
+
}, jsx(Textfield, {
|
|
346
|
+
name: "inputHeight",
|
|
347
|
+
value: computedHeight,
|
|
348
|
+
height: "var(--ds-space-250, 20px)",
|
|
349
|
+
appearance: "none",
|
|
350
|
+
pattern: "\\d*",
|
|
351
|
+
"aria-label": formatMessage(messages.inputHeightAriaLabel),
|
|
352
|
+
onChange: handleFieldChange('inputHeight'),
|
|
353
|
+
onKeyDown: handleKeyDown
|
|
354
|
+
}))), !isViewMode && jsx(Fragment, null, jsx(Box, {
|
|
355
|
+
xcss: dividerStyles
|
|
356
|
+
}), jsx(IconButton
|
|
357
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
358
|
+
, {
|
|
359
|
+
icon: function icon() {
|
|
360
|
+
return jsx(CrossIcon, {
|
|
361
|
+
label: "",
|
|
362
|
+
color: "var(--ds-icon-subtlest, #6B6E76)"
|
|
363
|
+
});
|
|
364
|
+
},
|
|
365
|
+
label: formatMessage(messages.closePixelEntry),
|
|
366
|
+
appearance: "subtle"
|
|
367
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
368
|
+
,
|
|
369
|
+
onClick: function onClick() {
|
|
370
|
+
handleCloseAndSave({
|
|
371
|
+
inputWidth: computedWidth,
|
|
372
|
+
inputHeight: computedHeight
|
|
373
|
+
});
|
|
374
|
+
},
|
|
375
|
+
onKeyDown: handleCloseButtonKeyDown
|
|
376
|
+
}))))
|
|
377
|
+
);
|
|
372
378
|
};
|
|
@@ -58,10 +58,14 @@ export var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
|
|
|
58
58
|
return /*#__PURE__*/React.createElement(CommentBadgeNext, {
|
|
59
59
|
onClick: onClick,
|
|
60
60
|
mediaSingleElement: mediaSingleElement,
|
|
61
|
-
status: entered ? 'entered' : status
|
|
61
|
+
status: entered ? 'entered' : status
|
|
62
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
63
|
+
,
|
|
62
64
|
onMouseEnter: function onMouseEnter() {
|
|
63
65
|
return setEntered(true);
|
|
64
|
-
}
|
|
66
|
+
}
|
|
67
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
68
|
+
,
|
|
65
69
|
onMouseLeave: function onMouseLeave() {
|
|
66
70
|
return setEntered(false);
|
|
67
71
|
}
|