@atlaskit/editor-core 189.3.14 → 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.
- package/CHANGELOG.md +10 -0
- package/dist/cjs/nodeviews/getInlineNodeViewProducer.styles.js +1 -1
- package/dist/cjs/plugins/analytics/index.js +0 -6
- package/dist/cjs/plugins/analytics/utils.js +0 -29
- package/dist/cjs/plugins/breakout/index.js +3 -3
- package/dist/cjs/plugins/breakout/ui/LayoutButton.js +4 -4
- package/dist/cjs/plugins/find-replace/FindReplaceToolbarButtonWithState.js +32 -30
- package/dist/cjs/plugins/find-replace/commands-with-analytics.js +85 -71
- package/dist/cjs/plugins/find-replace/index.js +5 -2
- package/dist/cjs/plugins/find-replace/keymap.js +4 -4
- package/dist/cjs/plugins/index.js +1 -17
- package/dist/cjs/presets/context.js +5 -3
- package/dist/cjs/presets/universal.js +12 -3
- package/dist/cjs/ui/Appearance/Comment/Comment.js +1 -1
- package/dist/cjs/ui/Appearance/FullPage/FullPageToolbar.js +3 -2
- package/dist/cjs/{plugins/expand/ui/styles.js → ui/ContentStyles/expand.js} +11 -8
- package/dist/cjs/ui/ContentStyles/index.js +4 -4
- package/dist/cjs/ui/ToolbarFeedback/index.js +1 -1
- package/dist/cjs/use-preset.js +0 -1
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/nodeviews/getInlineNodeViewProducer.styles.js +1 -1
- package/dist/es2019/plugins/analytics/index.js +1 -1
- package/dist/es2019/plugins/analytics/utils.js +0 -24
- package/dist/es2019/plugins/breakout/index.js +1 -1
- package/dist/es2019/plugins/breakout/ui/LayoutButton.js +1 -1
- package/dist/es2019/plugins/find-replace/FindReplaceToolbarButtonWithState.js +20 -19
- package/dist/es2019/plugins/find-replace/commands-with-analytics.js +15 -15
- package/dist/es2019/plugins/find-replace/index.js +7 -2
- package/dist/es2019/plugins/find-replace/keymap.js +4 -4
- package/dist/es2019/plugins/index.js +0 -1
- package/dist/es2019/presets/context.js +2 -2
- package/dist/es2019/presets/universal.js +10 -1
- package/dist/es2019/ui/Appearance/Comment/Comment.js +1 -1
- package/dist/es2019/ui/Appearance/FullPage/FullPageToolbar.js +3 -2
- package/dist/es2019/{plugins/expand/ui/styles.js → ui/ContentStyles/expand.js} +9 -4
- package/dist/es2019/ui/ContentStyles/index.js +1 -1
- package/dist/es2019/ui/ToolbarFeedback/index.js +2 -2
- package/dist/es2019/use-preset.js +0 -1
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/nodeviews/getInlineNodeViewProducer.styles.js +1 -1
- package/dist/esm/plugins/analytics/index.js +1 -1
- package/dist/esm/plugins/analytics/utils.js +0 -28
- package/dist/esm/plugins/breakout/index.js +1 -1
- package/dist/esm/plugins/breakout/ui/LayoutButton.js +1 -1
- package/dist/esm/plugins/find-replace/FindReplaceToolbarButtonWithState.js +32 -30
- package/dist/esm/plugins/find-replace/commands-with-analytics.js +84 -70
- package/dist/esm/plugins/find-replace/index.js +5 -2
- package/dist/esm/plugins/find-replace/keymap.js +4 -4
- package/dist/esm/plugins/index.js +0 -1
- package/dist/esm/presets/context.js +2 -2
- package/dist/esm/presets/universal.js +9 -1
- package/dist/esm/ui/Appearance/Comment/Comment.js +1 -1
- package/dist/esm/ui/Appearance/FullPage/FullPageToolbar.js +3 -2
- package/dist/esm/{plugins/expand/ui/styles.js → ui/ContentStyles/expand.js} +9 -4
- package/dist/esm/ui/ContentStyles/index.js +1 -1
- package/dist/esm/ui/ToolbarFeedback/index.js +1 -1
- package/dist/esm/use-preset.js +0 -1
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/plugins/analytics/index.d.ts +1 -1
- package/dist/types/plugins/analytics/utils.d.ts +0 -11
- package/dist/types/plugins/find-replace/FindReplaceToolbarButtonWithState.d.ts +4 -2
- package/dist/types/plugins/find-replace/commands-with-analytics.d.ts +9 -9
- package/dist/types/plugins/find-replace/index.d.ts +5 -3
- package/dist/types/plugins/find-replace/keymap.d.ts +2 -1
- package/dist/types/plugins/index.d.ts +0 -1
- package/dist/types/plugins/insert-block/types.d.ts +1 -1
- package/dist/types/plugins/mobile-dimensions/index.d.ts +2 -1
- package/dist/types/presets/context.d.ts +2 -2
- package/dist/types/presets/universal.d.ts +5 -0
- package/dist/types/{plugins/expand/ui/styles.d.ts → ui/ContentStyles/expand.d.ts} +1 -1
- package/dist/types-ts4.5/plugins/analytics/index.d.ts +1 -1
- package/dist/types-ts4.5/plugins/analytics/utils.d.ts +0 -11
- package/dist/types-ts4.5/plugins/find-replace/FindReplaceToolbarButtonWithState.d.ts +4 -2
- package/dist/types-ts4.5/plugins/find-replace/commands-with-analytics.d.ts +9 -9
- package/dist/types-ts4.5/plugins/find-replace/index.d.ts +6 -3
- package/dist/types-ts4.5/plugins/find-replace/keymap.d.ts +2 -1
- package/dist/types-ts4.5/plugins/index.d.ts +0 -1
- package/dist/types-ts4.5/plugins/insert-block/types.d.ts +1 -1
- package/dist/types-ts4.5/plugins/mobile-dimensions/index.d.ts +2 -1
- package/dist/types-ts4.5/presets/context.d.ts +2 -2
- package/dist/types-ts4.5/presets/universal.d.ts +5 -0
- package/dist/types-ts4.5/{plugins/expand/ui/styles.d.ts → ui/ContentStyles/expand.d.ts} +1 -1
- package/package.json +3 -7
- package/dist/cjs/plugins/breakout/constants.js +0 -10
- package/dist/cjs/plugins/expand/commands.js +0 -184
- package/dist/cjs/plugins/expand/index.js +0 -111
- package/dist/cjs/plugins/expand/nodeviews/index.js +0 -485
- package/dist/cjs/plugins/expand/pm-plugins/keymap.js +0 -171
- package/dist/cjs/plugins/expand/pm-plugins/main.js +0 -85
- package/dist/cjs/plugins/expand/pm-plugins/plugin-factory.js +0 -15
- package/dist/cjs/plugins/expand/reducer.js +0 -20
- package/dist/cjs/plugins/expand/toolbar.js +0 -59
- package/dist/cjs/plugins/expand/types.js +0 -5
- package/dist/cjs/plugins/expand/ui/ExpandIconButton.js +0 -104
- package/dist/cjs/plugins/expand/ui/class-names.js +0 -20
- package/dist/cjs/plugins/expand/utils.js +0 -24
- package/dist/es2019/plugins/breakout/constants.js +0 -4
- package/dist/es2019/plugins/expand/commands.js +0 -161
- package/dist/es2019/plugins/expand/index.js +0 -95
- package/dist/es2019/plugins/expand/nodeviews/index.js +0 -475
- package/dist/es2019/plugins/expand/pm-plugins/keymap.js +0 -197
- package/dist/es2019/plugins/expand/pm-plugins/main.js +0 -73
- package/dist/es2019/plugins/expand/pm-plugins/plugin-factory.js +0 -9
- package/dist/es2019/plugins/expand/reducer.js +0 -11
- package/dist/es2019/plugins/expand/toolbar.js +0 -52
- package/dist/es2019/plugins/expand/types.js +0 -1
- package/dist/es2019/plugins/expand/ui/ExpandIconButton.js +0 -85
- package/dist/es2019/plugins/expand/ui/class-names.js +0 -12
- package/dist/es2019/plugins/expand/utils.js +0 -1
- package/dist/esm/plugins/breakout/constants.js +0 -4
- package/dist/esm/plugins/expand/commands.js +0 -177
- package/dist/esm/plugins/expand/index.js +0 -97
- package/dist/esm/plugins/expand/nodeviews/index.js +0 -477
- package/dist/esm/plugins/expand/pm-plugins/keymap.js +0 -165
- package/dist/esm/plugins/expand/pm-plugins/main.js +0 -77
- package/dist/esm/plugins/expand/pm-plugins/plugin-factory.js +0 -9
- package/dist/esm/plugins/expand/reducer.js +0 -13
- package/dist/esm/plugins/expand/toolbar.js +0 -52
- package/dist/esm/plugins/expand/types.js +0 -1
- package/dist/esm/plugins/expand/ui/ExpandIconButton.js +0 -95
- package/dist/esm/plugins/expand/ui/class-names.js +0 -14
- package/dist/esm/plugins/expand/utils.js +0 -1
- package/dist/types/plugins/breakout/constants.d.ts +0 -4
- package/dist/types/plugins/expand/commands.d.ts +0 -13
- package/dist/types/plugins/expand/index.d.ts +0 -31
- package/dist/types/plugins/expand/nodeviews/index.d.ts +0 -55
- package/dist/types/plugins/expand/pm-plugins/keymap.d.ts +0 -4
- package/dist/types/plugins/expand/pm-plugins/main.d.ts +0 -8
- package/dist/types/plugins/expand/pm-plugins/plugin-factory.d.ts +0 -3
- package/dist/types/plugins/expand/reducer.d.ts +0 -3
- package/dist/types/plugins/expand/toolbar.d.ts +0 -3
- package/dist/types/plugins/expand/types.d.ts +0 -9
- package/dist/types/plugins/expand/ui/ExpandIconButton.d.ts +0 -43
- package/dist/types/plugins/expand/ui/class-names.d.ts +0 -11
- package/dist/types/plugins/expand/utils.d.ts +0 -1
- package/dist/types-ts4.5/plugins/breakout/constants.d.ts +0 -4
- package/dist/types-ts4.5/plugins/expand/commands.d.ts +0 -13
- package/dist/types-ts4.5/plugins/expand/index.d.ts +0 -31
- package/dist/types-ts4.5/plugins/expand/nodeviews/index.d.ts +0 -55
- package/dist/types-ts4.5/plugins/expand/pm-plugins/keymap.d.ts +0 -4
- package/dist/types-ts4.5/plugins/expand/pm-plugins/main.d.ts +0 -8
- package/dist/types-ts4.5/plugins/expand/pm-plugins/plugin-factory.d.ts +0 -3
- package/dist/types-ts4.5/plugins/expand/reducer.d.ts +0 -3
- package/dist/types-ts4.5/plugins/expand/toolbar.d.ts +0 -3
- package/dist/types-ts4.5/plugins/expand/types.d.ts +0 -9
- package/dist/types-ts4.5/plugins/expand/ui/ExpandIconButton.d.ts +0 -43
- package/dist/types-ts4.5/plugins/expand/ui/class-names.d.ts +0 -11
- package/dist/types-ts4.5/plugins/expand/utils.d.ts +0 -1
|
@@ -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
|
-
}
|