@atlaskit/editor-plugin-base 0.3.3 → 0.3.5
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 +13 -0
- package/dist/cjs/plugin.js +2 -13
- package/dist/cjs/pm-plugins/frozen-editor.js +217 -214
- package/dist/cjs/pm-plugins/scroll-gutter/index.js +5 -5
- package/dist/es2019/plugin.js +2 -12
- package/dist/es2019/pm-plugins/frozen-editor.js +13 -14
- package/dist/es2019/pm-plugins/scroll-gutter/index.js +5 -5
- package/dist/esm/plugin.js +2 -13
- package/dist/esm/pm-plugins/frozen-editor.js +217 -214
- package/dist/esm/pm-plugins/scroll-gutter/index.js +5 -5
- package/dist/types/plugin.d.ts +5 -3
- package/dist/types/pm-plugins/frozen-editor.d.ts +3 -2
- package/dist/types-ts4.5/plugin.d.ts +3 -3
- package/dist/types-ts4.5/pm-plugins/frozen-editor.d.ts +3 -2
- package/package.json +5 -10
- package/tsconfig.app.json +2 -2
- package/dist/cjs/pm-plugins/context-identifier.js +0 -55
- package/dist/cjs/pm-plugins/scroll-gutter/plugin-deprecated.js +0 -262
- package/dist/es2019/pm-plugins/context-identifier.js +0 -43
- package/dist/es2019/pm-plugins/scroll-gutter/plugin-deprecated.js +0 -244
- package/dist/esm/pm-plugins/context-identifier.js +0 -48
- package/dist/esm/pm-plugins/scroll-gutter/plugin-deprecated.js +0 -256
- package/dist/types/pm-plugins/context-identifier.d.ts +0 -12
- package/dist/types/pm-plugins/scroll-gutter/plugin-deprecated.d.ts +0 -22
- package/dist/types-ts4.5/pm-plugins/context-identifier.d.ts +0 -12
- package/dist/types-ts4.5/pm-plugins/scroll-gutter/plugin-deprecated.d.ts +0 -22
package/tsconfig.app.json
CHANGED
|
@@ -36,10 +36,10 @@
|
|
|
36
36
|
"path": "../editor-common/tsconfig.app.json"
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
|
-
"path": "../editor-plugin-
|
|
39
|
+
"path": "../editor-plugin-context-identifier/tsconfig.app.json"
|
|
40
40
|
},
|
|
41
41
|
{
|
|
42
|
-
"path": "
|
|
42
|
+
"path": "../editor-plugin-feature-flags/tsconfig.app.json"
|
|
43
43
|
}
|
|
44
44
|
]
|
|
45
45
|
}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.stateKey = exports.getContextIdentifier = exports.default = void 0;
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
-
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
10
|
-
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
11
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
12
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
13
|
-
var stateKey = exports.stateKey = new _state.PluginKey('contextIdentiferPlugin');
|
|
14
|
-
var getContextIdentifier = exports.getContextIdentifier = function getContextIdentifier(state) {
|
|
15
|
-
if (state) {
|
|
16
|
-
var _stateKey$getState;
|
|
17
|
-
return (_stateKey$getState = stateKey.getState(state)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.contextIdentifierProvider;
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
var _default = exports.default = function _default(dispatch, providerFactory) {
|
|
21
|
-
return new _safePlugin.SafePlugin({
|
|
22
|
-
key: stateKey,
|
|
23
|
-
state: {
|
|
24
|
-
init: function init() {
|
|
25
|
-
return {};
|
|
26
|
-
},
|
|
27
|
-
apply: function apply(tr, pluginState) {
|
|
28
|
-
if (tr.getMeta(stateKey)) {
|
|
29
|
-
return tr.getMeta(stateKey);
|
|
30
|
-
}
|
|
31
|
-
return pluginState;
|
|
32
|
-
}
|
|
33
|
-
},
|
|
34
|
-
view: function view(_view) {
|
|
35
|
-
var providerPromiseHandler = function providerPromiseHandler(name, providerPromise) {
|
|
36
|
-
if (providerPromise && name === 'contextIdentifierProvider') {
|
|
37
|
-
providerPromise.then(function (provider) {
|
|
38
|
-
var tr = _view.state.tr.setMeta(stateKey, {
|
|
39
|
-
contextIdentifierProvider: _objectSpread({}, provider)
|
|
40
|
-
});
|
|
41
|
-
_view.dispatch(tr);
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
if (providerFactory) {
|
|
46
|
-
providerFactory.subscribe('contextIdentifierProvider', providerPromiseHandler);
|
|
47
|
-
}
|
|
48
|
-
return {
|
|
49
|
-
destroy: function destroy() {
|
|
50
|
-
providerFactory && providerFactory.unsubscribe('contextIdentifierProvider', providerPromiseHandler);
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
}
|
|
54
|
-
});
|
|
55
|
-
};
|
|
@@ -1,262 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.getKeyboardHeight = exports.default = void 0;
|
|
7
|
-
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
8
|
-
var _utils = require("@atlaskit/editor-common/utils");
|
|
9
|
-
var _pluginKey = require("./plugin-key");
|
|
10
|
-
var getKeyboardHeight = exports.getKeyboardHeight = function getKeyboardHeight(state) {
|
|
11
|
-
if (state) {
|
|
12
|
-
var scrollGutterPluginState = (0, _pluginKey.getScrollGutterPluginState)(state);
|
|
13
|
-
return scrollGutterPluginState ? scrollGutterPluginState.keyboardHeight : undefined;
|
|
14
|
-
}
|
|
15
|
-
};
|
|
16
|
-
var MIN_TAP_SIZE_IN_PX = 40;
|
|
17
|
-
function supportsIntersectionObserver() {
|
|
18
|
-
if (typeof window !== 'undefined' && 'IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in
|
|
19
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
20
|
-
window.IntersectionObserverEntry.prototype) {
|
|
21
|
-
return true;
|
|
22
|
-
}
|
|
23
|
-
return false;
|
|
24
|
-
}
|
|
25
|
-
function listenForGutterVisibilityChanges(scrollElement, gutterIsVisible) {
|
|
26
|
-
if (supportsIntersectionObserver()) {
|
|
27
|
-
var observer = new IntersectionObserver(function (entries, _) {
|
|
28
|
-
entries.forEach(function (entry) {
|
|
29
|
-
gutterIsVisible(entry.intersectionRatio > 0);
|
|
30
|
-
});
|
|
31
|
-
}, {
|
|
32
|
-
root: scrollElement,
|
|
33
|
-
rootMargin: '0px',
|
|
34
|
-
threshold: 0
|
|
35
|
-
});
|
|
36
|
-
return observer;
|
|
37
|
-
}
|
|
38
|
-
return undefined;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
/**
|
|
42
|
-
* Create a gutter element that can be added or removed from the DOM.
|
|
43
|
-
*/
|
|
44
|
-
function createGutter(gutterSize) {
|
|
45
|
-
var gutter = document.createElement('div');
|
|
46
|
-
gutter.style.paddingBottom = "".concat(gutterSize, "px");
|
|
47
|
-
gutter.id = _utils.GUTTER_SELECTOR.substr(1);
|
|
48
|
-
var initialized = false;
|
|
49
|
-
var mounted = false;
|
|
50
|
-
var currentParent = null;
|
|
51
|
-
var observer;
|
|
52
|
-
var isVisible = false;
|
|
53
|
-
return {
|
|
54
|
-
addGutter: function addGutter(parent) {
|
|
55
|
-
if (parent) {
|
|
56
|
-
currentParent = parent;
|
|
57
|
-
parent.appendChild(gutter);
|
|
58
|
-
mounted = true;
|
|
59
|
-
if (observer) {
|
|
60
|
-
observer.observe(gutter);
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
removeGutter: function removeGutter() {
|
|
65
|
-
if (currentParent && mounted) {
|
|
66
|
-
mounted = false;
|
|
67
|
-
currentParent.removeChild(gutter);
|
|
68
|
-
if (observer) {
|
|
69
|
-
observer.unobserve(gutter);
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
},
|
|
73
|
-
element: function element() {
|
|
74
|
-
return gutter;
|
|
75
|
-
},
|
|
76
|
-
isMounted: function isMounted() {
|
|
77
|
-
return mounted;
|
|
78
|
-
},
|
|
79
|
-
visible: function visible() {
|
|
80
|
-
// If we know whether it's visible we can avoid expensive calculations
|
|
81
|
-
if (observer) {
|
|
82
|
-
return isVisible;
|
|
83
|
-
}
|
|
84
|
-
// Fallback for legacy browsers assumes it's visible (if mounted)
|
|
85
|
-
return mounted;
|
|
86
|
-
},
|
|
87
|
-
observe: function observe(scrollElement) {
|
|
88
|
-
if (!initialized) {
|
|
89
|
-
initialized = true;
|
|
90
|
-
observer = listenForGutterVisibilityChanges(scrollElement, function (visible) {
|
|
91
|
-
return isVisible = visible;
|
|
92
|
-
});
|
|
93
|
-
}
|
|
94
|
-
},
|
|
95
|
-
destroy: function destroy() {
|
|
96
|
-
if (observer) {
|
|
97
|
-
observer.disconnect();
|
|
98
|
-
}
|
|
99
|
-
observer = undefined;
|
|
100
|
-
this.removeGutter();
|
|
101
|
-
initialized = mounted = false;
|
|
102
|
-
}
|
|
103
|
-
};
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
/**
|
|
107
|
-
* Get caret top position given the current selection,
|
|
108
|
-
* use start container position as fallback
|
|
109
|
-
*/
|
|
110
|
-
function getCaretTopPosition() {
|
|
111
|
-
var windowSelection = window.getSelection();
|
|
112
|
-
if (windowSelection && windowSelection.rangeCount > 0) {
|
|
113
|
-
var range = windowSelection.getRangeAt(0);
|
|
114
|
-
if (range) {
|
|
115
|
-
var clientRects = range.getClientRects();
|
|
116
|
-
// Return client rects
|
|
117
|
-
if (clientRects && clientRects.length > 0) {
|
|
118
|
-
return clientRects[0].top;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
// Return container top
|
|
122
|
-
var container = range.startContainer;
|
|
123
|
-
if (container && container.getBoundingClientRect) {
|
|
124
|
-
return container.getBoundingClientRect().top;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
return;
|
|
129
|
-
}
|
|
130
|
-
function scrollToGutterElement(scrollContainer, gutterElement, gutterSize) {
|
|
131
|
-
var viewportHeight = scrollContainer.offsetHeight;
|
|
132
|
-
var viewportOffsetY = scrollContainer.getBoundingClientRect().top;
|
|
133
|
-
var caretTopPosition = getCaretTopPosition();
|
|
134
|
-
if (!caretTopPosition) {
|
|
135
|
-
return false;
|
|
136
|
-
}
|
|
137
|
-
var caretTopFromContainer = caretTopPosition - viewportOffsetY;
|
|
138
|
-
var gutterThresholdTop = viewportHeight - gutterSize - MIN_TAP_SIZE_IN_PX * 2;
|
|
139
|
-
if (caretTopFromContainer < gutterThresholdTop) {
|
|
140
|
-
return false;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
// Clamp the scroll position to above the scroll gutter element.
|
|
144
|
-
gutterElement.scrollIntoView(false);
|
|
145
|
-
|
|
146
|
-
// Mark scrolling as handled so that other plugin's don't override our position.
|
|
147
|
-
return true;
|
|
148
|
-
}
|
|
149
|
-
var _default = exports.default = function _default() {
|
|
150
|
-
var pluginOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
151
|
-
var getScrollElement = pluginOptions.getScrollElement,
|
|
152
|
-
allowCustomScrollHandler = pluginOptions.allowCustomScrollHandler,
|
|
153
|
-
_pluginOptions$gutter = pluginOptions.gutterSize,
|
|
154
|
-
gutterSize = _pluginOptions$gutter === void 0 ? _utils.GUTTER_SIZE_IN_PX : _pluginOptions$gutter;
|
|
155
|
-
if (!getScrollElement) {
|
|
156
|
-
return undefined;
|
|
157
|
-
}
|
|
158
|
-
var gutter = createGutter(gutterSize);
|
|
159
|
-
var scrollElement = null; // | undefined;
|
|
160
|
-
|
|
161
|
-
return new _safePlugin.SafePlugin({
|
|
162
|
-
key: _pluginKey.scrollGutterPluginKey,
|
|
163
|
-
state: {
|
|
164
|
-
init: function init() {
|
|
165
|
-
return {};
|
|
166
|
-
},
|
|
167
|
-
apply: function apply(tr, pluginState) {
|
|
168
|
-
if (tr.getMeta(_pluginKey.scrollGutterPluginKey)) {
|
|
169
|
-
return tr.getMeta(_pluginKey.scrollGutterPluginKey);
|
|
170
|
-
}
|
|
171
|
-
return pluginState;
|
|
172
|
-
}
|
|
173
|
-
},
|
|
174
|
-
props: {
|
|
175
|
-
// Determines the distance (in pixels) between the cursor and the end of the visible viewport at which point,
|
|
176
|
-
// when scrolling the cursor into view, scrolling takes place.
|
|
177
|
-
// Defaults to 0: https://prosemirror.net/docs/ref/#view.EditorProps.scrollThreshold
|
|
178
|
-
scrollThreshold: gutterSize / 2,
|
|
179
|
-
// Determines the extra space (in pixels) that is left above or below the cursor when it is scrolled into view.
|
|
180
|
-
// Defaults to 5: https://prosemirror.net/docs/ref/#view.EditorProps.scrollMargin
|
|
181
|
-
scrollMargin: gutterSize,
|
|
182
|
-
// Called when the view, after updating its state, tries to scroll the selection into view
|
|
183
|
-
// https://prosemirror.net/docs/ref/#view.EditorProps.handleScrollToSelection
|
|
184
|
-
handleScrollToSelection: function handleScrollToSelection() {
|
|
185
|
-
if (allowCustomScrollHandler === false) {
|
|
186
|
-
return false;
|
|
187
|
-
}
|
|
188
|
-
if (!gutter.isMounted() || !gutter.visible() || !scrollElement) {
|
|
189
|
-
// Avoid scrolling until applicable
|
|
190
|
-
return false;
|
|
191
|
-
}
|
|
192
|
-
return scrollToGutterElement(scrollElement, gutter.element(), gutterSize);
|
|
193
|
-
}
|
|
194
|
-
},
|
|
195
|
-
view: function (_view) {
|
|
196
|
-
function view(_x) {
|
|
197
|
-
return _view.apply(this, arguments);
|
|
198
|
-
}
|
|
199
|
-
view.toString = function () {
|
|
200
|
-
return _view.toString();
|
|
201
|
-
};
|
|
202
|
-
return view;
|
|
203
|
-
}(function (view) {
|
|
204
|
-
// Store references to avoid lookups on successive checks.
|
|
205
|
-
scrollElement = getScrollElement(view);
|
|
206
|
-
var editorElement = view.dom;
|
|
207
|
-
var editorParentElement = editorElement.parentElement;
|
|
208
|
-
return {
|
|
209
|
-
destroy: function destroy() {
|
|
210
|
-
// Remove if it's mounted
|
|
211
|
-
gutter.destroy();
|
|
212
|
-
scrollElement = editorParentElement = editorElement = null;
|
|
213
|
-
},
|
|
214
|
-
/**
|
|
215
|
-
* Toggle the Scroll Gutter Element
|
|
216
|
-
*/
|
|
217
|
-
update: function update(view, prevState) {
|
|
218
|
-
var _getKeyboardHeight;
|
|
219
|
-
if (!scrollElement || !editorParentElement) {
|
|
220
|
-
return;
|
|
221
|
-
}
|
|
222
|
-
var state = view.state;
|
|
223
|
-
if (prevState.selection === state.selection) {
|
|
224
|
-
// No need to recheck if the selected node hasn't changed.
|
|
225
|
-
return;
|
|
226
|
-
}
|
|
227
|
-
var gutterMounted = gutter.isMounted();
|
|
228
|
-
var addAndObserveGutter = function addAndObserveGutter() {
|
|
229
|
-
if (!gutterMounted) {
|
|
230
|
-
gutter.observe(scrollElement);
|
|
231
|
-
gutter.addGutter(editorParentElement);
|
|
232
|
-
}
|
|
233
|
-
};
|
|
234
|
-
if (pluginOptions.persistScrollGutter) {
|
|
235
|
-
if (!(0, _utils.isEmptyDocument)(state.doc)) {
|
|
236
|
-
addAndObserveGutter();
|
|
237
|
-
} else {
|
|
238
|
-
gutter.removeGutter();
|
|
239
|
-
}
|
|
240
|
-
return;
|
|
241
|
-
}
|
|
242
|
-
// Determine whether we need to consider Keyboard Height
|
|
243
|
-
var keyboardHeight = (_getKeyboardHeight = getKeyboardHeight(state)) !== null && _getKeyboardHeight !== void 0 ? _getKeyboardHeight : 0;
|
|
244
|
-
var viewportHeight = scrollElement.offsetHeight - keyboardHeight;
|
|
245
|
-
var contentHeight = editorParentElement.offsetHeight - (gutterMounted ? gutterSize : 0);
|
|
246
|
-
|
|
247
|
-
// Add or remove the gutter based on whether the content is about to exceed the viewport height.
|
|
248
|
-
// We do this to ensure there is sufficient white space below the last content node in order to
|
|
249
|
-
// see any UI control elements which may sit beneath it.
|
|
250
|
-
var gutterThresholdHeight = viewportHeight - gutterSize;
|
|
251
|
-
if (contentHeight >= gutterThresholdHeight) {
|
|
252
|
-
addAndObserveGutter();
|
|
253
|
-
} else {
|
|
254
|
-
if (gutterMounted) {
|
|
255
|
-
gutter.removeGutter();
|
|
256
|
-
}
|
|
257
|
-
}
|
|
258
|
-
}
|
|
259
|
-
};
|
|
260
|
-
})
|
|
261
|
-
});
|
|
262
|
-
};
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
-
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
-
export const stateKey = new PluginKey('contextIdentiferPlugin');
|
|
4
|
-
export const getContextIdentifier = state => {
|
|
5
|
-
if (state) {
|
|
6
|
-
var _stateKey$getState;
|
|
7
|
-
return (_stateKey$getState = stateKey.getState(state)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.contextIdentifierProvider;
|
|
8
|
-
}
|
|
9
|
-
};
|
|
10
|
-
export default ((dispatch, providerFactory) => new SafePlugin({
|
|
11
|
-
key: stateKey,
|
|
12
|
-
state: {
|
|
13
|
-
init: () => ({}),
|
|
14
|
-
apply: (tr, pluginState) => {
|
|
15
|
-
if (tr.getMeta(stateKey)) {
|
|
16
|
-
return tr.getMeta(stateKey);
|
|
17
|
-
}
|
|
18
|
-
return pluginState;
|
|
19
|
-
}
|
|
20
|
-
},
|
|
21
|
-
view: view => {
|
|
22
|
-
const providerPromiseHandler = (name, providerPromise) => {
|
|
23
|
-
if (providerPromise && name === 'contextIdentifierProvider') {
|
|
24
|
-
providerPromise.then(provider => {
|
|
25
|
-
const tr = view.state.tr.setMeta(stateKey, {
|
|
26
|
-
contextIdentifierProvider: {
|
|
27
|
-
...provider
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
|
-
view.dispatch(tr);
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
if (providerFactory) {
|
|
35
|
-
providerFactory.subscribe('contextIdentifierProvider', providerPromiseHandler);
|
|
36
|
-
}
|
|
37
|
-
return {
|
|
38
|
-
destroy: () => {
|
|
39
|
-
providerFactory && providerFactory.unsubscribe('contextIdentifierProvider', providerPromiseHandler);
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
|
-
}));
|
|
@@ -1,244 +0,0 @@
|
|
|
1
|
-
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
-
import { GUTTER_SELECTOR, GUTTER_SIZE_IN_PX, isEmptyDocument } from '@atlaskit/editor-common/utils';
|
|
3
|
-
import { getScrollGutterPluginState, scrollGutterPluginKey } from './plugin-key';
|
|
4
|
-
export const getKeyboardHeight = state => {
|
|
5
|
-
if (state) {
|
|
6
|
-
const scrollGutterPluginState = getScrollGutterPluginState(state);
|
|
7
|
-
return scrollGutterPluginState ? scrollGutterPluginState.keyboardHeight : undefined;
|
|
8
|
-
}
|
|
9
|
-
};
|
|
10
|
-
const MIN_TAP_SIZE_IN_PX = 40;
|
|
11
|
-
function supportsIntersectionObserver() {
|
|
12
|
-
if (typeof window !== 'undefined' && 'IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in
|
|
13
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
14
|
-
window.IntersectionObserverEntry.prototype) {
|
|
15
|
-
return true;
|
|
16
|
-
}
|
|
17
|
-
return false;
|
|
18
|
-
}
|
|
19
|
-
function listenForGutterVisibilityChanges(scrollElement, gutterIsVisible) {
|
|
20
|
-
if (supportsIntersectionObserver()) {
|
|
21
|
-
const observer = new IntersectionObserver((entries, _) => {
|
|
22
|
-
entries.forEach(entry => {
|
|
23
|
-
gutterIsVisible(entry.intersectionRatio > 0);
|
|
24
|
-
});
|
|
25
|
-
}, {
|
|
26
|
-
root: scrollElement,
|
|
27
|
-
rootMargin: '0px',
|
|
28
|
-
threshold: 0
|
|
29
|
-
});
|
|
30
|
-
return observer;
|
|
31
|
-
}
|
|
32
|
-
return undefined;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
/**
|
|
36
|
-
* Create a gutter element that can be added or removed from the DOM.
|
|
37
|
-
*/
|
|
38
|
-
function createGutter(gutterSize) {
|
|
39
|
-
const gutter = document.createElement('div');
|
|
40
|
-
gutter.style.paddingBottom = `${gutterSize}px`;
|
|
41
|
-
gutter.id = GUTTER_SELECTOR.substr(1);
|
|
42
|
-
let initialized = false;
|
|
43
|
-
let mounted = false;
|
|
44
|
-
let currentParent = null;
|
|
45
|
-
let observer;
|
|
46
|
-
let isVisible = false;
|
|
47
|
-
return {
|
|
48
|
-
addGutter(parent) {
|
|
49
|
-
if (parent) {
|
|
50
|
-
currentParent = parent;
|
|
51
|
-
parent.appendChild(gutter);
|
|
52
|
-
mounted = true;
|
|
53
|
-
if (observer) {
|
|
54
|
-
observer.observe(gutter);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
removeGutter() {
|
|
59
|
-
if (currentParent && mounted) {
|
|
60
|
-
mounted = false;
|
|
61
|
-
currentParent.removeChild(gutter);
|
|
62
|
-
if (observer) {
|
|
63
|
-
observer.unobserve(gutter);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
},
|
|
67
|
-
element() {
|
|
68
|
-
return gutter;
|
|
69
|
-
},
|
|
70
|
-
isMounted() {
|
|
71
|
-
return mounted;
|
|
72
|
-
},
|
|
73
|
-
visible() {
|
|
74
|
-
// If we know whether it's visible we can avoid expensive calculations
|
|
75
|
-
if (observer) {
|
|
76
|
-
return isVisible;
|
|
77
|
-
}
|
|
78
|
-
// Fallback for legacy browsers assumes it's visible (if mounted)
|
|
79
|
-
return mounted;
|
|
80
|
-
},
|
|
81
|
-
observe(scrollElement) {
|
|
82
|
-
if (!initialized) {
|
|
83
|
-
initialized = true;
|
|
84
|
-
observer = listenForGutterVisibilityChanges(scrollElement, visible => isVisible = visible);
|
|
85
|
-
}
|
|
86
|
-
},
|
|
87
|
-
destroy() {
|
|
88
|
-
if (observer) {
|
|
89
|
-
observer.disconnect();
|
|
90
|
-
}
|
|
91
|
-
observer = undefined;
|
|
92
|
-
this.removeGutter();
|
|
93
|
-
initialized = mounted = false;
|
|
94
|
-
}
|
|
95
|
-
};
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
/**
|
|
99
|
-
* Get caret top position given the current selection,
|
|
100
|
-
* use start container position as fallback
|
|
101
|
-
*/
|
|
102
|
-
function getCaretTopPosition() {
|
|
103
|
-
const windowSelection = window.getSelection();
|
|
104
|
-
if (windowSelection && windowSelection.rangeCount > 0) {
|
|
105
|
-
const range = windowSelection.getRangeAt(0);
|
|
106
|
-
if (range) {
|
|
107
|
-
const clientRects = range.getClientRects();
|
|
108
|
-
// Return client rects
|
|
109
|
-
if (clientRects && clientRects.length > 0) {
|
|
110
|
-
return clientRects[0].top;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
// Return container top
|
|
114
|
-
const container = range.startContainer;
|
|
115
|
-
if (container && container.getBoundingClientRect) {
|
|
116
|
-
return container.getBoundingClientRect().top;
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
return;
|
|
121
|
-
}
|
|
122
|
-
function scrollToGutterElement(scrollContainer, gutterElement, gutterSize) {
|
|
123
|
-
const viewportHeight = scrollContainer.offsetHeight;
|
|
124
|
-
const viewportOffsetY = scrollContainer.getBoundingClientRect().top;
|
|
125
|
-
const caretTopPosition = getCaretTopPosition();
|
|
126
|
-
if (!caretTopPosition) {
|
|
127
|
-
return false;
|
|
128
|
-
}
|
|
129
|
-
const caretTopFromContainer = caretTopPosition - viewportOffsetY;
|
|
130
|
-
const gutterThresholdTop = viewportHeight - gutterSize - MIN_TAP_SIZE_IN_PX * 2;
|
|
131
|
-
if (caretTopFromContainer < gutterThresholdTop) {
|
|
132
|
-
return false;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
// Clamp the scroll position to above the scroll gutter element.
|
|
136
|
-
gutterElement.scrollIntoView(false);
|
|
137
|
-
|
|
138
|
-
// Mark scrolling as handled so that other plugin's don't override our position.
|
|
139
|
-
return true;
|
|
140
|
-
}
|
|
141
|
-
export default ((pluginOptions = {}) => {
|
|
142
|
-
const {
|
|
143
|
-
getScrollElement,
|
|
144
|
-
allowCustomScrollHandler,
|
|
145
|
-
gutterSize = GUTTER_SIZE_IN_PX
|
|
146
|
-
} = pluginOptions;
|
|
147
|
-
if (!getScrollElement) {
|
|
148
|
-
return undefined;
|
|
149
|
-
}
|
|
150
|
-
const gutter = createGutter(gutterSize);
|
|
151
|
-
let scrollElement = null; // | undefined;
|
|
152
|
-
|
|
153
|
-
return new SafePlugin({
|
|
154
|
-
key: scrollGutterPluginKey,
|
|
155
|
-
state: {
|
|
156
|
-
init: () => ({}),
|
|
157
|
-
apply: (tr, pluginState) => {
|
|
158
|
-
if (tr.getMeta(scrollGutterPluginKey)) {
|
|
159
|
-
return tr.getMeta(scrollGutterPluginKey);
|
|
160
|
-
}
|
|
161
|
-
return pluginState;
|
|
162
|
-
}
|
|
163
|
-
},
|
|
164
|
-
props: {
|
|
165
|
-
// Determines the distance (in pixels) between the cursor and the end of the visible viewport at which point,
|
|
166
|
-
// when scrolling the cursor into view, scrolling takes place.
|
|
167
|
-
// Defaults to 0: https://prosemirror.net/docs/ref/#view.EditorProps.scrollThreshold
|
|
168
|
-
scrollThreshold: gutterSize / 2,
|
|
169
|
-
// Determines the extra space (in pixels) that is left above or below the cursor when it is scrolled into view.
|
|
170
|
-
// Defaults to 5: https://prosemirror.net/docs/ref/#view.EditorProps.scrollMargin
|
|
171
|
-
scrollMargin: gutterSize,
|
|
172
|
-
// Called when the view, after updating its state, tries to scroll the selection into view
|
|
173
|
-
// https://prosemirror.net/docs/ref/#view.EditorProps.handleScrollToSelection
|
|
174
|
-
handleScrollToSelection: () => {
|
|
175
|
-
if (allowCustomScrollHandler === false) {
|
|
176
|
-
return false;
|
|
177
|
-
}
|
|
178
|
-
if (!gutter.isMounted() || !gutter.visible() || !scrollElement) {
|
|
179
|
-
// Avoid scrolling until applicable
|
|
180
|
-
return false;
|
|
181
|
-
}
|
|
182
|
-
return scrollToGutterElement(scrollElement, gutter.element(), gutterSize);
|
|
183
|
-
}
|
|
184
|
-
},
|
|
185
|
-
view(view) {
|
|
186
|
-
// Store references to avoid lookups on successive checks.
|
|
187
|
-
scrollElement = getScrollElement(view);
|
|
188
|
-
let editorElement = view.dom;
|
|
189
|
-
let editorParentElement = editorElement.parentElement;
|
|
190
|
-
return {
|
|
191
|
-
destroy() {
|
|
192
|
-
// Remove if it's mounted
|
|
193
|
-
gutter.destroy();
|
|
194
|
-
scrollElement = editorParentElement = editorElement = null;
|
|
195
|
-
},
|
|
196
|
-
/**
|
|
197
|
-
* Toggle the Scroll Gutter Element
|
|
198
|
-
*/
|
|
199
|
-
update(view, prevState) {
|
|
200
|
-
var _getKeyboardHeight;
|
|
201
|
-
if (!scrollElement || !editorParentElement) {
|
|
202
|
-
return;
|
|
203
|
-
}
|
|
204
|
-
const state = view.state;
|
|
205
|
-
if (prevState.selection === state.selection) {
|
|
206
|
-
// No need to recheck if the selected node hasn't changed.
|
|
207
|
-
return;
|
|
208
|
-
}
|
|
209
|
-
const gutterMounted = gutter.isMounted();
|
|
210
|
-
const addAndObserveGutter = () => {
|
|
211
|
-
if (!gutterMounted) {
|
|
212
|
-
gutter.observe(scrollElement);
|
|
213
|
-
gutter.addGutter(editorParentElement);
|
|
214
|
-
}
|
|
215
|
-
};
|
|
216
|
-
if (pluginOptions.persistScrollGutter) {
|
|
217
|
-
if (!isEmptyDocument(state.doc)) {
|
|
218
|
-
addAndObserveGutter();
|
|
219
|
-
} else {
|
|
220
|
-
gutter.removeGutter();
|
|
221
|
-
}
|
|
222
|
-
return;
|
|
223
|
-
}
|
|
224
|
-
// Determine whether we need to consider Keyboard Height
|
|
225
|
-
const keyboardHeight = (_getKeyboardHeight = getKeyboardHeight(state)) !== null && _getKeyboardHeight !== void 0 ? _getKeyboardHeight : 0;
|
|
226
|
-
const viewportHeight = scrollElement.offsetHeight - keyboardHeight;
|
|
227
|
-
const contentHeight = editorParentElement.offsetHeight - (gutterMounted ? gutterSize : 0);
|
|
228
|
-
|
|
229
|
-
// Add or remove the gutter based on whether the content is about to exceed the viewport height.
|
|
230
|
-
// We do this to ensure there is sufficient white space below the last content node in order to
|
|
231
|
-
// see any UI control elements which may sit beneath it.
|
|
232
|
-
const gutterThresholdHeight = viewportHeight - gutterSize;
|
|
233
|
-
if (contentHeight >= gutterThresholdHeight) {
|
|
234
|
-
addAndObserveGutter();
|
|
235
|
-
} else {
|
|
236
|
-
if (gutterMounted) {
|
|
237
|
-
gutter.removeGutter();
|
|
238
|
-
}
|
|
239
|
-
}
|
|
240
|
-
}
|
|
241
|
-
};
|
|
242
|
-
}
|
|
243
|
-
});
|
|
244
|
-
});
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
-
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
5
|
-
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
6
|
-
export var stateKey = new PluginKey('contextIdentiferPlugin');
|
|
7
|
-
export var getContextIdentifier = function getContextIdentifier(state) {
|
|
8
|
-
if (state) {
|
|
9
|
-
var _stateKey$getState;
|
|
10
|
-
return (_stateKey$getState = stateKey.getState(state)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.contextIdentifierProvider;
|
|
11
|
-
}
|
|
12
|
-
};
|
|
13
|
-
export default (function (dispatch, providerFactory) {
|
|
14
|
-
return new SafePlugin({
|
|
15
|
-
key: stateKey,
|
|
16
|
-
state: {
|
|
17
|
-
init: function init() {
|
|
18
|
-
return {};
|
|
19
|
-
},
|
|
20
|
-
apply: function apply(tr, pluginState) {
|
|
21
|
-
if (tr.getMeta(stateKey)) {
|
|
22
|
-
return tr.getMeta(stateKey);
|
|
23
|
-
}
|
|
24
|
-
return pluginState;
|
|
25
|
-
}
|
|
26
|
-
},
|
|
27
|
-
view: function view(_view) {
|
|
28
|
-
var providerPromiseHandler = function providerPromiseHandler(name, providerPromise) {
|
|
29
|
-
if (providerPromise && name === 'contextIdentifierProvider') {
|
|
30
|
-
providerPromise.then(function (provider) {
|
|
31
|
-
var tr = _view.state.tr.setMeta(stateKey, {
|
|
32
|
-
contextIdentifierProvider: _objectSpread({}, provider)
|
|
33
|
-
});
|
|
34
|
-
_view.dispatch(tr);
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
if (providerFactory) {
|
|
39
|
-
providerFactory.subscribe('contextIdentifierProvider', providerPromiseHandler);
|
|
40
|
-
}
|
|
41
|
-
return {
|
|
42
|
-
destroy: function destroy() {
|
|
43
|
-
providerFactory && providerFactory.unsubscribe('contextIdentifierProvider', providerPromiseHandler);
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
});
|