@atlaskit/editor-common 86.0.0 → 86.1.0

package/dist/types-ts4.5/lazy-node-view/index.d.ts

@@ -0,0 +1,109 @@
+/// <reference types="lodash" />
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Decoration, DecorationSource, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import type { DispatchAnalyticsEvent } from '../analytics';
+/**
+ * 📢 Public Type
+ *
+ * @see {withLazyLoading}
+ */
+export type CreateReactNodeViewProps<NodeViewOptions> = (node: PMNode, view: EditorView, getPos: () => number | undefined, decorations: readonly Decoration[], getNodeViewOptions: () => NodeViewOptions) => NodeView;
+/**
+ * 📢 Public Type
+ *
+ * @see {withLazyLoading}
+ */
+export type LazyLoadingProps<NodeViewOptions> = {
+    nodeName: string;
+    loader: () => Promise<CreateReactNodeViewProps<NodeViewOptions>>;
+    getNodeViewOptions: () => NodeViewOptions;
+    dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
+};
+/**
+ * 🧱 Internal: Editor FE Platform
+ */
+export type NodeViewConstructor = (node: PMNode, view: EditorView, getPos: () => number | undefined, decorations: readonly Decoration[], innerDecorations: DecorationSource) => NodeView;
+/**
+ * 🧱 Internal: Editor FE Platform
+ */
+type LoadedReactNodeViews = Record<string, NodeViewConstructor>;
+/**
+ * 🧱 Internal: Editor FE Platform
+ */
+type CacheType = WeakMap<EditorView, LoadedReactNodeViews>;
+/**
+ * 🧱 Internal: Editor FE Platform
+ *
+ * Debounces and replaces the node views in a ProseMirror editor with lazy-loaded node views.
+ *
+ * This function is used to update the `nodeViews` property of the `EditorView` after lazy-loaded
+ * node views have been loaded. It uses a debounced approach to ensure that the replacement does
+ * not happen too frequently, which can be performance-intensive.
+ *
+ * The function checks if there are any loaded node views in the cache associated with the given
+ * `EditorView`. If there are, it replaces the current `nodeViews` in the `EditorView` with the
+ * loaded node views. The replacement is scheduled using `requestIdleCallback` or
+ * `requestAnimationFrame` to avoid blocking the main thread, especially in Firefox where
+ * `requestIdleCallback` may not be supported.
+ *
+ * @param {WeakMap<EditorView, Record<string, NodeViewConstructor>>} cache - A WeakMap that stores
+ *        the loaded node views for each `EditorView`. The key is the `EditorView`, and the value
+ *        is a record of node type names to their corresponding `NodeViewConstructor`.
+ * @param {EditorView} view - The ProseMirror `EditorView` instance whose `nodeViews` property
+ *        needs to be updated.
+ *
+ * @example
+ * const cache = new WeakMap();
+ * const view = new EditorView(...);
+ *
+ * // Assume some node views have been loaded and stored in the cache
+ * cache.set(view, {
+ *   'table': TableViewConstructor,
+ *   'tableCell': TableCellViewConstructor,
+ * });
+ *
+ * debouncedReplaceNodeviews(cache, view);
+ */
+export declare const debouncedReplaceNodeviews: import("lodash").DebouncedFunc<(cache: CacheType, view: EditorView) => void>;
+/**
+ * 📢 Public: Any EditorPlugin can use this function
+ *
+ * Wraps a NodeView constructor with laziness, allowing the NodeView to be loaded only when required.
+ *
+ * This higher-order function is designed to optimize the loading and rendering performance
+ * of ProseMirror editor nodes by deferring the loading of their associated NodeViews until they are actually needed.
+ * This is particularly useful for complex or heavy NodeViews, such as tables, table cells, rows, and headers within
+ * the ProseMirror editor. By using dynamic imports (with promises), the initial load time of the editor can be significantly
+ * reduced, leading to a smoother and faster user experience.
+ *
+ * The function accepts configuration parameters including the node name, a loader function that dynamically imports
+ * the NodeView, and a function to retrieve NodeView options. It returns a NodeViewConstructor that ProseMirror
+ * can use when rendering nodes of the specified type.
+ *
+ * @template NodeViewOptions - The type parameter that describes the shape of the options object for the NodeView.
+ * @param {LazyLoadingProps<NodeViewOptions>} params - Configuration parameters for lazy loading.
+ * @param {string} params.nodeName - The name of the node (e.g., 'table', 'tableCell', 'tableHeader', 'tableRow') for which the lazy-loaded NodeView is intended.
+ * @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.
+ * @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.
+ * @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.
+ * @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.
+ *
+ * @example
+ * // Lazy load a table NodeView with specific options
+ * const lazyTableView = withLazyLoading({
+ *   nodeName: 'table',
+ *   loader: () => import('./table').then(module => module.createTableView),
+ *   getNodeViewOptions: () => ({
+ *     portalProviderAPI,
+ *     eventDispatcher,
+ *     getEditorContainerWidth,
+ *     getEditorFeatureFlags,
+ *     dispatchAnalyticsEvent,
+ *     pluginInjectionApi,
+ *   }),
+ * });
+ *
+ * // Then, use `lazyTableView` in ProseMirror editor setup to enhance 'table' nodes with lazy loading
+ */
+export declare const withLazyLoading: <Options>({ nodeName, loader, getNodeViewOptions, dispatchAnalyticsEvent, }: LazyLoadingProps<Options>) => NodeViewConstructor;
+export {};

package/dist/types-ts4.5/link/ConfigureLinkOverlay/Dropdown.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 export type OnDropdownChange = (isOpen: boolean) => void;
 export type DropdownProps = {
     /** Callback fired when the Configure dropdown item is clicked */
     onConfigureClick: () => void;
     /** Callback fired when the dropdown is open or close */
     onDropdownChange?: OnDropdownChange;
+    editorView: EditorView;
     testId: string;
 };
 declare const _default: import("react").ForwardRefExoticComponent<DropdownProps & import("@atlaskit/analytics-next").WithContextProps & import("react").RefAttributes<any>>;

package/dist/types-ts4.5/messages/help-dialog.d.ts

@@ -69,6 +69,11 @@ export declare const helpDialogMessages: {
         defaultMessage: string;
         description: string;
     };
+    openCellOptions: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     focusTableResizeHandle: {
         id: string;
         defaultMessage: string;

package/dist/types-ts4.5/ui-menu/ToolbarButton/index.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 import type { ButtonProps } from '@atlaskit/button/types';
 import type { PositionType } from '@atlaskit/tooltip';
 import { TOOLBAR_ACTION_SUBJECT_ID } from '../../analytics';
+import { type Keymap } from '../../keymaps';
 import type { MenuItem } from '../DropdownMenu';
 export declare const TOOLBAR_BUTTON: typeof TOOLBAR_ACTION_SUBJECT_ID;
 export type Props = {
@@ -23,6 +24,7 @@ export type Props = {
     titlePosition?: PositionType;
     item?: MenuItem;
     testId?: string;
+    keymap?: Keymap;
     'aria-label'?: React.AriaAttributes['aria-label'];
     'aria-expanded'?: React.AriaAttributes['aria-expanded'];
     'aria-haspopup'?: React.AriaAttributes['aria-haspopup'];
@@ -48,6 +50,7 @@ declare const ToolbarButton: React.ForwardRefExoticComponent<{
     titlePosition?: PositionType | undefined;
     item?: MenuItem | undefined;
     testId?: string | undefined;
+    keymap?: Keymap | undefined;
     'aria-label'?: React.AriaAttributes['aria-label'];
     'aria-expanded'?: React.AriaAttributes['aria-expanded'];
     'aria-haspopup'?: React.AriaAttributes['aria-haspopup'];

package/lazy-node-view/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/editor-common/lazy-node-view",
+  "main": "../dist/cjs/lazy-node-view/index.js",
+  "module": "../dist/esm/lazy-node-view/index.js",
+  "module:es2019": "../dist/es2019/lazy-node-view/index.js",
+  "sideEffects": false,
+  "types": "../dist/types/lazy-node-view/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.4": {
+      "*": [
+        "../dist/types-ts4.5/lazy-node-view/index.d.ts"
+      ]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "86.0.0",
+	"version": "86.1.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -92,7 +92,8 @@
 		"./constants": "./src/link/constants.ts",
 		"./doc-utils": "./src/doc-utils/index.ts",
 		"./expand": "./src/expand/index.ts",
-		"./table": "./src/table/index.ts"
+		"./table": "./src/table/index.ts",
+		"./lazy-node-view": "./src/lazy-node-view/index.ts"
 	},
 	"dependencies": {
 		"@atlaskit/activity-provider": "^2.4.0",
@@ -246,7 +247,7 @@
 		"platform-editor-a11y-image-border-options-dropdown": {
 			"type": "boolean"
 		},
-		"platform.editor.a11y-table-context-menu_y4c9c": {
+		"platform_editor_a11y_table_context_menu": {
 			"type": "boolean"
 		},
 		"platform.editor.a11y-main-toolbar-navigation_osrty": {