@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.
@@ -1,256 +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 var getKeyboardHeight = function getKeyboardHeight(state) {
5
- if (state) {
6
- var scrollGutterPluginState = getScrollGutterPluginState(state);
7
- return scrollGutterPluginState ? scrollGutterPluginState.keyboardHeight : undefined;
8
- }
9
- };
10
- var 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
- var observer = new IntersectionObserver(function (entries, _) {
22
- entries.forEach(function (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
- var gutter = document.createElement('div');
40
- gutter.style.paddingBottom = "".concat(gutterSize, "px");
41
- gutter.id = GUTTER_SELECTOR.substr(1);
42
- var initialized = false;
43
- var mounted = false;
44
- var currentParent = null;
45
- var observer;
46
- var isVisible = false;
47
- return {
48
- addGutter: function 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: function removeGutter() {
59
- if (currentParent && mounted) {
60
- mounted = false;
61
- currentParent.removeChild(gutter);
62
- if (observer) {
63
- observer.unobserve(gutter);
64
- }
65
- }
66
- },
67
- element: function element() {
68
- return gutter;
69
- },
70
- isMounted: function isMounted() {
71
- return mounted;
72
- },
73
- visible: function 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: function observe(scrollElement) {
82
- if (!initialized) {
83
- initialized = true;
84
- observer = listenForGutterVisibilityChanges(scrollElement, function (visible) {
85
- return isVisible = visible;
86
- });
87
- }
88
- },
89
- destroy: function destroy() {
90
- if (observer) {
91
- observer.disconnect();
92
- }
93
- observer = undefined;
94
- this.removeGutter();
95
- initialized = mounted = false;
96
- }
97
- };
98
- }
99
-
100
- /**
101
- * Get caret top position given the current selection,
102
- * use start container position as fallback
103
- */
104
- function getCaretTopPosition() {
105
- var windowSelection = window.getSelection();
106
- if (windowSelection && windowSelection.rangeCount > 0) {
107
- var range = windowSelection.getRangeAt(0);
108
- if (range) {
109
- var clientRects = range.getClientRects();
110
- // Return client rects
111
- if (clientRects && clientRects.length > 0) {
112
- return clientRects[0].top;
113
- }
114
-
115
- // Return container top
116
- var container = range.startContainer;
117
- if (container && container.getBoundingClientRect) {
118
- return container.getBoundingClientRect().top;
119
- }
120
- }
121
- }
122
- return;
123
- }
124
- function scrollToGutterElement(scrollContainer, gutterElement, gutterSize) {
125
- var viewportHeight = scrollContainer.offsetHeight;
126
- var viewportOffsetY = scrollContainer.getBoundingClientRect().top;
127
- var caretTopPosition = getCaretTopPosition();
128
- if (!caretTopPosition) {
129
- return false;
130
- }
131
- var caretTopFromContainer = caretTopPosition - viewportOffsetY;
132
- var gutterThresholdTop = viewportHeight - gutterSize - MIN_TAP_SIZE_IN_PX * 2;
133
- if (caretTopFromContainer < gutterThresholdTop) {
134
- return false;
135
- }
136
-
137
- // Clamp the scroll position to above the scroll gutter element.
138
- gutterElement.scrollIntoView(false);
139
-
140
- // Mark scrolling as handled so that other plugin's don't override our position.
141
- return true;
142
- }
143
- export default (function () {
144
- var pluginOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
145
- var getScrollElement = pluginOptions.getScrollElement,
146
- allowCustomScrollHandler = pluginOptions.allowCustomScrollHandler,
147
- _pluginOptions$gutter = pluginOptions.gutterSize,
148
- gutterSize = _pluginOptions$gutter === void 0 ? GUTTER_SIZE_IN_PX : _pluginOptions$gutter;
149
- if (!getScrollElement) {
150
- return undefined;
151
- }
152
- var gutter = createGutter(gutterSize);
153
- var scrollElement = null; // | undefined;
154
-
155
- return new SafePlugin({
156
- key: scrollGutterPluginKey,
157
- state: {
158
- init: function init() {
159
- return {};
160
- },
161
- apply: function apply(tr, pluginState) {
162
- if (tr.getMeta(scrollGutterPluginKey)) {
163
- return tr.getMeta(scrollGutterPluginKey);
164
- }
165
- return pluginState;
166
- }
167
- },
168
- props: {
169
- // Determines the distance (in pixels) between the cursor and the end of the visible viewport at which point,
170
- // when scrolling the cursor into view, scrolling takes place.
171
- // Defaults to 0: https://prosemirror.net/docs/ref/#view.EditorProps.scrollThreshold
172
- scrollThreshold: gutterSize / 2,
173
- // Determines the extra space (in pixels) that is left above or below the cursor when it is scrolled into view.
174
- // Defaults to 5: https://prosemirror.net/docs/ref/#view.EditorProps.scrollMargin
175
- scrollMargin: gutterSize,
176
- // Called when the view, after updating its state, tries to scroll the selection into view
177
- // https://prosemirror.net/docs/ref/#view.EditorProps.handleScrollToSelection
178
- handleScrollToSelection: function handleScrollToSelection() {
179
- if (allowCustomScrollHandler === false) {
180
- return false;
181
- }
182
- if (!gutter.isMounted() || !gutter.visible() || !scrollElement) {
183
- // Avoid scrolling until applicable
184
- return false;
185
- }
186
- return scrollToGutterElement(scrollElement, gutter.element(), gutterSize);
187
- }
188
- },
189
- view: function (_view) {
190
- function view(_x) {
191
- return _view.apply(this, arguments);
192
- }
193
- view.toString = function () {
194
- return _view.toString();
195
- };
196
- return view;
197
- }(function (view) {
198
- // Store references to avoid lookups on successive checks.
199
- scrollElement = getScrollElement(view);
200
- var editorElement = view.dom;
201
- var editorParentElement = editorElement.parentElement;
202
- return {
203
- destroy: function destroy() {
204
- // Remove if it's mounted
205
- gutter.destroy();
206
- scrollElement = editorParentElement = editorElement = null;
207
- },
208
- /**
209
- * Toggle the Scroll Gutter Element
210
- */
211
- update: function update(view, prevState) {
212
- var _getKeyboardHeight;
213
- if (!scrollElement || !editorParentElement) {
214
- return;
215
- }
216
- var state = view.state;
217
- if (prevState.selection === state.selection) {
218
- // No need to recheck if the selected node hasn't changed.
219
- return;
220
- }
221
- var gutterMounted = gutter.isMounted();
222
- var addAndObserveGutter = function addAndObserveGutter() {
223
- if (!gutterMounted) {
224
- gutter.observe(scrollElement);
225
- gutter.addGutter(editorParentElement);
226
- }
227
- };
228
- if (pluginOptions.persistScrollGutter) {
229
- if (!isEmptyDocument(state.doc)) {
230
- addAndObserveGutter();
231
- } else {
232
- gutter.removeGutter();
233
- }
234
- return;
235
- }
236
- // Determine whether we need to consider Keyboard Height
237
- var keyboardHeight = (_getKeyboardHeight = getKeyboardHeight(state)) !== null && _getKeyboardHeight !== void 0 ? _getKeyboardHeight : 0;
238
- var viewportHeight = scrollElement.offsetHeight - keyboardHeight;
239
- var contentHeight = editorParentElement.offsetHeight - (gutterMounted ? gutterSize : 0);
240
-
241
- // Add or remove the gutter based on whether the content is about to exceed the viewport height.
242
- // We do this to ensure there is sufficient white space below the last content node in order to
243
- // see any UI control elements which may sit beneath it.
244
- var gutterThresholdHeight = viewportHeight - gutterSize;
245
- if (contentHeight >= gutterThresholdHeight) {
246
- addAndObserveGutter();
247
- } else {
248
- if (gutterMounted) {
249
- gutter.removeGutter();
250
- }
251
- }
252
- }
253
- };
254
- })
255
- });
256
- });
@@ -1,12 +0,0 @@
1
- import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
2
- import type { ContextIdentifierProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
3
- import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
4
- import type { EditorState } from '@atlaskit/editor-prosemirror/state';
5
- import { PluginKey } from '@atlaskit/editor-prosemirror/state';
6
- export declare const stateKey: PluginKey<any>;
7
- export interface PluginState {
8
- contextIdentifierProvider?: ContextIdentifierProvider;
9
- }
10
- export declare const getContextIdentifier: (state?: EditorState) => ContextIdentifierProvider | undefined;
11
- declare const _default: (dispatch: Dispatch, providerFactory?: ProviderFactory) => SafePlugin<{}>;
12
- export default _default;
@@ -1,22 +0,0 @@
1
- import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
- import type { EditorState } from '@atlaskit/editor-prosemirror/state';
3
- import type { EditorView } from '@atlaskit/editor-prosemirror/view';
4
- export declare const getKeyboardHeight: (state?: EditorState) => number | undefined;
5
- export type ScrollGutterPluginOptions = {
6
- /** Element the page uses for scrolling */
7
- getScrollElement?: (view: EditorView) => HTMLElement | null;
8
- /**
9
- * Whether to allow custom functionality to scroll to gutter element in
10
- * plugin's handleScrollToSelection function
11
- * Default is true
12
- */
13
- allowCustomScrollHandler?: boolean;
14
- /**
15
- * Persist scroll gutter when the mobile appearance is COMPACT
16
- * Default is false
17
- */
18
- persistScrollGutter?: boolean;
19
- gutterSize?: number;
20
- };
21
- declare const _default: (pluginOptions?: ScrollGutterPluginOptions) => SafePlugin<{}> | undefined;
22
- export default _default;
@@ -1,12 +0,0 @@
1
- import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
2
- import type { ContextIdentifierProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
3
- import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
4
- import type { EditorState } from '@atlaskit/editor-prosemirror/state';
5
- import { PluginKey } from '@atlaskit/editor-prosemirror/state';
6
- export declare const stateKey: PluginKey<any>;
7
- export interface PluginState {
8
- contextIdentifierProvider?: ContextIdentifierProvider;
9
- }
10
- export declare const getContextIdentifier: (state?: EditorState) => ContextIdentifierProvider | undefined;
11
- declare const _default: (dispatch: Dispatch, providerFactory?: ProviderFactory) => SafePlugin<{}>;
12
- export default _default;
@@ -1,22 +0,0 @@
1
- import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
- import type { EditorState } from '@atlaskit/editor-prosemirror/state';
3
- import type { EditorView } from '@atlaskit/editor-prosemirror/view';
4
- export declare const getKeyboardHeight: (state?: EditorState) => number | undefined;
5
- export type ScrollGutterPluginOptions = {
6
- /** Element the page uses for scrolling */
7
- getScrollElement?: (view: EditorView) => HTMLElement | null;
8
- /**
9
- * Whether to allow custom functionality to scroll to gutter element in
10
- * plugin's handleScrollToSelection function
11
- * Default is true
12
- */
13
- allowCustomScrollHandler?: boolean;
14
- /**
15
- * Persist scroll gutter when the mobile appearance is COMPACT
16
- * Default is false
17
- */
18
- persistScrollGutter?: boolean;
19
- gutterSize?: number;
20
- };
21
- declare const _default: (pluginOptions?: ScrollGutterPluginOptions) => SafePlugin<{}> | undefined;
22
- export default _default;