@atlaskit/editor-common 86.0.0 → 86.2.0

package/dist/es2019/lazy-node-view/index.js

@@ -0,0 +1,212 @@
+import debounce from 'lodash/debounce';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+
+/**
+ * 📢 Public Type
+ *
+ * @see {withLazyLoading}
+ */
+
+/**
+ * 📢 Public Type
+ *
+ * @see {withLazyLoading}
+ */
+
+/**
+ * 🧱 Internal: Editor FE Platform
+ */
+
+/**
+ * 🧱 Internal: Editor FE Platform
+ */
+
+/**
+ * 🧱 Internal: Editor FE Platform
+ */
+
+/**
+ * 🧱 Internal: Editor FE Platform
+ *
+ * A cache to store loaded React NodeViews for each EditorView.
+ *
+ * This cache will help us to avoid any race condition
+ * when multiple Editors exist in the same page.
+ *
+ * @type {CacheType}
+ */
+const cachePerEditorView = new WeakMap();
+
+/**
+ * 🧱 Internal: Editor FE Platform
+ */
+const isFirefox = /gecko\/\d/i.test(navigator.userAgent);
+
+/**
+ * 🧱 Internal: Editor FE Platform
+ *
+ * A NodeView that serves as a placeholder until the actual NodeView is loaded.
+ */
+class LazyNodeView {
+  constructor(node, view, getPos) {
+    var _node$type, _node$type$spec;
+    if (typeof ((_node$type = node.type) === null || _node$type === void 0 ? void 0 : (_node$type$spec = _node$type.spec) === null || _node$type$spec === void 0 ? void 0 : _node$type$spec.toDOM) !== 'function') {
+      this.dom = document.createElement('div');
+      return;
+    }
+    const fallback = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node));
+    this.dom = fallback.dom;
+    this.contentDOM = fallback.contentDOM;
+    if (this.dom instanceof HTMLElement) {
+      // This attribute is mostly used for debugging purposed
+      // It will help us to found out when the node was replaced
+      this.dom.setAttribute('data-lazy-node-view', node.type.name);
+      // This is used on Libra tests
+      // We are using this to make sure all lazy noded were replaced
+      // before the test started
+      this.dom.setAttribute('data-lazy-node-view-fallback', 'true');
+    }
+  }
+}
+
+/**
+ * 🧱 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 const debouncedReplaceNodeviews = debounce((cache, view) => {
+  const loadedNodeviews = cache.get(view);
+  if (!loadedNodeviews) {
+    return;
+  }
+  cache.delete(view);
+
+  // eslint-disable-next-line compat/compat
+  const idle = window.requestIdleCallback;
+
+  /*
+   * For reasons that goes beyond my knowledge
+   * some Firefox versions aren't calling the requestIdleCallback.
+   *
+   * So, we need this check to make sure we use the requestAnimationFrame instead
+   */
+  const later = isFirefox || typeof idle !== 'function' ? window.requestAnimationFrame : idle;
+  later(() => {
+    const currentNodeViews = view.props.nodeViews;
+    const nextNodeViews = {
+      ...currentNodeViews,
+      ...loadedNodeviews
+    };
+    view.setProps({
+      nodeViews: nextNodeViews
+    });
+  });
+});
+
+/**
+ * 📢 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 const withLazyLoading = ({
+  nodeName,
+  loader,
+  getNodeViewOptions,
+  dispatchAnalyticsEvent
+}) => {
+  const createLazyNodeView = (node, view, getPos, decorations) => {
+    var _node$type2, _node$type2$spec;
+    let cachedMap = cachePerEditorView.get(view);
+    if (!cachedMap) {
+      cachedMap = {};
+      cachePerEditorView.set(view, cachedMap);
+    }
+    const wasAlreadyRequested = cachedMap.hasOwnProperty(nodeName);
+    if (wasAlreadyRequested) {
+      return new LazyNodeView(node, view, getPos);
+    }
+    loader().then(nodeViewFuncModule => {
+      cachedMap[nodeName] = (node, view, getPos, decorations) => {
+        return nodeViewFuncModule(node, view, getPos, decorations, getNodeViewOptions);
+      };
+      debouncedReplaceNodeviews(cachePerEditorView, view);
+    });
+    if (typeof ((_node$type2 = node.type) === null || _node$type2 === void 0 ? void 0 : (_node$type2$spec = _node$type2.spec) === null || _node$type2$spec === void 0 ? void 0 : _node$type2$spec.toDOM) !== 'function') {
+      // TODO: Analytics ED-23982
+      // dispatchAnalyticsEvent({
+      //   action: ACTION.LAZY_NODE_VIEW_ERROR,
+      //   actionSubject: ACTION_SUBJECT.LAZY_NODE_VIEW,
+      //   eventType: EVENT_TYPE.OPERATIONAL,
+      //   attributes: {
+      //     nodeName,
+      //     error: 'No spec found',
+      //   },
+      // });
+    }
+    return new LazyNodeView(node, view, getPos);
+  };
+  return createLazyNodeView;
+};

package/dist/es2019/link/ConfigureLinkOverlay/Dropdown.js

@@ -17,6 +17,7 @@ const SMALL_LINK_TOOLBAR_ANALYTICS_SOURCE = 'smallLinkToolbar';
 const Dropdown = ({
   onConfigureClick: onConfigureClickCallback,
   onDropdownChange,
+  editorView,
   testId
 }) => {
   const {
@@ -29,21 +30,33 @@ const Dropdown = ({
     fireLinkClickEvent,
     fireToolbarViewEvent
   } = useLinkOverlayAnalyticsEvents();
+  const focusEditor = useCallback(() => {
+    // Fix dropdown giving focus back to the trigger async which is then unmounted and losing focus
+    // this is happening deep within atlaskit dropdown as a result of this code: https://github.com/focus-trap/focus-trap/blob/master/index.js#L987
+    // use setTimeout to run this async after that call
+    setTimeout(() => editorView.focus(), 0);
+  }, [editorView]);
   const onOpenChange = useCallback(({
-    isOpen
+    isOpen,
+    event
   }) => {
     onDropdownChange === null || onDropdownChange === void 0 ? void 0 : onDropdownChange(isOpen);
     if (isOpen) {
       fireToolbarViewEvent();
     }
-  }, [fireToolbarViewEvent, onDropdownChange]);
+    if (!isOpen && event instanceof KeyboardEvent) {
+      focusEditor();
+    }
+  }, [fireToolbarViewEvent, focusEditor, onDropdownChange]);
   const onGoToLinkClick = useCallback(() => {
     fireActionClickEvent('goToLink');
-  }, [fireActionClickEvent]);
+    focusEditor();
+  }, [fireActionClickEvent, focusEditor]);
   const onConfigureClick = useCallback(() => {
     fireActionClickEvent('configureLink');
     onConfigureClickCallback === null || onConfigureClickCallback === void 0 ? void 0 : onConfigureClickCallback();
-  }, [fireActionClickEvent, onConfigureClickCallback]);
+    focusEditor();
+  }, [fireActionClickEvent, focusEditor, onConfigureClickCallback]);
   return jsx(DropdownMenu, {
     trigger: ({
       onClick,

package/dist/es2019/link/ConfigureLinkOverlay/index.js

@@ -86,7 +86,8 @@ export const OverlayButton = withAnalyticsContext()(({
   }, showDropdown ? jsx(Dropdown, {
     testId: testId,
     onConfigureClick: handleConfigureClick,
-    onDropdownChange: onDropdownChange
+    onDropdownChange: onDropdownChange,
+    editorView: editorView
   }) : jsx(Tooltip, {
     content: configureLinkLabel,
     hideTooltipOnClick: true,

package/dist/es2019/messages/help-dialog.js

@@ -70,6 +70,11 @@ export const helpDialogMessages = defineMessages({
     defaultMessage: 'Decrease table or media size',
     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.'
   },
+  openCellOptions: {
+    id: 'fabric.editor.openCellOptions',
+    defaultMessage: 'Open cell options',
+    description: 'Keyboard shortcut to open cell options.'
+  },
   focusTableResizeHandle: {
     id: 'fabric.editor.focusTableResizeHandle',
     defaultMessage: 'Focus table resize handle',

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "86.0.0";
+const packageVersion = "86.2.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/ui/DropList/index.js

@@ -9,7 +9,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "86.0.0";
+const packageVersion = "86.2.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/ui/WidthProvider/index.js

@@ -3,6 +3,7 @@ import React, { Fragment } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import memoizeOne from 'memoize-one';
 import rafSchedule from 'raf-schd';
 import { WidthObserver } from '@atlaskit/width-detector';
 const styles = css({
@@ -31,14 +32,29 @@ const {
   Provider,
   Consumer
 } = WidthContext;
+/**
+ * 🧱 Internal function: Editor FE Platform
+ *
+ * Returns the width of the document body.
+ *
+ * This function is memoized to avoid forcing a layout reflow multiple times.
+ * It uses `document.body.offsetWidth` as the source of the width, which can lead to
+ * a layout reflow if accessed repeatedly. To mitigate performance issues, the result
+ * is cached using `memoizeOne`.
+ *
+ * @returns {number} The width of the document body or 0 if the document is undefined.
+ */
+const getBodyWidth = memoizeOne(() => {
+  var _document$body$offset, _document$body;
+  return typeof document !== 'undefined' ? (_document$body$offset = (_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 0 : 0;
+});
 export const WidthProvider = ({
   className,
   shouldCheckExistingValue,
   children
 }) => {
-  var _document$body$offset, _document$body;
   const existingContextValue = React.useContext(WidthContext);
-  const [width, setWidth] = React.useState(typeof document !== 'undefined' ? (_document$body$offset = (_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 0 : 0);
+  const [width, setWidth] = React.useState(getBodyWidth);
   const widthRef = React.useRef(width);
   const isMountedRef = React.useRef(true);
   const providerValue = React.useMemo(() => createWidthContext(width), [width]);

package/dist/es2019/ui-menu/DropdownMenu/index.js

@@ -106,7 +106,7 @@ export default class DropdownMenuWrapper extends PureComponent {
     _defineProperty(this, "handleCloseAndFocus", event => {
       var _this$state$target, _this$state$target$qu;
       (_this$state$target = this.state.target) === null || _this$state$target === void 0 ? void 0 : (_this$state$target$qu = _this$state$target.querySelector('button')) === null || _this$state$target$qu === void 0 ? void 0 : _this$state$target$qu.focus();
-      if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
+      if (fg('platform_editor_a11y_table_context_menu')) {
         this.handleClose(event);
       } else {
         this.handleClose();
@@ -117,7 +117,7 @@ export default class DropdownMenuWrapper extends PureComponent {
         onOpenChange
       } = this.props;
       if (onOpenChange) {
-        if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
+        if (fg('platform_editor_a11y_table_context_menu')) {
           onOpenChange({
             isOpen: false,
             event: event
@@ -195,7 +195,7 @@ export default class DropdownMenuWrapper extends PureComponent {
       handleClickOutside: this.handleClose,
       handleEscapeKeydown: fg('platform-editor-a11y-image-border-options-dropdown') ? handleEscapeKeydown || this.handleCloseAndFocus : this.handleCloseAndFocus,
       handleEnterKeydown: e => {
-        if (fg('platform.editor.a11y-table-context-menu_y4c9c') || fg('platform-editor-a11y-image-border-options-dropdown')) {
+        if (fg('platform_editor_a11y_table_context_menu') || fg('platform-editor-a11y-image-border-options-dropdown')) {
           if (!allowEnterDefaultBehavior) {
             e.preventDefault();
           }
@@ -353,7 +353,7 @@ export function DropdownMenuItem({
     onMouseLeave: () => onMouseLeave && onMouseLeave({
       item
     }),
-    "aria-expanded": fg('platform.editor.a11y-table-context-menu_y4c9c') ? item['aria-expanded'] : undefined
+    "aria-expanded": fg('platform_editor_a11y_table_context_menu') ? item['aria-expanded'] : undefined
   }, item.content));
   if (item.tooltipDescription) {
     var _item$key3;

package/dist/es2019/ui-menu/ToolbarButton/index.js

@@ -6,8 +6,10 @@ import React, { useCallback } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TOOLBAR_ACTION_SUBJECT_ID } from '../../analytics';
+import { ToolTipContent } from '../../keymaps';
 import Button from './styles';
 export const TOOLBAR_BUTTON = TOOLBAR_ACTION_SUBJECT_ID;
 const buttonWrapper = css({
@@ -29,6 +31,7 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     children,
     hideTooltip,
     title,
+    keymap,
     titlePosition = 'top',
     item,
     'aria-label': ariaLabel,
@@ -88,7 +91,10 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
   if (!title) {
     return button;
   }
-  const tooltipContent = !hideTooltip ? title : null;
+  const tooltipContent = hideTooltip ? null : fg('platform_editor_a11y_table_context_menu') ? jsx(ToolTipContent, {
+    description: title,
+    keymap: keymap
+  }) : title;
   return jsx(Tooltip, {
     content: tooltipContent,
     hideTooltipOnClick: true,

package/dist/es2019/utils/index.js

@@ -221,4 +221,5 @@ export { transformNodeIntoListItem } from './insert-node-into-ordered-list';
 export { wrapSelectionIn } from './wrap-selection-in';
 export { toJSON, nodeToJSON } from './nodes';
 export { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from './calculate-toolbar-position';
-export { findNodePosByLocalIds } from './nodes-by-localIds';
+export { findNodePosByLocalIds } from './nodes-by-localIds';
+export { getPageElementCounts } from './page-element-counts';

package/dist/es2019/utils/page-element-counts.js

@@ -0,0 +1,38 @@
+import { reduce } from '@atlaskit/adf-utils/traverse';
+/**
+ * Traverses a JSON document and counts the number of unique elements, text formatting and macros.
+ *
+ **/
+export const getPageElementCounts = doc => {
+  const pageElementCounts = {
+    elements: {},
+    textFormats: {},
+    macros: {}
+  };
+  reduce(doc, (acc, node) => {
+    if (node.type === 'text') {
+      var _acc$elements$node$ty;
+      if (node.marks) {
+        node.marks.forEach(mark => {
+          var _acc$textFormats$mark;
+          const markType = mark.type;
+          acc.textFormats[markType] = ((_acc$textFormats$mark = acc.textFormats[markType]) !== null && _acc$textFormats$mark !== void 0 ? _acc$textFormats$mark : 0) + 1;
+        });
+      }
+      acc.elements[node.type] = ((_acc$elements$node$ty = acc.elements[node.type]) !== null && _acc$elements$node$ty !== void 0 ? _acc$elements$node$ty : 0) + 1;
+    }
+    // If the node is a 'macro'or extension
+    else if (node.type === 'extension' || node.type === 'inlineExtension' || node.type === 'bodiedExtension' || node.type === 'multiBodiedExtension' || node.type === 'extensionFrame') {
+      if ('attrs' in node && node.attrs && 'extensionKey' in node.attrs && node.attrs.extensionKey) {
+        var _acc$macros$extension;
+        const extensionKey = node.attrs.extensionKey;
+        acc.macros[extensionKey] = ((_acc$macros$extension = acc.macros[extensionKey]) !== null && _acc$macros$extension !== void 0 ? _acc$macros$extension : 0) + 1;
+      }
+    } else {
+      var _acc$elements$node$ty2;
+      acc.elements[node.type] = ((_acc$elements$node$ty2 = acc.elements[node.type]) !== null && _acc$elements$node$ty2 !== void 0 ? _acc$elements$node$ty2 : 0) + 1;
+    }
+    return acc;
+  }, pageElementCounts);
+  return pageElementCounts;
+};

package/dist/esm/lazy-node-view/index.js

@@ -0,0 +1,211 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+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; }
+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; }
+import debounce from 'lodash/debounce';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+
+/**
+ * 📢 Public Type
+ *
+ * @see {withLazyLoading}
+ */
+
+/**
+ * 📢 Public Type
+ *
+ * @see {withLazyLoading}
+ */
+
+/**
+ * 🧱 Internal: Editor FE Platform
+ */
+
+/**
+ * 🧱 Internal: Editor FE Platform
+ */
+
+/**
+ * 🧱 Internal: Editor FE Platform
+ */
+
+/**
+ * 🧱 Internal: Editor FE Platform
+ *
+ * A cache to store loaded React NodeViews for each EditorView.
+ *
+ * This cache will help us to avoid any race condition
+ * when multiple Editors exist in the same page.
+ *
+ * @type {CacheType}
+ */
+var cachePerEditorView = new WeakMap();
+
+/**
+ * 🧱 Internal: Editor FE Platform
+ */
+var isFirefox = /gecko\/\d/i.test(navigator.userAgent);
+
+/**
+ * 🧱 Internal: Editor FE Platform
+ *
+ * A NodeView that serves as a placeholder until the actual NodeView is loaded.
+ */
+var LazyNodeView = /*#__PURE__*/_createClass(function LazyNodeView(node, view, getPos) {
+  var _node$type;
+  _classCallCheck(this, LazyNodeView);
+  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') {
+    this.dom = document.createElement('div');
+    return;
+  }
+  var fallback = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node));
+  this.dom = fallback.dom;
+  this.contentDOM = fallback.contentDOM;
+  if (this.dom instanceof HTMLElement) {
+    // This attribute is mostly used for debugging purposed
+    // It will help us to found out when the node was replaced
+    this.dom.setAttribute('data-lazy-node-view', node.type.name);
+    // This is used on Libra tests
+    // We are using this to make sure all lazy noded were replaced
+    // before the test started
+    this.dom.setAttribute('data-lazy-node-view-fallback', 'true');
+  }
+});
+/**
+ * 🧱 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 var debouncedReplaceNodeviews = debounce(function (cache, view) {
+  var loadedNodeviews = cache.get(view);
+  if (!loadedNodeviews) {
+    return;
+  }
+  cache.delete(view);
+
+  // eslint-disable-next-line compat/compat
+  var idle = window.requestIdleCallback;
+
+  /*
+   * For reasons that goes beyond my knowledge
+   * some Firefox versions aren't calling the requestIdleCallback.
+   *
+   * So, we need this check to make sure we use the requestAnimationFrame instead
+   */
+  var later = isFirefox || typeof idle !== 'function' ? window.requestAnimationFrame : idle;
+  later(function () {
+    var currentNodeViews = view.props.nodeViews;
+    var nextNodeViews = _objectSpread(_objectSpread({}, currentNodeViews), loadedNodeviews);
+    view.setProps({
+      nodeViews: nextNodeViews
+    });
+  });
+});
+
+/**
+ * 📢 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 var withLazyLoading = function withLazyLoading(_ref) {
+  var nodeName = _ref.nodeName,
+    loader = _ref.loader,
+    getNodeViewOptions = _ref.getNodeViewOptions,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+  var createLazyNodeView = function createLazyNodeView(node, view, getPos, decorations) {
+    var _node$type2;
+    var cachedMap = cachePerEditorView.get(view);
+    if (!cachedMap) {
+      cachedMap = {};
+      cachePerEditorView.set(view, cachedMap);
+    }
+    var wasAlreadyRequested = cachedMap.hasOwnProperty(nodeName);
+    if (wasAlreadyRequested) {
+      return new LazyNodeView(node, view, getPos);
+    }
+    loader().then(function (nodeViewFuncModule) {
+      cachedMap[nodeName] = function (node, view, getPos, decorations) {
+        return nodeViewFuncModule(node, view, getPos, decorations, getNodeViewOptions);
+      };
+      debouncedReplaceNodeviews(cachePerEditorView, view);
+    });
+    if (typeof ((_node$type2 = node.type) === null || _node$type2 === void 0 || (_node$type2 = _node$type2.spec) === null || _node$type2 === void 0 ? void 0 : _node$type2.toDOM) !== 'function') {
+      // TODO: Analytics ED-23982
+      // dispatchAnalyticsEvent({
+      //   action: ACTION.LAZY_NODE_VIEW_ERROR,
+      //   actionSubject: ACTION_SUBJECT.LAZY_NODE_VIEW,
+      //   eventType: EVENT_TYPE.OPERATIONAL,
+      //   attributes: {
+      //     nodeName,
+      //     error: 'No spec found',
+      //   },
+      // });
+    }
+    return new LazyNodeView(node, view, getPos);
+  };
+  return createLazyNodeView;
+};