@atlaskit/editor-core 189.3.13 → 189.3.15

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 (167) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/create-editor/ErrorBoundary.js +1 -1
  3. package/dist/cjs/nodeviews/getInlineNodeViewProducer.styles.js +1 -1
  4. package/dist/cjs/plugins/analytics/index.js +0 -6
  5. package/dist/cjs/plugins/analytics/utils.js +0 -29
  6. package/dist/cjs/plugins/breakout/index.js +3 -3
  7. package/dist/cjs/plugins/breakout/ui/LayoutButton.js +4 -4
  8. package/dist/cjs/plugins/find-replace/FindReplaceToolbarButtonWithState.js +32 -30
  9. package/dist/cjs/plugins/find-replace/commands-with-analytics.js +85 -71
  10. package/dist/cjs/plugins/find-replace/index.js +5 -2
  11. package/dist/cjs/plugins/find-replace/keymap.js +4 -4
  12. package/dist/cjs/plugins/index.js +1 -24
  13. package/dist/cjs/plugins/mobile-dimensions/index.js +6 -0
  14. package/dist/cjs/presets/context.js +5 -3
  15. package/dist/cjs/presets/universal.js +14 -4
  16. package/dist/cjs/ui/Appearance/Chromeless.js +18 -9
  17. package/dist/cjs/ui/Appearance/Comment/Comment.js +1 -1
  18. package/dist/cjs/ui/Appearance/FullPage/FullPageToolbar.js +3 -2
  19. package/dist/cjs/ui/AppearanceComponents/Mobile.js +7 -9
  20. package/dist/cjs/{plugins/expand/ui/styles.js → ui/ContentStyles/expand.js} +11 -8
  21. package/dist/cjs/ui/ContentStyles/index.js +4 -4
  22. package/dist/cjs/ui/ToolbarFeedback/index.js +1 -1
  23. package/dist/cjs/use-preset.js +0 -1
  24. package/dist/cjs/version-wrapper.js +1 -1
  25. package/dist/es2019/create-editor/ErrorBoundary.js +0 -2
  26. package/dist/es2019/nodeviews/getInlineNodeViewProducer.styles.js +1 -1
  27. package/dist/es2019/plugins/analytics/index.js +1 -1
  28. package/dist/es2019/plugins/analytics/utils.js +0 -24
  29. package/dist/es2019/plugins/breakout/index.js +1 -1
  30. package/dist/es2019/plugins/breakout/ui/LayoutButton.js +1 -1
  31. package/dist/es2019/plugins/find-replace/FindReplaceToolbarButtonWithState.js +20 -19
  32. package/dist/es2019/plugins/find-replace/commands-with-analytics.js +15 -15
  33. package/dist/es2019/plugins/find-replace/index.js +7 -2
  34. package/dist/es2019/plugins/find-replace/keymap.js +4 -4
  35. package/dist/es2019/plugins/index.js +0 -2
  36. package/dist/es2019/plugins/mobile-dimensions/index.js +6 -0
  37. package/dist/es2019/presets/context.js +2 -2
  38. package/dist/es2019/presets/universal.js +11 -1
  39. package/dist/es2019/ui/Appearance/Chromeless.js +17 -9
  40. package/dist/es2019/ui/Appearance/Comment/Comment.js +1 -1
  41. package/dist/es2019/ui/Appearance/FullPage/FullPageToolbar.js +3 -2
  42. package/dist/es2019/ui/AppearanceComponents/Mobile.js +8 -9
  43. package/dist/es2019/{plugins/expand/ui/styles.js → ui/ContentStyles/expand.js} +9 -4
  44. package/dist/es2019/ui/ContentStyles/index.js +1 -1
  45. package/dist/es2019/ui/ToolbarFeedback/index.js +2 -2
  46. package/dist/es2019/use-preset.js +0 -1
  47. package/dist/es2019/version-wrapper.js +1 -1
  48. package/dist/esm/create-editor/ErrorBoundary.js +0 -2
  49. package/dist/esm/nodeviews/getInlineNodeViewProducer.styles.js +1 -1
  50. package/dist/esm/plugins/analytics/index.js +1 -1
  51. package/dist/esm/plugins/analytics/utils.js +0 -28
  52. package/dist/esm/plugins/breakout/index.js +1 -1
  53. package/dist/esm/plugins/breakout/ui/LayoutButton.js +1 -1
  54. package/dist/esm/plugins/find-replace/FindReplaceToolbarButtonWithState.js +32 -30
  55. package/dist/esm/plugins/find-replace/commands-with-analytics.js +84 -70
  56. package/dist/esm/plugins/find-replace/index.js +5 -2
  57. package/dist/esm/plugins/find-replace/keymap.js +4 -4
  58. package/dist/esm/plugins/index.js +0 -2
  59. package/dist/esm/plugins/mobile-dimensions/index.js +6 -0
  60. package/dist/esm/presets/context.js +2 -2
  61. package/dist/esm/presets/universal.js +10 -1
  62. package/dist/esm/ui/Appearance/Chromeless.js +15 -9
  63. package/dist/esm/ui/Appearance/Comment/Comment.js +1 -1
  64. package/dist/esm/ui/Appearance/FullPage/FullPageToolbar.js +3 -2
  65. package/dist/esm/ui/AppearanceComponents/Mobile.js +7 -9
  66. package/dist/esm/{plugins/expand/ui/styles.js → ui/ContentStyles/expand.js} +9 -4
  67. package/dist/esm/ui/ContentStyles/index.js +1 -1
  68. package/dist/esm/ui/ToolbarFeedback/index.js +1 -1
  69. package/dist/esm/use-preset.js +0 -1
  70. package/dist/esm/version-wrapper.js +1 -1
  71. package/dist/types/plugins/analytics/index.d.ts +1 -1
  72. package/dist/types/plugins/analytics/utils.d.ts +0 -11
  73. package/dist/types/plugins/find-replace/FindReplaceToolbarButtonWithState.d.ts +4 -2
  74. package/dist/types/plugins/find-replace/commands-with-analytics.d.ts +9 -9
  75. package/dist/types/plugins/find-replace/index.d.ts +5 -3
  76. package/dist/types/plugins/find-replace/keymap.d.ts +2 -1
  77. package/dist/types/plugins/index.d.ts +0 -2
  78. package/dist/types/plugins/insert-block/types.d.ts +1 -1
  79. package/dist/types/plugins/mobile-dimensions/index.d.ts +5 -1
  80. package/dist/types/presets/context.d.ts +2 -2
  81. package/dist/types/presets/universal.d.ts +5 -0
  82. package/dist/types/ui/Appearance/Chromeless.d.ts +1 -1
  83. package/dist/types/{plugins/expand/ui/styles.d.ts → ui/ContentStyles/expand.d.ts} +1 -1
  84. package/dist/types-ts4.5/plugins/analytics/index.d.ts +1 -1
  85. package/dist/types-ts4.5/plugins/analytics/utils.d.ts +0 -11
  86. package/dist/types-ts4.5/plugins/find-replace/FindReplaceToolbarButtonWithState.d.ts +4 -2
  87. package/dist/types-ts4.5/plugins/find-replace/commands-with-analytics.d.ts +9 -9
  88. package/dist/types-ts4.5/plugins/find-replace/index.d.ts +6 -3
  89. package/dist/types-ts4.5/plugins/find-replace/keymap.d.ts +2 -1
  90. package/dist/types-ts4.5/plugins/index.d.ts +0 -2
  91. package/dist/types-ts4.5/plugins/insert-block/types.d.ts +1 -1
  92. package/dist/types-ts4.5/plugins/mobile-dimensions/index.d.ts +5 -1
  93. package/dist/types-ts4.5/presets/context.d.ts +2 -2
  94. package/dist/types-ts4.5/presets/universal.d.ts +5 -0
  95. package/dist/types-ts4.5/ui/Appearance/Chromeless.d.ts +1 -1
  96. package/dist/types-ts4.5/{plugins/expand/ui/styles.d.ts → ui/ContentStyles/expand.d.ts} +1 -1
  97. package/package.json +6 -9
  98. package/dist/cjs/plugins/breakout/constants.js +0 -10
  99. package/dist/cjs/plugins/expand/commands.js +0 -184
  100. package/dist/cjs/plugins/expand/index.js +0 -111
  101. package/dist/cjs/plugins/expand/nodeviews/index.js +0 -485
  102. package/dist/cjs/plugins/expand/pm-plugins/keymap.js +0 -171
  103. package/dist/cjs/plugins/expand/pm-plugins/main.js +0 -85
  104. package/dist/cjs/plugins/expand/pm-plugins/plugin-factory.js +0 -15
  105. package/dist/cjs/plugins/expand/reducer.js +0 -20
  106. package/dist/cjs/plugins/expand/toolbar.js +0 -59
  107. package/dist/cjs/plugins/expand/types.js +0 -5
  108. package/dist/cjs/plugins/expand/ui/ExpandIconButton.js +0 -104
  109. package/dist/cjs/plugins/expand/ui/class-names.js +0 -20
  110. package/dist/cjs/plugins/expand/utils.js +0 -24
  111. package/dist/cjs/plugins/max-content-size/index.js +0 -44
  112. package/dist/es2019/plugins/breakout/constants.js +0 -4
  113. package/dist/es2019/plugins/expand/commands.js +0 -161
  114. package/dist/es2019/plugins/expand/index.js +0 -95
  115. package/dist/es2019/plugins/expand/nodeviews/index.js +0 -475
  116. package/dist/es2019/plugins/expand/pm-plugins/keymap.js +0 -197
  117. package/dist/es2019/plugins/expand/pm-plugins/main.js +0 -73
  118. package/dist/es2019/plugins/expand/pm-plugins/plugin-factory.js +0 -9
  119. package/dist/es2019/plugins/expand/reducer.js +0 -11
  120. package/dist/es2019/plugins/expand/toolbar.js +0 -52
  121. package/dist/es2019/plugins/expand/types.js +0 -1
  122. package/dist/es2019/plugins/expand/ui/ExpandIconButton.js +0 -85
  123. package/dist/es2019/plugins/expand/ui/class-names.js +0 -12
  124. package/dist/es2019/plugins/expand/utils.js +0 -1
  125. package/dist/es2019/plugins/max-content-size/index.js +0 -35
  126. package/dist/esm/plugins/breakout/constants.js +0 -4
  127. package/dist/esm/plugins/expand/commands.js +0 -177
  128. package/dist/esm/plugins/expand/index.js +0 -97
  129. package/dist/esm/plugins/expand/nodeviews/index.js +0 -477
  130. package/dist/esm/plugins/expand/pm-plugins/keymap.js +0 -165
  131. package/dist/esm/plugins/expand/pm-plugins/main.js +0 -77
  132. package/dist/esm/plugins/expand/pm-plugins/plugin-factory.js +0 -9
  133. package/dist/esm/plugins/expand/reducer.js +0 -13
  134. package/dist/esm/plugins/expand/toolbar.js +0 -52
  135. package/dist/esm/plugins/expand/types.js +0 -1
  136. package/dist/esm/plugins/expand/ui/ExpandIconButton.js +0 -95
  137. package/dist/esm/plugins/expand/ui/class-names.js +0 -14
  138. package/dist/esm/plugins/expand/utils.js +0 -1
  139. package/dist/esm/plugins/max-content-size/index.js +0 -37
  140. package/dist/types/plugins/breakout/constants.d.ts +0 -4
  141. package/dist/types/plugins/expand/commands.d.ts +0 -13
  142. package/dist/types/plugins/expand/index.d.ts +0 -31
  143. package/dist/types/plugins/expand/nodeviews/index.d.ts +0 -55
  144. package/dist/types/plugins/expand/pm-plugins/keymap.d.ts +0 -4
  145. package/dist/types/plugins/expand/pm-plugins/main.d.ts +0 -8
  146. package/dist/types/plugins/expand/pm-plugins/plugin-factory.d.ts +0 -3
  147. package/dist/types/plugins/expand/reducer.d.ts +0 -3
  148. package/dist/types/plugins/expand/toolbar.d.ts +0 -3
  149. package/dist/types/plugins/expand/types.d.ts +0 -9
  150. package/dist/types/plugins/expand/ui/ExpandIconButton.d.ts +0 -43
  151. package/dist/types/plugins/expand/ui/class-names.d.ts +0 -11
  152. package/dist/types/plugins/expand/utils.d.ts +0 -1
  153. package/dist/types/plugins/max-content-size/index.d.ts +0 -13
  154. package/dist/types-ts4.5/plugins/breakout/constants.d.ts +0 -4
  155. package/dist/types-ts4.5/plugins/expand/commands.d.ts +0 -13
  156. package/dist/types-ts4.5/plugins/expand/index.d.ts +0 -31
  157. package/dist/types-ts4.5/plugins/expand/nodeviews/index.d.ts +0 -55
  158. package/dist/types-ts4.5/plugins/expand/pm-plugins/keymap.d.ts +0 -4
  159. package/dist/types-ts4.5/plugins/expand/pm-plugins/main.d.ts +0 -8
  160. package/dist/types-ts4.5/plugins/expand/pm-plugins/plugin-factory.d.ts +0 -3
  161. package/dist/types-ts4.5/plugins/expand/reducer.d.ts +0 -3
  162. package/dist/types-ts4.5/plugins/expand/toolbar.d.ts +0 -3
  163. package/dist/types-ts4.5/plugins/expand/types.d.ts +0 -9
  164. package/dist/types-ts4.5/plugins/expand/ui/ExpandIconButton.d.ts +0 -43
  165. package/dist/types-ts4.5/plugins/expand/ui/class-names.d.ts +0 -11
  166. package/dist/types-ts4.5/plugins/expand/utils.d.ts +0 -1
  167. package/dist/types-ts4.5/plugins/max-content-size/index.d.ts +0 -13
@@ -1,475 +0,0 @@
1
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- import React from 'react';
3
- import ReactDOM from 'react-dom';
4
- import { Selection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
5
- import { ExpandIconButton } from '../ui/ExpandIconButton';
6
- import { keyName } from 'w3c-keyname';
7
- import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
8
- import { expandMessages } from '@atlaskit/editor-common/ui';
9
- import { isEmptyNode } from '../../../utils';
10
- import { updateExpandTitle, toggleExpandExpanded, deleteExpandAtPos, setSelectionInsideExpand } from '../commands';
11
- import { expandClassNames } from '../ui/class-names';
12
- import { GapCursorSelection, Side, RelativeSelectionPos } from '@atlaskit/editor-common/selection';
13
- import { closestElement } from '../../../utils/dom';
14
- function buildExpandClassName(type, expanded) {
15
- return `${expandClassNames.prefix} ${expandClassNames.type(type)} ${expanded ? expandClassNames.expanded : ''}`;
16
- }
17
- const toDOM = (node, intl) => ['div', {
18
- // prettier-ignore
19
- 'class': buildExpandClassName(node.type.name, node.attrs.__expanded),
20
- 'data-node-type': node.type.name,
21
- 'data-title': node.attrs.title
22
- }, ['div', {
23
- // prettier-ignore
24
- 'class': expandClassNames.titleContainer,
25
- contenteditable: 'false',
26
- // Element gains access to focus events.
27
- // This is needed to prevent PM gaining access
28
- // on interacting with our controls.
29
- tabindex: '-1'
30
- },
31
- // prettier-ignore
32
- ['div', {
33
- 'class': expandClassNames.icon
34
- }], ['div', {
35
- // prettier-ignore
36
- 'class': expandClassNames.inputContainer
37
- }, ['input', {
38
- // prettier-ignore
39
- 'class': expandClassNames.titleInput,
40
- value: node.attrs.title,
41
- placeholder: intl && intl.formatMessage(expandMessages.expandPlaceholderText) || expandMessages.expandPlaceholderText.defaultMessage,
42
- type: 'text'
43
- }]]],
44
- // prettier-ignore
45
- ['div', {
46
- 'class': expandClassNames.content
47
- }, 0]];
48
- export class ExpandNodeView {
49
- constructor(node, view, getPos, getIntl, isMobile, featureFlags, selectNearNode, api) {
50
- _defineProperty(this, "allowInteractiveExpand", true);
51
- _defineProperty(this, "isMobile", false);
52
- _defineProperty(this, "focusTitle", () => {
53
- if (this.input) {
54
- const {
55
- state,
56
- dispatch
57
- } = this.view;
58
- if (this.selectNearNode) {
59
- const tr = this.selectNearNode({
60
- selectionRelativeToNode: RelativeSelectionPos.Start
61
- })(state);
62
- if (dispatch) {
63
- dispatch(tr);
64
- }
65
- }
66
- const pos = this.getPos();
67
- if (typeof pos === 'number') {
68
- setSelectionInsideExpand(pos)(state, dispatch, this.view);
69
- }
70
- this.input.focus();
71
- }
72
- });
73
- _defineProperty(this, "handleIconKeyDown", event => {
74
- switch (keyName(event)) {
75
- case 'Tab':
76
- event.preventDefault();
77
- this.focusTitle();
78
- break;
79
- case 'Enter':
80
- event.preventDefault();
81
- this.handleClick(event);
82
- break;
83
- }
84
- });
85
- _defineProperty(this, "isAllowInteractiveExpandEnabled", () => {
86
- return this.featureFlags && !!this.featureFlags.interactiveExpand;
87
- });
88
- _defineProperty(this, "handleClick", event => {
89
- const pos = this.getPos();
90
- if (typeof pos !== 'number') {
91
- return;
92
- }
93
- const target = event.target;
94
- const {
95
- state,
96
- dispatch
97
- } = this.view;
98
- if (closestElement(target, `.${expandClassNames.icon}`)) {
99
- var _this$api, _this$api$analytics;
100
- if (!this.isAllowInteractiveExpandEnabled()) {
101
- return;
102
- }
103
- event.stopPropagation();
104
-
105
- // We blur the editorView, to prevent any keyboard showing on mobile
106
- // When we're interacting with the expand toggle
107
- if (this.view.dom instanceof HTMLElement) {
108
- this.view.dom.blur();
109
- }
110
- toggleExpandExpanded((_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$analytics = _this$api.analytics) === null || _this$api$analytics === void 0 ? void 0 : _this$api$analytics.actions)(pos, this.node.type)(state, dispatch);
111
- return;
112
- }
113
- if (target === this.input) {
114
- event.stopPropagation();
115
- this.focusTitle();
116
- return;
117
- }
118
- });
119
- _defineProperty(this, "handleInput", event => {
120
- const pos = this.getPos();
121
- if (typeof pos !== 'number') {
122
- return;
123
- }
124
- const target = event.target;
125
- if (target === this.input) {
126
- event.stopPropagation();
127
- const {
128
- state,
129
- dispatch
130
- } = this.view;
131
- updateExpandTitle(target.value, pos, this.node.type)(state, dispatch);
132
- }
133
- });
134
- _defineProperty(this, "handleFocus", event => {
135
- event.stopImmediatePropagation();
136
- });
137
- _defineProperty(this, "handleTitleKeydown", event => {
138
- switch (keyName(event)) {
139
- case 'Enter':
140
- this.toggleExpand();
141
- break;
142
- case 'Tab':
143
- case 'ArrowDown':
144
- this.moveToOutsideOfTitle(event);
145
- break;
146
- case 'ArrowRight':
147
- this.handleArrowRightFromTitle(event);
148
- break;
149
- case 'ArrowLeft':
150
- this.handleArrowLeftFromTitle(event);
151
- break;
152
- case 'ArrowUp':
153
- this.setLeftGapCursor(event);
154
- break;
155
- case 'Backspace':
156
- this.deleteExpand(event);
157
- break;
158
- }
159
- });
160
- _defineProperty(this, "deleteExpand", event => {
161
- if (!this.input) {
162
- return;
163
- }
164
- const pos = this.getPos();
165
- if (typeof pos !== 'number') {
166
- return;
167
- }
168
- const {
169
- selectionStart,
170
- selectionEnd
171
- } = this.input;
172
- if (selectionStart !== selectionEnd || selectionStart !== 0) {
173
- return;
174
- }
175
- const {
176
- state
177
- } = this.view;
178
- const expandNode = this.node;
179
- if (expandNode && isEmptyNode(state.schema)(expandNode)) {
180
- var _this$api2, _this$api2$analytics;
181
- deleteExpandAtPos((_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$analytics = _this$api2.analytics) === null || _this$api2$analytics === void 0 ? void 0 : _this$api2$analytics.actions)(pos, expandNode)(state, this.view.dispatch);
182
- }
183
- });
184
- _defineProperty(this, "toggleExpand", () => {
185
- const pos = this.getPos();
186
- if (typeof pos !== 'number') {
187
- return;
188
- }
189
- if (this.isAllowInteractiveExpandEnabled()) {
190
- var _this$api3, _this$api3$analytics;
191
- const {
192
- state,
193
- dispatch
194
- } = this.view;
195
- toggleExpandExpanded((_this$api3 = this.api) === null || _this$api3 === void 0 ? void 0 : (_this$api3$analytics = _this$api3.analytics) === null || _this$api3$analytics === void 0 ? void 0 : _this$api3$analytics.actions)(pos, this.node.type)(state, dispatch);
196
- }
197
- });
198
- _defineProperty(this, "moveToOutsideOfTitle", event => {
199
- event.preventDefault();
200
- const {
201
- state,
202
- dispatch
203
- } = this.view;
204
- const expandPos = this.getPos();
205
- if (typeof expandPos !== 'number') {
206
- return;
207
- }
208
- let pos = expandPos;
209
- if (this.isCollapsed()) {
210
- pos = expandPos + this.node.nodeSize;
211
- }
212
- const resolvedPos = state.doc.resolve(pos);
213
- if (!resolvedPos) {
214
- return;
215
- }
216
- if (this.isCollapsed() && resolvedPos.nodeAfter && ['expand', 'nestedExpand'].indexOf(resolvedPos.nodeAfter.type.name) > -1) {
217
- return this.setRightGapCursor(event);
218
- }
219
- const sel = Selection.findFrom(resolvedPos, 1, true);
220
- if (sel) {
221
- // If the input has focus, ProseMirror doesn't
222
- // Give PM focus back before changing our selection
223
- this.view.focus();
224
- dispatch(state.tr.setSelection(sel));
225
- }
226
- });
227
- _defineProperty(this, "isCollapsed", () => {
228
- return !this.node.attrs.__expanded;
229
- });
230
- _defineProperty(this, "setRightGapCursor", event => {
231
- if (!this.input) {
232
- return;
233
- }
234
- const pos = this.getPos();
235
- if (typeof pos !== 'number') {
236
- return;
237
- }
238
- const {
239
- value,
240
- selectionStart,
241
- selectionEnd
242
- } = this.input;
243
- if (selectionStart === selectionEnd && selectionStart === value.length) {
244
- const {
245
- state,
246
- dispatch
247
- } = this.view;
248
- event.preventDefault();
249
- this.view.focus();
250
- dispatch(state.tr.setSelection(new GapCursorSelection(state.doc.resolve(this.node.nodeSize + pos), Side.RIGHT)));
251
- }
252
- });
253
- _defineProperty(this, "setLeftGapCursor", event => {
254
- if (!this.input) {
255
- return;
256
- }
257
- const pos = this.getPos();
258
- if (typeof pos !== 'number') {
259
- return;
260
- }
261
- const {
262
- selectionStart,
263
- selectionEnd
264
- } = this.input;
265
- if (selectionStart === selectionEnd && selectionStart === 0) {
266
- event.preventDefault();
267
- const {
268
- state,
269
- dispatch
270
- } = this.view;
271
- this.view.focus();
272
- dispatch(state.tr.setSelection(new GapCursorSelection(state.doc.resolve(pos), Side.LEFT)));
273
- }
274
- });
275
- _defineProperty(this, "handleArrowRightFromTitle", event => {
276
- if (!this.input || !this.selectNearNode) {
277
- return;
278
- }
279
- const pos = this.getPos();
280
- if (typeof pos !== 'number') {
281
- return;
282
- }
283
- const {
284
- value,
285
- selectionStart,
286
- selectionEnd
287
- } = this.input;
288
- if (selectionStart === selectionEnd && selectionStart === value.length) {
289
- event.preventDefault();
290
- const {
291
- state,
292
- dispatch
293
- } = this.view;
294
- this.view.focus();
295
- const tr = this.selectNearNode({
296
- selectionRelativeToNode: RelativeSelectionPos.End,
297
- selection: NodeSelection.create(state.doc, pos)
298
- })(state);
299
- if (dispatch) {
300
- dispatch(tr);
301
- }
302
- }
303
- });
304
- _defineProperty(this, "handleArrowLeftFromTitle", event => {
305
- if (!this.input || !this.selectNearNode) {
306
- return;
307
- }
308
- const pos = this.getPos();
309
- if (typeof pos !== 'number') {
310
- return;
311
- }
312
- const {
313
- selectionStart,
314
- selectionEnd
315
- } = this.input;
316
- if (selectionStart === selectionEnd && selectionStart === 0) {
317
- var _this$api4, _this$api4$selection;
318
- event.preventDefault();
319
- const {
320
- state,
321
- dispatch
322
- } = this.view;
323
- this.view.focus();
324
- const selectionSharedState = ((_this$api4 = this.api) === null || _this$api4 === void 0 ? void 0 : (_this$api4$selection = _this$api4.selection) === null || _this$api4$selection === void 0 ? void 0 : _this$api4$selection.sharedState.currentState()) || {};
325
- // selectionRelativeToNode is undefined when user clicked to select node, then hit left to get focus in title
326
- // This is a special case where we want to bypass node selection and jump straight to gap cursor
327
- if ((selectionSharedState === null || selectionSharedState === void 0 ? void 0 : selectionSharedState.selectionRelativeToNode) === undefined) {
328
- const tr = this.selectNearNode({
329
- selectionRelativeToNode: undefined,
330
- selection: new GapCursorSelection(state.doc.resolve(pos), Side.LEFT)
331
- })(state);
332
- if (dispatch) {
333
- dispatch(tr);
334
- }
335
- } else {
336
- const tr = this.selectNearNode({
337
- selectionRelativeToNode: RelativeSelectionPos.Start,
338
- selection: NodeSelection.create(state.doc, pos)
339
- })(state);
340
- if (dispatch) {
341
- dispatch(tr);
342
- }
343
- }
344
- }
345
- });
346
- this.selectNearNode = selectNearNode;
347
- this.intl = getIntl();
348
- const {
349
- dom,
350
- contentDOM
351
- } = DOMSerializer.renderSpec(document, toDOM(node, this.intl));
352
- this.getPos = getPos;
353
- this.view = view;
354
- this.node = node;
355
- this.dom = dom;
356
- this.contentDOM = contentDOM;
357
- this.isMobile = isMobile;
358
- this.featureFlags = featureFlags;
359
- this.api = api;
360
- this.icon = this.dom.querySelector(`.${expandClassNames.icon}`);
361
- this.input = this.dom.querySelector(`.${expandClassNames.titleInput}`);
362
- this.titleContainer = this.dom.querySelector(`.${expandClassNames.titleContainer}`);
363
- this.content = this.dom.querySelector(`.${expandClassNames.content}`);
364
- this.renderIcon(this.intl);
365
- this.initHandlers();
366
- }
367
- initHandlers() {
368
- if (this.dom) {
369
- this.dom.addEventListener('click', this.handleClick);
370
- this.dom.addEventListener('input', this.handleInput);
371
- }
372
- if (this.input) {
373
- this.input.addEventListener('keydown', this.handleTitleKeydown);
374
- }
375
- if (this.titleContainer) {
376
- // If the user interacts in our title bar (either toggle or input)
377
- // Prevent ProseMirror from getting a focus event (causes weird selection issues).
378
- this.titleContainer.addEventListener('focus', this.handleFocus);
379
- }
380
- if (this.icon) {
381
- this.icon.addEventListener('keydown', this.handleIconKeyDown);
382
- }
383
- }
384
- renderIcon(intl, node) {
385
- if (!this.icon) {
386
- return;
387
- }
388
- const {
389
- __expanded
390
- } = node && node.attrs || this.node.attrs;
391
- ReactDOM.render( /*#__PURE__*/React.createElement(ExpandIconButton, {
392
- intl: intl,
393
- allowInteractiveExpand: this.isAllowInteractiveExpandEnabled(),
394
- expanded: __expanded
395
- }), this.icon);
396
- }
397
- stopEvent(event) {
398
- const target = event.target;
399
- return target === this.input || target === this.icon || !!closestElement(target, `.${expandClassNames.icon}`);
400
- }
401
- ignoreMutation(mutationRecord) {
402
- // ME-1931: Mobile relies on composition which creates dom mutations. If we ignore them, prosemirror
403
- // does not recognise the changes and reverts them.
404
- if (this.isMobile && (mutationRecord.type === 'characterData' || mutationRecord.type === 'childList')) {
405
- return false;
406
- }
407
- if (mutationRecord.type === 'selection') {
408
- return false;
409
- }
410
- return true;
411
- }
412
- update(node, _decorations) {
413
- if (this.node.type === node.type) {
414
- if (this.node.attrs.__expanded !== node.attrs.__expanded) {
415
- // Instead of re-rendering the view on an expand toggle
416
- // we toggle a class name to hide the content and animate the chevron.
417
- if (this.dom) {
418
- this.dom.classList.toggle(expandClassNames.expanded);
419
- this.renderIcon(this && this.intl, node);
420
- }
421
- if (this.content) {
422
- // Disallow interaction/selection inside when collapsed.
423
- this.content.setAttribute('contenteditable', node.attrs.__expanded);
424
- }
425
- }
426
-
427
- // During a collab session the title doesn't sync with other users
428
- // since we're intentionally being less aggressive about re-rendering.
429
- // We also apply a rAF to avoid abrupt continuous replacement of the title.
430
- window.requestAnimationFrame(() => {
431
- if (this.input && this.node.attrs.title !== this.input.value) {
432
- this.input.value = this.node.attrs.title;
433
- }
434
- });
435
- this.node = node;
436
- return true;
437
- }
438
- return false;
439
- }
440
- destroy() {
441
- if (this.dom) {
442
- this.dom.removeEventListener('click', this.handleClick);
443
- this.dom.removeEventListener('input', this.handleInput);
444
- }
445
- if (this.input) {
446
- this.input.removeEventListener('keydown', this.handleTitleKeydown);
447
- }
448
- if (this.titleContainer) {
449
- this.titleContainer.removeEventListener('focus', this.handleFocus);
450
- }
451
- if (this.icon) {
452
- this.icon.removeEventListener('keydown', this.handleIconKeyDown);
453
- ReactDOM.unmountComponentAtNode(this.icon);
454
- }
455
-
456
- // @ts-ignore - [unblock prosemirror bump] reset non optional prop to undefined to clear reference
457
- this.dom = undefined;
458
- this.contentDOM = undefined;
459
- this.icon = undefined;
460
- this.input = undefined;
461
- this.titleContainer = undefined;
462
- this.content = undefined;
463
- }
464
- }
465
- export default function ({
466
- getIntl,
467
- isMobile,
468
- featureFlags,
469
- api
470
- }) {
471
- return (node, view, getPos) => {
472
- var _api$selection, _api$selection$action;
473
- return new ExpandNodeView(node, view, getPos, getIntl, isMobile, featureFlags, api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : (_api$selection$action = _api$selection.actions) === null || _api$selection$action === void 0 ? void 0 : _api$selection$action.selectNearNode, api);
474
- };
475
- }
@@ -1,197 +0,0 @@
1
- import { keymap } from '@atlaskit/editor-prosemirror/keymap';
2
- import { Selection, TextSelection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
3
- import { bindKeymapWithCommand, moveRight, moveLeft, moveUp, moveDown, tab, backspace } from '@atlaskit/editor-common/keymaps';
4
- import { GapCursorSelection, Side, RelativeSelectionPos } from '@atlaskit/editor-common/selection';
5
- import { findExpand } from '../utils';
6
- import { isEmptyNode } from '../../../utils';
7
- import { expandClassNames } from '../ui/class-names';
8
- import { deleteExpand, focusTitle } from '../commands';
9
- import { isPositionNearTableRow } from '@atlaskit/editor-common/utils';
10
- const isExpandNode = node => {
11
- return (node === null || node === void 0 ? void 0 : node.type.name) === 'expand' || (node === null || node === void 0 ? void 0 : node.type.name) === 'nestedExpand';
12
- };
13
- const isExpandSelected = selection => selection instanceof NodeSelection && isExpandNode(selection.node);
14
- export function expandKeymap(api) {
15
- const list = {};
16
- bindKeymapWithCommand(moveRight.common, (state, dispatch, editorView) => {
17
- if (!editorView) {
18
- return false;
19
- }
20
- const {
21
- selection
22
- } = state;
23
- const selectionSharedState = (api === null || api === void 0 ? void 0 : api.selection.sharedState.currentState()) || {};
24
- const {
25
- selectionRelativeToNode
26
- } = selectionSharedState;
27
- if (isExpandSelected(selection) && selectionRelativeToNode === RelativeSelectionPos.Start) {
28
- return focusTitle(selection.from + 1)(state, dispatch, editorView);
29
- }
30
- return false;
31
- }, list);
32
- bindKeymapWithCommand(moveLeft.common, (state, dispatch, editorView) => {
33
- if (!editorView) {
34
- return false;
35
- }
36
- const {
37
- selection
38
- } = state;
39
- const selectionSharedState = (api === null || api === void 0 ? void 0 : api.selection.sharedState.currentState()) || {};
40
- const {
41
- selectionRelativeToNode
42
- } = selectionSharedState;
43
- if (isExpandSelected(selection) && (selectionRelativeToNode === undefined || selectionRelativeToNode === RelativeSelectionPos.End)) {
44
- return focusTitle(selection.from + 1)(state, dispatch, editorView);
45
- }
46
- return false;
47
- }, list);
48
- bindKeymapWithCommand(tab.common, (state, dispatch, editorView) => {
49
- if (state.selection instanceof NodeSelection && state.selection.node.type === state.schema.nodes.expand && editorView && editorView.dom instanceof HTMLElement) {
50
- const {
51
- from
52
- } = state.selection;
53
- const expand = editorView.nodeDOM(from);
54
- if (!expand || !(expand instanceof HTMLElement)) {
55
- return false;
56
- }
57
- const iconContainer = expand.querySelector(`.${expandClassNames.iconContainer}`);
58
- if (iconContainer && iconContainer.focus) {
59
- const {
60
- tr
61
- } = state;
62
- const pos = state.selection.from;
63
- tr.setSelection(new TextSelection(tr.doc.resolve(pos)));
64
- if (dispatch) {
65
- dispatch(tr);
66
- }
67
- editorView.dom.blur();
68
- iconContainer.focus();
69
- }
70
- return true;
71
- }
72
- return false;
73
- }, list);
74
- bindKeymapWithCommand(moveUp.common, (state, dispatch, editorView) => {
75
- if (!editorView) {
76
- return false;
77
- }
78
- const {
79
- selection,
80
- schema
81
- } = state;
82
- const {
83
- nodeBefore
84
- } = selection.$from;
85
- if (selection instanceof GapCursorSelection && selection.side === Side.RIGHT && nodeBefore && (nodeBefore.type === schema.nodes.expand || nodeBefore.type === schema.nodes.nestedExpand) && !nodeBefore.attrs.__expanded) {
86
- const {
87
- $from
88
- } = selection;
89
- return focusTitle(Math.max($from.pos - 1, 0))(state, dispatch, editorView);
90
- }
91
- const {
92
- $from
93
- } = state.selection;
94
- if (editorView.endOfTextblock('up')) {
95
- const expand = findExpand(state);
96
-
97
- // Moving UP in a table should move the cursor to the row above
98
- // however when an expand is in a table cell to the left of the
99
- // current table cell, arrow UP moves the cursor to the left
100
- // see ED-15425
101
- if (isPositionNearTableRow($from, schema, 'before') && !expand) {
102
- return false;
103
- }
104
- const prevCursorPos = Math.max($from.pos - $from.parentOffset - 1, 0);
105
- // move cursor from expand's content to its title
106
- if (expand && expand.start === prevCursorPos) {
107
- return focusTitle(expand.start)(state, dispatch, editorView);
108
- }
109
- const sel = Selection.findFrom(state.doc.resolve(prevCursorPos), -1);
110
- const expandBefore = findExpand(state, sel);
111
- if (sel && expandBefore) {
112
- // moving cursor from outside of an expand to the title when it is collapsed
113
- if (!expandBefore.node.attrs.__expanded) {
114
- return focusTitle(expandBefore.start)(state, dispatch, editorView);
115
- }
116
- // moving cursor from outside of an expand to the content when it is expanded
117
- else if (dispatch) {
118
- dispatch(state.tr.setSelection(sel));
119
- }
120
- return true;
121
- }
122
- }
123
- return false;
124
- }, list);
125
- bindKeymapWithCommand(moveDown.common, (state, dispatch, editorView) => {
126
- if (!editorView) {
127
- return false;
128
- }
129
- const {
130
- expand,
131
- nestedExpand
132
- } = state.schema.nodes;
133
- const {
134
- selection
135
- } = state;
136
- const {
137
- nodeAfter
138
- } = selection.$from;
139
- if (selection instanceof GapCursorSelection && selection.side === Side.LEFT && nodeAfter && (nodeAfter.type === expand || nodeAfter.type === nestedExpand) && !nodeAfter.attrs.__expanded) {
140
- const {
141
- $from
142
- } = selection;
143
- return focusTitle($from.pos + 1)(state, dispatch, editorView);
144
- }
145
- if (editorView.endOfTextblock('down')) {
146
- const {
147
- $from
148
- } = state.selection;
149
- if ($from.depth === 0) {
150
- return false;
151
- }
152
- const $after = state.doc.resolve($from.after());
153
- if ($after.nodeAfter && ($after.nodeAfter.type === expand || $after.nodeAfter.type === nestedExpand)) {
154
- return focusTitle($after.pos + 1)(state, dispatch, editorView);
155
- }
156
- }
157
- return false;
158
- }, list);
159
- bindKeymapWithCommand(backspace.common, (state, dispatch, editorView) => {
160
- const {
161
- selection
162
- } = state;
163
- const {
164
- $from
165
- } = selection;
166
- if (!editorView || !selection.empty) {
167
- return false;
168
- }
169
- const {
170
- expand,
171
- nestedExpand
172
- } = state.schema.nodes;
173
- const expandNode = findExpand(state);
174
- if (!expandNode) {
175
- // @see ED-7977
176
- const sel = Selection.findFrom(state.doc.resolve(Math.max(selection.$from.pos - 1, 0)), -1);
177
- const expandBefore = findExpand(state, sel);
178
- if (expandBefore && (expandBefore.node.type === expand || expandBefore.node.type === nestedExpand) && !expandBefore.node.attrs.__expanded) {
179
- return focusTitle(expandBefore.start)(state, dispatch, editorView);
180
- }
181
- return false;
182
- }
183
- const parentNode = state.doc.nodeAt($from.before(Math.max($from.depth - 1, 1)));
184
- // ED-10012 catch cases where the expand has another node nested within it and
185
- // the backspace should be applied only to the inner node instead of the expand
186
- if (parentNode && !isExpandNode(parentNode)) {
187
- return false;
188
- }
189
- const textSel = Selection.findFrom(state.doc.resolve(expandNode.pos), 1, true);
190
- if (textSel && selection.$from.pos === textSel.$from.pos && isEmptyNode(state.schema)(expandNode.node) && dispatch) {
191
- var _api$analytics;
192
- return deleteExpand(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(state, dispatch);
193
- }
194
- return false;
195
- }, list);
196
- return keymap(list);
197
- }