@atlaskit/editor-plugin-media 1.20.6 → 1.20.8

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.
Files changed (11) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/cjs/pm-plugins/alt-text/commands.js +6 -3
  3. package/dist/cjs/toolbar/commands.js +4 -3
  4. package/dist/cjs/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +2 -2
  5. package/dist/es2019/pm-plugins/alt-text/commands.js +6 -3
  6. package/dist/es2019/toolbar/commands.js +4 -3
  7. package/dist/es2019/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +3 -3
  8. package/dist/esm/pm-plugins/alt-text/commands.js +6 -3
  9. package/dist/esm/toolbar/commands.js +4 -3
  10. package/dist/esm/ui/ResizableMediaSingle/ResizableMediaSingleNext.js +3 -3
  11. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @atlaskit/editor-plugin-media
2
2
 
3
+ ## 1.20.8
4
+
5
+ ### Patch Changes
6
+
7
+ - [#106586](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/106586)
8
+ [`f3486a7d141c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f3486a7d141c) -
9
+ Update usage of akEditorGutterPadding to its dynamic version which can increase padding to support
10
+ editor drag and drop. Breakout logic is also updated to accommodate extra padding.
11
+ - [#107903](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107903)
12
+ [`adfd4df52e6d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/adfd4df52e6d) -
13
+ fix issue where selection was not being set correctly after changing media to inline
14
+ - Updated dependencies
15
+
16
+ ## 1.20.7
17
+
18
+ ### Patch Changes
19
+
20
+ - [#107716](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107716)
21
+ [`62ea5418666f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/62ea5418666f) -
22
+ ED-22554 fix selection position after updating alt text
23
+
3
24
  ## 1.20.6
4
25
 
5
26
  ### Patch Changes
package/dist/cjs/pm-plugins/alt-text/commands.js CHANGED
@@ -60,7 +60,10 @@ var updateAltTextTransform = exports.updateAltTextTransform = function updateAlt
60
60
  return function (tr, state) {
61
61
  var mediaNode = (0, _mediaCommon.getMediaSingleOrInlineNodeFromSelection)(state);
62
62
  if (mediaNode) {
63
- var pos = mediaNode.type === state.schema.nodes.media ? tr.selection.from + 1 : tr.selection.from;
63
+ // mediaSingle or mediaInline
64
+ var originalSelectionPos = tr.selection.from;
65
+ var mediaPos = mediaNode.type === state.schema.nodes.media ? originalSelectionPos + 1 // media inside mediaSingle
66
+ : originalSelectionPos; // mediaInline
64
67
 
65
68
  /**
66
69
  * Any changes to attributes of a node count the node as "recreated" in Prosemirror[1]
@@ -70,9 +73,9 @@ var updateAltTextTransform = exports.updateAltTextTransform = function updateAlt
70
73
  * [1] https://discuss.prosemirror.net/t/setnodemarkup-loses-current-nodeselection/976
71
74
  * [2] https://discuss.prosemirror.net/t/setnodemarkup-and-deselect/3673
72
75
  */
73
- tr.setMeta('scrollIntoView', false).setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, mediaNode.attrs), {}, {
76
+ tr.setMeta('scrollIntoView', false).setNodeMarkup(mediaPos, undefined, _objectSpread(_objectSpread({}, mediaNode.attrs), {}, {
74
77
  alt: newAltText
75
- })).setSelection(_state.NodeSelection.create(tr.doc, pos));
78
+ })).setSelection(_state.NodeSelection.create(tr.doc, originalSelectionPos));
76
79
  }
77
80
  return tr;
78
81
  };
package/dist/cjs/toolbar/commands.js CHANGED
@@ -108,9 +108,10 @@ var changeMediaCardToInline = exports.changeMediaCardToInline = function changeM
108
108
  var space = state.schema.text(' ');
109
109
  var content = _model.Fragment.from([mediaInlineNode, space]);
110
110
  var node = paragraph.createChecked({}, content);
111
- var nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
111
+ var nodePos = state.tr.doc.resolve(state.selection.from).start();
112
112
  var tr = (0, _utils2.removeMediaGroupNode)(state);
113
- tr = (0, _utils.safeInsert)(node, nodePos, false)(tr);
113
+ // Minus 1 to insert the node before the media group
114
+ tr = (0, _utils.safeInsert)(node, nodePos - 1, false)(tr);
114
115
  if (dispatch) {
115
116
  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
116
117
  action: _analytics.ACTION.CHANGED_TYPE,
@@ -121,7 +122,7 @@ var changeMediaCardToInline = exports.changeMediaCardToInline = function changeM
121
122
  previousType: _analytics.ACTION_SUBJECT_ID.MEDIA_GROUP
122
123
  }
123
124
  })(tr);
124
- var newSelection = _state.NodeSelection.create(tr.doc, state.selection.anchor);
125
+ var newSelection = _state.NodeSelection.create(tr.doc, nodePos);
125
126
  tr.setSelection(newSelection);
126
127
  forceFocusSelector === null || forceFocusSelector === void 0 || forceFocusSelector(".inline-appearance")(tr);
127
128
  dispatch(tr);
package/dist/cjs/ui/ResizableMediaSingle/ResizableMediaSingleNext.js CHANGED
@@ -95,11 +95,11 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
95
95
  if (width <= contentWidth) {
96
96
  return 'center';
97
97
  }
98
- if (width < Math.min(containerWidth - _editorSharedStyles.akEditorGutterPadding * 2, _editorSharedStyles.akEditorFullWidthLayoutWidth)) {
98
+ if (width < Math.min(containerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2, _editorSharedStyles.akEditorFullWidthLayoutWidth)) {
99
99
  return 'wide';
100
100
  }
101
101
 
102
- // set full width to be containerWidth - akEditorGutterPadding * 2
102
+ // set full width to be containerWidth - akEditorGutterPaddingDynamic() * 2
103
103
  // instead of containerWidth - akEditorBreakoutPadding,
104
104
  // so that we have image aligned with text
105
105
  return 'full-width';
package/dist/es2019/pm-plugins/alt-text/commands.js CHANGED
@@ -47,7 +47,10 @@ export const openMediaAltTextMenu = createCommandWithAnalytics(ACTION.OPENED, st
47
47
  export const updateAltTextTransform = newAltText => (tr, state) => {
48
48
  const mediaNode = getMediaSingleOrInlineNodeFromSelection(state);
49
49
  if (mediaNode) {
50
- const pos = mediaNode.type === state.schema.nodes.media ? tr.selection.from + 1 : tr.selection.from;
50
+ // mediaSingle or mediaInline
51
+ const originalSelectionPos = tr.selection.from;
52
+ const mediaPos = mediaNode.type === state.schema.nodes.media ? originalSelectionPos + 1 // media inside mediaSingle
53
+ : originalSelectionPos; // mediaInline
51
54
 
52
55
  /**
53
56
  * Any changes to attributes of a node count the node as "recreated" in Prosemirror[1]
@@ -57,10 +60,10 @@ export const updateAltTextTransform = newAltText => (tr, state) => {
57
60
  * [1] https://discuss.prosemirror.net/t/setnodemarkup-loses-current-nodeselection/976
58
61
  * [2] https://discuss.prosemirror.net/t/setnodemarkup-and-deselect/3673
59
62
  */
60
- tr.setMeta('scrollIntoView', false).setNodeMarkup(pos, undefined, {
63
+ tr.setMeta('scrollIntoView', false).setNodeMarkup(mediaPos, undefined, {
61
64
  ...mediaNode.attrs,
62
65
  alt: newAltText
63
- }).setSelection(NodeSelection.create(tr.doc, pos));
66
+ }).setSelection(NodeSelection.create(tr.doc, originalSelectionPos));
64
67
  }
65
68
  return tr;
66
69
  };
package/dist/es2019/toolbar/commands.js CHANGED
@@ -99,9 +99,10 @@ export const changeMediaCardToInline = (editorAnalyticsAPI, forceFocusSelector)
99
99
  const space = state.schema.text(' ');
100
100
  let content = Fragment.from([mediaInlineNode, space]);
101
101
  const node = paragraph.createChecked({}, content);
102
- const nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
102
+ const nodePos = state.tr.doc.resolve(state.selection.from).start();
103
103
  let tr = removeMediaGroupNode(state);
104
- tr = safeInsert(node, nodePos, false)(tr);
104
+ // Minus 1 to insert the node before the media group
105
+ tr = safeInsert(node, nodePos - 1, false)(tr);
105
106
  if (dispatch) {
106
107
  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
107
108
  action: ACTION.CHANGED_TYPE,
@@ -112,7 +113,7 @@ export const changeMediaCardToInline = (editorAnalyticsAPI, forceFocusSelector)
112
113
  previousType: ACTION_SUBJECT_ID.MEDIA_GROUP
113
114
  }
114
115
  })(tr);
115
- const newSelection = NodeSelection.create(tr.doc, state.selection.anchor);
116
+ const newSelection = NodeSelection.create(tr.doc, nodePos);
116
117
  tr.setSelection(newSelection);
117
118
  forceFocusSelector === null || forceFocusSelector === void 0 ? void 0 : forceFocusSelector(`.inline-appearance`)(tr);
118
119
  dispatch(tr);
package/dist/es2019/ui/ResizableMediaSingle/ResizableMediaSingleNext.js CHANGED
@@ -12,7 +12,7 @@ import { resizerStyles, richMediaClassName } from '@atlaskit/editor-common/style
12
12
  import { calcPctFromPx, handleSides, imageAlignmentMap, wrappedLayouts } from '@atlaskit/editor-common/ui';
13
13
  import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/utils';
14
14
  import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
15
- import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
15
+ import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
16
16
  import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
17
17
  import { getMediaResizeAnalyticsEvent } from '../../utils/analytics';
18
18
  import { checkMediaType } from '../../utils/check-media-type';
@@ -77,11 +77,11 @@ class ResizableMediaSingleNext extends React.Component {
77
77
  if (width <= contentWidth) {
78
78
  return 'center';
79
79
  }
80
- if (width < Math.min(containerWidth - akEditorGutterPadding * 2, akEditorFullWidthLayoutWidth)) {
80
+ if (width < Math.min(containerWidth - akEditorGutterPaddingDynamic() * 2, akEditorFullWidthLayoutWidth)) {
81
81
  return 'wide';
82
82
  }
83
83
 
84
- // set full width to be containerWidth - akEditorGutterPadding * 2
84
+ // set full width to be containerWidth - akEditorGutterPaddingDynamic() * 2
85
85
  // instead of containerWidth - akEditorBreakoutPadding,
86
86
  // so that we have image aligned with text
87
87
  return 'full-width';
package/dist/esm/pm-plugins/alt-text/commands.js CHANGED
@@ -53,7 +53,10 @@ export var updateAltTextTransform = function updateAltTextTransform(newAltText)
53
53
  return function (tr, state) {
54
54
  var mediaNode = getMediaSingleOrInlineNodeFromSelection(state);
55
55
  if (mediaNode) {
56
- var pos = mediaNode.type === state.schema.nodes.media ? tr.selection.from + 1 : tr.selection.from;
56
+ // mediaSingle or mediaInline
57
+ var originalSelectionPos = tr.selection.from;
58
+ var mediaPos = mediaNode.type === state.schema.nodes.media ? originalSelectionPos + 1 // media inside mediaSingle
59
+ : originalSelectionPos; // mediaInline
57
60
 
58
61
  /**
59
62
  * Any changes to attributes of a node count the node as "recreated" in Prosemirror[1]
@@ -63,9 +66,9 @@ export var updateAltTextTransform = function updateAltTextTransform(newAltText)
63
66
  * [1] https://discuss.prosemirror.net/t/setnodemarkup-loses-current-nodeselection/976
64
67
  * [2] https://discuss.prosemirror.net/t/setnodemarkup-and-deselect/3673
65
68
  */
66
- tr.setMeta('scrollIntoView', false).setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, mediaNode.attrs), {}, {
69
+ tr.setMeta('scrollIntoView', false).setNodeMarkup(mediaPos, undefined, _objectSpread(_objectSpread({}, mediaNode.attrs), {}, {
67
70
  alt: newAltText
68
- })).setSelection(NodeSelection.create(tr.doc, pos));
71
+ })).setSelection(NodeSelection.create(tr.doc, originalSelectionPos));
69
72
  }
70
73
  return tr;
71
74
  };
package/dist/esm/toolbar/commands.js CHANGED
@@ -101,9 +101,10 @@ export var changeMediaCardToInline = function changeMediaCardToInline(editorAnal
101
101
  var space = state.schema.text(' ');
102
102
  var content = Fragment.from([mediaInlineNode, space]);
103
103
  var node = paragraph.createChecked({}, content);
104
- var nodePos = state.tr.doc.resolve(state.selection.from).start() - 1;
104
+ var nodePos = state.tr.doc.resolve(state.selection.from).start();
105
105
  var tr = removeMediaGroupNode(state);
106
- tr = safeInsert(node, nodePos, false)(tr);
106
+ // Minus 1 to insert the node before the media group
107
+ tr = safeInsert(node, nodePos - 1, false)(tr);
107
108
  if (dispatch) {
108
109
  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
109
110
  action: ACTION.CHANGED_TYPE,
@@ -114,7 +115,7 @@ export var changeMediaCardToInline = function changeMediaCardToInline(editorAnal
114
115
  previousType: ACTION_SUBJECT_ID.MEDIA_GROUP
115
116
  }
116
117
  })(tr);
117
- var newSelection = NodeSelection.create(tr.doc, state.selection.anchor);
118
+ var newSelection = NodeSelection.create(tr.doc, nodePos);
118
119
  tr.setSelection(newSelection);
119
120
  forceFocusSelector === null || forceFocusSelector === void 0 || forceFocusSelector(".inline-appearance")(tr);
120
121
  dispatch(tr);
package/dist/esm/ui/ResizableMediaSingle/ResizableMediaSingleNext.js CHANGED
@@ -23,7 +23,7 @@ import { resizerStyles, richMediaClassName } from '@atlaskit/editor-common/style
23
23
  import { calcPctFromPx, handleSides, imageAlignmentMap, wrappedLayouts } from '@atlaskit/editor-common/ui';
24
24
  import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/utils';
25
25
  import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
26
- import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
26
+ import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
27
27
  import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
28
28
  import { getMediaResizeAnalyticsEvent } from '../../utils/analytics';
29
29
  import { checkMediaType } from '../../utils/check-media-type';
@@ -89,11 +89,11 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
89
89
  if (width <= contentWidth) {
90
90
  return 'center';
91
91
  }
92
- if (width < Math.min(containerWidth - akEditorGutterPadding * 2, akEditorFullWidthLayoutWidth)) {
92
+ if (width < Math.min(containerWidth - akEditorGutterPaddingDynamic() * 2, akEditorFullWidthLayoutWidth)) {
93
93
  return 'wide';
94
94
  }
95
95
 
96
- // set full width to be containerWidth - akEditorGutterPadding * 2
96
+ // set full width to be containerWidth - akEditorGutterPaddingDynamic() * 2
97
97
  // instead of containerWidth - akEditorBreakoutPadding,
98
98
  // so that we have image aligned with text
99
99
  return 'full-width';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media",
3
- "version": "1.20.6",
3
+ "version": "1.20.8",
4
4
  "description": "Media plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -37,10 +37,10 @@
37
37
  "@atlaskit/analytics-namespaced-context": "^6.9.0",
38
38
  "@atlaskit/analytics-next": "^9.3.0",
39
39
  "@atlaskit/button": "^17.17.0",
40
- "@atlaskit/editor-common": "^81.2.0",
40
+ "@atlaskit/editor-common": "^82.0.0",
41
41
  "@atlaskit/editor-palette": "1.6.0",
42
42
  "@atlaskit/editor-plugin-analytics": "^1.2.0",
43
- "@atlaskit/editor-plugin-annotation": "1.9.4",
43
+ "@atlaskit/editor-plugin-annotation": "1.9.5",
44
44
  "@atlaskit/editor-plugin-decorations": "^1.1.0",
45
45
  "@atlaskit/editor-plugin-editor-disabled": "^1.1.0",
46
46
  "@atlaskit/editor-plugin-editor-viewmode": "^1.1.0",
@@ -51,11 +51,11 @@
51
51
  "@atlaskit/editor-plugin-selection": "^1.2.0",
52
52
  "@atlaskit/editor-plugin-width": "^1.1.0",
53
53
  "@atlaskit/editor-prosemirror": "4.0.1",
54
- "@atlaskit/editor-shared-styles": "^2.11.0",
54
+ "@atlaskit/editor-shared-styles": "^2.12.0",
55
55
  "@atlaskit/editor-tables": "^2.7.0",
56
56
  "@atlaskit/form": "^10.3.0",
57
57
  "@atlaskit/icon": "^22.3.0",
58
- "@atlaskit/media-card": "^77.11.0",
58
+ "@atlaskit/media-card": "^77.12.0",
59
59
  "@atlaskit/media-client": "^27.2.0",
60
60
  "@atlaskit/media-client-react": "^2.0.0",
61
61
  "@atlaskit/media-common": "^11.2.0",