@atlaskit/editor-core 187.21.0 → 187.22.0
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 +30 -0
- package/dist/cjs/composable-editor.js +1 -1
- package/dist/cjs/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +39 -19
- package/dist/cjs/plugins/media/utils/analytics.js +2 -2
- package/dist/cjs/preset-default.js +12 -0
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/composable-editor.js +1 -1
- package/dist/es2019/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +41 -20
- package/dist/es2019/plugins/media/utils/analytics.js +2 -2
- package/dist/es2019/preset-default.js +1 -0
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/composable-editor.js +1 -1
- package/dist/esm/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +40 -20
- package/dist/esm/plugins/media/utils/analytics.js +2 -2
- package/dist/esm/preset-default.js +1 -0
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/composable-editor.d.ts +1 -1
- package/dist/types/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts +2 -0
- package/dist/types/plugins/media/utils/analytics.d.ts +1 -1
- package/dist/types/preset-default.d.ts +1 -0
- package/dist/types-ts4.5/composable-editor.d.ts +1 -1
- package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts +2 -0
- package/dist/types-ts4.5/plugins/media/utils/analytics.d.ts +1 -1
- package/dist/types-ts4.5/preset-default.d.ts +1 -0
- package/package.json +1 -1
- package/preset-default/package.json +15 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,35 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 187.22.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`ee20a0c6142`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ee20a0c6142) - Exporting default preset via preset-default endpoint. This can be accessed like so:
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { createDefaultPreset } from '@atlaskit/editor-core/preset-default';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Also renaming the composable editor to ComposableEditor.
|
|
14
|
+
|
|
15
|
+
Before:
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
import { Editor } from '@atlaskit/editor-core/composable-editor';
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
After:
|
|
22
|
+
|
|
23
|
+
```ts
|
|
24
|
+
import { ComposableEditor } from '@atlaskit/editor-core/composable-editor';
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## 187.21.1
|
|
28
|
+
|
|
29
|
+
### Patch Changes
|
|
30
|
+
|
|
31
|
+
- [`cf71a66559b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf71a66559b) - Update analytics event for new resize experience
|
|
32
|
+
|
|
3
33
|
## 187.21.0
|
|
4
34
|
|
|
5
35
|
### Minor Changes
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
Object.defineProperty(exports, "
|
|
7
|
+
Object.defineProperty(exports, "ComposableEditor", {
|
|
8
8
|
enumerable: true,
|
|
9
9
|
get: function get() {
|
|
10
10
|
return _editorNext.default;
|
|
@@ -24,33 +24,18 @@ var _utils2 = require("@atlaskit/editor-common/utils");
|
|
|
24
24
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
25
25
|
var _styled = require("./styled");
|
|
26
26
|
var _resizer = require("@atlaskit/editor-common/resizer");
|
|
27
|
-
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
28
27
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
29
28
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
30
29
|
var _mediaSingle = require("@atlaskit/editor-common/media-single");
|
|
31
30
|
var _guideline = require("@atlaskit/editor-common/guideline");
|
|
32
31
|
var _memoizeOne = _interopRequireDefault(require("memoize-one"));
|
|
32
|
+
var _analytics = require("../../utils/analytics");
|
|
33
33
|
var _throttle = _interopRequireDefault(require("lodash/throttle"));
|
|
34
34
|
var _main = require("../../pm-plugins/main");
|
|
35
35
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
36
36
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
|
|
37
37
|
var resizerNextTestId = 'mediaSingle.resizerNext.testid';
|
|
38
|
-
|
|
39
|
-
// TODO: Create new fixed image size event
|
|
40
38
|
exports.resizerNextTestId = resizerNextTestId;
|
|
41
|
-
var getResizeAnalyticsEvent = function getResizeAnalyticsEvent(type, size, layout) {
|
|
42
|
-
var actionSubject = type === 'embed' ? _analytics.ACTION_SUBJECT.EMBEDS : _analytics.ACTION_SUBJECT.MEDIA_SINGLE;
|
|
43
|
-
return {
|
|
44
|
-
action: _analytics.ACTION.EDITED,
|
|
45
|
-
actionSubject: actionSubject,
|
|
46
|
-
actionSubjectId: _analytics.ACTION_SUBJECT_ID.RESIZED,
|
|
47
|
-
attributes: {
|
|
48
|
-
size: size,
|
|
49
|
-
layout: layout
|
|
50
|
-
},
|
|
51
|
-
eventType: _analytics.EVENT_TYPE.UI
|
|
52
|
-
};
|
|
53
|
-
};
|
|
54
39
|
var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
55
40
|
(0, _inherits2.default)(ResizableMediaSingleNext, _React$Component);
|
|
56
41
|
var _super = _createSuper(ResizableMediaSingleNext);
|
|
@@ -59,6 +44,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
59
44
|
(0, _classCallCheck2.default)(this, ResizableMediaSingleNext);
|
|
60
45
|
_this = _super.call(this, props);
|
|
61
46
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "guidelines", []);
|
|
47
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "lastSnappedGuidelineKeys", []);
|
|
62
48
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getAllGuidelines", function () {
|
|
63
49
|
var _this$props = _this.props,
|
|
64
50
|
view = _this$props.view,
|
|
@@ -171,6 +157,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
171
157
|
var _findClosestSnap = (0, _guideline.findClosestSnap)(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, _mediaSingle.MEDIA_SINGLE_SNAP_GAP),
|
|
172
158
|
gap = _findClosestSnap.gap,
|
|
173
159
|
activeGuidelineKeys = _findClosestSnap.keys;
|
|
160
|
+
_this.lastSnappedGuidelineKeys = activeGuidelineKeys;
|
|
174
161
|
_this.displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _mediaSingle.MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines));
|
|
175
162
|
}
|
|
176
163
|
});
|
|
@@ -202,6 +189,30 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
202
189
|
}
|
|
203
190
|
}
|
|
204
191
|
});
|
|
192
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getParentNodeTypeNameFromCurrentPositionNode", function () {
|
|
193
|
+
var $pos = _this.$pos;
|
|
194
|
+
if (!$pos) {
|
|
195
|
+
return undefined;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
// Supported Parent Nodes
|
|
199
|
+
var _this$props$view$stat = _this.props.view.state.schema.nodes,
|
|
200
|
+
listItem = _this$props$view$stat.listItem,
|
|
201
|
+
expand = _this$props$view$stat.expand,
|
|
202
|
+
tableCell = _this$props$view$stat.tableCell,
|
|
203
|
+
tableHeader = _this$props$view$stat.tableHeader,
|
|
204
|
+
layoutSection = _this$props$view$stat.layoutSection,
|
|
205
|
+
nestedExpand = _this$props$view$stat.nestedExpand;
|
|
206
|
+
var parentNode = (0, _utils.findParentNodeOfTypeClosestToPos)($pos, [listItem, expand, tableCell, tableHeader, layoutSection, nestedExpand]);
|
|
207
|
+
|
|
208
|
+
// Return matched parent node name
|
|
209
|
+
if (parentNode) {
|
|
210
|
+
return parentNode.node.type.name;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
// Return undefined if parent node cannot be found
|
|
214
|
+
return undefined;
|
|
215
|
+
});
|
|
205
216
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResizeStart", function () {
|
|
206
217
|
_this.setState({
|
|
207
218
|
isResizing: true
|
|
@@ -249,11 +260,20 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
249
260
|
width = _this$calculateSizeSt2.width,
|
|
250
261
|
height = _this$calculateSizeSt2.height,
|
|
251
262
|
calculatedWidthWithLayout = _this$calculateSizeSt2.calculatedWidthWithLayout;
|
|
252
|
-
_this.setIsResizing(false);
|
|
253
|
-
_this.displayGuideline([]);
|
|
254
263
|
if (dispatchAnalyticsEvent) {
|
|
255
|
-
|
|
264
|
+
var event = (0, _analytics.getMediaResizeAnalyticsEvent)(nodeType || 'mediaSingle', {
|
|
265
|
+
width: width,
|
|
266
|
+
layout: calculatedWidthWithLayout.layout,
|
|
267
|
+
widthType: 'pixel',
|
|
268
|
+
snapType: (0, _guideline.getGuidelineTypeFromKey)(_this.lastSnappedGuidelineKeys, _this.guidelines),
|
|
269
|
+
parentNode: _this.getParentNodeTypeNameFromCurrentPositionNode()
|
|
270
|
+
});
|
|
271
|
+
if (event) {
|
|
272
|
+
dispatchAnalyticsEvent(event);
|
|
273
|
+
}
|
|
256
274
|
}
|
|
275
|
+
_this.setIsResizing(false);
|
|
276
|
+
_this.displayGuideline([]);
|
|
257
277
|
_this.setState({
|
|
258
278
|
isResizing: false,
|
|
259
279
|
size: {
|
|
@@ -9,7 +9,7 @@ var getMediaResizeAnalyticsEvent = function getMediaResizeAnalyticsEvent(type, a
|
|
|
9
9
|
if (!attributes) {
|
|
10
10
|
return;
|
|
11
11
|
}
|
|
12
|
-
var
|
|
12
|
+
var width = attributes.width,
|
|
13
13
|
widthType = attributes.widthType,
|
|
14
14
|
layout = attributes.layout,
|
|
15
15
|
snapType = attributes.snapType,
|
|
@@ -20,7 +20,7 @@ var getMediaResizeAnalyticsEvent = function getMediaResizeAnalyticsEvent(type, a
|
|
|
20
20
|
actionSubject: actionSubject,
|
|
21
21
|
actionSubjectId: _analytics.ACTION_SUBJECT_ID.RESIZED,
|
|
22
22
|
attributes: {
|
|
23
|
-
|
|
23
|
+
width: width,
|
|
24
24
|
layout: layout,
|
|
25
25
|
widthType: widthType,
|
|
26
26
|
snapType: snapType,
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "createDefaultPreset", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _default.createDefaultPreset;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
var _default = require("./labs/next/presets/default");
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.version = exports.nextMajorVersion = exports.name = void 0;
|
|
7
7
|
var name = "@atlaskit/editor-core";
|
|
8
8
|
exports.name = name;
|
|
9
|
-
var version = "187.
|
|
9
|
+
var version = "187.22.0";
|
|
10
10
|
exports.version = version;
|
|
11
11
|
var nextMajorVersion = function nextMajorVersion() {
|
|
12
12
|
return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
|
package/dist/cjs/version.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default as
|
|
1
|
+
export { default as ComposableEditor } from './editor-next';
|
|
@@ -9,34 +9,20 @@ import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/uti
|
|
|
9
9
|
import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
10
10
|
import { wrapperStyle } from './styled';
|
|
11
11
|
import { ResizerNext } from '@atlaskit/editor-common/resizer';
|
|
12
|
-
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
13
12
|
import classnames from 'classnames';
|
|
14
13
|
import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
|
|
15
14
|
import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
|
|
16
|
-
import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps } from '@atlaskit/editor-common/guideline';
|
|
15
|
+
import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps, getGuidelineTypeFromKey } from '@atlaskit/editor-common/guideline';
|
|
17
16
|
import memoizeOne from 'memoize-one';
|
|
17
|
+
import { getMediaResizeAnalyticsEvent } from '../../utils/analytics';
|
|
18
18
|
import throttle from 'lodash/throttle';
|
|
19
19
|
import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
|
|
20
20
|
export const resizerNextTestId = 'mediaSingle.resizerNext.testid';
|
|
21
|
-
|
|
22
|
-
// TODO: Create new fixed image size event
|
|
23
|
-
const getResizeAnalyticsEvent = (type, size, layout) => {
|
|
24
|
-
const actionSubject = type === 'embed' ? ACTION_SUBJECT.EMBEDS : ACTION_SUBJECT.MEDIA_SINGLE;
|
|
25
|
-
return {
|
|
26
|
-
action: ACTION.EDITED,
|
|
27
|
-
actionSubject,
|
|
28
|
-
actionSubjectId: ACTION_SUBJECT_ID.RESIZED,
|
|
29
|
-
attributes: {
|
|
30
|
-
size,
|
|
31
|
-
layout
|
|
32
|
-
},
|
|
33
|
-
eventType: EVENT_TYPE.UI
|
|
34
|
-
};
|
|
35
|
-
};
|
|
36
21
|
class ResizableMediaSingleNext extends React.Component {
|
|
37
22
|
constructor(props) {
|
|
38
23
|
super(props);
|
|
39
24
|
_defineProperty(this, "guidelines", []);
|
|
25
|
+
_defineProperty(this, "lastSnappedGuidelineKeys", []);
|
|
40
26
|
_defineProperty(this, "getAllGuidelines", () => {
|
|
41
27
|
const {
|
|
42
28
|
view,
|
|
@@ -155,6 +141,7 @@ class ResizableMediaSingleNext extends React.Component {
|
|
|
155
141
|
gap,
|
|
156
142
|
keys: activeGuidelineKeys
|
|
157
143
|
} = findClosestSnap(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, MEDIA_SINGLE_SNAP_GAP);
|
|
144
|
+
this.lastSnappedGuidelineKeys = activeGuidelineKeys;
|
|
158
145
|
this.displayGuideline(getGuidelinesWithHighlights(gap, MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines));
|
|
159
146
|
}
|
|
160
147
|
});
|
|
@@ -179,6 +166,31 @@ class ResizableMediaSingleNext extends React.Component {
|
|
|
179
166
|
}
|
|
180
167
|
}
|
|
181
168
|
});
|
|
169
|
+
_defineProperty(this, "getParentNodeTypeNameFromCurrentPositionNode", () => {
|
|
170
|
+
const $pos = this.$pos;
|
|
171
|
+
if (!$pos) {
|
|
172
|
+
return undefined;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
// Supported Parent Nodes
|
|
176
|
+
const {
|
|
177
|
+
listItem,
|
|
178
|
+
expand,
|
|
179
|
+
tableCell,
|
|
180
|
+
tableHeader,
|
|
181
|
+
layoutSection,
|
|
182
|
+
nestedExpand
|
|
183
|
+
} = this.props.view.state.schema.nodes;
|
|
184
|
+
const parentNode = findParentNodeOfTypeClosestToPos($pos, [listItem, expand, tableCell, tableHeader, layoutSection, nestedExpand]);
|
|
185
|
+
|
|
186
|
+
// Return matched parent node name
|
|
187
|
+
if (parentNode) {
|
|
188
|
+
return parentNode.node.type.name;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
// Return undefined if parent node cannot be found
|
|
192
|
+
return undefined;
|
|
193
|
+
});
|
|
182
194
|
_defineProperty(this, "handleResizeStart", () => {
|
|
183
195
|
this.setState({
|
|
184
196
|
isResizing: true
|
|
@@ -230,11 +242,20 @@ class ResizableMediaSingleNext extends React.Component {
|
|
|
230
242
|
height,
|
|
231
243
|
calculatedWidthWithLayout
|
|
232
244
|
} = this.calculateSizeState(size, delta, originalWidth, originalHeight, true);
|
|
233
|
-
this.setIsResizing(false);
|
|
234
|
-
this.displayGuideline([]);
|
|
235
245
|
if (dispatchAnalyticsEvent) {
|
|
236
|
-
|
|
246
|
+
const event = getMediaResizeAnalyticsEvent(nodeType || 'mediaSingle', {
|
|
247
|
+
width,
|
|
248
|
+
layout: calculatedWidthWithLayout.layout,
|
|
249
|
+
widthType: 'pixel',
|
|
250
|
+
snapType: getGuidelineTypeFromKey(this.lastSnappedGuidelineKeys, this.guidelines),
|
|
251
|
+
parentNode: this.getParentNodeTypeNameFromCurrentPositionNode()
|
|
252
|
+
});
|
|
253
|
+
if (event) {
|
|
254
|
+
dispatchAnalyticsEvent(event);
|
|
255
|
+
}
|
|
237
256
|
}
|
|
257
|
+
this.setIsResizing(false);
|
|
258
|
+
this.displayGuideline([]);
|
|
238
259
|
this.setState({
|
|
239
260
|
isResizing: false,
|
|
240
261
|
size: {
|
|
@@ -4,7 +4,7 @@ export const getMediaResizeAnalyticsEvent = (type, attributes) => {
|
|
|
4
4
|
return;
|
|
5
5
|
}
|
|
6
6
|
const {
|
|
7
|
-
|
|
7
|
+
width,
|
|
8
8
|
widthType,
|
|
9
9
|
layout,
|
|
10
10
|
snapType,
|
|
@@ -16,7 +16,7 @@ export const getMediaResizeAnalyticsEvent = (type, attributes) => {
|
|
|
16
16
|
actionSubject,
|
|
17
17
|
actionSubjectId: ACTION_SUBJECT_ID.RESIZED,
|
|
18
18
|
attributes: {
|
|
19
|
-
|
|
19
|
+
width,
|
|
20
20
|
layout,
|
|
21
21
|
widthType,
|
|
22
22
|
snapType,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { createDefaultPreset } from './labs/next/presets/default';
|
package/dist/es2019/version.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default as
|
|
1
|
+
export { default as ComposableEditor } from './editor-next';
|
|
@@ -20,30 +20,15 @@ import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/uti
|
|
|
20
20
|
import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
21
21
|
import { wrapperStyle } from './styled';
|
|
22
22
|
import { ResizerNext } from '@atlaskit/editor-common/resizer';
|
|
23
|
-
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
24
23
|
import classnames from 'classnames';
|
|
25
24
|
import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
|
|
26
25
|
import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
|
|
27
|
-
import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps } from '@atlaskit/editor-common/guideline';
|
|
26
|
+
import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps, getGuidelineTypeFromKey } from '@atlaskit/editor-common/guideline';
|
|
28
27
|
import memoizeOne from 'memoize-one';
|
|
28
|
+
import { getMediaResizeAnalyticsEvent } from '../../utils/analytics';
|
|
29
29
|
import throttle from 'lodash/throttle';
|
|
30
30
|
import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
|
|
31
31
|
export var resizerNextTestId = 'mediaSingle.resizerNext.testid';
|
|
32
|
-
|
|
33
|
-
// TODO: Create new fixed image size event
|
|
34
|
-
var getResizeAnalyticsEvent = function getResizeAnalyticsEvent(type, size, layout) {
|
|
35
|
-
var actionSubject = type === 'embed' ? ACTION_SUBJECT.EMBEDS : ACTION_SUBJECT.MEDIA_SINGLE;
|
|
36
|
-
return {
|
|
37
|
-
action: ACTION.EDITED,
|
|
38
|
-
actionSubject: actionSubject,
|
|
39
|
-
actionSubjectId: ACTION_SUBJECT_ID.RESIZED,
|
|
40
|
-
attributes: {
|
|
41
|
-
size: size,
|
|
42
|
-
layout: layout
|
|
43
|
-
},
|
|
44
|
-
eventType: EVENT_TYPE.UI
|
|
45
|
-
};
|
|
46
|
-
};
|
|
47
32
|
var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
48
33
|
_inherits(ResizableMediaSingleNext, _React$Component);
|
|
49
34
|
var _super = _createSuper(ResizableMediaSingleNext);
|
|
@@ -52,6 +37,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
52
37
|
_classCallCheck(this, ResizableMediaSingleNext);
|
|
53
38
|
_this = _super.call(this, props);
|
|
54
39
|
_defineProperty(_assertThisInitialized(_this), "guidelines", []);
|
|
40
|
+
_defineProperty(_assertThisInitialized(_this), "lastSnappedGuidelineKeys", []);
|
|
55
41
|
_defineProperty(_assertThisInitialized(_this), "getAllGuidelines", function () {
|
|
56
42
|
var _this$props = _this.props,
|
|
57
43
|
view = _this$props.view,
|
|
@@ -164,6 +150,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
164
150
|
var _findClosestSnap = findClosestSnap(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, MEDIA_SINGLE_SNAP_GAP),
|
|
165
151
|
gap = _findClosestSnap.gap,
|
|
166
152
|
activeGuidelineKeys = _findClosestSnap.keys;
|
|
153
|
+
_this.lastSnappedGuidelineKeys = activeGuidelineKeys;
|
|
167
154
|
_this.displayGuideline(getGuidelinesWithHighlights(gap, MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines));
|
|
168
155
|
}
|
|
169
156
|
});
|
|
@@ -195,6 +182,30 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
195
182
|
}
|
|
196
183
|
}
|
|
197
184
|
});
|
|
185
|
+
_defineProperty(_assertThisInitialized(_this), "getParentNodeTypeNameFromCurrentPositionNode", function () {
|
|
186
|
+
var $pos = _this.$pos;
|
|
187
|
+
if (!$pos) {
|
|
188
|
+
return undefined;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
// Supported Parent Nodes
|
|
192
|
+
var _this$props$view$stat = _this.props.view.state.schema.nodes,
|
|
193
|
+
listItem = _this$props$view$stat.listItem,
|
|
194
|
+
expand = _this$props$view$stat.expand,
|
|
195
|
+
tableCell = _this$props$view$stat.tableCell,
|
|
196
|
+
tableHeader = _this$props$view$stat.tableHeader,
|
|
197
|
+
layoutSection = _this$props$view$stat.layoutSection,
|
|
198
|
+
nestedExpand = _this$props$view$stat.nestedExpand;
|
|
199
|
+
var parentNode = findParentNodeOfTypeClosestToPos($pos, [listItem, expand, tableCell, tableHeader, layoutSection, nestedExpand]);
|
|
200
|
+
|
|
201
|
+
// Return matched parent node name
|
|
202
|
+
if (parentNode) {
|
|
203
|
+
return parentNode.node.type.name;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
// Return undefined if parent node cannot be found
|
|
207
|
+
return undefined;
|
|
208
|
+
});
|
|
198
209
|
_defineProperty(_assertThisInitialized(_this), "handleResizeStart", function () {
|
|
199
210
|
_this.setState({
|
|
200
211
|
isResizing: true
|
|
@@ -242,11 +253,20 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
|
|
|
242
253
|
width = _this$calculateSizeSt2.width,
|
|
243
254
|
height = _this$calculateSizeSt2.height,
|
|
244
255
|
calculatedWidthWithLayout = _this$calculateSizeSt2.calculatedWidthWithLayout;
|
|
245
|
-
_this.setIsResizing(false);
|
|
246
|
-
_this.displayGuideline([]);
|
|
247
256
|
if (dispatchAnalyticsEvent) {
|
|
248
|
-
|
|
257
|
+
var event = getMediaResizeAnalyticsEvent(nodeType || 'mediaSingle', {
|
|
258
|
+
width: width,
|
|
259
|
+
layout: calculatedWidthWithLayout.layout,
|
|
260
|
+
widthType: 'pixel',
|
|
261
|
+
snapType: getGuidelineTypeFromKey(_this.lastSnappedGuidelineKeys, _this.guidelines),
|
|
262
|
+
parentNode: _this.getParentNodeTypeNameFromCurrentPositionNode()
|
|
263
|
+
});
|
|
264
|
+
if (event) {
|
|
265
|
+
dispatchAnalyticsEvent(event);
|
|
266
|
+
}
|
|
249
267
|
}
|
|
268
|
+
_this.setIsResizing(false);
|
|
269
|
+
_this.displayGuideline([]);
|
|
250
270
|
_this.setState({
|
|
251
271
|
isResizing: false,
|
|
252
272
|
size: {
|
|
@@ -3,7 +3,7 @@ export var getMediaResizeAnalyticsEvent = function getMediaResizeAnalyticsEvent(
|
|
|
3
3
|
if (!attributes) {
|
|
4
4
|
return;
|
|
5
5
|
}
|
|
6
|
-
var
|
|
6
|
+
var width = attributes.width,
|
|
7
7
|
widthType = attributes.widthType,
|
|
8
8
|
layout = attributes.layout,
|
|
9
9
|
snapType = attributes.snapType,
|
|
@@ -14,7 +14,7 @@ export var getMediaResizeAnalyticsEvent = function getMediaResizeAnalyticsEvent(
|
|
|
14
14
|
actionSubject: actionSubject,
|
|
15
15
|
actionSubjectId: ACTION_SUBJECT_ID.RESIZED,
|
|
16
16
|
attributes: {
|
|
17
|
-
|
|
17
|
+
width: width,
|
|
18
18
|
layout: layout,
|
|
19
19
|
widthType: widthType,
|
|
20
20
|
snapType: snapType,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { createDefaultPreset } from './labs/next/presets/default';
|
package/dist/esm/version.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default as
|
|
1
|
+
export { default as ComposableEditor } from './editor-next';
|
|
@@ -18,6 +18,7 @@ export declare const resizerNextTestId = "mediaSingle.resizerNext.testid";
|
|
|
18
18
|
type ResizableMediaSingleNextProps = Props;
|
|
19
19
|
declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
|
|
20
20
|
private guidelines;
|
|
21
|
+
private lastSnappedGuidelineKeys;
|
|
21
22
|
constructor(props: ResizableMediaSingleNextProps);
|
|
22
23
|
/**
|
|
23
24
|
* Calculate media single node initial width if props.mediaSingleWidth is undefined
|
|
@@ -66,6 +67,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
|
|
|
66
67
|
};
|
|
67
68
|
};
|
|
68
69
|
selectCurrentMediaNode: () => void;
|
|
70
|
+
getParentNodeTypeNameFromCurrentPositionNode: () => string | undefined;
|
|
69
71
|
handleResizeStart: HandleResizeStart;
|
|
70
72
|
handleResize: HandleResize;
|
|
71
73
|
handleResizeStop: HandleResize;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { MediaEventPayload, MediaResizeTrackAction } from '@atlaskit/editor-common/analytics';
|
|
1
|
+
import type { MediaEventPayload, MediaResizeTrackAction } from '@atlaskit/editor-common/analytics';
|
|
2
2
|
export declare const getMediaResizeAnalyticsEvent: <T extends MediaResizeTrackAction>(type: string, attributes: T["attributes"]) => MediaEventPayload | void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { createDefaultPreset } from './labs/next/presets/default';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default as
|
|
1
|
+
export { default as ComposableEditor } from './editor-next';
|
package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts
CHANGED
|
@@ -18,6 +18,7 @@ export declare const resizerNextTestId = "mediaSingle.resizerNext.testid";
|
|
|
18
18
|
type ResizableMediaSingleNextProps = Props;
|
|
19
19
|
declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
|
|
20
20
|
private guidelines;
|
|
21
|
+
private lastSnappedGuidelineKeys;
|
|
21
22
|
constructor(props: ResizableMediaSingleNextProps);
|
|
22
23
|
/**
|
|
23
24
|
* Calculate media single node initial width if props.mediaSingleWidth is undefined
|
|
@@ -66,6 +67,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
|
|
|
66
67
|
};
|
|
67
68
|
};
|
|
68
69
|
selectCurrentMediaNode: () => void;
|
|
70
|
+
getParentNodeTypeNameFromCurrentPositionNode: () => string | undefined;
|
|
69
71
|
handleResizeStart: HandleResizeStart;
|
|
70
72
|
handleResize: HandleResize;
|
|
71
73
|
handleResizeStop: HandleResize;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { MediaEventPayload, MediaResizeTrackAction } from '@atlaskit/editor-common/analytics';
|
|
1
|
+
import type { MediaEventPayload, MediaResizeTrackAction } from '@atlaskit/editor-common/analytics';
|
|
2
2
|
export declare const getMediaResizeAnalyticsEvent: <T extends MediaResizeTrackAction>(type: string, attributes: T["attributes"]) => MediaEventPayload | void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { createDefaultPreset } from './labs/next/presets/default';
|
package/package.json
CHANGED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@atlaskit/editor-core/preset-default",
|
|
3
|
+
"main": "../dist/cjs/preset-default.js",
|
|
4
|
+
"module": "../dist/esm/preset-default.js",
|
|
5
|
+
"module:es2019": "../dist/es2019/preset-default.js",
|
|
6
|
+
"sideEffects": false,
|
|
7
|
+
"types": "../dist/types/preset-default.d.ts",
|
|
8
|
+
"typesVersions": {
|
|
9
|
+
">=4.5 <4.9": {
|
|
10
|
+
"*": [
|
|
11
|
+
"../dist/types-ts4.5/preset-default.d.ts"
|
|
12
|
+
]
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|