@atlaskit/editor-common 88.6.1 → 88.7.0

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

@@ -1,6 +1,12 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { LazyNodeView } from './node-view';
-import { queueReplaceNodeViews } from './replace-node-views';
 export { convertToInlineCss } from './css-helper';
+/**
+ * 📢 Public Plugin Key
+ *
+ * Communication channel between LazyNodeView loader and LazyNodeViewDecorationPlugin.
+ */
+export const lazyNodeViewDecorationPluginKey = new PluginKey('lazyNodeViewDecoration');
 
 /**
  * 📢 Public Type
@@ -14,6 +20,12 @@ export { convertToInlineCss } from './css-helper';
  * @see {withLazyLoading}
  */
 
+/**
+ * 🧱 Internal: Editor FE Platform
+ *
+ * Caches loaded node view factory functions
+ */
+
 /**
  * 🧱 Internal: Editor FE Platform
  *
@@ -21,6 +33,33 @@ export { convertToInlineCss } from './css-helper';
  */
 const requestedNodesPerEditorView = new WeakMap();
 
+/**
+ * 🧱 Internal: Editor FE Platform
+ *
+ * Caches loaded node view factory functions for each editor view
+ */
+const resolvedNodesPerEditorView = new WeakMap();
+
+/**
+ * 🧱 Internal: Editor FE Platform
+ *
+ * Stores editorView -> raf to debounce NodeView updates.
+ */
+const debounceToEditorViewMap = new WeakMap();
+const testOnlyIgnoreLazyNodeViewSet = new WeakSet();
+/**
+ * 🧱 Internal: Editor FE Platform
+ *
+ * Used in tests to prevent lazy node view being replaced by a real node view.
+ *
+ * This needs to be replaced with proper implementation once LazyNodeView is converted to a plugin.
+ *
+ * @deprecated DO NOT USE THIS OUSIDE TESTS.
+ */
+export function testOnlyIgnoreLazyNodeView(view) {
+  testOnlyIgnoreLazyNodeViewSet.add(view);
+}
+
 /**
  * 📢 Public: Any EditorPlugin can use this function
  *
@@ -64,29 +103,60 @@ const requestedNodesPerEditorView = new WeakMap();
 export const withLazyLoading = ({
   nodeName,
   loader,
-  getNodeViewOptions,
-  dispatchAnalyticsEvent
+  getNodeViewOptions
 }) => {
   const createLazyNodeView = (node, view, getPos, decorations) => {
     var _node$type, _node$type$spec;
     let requestedNodes = requestedNodesPerEditorView.get(view);
     if (!requestedNodes) {
-      requestedNodes = new Set(), requestedNodesPerEditorView.set(view, requestedNodes);
+      requestedNodes = new Map();
+      requestedNodesPerEditorView.set(view, requestedNodes);
+    }
+    const resolvedNodeViews = resolvedNodesPerEditorView.get(view);
+    if (!resolvedNodeViews) {
+      resolvedNodesPerEditorView.set(view, new Map());
     }
     const wasAlreadyRequested = requestedNodes.has(nodeName);
     if (wasAlreadyRequested) {
-      return new LazyNodeView(node, view, getPos);
+      const resolvedNodeView = resolvedNodeViews === null || resolvedNodeViews === void 0 ? void 0 : resolvedNodeViews.get(nodeName);
+      if (resolvedNodeView && !testOnlyIgnoreLazyNodeViewSet.has(view)) {
+        return resolvedNodeView(node, view, getPos, decorations);
+      }
+      return new LazyNodeView(node, view, getPos, requestedNodes.get(nodeName));
     }
-    requestedNodes.add(nodeName);
-    loader().then(nodeViewFuncModule => {
+    const loaderPromise = loader().then(nodeViewFuncModule => {
+      var _resolvedNodesPerEdit;
       const nodeViewFunc = (node, view, getPos, decorations) => {
         return nodeViewFuncModule(node, view, getPos, decorations, getNodeViewOptions);
       };
-      queueReplaceNodeViews(view, {
-        nodeName,
-        nodeViewFunc
+      (_resolvedNodesPerEdit = resolvedNodesPerEditorView.get(view)) === null || _resolvedNodesPerEdit === void 0 ? void 0 : _resolvedNodesPerEdit.set(nodeName, nodeViewFunc);
+
+      /**
+       * Triggering lazyNodeViewDecoration plugin to apply decorations
+       * to nodes with newly loaded NodeViews.
+       */
+      const [raf, nodeTypes] = debounceToEditorViewMap.get(view) || [null, new Set()];
+      if (raf) {
+        cancelAnimationFrame(raf);
+      }
+      nodeTypes.add(node.type.name);
+      const nextRaf = requestAnimationFrame(() => {
+        debounceToEditorViewMap.set(view, [null, new Set()]);
+        const tr = view.state.tr;
+        tr.setMeta(lazyNodeViewDecorationPluginKey, {
+          type: 'add',
+          nodeTypes
+        });
+        view.dispatch(tr);
       });
+      debounceToEditorViewMap.set(view, [nextRaf, nodeTypes]);
+      /**
+       * END triggering LazyNodeViewDecoration plugin
+       */
+
+      return nodeViewFunc;
     });
+    requestedNodes.set(nodeName, loaderPromise);
     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') {
       // TODO: Analytics ED-23982
       // dispatchAnalyticsEvent({
@@ -99,7 +169,7 @@ export const withLazyLoading = ({
       //   },
       // });
     }
-    return new LazyNodeView(node, view, getPos);
+    return new LazyNodeView(node, view, getPos, loaderPromise);
   };
   return createLazyNodeView;
 };

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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import memoize from 'lodash/memoize';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 const getEditorLineWidth = memoize(view => {
@@ -11,17 +12,32 @@ const getEditorLineWidth = memoize(view => {
  * A NodeView that serves as a placeholder until the actual NodeView is loaded.
  */
 export class LazyNodeView {
-  constructor(node, view, getPos) {
+  constructor(_node, view, _getPos, nodeViewLoader) {
     var _node$type, _node$type$spec;
-    this.node = node;
-    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') {
+    _defineProperty(this, "update", node => {
+      const prevNode = this.node;
+      this.node = node;
+
+      // Forcing NodeView to be re-created
+      // so that ProseMirror can replace LazyNodeView with the real one.
+      if (this.isNodeViewLoaded) {
+        return false;
+      }
+
+      // Copying some of the default NodeView update behaviour
+      // https://github.com/ProseMirror/prosemirror-view/blob/cfa73eb969777f63bcb39972594fd4a9110f5a93/src/viewdesc.ts#L803
+      return !this.node.sameMarkup(prevNode);
+    });
+    this.node = _node;
+    this.isNodeViewLoaded = false;
+    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 toDOMConfiguration = {
       editorLineWidth: getEditorLineWidth(view)
     };
-    const fallback = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node,
+    const fallback = DOMSerializer.renderSpec(document, _node.type.spec.toDOM(_node,
     // We are injecting a second parameter to be used by the toDOM lazy node view implementations
     // @ts-expect-error
     toDOMConfiguration));
@@ -30,14 +46,17 @@ export class LazyNodeView {
     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.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');
     }
+    nodeViewLoader.then(() => {
+      this.isNodeViewLoaded = true;
+    });
   }
-  ignoreMutation(mutation) {
+  ignoreMutation() {
     if (this.node.type.isTextblock) {
       return false;
     }

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

@@ -8,7 +8,7 @@ import { useCallback } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
-import { withAnalyticsContext } from '@atlaskit/analytics-next';
+import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import PreferencesIcon from '@atlaskit/icon/glyph/preferences';

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

@@ -7,7 +7,7 @@ import { useCallback, useLayoutEffect, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
-import { withAnalyticsContext } from '@atlaskit/analytics-next';
+import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
 import { N0 } from '@atlaskit/theme/colors';

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

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { FabricChannel } from '@atlaskit/analytics-listeners';
-import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { FabricChannel } from '@atlaskit/analytics-listeners/types';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
 export const useLinkOverlayAnalyticsEvents = () => {
   const {

package/dist/es2019/link/LinkPicker/EditorLinkPicker/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { AnalyticsContext } from '@atlaskit/analytics-next';
+import AnalyticsContext from '@atlaskit/analytics-next/AnalyticsContext';
 import { LazyLinkPicker } from '@atlaskit/link-picker/lazy';
 import { getAnalyticsEditorAppearance } from '../../../utils';
 import { useEscapeClickaway } from './useEscapeClickaway';

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -12,7 +12,7 @@ import debounce from 'lodash/debounce';
 import { flushSync } from 'react-dom';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import { isSafeUrl } from '@atlaskit/adf-schema';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import { Pressable, xcss } from '@atlaskit/primitives';

package/dist/es2019/media-inline/media-inline-image-card.js

@@ -8,7 +8,7 @@ import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
 import ReactDOM from 'react-dom';
 import { createIntl, injectIntl } from 'react-intl-next';
-import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
 import { fireFailedMediaInlineEvent, fireSucceededMediaInlineEvent, MediaCardError } from '@atlaskit/media-card';
 import { FileFetcherError } from '@atlaskit/media-client';
 import { MediaClientContext } from '@atlaskit/media-client-react';

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 = "88.6.1";
+const packageVersion = "88.7.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

@@ -8,11 +8,13 @@ import { Component } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import createAndFireEvent from '@atlaskit/analytics-next/createAndFireEvents';
+import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
+import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "88.6.1";
+const packageVersion = "88.7.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 export const WithCreateAnalyticsEvent = withAnalyticsEvents()(class WithCreateAnalyticsEvent extends React.Component {
   render() {
     const {

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

@@ -6,7 +6,8 @@ import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
+import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Button from '@atlaskit/button/standard-button';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';

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

@@ -8,7 +8,7 @@ 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 { FabricChannel } from '@atlaskit/analytics-listeners/types';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TOOLBAR_ACTION_SUBJECT_ID } from '../../analytics';

package/dist/esm/analytics/fire-analytics-event.js

@@ -1,4 +1,4 @@
-import { FabricChannel } from '@atlaskit/analytics-listeners';
+import { FabricChannel } from '@atlaskit/analytics-listeners/types';
 import { AnalyticsQueue } from './analytics-queue';
 export var editorAnalyticsChannel = FabricChannel.editor;
 export var fireAnalyticsEvent = function fireAnalyticsEvent(createAnalyticsEvent) {

package/dist/esm/element-browser/components/CategoryList.js

@@ -13,7 +13,7 @@ import React, { Fragment, memo, 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 { withAnalyticsContext } from '@atlaskit/analytics-next';
+import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import Button from '@atlaskit/button/custom-theme-button';
 import { B400, B50, N800 } from '@atlaskit/theme/colors';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';

package/dist/esm/element-browser/components/ElementList/ElementList.js

@@ -13,7 +13,7 @@ import { css, jsx } from '@emotion/react';
 import { Grid } from 'react-virtualized';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
 import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
-import { withAnalyticsContext } from '@atlaskit/analytics-next';
+import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { ButtonItem } from '@atlaskit/menu';

package/dist/esm/element-browser/components/ElementSearch.js

@@ -8,7 +8,7 @@ import React, { memo, useLayoutEffect, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { withAnalyticsContext } from '@atlaskit/analytics-next';
+import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import SearchIcon from '@atlaskit/icon/glyph/search';

package/dist/esm/element-browser/components/StatelessElementBrowser.js

@@ -9,7 +9,8 @@ import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
-import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
+import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
 import { DEVICE_BREAKPOINT_NUMBERS, ELEMENT_BROWSER_ID, GRID_SIZE, INLINE_SIDEBAR_HEIGHT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';

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

@@ -1,6 +1,13 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { LazyNodeView } from './node-view';
-import { queueReplaceNodeViews } from './replace-node-views';
 export { convertToInlineCss } from './css-helper';
+/**
+ * 📢 Public Plugin Key
+ *
+ * Communication channel between LazyNodeView loader and LazyNodeViewDecorationPlugin.
+ */
+export var lazyNodeViewDecorationPluginKey = new PluginKey('lazyNodeViewDecoration');
 
 /**
  * 📢 Public Type
@@ -14,6 +21,12 @@ export { convertToInlineCss } from './css-helper';
  * @see {withLazyLoading}
  */
 
+/**
+ * 🧱 Internal: Editor FE Platform
+ *
+ * Caches loaded node view factory functions
+ */
+
 /**
  * 🧱 Internal: Editor FE Platform
  *
@@ -21,6 +34,33 @@ export { convertToInlineCss } from './css-helper';
  */
 var requestedNodesPerEditorView = new WeakMap();
 
+/**
+ * 🧱 Internal: Editor FE Platform
+ *
+ * Caches loaded node view factory functions for each editor view
+ */
+var resolvedNodesPerEditorView = new WeakMap();
+
+/**
+ * 🧱 Internal: Editor FE Platform
+ *
+ * Stores editorView -> raf to debounce NodeView updates.
+ */
+var debounceToEditorViewMap = new WeakMap();
+var testOnlyIgnoreLazyNodeViewSet = new WeakSet();
+/**
+ * 🧱 Internal: Editor FE Platform
+ *
+ * Used in tests to prevent lazy node view being replaced by a real node view.
+ *
+ * This needs to be replaced with proper implementation once LazyNodeView is converted to a plugin.
+ *
+ * @deprecated DO NOT USE THIS OUSIDE TESTS.
+ */
+export function testOnlyIgnoreLazyNodeView(view) {
+  testOnlyIgnoreLazyNodeViewSet.add(view);
+}
+
 /**
  * 📢 Public: Any EditorPlugin can use this function
  *
@@ -64,28 +104,62 @@ var requestedNodesPerEditorView = new WeakMap();
 export var withLazyLoading = function withLazyLoading(_ref) {
   var nodeName = _ref.nodeName,
     loader = _ref.loader,
-    getNodeViewOptions = _ref.getNodeViewOptions,
-    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+    getNodeViewOptions = _ref.getNodeViewOptions;
   var createLazyNodeView = function createLazyNodeView(node, view, getPos, decorations) {
     var _node$type;
     var requestedNodes = requestedNodesPerEditorView.get(view);
     if (!requestedNodes) {
-      requestedNodes = new Set(), requestedNodesPerEditorView.set(view, requestedNodes);
+      requestedNodes = new Map();
+      requestedNodesPerEditorView.set(view, requestedNodes);
+    }
+    var resolvedNodeViews = resolvedNodesPerEditorView.get(view);
+    if (!resolvedNodeViews) {
+      resolvedNodesPerEditorView.set(view, new Map());
     }
     var wasAlreadyRequested = requestedNodes.has(nodeName);
     if (wasAlreadyRequested) {
-      return new LazyNodeView(node, view, getPos);
+      var resolvedNodeView = resolvedNodeViews === null || resolvedNodeViews === void 0 ? void 0 : resolvedNodeViews.get(nodeName);
+      if (resolvedNodeView && !testOnlyIgnoreLazyNodeViewSet.has(view)) {
+        return resolvedNodeView(node, view, getPos, decorations);
+      }
+      return new LazyNodeView(node, view, getPos, requestedNodes.get(nodeName));
     }
-    requestedNodes.add(nodeName);
-    loader().then(function (nodeViewFuncModule) {
+    var loaderPromise = loader().then(function (nodeViewFuncModule) {
+      var _resolvedNodesPerEdit;
       var nodeViewFunc = function nodeViewFunc(node, view, getPos, decorations) {
         return nodeViewFuncModule(node, view, getPos, decorations, getNodeViewOptions);
       };
-      queueReplaceNodeViews(view, {
-        nodeName: nodeName,
-        nodeViewFunc: nodeViewFunc
+      (_resolvedNodesPerEdit = resolvedNodesPerEditorView.get(view)) === null || _resolvedNodesPerEdit === void 0 || _resolvedNodesPerEdit.set(nodeName, nodeViewFunc);
+
+      /**
+       * Triggering lazyNodeViewDecoration plugin to apply decorations
+       * to nodes with newly loaded NodeViews.
+       */
+      var _ref2 = debounceToEditorViewMap.get(view) || [null, new Set()],
+        _ref3 = _slicedToArray(_ref2, 2),
+        raf = _ref3[0],
+        nodeTypes = _ref3[1];
+      if (raf) {
+        cancelAnimationFrame(raf);
+      }
+      nodeTypes.add(node.type.name);
+      var nextRaf = requestAnimationFrame(function () {
+        debounceToEditorViewMap.set(view, [null, new Set()]);
+        var tr = view.state.tr;
+        tr.setMeta(lazyNodeViewDecorationPluginKey, {
+          type: 'add',
+          nodeTypes: nodeTypes
+        });
+        view.dispatch(tr);
       });
+      debounceToEditorViewMap.set(view, [nextRaf, nodeTypes]);
+      /**
+       * END triggering LazyNodeViewDecoration plugin
+       */
+
+      return nodeViewFunc;
     });
+    requestedNodes.set(nodeName, loaderPromise);
     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') {
       // TODO: Analytics ED-23982
       // dispatchAnalyticsEvent({
@@ -98,7 +172,7 @@ export var withLazyLoading = function withLazyLoading(_ref) {
       //   },
       // });
     }
-    return new LazyNodeView(node, view, getPos);
+    return new LazyNodeView(node, view, getPos, loaderPromise);
   };
   return createLazyNodeView;
 };

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

@@ -1,5 +1,6 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import memoize from 'lodash/memoize';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 var getEditorLineWidth = memoize(function (view) {
@@ -13,18 +14,34 @@ var getEditorLineWidth = memoize(function (view) {
  * A NodeView that serves as a placeholder until the actual NodeView is loaded.
  */
 export var LazyNodeView = /*#__PURE__*/function () {
-  function LazyNodeView(node, view, getPos) {
-    var _node$type;
+  function LazyNodeView(_node, view, _getPos, nodeViewLoader) {
+    var _this = this,
+      _node$type;
     _classCallCheck(this, LazyNodeView);
-    this.node = node;
-    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') {
+    _defineProperty(this, "update", function (node) {
+      var prevNode = _this.node;
+      _this.node = node;
+
+      // Forcing NodeView to be re-created
+      // so that ProseMirror can replace LazyNodeView with the real one.
+      if (_this.isNodeViewLoaded) {
+        return false;
+      }
+
+      // Copying some of the default NodeView update behaviour
+      // https://github.com/ProseMirror/prosemirror-view/blob/cfa73eb969777f63bcb39972594fd4a9110f5a93/src/viewdesc.ts#L803
+      return !_this.node.sameMarkup(prevNode);
+    });
+    this.node = _node;
+    this.isNodeViewLoaded = false;
+    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 toDOMConfiguration = {
       editorLineWidth: getEditorLineWidth(view)
     };
-    var fallback = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node,
+    var fallback = DOMSerializer.renderSpec(document, _node.type.spec.toDOM(_node,
     // We are injecting a second parameter to be used by the toDOM lazy node view implementations
     // @ts-expect-error
     toDOMConfiguration));
@@ -33,16 +50,19 @@ export var LazyNodeView = /*#__PURE__*/function () {
     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.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');
     }
+    nodeViewLoader.then(function () {
+      _this.isNodeViewLoaded = true;
+    });
   }
   _createClass(LazyNodeView, [{
     key: "ignoreMutation",
-    value: function ignoreMutation(mutation) {
+    value: function ignoreMutation() {
       if (this.node.type.isTextblock) {
         return false;
       }

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

@@ -10,7 +10,7 @@ import { useCallback } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
-import { withAnalyticsContext } from '@atlaskit/analytics-next';
+import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import PreferencesIcon from '@atlaskit/icon/glyph/preferences';

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

@@ -8,7 +8,7 @@ import { useCallback, useLayoutEffect, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
-import { withAnalyticsContext } from '@atlaskit/analytics-next';
+import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
 import { N0 } from '@atlaskit/theme/colors';

package/dist/esm/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.js

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { FabricChannel } from '@atlaskit/analytics-listeners';
-import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { FabricChannel } from '@atlaskit/analytics-listeners/types';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
 export var useLinkOverlayAnalyticsEvents = function useLinkOverlayAnalyticsEvents() {
   var _useAnalyticsEvents = useAnalyticsEvents(),

package/dist/esm/link/LinkPicker/EditorLinkPicker/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["view", "onCancel", "invokeMethod", "editorAppearance", "onClose", "onEscapeCallback", "onClickAwayCallback"];
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { AnalyticsContext } from '@atlaskit/analytics-next';
+import AnalyticsContext from '@atlaskit/analytics-next/AnalyticsContext';
 import { LazyLinkPicker } from '@atlaskit/link-picker/lazy';
 import { getAnalyticsEditorAppearance } from '../../../utils';
 import { useEscapeClickaway } from './useEscapeClickaway';

package/dist/esm/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -24,7 +24,7 @@ import debounce from 'lodash/debounce';
 import { flushSync } from 'react-dom';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import { isSafeUrl } from '@atlaskit/adf-schema';
-import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import { Pressable, xcss } from '@atlaskit/primitives';

package/dist/esm/media-inline/media-inline-image-card.js

@@ -12,7 +12,7 @@ import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { jsx } from '@emotion/react';
 import ReactDOM from 'react-dom';
 import { createIntl, injectIntl } from 'react-intl-next';
-import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
 import { fireFailedMediaInlineEvent, fireSucceededMediaInlineEvent, MediaCardError } from '@atlaskit/media-card';
 import { FileFetcherError } from '@atlaskit/media-client';
 import { MediaClientContext } from '@atlaskit/media-client-react';