@atlaskit/editor-common 87.6.0 → 87.6.1
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 +20 -0
- package/dist/cjs/keymaps/index.js +7 -4
- package/dist/cjs/lazy-node-view/index.js +10 -3
- package/dist/cjs/lazy-node-view/node-view.js +32 -20
- package/dist/cjs/lazy-node-view/replace-node-views.js +94 -25
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/styles/shared/code-block.js +3 -4
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/es2019/keymaps/index.js +2 -1
- package/dist/es2019/lazy-node-view/index.js +10 -3
- package/dist/es2019/lazy-node-view/node-view.js +6 -1
- package/dist/es2019/lazy-node-view/replace-node-views.js +94 -28
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/styles/shared/code-block.js +15 -3
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/esm/keymaps/index.js +2 -1
- package/dist/esm/lazy-node-view/index.js +10 -3
- package/dist/esm/lazy-node-view/node-view.js +32 -20
- package/dist/esm/lazy-node-view/replace-node-views.js +94 -25
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/styles/shared/code-block.js +3 -4
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/types/keymaps/index.d.ts +2 -0
- package/dist/types/lazy-node-view/index.d.ts +5 -2
- package/dist/types/lazy-node-view/node-view.d.ts +6 -1
- package/dist/types/lazy-node-view/replace-node-views.d.ts +15 -25
- package/dist/types/lazy-node-view/types.d.ts +7 -0
- package/dist/types/styles/shared/code-block.d.ts +1 -0
- package/dist/types-ts4.5/keymaps/index.d.ts +2 -0
- package/dist/types-ts4.5/lazy-node-view/index.d.ts +5 -2
- package/dist/types-ts4.5/lazy-node-view/node-view.d.ts +6 -1
- package/dist/types-ts4.5/lazy-node-view/replace-node-views.d.ts +15 -25
- package/dist/types-ts4.5/lazy-node-view/types.d.ts +7 -0
- package/dist/types-ts4.5/styles/shared/code-block.d.ts +1 -0
- package/package.json +3 -3
|
@@ -14,11 +14,18 @@ export const CodeBlockSharedCssClassName = {
|
|
|
14
14
|
DS_CODEBLOCK: '[data-ds--code--code-block]',
|
|
15
15
|
CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP: 'line-number-gutter--fg-wrap',
|
|
16
16
|
CODEBLOCK_CONTENT_WRAPPED: 'code-content--wrapped',
|
|
17
|
-
CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED: 'code-content__line-number--wrapped'
|
|
17
|
+
CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED: 'code-content__line-number--wrapped',
|
|
18
|
+
CODEBLOCK_WRAPPED: 'code-block--wrapped'
|
|
18
19
|
};
|
|
19
|
-
|
|
20
|
-
// TODO: ED-24222 Remove flex styling and hardcoded word
|
|
21
20
|
export const codeBlockSharedStyles = () => css`
|
|
21
|
+
.${CodeBlockSharedCssClassName.CODEBLOCK_WRAPPED}
|
|
22
|
+
> .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER}
|
|
23
|
+
> .${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT}
|
|
24
|
+
code {
|
|
25
|
+
word-break: break-word;
|
|
26
|
+
white-space: pre-wrap;
|
|
27
|
+
}
|
|
28
|
+
|
|
22
29
|
.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
|
|
23
30
|
position: relative;
|
|
24
31
|
background-color: ${"var(--ds-surface-raised, transparent)"};
|
|
@@ -49,6 +56,11 @@ export const codeBlockSharedStyles = () => css`
|
|
|
49
56
|
right: 0px;
|
|
50
57
|
}
|
|
51
58
|
|
|
59
|
+
.${CodeBlockSharedCssClassName.CODEBLOCK_WRAPPED} {
|
|
60
|
+
word-break: break-word;
|
|
61
|
+
white-space: pre-wrap;
|
|
62
|
+
}
|
|
63
|
+
|
|
52
64
|
.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER} {
|
|
53
65
|
background-color: ${`var(--ds-background-neutral, ${N20})`};
|
|
54
66
|
display: flex;
|
|
@@ -12,7 +12,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
|
|
|
12
12
|
import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
|
|
13
13
|
import Layer from '../Layer';
|
|
14
14
|
const packageName = "@atlaskit/editor-common";
|
|
15
|
-
const packageVersion = "87.6.
|
|
15
|
+
const packageVersion = "87.6.1";
|
|
16
16
|
const halfFocusRing = 1;
|
|
17
17
|
const dropOffset = '0, 8';
|
|
18
18
|
class DropList extends Component {
|
|
@@ -103,6 +103,7 @@ export var focusToContextMenuTrigger = makeKeyMapWithCommon('Focus table context
|
|
|
103
103
|
export var dragToMoveUp = makeKeyMapWithCommon('Move node up in the document', 'Ctrl-Shift-ArrowUp');
|
|
104
104
|
export var dragToMoveDown = makeKeyMapWithCommon('Move node down in the document', 'Ctrl-Shift-ArrowDown');
|
|
105
105
|
export var showElementDragHandle = makeKeyMapWithCommon('Show drag handle for editor element', 'Ctrl-Shift-h');
|
|
106
|
+
export var continueInRovoChat = makeKeyMapWithCommon('Continue in Rovo chat', 'Alt-Enter');
|
|
106
107
|
var arrowKeysMap = {
|
|
107
108
|
// for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
|
|
108
109
|
ARROWLEFT: "\u2190",
|
|
@@ -117,7 +118,7 @@ var tooltipShortcutStyle = css({
|
|
|
117
118
|
// NOTE: This might not actually do anything: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E
|
|
118
119
|
label: 'tooltip-shortcut'
|
|
119
120
|
});
|
|
120
|
-
function formatShortcut(keymap) {
|
|
121
|
+
export function formatShortcut(keymap) {
|
|
121
122
|
var shortcut;
|
|
122
123
|
if (browser.mac) {
|
|
123
124
|
// for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
|
|
@@ -65,7 +65,10 @@ export var withLazyLoading = function withLazyLoading(_ref) {
|
|
|
65
65
|
var nodeName = _ref.nodeName,
|
|
66
66
|
loader = _ref.loader,
|
|
67
67
|
getNodeViewOptions = _ref.getNodeViewOptions,
|
|
68
|
-
dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent
|
|
68
|
+
dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
|
|
69
|
+
_ref$lazyNodeViewOpti = _ref.lazyNodeViewOptions,
|
|
70
|
+
_ref$lazyNodeViewOpti2 = _ref$lazyNodeViewOpti === void 0 ? {} : _ref$lazyNodeViewOpti,
|
|
71
|
+
ignoreMutationDelegate = _ref$lazyNodeViewOpti2.ignoreMutationDelegate;
|
|
69
72
|
var createLazyNodeView = function createLazyNodeView(node, view, getPos, decorations) {
|
|
70
73
|
var _node$type;
|
|
71
74
|
var requestedNodes = requestedNodesPerEditorView.get(view);
|
|
@@ -74,7 +77,9 @@ export var withLazyLoading = function withLazyLoading(_ref) {
|
|
|
74
77
|
}
|
|
75
78
|
var wasAlreadyRequested = requestedNodes.has(nodeName);
|
|
76
79
|
if (wasAlreadyRequested) {
|
|
77
|
-
return new LazyNodeView(node, view, getPos
|
|
80
|
+
return new LazyNodeView(node, view, getPos, {
|
|
81
|
+
ignoreMutationDelegate: ignoreMutationDelegate
|
|
82
|
+
});
|
|
78
83
|
}
|
|
79
84
|
requestedNodes.add(nodeName);
|
|
80
85
|
loader().then(function (nodeViewFuncModule) {
|
|
@@ -98,7 +103,9 @@ export var withLazyLoading = function withLazyLoading(_ref) {
|
|
|
98
103
|
// },
|
|
99
104
|
// });
|
|
100
105
|
}
|
|
101
|
-
return new LazyNodeView(node, view, getPos
|
|
106
|
+
return new LazyNodeView(node, view, getPos, {
|
|
107
|
+
ignoreMutationDelegate: ignoreMutationDelegate
|
|
108
|
+
});
|
|
102
109
|
};
|
|
103
110
|
return createLazyNodeView;
|
|
104
111
|
};
|
|
@@ -1,28 +1,40 @@
|
|
|
1
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
2
1
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
3
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
4
4
|
/**
|
|
5
5
|
* 🧱 Internal: Editor FE Platform
|
|
6
6
|
*
|
|
7
7
|
* A NodeView that serves as a placeholder until the actual NodeView is loaded.
|
|
8
8
|
*/
|
|
9
|
-
export var LazyNodeView = /*#__PURE__*/
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
this
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
this.dom
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
9
|
+
export var LazyNodeView = /*#__PURE__*/function () {
|
|
10
|
+
function LazyNodeView(node, view, getPos) {
|
|
11
|
+
var _node$type;
|
|
12
|
+
var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
13
|
+
_classCallCheck(this, LazyNodeView);
|
|
14
|
+
this.ignoreMutationDelegate = options === null || options === void 0 ? void 0 : options.ignoreMutationDelegate;
|
|
15
|
+
if (typeof ((_node$type = node.type) === null || _node$type === void 0 || (_node$type = _node$type.spec) === null || _node$type === void 0 ? void 0 : _node$type.toDOM) !== 'function') {
|
|
16
|
+
this.dom = document.createElement('div');
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
var fallback = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node));
|
|
20
|
+
this.dom = fallback.dom;
|
|
21
|
+
this.contentDOM = fallback.contentDOM;
|
|
22
|
+
if (this.dom instanceof HTMLElement) {
|
|
23
|
+
// This attribute is mostly used for debugging purposed
|
|
24
|
+
// It will help us to found out when the node was replaced
|
|
25
|
+
this.dom.setAttribute('data-lazy-node-view', node.type.name);
|
|
26
|
+
// This is used on Libra tests
|
|
27
|
+
// We are using this to make sure all lazy noded were replaced
|
|
28
|
+
// before the test started
|
|
29
|
+
this.dom.setAttribute('data-lazy-node-view-fallback', 'true');
|
|
30
|
+
}
|
|
27
31
|
}
|
|
28
|
-
|
|
32
|
+
_createClass(LazyNodeView, [{
|
|
33
|
+
key: "ignoreMutation",
|
|
34
|
+
value: function ignoreMutation(mutation) {
|
|
35
|
+
var _this$ignoreMutationD;
|
|
36
|
+
return !!((_this$ignoreMutationD = this.ignoreMutationDelegate) !== null && _this$ignoreMutationD !== void 0 && _this$ignoreMutationD.call(this, mutation));
|
|
37
|
+
}
|
|
38
|
+
}]);
|
|
39
|
+
return LazyNodeView;
|
|
40
|
+
}();
|
|
@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
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
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
4
|
import debounce from 'lodash/debounce';
|
|
5
|
+
import memoize from 'lodash/memoize';
|
|
5
6
|
/**
|
|
6
7
|
* 🧱 Internal: Editor FE Platform
|
|
7
8
|
*/
|
|
@@ -10,11 +11,10 @@ var isFirefox = /gecko\/\d/i.test(navigator.userAgent);
|
|
|
10
11
|
/**
|
|
11
12
|
* 🧱 Internal: Editor FE Platform
|
|
12
13
|
*
|
|
13
|
-
*
|
|
14
|
+
* Replaces the node views in a ProseMirror editor with lazy-loaded node views.
|
|
14
15
|
*
|
|
15
16
|
* This function is used to update the `nodeViews` property of the `EditorView` after lazy-loaded
|
|
16
|
-
* node views have been loaded.
|
|
17
|
-
* not happen too frequently, which can be performance-intensive.
|
|
17
|
+
* node views have been loaded.
|
|
18
18
|
*
|
|
19
19
|
* The function checks if there are any loaded node views in the cache associated with the given
|
|
20
20
|
* `EditorView`. If there are, it replaces the current `nodeViews` in the `EditorView` with the
|
|
@@ -38,9 +38,9 @@ var isFirefox = /gecko\/\d/i.test(navigator.userAgent);
|
|
|
38
38
|
* 'tableCell': TableCellViewConstructor,
|
|
39
39
|
* });
|
|
40
40
|
*
|
|
41
|
-
*
|
|
41
|
+
* replaceNodeViews(cache, view);
|
|
42
42
|
*/
|
|
43
|
-
|
|
43
|
+
var replaceNodeViews = function replaceNodeViews(cache, view) {
|
|
44
44
|
var loadedNodeviews = cache.get(view);
|
|
45
45
|
if (!loadedNodeviews || Object.keys(loadedNodeviews).length === 0) {
|
|
46
46
|
return;
|
|
@@ -50,40 +50,109 @@ export var debouncedReplaceNodeviews = debounce(function (cache, view) {
|
|
|
50
50
|
// Make sure the cache is cleaned
|
|
51
51
|
// From here, we will access the loaded node views by lexical scope
|
|
52
52
|
cache.set(view, {});
|
|
53
|
+
var callback = function callback() {
|
|
54
|
+
var currentNodeViews = view.props.nodeViews;
|
|
55
|
+
var nextNodeViews = _objectSpread(_objectSpread({}, currentNodeViews), nodeViewsToReplace);
|
|
56
|
+
view.setProps({
|
|
57
|
+
nodeViews: nextNodeViews
|
|
58
|
+
});
|
|
59
|
+
};
|
|
60
|
+
// eslint-disable-next-line compat/compat
|
|
61
|
+
var idle = window.requestIdleCallback;
|
|
53
62
|
|
|
54
63
|
/*
|
|
55
64
|
* For reasons that goes beyond my knowledge
|
|
56
65
|
* some Firefox versions aren't calling the requestIdleCallback.
|
|
57
66
|
*
|
|
58
|
-
* So, we need this check to make sure we
|
|
59
|
-
*
|
|
60
|
-
* setting timeout to 2s to ensure this function is called, but not before prosemirror render
|
|
61
|
-
* and other important tasks are done - adjust this timeout based on user feedback
|
|
67
|
+
* So, we need this check to make sure we are using the requestAnimationFrame for Firefox
|
|
62
68
|
*/
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}
|
|
68
|
-
// eslint-disable-next-line compat/compat
|
|
69
|
-
window.requestIdleCallback(callback, {
|
|
69
|
+
if (isFirefox || typeof idle !== 'function') {
|
|
70
|
+
window.requestAnimationFrame(callback);
|
|
71
|
+
} else {
|
|
72
|
+
idle(callback, {
|
|
70
73
|
timeout: 2000
|
|
71
74
|
});
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
var currentNodeViews = view.props.nodeViews;
|
|
75
|
-
var nextNodeViews = _objectSpread(_objectSpread({}, currentNodeViews), nodeViewsToReplace);
|
|
76
|
-
view.setProps({
|
|
77
|
-
nodeViews: nextNodeViews
|
|
78
|
-
});
|
|
79
|
-
});
|
|
80
|
-
});
|
|
75
|
+
}
|
|
76
|
+
};
|
|
81
77
|
|
|
82
78
|
/**
|
|
83
79
|
* 🧱 Internal: Editor FE Platform
|
|
84
80
|
*/
|
|
85
81
|
var loadedPerEditorView = new WeakMap();
|
|
86
82
|
|
|
83
|
+
/**
|
|
84
|
+
* 🧱 Internal: Editor FE Platform
|
|
85
|
+
* Based on https://github.com/lodash/lodash/issues/2403#issuecomment-1706130395
|
|
86
|
+
*
|
|
87
|
+
* Creates a debounced function that delays invoking the provided function until after a specified
|
|
88
|
+
* wait time has elapsed since the last time the debounced function was invoked. Additionally, the
|
|
89
|
+
* debounced function is memoized so that the same function instance is used for each unique set
|
|
90
|
+
* of arguments based on the resolver.
|
|
91
|
+
*
|
|
92
|
+
* This is particularly useful in scenarios where you want to debounce function calls while ensuring
|
|
93
|
+
* that each unique input combination receives its own debounced function instance. It's a combination
|
|
94
|
+
* of lodash's `debounce` and `memoize`.
|
|
95
|
+
*
|
|
96
|
+
* @template T
|
|
97
|
+
* @param {T} func - The function to debounce.
|
|
98
|
+
* @param {number} [wait=0] - The number of milliseconds to delay.
|
|
99
|
+
* @param {Object} [options] - The options object to pass to `debounce`.
|
|
100
|
+
* @param {Function} [resolver] - The function to resolve the cache key for memoization.
|
|
101
|
+
* @returns {Function} A new debounced and memoized function.
|
|
102
|
+
*
|
|
103
|
+
* @example
|
|
104
|
+
* const debouncedFunction = memoizeDebounce(myFunction, 300, { leading: true }, myResolver);
|
|
105
|
+
* debouncedFunction(arg1, arg2);
|
|
106
|
+
*/
|
|
107
|
+
function memoizeDebounce(func) {
|
|
108
|
+
var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
109
|
+
var options = arguments.length > 2 ? arguments[2] : undefined;
|
|
110
|
+
var resolver = arguments.length > 3 ? arguments[3] : undefined;
|
|
111
|
+
var mem = memoize(function () {
|
|
112
|
+
return debounce(func, wait, options);
|
|
113
|
+
}, resolver);
|
|
114
|
+
return function () {
|
|
115
|
+
return mem.apply(void 0, arguments).apply(void 0, arguments);
|
|
116
|
+
};
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/**
|
|
120
|
+
* 🧱 Internal: Editor FE Platform
|
|
121
|
+
*
|
|
122
|
+
* Debounced and memoized version of `replaceNodeViews`.
|
|
123
|
+
*
|
|
124
|
+
* This function is designed to update the `nodeViews` property of an `EditorView` after a
|
|
125
|
+
* period of inactivity (debounce), ensuring that multiple rapid updates do not occur in quick
|
|
126
|
+
* succession. It uses lodash's `debounce` to handle the debouncing.
|
|
127
|
+
*
|
|
128
|
+
* Memoization is crucial here to ensure that each `EditorView` instance has its own opportunity
|
|
129
|
+
* to update the node views. Without memoization, if you have multiple `EditorView` instances on
|
|
130
|
+
* the same page, only one instance would potentially call `view.setProps`, which could lead to
|
|
131
|
+
* incorrect or missing updates in other `EditorView` instances. By memoizing the debounced function,
|
|
132
|
+
* we ensure that each `EditorView` maintains its own debounced update logic.
|
|
133
|
+
*
|
|
134
|
+
* @param {CacheLoadedReactNodeViews} cache - A WeakMap that stores the loaded node views for each
|
|
135
|
+
* `EditorView`. The key is the `EditorView`, and the value is a record of node type names
|
|
136
|
+
* to their corresponding `NodeViewConstructor`.
|
|
137
|
+
* @param {EditorView} view - The ProseMirror `EditorView` instance whose `nodeViews` property
|
|
138
|
+
* needs to be updated.
|
|
139
|
+
*
|
|
140
|
+
* This function is typically not called directly. Instead, it is invoked through `queueReplaceNodeViews`,
|
|
141
|
+
* which handles adding node views to the cache and triggering this debounced update.
|
|
142
|
+
*/
|
|
143
|
+
export var debouncedReplaceNodeviews = memoizeDebounce(replaceNodeViews, 0,
|
|
144
|
+
/**
|
|
145
|
+
* Use the default debounce options:
|
|
146
|
+
* {leading: false, trailing: true}
|
|
147
|
+
*/
|
|
148
|
+
undefined, function (cache, view) {
|
|
149
|
+
/**
|
|
150
|
+
* EditorView is a singleton.
|
|
151
|
+
* There is only one instance per Editor.
|
|
152
|
+
*/
|
|
153
|
+
return view;
|
|
154
|
+
});
|
|
155
|
+
|
|
87
156
|
/**
|
|
88
157
|
* 🧱 Internal: Editor FE Platform
|
|
89
158
|
*/
|
|
@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
7
7
|
import { isFedRamp } from './environment';
|
|
8
8
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
9
9
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
10
|
-
var packageVersion = "87.6.
|
|
10
|
+
var packageVersion = "87.6.1";
|
|
11
11
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
12
12
|
// Remove URL as it has UGC
|
|
13
13
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -16,12 +16,11 @@ export var CodeBlockSharedCssClassName = {
|
|
|
16
16
|
DS_CODEBLOCK: '[data-ds--code--code-block]',
|
|
17
17
|
CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP: 'line-number-gutter--fg-wrap',
|
|
18
18
|
CODEBLOCK_CONTENT_WRAPPED: 'code-content--wrapped',
|
|
19
|
-
CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED: 'code-content__line-number--wrapped'
|
|
19
|
+
CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED: 'code-content__line-number--wrapped',
|
|
20
|
+
CODEBLOCK_WRAPPED: 'code-block--wrapped'
|
|
20
21
|
};
|
|
21
|
-
|
|
22
|
-
// TODO: ED-24222 Remove flex styling and hardcoded word
|
|
23
22
|
export var codeBlockSharedStyles = function codeBlockSharedStyles() {
|
|
24
|
-
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tposition: relative;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tmargin: ", " 0 0 0;\n\t\tfont-family: ", ";\n\t\tmin-width: ", "px;\n\t\tcursor: pointer;\n\n\t\t--ds--code--bg-color: transparent;\n\n\t\t/* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n\t\twhite-space: normal;\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\ttop: 0px;\n\t\t\tleft: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\tbottom: 0px;\n\t\t\tright: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tdisplay: flex;\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 100%;\n\t\t\tcounter-reset: line;\n\t\t\toverflow-x: auto;\n\n\t\t\tbackground-image: ", ";\n\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-attachment: local, local, local, local, scroll, scroll, scroll, scroll;\n\t\t\tbackground-size:\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%;\n\t\t\tbackground-position:\n\t\t\t\t0 0,\n\t\t\t\t0 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t0 0,\n\t\t\t\t0 0;\n\n\t\t\t/* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n\t\t\toverflow-y: hidden;\n\t\t}\n\n\t\t.", " {\n\t\t\tflex-shrink: 0;\n\t\t\ttext-align: right;\n\t\t\tbackground-color: ", ";\n\t\t\tpadding: ", ";\n\t\t\tposition: relative;\n\n\t\t\tspan {\n\t\t\t\tdisplay: block;\n\t\t\t\tline-height: 0;\n\t\t\t\tfont-size: 0;\n\n\t\t\t\t::before {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tcontent: counter(line);\n\t\t\t\t\tcounter-increment: line;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t\tline-height: 1.5rem;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tpadding: ", ";\n\t\t\tposition: relative;\n\t\t\twidth: 1rem;\n\t\t}\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex: 1;\n\n\t\t\tcode {\n\t\t\t\tflex-grow: 1;\n\t\t\t\ttab-size: 4;\n\t\t\t\tcursor: text;\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: ", ";\n\t\t\t\tmargin: ", ";\n\t\t\t\twhite-space: pre;\n\t\t\t\tfont-size: ", ";\n\t\t\t\tline-height: 1.5rem;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcode {\n\t\t\t\tcounter-reset: line var(--line-num, 0);\n\t\t\t\tword-break: break-word;\n\t\t\t\twhite-space: pre-wrap;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcounter-increment: line;\n\t\t\tline-height: 1rem;\n\t\t\tpointer-events: none;\n\n\t\t\t::before {\n\t\t\t\ttext-align: right;\n\t\t\t\tmin-width: 1.5rem;\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 1rem;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding-right: ", ";\n\t\t\t\tpadding-left: ", ";\n\t\t\t\tmargin-top: ", ";\n\t\t\t\tmargin-right: ", ";\n\t\t\t\tleft: -0.5rem;\n\t\t\t\tcolor: ", ";\n\t\t\t\tfont-size: ", ";\n\t\t\t\tcontent: counter(line);\n\t\t\t}\n\t\t}\n\t}\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", "var(--ds-border-radius, 3px)", blockNodesVerticalMargin, akEditorCodeFontFamily, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", overflowShadow({
|
|
23
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", "\n\t\t> .", "\n\t\t> .", "\n\t\tcode {\n\t\tword-break: break-word;\n\t\twhite-space: pre-wrap;\n\t}\n\n\t.", " {\n\t\tposition: relative;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tmargin: ", " 0 0 0;\n\t\tfont-family: ", ";\n\t\tmin-width: ", "px;\n\t\tcursor: pointer;\n\n\t\t--ds--code--bg-color: transparent;\n\n\t\t/* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n\t\twhite-space: normal;\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\ttop: 0px;\n\t\t\tleft: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\tbottom: 0px;\n\t\t\tright: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tword-break: break-word;\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tdisplay: flex;\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 100%;\n\t\t\tcounter-reset: line;\n\t\t\toverflow-x: auto;\n\n\t\t\tbackground-image: ", ";\n\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-attachment: local, local, local, local, scroll, scroll, scroll, scroll;\n\t\t\tbackground-size:\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%;\n\t\t\tbackground-position:\n\t\t\t\t0 0,\n\t\t\t\t0 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t0 0,\n\t\t\t\t0 0;\n\n\t\t\t/* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n\t\t\toverflow-y: hidden;\n\t\t}\n\n\t\t.", " {\n\t\t\tflex-shrink: 0;\n\t\t\ttext-align: right;\n\t\t\tbackground-color: ", ";\n\t\t\tpadding: ", ";\n\t\t\tposition: relative;\n\n\t\t\tspan {\n\t\t\t\tdisplay: block;\n\t\t\t\tline-height: 0;\n\t\t\t\tfont-size: 0;\n\n\t\t\t\t::before {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tcontent: counter(line);\n\t\t\t\t\tcounter-increment: line;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t\tline-height: 1.5rem;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tpadding: ", ";\n\t\t\tposition: relative;\n\t\t\twidth: 1rem;\n\t\t}\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex: 1;\n\n\t\t\tcode {\n\t\t\t\tflex-grow: 1;\n\t\t\t\ttab-size: 4;\n\t\t\t\tcursor: text;\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: ", ";\n\t\t\t\tmargin: ", ";\n\t\t\t\twhite-space: pre;\n\t\t\t\tfont-size: ", ";\n\t\t\t\tline-height: 1.5rem;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcode {\n\t\t\t\tcounter-reset: line var(--line-num, 0);\n\t\t\t\tword-break: break-word;\n\t\t\t\twhite-space: pre-wrap;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcounter-increment: line;\n\t\t\tline-height: 1rem;\n\t\t\tpointer-events: none;\n\n\t\t\t::before {\n\t\t\t\ttext-align: right;\n\t\t\t\tmin-width: 1.5rem;\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 1rem;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding-right: ", ";\n\t\t\t\tpadding-left: ", ";\n\t\t\t\tmargin-top: ", ";\n\t\t\t\tmargin-right: ", ";\n\t\t\t\tleft: -0.5rem;\n\t\t\t\tcolor: ", ";\n\t\t\t\tfont-size: ", ";\n\t\t\t\tcontent: counter(line);\n\t\t\t}\n\t\t}\n\t}\n"])), CodeBlockSharedCssClassName.CODEBLOCK_WRAPPED, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", "var(--ds-border-radius, 3px)", blockNodesVerticalMargin, akEditorCodeFontFamily, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_WRAPPED, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", overflowShadow({
|
|
25
24
|
leftCoverWidth: "var(--ds-space-300, 24px)"
|
|
26
25
|
}), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-neutral, ".concat(N30, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(N400, ")"), relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP, "var(--ds-background-neutral, ".concat(N30, ")"), "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-text, ".concat(N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED, "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(N400, ")"), relativeFontSizeToBase16(fontSize()));
|
|
27
26
|
};
|
|
@@ -20,7 +20,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
|
|
|
20
20
|
import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
|
|
21
21
|
import Layer from '../Layer';
|
|
22
22
|
var packageName = "@atlaskit/editor-common";
|
|
23
|
-
var packageVersion = "87.6.
|
|
23
|
+
var packageVersion = "87.6.1";
|
|
24
24
|
var halfFocusRing = 1;
|
|
25
25
|
var dropOffset = '0, 8';
|
|
26
26
|
var DropList = /*#__PURE__*/function (_Component) {
|
|
@@ -97,6 +97,8 @@ export declare const focusToContextMenuTrigger: Keymap;
|
|
|
97
97
|
export declare const dragToMoveUp: Keymap;
|
|
98
98
|
export declare const dragToMoveDown: Keymap;
|
|
99
99
|
export declare const showElementDragHandle: Keymap;
|
|
100
|
+
export declare const continueInRovoChat: Keymap;
|
|
101
|
+
export declare function formatShortcut(keymap: Keymap): string | undefined;
|
|
100
102
|
export declare function tooltip(keymap?: Keymap, description?: string): string | undefined;
|
|
101
103
|
export declare const ToolTipContent: React.MemoExoticComponent<({ description, shortcutOverride, keymap, }: {
|
|
102
104
|
description?: string | React.ReactNode;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import type { Decoration, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
3
3
|
import type { DispatchAnalyticsEvent } from '../analytics';
|
|
4
|
-
import type { NodeViewConstructor } from './types';
|
|
4
|
+
import type { IgnoreMutationParam, NodeViewConstructor } from './types';
|
|
5
5
|
export { convertToInlineCss } from './css-helper';
|
|
6
6
|
export type { NodeViewConstructor };
|
|
7
7
|
/**
|
|
@@ -20,6 +20,9 @@ export type LazyLoadingProps<NodeViewOptions> = {
|
|
|
20
20
|
loader: () => Promise<CreateReactNodeViewProps<NodeViewOptions>>;
|
|
21
21
|
getNodeViewOptions: () => NodeViewOptions;
|
|
22
22
|
dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
|
|
23
|
+
lazyNodeViewOptions?: {
|
|
24
|
+
ignoreMutationDelegate?: (mutation: IgnoreMutationParam) => boolean;
|
|
25
|
+
};
|
|
23
26
|
};
|
|
24
27
|
/**
|
|
25
28
|
* 📢 Public: Any EditorPlugin can use this function
|
|
@@ -61,4 +64,4 @@ export type LazyLoadingProps<NodeViewOptions> = {
|
|
|
61
64
|
*
|
|
62
65
|
* // Then, use `lazyTableView` in ProseMirror editor setup to enhance 'table' nodes with lazy loading
|
|
63
66
|
*/
|
|
64
|
-
export declare const withLazyLoading: <Options>({ nodeName, loader, getNodeViewOptions, dispatchAnalyticsEvent, }: LazyLoadingProps<Options>) => NodeViewConstructor;
|
|
67
|
+
export declare const withLazyLoading: <Options>({ nodeName, loader, getNodeViewOptions, dispatchAnalyticsEvent, lazyNodeViewOptions: { ignoreMutationDelegate }, }: LazyLoadingProps<Options>) => NodeViewConstructor;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
3
|
+
import type { IgnoreMutationParam } from './types';
|
|
3
4
|
/**
|
|
4
5
|
* 🧱 Internal: Editor FE Platform
|
|
5
6
|
*
|
|
@@ -8,5 +9,9 @@ import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
|
8
9
|
export declare class LazyNodeView implements NodeView {
|
|
9
10
|
dom: Node;
|
|
10
11
|
contentDOM?: HTMLElement;
|
|
11
|
-
|
|
12
|
+
private ignoreMutationDelegate?;
|
|
13
|
+
constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, options?: {
|
|
14
|
+
ignoreMutationDelegate?: (mutation: IgnoreMutationParam) => boolean;
|
|
15
|
+
});
|
|
16
|
+
ignoreMutation(mutation: IgnoreMutationParam): boolean;
|
|
12
17
|
}
|
|
@@ -1,40 +1,30 @@
|
|
|
1
|
-
/// <reference types="lodash" />
|
|
2
1
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
3
2
|
import type { CacheLoadedReactNodeViews, NodeViewConstructor } from './types';
|
|
4
3
|
/**
|
|
5
4
|
* 🧱 Internal: Editor FE Platform
|
|
6
5
|
*
|
|
7
|
-
*
|
|
6
|
+
* Debounced and memoized version of `replaceNodeViews`.
|
|
8
7
|
*
|
|
9
|
-
* This function is
|
|
10
|
-
*
|
|
11
|
-
*
|
|
8
|
+
* This function is designed to update the `nodeViews` property of an `EditorView` after a
|
|
9
|
+
* period of inactivity (debounce), ensuring that multiple rapid updates do not occur in quick
|
|
10
|
+
* succession. It uses lodash's `debounce` to handle the debouncing.
|
|
12
11
|
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* `
|
|
17
|
-
* `
|
|
12
|
+
* Memoization is crucial here to ensure that each `EditorView` instance has its own opportunity
|
|
13
|
+
* to update the node views. Without memoization, if you have multiple `EditorView` instances on
|
|
14
|
+
* the same page, only one instance would potentially call `view.setProps`, which could lead to
|
|
15
|
+
* incorrect or missing updates in other `EditorView` instances. By memoizing the debounced function,
|
|
16
|
+
* we ensure that each `EditorView` maintains its own debounced update logic.
|
|
18
17
|
*
|
|
19
|
-
* @param {
|
|
20
|
-
*
|
|
21
|
-
*
|
|
18
|
+
* @param {CacheLoadedReactNodeViews} cache - A WeakMap that stores the loaded node views for each
|
|
19
|
+
* `EditorView`. The key is the `EditorView`, and the value is a record of node type names
|
|
20
|
+
* to their corresponding `NodeViewConstructor`.
|
|
22
21
|
* @param {EditorView} view - The ProseMirror `EditorView` instance whose `nodeViews` property
|
|
23
22
|
* needs to be updated.
|
|
24
23
|
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
* const view = new EditorView(...);
|
|
28
|
-
*
|
|
29
|
-
* // Assume some node views have been loaded and stored in the cache
|
|
30
|
-
* cache.set(view, {
|
|
31
|
-
* 'table': TableViewConstructor,
|
|
32
|
-
* 'tableCell': TableCellViewConstructor,
|
|
33
|
-
* });
|
|
34
|
-
*
|
|
35
|
-
* debouncedReplaceNodeviews(cache, view);
|
|
24
|
+
* This function is typically not called directly. Instead, it is invoked through `queueReplaceNodeViews`,
|
|
25
|
+
* which handles adding node views to the cache and triggering this debounced update.
|
|
36
26
|
*/
|
|
37
|
-
export declare const debouncedReplaceNodeviews:
|
|
27
|
+
export declare const debouncedReplaceNodeviews: (cache: CacheLoadedReactNodeViews, view: EditorView) => void | undefined;
|
|
38
28
|
/**
|
|
39
29
|
* 🧱 Internal: Editor FE Platform
|
|
40
30
|
*/
|
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import type { Decoration, DecorationSource, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
3
|
+
/**
|
|
4
|
+
* 🧱 Internal: Editor FE Platform
|
|
5
|
+
*/
|
|
6
|
+
export type IgnoreMutationParam = MutationRecord | {
|
|
7
|
+
type: 'selection';
|
|
8
|
+
target: Element;
|
|
9
|
+
};
|
|
3
10
|
/**
|
|
4
11
|
* 🧱 Internal: Editor FE Platform
|
|
5
12
|
*/
|
|
@@ -9,6 +9,7 @@ export declare const CodeBlockSharedCssClassName: {
|
|
|
9
9
|
CODEBLOCK_LINE_NUMBER_GUTTER_FG_WRAP: string;
|
|
10
10
|
CODEBLOCK_CONTENT_WRAPPED: string;
|
|
11
11
|
CODEBLOCK_CONTAINER_LINE_NUMBER_WRAPPED: string;
|
|
12
|
+
CODEBLOCK_WRAPPED: string;
|
|
12
13
|
};
|
|
13
14
|
export declare const codeBlockSharedStyles: () => import("@emotion/react").SerializedStyles;
|
|
14
15
|
export declare const codeBlockInListSafariFix: import("@emotion/react").SerializedStyles;
|
|
@@ -97,6 +97,8 @@ export declare const focusToContextMenuTrigger: Keymap;
|
|
|
97
97
|
export declare const dragToMoveUp: Keymap;
|
|
98
98
|
export declare const dragToMoveDown: Keymap;
|
|
99
99
|
export declare const showElementDragHandle: Keymap;
|
|
100
|
+
export declare const continueInRovoChat: Keymap;
|
|
101
|
+
export declare function formatShortcut(keymap: Keymap): string | undefined;
|
|
100
102
|
export declare function tooltip(keymap?: Keymap, description?: string): string | undefined;
|
|
101
103
|
export declare const ToolTipContent: React.MemoExoticComponent<({ description, shortcutOverride, keymap, }: {
|
|
102
104
|
description?: string | React.ReactNode;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import type { Decoration, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
3
3
|
import type { DispatchAnalyticsEvent } from '../analytics';
|
|
4
|
-
import type { NodeViewConstructor } from './types';
|
|
4
|
+
import type { IgnoreMutationParam, NodeViewConstructor } from './types';
|
|
5
5
|
export { convertToInlineCss } from './css-helper';
|
|
6
6
|
export type { NodeViewConstructor };
|
|
7
7
|
/**
|
|
@@ -20,6 +20,9 @@ export type LazyLoadingProps<NodeViewOptions> = {
|
|
|
20
20
|
loader: () => Promise<CreateReactNodeViewProps<NodeViewOptions>>;
|
|
21
21
|
getNodeViewOptions: () => NodeViewOptions;
|
|
22
22
|
dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
|
|
23
|
+
lazyNodeViewOptions?: {
|
|
24
|
+
ignoreMutationDelegate?: (mutation: IgnoreMutationParam) => boolean;
|
|
25
|
+
};
|
|
23
26
|
};
|
|
24
27
|
/**
|
|
25
28
|
* 📢 Public: Any EditorPlugin can use this function
|
|
@@ -61,4 +64,4 @@ export type LazyLoadingProps<NodeViewOptions> = {
|
|
|
61
64
|
*
|
|
62
65
|
* // Then, use `lazyTableView` in ProseMirror editor setup to enhance 'table' nodes with lazy loading
|
|
63
66
|
*/
|
|
64
|
-
export declare const withLazyLoading: <Options>({ nodeName, loader, getNodeViewOptions, dispatchAnalyticsEvent, }: LazyLoadingProps<Options>) => NodeViewConstructor;
|
|
67
|
+
export declare const withLazyLoading: <Options>({ nodeName, loader, getNodeViewOptions, dispatchAnalyticsEvent, lazyNodeViewOptions: { ignoreMutationDelegate }, }: LazyLoadingProps<Options>) => NodeViewConstructor;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
3
|
+
import type { IgnoreMutationParam } from './types';
|
|
3
4
|
/**
|
|
4
5
|
* 🧱 Internal: Editor FE Platform
|
|
5
6
|
*
|
|
@@ -8,5 +9,9 @@ import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
|
8
9
|
export declare class LazyNodeView implements NodeView {
|
|
9
10
|
dom: Node;
|
|
10
11
|
contentDOM?: HTMLElement;
|
|
11
|
-
|
|
12
|
+
private ignoreMutationDelegate?;
|
|
13
|
+
constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, options?: {
|
|
14
|
+
ignoreMutationDelegate?: (mutation: IgnoreMutationParam) => boolean;
|
|
15
|
+
});
|
|
16
|
+
ignoreMutation(mutation: IgnoreMutationParam): boolean;
|
|
12
17
|
}
|
|
@@ -1,40 +1,30 @@
|
|
|
1
|
-
/// <reference types="lodash" />
|
|
2
1
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
3
2
|
import type { CacheLoadedReactNodeViews, NodeViewConstructor } from './types';
|
|
4
3
|
/**
|
|
5
4
|
* 🧱 Internal: Editor FE Platform
|
|
6
5
|
*
|
|
7
|
-
*
|
|
6
|
+
* Debounced and memoized version of `replaceNodeViews`.
|
|
8
7
|
*
|
|
9
|
-
* This function is
|
|
10
|
-
*
|
|
11
|
-
*
|
|
8
|
+
* This function is designed to update the `nodeViews` property of an `EditorView` after a
|
|
9
|
+
* period of inactivity (debounce), ensuring that multiple rapid updates do not occur in quick
|
|
10
|
+
* succession. It uses lodash's `debounce` to handle the debouncing.
|
|
12
11
|
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* `
|
|
17
|
-
* `
|
|
12
|
+
* Memoization is crucial here to ensure that each `EditorView` instance has its own opportunity
|
|
13
|
+
* to update the node views. Without memoization, if you have multiple `EditorView` instances on
|
|
14
|
+
* the same page, only one instance would potentially call `view.setProps`, which could lead to
|
|
15
|
+
* incorrect or missing updates in other `EditorView` instances. By memoizing the debounced function,
|
|
16
|
+
* we ensure that each `EditorView` maintains its own debounced update logic.
|
|
18
17
|
*
|
|
19
|
-
* @param {
|
|
20
|
-
*
|
|
21
|
-
*
|
|
18
|
+
* @param {CacheLoadedReactNodeViews} cache - A WeakMap that stores the loaded node views for each
|
|
19
|
+
* `EditorView`. The key is the `EditorView`, and the value is a record of node type names
|
|
20
|
+
* to their corresponding `NodeViewConstructor`.
|
|
22
21
|
* @param {EditorView} view - The ProseMirror `EditorView` instance whose `nodeViews` property
|
|
23
22
|
* needs to be updated.
|
|
24
23
|
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
* const view = new EditorView(...);
|
|
28
|
-
*
|
|
29
|
-
* // Assume some node views have been loaded and stored in the cache
|
|
30
|
-
* cache.set(view, {
|
|
31
|
-
* 'table': TableViewConstructor,
|
|
32
|
-
* 'tableCell': TableCellViewConstructor,
|
|
33
|
-
* });
|
|
34
|
-
*
|
|
35
|
-
* debouncedReplaceNodeviews(cache, view);
|
|
24
|
+
* This function is typically not called directly. Instead, it is invoked through `queueReplaceNodeViews`,
|
|
25
|
+
* which handles adding node views to the cache and triggering this debounced update.
|
|
36
26
|
*/
|
|
37
|
-
export declare const debouncedReplaceNodeviews:
|
|
27
|
+
export declare const debouncedReplaceNodeviews: (cache: CacheLoadedReactNodeViews, view: EditorView) => void | undefined;
|
|
38
28
|
/**
|
|
39
29
|
* 🧱 Internal: Editor FE Platform
|
|
40
30
|
*/
|