@atlaskit/editor-common 85.2.0 → 86.1.0
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 +32 -0
- package/dist/cjs/lazy-node-view/index.js +217 -0
- package/dist/cjs/link/ConfigureLinkOverlay/Dropdown.js +19 -4
- package/dist/cjs/link/ConfigureLinkOverlay/index.js +2 -1
- package/dist/cjs/link/constants.js +2 -4
- package/dist/cjs/link/index.js +0 -13
- package/dist/cjs/link/utils.js +1 -12
- package/dist/cjs/messages/help-dialog.js +5 -0
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/cjs/ui-menu/DropdownMenu/index.js +4 -4
- package/dist/cjs/ui-menu/ToolbarButton/index.js +7 -1
- package/dist/es2019/lazy-node-view/index.js +212 -0
- package/dist/es2019/link/ConfigureLinkOverlay/Dropdown.js +17 -4
- package/dist/es2019/link/ConfigureLinkOverlay/index.js +2 -1
- package/dist/es2019/link/constants.js +1 -3
- package/dist/es2019/link/index.js +0 -1
- package/dist/es2019/link/utils.js +2 -13
- package/dist/es2019/messages/help-dialog.js +5 -0
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/es2019/ui-menu/DropdownMenu/index.js +4 -4
- package/dist/es2019/ui-menu/ToolbarButton/index.js +7 -1
- package/dist/esm/lazy-node-view/index.js +211 -0
- package/dist/esm/link/ConfigureLinkOverlay/Dropdown.js +19 -4
- package/dist/esm/link/ConfigureLinkOverlay/index.js +2 -1
- package/dist/esm/link/constants.js +1 -3
- package/dist/esm/link/index.js +0 -1
- package/dist/esm/link/utils.js +2 -13
- package/dist/esm/messages/help-dialog.js +5 -0
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/esm/ui-menu/DropdownMenu/index.js +4 -4
- package/dist/esm/ui-menu/ToolbarButton/index.js +7 -1
- package/dist/types/lazy-node-view/index.d.ts +109 -0
- package/dist/types/link/ConfigureLinkOverlay/Dropdown.d.ts +2 -0
- package/dist/types/link/constants.d.ts +0 -2
- package/dist/types/link/index.d.ts +0 -1
- package/dist/types/messages/help-dialog.d.ts +5 -0
- package/dist/types/ui-menu/ToolbarButton/index.d.ts +3 -0
- package/dist/types-ts4.5/lazy-node-view/index.d.ts +109 -0
- package/dist/types-ts4.5/link/ConfigureLinkOverlay/Dropdown.d.ts +2 -0
- package/dist/types-ts4.5/link/constants.d.ts +0 -2
- package/dist/types-ts4.5/link/index.d.ts +0 -1
- package/dist/types-ts4.5/messages/help-dialog.d.ts +5 -0
- package/dist/types-ts4.5/ui-menu/ToolbarButton/index.d.ts +3 -0
- package/lazy-node-view/package.json +15 -0
- package/package.json +5 -7
|
@@ -87,7 +87,8 @@ export var OverlayButton = withAnalyticsContext()(function (_ref) {
|
|
|
87
87
|
}, showDropdown ? jsx(Dropdown, {
|
|
88
88
|
testId: testId,
|
|
89
89
|
onConfigureClick: handleConfigureClick,
|
|
90
|
-
onDropdownChange: onDropdownChange
|
|
90
|
+
onDropdownChange: onDropdownChange,
|
|
91
|
+
editorView: editorView
|
|
91
92
|
}) : jsx(Tooltip, {
|
|
92
93
|
content: configureLinkLabel,
|
|
93
94
|
hideTooltipOnClick: true,
|
|
@@ -1,3 +1 @@
|
|
|
1
|
-
export var linkPreferencesPath = '/manage-profile/link-preferences';
|
|
2
|
-
export var stagingLinkPreferencesUrl = 'https://id.stg.internal.atlassian.com/manage-profile/link-preferences';
|
|
3
|
-
export var productionLinkPreferencesUrl = 'https://id.atlassian.com/manage-profile/link-preferences';
|
|
1
|
+
export var linkPreferencesPath = '/manage-profile/link-preferences';
|
package/dist/esm/link/index.js
CHANGED
|
@@ -9,5 +9,4 @@ export { HyperlinkAddToolbar } from './LinkPicker/HyperlinkAddToolbar';
|
|
|
9
9
|
export { default as HyperlinkLinkAddToolbar, HyperlinkLinkAddToolbarWithIntl, RECENT_SEARCH_LIST_SIZE } from './LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar';
|
|
10
10
|
export { sha1 } from './LinkPicker/HyperlinkAddToolbar/utils';
|
|
11
11
|
export { isLinkAtPos, isTextAtPos, getLinkPreferencesURLFromENV } from './utils';
|
|
12
|
-
export { stagingLinkPreferencesUrl, productionLinkPreferencesUrl } from './constants';
|
|
13
12
|
export { OverlayButton } from './ConfigureLinkOverlay';
|
package/dist/esm/link/utils.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { getATLContextUrl } from '@atlaskit/atlassian-context';
|
|
2
|
-
import {
|
|
3
|
-
import { linkPreferencesPath, productionLinkPreferencesUrl, stagingLinkPreferencesUrl } from './constants';
|
|
2
|
+
import { linkPreferencesPath } from './constants';
|
|
4
3
|
export function isTextAtPos(pos) {
|
|
5
4
|
return function (state) {
|
|
6
5
|
var node = state.doc.nodeAt(pos);
|
|
@@ -14,15 +13,5 @@ export function isLinkAtPos(pos) {
|
|
|
14
13
|
};
|
|
15
14
|
}
|
|
16
15
|
export var getLinkPreferencesURLFromENV = function getLinkPreferencesURLFromENV() {
|
|
17
|
-
|
|
18
|
-
return getATLContextUrl('id') + linkPreferencesPath;
|
|
19
|
-
}
|
|
20
|
-
if (process.env.NODE_ENV === 'production' && process.env.CLOUD_ENV === 'staging') {
|
|
21
|
-
// only a production CLOUD_ENV staging environment has a different link preferences URL
|
|
22
|
-
return stagingLinkPreferencesUrl;
|
|
23
|
-
} else if (process.env.NODE_ENV === 'production') {
|
|
24
|
-
return productionLinkPreferencesUrl;
|
|
25
|
-
} else {
|
|
26
|
-
return stagingLinkPreferencesUrl;
|
|
27
|
-
}
|
|
16
|
+
return getATLContextUrl('id') + linkPreferencesPath;
|
|
28
17
|
};
|
|
@@ -70,6 +70,11 @@ export var helpDialogMessages = defineMessages({
|
|
|
70
70
|
defaultMessage: 'Decrease table or media size',
|
|
71
71
|
description: 'The text is shown as an shortcut description in help dialog modal, when the user uses the described shortcut, he is able to decrease the width of the selected element. Optimal characters less than 21.'
|
|
72
72
|
},
|
|
73
|
+
openCellOptions: {
|
|
74
|
+
id: 'fabric.editor.openCellOptions',
|
|
75
|
+
defaultMessage: 'Open cell options',
|
|
76
|
+
description: 'Keyboard shortcut to open cell options.'
|
|
77
|
+
},
|
|
73
78
|
focusTableResizeHandle: {
|
|
74
79
|
id: 'fabric.editor.focusTableResizeHandle',
|
|
75
80
|
defaultMessage: 'Focus table resize handle',
|
|
@@ -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 = "
|
|
10
|
+
var packageVersion = "86.1.0";
|
|
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
|
|
@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
|
|
|
17
17
|
import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
|
|
18
18
|
import Layer from '../Layer';
|
|
19
19
|
var packageName = "@atlaskit/editor-common";
|
|
20
|
-
var packageVersion = "
|
|
20
|
+
var packageVersion = "86.1.0";
|
|
21
21
|
var halfFocusRing = 1;
|
|
22
22
|
var dropOffset = '0, 8';
|
|
23
23
|
var DropList = /*#__PURE__*/function (_Component) {
|
|
@@ -94,7 +94,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
|
|
|
94
94
|
_defineProperty(_assertThisInitialized(_this), "handleCloseAndFocus", function (event) {
|
|
95
95
|
var _this$state$target;
|
|
96
96
|
(_this$state$target = _this.state.target) === null || _this$state$target === void 0 || (_this$state$target = _this$state$target.querySelector('button')) === null || _this$state$target === void 0 || _this$state$target.focus();
|
|
97
|
-
if (fg('
|
|
97
|
+
if (fg('platform_editor_a11y_table_context_menu')) {
|
|
98
98
|
_this.handleClose(event);
|
|
99
99
|
} else {
|
|
100
100
|
_this.handleClose();
|
|
@@ -103,7 +103,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
|
|
|
103
103
|
_defineProperty(_assertThisInitialized(_this), "handleClose", function (event) {
|
|
104
104
|
var onOpenChange = _this.props.onOpenChange;
|
|
105
105
|
if (onOpenChange) {
|
|
106
|
-
if (fg('
|
|
106
|
+
if (fg('platform_editor_a11y_table_context_menu')) {
|
|
107
107
|
onOpenChange({
|
|
108
108
|
isOpen: false,
|
|
109
109
|
event: event
|
|
@@ -182,7 +182,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
|
|
|
182
182
|
handleClickOutside: this.handleClose,
|
|
183
183
|
handleEscapeKeydown: fg('platform-editor-a11y-image-border-options-dropdown') ? handleEscapeKeydown || this.handleCloseAndFocus : this.handleCloseAndFocus,
|
|
184
184
|
handleEnterKeydown: function handleEnterKeydown(e) {
|
|
185
|
-
if (fg('
|
|
185
|
+
if (fg('platform_editor_a11y_table_context_menu') || fg('platform-editor-a11y-image-border-options-dropdown')) {
|
|
186
186
|
if (!allowEnterDefaultBehavior) {
|
|
187
187
|
e.preventDefault();
|
|
188
188
|
}
|
|
@@ -355,7 +355,7 @@ export function DropdownMenuItem(_ref) {
|
|
|
355
355
|
item: item
|
|
356
356
|
});
|
|
357
357
|
},
|
|
358
|
-
"aria-expanded": fg('
|
|
358
|
+
"aria-expanded": fg('platform_editor_a11y_table_context_menu') ? item['aria-expanded'] : undefined
|
|
359
359
|
}, item.content));
|
|
360
360
|
if (item.tooltipDescription) {
|
|
361
361
|
var _item$key3;
|
|
@@ -9,8 +9,10 @@ import React, { useCallback } from 'react';
|
|
|
9
9
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
10
10
|
import { css, jsx } from '@emotion/react';
|
|
11
11
|
import { FabricChannel } from '@atlaskit/analytics-listeners';
|
|
12
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
13
|
import Tooltip from '@atlaskit/tooltip';
|
|
13
14
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TOOLBAR_ACTION_SUBJECT_ID } from '../../analytics';
|
|
15
|
+
import { ToolTipContent } from '../../keymaps';
|
|
14
16
|
import Button from './styles';
|
|
15
17
|
export var TOOLBAR_BUTTON = TOOLBAR_ACTION_SUBJECT_ID;
|
|
16
18
|
var buttonWrapper = css({
|
|
@@ -32,6 +34,7 @@ var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
32
34
|
children = props.children,
|
|
33
35
|
hideTooltip = props.hideTooltip,
|
|
34
36
|
title = props.title,
|
|
37
|
+
keymap = props.keymap,
|
|
35
38
|
_props$titlePosition = props.titlePosition,
|
|
36
39
|
titlePosition = _props$titlePosition === void 0 ? 'top' : _props$titlePosition,
|
|
37
40
|
item = props.item,
|
|
@@ -92,7 +95,10 @@ var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
92
95
|
if (!title) {
|
|
93
96
|
return button;
|
|
94
97
|
}
|
|
95
|
-
var tooltipContent =
|
|
98
|
+
var tooltipContent = hideTooltip ? null : fg('platform_editor_a11y_table_context_menu') ? jsx(ToolTipContent, {
|
|
99
|
+
description: title,
|
|
100
|
+
keymap: keymap
|
|
101
|
+
}) : title;
|
|
96
102
|
return jsx(Tooltip, {
|
|
97
103
|
content: tooltipContent,
|
|
98
104
|
hideTooltipOnClick: true,
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
/// <reference types="lodash" />
|
|
2
|
+
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
3
|
+
import type { Decoration, DecorationSource, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
+
import type { DispatchAnalyticsEvent } from '../analytics';
|
|
5
|
+
/**
|
|
6
|
+
* 📢 Public Type
|
|
7
|
+
*
|
|
8
|
+
* @see {withLazyLoading}
|
|
9
|
+
*/
|
|
10
|
+
export type CreateReactNodeViewProps<NodeViewOptions> = (node: PMNode, view: EditorView, getPos: () => number | undefined, decorations: readonly Decoration[], getNodeViewOptions: () => NodeViewOptions) => NodeView;
|
|
11
|
+
/**
|
|
12
|
+
* 📢 Public Type
|
|
13
|
+
*
|
|
14
|
+
* @see {withLazyLoading}
|
|
15
|
+
*/
|
|
16
|
+
export type LazyLoadingProps<NodeViewOptions> = {
|
|
17
|
+
nodeName: string;
|
|
18
|
+
loader: () => Promise<CreateReactNodeViewProps<NodeViewOptions>>;
|
|
19
|
+
getNodeViewOptions: () => NodeViewOptions;
|
|
20
|
+
dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* 🧱 Internal: Editor FE Platform
|
|
24
|
+
*/
|
|
25
|
+
export type NodeViewConstructor = (node: PMNode, view: EditorView, getPos: () => number | undefined, decorations: readonly Decoration[], innerDecorations: DecorationSource) => NodeView;
|
|
26
|
+
/**
|
|
27
|
+
* 🧱 Internal: Editor FE Platform
|
|
28
|
+
*/
|
|
29
|
+
type LoadedReactNodeViews = Record<string, NodeViewConstructor>;
|
|
30
|
+
/**
|
|
31
|
+
* 🧱 Internal: Editor FE Platform
|
|
32
|
+
*/
|
|
33
|
+
type CacheType = WeakMap<EditorView, LoadedReactNodeViews>;
|
|
34
|
+
/**
|
|
35
|
+
* 🧱 Internal: Editor FE Platform
|
|
36
|
+
*
|
|
37
|
+
* Debounces and replaces the node views in a ProseMirror editor with lazy-loaded node views.
|
|
38
|
+
*
|
|
39
|
+
* This function is used to update the `nodeViews` property of the `EditorView` after lazy-loaded
|
|
40
|
+
* node views have been loaded. It uses a debounced approach to ensure that the replacement does
|
|
41
|
+
* not happen too frequently, which can be performance-intensive.
|
|
42
|
+
*
|
|
43
|
+
* The function checks if there are any loaded node views in the cache associated with the given
|
|
44
|
+
* `EditorView`. If there are, it replaces the current `nodeViews` in the `EditorView` with the
|
|
45
|
+
* loaded node views. The replacement is scheduled using `requestIdleCallback` or
|
|
46
|
+
* `requestAnimationFrame` to avoid blocking the main thread, especially in Firefox where
|
|
47
|
+
* `requestIdleCallback` may not be supported.
|
|
48
|
+
*
|
|
49
|
+
* @param {WeakMap<EditorView, Record<string, NodeViewConstructor>>} cache - A WeakMap that stores
|
|
50
|
+
* the loaded node views for each `EditorView`. The key is the `EditorView`, and the value
|
|
51
|
+
* is a record of node type names to their corresponding `NodeViewConstructor`.
|
|
52
|
+
* @param {EditorView} view - The ProseMirror `EditorView` instance whose `nodeViews` property
|
|
53
|
+
* needs to be updated.
|
|
54
|
+
*
|
|
55
|
+
* @example
|
|
56
|
+
* const cache = new WeakMap();
|
|
57
|
+
* const view = new EditorView(...);
|
|
58
|
+
*
|
|
59
|
+
* // Assume some node views have been loaded and stored in the cache
|
|
60
|
+
* cache.set(view, {
|
|
61
|
+
* 'table': TableViewConstructor,
|
|
62
|
+
* 'tableCell': TableCellViewConstructor,
|
|
63
|
+
* });
|
|
64
|
+
*
|
|
65
|
+
* debouncedReplaceNodeviews(cache, view);
|
|
66
|
+
*/
|
|
67
|
+
export declare const debouncedReplaceNodeviews: import("lodash").DebouncedFunc<(cache: CacheType, view: EditorView) => void>;
|
|
68
|
+
/**
|
|
69
|
+
* 📢 Public: Any EditorPlugin can use this function
|
|
70
|
+
*
|
|
71
|
+
* Wraps a NodeView constructor with laziness, allowing the NodeView to be loaded only when required.
|
|
72
|
+
*
|
|
73
|
+
* This higher-order function is designed to optimize the loading and rendering performance
|
|
74
|
+
* of ProseMirror editor nodes by deferring the loading of their associated NodeViews until they are actually needed.
|
|
75
|
+
* This is particularly useful for complex or heavy NodeViews, such as tables, table cells, rows, and headers within
|
|
76
|
+
* the ProseMirror editor. By using dynamic imports (with promises), the initial load time of the editor can be significantly
|
|
77
|
+
* reduced, leading to a smoother and faster user experience.
|
|
78
|
+
*
|
|
79
|
+
* The function accepts configuration parameters including the node name, a loader function that dynamically imports
|
|
80
|
+
* the NodeView, and a function to retrieve NodeView options. It returns a NodeViewConstructor that ProseMirror
|
|
81
|
+
* can use when rendering nodes of the specified type.
|
|
82
|
+
*
|
|
83
|
+
* @template NodeViewOptions - The type parameter that describes the shape of the options object for the NodeView.
|
|
84
|
+
* @param {LazyLoadingProps<NodeViewOptions>} params - Configuration parameters for lazy loading.
|
|
85
|
+
* @param {string} params.nodeName - The name of the node (e.g., 'table', 'tableCell', 'tableHeader', 'tableRow') for which the lazy-loaded NodeView is intended.
|
|
86
|
+
* @param {() => Promise<CreateReactNodeViewProps<NodeViewOptions>>} params.loader - A function that, when called, returns a promise that resolves to the actual NodeView constructor. This function typically uses dynamic `import()` to load the NodeView code.
|
|
87
|
+
* @param {() => NodeViewOptions} params.getNodeViewOptions - A function that returns the options to be passed to the NodeView constructor. These options can include dependencies like `portalProviderAPI`, `eventDispatcher`, and others, which are necessary for the NodeView's operation.
|
|
88
|
+
* @param {DispatchAnalyticsEvent} [params.dispatchAnalyticsEvent] - An optional function for dispatching analytics events, which can be used to monitor the performance and usage of the lazy-loaded NodeViews.
|
|
89
|
+
* @returns {NodeViewConstructor} A constructor function for creating a NodeView that ProseMirror can instantiate when it encounters a node of the specified type. This constructor is a lightweight placeholder until the actual NodeView is loaded.
|
|
90
|
+
*
|
|
91
|
+
* @example
|
|
92
|
+
* // Lazy load a table NodeView with specific options
|
|
93
|
+
* const lazyTableView = withLazyLoading({
|
|
94
|
+
* nodeName: 'table',
|
|
95
|
+
* loader: () => import('./table').then(module => module.createTableView),
|
|
96
|
+
* getNodeViewOptions: () => ({
|
|
97
|
+
* portalProviderAPI,
|
|
98
|
+
* eventDispatcher,
|
|
99
|
+
* getEditorContainerWidth,
|
|
100
|
+
* getEditorFeatureFlags,
|
|
101
|
+
* dispatchAnalyticsEvent,
|
|
102
|
+
* pluginInjectionApi,
|
|
103
|
+
* }),
|
|
104
|
+
* });
|
|
105
|
+
*
|
|
106
|
+
* // Then, use `lazyTableView` in ProseMirror editor setup to enhance 'table' nodes with lazy loading
|
|
107
|
+
*/
|
|
108
|
+
export declare const withLazyLoading: <Options>({ nodeName, loader, getNodeViewOptions, dispatchAnalyticsEvent, }: LazyLoadingProps<Options>) => NodeViewConstructor;
|
|
109
|
+
export {};
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { type EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
2
3
|
export type OnDropdownChange = (isOpen: boolean) => void;
|
|
3
4
|
export type DropdownProps = {
|
|
4
5
|
/** Callback fired when the Configure dropdown item is clicked */
|
|
5
6
|
onConfigureClick: () => void;
|
|
6
7
|
/** Callback fired when the dropdown is open or close */
|
|
7
8
|
onDropdownChange?: OnDropdownChange;
|
|
9
|
+
editorView: EditorView;
|
|
8
10
|
testId: string;
|
|
9
11
|
};
|
|
10
12
|
declare const _default: import("react").ForwardRefExoticComponent<DropdownProps & import("@atlaskit/analytics-next").WithContextProps & import("react").RefAttributes<any>>;
|
|
@@ -1,3 +1 @@
|
|
|
1
1
|
export declare const linkPreferencesPath = "/manage-profile/link-preferences";
|
|
2
|
-
export declare const stagingLinkPreferencesUrl = "https://id.stg.internal.atlassian.com/manage-profile/link-preferences";
|
|
3
|
-
export declare const productionLinkPreferencesUrl = "https://id.atlassian.com/manage-profile/link-preferences";
|
|
@@ -14,6 +14,5 @@ export type { Props as HyperlinkLinkAddToolbarProps } from './LinkPicker/Hyperli
|
|
|
14
14
|
export type { HyperlinkAddToolbarProps } from './LinkPicker/HyperlinkAddToolbar';
|
|
15
15
|
export { sha1 } from './LinkPicker/HyperlinkAddToolbar/utils';
|
|
16
16
|
export { isLinkAtPos, isTextAtPos, getLinkPreferencesURLFromENV } from './utils';
|
|
17
|
-
export { stagingLinkPreferencesUrl, productionLinkPreferencesUrl } from './constants';
|
|
18
17
|
export { OverlayButton } from './ConfigureLinkOverlay';
|
|
19
18
|
export type { OverlayButtonProps } from './ConfigureLinkOverlay';
|
|
@@ -69,6 +69,11 @@ export declare const helpDialogMessages: {
|
|
|
69
69
|
defaultMessage: string;
|
|
70
70
|
description: string;
|
|
71
71
|
};
|
|
72
|
+
openCellOptions: {
|
|
73
|
+
id: string;
|
|
74
|
+
defaultMessage: string;
|
|
75
|
+
description: string;
|
|
76
|
+
};
|
|
72
77
|
focusTableResizeHandle: {
|
|
73
78
|
id: string;
|
|
74
79
|
defaultMessage: string;
|
|
@@ -3,6 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import type { ButtonProps } from '@atlaskit/button/types';
|
|
4
4
|
import type { PositionType } from '@atlaskit/tooltip';
|
|
5
5
|
import { TOOLBAR_ACTION_SUBJECT_ID } from '../../analytics';
|
|
6
|
+
import { type Keymap } from '../../keymaps';
|
|
6
7
|
import type { MenuItem } from '../DropdownMenu';
|
|
7
8
|
export declare const TOOLBAR_BUTTON: typeof TOOLBAR_ACTION_SUBJECT_ID;
|
|
8
9
|
export type Props = {
|
|
@@ -23,6 +24,7 @@ export type Props = {
|
|
|
23
24
|
titlePosition?: PositionType;
|
|
24
25
|
item?: MenuItem;
|
|
25
26
|
testId?: string;
|
|
27
|
+
keymap?: Keymap;
|
|
26
28
|
'aria-label'?: React.AriaAttributes['aria-label'];
|
|
27
29
|
'aria-expanded'?: React.AriaAttributes['aria-expanded'];
|
|
28
30
|
'aria-haspopup'?: React.AriaAttributes['aria-haspopup'];
|
|
@@ -48,6 +50,7 @@ declare const ToolbarButton: React.ForwardRefExoticComponent<{
|
|
|
48
50
|
titlePosition?: PositionType | undefined;
|
|
49
51
|
item?: MenuItem | undefined;
|
|
50
52
|
testId?: string | undefined;
|
|
53
|
+
keymap?: Keymap | undefined;
|
|
51
54
|
'aria-label'?: React.AriaAttributes['aria-label'];
|
|
52
55
|
'aria-expanded'?: React.AriaAttributes['aria-expanded'];
|
|
53
56
|
'aria-haspopup'?: React.AriaAttributes['aria-haspopup'];
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
/// <reference types="lodash" />
|
|
2
|
+
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
3
|
+
import type { Decoration, DecorationSource, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
+
import type { DispatchAnalyticsEvent } from '../analytics';
|
|
5
|
+
/**
|
|
6
|
+
* 📢 Public Type
|
|
7
|
+
*
|
|
8
|
+
* @see {withLazyLoading}
|
|
9
|
+
*/
|
|
10
|
+
export type CreateReactNodeViewProps<NodeViewOptions> = (node: PMNode, view: EditorView, getPos: () => number | undefined, decorations: readonly Decoration[], getNodeViewOptions: () => NodeViewOptions) => NodeView;
|
|
11
|
+
/**
|
|
12
|
+
* 📢 Public Type
|
|
13
|
+
*
|
|
14
|
+
* @see {withLazyLoading}
|
|
15
|
+
*/
|
|
16
|
+
export type LazyLoadingProps<NodeViewOptions> = {
|
|
17
|
+
nodeName: string;
|
|
18
|
+
loader: () => Promise<CreateReactNodeViewProps<NodeViewOptions>>;
|
|
19
|
+
getNodeViewOptions: () => NodeViewOptions;
|
|
20
|
+
dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* 🧱 Internal: Editor FE Platform
|
|
24
|
+
*/
|
|
25
|
+
export type NodeViewConstructor = (node: PMNode, view: EditorView, getPos: () => number | undefined, decorations: readonly Decoration[], innerDecorations: DecorationSource) => NodeView;
|
|
26
|
+
/**
|
|
27
|
+
* 🧱 Internal: Editor FE Platform
|
|
28
|
+
*/
|
|
29
|
+
type LoadedReactNodeViews = Record<string, NodeViewConstructor>;
|
|
30
|
+
/**
|
|
31
|
+
* 🧱 Internal: Editor FE Platform
|
|
32
|
+
*/
|
|
33
|
+
type CacheType = WeakMap<EditorView, LoadedReactNodeViews>;
|
|
34
|
+
/**
|
|
35
|
+
* 🧱 Internal: Editor FE Platform
|
|
36
|
+
*
|
|
37
|
+
* Debounces and replaces the node views in a ProseMirror editor with lazy-loaded node views.
|
|
38
|
+
*
|
|
39
|
+
* This function is used to update the `nodeViews` property of the `EditorView` after lazy-loaded
|
|
40
|
+
* node views have been loaded. It uses a debounced approach to ensure that the replacement does
|
|
41
|
+
* not happen too frequently, which can be performance-intensive.
|
|
42
|
+
*
|
|
43
|
+
* The function checks if there are any loaded node views in the cache associated with the given
|
|
44
|
+
* `EditorView`. If there are, it replaces the current `nodeViews` in the `EditorView` with the
|
|
45
|
+
* loaded node views. The replacement is scheduled using `requestIdleCallback` or
|
|
46
|
+
* `requestAnimationFrame` to avoid blocking the main thread, especially in Firefox where
|
|
47
|
+
* `requestIdleCallback` may not be supported.
|
|
48
|
+
*
|
|
49
|
+
* @param {WeakMap<EditorView, Record<string, NodeViewConstructor>>} cache - A WeakMap that stores
|
|
50
|
+
* the loaded node views for each `EditorView`. The key is the `EditorView`, and the value
|
|
51
|
+
* is a record of node type names to their corresponding `NodeViewConstructor`.
|
|
52
|
+
* @param {EditorView} view - The ProseMirror `EditorView` instance whose `nodeViews` property
|
|
53
|
+
* needs to be updated.
|
|
54
|
+
*
|
|
55
|
+
* @example
|
|
56
|
+
* const cache = new WeakMap();
|
|
57
|
+
* const view = new EditorView(...);
|
|
58
|
+
*
|
|
59
|
+
* // Assume some node views have been loaded and stored in the cache
|
|
60
|
+
* cache.set(view, {
|
|
61
|
+
* 'table': TableViewConstructor,
|
|
62
|
+
* 'tableCell': TableCellViewConstructor,
|
|
63
|
+
* });
|
|
64
|
+
*
|
|
65
|
+
* debouncedReplaceNodeviews(cache, view);
|
|
66
|
+
*/
|
|
67
|
+
export declare const debouncedReplaceNodeviews: import("lodash").DebouncedFunc<(cache: CacheType, view: EditorView) => void>;
|
|
68
|
+
/**
|
|
69
|
+
* 📢 Public: Any EditorPlugin can use this function
|
|
70
|
+
*
|
|
71
|
+
* Wraps a NodeView constructor with laziness, allowing the NodeView to be loaded only when required.
|
|
72
|
+
*
|
|
73
|
+
* This higher-order function is designed to optimize the loading and rendering performance
|
|
74
|
+
* of ProseMirror editor nodes by deferring the loading of their associated NodeViews until they are actually needed.
|
|
75
|
+
* This is particularly useful for complex or heavy NodeViews, such as tables, table cells, rows, and headers within
|
|
76
|
+
* the ProseMirror editor. By using dynamic imports (with promises), the initial load time of the editor can be significantly
|
|
77
|
+
* reduced, leading to a smoother and faster user experience.
|
|
78
|
+
*
|
|
79
|
+
* The function accepts configuration parameters including the node name, a loader function that dynamically imports
|
|
80
|
+
* the NodeView, and a function to retrieve NodeView options. It returns a NodeViewConstructor that ProseMirror
|
|
81
|
+
* can use when rendering nodes of the specified type.
|
|
82
|
+
*
|
|
83
|
+
* @template NodeViewOptions - The type parameter that describes the shape of the options object for the NodeView.
|
|
84
|
+
* @param {LazyLoadingProps<NodeViewOptions>} params - Configuration parameters for lazy loading.
|
|
85
|
+
* @param {string} params.nodeName - The name of the node (e.g., 'table', 'tableCell', 'tableHeader', 'tableRow') for which the lazy-loaded NodeView is intended.
|
|
86
|
+
* @param {() => Promise<CreateReactNodeViewProps<NodeViewOptions>>} params.loader - A function that, when called, returns a promise that resolves to the actual NodeView constructor. This function typically uses dynamic `import()` to load the NodeView code.
|
|
87
|
+
* @param {() => NodeViewOptions} params.getNodeViewOptions - A function that returns the options to be passed to the NodeView constructor. These options can include dependencies like `portalProviderAPI`, `eventDispatcher`, and others, which are necessary for the NodeView's operation.
|
|
88
|
+
* @param {DispatchAnalyticsEvent} [params.dispatchAnalyticsEvent] - An optional function for dispatching analytics events, which can be used to monitor the performance and usage of the lazy-loaded NodeViews.
|
|
89
|
+
* @returns {NodeViewConstructor} A constructor function for creating a NodeView that ProseMirror can instantiate when it encounters a node of the specified type. This constructor is a lightweight placeholder until the actual NodeView is loaded.
|
|
90
|
+
*
|
|
91
|
+
* @example
|
|
92
|
+
* // Lazy load a table NodeView with specific options
|
|
93
|
+
* const lazyTableView = withLazyLoading({
|
|
94
|
+
* nodeName: 'table',
|
|
95
|
+
* loader: () => import('./table').then(module => module.createTableView),
|
|
96
|
+
* getNodeViewOptions: () => ({
|
|
97
|
+
* portalProviderAPI,
|
|
98
|
+
* eventDispatcher,
|
|
99
|
+
* getEditorContainerWidth,
|
|
100
|
+
* getEditorFeatureFlags,
|
|
101
|
+
* dispatchAnalyticsEvent,
|
|
102
|
+
* pluginInjectionApi,
|
|
103
|
+
* }),
|
|
104
|
+
* });
|
|
105
|
+
*
|
|
106
|
+
* // Then, use `lazyTableView` in ProseMirror editor setup to enhance 'table' nodes with lazy loading
|
|
107
|
+
*/
|
|
108
|
+
export declare const withLazyLoading: <Options>({ nodeName, loader, getNodeViewOptions, dispatchAnalyticsEvent, }: LazyLoadingProps<Options>) => NodeViewConstructor;
|
|
109
|
+
export {};
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { type EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
2
3
|
export type OnDropdownChange = (isOpen: boolean) => void;
|
|
3
4
|
export type DropdownProps = {
|
|
4
5
|
/** Callback fired when the Configure dropdown item is clicked */
|
|
5
6
|
onConfigureClick: () => void;
|
|
6
7
|
/** Callback fired when the dropdown is open or close */
|
|
7
8
|
onDropdownChange?: OnDropdownChange;
|
|
9
|
+
editorView: EditorView;
|
|
8
10
|
testId: string;
|
|
9
11
|
};
|
|
10
12
|
declare const _default: import("react").ForwardRefExoticComponent<DropdownProps & import("@atlaskit/analytics-next").WithContextProps & import("react").RefAttributes<any>>;
|
|
@@ -1,3 +1 @@
|
|
|
1
1
|
export declare const linkPreferencesPath = "/manage-profile/link-preferences";
|
|
2
|
-
export declare const stagingLinkPreferencesUrl = "https://id.stg.internal.atlassian.com/manage-profile/link-preferences";
|
|
3
|
-
export declare const productionLinkPreferencesUrl = "https://id.atlassian.com/manage-profile/link-preferences";
|
|
@@ -14,6 +14,5 @@ export type { Props as HyperlinkLinkAddToolbarProps } from './LinkPicker/Hyperli
|
|
|
14
14
|
export type { HyperlinkAddToolbarProps } from './LinkPicker/HyperlinkAddToolbar';
|
|
15
15
|
export { sha1 } from './LinkPicker/HyperlinkAddToolbar/utils';
|
|
16
16
|
export { isLinkAtPos, isTextAtPos, getLinkPreferencesURLFromENV } from './utils';
|
|
17
|
-
export { stagingLinkPreferencesUrl, productionLinkPreferencesUrl } from './constants';
|
|
18
17
|
export { OverlayButton } from './ConfigureLinkOverlay';
|
|
19
18
|
export type { OverlayButtonProps } from './ConfigureLinkOverlay';
|
|
@@ -69,6 +69,11 @@ export declare const helpDialogMessages: {
|
|
|
69
69
|
defaultMessage: string;
|
|
70
70
|
description: string;
|
|
71
71
|
};
|
|
72
|
+
openCellOptions: {
|
|
73
|
+
id: string;
|
|
74
|
+
defaultMessage: string;
|
|
75
|
+
description: string;
|
|
76
|
+
};
|
|
72
77
|
focusTableResizeHandle: {
|
|
73
78
|
id: string;
|
|
74
79
|
defaultMessage: string;
|
|
@@ -3,6 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import type { ButtonProps } from '@atlaskit/button/types';
|
|
4
4
|
import type { PositionType } from '@atlaskit/tooltip';
|
|
5
5
|
import { TOOLBAR_ACTION_SUBJECT_ID } from '../../analytics';
|
|
6
|
+
import { type Keymap } from '../../keymaps';
|
|
6
7
|
import type { MenuItem } from '../DropdownMenu';
|
|
7
8
|
export declare const TOOLBAR_BUTTON: typeof TOOLBAR_ACTION_SUBJECT_ID;
|
|
8
9
|
export type Props = {
|
|
@@ -23,6 +24,7 @@ export type Props = {
|
|
|
23
24
|
titlePosition?: PositionType;
|
|
24
25
|
item?: MenuItem;
|
|
25
26
|
testId?: string;
|
|
27
|
+
keymap?: Keymap;
|
|
26
28
|
'aria-label'?: React.AriaAttributes['aria-label'];
|
|
27
29
|
'aria-expanded'?: React.AriaAttributes['aria-expanded'];
|
|
28
30
|
'aria-haspopup'?: React.AriaAttributes['aria-haspopup'];
|
|
@@ -48,6 +50,7 @@ declare const ToolbarButton: React.ForwardRefExoticComponent<{
|
|
|
48
50
|
titlePosition?: PositionType | undefined;
|
|
49
51
|
item?: MenuItem | undefined;
|
|
50
52
|
testId?: string | undefined;
|
|
53
|
+
keymap?: Keymap | undefined;
|
|
51
54
|
'aria-label'?: React.AriaAttributes['aria-label'];
|
|
52
55
|
'aria-expanded'?: React.AriaAttributes['aria-expanded'];
|
|
53
56
|
'aria-haspopup'?: React.AriaAttributes['aria-haspopup'];
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@atlaskit/editor-common/lazy-node-view",
|
|
3
|
+
"main": "../dist/cjs/lazy-node-view/index.js",
|
|
4
|
+
"module": "../dist/esm/lazy-node-view/index.js",
|
|
5
|
+
"module:es2019": "../dist/es2019/lazy-node-view/index.js",
|
|
6
|
+
"sideEffects": false,
|
|
7
|
+
"types": "../dist/types/lazy-node-view/index.d.ts",
|
|
8
|
+
"typesVersions": {
|
|
9
|
+
">=4.5 <5.4": {
|
|
10
|
+
"*": [
|
|
11
|
+
"../dist/types-ts4.5/lazy-node-view/index.d.ts"
|
|
12
|
+
]
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-common",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "86.1.0",
|
|
4
4
|
"description": "A package that contains common classes and components for editor and renderer",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -92,7 +92,8 @@
|
|
|
92
92
|
"./constants": "./src/link/constants.ts",
|
|
93
93
|
"./doc-utils": "./src/doc-utils/index.ts",
|
|
94
94
|
"./expand": "./src/expand/index.ts",
|
|
95
|
-
"./table": "./src/table/index.ts"
|
|
95
|
+
"./table": "./src/table/index.ts",
|
|
96
|
+
"./lazy-node-view": "./src/lazy-node-view/index.ts"
|
|
96
97
|
},
|
|
97
98
|
"dependencies": {
|
|
98
99
|
"@atlaskit/activity-provider": "^2.4.0",
|
|
@@ -137,7 +138,7 @@
|
|
|
137
138
|
"@atlaskit/task-decision": "^17.10.0",
|
|
138
139
|
"@atlaskit/textfield": "^6.4.0",
|
|
139
140
|
"@atlaskit/theme": "^12.11.0",
|
|
140
|
-
"@atlaskit/tokens": "^1.
|
|
141
|
+
"@atlaskit/tokens": "^1.55.0",
|
|
141
142
|
"@atlaskit/tooltip": "^18.5.0",
|
|
142
143
|
"@atlaskit/ufo": "^0.2.0",
|
|
143
144
|
"@atlaskit/width-detector": "^4.2.0",
|
|
@@ -246,7 +247,7 @@
|
|
|
246
247
|
"platform-editor-a11y-image-border-options-dropdown": {
|
|
247
248
|
"type": "boolean"
|
|
248
249
|
},
|
|
249
|
-
"
|
|
250
|
+
"platform_editor_a11y_table_context_menu": {
|
|
250
251
|
"type": "boolean"
|
|
251
252
|
},
|
|
252
253
|
"platform.editor.a11y-main-toolbar-navigation_osrty": {
|
|
@@ -254,9 +255,6 @@
|
|
|
254
255
|
},
|
|
255
256
|
"platform.editor.review-text-highlighting-styling": {
|
|
256
257
|
"type": "boolean"
|
|
257
|
-
},
|
|
258
|
-
"platform.editor.linking-preferences-url-atlassian-context": {
|
|
259
|
-
"type": "boolean"
|
|
260
258
|
}
|
|
261
259
|
}
|
|
262
260
|
}
|